diff --git a/assets/C9EED782-8F3C-40E5-87C0-5E2032ADAB72.jpeg b/assets/C9EED782-8F3C-40E5-87C0-5E2032ADAB72.jpeg new file mode 100644 index 0000000..97da7d5 Binary files /dev/null and b/assets/C9EED782-8F3C-40E5-87C0-5E2032ADAB72.jpeg differ diff --git a/assets/Roman.html b/assets/Roman.html new file mode 100644 index 0000000..1198e27 --- /dev/null +++ b/assets/Roman.html @@ -0,0 +1,51 @@ + + + + + + To Hide Is To Be Seen + + + + +
+ + + +

To Hide Is To Be Seen

+
+ + +
+ +
+ Pochette +
+ +

+ To Hide Is To Be Seen
+ Roman +

+ +
+ + +
+
0:00
+
1:36
+
+
+ + +
+ + + +
+ + +
+ + + + diff --git a/assets/front.html b/assets/front.html index 287dc35..9b4b190 100644 --- a/assets/front.html +++ b/assets/front.html @@ -40,6 +40,14 @@

Corb Nurk

+ + + ToHideIsToBeSeen +
+

To Hide Is To Be Seen

+

Roman

+
+ diff --git a/assets/song to song v4.mp3 b/assets/song to song v4.mp3 new file mode 100644 index 0000000..d5fca14 Binary files /dev/null and b/assets/song to song v4.mp3 differ diff --git a/assets/stylesmf.css b/assets/stylesmf.css index 2dc7ebc..805d9c7 100644 --- a/assets/stylesmf.css +++ b/assets/stylesmf.css @@ -8,7 +8,7 @@ body { flex-direction: column; align-items: center; justify-content: center; - background: linear-gradient(to bottom, #3d78a8, #19222b); + background: linear-gradient(to bottom, #3d78a8, #00182e); font-family: sans-serif; } diff --git a/assets/stylesrom.css b/assets/stylesrom.css new file mode 100644 index 0000000..9f45338 --- /dev/null +++ b/assets/stylesrom.css @@ -0,0 +1,196 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); + +body { + margin: 0; + padding: 0; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: linear-gradient(to bottom, #000e33, #002f96); + font-family: sans-serif; + } + + header.page-header { + position: absolute; + top: 20px; + left: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; /* pour que seul le logo reste cliquable */ + } + + .logo-container { + position: absolute; + left: 20px; + pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */ + } + + .logo { + width: 120px; + height: auto; + cursor: pointer; + } + + .title { + color: white; + font-size: 20px; + font-weight: 600; + margin: 0; + pointer-events: none; + } + + + .vinyl-container { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + + + +/* Titre du bas avec un
stylé */ + +.title-under { + text-align: center; + color: white; + margin-top: 20px; + } + + .song-title { + font-size: 30px; + font-weight: 600; + } + + .artist-name { + margin: none; + font-size: 22px; + font-weight: 400; + opacity: 0.8; + } + + .vinyl { + width: 600px; + height: 600px; + border-radius: 50%; + background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%); + animation: spin 5s linear infinite paused; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + cursor: pointer; + margin: 20px 0; + } + + .vinyl img { + width: 40%; + border-radius: 50%; + pointer-events: none; + } + + /* Style pour la barre de progression */ +.progress-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 20px; + width: 80%; + max-width: 500px; + margin-inline: auto; + } + + #progress { + width: 100%; + height: 6px; + background: rgba(255, 255, 255, 0.3); + border-radius: 5px; + -webkit-appearance: none; + appearance: none; + } + + #progress::-webkit-slider-thumb { + -webkit-appearance: none; + height: 12px; + width: 12px; + border-radius: 50%; + background: white; + cursor: pointer; + } + + #progress::-moz-range-thumb { + height: 12px; + width: 12px; + border-radius: 50%; + background: white; + cursor: pointer; + } + + /* Position des timestamps */ + + .time-wrapper { + color: white; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 20px; + margin-top: 10px; + margin-bottom: 10px; /* <-- ajoute ceci pour écarter duration du bouton */ + } + + + .buttons-container { + display: flex; + justify-content: space-between; + gap: 10px; + width: 80%; + max-width: 500px; + margin-top: 10px; + } + + button { + flex: 1; + font-size: 16px; + background: none; + border: 1px solid white; + color: white; + padding: 6px 14px; + border-radius: 8px; + cursor: pointer; + } + + + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + @media (max-width: 768px) { + .vinyl { + width: 70vw; + height: 70vw; + } + + .vinyl img { + width: 45%; + } + + #progress { + width: 85vw; + } + + .buttons-container { + width: 85vw; + } + } + + \ No newline at end of file