-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
135 lines (101 loc) · 5.71 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charles Aznavour</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="flux">
<section class="titre flop">
<h1>Charles Aznavour</h1>
<p>72 years of career</p>
</section>
<p class="profile"> </p>
<article class="Azn1 flop">
<p class="imgA"></p>
<a href="https://deezer.page.link/7xH6rzkBbjS1j5EQ7">
<button class="listen">Listen</button>
</a>
</article>
<article class="Azn2 flop">
<p class="imgA"></p>
<a href="https://open.spotify.com/intl-fr/track/1WvvmEowf7hiz5EnyAwtTj?si=e4bae7c9980141fe" >
<button class="listen">Listen</button>
</a>
</article>
<article class="Spotify flop">
<img class="logo logS" src="https://static.wixstatic.com/media/2397a0_6be8d79af7a443028bbc72ac7d99ec63~mv2.png " alt="logo Spotify">
<h2>Spotify</h2>
<button class="listen2 disparait">Listen</button>
</article>
<article class="Deezer flop">
<img class= "logo logD" src="https://static.wixstatic.com/media/2397a0_26086a46c8df4a9bb14baf02cc18fa10~mv2.png" alt="logo Deezer">
<h2>Deezer</h2>
<a href="https://deezer.page.link/aFqyBVFXhbcKpyTW8"><button class="listen2 disparait">Listen</button></a>
</article>
<article class="youtube flop">
<div class="YoutTitre">
<img class="logo logYT" src="https://static.wixstatic.com/media/2397a0_f5f5a44f594a4fd98c7ce18f36e645e7~mv2.jpg" alt="logo Youtube">
<h2>Youtube</h2>
</div>
<div class="disparait">
<p class="ChaineYT">@aznavourofficial</p>
<p class="abos">11,8k subscribers</p>
</div>
</article>
<article class="news flop">
<h3>Subscribe to my monthly newletter</h3>
<div class="mail">
<p>@</p>
<input class="zoneTEXTE Default" name="AdresseMail" value="[email protected]" type="text"/>
<a href="#"><button class="ButtGo">Go!</button></a>
</div>
</article>
</section>
</body>
<!-- CODE EN JS POUR LES INTERACTIONS-->
<script>
document.querySelector("body").addEventListener("click",RetourDefault) //quand on uclick sur l'écran (n'importe où) => lancer fonction change()
document.querySelector("input").addEventListener("click",Write) //quand on uclick sur l'écran (n'importe où) => lancer fonction change()
document.querySelector("input").onblur = inpBL; //quand input est inactif (que l'utilisateur a cliqué ailleurs pour faire autre chose)
document.querySelector("input").onfocus = inpFOC; //quand l'utilisateur utilise input (la barre de texte est présente dans la zone de texte)
function inpBL(){document.querySelector("input").classList.add("BLUR")} //Pour connaître l'état de la zone de texte (dans les conditions de l'autre fonction)
function inpFOC(){document.querySelector("input").classList.remove("BLUR")} // si BLUR est une classe de input, alors l'utilisateur n'utilise pas la zone de texte
function RetourDefault(){
if (!(document.querySelector("input").classList.contains("Default"))){
if (document.querySelector("input").value == "" && document.querySelector("input").classList.contains("BLUR")){ //si input est vide ET la zone de texte est déselectionnée
document.querySelector("input").value = "[email protected]"; //Le texte redevient celui par défault, opacité 0.3 et reprend la classe Default.
document.querySelector("input").style.opacity = 0.3;
document.querySelector("input").classList.add("Default");
//L'ajout de la condition BLUR évite que input se remete automatiquement
//en valeur par défault lorsque l'utilisateur avait simplement effacé du texte
//pour changer l'adresse e-mail qu'il veut mettre. Ca créait un bug, aussi.
}
}
}
function Write(){
if (document.querySelector("input").classList.contains("Default")){ //Pour savoir si le texte a cette valeur par défault, ou si L'UTILISATEUR a recopier la valeur par défault
document.querySelector("input").value = ""; //La zone de texte se vide automatiquement
document.querySelector("input").style.opacity = 1; //Et l'opacité revient à 1
document.querySelector("input").classList.remove("Default"); //Ce n'est plus une valeur par défault mais bien le texte de l'utilisateur
}
}
</script>
</html>
<!--
LOGO DEEZER BLANC
https://static.wixstatic.com/media/2397a0_26086a46c8df4a9bb14baf02cc18fa10~mv2.png
LOGO DEEZER VIOLET
https://static.wixstatic.com/media/2397a0_2aa6cf8d71d844e6b19ae42c93669839~mv2.png
LOGO SPOTIFY BLANC
https://static.wixstatic.com/media/2397a0_6be8d79af7a443028bbc72ac7d99ec63~mv2.png
LOGO SPOTIFY FONCE
https://static.wixstatic.com/media/2397a0_3f9cc99f74f74538af70b461953bae92~mv2.png
LOGO YOUTUBE BLANC
https://static.wixstatic.com/media/2397a0_f5f5a44f594a4fd98c7ce18f36e645e7~mv2.jpg
LE SITE SUR LEQUEL J'AI STOCKÉ LES IMAGES
POUR QU'ELLES SOIT ACCESSIBLES EN LIGNE :
https://editor.wix.com/html/editor/web/renderer/edit/e6c74368-eb3d-4e12-8701-dd0037ab4d8c?metaSiteId=2e9bfcf3-9a66-4628-8038-bd040c567627&editorSessionId=f85f9cf6-7635-4f22-bdc4-6cfacb1e811c
-->