ProMatch Prototype
Colourful Dating App Demo Auth Profile Discovery Chat Safety
📱 Phone📧 Email🔑 Google🍏 Apple
📸 Upload Photos
✍️ Bio:
🎨 Interests:
👤 Pronouns:
📏 Height: cmSave Profile
Anna, 28 – Loves hiking & coffee ☕
James, 32 – Designer, foodie 🍣
Sofia, 26 – Runner, bookworm 📚❌ Pass❤️ Like🔄 Reset
Hi there 👋
Hello! How are you?Send
🚫 Block User⚠️ Report User 🌈 ProMatch Prototype – colourful demo v2
<!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>
(Source: https://chatgpt.com)
Gardner predicts that by 2030, synthetic data will outweigh real data in AI model training, meaning more than 50% (likely well over) of data used in AI systems will be artificially generated
Artificial intelligence creates synthetic data – information that doesn’t exist in the real world. Unlike data drawn from actual events, people, or objects, synthetic data is entirely machine-made. It’s not rooted in human experience. In short, it’s artificial.
Yet, this fabricated data is infiltrating our lives. From training AI models and powering virtual assistants to generating images, voices, and videos, synthetic data is everywhere. Thanks to technological leaps, it can now look and sound astonishingly lifelike. Deepfake videos, for instance, can convincingly depict someone saying or doing something they never did. The boundary between real and fake is growing hazy.
This prompts a troubling question: are we losing our grip on reality?
Generative AI makes it effortless to craft virtual environments populated by synthetic characters, stories, and interactions. These digital realms may feel vivid and immersive, but they’re entirely fabricated. The Metaverse is a prime example – a space where AI-generated content constructs an alternate version of existence.
For some, these worlds are magnetic. They offer comfort, excitement, or control that the real world often lacks. What begins as curiosity can spiral into habit, even obsession. In extreme cases, people immerse themselves so deeply in these synthetic spaces that they neglect their actual lives.
They forget to eat. They stop socialising. They skip work. Self-care fades. The digital world becomes their primary reality, while the physical one slips away.
This behaviour mirrors addiction. Like gambling or substance misuse, the pull of artificial worlds can be relentless. People return repeatedly, chasing the thrill of a flawless image, a convincing deepfake, or an idealised avatar crafted by algorithms.
These spaces aren’t just entertainment. They offer a sense of limitless control, where users can shape experiences to their desires. But the deeper they dive, the more they detach from reality.
This is a serious concern. We risk nurturing a generation ill-equipped to navigate the real world – a world that’s messy, unpredictable, and imperfect.
Real data, captured from human observation or experience, has a vital edge over its synthetic counterpart: it reflects life. It’s rich with noise, errors, context, and emotion. It captures how people genuinely think, feel, and act in their environment.
Synthetic data, by contrast, is a derivative. Often built from real data patterns, it lacks the depth and spontaneity of lived experience. While useful for tasks like training AI models – especially where privacy or scale is an issue – it’s no substitute for reality. Confusing the two is a mistake.
Overreliance on synthetic data risks creating a world that mirrors our desires rather than our truths. It’s tempting to surround ourselves with AI-generated voices that echo our views, images that flatter us, or information that reinforces our beliefs.
This may feel reassuring, but it’s harmful. It stifles personal growth, erodes empathy, and weakens our resilience to real-world challenges. We drift not only from reality but also from each other.
Human relationships thrive on trust, shared experiences, and authentic history. No matter how lifelike, artificial replicas can’t replicate these. A chat with an AI bot may simulate warmth, but it lacks true understanding. It’s no replacement for a friend, family member, or loved one.
Synthetic data has undeniable value. Used thoughtfully, it can enhance systems, solve problems, and drive innovation. But we must maintain a clear distinction between real and artificial. Education, awareness, and robust ethical guidelines are essential to help people – especially younger generations – forge a balanced relationship with technology.
We must also prioritise real-world experiences: face-to-face conversations, direct observation of our surroundings, and opinions grounded in what we see and feel, not just what machines generate.
The more we inhabit artificial worlds, the more we must question: are we living our own lives, or merely watching a simulation? Is technology our tool, or our trap?
Synthetic data is here to stay. Let’s ensure we stay, too – firmly rooted in the real world.
About the author:
Dr Kitty Hung, a BCS Fellow, BCS CITP and member of IIBA, gained her PhD in Computer Science from the University of Sheffield, UK in 1999. She has over 26 years of experience with a career spanning business analysis, project management and business consultancy roles at various prestigious organisations including Cell Structures, London Business School, London Metropolitan Police, Capita, Raytheon Technologies, and AtkinsRéalis having successfully delivered business critical and large-scale projects and programmes for Central Government and Commercial Sectors covering policing, national security, telecommunications, defence, transportation, aviation, disruptive and emerging technologies. Her recent publication of her book titled: “Business Analysis in the era of Generative AI” which has reached the Amazon #1 Best Seller chart has added particular credibility to her future-focused insights.