<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>ProMatch Prototype</title> <style> body { font-family: ‘Helvetica Neue’, sans-serif; margin: 0; background: linear-gradient(135deg, #ff758c, #ff7eb3, #6c5ce7, #74b9ff, #55efc4, #ffeaa7); color: #333; min-height: 100vh; display:flex; flex-direction:column; } header { background: linear-gradient(135deg, #ff4d6d, #ff7eb3, #6c5ce7); color: white; padding: 1rem; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } nav { display: flex; justify-content: space-around; background: linear-gradient(90deg, #74b9ff, #00cec9, #fd79a8, #e17055, #ffeaa7); padding: 0.5rem; position: sticky; top: 0; z-index:100; } nav button { padding: 0.5rem 1rem; border: none; background: white; color: #333; border-radius: 20px; cursor: pointer; font-weight: bold; transition: 0.3s; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } nav button:hover { background: linear-gradient(135deg, #ff4d6d, #ff7eb3); color: white; } section { display: none; padding: 1rem; animation: fadeIn 0.5s; flex-grow:1; } section.active { display: block; } .card { background: linear-gradient(135deg, #ffffff, #ffe1ec, #dff9fb, #fab1a0); padding: 1.5rem; margin: 1rem auto; border-radius: 20px; box-shadow: 0 6px 16px rgba(0,0,0,0.2); max-width: 400px; text-align: center; position: relative; } .card button { background: linear-gradient(135deg, #ff4d6d, #ff7eb3, #55efc4, #74b9ff); border: none; padding: 0.6rem 1.2rem; color: white; border-radius: 30px; margin-top: 0.5rem; cursor: pointer; font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .card button:hover { opacity: 0.9; } .swipe-card { width: 100%; height: 240px; background: linear-gradient(135deg, #ff7675, #55efc4, #74b9ff, #a29bfe, #fab1a0); color: white; border-radius: 20px; text-align: center; font-weight: bold; font-size: 1rem; position: absolute; top: 0; left: 0; transition: transform 0.5s ease, opacity 0.5s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.3); overflow: hidden; display:flex; flex-direction:column; justify-content:flex-end; } .swipe-card img { width:100%; height: 180px; object-fit: cover; border-radius: 20px 20px 0 0; } .swipe-card .info { background: rgba(0,0,0,0.5); color:white; padding: 0.5rem; border-radius: 0 0 20px 20px; font-size:0.9rem; } .chat { border: 1px solid #ddd; border-radius: 16px; padding: 0.5rem; height: 300px; overflow-y: auto; background: linear-gradient(135deg, #dff9fb, #c7ecee, #ffeaa7, #fab1a0); } .message { margin: 0.5rem 0; padding: 0.6rem 1rem; border-radius: 16px; max-width: 70%; font-size: 0.9rem; } .me { background: linear-gradient(135deg, #ff4d6d, #ff7eb3); color: white; margin-left: auto; } .them { background: linear-gradient(135deg, #74b9ff, #0984e3); color: white; margin-right: auto; } .input-bar { display: flex; margin-top: 0.5rem; } .input-bar input { flex: 1; padding: 0.6rem; border: 1px solid #ccc; border-radius: 20px; } .input-bar button { margin-left: 0.5rem; padding: 0.6rem 1.2rem; background: linear-gradient(135deg, #ff4d6d, #ff7eb3, #55efc4, #74b9ff); color: white; border: none; border-radius: 20px; cursor: pointer; font-weight: bold; } footer { text-align:center; padding:1rem; background:linear-gradient(135deg,#74b9ff,#55efc4,#ffeaa7); color:#333; font-weight:bold; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style></head><body> <header> <h1>💖 ProMatch Prototype</h1> <p>Colourful Dating App Demo</p> </header> <nav> <button onclick=”show(‘auth’)”>Auth</button> <button onclick=”show(‘profile’)”>Profile</button> <button onclick=”show(‘discovery’)”>Discovery</button> <button onclick=”show(‘chat’)”>Chat</button> <button onclick=”show(‘safety’)”>Safety</button> </nav> <!– Auth Screen –> <section id=”auth” class=”active”> <div class=”card”> <h2>Sign In / Sign Up</h2> <button style=”background:linear-gradient(135deg,#74b9ff,#0984e3);”>📱 Phone</button><br> <button style=”background:linear-gradient(135deg,#55efc4,#00b894);”>📧 Email</button><br> <button style=”background:linear-gradient(135deg,#ffeaa7,#fdcb6e,#fab1a0); color:#333;”>🔑 Google</button><br> <button style=”background:linear-gradient(135deg,#a29bfe,#6c5ce7,#e84393);”>🍏 Apple</button> </div> </section> <!– Profile Setup –> <section id=”profile”> <div class=”card”> <h2>Profile Setup</h2> <p>📸 Upload Photos</p> <div style=”display:flex; gap:8px; justify-content:center;”> <div style=”width:60px;height:60px;background:linear-gradient(135deg,#a29bfe,#6c5ce7);border-radius:12px;”></div> <div style=”width:60px;height:60px;background:linear-gradient(135deg,#fd79a8,#e84393);border-radius:12px;”></div> </div> <p>✍️ Bio: <input type=”text” placeholder=”Tell us about yourself”></p> <p>🎨 Interests: <input type=”text” placeholder=”e.g. Hiking, Art”></p> <p>👤 Pronouns: <input type=”text” placeholder=”She/Her”></p> <p>📏 Height: <input type=”range” min=”140″ max=”200″ value=”170″> cm</p> <button>Save Profile</button> </div> </section> <!– Discovery –> <section id=”discovery”> <div class=”card” style=”height:360px;”> <h2>Discover People Nearby</h2> <div id=”deck” style=”position:relative; width:100%; height:260px; margin-top:1rem;”> <div class=”swipe-card”><img src=”https://placekitten.com/400/200″><div class=”info”>Anna, 28 – Loves hiking & coffee ☕</div></div> <div class=”swipe-card”><img src=”https://placebear.com/400/200″><div class=”info”>James, 32 – Designer, foodie 🍣</div></div> <div class=”swipe-card”><img src=”https://picsum.photos/400/200?random=1″><div class=”info”>Sofia, 26 – Runner, bookworm 📚</div></div> </div> <div style=”display:flex;justify-content:space-around;margin-top:1rem; position:relative; z-index:10;”> <button style=”background:#e74c3c;” onclick=”swipe(‘left’)”>❌ Pass</button> <button style=”background:#2ecc71;” onclick=”swipe(‘right’)”>❤️ Like</button> <button style=”background:linear-gradient(135deg,#74b9ff,#55efc4);” onclick=”resetDeck()”>🔄 Reset</button> </div> </div> </section> <!– Chat –> <section id=”chat”> <div class=”card”> <h2>Chat</h2> <div class=”chat” id=”chatBox”> <div class=”message them”>Hi there 👋</div> <div class=”message me”>Hello! How are you?</div> </div> <div class=”input-bar”> <input id=”msgInput” placeholder=”Type a message…”> <button onclick=”sendMsg()”>Send</button> </div> </div> </section> <!– Safety –> <section id=”safety”> <div class=”card”> <h2>Trust & Safety</h2> <button style=”background:linear-gradient(135deg,#d63031,#ff7675,#e17055);”>🚫 Block User</button><br><br> <button style=”background:linear-gradient(135deg,#f39c12,#f1c40f,#ffeaa7);”>⚠️ Report User</button> </div> </section> <footer> 🌈 ProMatch Prototype – colourful demo v2 </footer> <script> function show(id) { document.querySelectorAll(‘section’).forEach(s => s.classList.remove(‘active’)); document.getElementById(id).classList.add(‘active’); } function sendMsg() { const input = document.getElementById(‘msgInput’); if (!input.value.trim()) return; const msg = document.createElement(‘div’); msg.className = ‘message me’; msg.textContent = input.value; document.getElementById(‘chatBox’).appendChild(msg); input.value = ”; document.getElementById(‘chatBox’).scrollTop = document.getElementById(‘chatBox’).scrollHeight; } function swipe(direction) { const deck = document.getElementById(‘deck’); const topCard = deck.querySelector(‘.swipe-card:last-child’); if (!topCard) return; if (direction === ‘left’) { topCard.style.transform = ‘translateX(-400px) rotate(-30deg)’; } else { topCard.style.transform = ‘translateX(400px) rotate(30deg)’; } topCard.style.opacity = ‘0’; setTimeout(() => topCard.remove(), 500); } function resetDeck() { const deck = document.getElementById(‘deck’); deck.innerHTML = ` <div class=”swipe-card”><img src=”https://placekitten.com/400/200″><div class=”info”>Anna, 28 – Loves hiking & coffee ☕</div></div> <div class=”swipe-card”><img src=”https://placebear.com/400/200″><div class=”info”>James, 32 – Designer, foodie 🍣</div></div> <div class=”swipe-card”><img src=”https://picsum.photos/400/200?random=${Math.floor(Math.random()*100)}”><div class=”info”>Sofia, 26 – Runner, bookworm 📚</div></div>`; } </script></body></html>