rrr257/TableTopics
0
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>Table Topics Practice</title>7 <style>8 * {9 margin: 0;10 padding: 0;11 box-sizing: border-box;12 }13 14 body {15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;16 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);17 min-height: 100vh;18 display: flex;19 justify-content: center;20 align-items: center;21 padding: 20px;22 }23 24 .container {25 background: white;26 border-radius: 20px;27 box-shadow: 0 20px 60px rgba(0,0,0,0.3);28 padding: 40px;29 max-width: 900px;30 width: 100%;31 }32 33 h1 {34 text-align: center;35 color: #333;36 margin-bottom: 30px;37 font-size: 2.5em;38 }39 40 .themes-grid {41 display: grid;42 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));43 gap: 20px;44 margin-bottom: 30px;45 }46 47 .theme-card {48 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);49 border-radius: 15px;50 padding: 25px;51 color: white;52 cursor: pointer;53 transition: transform 0.3s, box-shadow 0.3s;54 text-align: center;55 }56 57 .theme-card:hover {58 transform: translateY(-5px);59 box-shadow: 0 10px 30px rgba(0,0,0,0.3);60 }61 62 .theme-card h3 {63 font-size: 1.4em;64 margin-bottom: 10px;65 }66 67 .theme-card p {68 font-size: 0.9em;69 opacity: 0.9;70 }71 72 .selected-theme {73 text-align: center;74 margin-bottom: 30px;75 }76 77 .selected-theme h2 {78 color: #667eea;79 font-size: 2em;80 margin-bottom: 20px;81 }82 83 .topic-display {84 background: #f8f9fa;85 border-radius: 15px;86 padding: 30px;87 margin-bottom: 30px;88 min-height: 150px;89 display: flex;90 align-items: center;91 justify-content: center;92 text-align: center;93 }94 95 .topic-display h3 {96 color: #333;97 font-size: 1.5em;98 line-height: 1.6;99 }100 101 .timer-section {102 text-align: center;103 margin-bottom: 30px;104 }105 106 .timer-display {107 font-size: 4em;108 font-weight: bold;109 color: #333;110 margin-bottom: 20px;111 }112 113 .traffic-lights {114 display: flex;115 justify-content: center;116 gap: 30px;117 margin-bottom: 30px;118 }119 120 .light {121 width: 60px;122 height: 60px;123 border-radius: 50%;124 border: 3px solid #ddd;125 transition: all 0.3s;126 }127 128 .light.green {129 background-color: #e0e0e0;130 }131 132 .light.green.active {133 background-color: #4caf50;134 box-shadow: 0 0 20px #4caf50;135 border-color: #4caf50;136 }137 138 .light.yellow {139 background-color: #e0e0e0;140 }141 142 .light.yellow.active {143 background-color: #ffc107;144 box-shadow: 0 0 20px #ffc107;145 border-color: #ffc107;146 }147 148 .light.red {149 background-color: #e0e0e0;150 }151 152 .light.red.active {153 background-color: #f44336;154 box-shadow: 0 0 20px #f44336;155 border-color: #f44336;156 }157 158 .controls {159 display: flex;160 gap: 15px;161 justify-content: center;162 flex-wrap: wrap;163 }164 165 button {166 padding: 15px 30px;167 font-size: 1.1em;168 border: none;169 border-radius: 10px;170 cursor: pointer;171 transition: all 0.3s;172 font-weight: bold;173 }174 175 .btn-primary {176 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);177 color: white;178 }179 180 .btn-primary:hover {181 transform: translateY(-2px);182 box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);183 }184 185 .btn-secondary {186 background: #6c757d;187 color: white;188 }189 190 .btn-secondary:hover {191 background: #5a6268;192 transform: translateY(-2px);193 }194 195 button:disabled {196 opacity: 0.5;197 cursor: not-allowed;198 transform: none !important;199 }200 201 .hidden {202 display: none;203 }204 205 .message {206 text-align: center;207 padding: 20px;208 background: #fff3cd;209 border-radius: 10px;210 color: #856404;211 font-size: 1.2em;212 margin-bottom: 20px;213 }214 215 @media (max-width: 768px) {216 .container {217 padding: 20px;218 }219 220 h1 {221 font-size: 1.8em;222 }223 224 .timer-display {225 font-size: 3em;226 }227 228 .light {229 width: 50px;230 height: 50px;231 }232 }233 </style>234</head>235<body>236 <div class="container">237 <h1>Table Topics Practice</h1>238 239 <!-- Opening Screen: Theme Selection -->240 <div id="themeSelection">241 <div class="themes-grid">242 <div class="theme-card" data-theme="0">243 <h3>If You Could...</h3>244 <p>Fun & Imaginative</p>245 </div>246 <div class="theme-card" data-theme="1">247 <h3>Unpopular Opinions</h3>248 <p>Fun & Edgy</p>249 </div>250 <div class="theme-card" data-theme="2">251 <h3>What Would You Do?</h3>252 <p>Serious & Thoughtful</p>253 </div>254 <div class="theme-card" data-theme="3">255 <h3>Throwback</h3>256 <p>Nostalgic & Personal</p>257 </div>258 <div class="theme-card" data-theme="4">259 <h3>You're the Expert</h3>260 <p>Fun & Creative</p>261 </div>262 <div class="theme-card" data-theme="5">263 <h3>The Big Questions</h3>264 <p>Serious & Philosophical</p>265 </div>266 <div class="theme-card" data-theme="6">267 <h3>Would You Rather</h3>268 <p>Fun & Interactive</p>269 </div>270 </div>271 </div>272 273 <!-- Theme Selected Screen -->274 <div id="sessionScreen" class="hidden">275 <div class="selected-theme">276 <h2 id="themeName"></h2>277 </div>278 279 <div id="completionMessage" class="message hidden">280 All topics used - click Reset to start over281 </div>282 283 <div id="topicDisplay" class="topic-display hidden">284 <h3 id="topicText"></h3>285 </div>286 287 <div id="timerSection" class="timer-section hidden">288 <div class="timer-display" id="timerDisplay">0:00</div>289 <div class="traffic-lights">290 <div class="light green" id="greenLight"></div>291 <div class="light yellow" id="yellowLight"></div>292 <div class="light red" id="redLight"></div>293 </div>294 </div>295 296 <div class="controls">297 <button id="nextSpeakerBtn" class="btn-primary">Next Speaker</button>298 <button id="startSpeakingBtn" class="btn-primary hidden">Start Speaking</button>299 <button id="resetBtn" class="btn-secondary">Reset</button>300 </div>301 </div>302 </div>303 304 <script>305 const themes = [306 {307 name: "If You Could...",308 topics: [309 "If you could have dinner with any person, living or dead, who would it be?",310 "If you could instantly master one skill, what would it be?",311 "If you could live in any fictional world, where would you go?",312 "If you could only eat one cuisine for the rest of your life, what would it be?",313 "If you could switch lives with someone for a week, who would it be?",314 "If you could eliminate one invention from history, what would it be?",315 "If you could speak any language fluently overnight, which would you choose?",316 "If you could bring back one extinct animal, what would it be?",317 "If you could time travel but only once, where would you go?"318 ]319 },320 {321 name: "Unpopular Opinions",322 topics: [323 "Pineapple belongs on pizza — agree or disagree?",324 "Mornings are better than evenings.",325 "Working from home is actually worse than the office.",326 "Social media has done more harm than good.",327 "Vacations are overrated.",328 "Pets are better companions than people.",329 "Winning isn't everything — participation matters just as much.",330 "Small talk is a waste of time.",331 "Dessert should be eaten before dinner."332 ]333 },334 {335 name: "What Would You Do?",336 topics: [337 "What would you do if you found out a close friend was being dishonest at work?",338 "What would you do if you witnessed someone being treated unfairly in public?",339 "What would you do if you were given $1 million but had to give half away?",340 "What would you do if you discovered your dream job made you miserable?",341 "What would you do if a family member asked you for advice you disagreed with?",342 "What would you do if you could redesign the education system from scratch?",343 "What would you do if you had one year left to live but were in perfect health?",344 "What would you do if you were elected mayor of your city tomorrow?"345 ]346 },347 {348 name: "Throwback",349 topics: [350 "What was your favorite thing about being a kid?",351 "What's a trend from your teenage years you're glad is gone?",352 "What's one piece of advice you wish you could give your younger self?",353 "What was your most memorable family vacation?",354 "What's a childhood fear you've since gotten over — or haven't?",355 "What's the best lesson a teacher ever taught you?",356 "What game or toy from your childhood meant the most to you?",357 "What's a moment from your past that changed the direction of your life?",358 "What did you want to be when you grew up, and how close did you get?"359 ]360 },361 {362 name: "You're the Expert",363 topics: [364 "You are the world's foremost expert on napping — share your wisdom.",365 "You've just written a book on how to have the perfect pizza night — what's in it?",366 "You're a leading scientist who just discovered why Mondays feel so hard — explain your findings.",367 "You're the world's top negotiator — how do you convince a toddler to eat vegetables?",368 "You're an architect designing the perfect home office — walk us through it.",369 "You've cracked the code on the perfect road trip — what's the secret?",370 "You're a renowned chef whose specialty is breakfast — make the case for it being the greatest meal.",371 "You're a psychologist who studies why people argue about the thermostat — what have you learned?"372 ]373 },374 {375 name: "The Big Questions",376 topics: [377 "What does success actually mean to you?",378 "Is it more important to be liked or to be respected?",379 "What's one thing society gets completely wrong?",380 "What does it mean to live a good life?",381 "Is change something to embrace or something to be cautious about?",382 "What's the most important quality in a leader?",383 "Do people fundamentally change, or do they just adapt?",384 "What responsibility do we have to future generations?",385 "Is it possible to be truly selfless, or is everything we do ultimately for ourselves?"386 ]387 },388 {389 name: "Would You Rather",390 topics: [391 "Would you rather never need sleep or never need to eat?",392 "Would you rather live 200 years in the past or 200 years in the future?",393 "Would you rather be the funniest person in the room or the smartest?",394 "Would you rather lose all your memories or never be able to make new ones?",395 "Would you rather always have to sing instead of speak or always have to dance instead of walk?",396 "Would you rather know how you're going to die or know exactly when?",397 "Would you rather be able to talk to animals or speak every human language fluently?",398 "Would you rather live in the mountains or on the beach?",399 "Would you rather be famous but broke or wealthy but unknown?",400 "Would you rather have the ability to read minds or predict the future?",401 "Would you rather give up your phone for a year or give up your car for a year?"402 ]403 }404 ];405 406 let selectedTheme = null;407 let usedTopics = [];408 let availableTopics = [];409 let timerInterval = null;410 let seconds = 0;411 let isTimerRunning = false;412 413 // DOM elements414 const themeSelection = document.getElementById('themeSelection');415 const sessionScreen = document.getElementById('sessionScreen');416 const themeName = document.getElementById('themeName');417 const topicDisplay = document.getElementById('topicDisplay');418 const topicText = document.getElementById('topicText');419 const timerSection = document.getElementById('timerSection');420 const timerDisplay = document.getElementById('timerDisplay');421 const nextSpeakerBtn = document.getElementById('nextSpeakerBtn');422 const startSpeakingBtn = document.getElementById('startSpeakingBtn');423 const resetBtn = document.getElementById('resetBtn');424 const greenLight = document.getElementById('greenLight');425 const yellowLight = document.getElementById('yellowLight');426 const redLight = document.getElementById('redLight');427 const completionMessage = document.getElementById('completionMessage');428 429 // Theme selection430 document.querySelectorAll('.theme-card').forEach(card => {431 card.addEventListener('click', function() {432 const themeIndex = parseInt(this.dataset.theme);433 selectTheme(themeIndex);434 });435 });436 437 function selectTheme(themeIndex) {438 selectedTheme = themes[themeIndex];439 availableTopics = [...selectedTheme.topics];440 usedTopics = [];441 442 themeName.textContent = selectedTheme.name;443 themeSelection.classList.add('hidden');444 sessionScreen.classList.remove('hidden');445 446 topicDisplay.classList.add('hidden');447 timerSection.classList.add('hidden');448 startSpeakingBtn.classList.add('hidden');449 completionMessage.classList.add('hidden');450nextSpeakerBtn.classList.remove('hidden');451 nextSpeakerBtn.disabled = false;452 }453 454 // Next Speaker button455 nextSpeakerBtn.addEventListener('click', function() {456 if (availableTopics.length === 0) {457 completionMessage.classList.remove('hidden');458 nextSpeakerBtn.disabled = true;459 return;460 }461 462 // Stop timer if running463 if (isTimerRunning) {464 stopTimer();465 }466 467 // Get random unused topic468 const randomIndex = Math.floor(Math.random() * availableTopics.length);469 const topic = availableTopics[randomIndex];470 471 // Move topic from available to used472 availableTopics.splice(randomIndex, 1);473 usedTopics.push(topic);474 475 // Display topic476 topicText.textContent = topic;477 topicDisplay.classList.remove('hidden');478 timerSection.classList.add('hidden');479 startSpeakingBtn.classList.remove('hidden');480 nextSpeakerBtn.classList.add('hidden');481 completionMessage.classList.add('hidden');482 });483 484 // Start Speaking button485 startSpeakingBtn.addEventListener('click', function() {486 startTimer();487 timerSection.classList.remove('hidden');488 startSpeakingBtn.classList.add('hidden');489 nextSpeakerBtn.classList.remove('hidden');490 });491 492 // Reset button493 resetBtn.addEventListener('click', function() {494 stopTimer();495 selectedTheme = null;496 usedTopics = [];497 availableTopics = [];498 499 sessionScreen.classList.add('hidden');500 themeSelection.classList.remove('hidden');501 topicDisplay.classList.add('hidden');502 timerSection.classList.add('hidden');503 startSpeakingBtn.classList.add('hidden');504 completionMessage.classList.add('hidden');505nextSpeakerBtn.classList.remove('hidden');506nextSpeakerBtn.disabled = false;507 });508 509 function startTimer() {510 seconds = 0;511 isTimerRunning = true;512 updateTimerDisplay();513 resetLights();514 515 timerInterval = setInterval(function() {516 seconds++;517 updateTimerDisplay();518 updateLights();519 }, 1000);520 }521 522 function stopTimer() {523 if (timerInterval) {524 clearInterval(timerInterval);525 timerInterval = null;526 }527 isTimerRunning = false;528 seconds = 0;529 updateTimerDisplay();530 resetLights();531 }532 533 function updateTimerDisplay() {534 const mins = Math.floor(seconds / 60);535 const secs = seconds % 60;536 timerDisplay.textContent = `${mins}:${secs.toString().padStart(2, '0')}`;537 }538 539 function updateLights() {540 // Green at 1:00 (60 seconds)541 if (seconds >= 60) {542 greenLight.classList.add('active');543 }544 545 // Yellow at 1:30 (90 seconds)546 if (seconds >= 90) {547 yellowLight.classList.add('active');548 }549 550 // Red at 2:00 (120 seconds)551 if (seconds >= 120) {552 redLight.classList.add('active');553 }554 }555 556 function resetLights() {557 greenLight.classList.remove('active');558 yellowLight.classList.remove('active');559 redLight.classList.remove('active');560 }561 </script>562 <!-- Creator Credit -->563<div style="text-align: center; padding: 20px; color: rgba(255,255,255,0.8); font-size: 0.9em;">564 App created by Ron Ruiz565</div>566</body>567 </html>