add newsletter and test avatar

index.html

@@ -15,18 +15,19 @@
     
     <main class="container">
         <div class="card logo-card">
-            <img src="assets/logo.svg" alt="JMP Games" class="logo">
+            <img src="assets/jmpbianco.png" alt="JMP Games" class="logo">
-            <h1>JMP Games</h1>
+            <h1>Enter the next Level</h1>
-            <p class="tagline">Creating Atmospheric Digital Worlds</p>
         </div>
 
         <div class="card game-card">
-            <h2>UPCOMING TITLE</h2>
+            <h2>GAMES</h2>
             <div class="game-preview">
-                <h3>DTS</h3>
+                <h3>The Drunken Beard</h3>
-                <p>A psychological horror adventure where reality bends and shadows come alive.</p>
+                <img src="assets/capsulapngpiccola.png" width="500px" alt="The Drunken Beard">
+				<p>The Drunken Beard is all about a tavern simulator. Brew craft beer, serve beer, decorate your tavern, and take part in random events and more!</p>
                 <div class="release-date">Coming 2025</div>
-            </div>
+				<a href="https://store.steampowered.com/app/2515020/FINAL_FANTASY_XVI/" target="_blank"><img src="assets/steam.png" width="50px" alt="Steam"></a>
+			</div>
         </div>
 
         <div class="card newsletter-card">
@@ -34,6 +35,8 @@
             <p>Subscribe for development updates and exclusive content</p>
             <form id="newsletter-form">
                 <input type="email" placeholder="Enter your email" required>
+                <input id="subscribe" type="hidden" value="1">
+                <input id="sub_message" type="hidden" value="Check your mail for confirmation">
                 <button type="submit">SUBSCRIBE</button>
             </form>
         </div>
@@ -42,24 +45,39 @@
             <h2>THE TEAM</h2>
             <div class="team-grid">
                 <div class="team-member">
-                    <img src="avatar1.jpg" alt="Team Member">
+                    <img src="assets/photo_2025-03-20_20-34-50-fotor-ai-art-effects-20250320203715.jpg" alt="Team Member">
-                    <h3>Tizio Caio</h3>
+                    <h3>Michele Rossi</h3>
-                    <!-- <p>Creative Director</p> -->
+                    <p>Developer</p>
                 </div>
                 <div class="team-member">
-                    <img src="avatar2.jpg" alt="Team Member">
+                    <img src="assets/mauro-fotor-ai-art-effects-20250320172954.jpeg" alt="Team Member">
-                    <h3>Tizio Caio</h3>
+                    <h3>Mauro Cirafisi</h3>
-                    <!-- <p>Lead Developer</p> -->
+                    <p>Developer</p>
                 </div>
                 <div class="team-member">
-                    <img src="avatar3.jpg" alt="Team Member">
+                    <img src="assets/1635233718475-fotor-ai-art-effects-20250320103253.jpeg" alt="Team Member">
-                    <h3>Tizio Caio</h3>
+                    <h3>Flavio Fabbrizi</h3>
-                    <!-- <p>Art Director</p> -->
+                    <p>CEO</p>
                 </div>
                 <div class="team-member">
                     <img src="avatar4.jpg" alt="Team Member">
-                    <h3>Tizio Caio</h3>
+                    <h3>Matteo Sonaglioni</h3>
-                    <!-- <p>Technical Artist</p> -->
+                    <p>2D & 3D Artist</p>
+                </div>
+                <div class="team-member">
+                    <img src="avatar5.jpg" alt="Team Member">
+                    <h3>Ambra Cirafisi</h3>
+                    <p>Concept Artist</p>
+                </div>
+                <div class="team-member">
+                    <img src="avatar6.jpg" alt="Team Member">
+                    <h3>Agnese Lucchese</h3>
+                    <p>Animator</p>
+                </div>
+                <div class="team-member">
+                    <img src="avatar7.jpg" alt="Team Member">
+                    <h3>Angelo Carnemolla</h3>
+                    <p>Sound Designer</p>
                 </div>
             </div>
         </div>
@@ -68,8 +86,8 @@
             <a href="https://drive.google.com/drive/folders/your-folder-id" target="_blank">Press Kit</a>
         </div>
         <div class="copyright">
-            <p>&copy; 2025 JMP Games. All rights reserved.</p>
+            <p>&copy; 2025 JMP Games srls. All rights reserved.</p>
-            <p>VAT: IT12345678901</p>
+            <p>VAT: IT02571090444</p>
         </div>
     </main>
 

privacy-policy.html

@@ -50,7 +50,7 @@
             </ul>
             
             <h2>Contact Us</h2>
-            <p>If you have any questions about this Privacy Policy, please contact us at privacy@jmpgames.com</p>
+            <p>If you have any questions about this Privacy Policy, please contact us at info@jmpgames.com</p>
             
             <div style="margin-top: 2rem; text-align: center;">
                 <a href="index.html" style="color: var(--primary); text-decoration: none;">← Back to Home</a>

script.js

@@ -1,14 +1,25 @@
 document.addEventListener('DOMContentLoaded', () => {
     // Newsletter form submission
     const form = document.getElementById('newsletter-form');
-    form.addEventListener('submit', (e) => {
+    form.addEventListener('submit', async (e) => {
         e.preventDefault();
         const email = e.target.querySelector('input[type="email"]').value;
-        // Here you would typically send this to your backend
+        const subscribe = e.target.querySelector('input[id="subscribe"]').value;
-        alert('Thanks for subscribing! Check your email for confirmation.');
+        const message = e.target.querySelector('input[id="sub_message"]');
-        form.reset();
+		    message.setAttribute('type','text');
+		    message.type = 'text';
+		    const response = await fetch('http://localhost:3001/newsletter', {
+            method: 'POST',
+            body: JSON.stringify({
+                "email": email,
+                "subscribe": subscribe
+                }), 
+            headers: {
+              'Content-Type': 'application/json'
+            }
+            });  
     });
-
+		
     // Add subtle parallax effect to video background
     document.addEventListener('mousemove', (e) => {
         const mouseX = e.clientX / window.innerWidth;

styles.css

@@ -154,8 +154,7 @@ button:hover {
 }
 
 .team-member img {
-    width: 120px;
+    height: 150px;
-    height: 120px;
     border-radius: 8px;
     margin-bottom: 1rem;
     border: 2px solid var(--accent-2);

unsubscribe.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>JMP GAMES - Unsubscribe</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="card logo-card">
+		<img src="assets/jmpbianco.png" alt="JMP Games" class="logo">
+        <h1>Enter the next Level</h1>
+		<div class="container">
+			<h2>Do you want to cancel your subscription?</h2>
+			<p>Enter your email address to confirm your unsubscription.</p>
+			<form id="newsletter-unsubform">
+				<input type="email" placeholder="Enter your email" required>
+				<input id="subscribe" type="hidden" value="0">
+                <input id="sub_message" type="hidden" value="Check your mail for confirmation">
+				<button type="submit">UNSUBSCRIBE</button>
+			</form>
+		</div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>