90 lines
3.5 KiB
HTML
90 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mind Reader</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Welcome Screen -->
|
|
<div id="welcomeScreen" class="screen active">
|
|
<div class="welcome-content">
|
|
<h1 class="title">Mind Reader</h1>
|
|
<p class="subtitle">Think of a number between 1 and 63</p>
|
|
<p class="instruction">I will read your mind by asking you 6 simple questions.</p>
|
|
<button id="startBtn" class="btn btn-primary">Start Reading</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Screen -->
|
|
<div id="cardScreen" class="screen">
|
|
<div class="card-container">
|
|
<div class="card-header">
|
|
<h2 id="cardNumber">Card 1 of 6</h2>
|
|
<p id="cardQuestion">Does your number appear on this card?</p>
|
|
</div>
|
|
<div id="cardGrid" class="card-grid">
|
|
<!-- Numbers will be inserted here -->
|
|
</div>
|
|
<div class="card-actions">
|
|
<button id="yesBtn" class="btn btn-yes">Yes</button>
|
|
<button id="noBtn" class="btn btn-no">No</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analysis Screen -->
|
|
<div id="analysisScreen" class="screen">
|
|
<div class="analysis-container">
|
|
<h2 class="analysis-title">Analyzing brainwaves…</h2>
|
|
|
|
<div class="scanner">
|
|
<!-- Pulsing circular ring -->
|
|
<svg class="scanner-ring" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="100" cy="100" r="80" fill="none" stroke="url(#ringGradient)" stroke-width="2"/>
|
|
<defs>
|
|
<linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#00ff88;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#00ccff;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
|
|
<!-- Horizontal scanning line -->
|
|
<div class="scan-line"></div>
|
|
|
|
<!-- Particle dots -->
|
|
<div class="particles">
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status messages -->
|
|
<p id="statusMessage" class="status-message">Reading signals…</p>
|
|
|
|
<!-- Progress bar -->
|
|
<div class="progress-container">
|
|
<div id="progressBar" class="progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result Screen -->
|
|
<div id="resultScreen" class="screen">
|
|
<div class="result-container">
|
|
<h1 id="resultNumber" class="result-number">Your number is 42</h1>
|
|
<button id="restartBtn" class="btn btn-primary">Try Again</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|