Spaces:
Running
Running
make a flash card app to help me read serious news each morning
Browse files- README.md +8 -5
- index.html +384 -19
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: MorningMind NewsCards 🌱
|
| 3 |
+
colorFrom: yellow
|
| 4 |
+
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,384 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>MorningMind - News Flashcards</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
theme: {
|
| 14 |
+
extend: {
|
| 15 |
+
colors: {
|
| 16 |
+
'news-green': {
|
| 17 |
+
50: '#f0f9f0',
|
| 18 |
+
100: '#dcf2dc',
|
| 19 |
+
200: '#bce5bc',
|
| 20 |
+
300: '#8fd28f',
|
| 21 |
+
400: '#5db75d',
|
| 22 |
+
500: '#3d9c3d',
|
| 23 |
+
600: '#2e7d2e',
|
| 24 |
+
700: '#256325',
|
| 25 |
+
800: '#204f20',
|
| 26 |
+
900: '#1c421c',
|
| 27 |
+
}
|
| 28 |
+
}
|
| 29 |
+
}
|
| 30 |
+
}
|
| 31 |
+
}
|
| 32 |
+
</script>
|
| 33 |
+
<style>
|
| 34 |
+
.card {
|
| 35 |
+
transform-style: preserve-3d;
|
| 36 |
+
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
.card.flipped {
|
| 40 |
+
transform: rotateY(180deg);
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
.card-front, .card-back {
|
| 44 |
+
backface-visibility: hidden;
|
| 45 |
+
position: absolute;
|
| 46 |
+
width: 100%;
|
| 47 |
+
height: 100%;
|
| 48 |
+
top: 0;
|
| 49 |
+
left: 0;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
.card-back {
|
| 53 |
+
transform: rotateY(180deg);
|
| 54 |
+
}
|
| 55 |
+
|
| 56 |
+
.progress-bar {
|
| 57 |
+
transition: width 0.5s ease-in-out;
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
.notification-bell {
|
| 61 |
+
animation: gentleRing 2s ease-in-out infinite;
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
@keyframes gentleRing {
|
| 65 |
+
0%, 100% { transform: rotate(0deg); }
|
| 66 |
+
25% { transform: rotate(10deg); }
|
| 67 |
+
75% { transform: rotate(-10deg); }
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
.slide-in {
|
| 71 |
+
animation: slideIn 0.3s ease-out;
|
| 72 |
+
}
|
| 73 |
+
|
| 74 |
+
@keyframes slideIn {
|
| 75 |
+
from { transform: translateX(100%); opacity: 0; }
|
| 76 |
+
to { transform: translateX(0); opacity: 1; }
|
| 77 |
+
}
|
| 78 |
+
</style>
|
| 79 |
+
</head>
|
| 80 |
+
<body class="bg-gray-50 min-h-screen font-sans">
|
| 81 |
+
<!-- Navigation Header -->
|
| 82 |
+
<nav class="bg-white shadow-sm border-b border-gray-100">
|
| 83 |
+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 84 |
+
<div class="flex justify-between h-16">
|
| 85 |
+
<div class="flex items-center">
|
| 86 |
+
<div class="flex-shrink-0 flex items-center">
|
| 87 |
+
<i data-feather="book-open" class="h-8 w-8 text-news-green-500"></i>
|
| 88 |
+
<span class="ml-2 text-xl font-semibold text-gray-900">MorningMind</span>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
<div class="flex items-center space-x-4">
|
| 92 |
+
<button id="settingsBtn" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
|
| 93 |
+
<i data-feather="settings" class="h-5 w-5 text-gray-600"></i>
|
| 94 |
+
</button>
|
| 95 |
+
<button id="notificationsBtn" class="p-2 rounded-full hover:bg-gray-100 transition-colors relative">
|
| 96 |
+
<i data-feather="bell" class="h-5 w-5 text-gray-600 notification-bell"></i>
|
| 97 |
+
<span class="absolute top-0 right-0 h-2 w-2 bg-news-green-500 rounded-full"></span>
|
| 98 |
+
</button>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
</nav>
|
| 103 |
+
|
| 104 |
+
<!-- Main Content -->
|
| 105 |
+
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
| 106 |
+
<!-- Progress Tracker -->
|
| 107 |
+
<div class="mb-8">
|
| 108 |
+
<div class="flex justify-between items-center mb-2">
|
| 109 |
+
<span class="text-sm font-medium text-gray-700">Daily Progress</span>
|
| 110 |
+
<span class="text-sm font-medium text-news-green-600" id="progressText">1/5</span>
|
| 111 |
+
</div>
|
| 112 |
+
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
| 113 |
+
<div id="progressBar" class="progress-bar bg-news-green-500 h-2.5 rounded-full" style="width: 20%"></div>
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
|
| 117 |
+
<!-- Flash Card Container -->
|
| 118 |
+
<div class="relative mb-8">
|
| 119 |
+
<div id="flashCard" class="card w-full max-w-2xl mx-auto aspect-[4/3] bg-white rounded-xl shadow-lg cursor-pointer">
|
| 120 |
+
<div class="card-front w-full h-full flex items-center justify-center p-8">
|
| 121 |
+
<div class="text-center">
|
| 122 |
+
<h2 id="cardHeadline" class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 leading-tight">
|
| 123 |
+
Global Economic Forum Announces New Sustainability Initiatives
|
| 124 |
+
</h2>
|
| 125 |
+
<p class="text-gray-600">Tap to reveal details</p>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
<div class="card-back w-full h-full flex items-center justify-center p-8 bg-news-green-50 rounded-xl">
|
| 129 |
+
<div class="text-center">
|
| 130 |
+
<p id="cardDetails" class="text-lg sm:text-xl text-gray-800 leading-relaxed">
|
| 131 |
+
The World Economic Forum has unveiled a comprehensive package of sustainability measures aimed at reducing carbon emissions by 45% by 2030. The initiative includes partnerships with 50 major corporations and focuses on renewable energy transition, circular economy practices, and green technology investments across developing nations.
|
| 132 |
+
</p>
|
| 133 |
+
</div>
|
| 134 |
+
</div>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
|
| 138 |
+
<!-- Navigation Controls -->
|
| 139 |
+
<div class="flex justify-center space-x-4 mb-8">
|
| 140 |
+
<button id="prevBtn" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
| 141 |
+
<i data-feather="chevron-left" class="w-4 h-4 inline mr-2"></i>Previous
|
| 142 |
+
</button>
|
| 143 |
+
<button id="flipBtn" class="px-6 py-3 bg-news-green-500 text-white rounded-lg font-medium hover:bg-news-green-600 transition-colors">
|
| 144 |
+
<i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>Flip Card
|
| 145 |
+
</button>
|
| 146 |
+
<button id="nextBtn" class="px-6 py-3 bg-news-green-500 text-white rounded-lg font-medium hover:bg-news-green-600 transition-colors">
|
| 147 |
+
Next<i data-feather="chevron-right" class="w-4 h-4 inline ml-2"></i>
|
| 148 |
+
</button>
|
| 149 |
+
</div>
|
| 150 |
+
|
| 151 |
+
<!-- Category Tags -->
|
| 152 |
+
<div class="flex justify-center flex-wrap gap-2 mb-8">
|
| 153 |
+
<span class="px-3 py-1 bg-news-green-100 text-news-green-800 rounded-full text-sm font-medium">Politics</span>
|
| 154 |
+
<span class="px-3 py-1 bg-news-green-100 text-news-green-800 rounded-full text-sm font-medium">Economics</span>
|
| 155 |
+
<span class="px-3 py-1 bg-news-green-100 text-news-green-800 rounded-full text-sm font-medium">International</span>
|
| 156 |
+
<span class="px-3 py-1 bg-news-green-100 text-news-green-800 rounded-full text-sm font-medium">Technology</span>
|
| 157 |
+
</div>
|
| 158 |
+
</main>
|
| 159 |
+
|
| 160 |
+
<!-- Settings Panel -->
|
| 161 |
+
<div id="settingsPanel" class="fixed inset-y-0 right-0 w-80 bg-white shadow-xl transform translate-x-full transition-transform duration-300 z-50">
|
| 162 |
+
<div class="p-6">
|
| 163 |
+
<div class="flex justify-between items-center mb-6">
|
| 164 |
+
<h3 class="text-lg font-semibold text-gray-900">Settings</h3>
|
| 165 |
+
<button id="closeSettings" class="p-1 rounded hover:bg-gray-100">
|
| 166 |
+
<i data-feather="x" class="h-5 w-5"></i>
|
| 167 |
+
</button>
|
| 168 |
+
</div>
|
| 169 |
+
|
| 170 |
+
<div class="space-y-6">
|
| 171 |
+
<div>
|
| 172 |
+
<h4 class="font-medium text-gray-900 mb-3">News Categories</h4>
|
| 173 |
+
<div class="space-y-2">
|
| 174 |
+
<label class="flex items-center">
|
| 175 |
+
<input type="checkbox" class="rounded text-news-green-500" checked>
|
| 176 |
+
<span class="ml-2 text-gray-700">Politics</span>
|
| 177 |
+
</label>
|
| 178 |
+
<label class="flex items-center">
|
| 179 |
+
<input type="checkbox" class="rounded text-news-green-500" checked>
|
| 180 |
+
<span class="ml-2 text-gray-700">Economics</span>
|
| 181 |
+
</label>
|
| 182 |
+
<label class="flex items-center">
|
| 183 |
+
<input type="checkbox" class="rounded text-news-green-500">
|
| 184 |
+
<span class="ml-2 text-gray-700">Technology</span>
|
| 185 |
+
</label>
|
| 186 |
+
<label class="flex items-center">
|
| 187 |
+
<input type="checkbox" class="rounded text-news-green-500" checked>
|
| 188 |
+
<span class="ml-2 text-gray-700">International</span>
|
| 189 |
+
</label>
|
| 190 |
+
<label class="flex items-center">
|
| 191 |
+
<input type="checkbox" class="rounded text-news-green-500">
|
| 192 |
+
<span class="ml-2 text-gray-700">Science</span>
|
| 193 |
+
</label>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
|
| 197 |
+
<div>
|
| 198 |
+
<h4 class="font-medium text-gray-900 mb-3">Daily Reminder</h4>
|
| 199 |
+
<div class="space-y-3">
|
| 200 |
+
<label class="flex items-center justify-between">
|
| 201 |
+
<span class="text-gray-700">Enable Reminder</span>
|
| 202 |
+
<div class="relative inline-block w-10 mr-2 align-middle select-none">
|
| 203 |
+
<input type="checkbox" id="reminderToggle" class="sr-only" checked>
|
| 204 |
+
<div class="block w-10 h-6 bg-gray-300 rounded-full"></div>
|
| 205 |
+
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform translate-x-0"></div>
|
| 206 |
+
</div>
|
| 207 |
+
</label>
|
| 208 |
+
<div>
|
| 209 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Time</label>
|
| 210 |
+
<input type="time" class="w-full p-2 border border-gray-300 rounded-lg" value="07:00">
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
</div>
|
| 214 |
+
|
| 215 |
+
<div>
|
| 216 |
+
<h4 class="font-medium text-gray-900 mb-3">Cards per Session</h4>
|
| 217 |
+
<select class="w-full p-2 border border-gray-300 rounded-lg">
|
| 218 |
+
<option>5 cards</option>
|
| 219 |
+
<option>10 cards</option>
|
| 220 |
+
<option>15 cards</option>
|
| 221 |
+
<option>20 cards</option>
|
| 222 |
+
</select>
|
| 223 |
+
</div>
|
| 224 |
+
|
| 225 |
+
<button class="w-full py-3 bg-news-green-500 text-white rounded-lg font-medium hover:bg-news-green-600 transition-colors">
|
| 226 |
+
Save Settings
|
| 227 |
+
</button>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
+
</div>
|
| 231 |
+
|
| 232 |
+
<!-- Notifications Panel -->
|
| 233 |
+
<div id="notificationsPanel" class="fixed inset-y-0 right-0 w-80 bg-white shadow-xl transform translate-x-full transition-transform duration-300 z-50">
|
| 234 |
+
<div class="p-6">
|
| 235 |
+
<div class="flex justify-between items-center mb-6">
|
| 236 |
+
<h3 class="text-lg font-semibold text-gray-900">Notifications</h3>
|
| 237 |
+
<button id="closeNotifications" class="p-1 rounded hover:bg-gray-100">
|
| 238 |
+
<i data-feather="x" class="h-5 w-5"></i>
|
| 239 |
+
</button>
|
| 240 |
+
</div>
|
| 241 |
+
|
| 242 |
+
<div class="space-y-4">
|
| 243 |
+
<div class="p-4 bg-news-green-50 rounded-lg slide-in">
|
| 244 |
+
<div class="flex items-start">
|
| 245 |
+
<i data-feather="bell" class="h-5 w-5 text-news-green-500 mt-0.5 mr-3"></i>
|
| 246 |
+
<div>
|
| 247 |
+
<p class="font-medium text-gray-900">Daily Reading Reminder</p>
|
| 248 |
+
<p class="text-sm text-gray-600 mt-1">Your morning news session is ready. Start your day informed!</p>
|
| 249 |
+
<p class="text-xs text-gray-500 mt-2">Today, 7:00 AM</p>
|
| 250 |
+
</div>
|
| 251 |
+
</div>
|
| 252 |
+
</div>
|
| 253 |
+
|
| 254 |
+
<div class="p-4 bg-gray-50 rounded-lg slide-in">
|
| 255 |
+
<div class="flex items-start">
|
| 256 |
+
<i data-feather="trending-up" class="h-5 w-5 text-gray-500 mt-0.5 mr-3"></i>
|
| 257 |
+
<div>
|
| 258 |
+
<p class="font-medium text-gray-900">Weekly Progress</p>
|
| 259 |
+
<p class="text-sm text-gray-600 mt-1">You've completed 12 sessions this week. Great consistency!</p>
|
| 260 |
+
<p class="text-xs text-gray-500 mt-2">Yesterday, 6:30 PM</p>
|
| 261 |
+
</div>
|
| 262 |
+
</div>
|
| 263 |
+
</div>
|
| 264 |
+
</div>
|
| 265 |
+
</div>
|
| 266 |
+
</div>
|
| 267 |
+
|
| 268 |
+
<!-- Overlay -->
|
| 269 |
+
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
|
| 270 |
+
|
| 271 |
+
<script>
|
| 272 |
+
// Sample news data
|
| 273 |
+
const newsCards = [
|
| 274 |
+
{
|
| 275 |
+
headline: "Global Economic Forum Announces New Sustainability Initiatives",
|
| 276 |
+
details: "The World Economic Forum has unveiled a comprehensive package of sustainability measures aimed at reducing carbon emissions by 45% by 2030. The initiative includes partnerships with 50 major corporations and focuses on renewable energy transition, circular economy practices, and green technology investments across developing nations.",
|
| 277 |
+
category: "Economics"
|
| 278 |
+
},
|
| 279 |
+
{
|
| 280 |
+
headline: "Major Climate Agreement Reached at International Summit",
|
| 281 |
+
details: "World leaders have agreed on a historic climate pact that sets binding targets for carbon neutrality by 2050. The agreement includes provisions for technology transfer to developing nations and establishes a global carbon trading system with strict monitoring mechanisms.",
|
| 282 |
+
category: "International"
|
| 283 |
+
},
|
| 284 |
+
{
|
| 285 |
+
headline: "Tech Giants Collaborate on AI Ethics Framework",
|
| 286 |
+
details: "Leading technology companies have jointly developed a comprehensive AI ethics framework that addresses bias mitigation, transparency requirements, and accountability measures. The framework will be adopted voluntarily across the industry with third-party auditing.",
|
| 287 |
+
category: "Technology"
|
| 288 |
+
},
|
| 289 |
+
{
|
| 290 |
+
headline: "Central Banks Coordinate on Digital Currency Standards",
|
| 291 |
+
details: "Major central banks have announced a coordinated approach to digital currency development, establishing interoperability standards and security protocols. The initiative aims to create a stable foundation for the future of digital finance while maintaining monetary policy effectiveness.",
|
| 292 |
+
category: "Economics"
|
| 293 |
+
},
|
| 294 |
+
{
|
| 295 |
+
headline: "Healthcare Innovation Accelerates Post-Pandemic",
|
| 296 |
+
details: "Global healthcare systems are implementing lessons learned during the pandemic, with accelerated adoption of telemedicine, AI diagnostics, and decentralized clinical trials. These innovations are expected to improve accessibility and reduce costs significantly.",
|
| 297 |
+
category: "Science"
|
| 298 |
+
}
|
| 299 |
+
];
|
| 300 |
+
|
| 301 |
+
let currentCardIndex = 0;
|
| 302 |
+
const totalCards = newsCards.length;
|
| 303 |
+
|
| 304 |
+
// DOM Elements
|
| 305 |
+
const flashCard = document.getElementById('flashCard');
|
| 306 |
+
const cardHeadline = document.getElementById('cardHeadline');
|
| 307 |
+
const cardDetails = document.getElementById('cardDetails');
|
| 308 |
+
const prevBtn = document.getElementById('prevBtn');
|
| 309 |
+
const nextBtn = document.getElementById('nextBtn');
|
| 310 |
+
const flipBtn = document.getElementById('flipBtn');
|
| 311 |
+
const progressBar = document.getElementById('progressBar');
|
| 312 |
+
const progressText = document.getElementById('progressText');
|
| 313 |
+
const settingsBtn = document.getElementById('settingsBtn');
|
| 314 |
+
const notificationsBtn = document.getElementById('notificationsBtn');
|
| 315 |
+
const settingsPanel = document.getElementById('settingsPanel');
|
| 316 |
+
const notificationsPanel = document.getElementById('notificationsPanel');
|
| 317 |
+
const closeSettings = document.getElementById('closeSettings');
|
| 318 |
+
const closeNotifications = document.getElementById('closeNotifications');
|
| 319 |
+
const overlay = document.getElementById('overlay');
|
| 320 |
+
|
| 321 |
+
// Initialize card
|
| 322 |
+
function updateCard() {
|
| 323 |
+
const card = newsCards[currentCardIndex];
|
| 324 |
+
cardHeadline.textContent = card.headline;
|
| 325 |
+
cardDetails.textContent = card.details;
|
| 326 |
+
|
| 327 |
+
// Update progress
|
| 328 |
+
const progress = ((currentCardIndex + 1) / totalCards) * 100;
|
| 329 |
+
progressBar.style.width = `${progress}%`;
|
| 330 |
+
progressText.textContent = `${currentCardIndex + 1}/${totalCards}`;
|
| 331 |
+
|
| 332 |
+
// Update button states
|
| 333 |
+
prevBtn.disabled = currentCardIndex === 0;
|
| 334 |
+
nextBtn.disabled = currentCardIndex === totalCards - 1;
|
| 335 |
+
|
| 336 |
+
// Reset card flip state
|
| 337 |
+
flashCard.classList.remove('flipped');
|
| 338 |
+
}
|
| 339 |
+
|
| 340 |
+
// Event Listeners
|
| 341 |
+
flashCard.addEventListener('click', () => {
|
| 342 |
+
flashCard.classList.toggle('flipped');
|
| 343 |
+
});
|
| 344 |
+
|
| 345 |
+
flipBtn.addEventListener('click', () => {
|
| 346 |
+
flashCard.classList.toggle('flipped');
|
| 347 |
+
});
|
| 348 |
+
|
| 349 |
+
nextBtn.addEventListener('click', () => {
|
| 350 |
+
if (currentCardIndex < totalCards - 1) {
|
| 351 |
+
currentCardIndex++;
|
| 352 |
+
updateCard();
|
| 353 |
+
}
|
| 354 |
+
});
|
| 355 |
+
|
| 356 |
+
prevBtn.addEventListener('click', () => {
|
| 357 |
+
if (currentCardIndex > 0) {
|
| 358 |
+
currentCardIndex--;
|
| 359 |
+
updateCard();
|
| 360 |
+
}
|
| 361 |
+
});
|
| 362 |
+
|
| 363 |
+
// Panel controls
|
| 364 |
+
function openPanel(panel) {
|
| 365 |
+
panel.classList.remove('translate-x-full');
|
| 366 |
+
overlay.classList.remove('hidden');
|
| 367 |
+
}
|
| 368 |
+
|
| 369 |
+
function closeAllPanels() {
|
| 370 |
+
settingsPanel.classList.add('translate-x-full');
|
| 371 |
+
notificationsPanel.classList.add('translate-x-full');
|
| 372 |
+
overlay.classList.add('hidden');
|
| 373 |
+
}
|
| 374 |
+
|
| 375 |
+
settingsBtn.addEventListener('click', () => openPanel(settingsPanel));
|
| 376 |
+
notificationsBtn.addEventListener('click', () => openPanel(notificationsPanel));
|
| 377 |
+
closeSettings.addEventListener('click', closeAllPanels);
|
| 378 |
+
closeNotifications.addEventListener('click', closeAllPanels);
|
| 379 |
+
overlay.addEventListener('click', closeAllPanels);
|
| 380 |
+
|
| 381 |
+
// Toggle switch functionality
|
| 382 |
+
const reminderToggle = document.getElementById('reminderToggle');
|
| 383 |
+
</body>
|
| 384 |
+
</html>
|