diff --git a/assets/front.html b/assets/front.html
new file mode 100644
index 0000000..319ae93
--- /dev/null
+++ b/assets/front.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+ LOOP
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/hell_even.html b/assets/hell_even.html
new file mode 100644
index 0000000..ec395c3
--- /dev/null
+++ b/assets/hell_even.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ LOOP
+
+
+
+
+
+
+
+
+
+
+ Let your favorite songs play on LOOP.
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..6730b8d
Binary files /dev/null and b/assets/logo.png differ
diff --git a/assets/index.html b/assets/main.html
similarity index 77%
rename from assets/index.html
rename to assets/main.html
index 81a88a0..ec48afd 100644
--- a/assets/index.html
+++ b/assets/main.html
@@ -12,7 +12,7 @@
- 
+
Let your favorite songs play on LOOP.
@@ -21,8 +21,8 @@
-
-
+ Log In
+
diff --git a/assets/muddy_files.html b/assets/muddy_files.html
new file mode 100644
index 0000000..038bb19
--- /dev/null
+++ b/assets/muddy_files.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ LOOP
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/muddy_files.js b/assets/muddy_files.js
new file mode 100644
index 0000000..e69de29
diff --git a/assets/paradisev2.mp3 b/assets/paradisev2.mp3
new file mode 100644
index 0000000..89ce7a6
Binary files /dev/null and b/assets/paradisev2.mp3 differ
diff --git a/assets/style.css b/assets/style.css
deleted file mode 100644
index 55ada15..0000000
--- a/assets/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body{
- background-color: red;
-}
\ No newline at end of file
diff --git a/assets/styles.css b/assets/styles.css
index d53a573..d904d19 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -35,7 +35,7 @@
.logo{
margin-top: 40px;
- max-width: 180px;
+ max-width: 280px;
}
.container {
@@ -73,7 +73,6 @@ h2 {
text-align: center
}
-/* Champs de texte */
.login-container input {
width: 100%;
padding: 10px;
@@ -83,8 +82,7 @@ h2 {
font-size: 16px;
}
-/* Bouton */
-.login-container button {
+.button {
width: 100%;
padding: 10px;
background-color:#ffa600;
@@ -94,9 +92,10 @@ h2 {
font-size: 18px;
cursor: pointer;
transition: background 0.3s ease;
+ text-decoration: none;
}
-.login-container button:hover {
+.button:hover {
background-color: #dd3000;
}
diff --git a/assets/stylesfront.css b/assets/stylesfront.css
new file mode 100644
index 0000000..4ae0144
--- /dev/null
+++ b/assets/stylesfront.css
@@ -0,0 +1,90 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+*{
+ margin: 0;
+ padding: 0;
+ font-family: 'Poppins', sans-serif;
+ box-sizing: border-box;
+
+}
+
+html, body {
+ height: 100%;
+ }
+
+body {
+ background: linear-gradient(to bottom, #ffa600, #dd3000);
+ }
+
+/* Structure de base */
+header {
+ display: flex;
+ justify-content: flex-start; /* Aligne à gauche */
+ align-items: center; /* Centré verticalement si tu ajoutes du texte à côté */
+ padding: 10px 20px;
+ position: relative;
+ }
+
+ /* Style du logo */
+ .logo {
+ width: 120px; /* Ajuste la taille selon ton design */
+ height: auto;
+ }
+
+ /* Responsive pour smartphone */
+ @media (max-width: 768px) {
+ .logo {
+ width: 100px; /* Un peu plus petit sur mobile si nécessaire */
+ }
+
+ header {
+ padding: 10px;
+ }
+ }
+
+ .music-list {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ padding: 20px;
+ max-width: 600px;
+ margin: auto;
+ }
+
+ .music-card {
+ display: flex;
+ align-items: center;
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
+ overflow: hidden;
+ text-decoration: none;
+ color: white;
+ transition: background-color 0.3s, transform 0.2s;
+ box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+ }
+
+ .music-card:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ transform: translateY(-2px);
+ }
+
+ .music-card img {
+ width: 80px;
+ height: 80px;
+ object-fit: cover;
+ }
+
+ .music-info {
+ padding: 10px 20px;
+ }
+
+ .music-info h3 {
+ margin: 0;
+ font-size: 18px;
+ }
+
+ .music-info p {
+ margin: 5px 0 0;
+ font-size: 14px;
+ opacity: 0.8;
+ }
+
\ No newline at end of file
diff --git a/assets/styleshe.css b/assets/styleshe.css
new file mode 100644
index 0000000..abd946b
--- /dev/null
+++ b/assets/styleshe.css
@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+*{
+ margin: 0;
+ padding: 0;
+ font-family: 'Poppins', sans-serif;
+ box-sizing: border-box;
+
+}
+
+ @media (min-width: 768px) { /* Écran plus large (tablette, PC) */
+ .container {
+ flex-direction: row;
+ justify-content: space-around;
+ }
+ }
+
+ /* Par défaut, style mobile */
+ body {
+ font-size: 16px;
+ background: linear-gradient(to bottom, #585858, #000000);
+ display: grid;
+ place-items: center; /* Centre horizontalement et verticalement */
+ height: 100vh;
+ margin: 0;
+ }
+
+ /* Quand l'écran est large (ex : tablette ou ordinateur) */
+ @media (min-width: 768px) {
+ body {
+ font-size: 18px;
+ }
+ }
+
+
+
+.logo{
+ margin-top: 40px;
+ max-width: 280px;
+}
+
+.logofront{
+ max-width: 130px;
+ margin-right: 700px;
+ margin-bottom: 880px;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+h1 {
+ color: #ffffff;
+ font-size: 70%;
+}
+
+h2 {
+ color: #ffffff;
+ font-size: 40%;
+}
+
+.orange {
+ color: #ffa600;
+ text-decoration: none;
+}
+
+.orange:hover {
+ text-decoration: underline;
+}
+
+.login-container {
+ background: white;
+ padding: 20px;
+ border-radius: 30px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+ width: 300px;
+ height: 400px;
+ text-align: center
+}
+
+.login-container input {
+ width: 100%;
+ padding: 10px;
+ margin: 10px 0;
+ border: 1px solid #ccc;
+ border-radius: 50px;
+ font-size: 16px;
+}
+
+.button {
+ width: 100%;
+ padding: 10px;
+ background-color:#ffa600;
+ color: white;
+ border: none;
+ border-radius: 50px;
+ font-size: 18px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+ text-decoration: none;
+}
+
+.button:hover {
+ background-color: #dd3000;
+}
+
+
+
\ No newline at end of file
diff --git a/assets/stylesmf.css b/assets/stylesmf.css
new file mode 100644
index 0000000..dc3ee1c
--- /dev/null
+++ b/assets/stylesmf.css
@@ -0,0 +1,42 @@
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+ *{
+ margin: 0;
+ padding: 0;
+ font-family: 'Poppins', sans-serif;
+ box-sizing: border-box;
+
+ }
+
+ html, body {
+ height: 100%;
+ }
+
+ body {
+ background: linear-gradient(to bottom, #316997, #18344b);
+ }
+
+ /* Structure de base */
+ header {
+ display: flex;
+ justify-content: flex-start; /* Aligne à gauche */
+ align-items: center; /* Centré verticalement si tu ajoutes du texte à côté */
+ padding: 10px 20px;
+ position: relative;
+ }
+
+ /* Style du logo */
+ .logo {
+ width: 120px; /* Ajuste la taille selon ton design */
+ height: auto;
+ }
+
+ /* Responsive pour smartphone */
+ @media (max-width: 768px) {
+ .logo {
+ width: 100px; /* Un peu plus petit sur mobile si nécessaire */
+ }
+
+ header {
+ padding: 10px;
+ }
+ }
\ No newline at end of file
diff --git a/server.js b/server.js
index cb5c096..716d003 100644
--- a/server.js
+++ b/server.js
@@ -16,7 +16,7 @@ app.use(express.static('assets'))
app.get('/', (req, res) => {
// res.send('Hello World!')
// res.render('index', { title: 'Hey', message: 'Hello there PUG!' })
- res.sendFile('index.html');
+ res.sendFile('main.html');
})
io.on('connection', (socket) => {
+ 
+ 
+