-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathotaku.html
More file actions
170 lines (157 loc) · 7.27 KB
/
Copy pathotaku.html
File metadata and controls
170 lines (157 loc) · 7.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte d'Identité Otaku - Naruto</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
}
.bg-naruto {
background: linear-gradient(135deg, #F57C00, #000000, #B0BEC5);
position: relative;
overflow: hidden;
}
.shuriken, .kunai {
position: absolute;
opacity: 0.2;
}
.shuriken {
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpolygon fill="%23FFF" points="50 0 61 37 100 50 61 63 50 100 39 63 0 50 39 37"%3E%3C/polygon%3E%3C/svg%3E');
background-size: contain;
background-repeat: no-repeat;
}
.kunai {
width: 20px;
height: 60px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 60"%3E%3Cpath fill="%23FFF" d="M10 0 L8 20 L4 22 L8 24 L10 60 L12 24 L16 22 L12 20 Z"%3E%3C/path%3E%3C/svg%3E');
background-size: contain;
background-repeat: no-repeat;
}
.rasen-shuriken {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 20%, rgba(0, 150, 255, 0.8) 50%, rgba(0, 50, 150, 0.9) 80%);
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 150, 255, 0.7), 0 0 40px rgba(0, 150, 255, 0.5);
animation: pulse 2s infinite;
z-index: 0;
}
</style>
</head>
<body class="bg-gray-100 flex flex-col items-center min-h-screen py-4">
<!-- Formulaire pour remplir les informations -->
<form id="formulaire" class="bg-white shadow-md rounded-lg p-4 w-[28rem] mb-6">
<h2 class="text-xl font-bold text-gray-700 mb-4">Remplissez votre carte d'identité Otaku</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="nom" class="text-sm font-semibold">Nom :</label>
<input type="text" id="nom" class="w-full p-2 border rounded-md" placeholder="Ex : Naruto Uzumaki">
</div>
<div>
<label for="niveau" class="text-sm font-semibold">Niveau :</label>
<input type="text" id="niveau" class="w-full p-2 border rounded-md" placeholder="Ex : Hokage">
</div>
<div>
<label for="anime" class="text-sm font-semibold">Anime préféré :</label>
<input type="text" id="anime" class="w-full p-2 border rounded-md" placeholder="Ex : Naruto Shippuden">
</div>
<div>
<label for="manga" class="text-sm font-semibold">Manga préféré :</label>
<input type="text" id="manga" class="w-full p-2 border rounded-md" placeholder="Ex : Naruto">
</div>
<div>
<label for="personnage" class="text-sm font-semibold">Personnage favori :</label>
<input type="text" id="personnage" class="w-full p-2 border rounded-md" placeholder="Ex : Jiraiya">
</div>
<div>
<label for="episodes" class="text-sm font-semibold">Épisodes vus :</label>
<input type="number" id="episodes" class="w-full p-2 border rounded-md" placeholder="Ex : 720">
</div>
<div>
<label for="mangas" class="text-sm font-semibold">Mangas lus :</label>
<input type="number" id="mangas" class="w-full p-2 border rounded-md" placeholder="Ex : 500">
</div>
<div>
<label for="photo" class="text-sm font-semibold">Photo d'identité :</label>
<input type="file" id="photo" class="w-full p-2 border rounded-md" accept="image/*">
</div>
</div>
<button type="button" id="valider" class="mt-4 bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">Valider</button>
</form>
<!-- Carte d'identité -->
<div class="bg-naruto text-white rounded-lg shadow-lg p-6 w-[30rem] h-[18rem] relative">
<!-- Shurikens et kunais dans le fond -->
<div class="shuriken shuriken-1"></div>
<div class="shuriken shuriken-2"></div>
<div class="kunai kunai-1"></div>
<div class="kunai kunai-2"></div>
<!-- Rasen Shuriken en arrière-plan -->
<div class="rasen-shuriken"></div>
<!-- Contenu de la carte -->
<div class="flex items-center space-x-4 relative z-10">
<!-- Colonne gauche : Photo -->
<div class="w-1/3">
<img
id="photoAffiche"
src="imgnaru.png"
alt="Photo de Naruto Uzumaki"
class="w-full h-auto rounded-lg border-4 border-gray-300">
</div>
<!-- Colonne droite : Informations -->
<div class="w-2/3">
<h1 class="text-xl font-bold mb-2">Carte d'Identité Otaku</h1>
<p class="text-sm"><span class="font-bold">Nom :</span> <span id="nomAffiche">Naruto Uzumaki</span></p>
<p class="text-sm"><span class="font-bold">Niveau :</span> <span id="niveauAffiche">Hokage</span></p>
<p class="text-sm"><span class="font-bold">Anime préféré :</span> <span id="animeAffiche">Naruto Shippuden</span></p>
<p class="text-sm"><span class="font-bold">Manga préféré :</span> <span id="mangaAffiche">Naruto</span></p>
<p class="text-sm"><span class="font-bold">Personnage favori :</span> <span id="personnageAffiche">Jiraiya</span></p>
<div class="mt-4">
<h2 class="text-sm font-bold">Statistiques :</h2>
<p class="text-sm"><span class="font-bold">Épisodes vus :</span> <span id="episodesAffiche">720</span></p>
<p class="text-sm"><span class="font-bold">Mangas lus :</span> <span id="mangasAffiche">500</span></p>
</div>
</div>
</div>
<!-- Mention en bas de la carte -->
<div class="absolute bottom-2 left-0 right-0 text-center text-xs text-gray-200 z-10">
Cette carte est utilisable et valable dans tous les groupes otakus disponibles sur les réseaux sociaux.
</div>
</div>
<script>
document.getElementById("valider").addEventListener("click", () => {
document.getElementById("nomAffiche").textContent = document.getElementById("nom").value || "Naruto Uzumaki";
document.getElementById("niveauAffiche").textContent = document.getElementById("niveau").value || "Hokage";
document.getElementById("animeAffiche").textContent = document.getElementById("anime").value || "Naruto Shippuden";
document.getElementById("mangaAffiche").textContent = document.getElementById("manga").value || "Naruto";
document.getElementById("personnageAffiche").textContent = document.getElementById("personnage").value || "Jiraiya";
document.getElementById("episodesAffiche").textContent = document.getElementById("episodes").value || "720";
document.getElementById("mangasAffiche").textContent = document.getElementById("mangas").value || "500";
const photoInput = document.getElementById("photo");
const photoDisplay = document.getElementById("photoAffiche");
if (photoInput.files && photoInput.files[0]) {
const reader = new FileReader();
reader.onload = (e) => {
photoDisplay.src = e.target.result;
};
reader.readAsDataURL(photoInput.files[0]);
}
});
</script>
</body>
</html>