|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SmartRise Alarm</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
@keyframes slideUp { |
|
|
from { transform: translateY(20px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
} |
|
|
.animate-slide-up { |
|
|
animation: slideUp 0.4s ease-out forwards; |
|
|
} |
|
|
.animate-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
.time-picker::-webkit-inner-spin-button, |
|
|
.time-picker::-webkit-outer-spin-button { |
|
|
-webkit-appearance: none; |
|
|
margin: 0; |
|
|
} |
|
|
.switch { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 50px; |
|
|
height: 24px; |
|
|
} |
|
|
.switch input { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
} |
|
|
.slider { |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: #ccc; |
|
|
transition: .4s; |
|
|
border-radius: 24px; |
|
|
} |
|
|
.slider:before { |
|
|
position: absolute; |
|
|
content: ""; |
|
|
height: 16px; |
|
|
width: 16px; |
|
|
left: 4px; |
|
|
bottom: 4px; |
|
|
background-color: white; |
|
|
transition: .4s; |
|
|
border-radius: 50%; |
|
|
} |
|
|
input:checked + .slider { |
|
|
background-color: #4B0082; |
|
|
} |
|
|
input:checked + .slider:before { |
|
|
transform: translateX(26px); |
|
|
} |
|
|
.tab-active { |
|
|
border-bottom: 3px solid #4B0082; |
|
|
color: #4B0082; |
|
|
font-weight: 600; |
|
|
} |
|
|
.day-selector.active { |
|
|
background-color: #4B0082; |
|
|
color: white; |
|
|
} |
|
|
.alarm-active { |
|
|
border-left: 5px solid #FF6F61; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-['Inter'] bg-gray-50 text-gray-900"> |
|
|
|
|
|
<div id="splash" class="fixed inset-0 bg-indigo-900 flex items-center justify-center z-50"> |
|
|
<div class="text-center animate-pulse"> |
|
|
<div class="w-24 h-24 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-indigo-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h1 class="text-3xl font-bold text-white">SmartRise</h1> |
|
|
<p class="text-indigo-200 mt-2">Wake up smarter</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="onboarding" class="hidden fixed inset-0 bg-white z-40 overflow-y-auto"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<div class="w-12"></div> |
|
|
<button id="skip-onboarding" class="text-indigo-900 font-medium">Skip</button> |
|
|
</div> |
|
|
|
|
|
<div class="carousel relative"> |
|
|
<div class="carousel-inner flex overflow-hidden"> |
|
|
|
|
|
<div class="carousel-item w-full flex-shrink-0 px-4 text-center"> |
|
|
<div class="h-64 mb-8 flex items-center justify-center"> |
|
|
<div class="relative w-48 h-48 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-indigo-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold mb-4">AI-Powered Wake Up</h2> |
|
|
<p class="text-gray-600 mb-8">Our smart algorithm detects your lightest sleep phase to wake you up refreshed within your preferred window.</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-indigo-900"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-gray-300"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-gray-300"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="carousel-item w-full flex-shrink-0 px-4 text-center"> |
|
|
<div class="h-64 mb-8 flex items-center justify-center"> |
|
|
<div class="relative w-48 h-48 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-indigo-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold mb-4">Weather Adjustments</h2> |
|
|
<p class="text-gray-600 mb-8">SmartRise automatically adjusts your wake-up time based on weather conditions to ensure you're never late.</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-gray-300"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-indigo-900"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-gray-300"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="carousel-item w-full flex-shrink-0 px-4 text-center"> |
|
|
<div class="h-64 mb-8 flex items-center justify-center"> |
|
|
<div class="relative w-48 h-48 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-indigo-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold mb-4">Gamified Challenges</h2> |
|
|
<p class="text-gray-600 mb-8">Solve puzzles or complete challenges to turn off your alarm, ensuring you're fully awake and ready for the day.</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-gray-300"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-gray-300"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-indigo-900"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12"> |
|
|
<button id="next-slide" class="w-full bg-indigo-900 text-white py-3 rounded-xl font-medium">Continue</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="auth-screen" class="hidden fixed inset-0 bg-white z-30 overflow-y-auto"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="max-w-md mx-auto"> |
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-3xl font-bold text-indigo-900 mb-2">Welcome Back</h1> |
|
|
<p class="text-gray-600">Sign in to access your alarms and sleep data</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<button class="w-full flex items-center justify-center space-x-2 bg-white border border-gray-300 py-3 rounded-xl font-medium"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="#4285F4"> |
|
|
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/> |
|
|
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/> |
|
|
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/> |
|
|
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/> |
|
|
<path d="M1 1h22v22H1z" fill="none"/> |
|
|
</svg> |
|
|
<span>Continue with Google</span> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-center space-x-2 bg-white border border-gray-300 py-3 rounded-xl font-medium"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="#000000"> |
|
|
<path d="M17.5 12c0 .32-.03.63-.08.93.03.01.06.03.08.05 1.51.56 2.56 1.89 2.56 3.46 0 2.03-1.95 3.56-4.63 3.56-1.6 0-2.8-.59-3.47-1.38-.67.79-1.87 1.38-3.47 1.38C5.95 21 4 19.47 4 17.44c0-1.58 1.06-2.9 2.58-3.45.02-.03.05-.04.08-.05-.05-.3-.08-.61-.08-.93 0-1.23.44-2.35 1.15-3.23-.12-.3-.19-.62-.19-.96 0-.83.34-1.58.88-2.12.54-.54 1.29-.88 2.12-.88.34 0 .66.07.96.19.88-.71 2-1.15 3.23-1.15 2.5 0 4.5 1.71 4.5 4 0 .34-.07.66-.19.96.71.88 1.15 2 1.15 3.23z"/> |
|
|
</svg> |
|
|
<span>Continue with Apple</span> |
|
|
</button> |
|
|
|
|
|
<div class="flex items-center my-6"> |
|
|
<div class="flex-grow border-t border-gray-300"></div> |
|
|
<span class="flex-shrink mx-4 text-gray-500">or</span> |
|
|
<div class="flex-grow border-t border-gray-300"></div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-900 focus:border-indigo-900"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> |
|
|
<input type="password" id="password" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-900 focus:border-indigo-900"> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="remember" class="h-4 w-4 text-indigo-900 focus:ring-indigo-900 border-gray-300 rounded"> |
|
|
<label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label> |
|
|
</div> |
|
|
<a href="#" class="text-sm text-indigo-900 font-medium">Forgot password?</a> |
|
|
</div> |
|
|
|
|
|
<button id="sign-in" class="w-full bg-indigo-900 text-white py-3 rounded-xl font-medium mt-4">Sign In</button> |
|
|
|
|
|
<div class="text-center mt-6"> |
|
|
<p class="text-gray-600">Don't have an account? <a href="#" class="text-indigo-900 font-medium">Sign up</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="app-screen" class="hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
<h1 class="text-xl font-bold text-indigo-900">SmartRise</h1> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="open-settings"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
|
|
</svg> |
|
|
</button> |
|
|
|
|
|
<button id="open-profile"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> |
|
|
</svg> |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-lg font-semibold">Today, June 15</h2> |
|
|
<div class="flex items-center mt-1"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> |
|
|
</svg> |
|
|
<span class="ml-1 text-gray-600">Sunny, 72°F</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-right"> |
|
|
<div class="text-2xl font-bold" id="current-time">7:30 AM</div> |
|
|
<div class="text-sm text-gray-500">Good morning</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold">My Alarms</h2> |
|
|
<button id="add-alarm" class="bg-indigo-900 text-white p-2 rounded-full"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4" id="alarm-list"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-4 alarm-active"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4"> |
|
|
<label class="switch"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold">07:00</span> |
|
|
<span class="ml-1 text-gray-500">AM</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-500 mt-1">Weekdays • Smart wake enabled</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4"> |
|
|
<label class="switch"> |
|
|
<input type="checkbox"> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold">08:30</span> |
|
|
<span class="ml-1 text-gray-500">AM</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-500 mt-1">Weekends • Math challenge</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4"> |
|
|
<label class="switch"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold">06:45</span> |
|
|
<span class="ml-1 text-gray-500">AM</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-500 mt-1">Daily • Weather adjusted</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Sleep Dashboard</h2> |
|
|
<button class="text-indigo-900 font-medium">View All</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<div> |
|
|
<div class="text-sm text-gray-500">Last Night</div> |
|
|
<div class="text-lg font-semibold">7h 32m</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-sm text-gray-500">Sleep Quality</div> |
|
|
<div class="text-lg font-semibold text-indigo-900">82%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-40 bg-gray-100 rounded-lg flex items-end p-1"> |
|
|
|
|
|
<div class="w-full flex h-full"> |
|
|
<div class="flex-1 bg-blue-200 rounded-t" style="height: 30%;"></div> |
|
|
<div class="flex-1 bg-blue-400 rounded-t" style="height: 50%;"></div> |
|
|
<div class="flex-1 bg-blue-600 rounded-t" style="height: 70%;"></div> |
|
|
<div class="flex-1 bg-blue-400 rounded-t" style="height: 60%;"></div> |
|
|
<div class="flex-1 bg-blue-200 rounded-t" style="height: 40%;"></div> |
|
|
<div class="flex-1 bg-blue-600 rounded-t" style="height: 80%;"></div> |
|
|
<div class="flex-1 bg-blue-400 rounded-t" style="height: 55%;"></div> |
|
|
<div class="flex-1 bg-blue-200 rounded-t" style="height: 35%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between mt-4 text-xs text-gray-500"> |
|
|
<div>10 PM</div> |
|
|
<div>12 AM</div> |
|
|
<div>2 AM</div> |
|
|
<div>4 AM</div> |
|
|
<div>6 AM</div> |
|
|
<div>8 AM</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center space-x-6 mt-6"> |
|
|
<div class="text-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-blue-200 mx-auto mb-1"></div> |
|
|
<div class="text-xs">Light</div> |
|
|
<div class="text-sm font-medium">3h 12m</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-blue-400 mx-auto mb-1"></div> |
|
|
<div class="text-xs">Deep</div> |
|
|
<div class="text-sm font-medium">2h 45m</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-blue-600 mx-auto mb-1"></div> |
|
|
<div class="text-xs">REM</div> |
|
|
<div class="text-sm font-medium">1h 35m</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200"> |
|
|
<div class="flex justify-around"> |
|
|
<button class="p-4 text-indigo-900"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="p-4 text-gray-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="p-4 text-gray-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="p-4 text-gray-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="alarm-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"> |
|
|
<div class="bg-white rounded-2xl w-full max-w-md animate-slide-up"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold">New Alarm</h2> |
|
|
<button id="close-alarm-modal" class="text-gray-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mb-8"> |
|
|
<div class="flex justify-center items-center"> |
|
|
<input type="number" min="1" max="12" value="7" class="time-picker text-5xl font-bold w-16 text-center border-none focus:ring-0"> |
|
|
<span class="text-5xl font-bold mx-2">:</span> |
|
|
<input type="number" min="0" max="59" value="30" class="time-picker text-5xl font-bold w-16 text-center border-none focus:ring-0"> |
|
|
</div> |
|
|
<div class="flex justify-center space-x-4 mt-2"> |
|
|
<button class="px-4 py-1 rounded-full bg-indigo-100 text-indigo-900 font-medium">AM</button> |
|
|
<button class="px-4 py-1 rounded-full bg-gray-100 text-gray-500 font-medium">PM</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Label</label> |
|
|
<input type="text" placeholder="Alarm name" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-900 focus:border-indigo-900"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Repeat</label> |
|
|
<div class="flex justify-between"> |
|
|
<button class="day-selector w-10 h-10 rounded-full font-medium" data-day="S">S</button> |
|
|
<button class="day-selector w-10 h-10 rounded-full font-medium" data-day="M">M</button> |
|
|
<button class="day-selector w-10 h-10 rounded-full font-medium active" data-day="T">T</button> |
|
|
<button class="day-selector w-10 h-10 rounded-full font-medium active" data-day="W">W</button> |
|
|
<button class="day-selector w-10 h-10 rounded-full font-medium active" data-day="T">T</button> |
|
|
<button class="day-selector w-10 h-10 rounded-full font-medium" data-day="F">F</button> |
|
|
<button class="day-selector w-10 h-10 rounded-full font-medium" data-day="S">S</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Sound</label> |
|
|
<div class="flex items-center justify-between bg-gray-100 px-4 py-3 rounded-xl"> |
|
|
<div class="flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 011.414 1.414" /> |
|
|
</svg> |
|
|
<span class="ml-2 font-medium">Morning Chime</span> |
|
|
</div> |
|
|
<button class="text-indigo-900"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<h3 class="font-medium mb-2">Advanced Features</h3> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-900 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> |
|
|
</svg> |
|
|
<span>Smart Wake</span> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-900 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> |
|
|
</svg> |
|
|
<span>Weather Adjust</span> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-900 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" /> |
|
|
</svg> |
|
|
<span>Wake-Up Challenge</span> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox"> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<button class="w-full bg-indigo-900 text-white py-3 rounded-xl font-medium">Save Alarm</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="alarm-trigger" class="hidden fixed inset-0 bg-indigo-900 z-50 flex flex-col items-center justify-center p-6 text-white"> |
|
|
<div class="text-center mb-8"> |
|
|
<div class="text-6xl font-bold mb-2" id="alarm-time">07:00</div> |
|
|
<div class="text-xl">Time to wake up!</div> |
|
|
</div> |
|
|
|
|
|
<div class="w-full max-w-sm bg-white bg-opacity-20 rounded-2xl p-6 mb-8"> |
|
|
<h3 class="text-lg font-medium mb-4">Math Challenge</h3> |
|
|
<div class="text-3xl font-bold mb-6" id="math-problem">3 × 7 = ?</div> |
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
<button class="bg-white bg-opacity-30 hover:bg-opacity-40 py-3 rounded-lg font-medium">15</button> |
|
|
<button class="bg-white bg-opacity-30 hover:bg-opacity-40 py-3 rounded-lg font-medium">21</button> |
|
|
<button class="bg-white bg-opacity-30 hover:bg-opacity-40 py-3 rounded-lg font-medium">18</button> |
|
|
<button class="bg-white bg-opacity-30 hover:bg-opacity-40 py-3 rounded-lg font-medium">24</button> |
|
|
<button class="bg-white bg-opacity-30 hover:bg-opacity-40 py-3 rounded-lg font-medium">12</button> |
|
|
<button class="bg-white bg-opacity-30 hover:bg-opacity-40 py-3 rounded-lg font-medium">9</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<button id="snooze" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-8 py-3 rounded-full font-medium flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
Snooze (5 min) |
|
|
</button> |
|
|
<button id="dismiss" class="bg-white text-indigo-900 hover:bg-gray-100 px-8 py-3 rounded-full font-medium"> |
|
|
Dismiss |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settings-screen" class="hidden fixed inset-0 bg-white z-40 overflow-y-auto"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button id="close-settings" class="mr-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> |
|
|
</svg> |
|
|
</button> |
|
|
<h1 class="text-2xl font-bold">Settings</h1> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<h2 class="text-lg font-semibold mb-4">Account</h2> |
|
|
<div class="bg-white rounded-xl shadow-sm p-4"> |
|
|
<div class="flex items-center space-x-4 mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">John Doe</div> |
|
|
<div class="text-sm text-gray-500">john.doe@example.com</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full border border-gray-300 py-2 rounded-lg font-medium">Edit Profile</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-lg font-semibold mb-4">Preferences</h2> |
|
|
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div>Time Zone</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-gray-500 mr-2">GMT+2</span> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div>Temperature Unit</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-gray-500 mr-2">°C</span> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div>Default Alarm Sound</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-gray-500 mr-2">Morning Chime</span> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-lg font-semibold mb-4">Integrations</h2> |
|
|
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 24 24" fill="#1DB954"> |
|
|
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/> |
|
|
</svg> |
|
|
<span>Spotify</span> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox"> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-800 mr-2" viewBox="0 0 24 24" fill="#000000"> |
|
|
<path d="M17.5 12c0 .32-.03.63-.08.93.03.01.06.03.08.05 1.51.56 2.56 1.89 2.56 3.46 0 2.03-1.95 3.56-4.63 3.56-1.6 0-2.8-.59-3.47-1.38-.67.79-1.87 1.38-3.47 1.38C5.95 21 4 19.47 4 17.44c0-1.58 1.06-2.9 2.58-3.45.02-.03.05-.04.08-.05-.05-.3-.08-.61-.08-.93 0-1.23.44-2.35 1.15-3.23-.12-.3-.19-.62-.19-.96 0-.83.34-1.58.88-2.12.54-.54 1.29-.88 2.12-.88.34 0 .66.07.96.19.88-.71 2-1.15 3.23-1.15 2.5 0 4.5 1.71 4.5 4 0 .34-.07.66-.19.96.71.88 1.15 2 1.15 3.23z"/> |
|
|
</svg> |
|
|
<span>Apple Health</span> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2" viewBox="0 0 24 24" fill="#4285F4"> |
|
|
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/> |
|
|
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/> |
|
|
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/> |
|
|
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/> |
|
|
<path d="M1 1h22v22H1z" fill="none"/> |
|
|
</svg> |
|
|
<span>Google Fit</span> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox"> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-lg font-semibold mb-4">About</h2> |
|
|
<div class="bg-white rounded-xl shadow-sm p-4 space-y-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div>Version</div> |
|
|
<div class="text-gray-500">1.2.4</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div>Terms of Service</div> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div>Privacy Policy</div> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<button class="w-full border border-gray-300 py-3 rounded-xl font-medium">Sign Out</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
setTimeout(function() { |
|
|
document.getElementById('splash').classList.add('hidden'); |
|
|
document.getElementById('onboarding').classList.remove('hidden'); |
|
|
}, 2000); |
|
|
|
|
|
|
|
|
let currentSlide = 0; |
|
|
const slides = document.querySelectorAll('.carousel-item'); |
|
|
const dots = document.querySelectorAll('.carousel .flex div'); |
|
|
|
|
|
document.getElementById('next-slide').addEventListener('click', function() { |
|
|
if (currentSlide < slides.length - 1) { |
|
|
slides[currentSlide].classList.remove('animate-slide-up'); |
|
|
currentSlide++; |
|
|
slides[currentSlide].classList.add('animate-slide-up'); |
|
|
|
|
|
|
|
|
dots.forEach((dot, index) => { |
|
|
if (index === currentSlide) { |
|
|
dot.classList.remove('bg-gray-300'); |
|
|
dot.classList.add('bg-indigo-900'); |
|
|
} else { |
|
|
dot.classList.remove('bg-indigo-900'); |
|
|
dot.classList.add('bg-gray-300'); |
|
|
} |
|
|
}); |
|
|
} else { |
|
|
|
|
|
document.getElementById('onboarding').classList.add('hidden'); |
|
|
document.getElementById('auth-screen').classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('skip-onboarding').addEventListener('click', function() { |
|
|
document.getElementById('onboarding').classList.add('hidden'); |
|
|
document.getElementById('auth-screen').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('sign-in').addEventListener('click', function() { |
|
|
document.getElementById('auth-screen').classList.add('hidden'); |
|
|
document.getElementById('app-screen').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
updateCurrentTime(); |
|
|
setInterval(updateCurrentTime, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('add-alarm').addEventListener('click', function() { |
|
|
document.getElementById('alarm-modal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('close-alarm-modal').addEventListener('click', function() { |
|
|
document.getElementById('alarm-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.day-selector').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
this.classList.toggle('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('open-settings').addEventListener('click', function() { |
|
|
document.getElementById('settings-screen').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('close-settings').addEventListener('click', function() { |
|
|
document.getElementById('settings-screen').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
|
|
|
|
|
|
}, 5000); |
|
|
|
|
|
document.getElementById('dismiss').addEventListener('click', function() { |
|
|
document.getElementById('alarm-trigger').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('snooze').addEventListener('click', function() { |
|
|
document.getElementById('alarm-trigger').classList.add('hidden'); |
|
|
|
|
|
alert('Alarm snoozed for 5 minutes'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('#alarm-trigger .grid button').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
if (this.textContent === '21') { |
|
|
document.getElementById('alarm-trigger').classList.add('hidden'); |
|
|
alert('Challenge completed! Alarm dismissed.'); |
|
|
} else { |
|
|
this.classList.remove('bg-opacity-30'); |
|
|
this.classList.add('bg-red-500', 'bg-opacity-100'); |
|
|
setTimeout(() => { |
|
|
this.classList.remove('bg-red-500', 'bg-opacity-100'); |
|
|
this.classList.add('bg-opacity-30'); |
|
|
}, 500); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateCurrentTime() { |
|
|
const now = new Date(); |
|
|
let hours = now.getHours(); |
|
|
let minutes = now.getMinutes(); |
|
|
const ampm = hours >= 12 ? 'PM' : 'AM'; |
|
|
hours = hours % 12; |
|
|
hours = hours ? hours : 12; |
|
|
minutes = minutes < 10 ? '0' + minutes : minutes; |
|
|
const timeString = hours + ':' + minutes + ' ' + ampm; |
|
|
document.getElementById('current-time').textContent = timeString; |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('button').forEach(button => { |
|
|
button.addEventListener('mousedown', function() { |
|
|
this.classList.add('transform', 'scale-95'); |
|
|
}); |
|
|
button.addEventListener('mouseup', function() { |
|
|
this.classList.remove('transform', 'scale-95'); |
|
|
}); |
|
|
button.addEventListener('mouseleave', function() { |
|
|
this.classList.remove('transform', 'scale-95'); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=222kdfdf/smartrise" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
