Simulation Clock<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n background: linear-gradient(135deg, #060606 0%, #8d7f08 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 15px;\n touch-action: manipulation;\n }\n\n .container {\n background: rgba(169, 168, 166, 0.98);\n padding: clamp(20px, 5vw, 40px);\n border-radius: 20px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n max-width: 500px;\n width: 100%;\n }\n\n h1 {\n color: #060609;\n margin-bottom: 8px;\n font-size: clamp(24px, 6vw, 32px);\n text-align: center;\n }\n\n .subtitle {\n text-align: center;\n color: #050505;\n margin-bottom: 25px;\n font-size: clamp(12px, 3vw, 14px);\n line-height: 1.4;\n }\n\n .clock-display {\n background: #1a1a1a;\n padding: clamp(25px, 6vw, 40px);\n border-radius: 15px;\n text-align: center;\n margin-bottom: 25px;\n box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5);\n }\n\n .time {\n font-size: clamp(48px, 12vw, 72px);\n color: #00ff41;\n font-weight: bold;\n letter-spacing: 0.05em;\n font-family: 'Courier New', monospace;\n margin-bottom: 10px;\n }\n\n .date {\n font-size: clamp(14px, 3.5vw, 18px);\n color: #00ff41;\n font-family: 'Courier New', monospace;\n opacity: 0.8;\n }\n\n .controls {\n background: #f8f9fa;\n padding: clamp(15px, 4vw, 25px);\n border-radius: 12px;\n margin-bottom: 20px;\n }\n\n .time-input-section {\n background: white;\n padding: 15px;\n border-radius: 10px;\n margin-bottom: 20px;\n border: 2px solid #e0e0e0;\n }\n\n .input-label {\n color: #333;\n font-weight: 600;\n font-size: clamp(13px, 3.2vw, 15px);\n margin-bottom: 10px;\n display: block;\n }\n\n .time-inputs {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin-bottom: 15px;\n }\n\n .time-input-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .time-input-group label {\n font-size: clamp(11px, 2.8vw, 12px);\n color: #040404;\n margin-bottom: 5px;\n font-weight: 600;\n }\n\n .time-input-group input {\n width: 100%;\n padding: 10px 8px;\n border: 2px solid #070707;\n border-radius: 8px;\n font-size: clamp(16px, 4vw, 20px);\n text-align: center;\n font-family: 'Courier New', monospace;\n font-weight: bold;\n transition: all 0.2s ease;\n }\n\n .time-input-group input:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n }\n\n .date-input-row {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 10px;\n margin-bottom: 10px;\n }\n\n .date-input-group {\n display: flex;\n flex-direction: column;\n }\n\n .date-input-group label {\n font-size: clamp(11px, 2.8vw, 12px);\n color: #070707;\n margin-bottom: 5px;\n font-weight: 600;\n }\n\n .date-input-group input,\n .date-input-group select {\n padding: 8px;\n border: 2px solid #ddd;\n border-radius: 8px;\n font-size: clamp(13px, 3.2vw, 14px);\n font-family: inherit;\n transition: all 0.2s ease;\n }\n\n .date-input-group input:focus,\n .date-input-group select:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n }\n\n .quick-time-btns {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 8px;\n margin-top: 10px;\n }\n\n .quick-time-btn {\n padding: 8px;\n background: white;\n border: 2px solid #667eea;\n color: #667eea;\n border-radius: 6px;\n font-size: clamp(11px, 2.8vw, 12px);\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .quick-time-btn:active {\n background: #667eea;\n color: white;\n transform: scale(0.95);\n }\n\n .speed-control {\n margin-bottom: 20px;\n }\n\n .speed-label {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n color: #333;\n font-weight: 600;\n font-size: clamp(13px, 3.2vw, 15px);\n }\n\n .speed-value {\n background: #667eea;\n color: white;\n padding: 4px 12px;\n border-radius: 20px;\n font-size: clamp(12px, 3vw, 14px);\n }\n\n input[type=\"range\"] {\n width: 100%;\n height: 8px;\n border-radius: 5px;\n background: #ddd;\n outline: none;\n -webkit-appearance: none;\n margin-bottom: 15px;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: #667eea;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);\n }\n\n input[type=\"range\"]::-moz-range-thumb {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: #667eea;\n cursor: pointer;\n border: none;\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);\n }\n\n .quick-presets {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));\n gap: 8px;\n margin-bottom: 20px;\n }\n\n .preset-btn {\n padding: 10px 8px;\n background: white;\n border: 2px solid #667eea;\n color: #667eea;\n border-radius: 8px;\n font-size: clamp(11px, 2.8vw, 13px);\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n white-space: nowrap;\n }\n\n .preset-btn:active {\n background: #667eea;\n color: white;\n transform: scale(0.95);\n }\n\n .preset-btn.active {\n background: #667eea;\n color: white;\n }\n\n .button-group {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n button {\n padding: clamp(12px, 3vw, 15px);\n border: none;\n border-radius: 10px;\n font-size: clamp(14px, 3.5vw, 16px);\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n }\n\n .btn-start {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n }\n\n .btn-start:active {\n transform: scale(0.97);\n }\n\n .btn-stop {\n background: #e74c3c;\n color: white;\n }\n\n .btn-stop:active {\n transform: scale(0.97);\n }\n\n .btn-reset {\n background: #95a5a6;\n color: white;\n grid-column: 1 \/ -1;\n }\n\n .btn-reset:active {\n transform: scale(0.97);\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none !important;\n }\n\n .status {\n margin-top: 15px;\n padding: 12px;\n border-radius: 8px;\n text-align: center;\n font-size: clamp(12px, 3vw, 14px);\n font-weight: 600;\n }\n\n .status.running {\n background: #d4edda;\n color: #155724;\n }\n\n .status.paused {\n background: #fff3cd;\n color: #856404;\n }\n\n .status.idle {\n background: #e2e3e5;\n color: #383d41;\n }\n\n .info-box {\n background: #e8f4f8;\n padding: clamp(12px, 3vw, 15px);\n border-radius: 8px;\n border-left: 4px solid #667eea;\n font-size: clamp(11px, 2.8vw, 13px);\n color: #333;\n line-height: 1.6;\n }\n\n .info-box strong {\n color: #667eea;\n }\n\n @media (max-width: 480px) {\n body {\n padding: 10px;\n }\n \n .container {\n border-radius: 15px;\n }\n }\n\n @media (hover: hover) {\n button:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);\n }\n\n .preset-btn:hover,\n .quick-time-btn:hover {\n background: #667eea;\n color: white;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\ud83d\udd50 Simulation Clock<\/h1>\n <p class=\"subtitle\">Set a starting time and watch it run at your chosen speed<\/p>\n\n <div class=\"clock-display\">\n <div class=\"time\" id=\"clockDisplay\">12:00:00<\/div>\n <div class=\"date\" id=\"dateDisplay\">Monday, Jan 1, 2025<\/div>\n <\/div>\n\n <div class=\"controls\">\n <div class=\"time-input-section\">\n <span class=\"input-label\">Set Starting Time<\/span>\n \n <div class=\"time-inputs\">\n <div class=\"time-input-group\">\n <label>Hour<\/label>\n <input type=\"number\" id=\"hourInput\" min=\"0\" max=\"23\" value=\"12\">\n <\/div>\n <div class=\"time-input-group\">\n <label>Minute<\/label>\n <input type=\"number\" id=\"minuteInput\" min=\"0\" max=\"59\" value=\"0\">\n <\/div>\n <div class=\"time-input-group\">\n <label>Second<\/label>\n <input type=\"number\" id=\"secondInput\" min=\"0\" max=\"59\" value=\"0\">\n <\/div>\n <\/div>\n\n <div class=\"quick-time-btns\">\n <button class=\"quick-time-btn\" onclick=\"setQuickTime(6, 0)\">6:00 AM<\/button>\n <button class=\"quick-time-btn\" onclick=\"setQuickTime(12, 0)\">12:00 PM<\/button>\n <button class=\"quick-time-btn\" onclick=\"setQuickTime(18, 0)\">6:00 PM<\/button>\n <\/div>\n\n <span class=\"input-label\" style=\"margin-top: 15px;\">Set Starting Date<\/span>\n \n <div class=\"date-input-row\">\n <div class=\"date-input-group\">\n <label>Month<\/label>\n <select id=\"monthInput\">\n <option value=\"0\">Jan<\/option>\n <option value=\"1\">Feb<\/option>\n <option value=\"2\">Mar<\/option>\n <option value=\"3\">Apr<\/option>\n <option value=\"4\">May<\/option>\n <option value=\"5\">Jun<\/option>\n <option value=\"6\">Jul<\/option>\n <option value=\"7\">Aug<\/option>\n <option value=\"8\">Sep<\/option>\n <option value=\"9\">Oct<\/option>\n <option value=\"10\">Nov<\/option>\n <option value=\"11\">Dec<\/option>\n <\/select>\n <\/div>\n <div class=\"date-input-group\">\n <label>Day<\/label>\n <input type=\"number\" id=\"dayInput\" min=\"1\" max=\"31\" value=\"1\">\n <\/div>\n <div class=\"date-input-group\">\n <label>Year<\/label>\n <input type=\"number\" id=\"yearInput\" min=\"2000\" max=\"2100\" value=\"2025\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quick-presets\">\n <button class=\"preset-btn\" onclick=\"setSpeed(0.05)\">0.05x<\/button>\n <button class=\"preset-btn active\" onclick=\"setSpeed(1)\">1x<\/button>\n <button class=\"preset-btn\" onclick=\"setSpeed(2)\">2x<\/button>\n <button class=\"preset-btn\" onclick=\"setSpeed(10)\">10x<\/button>\n <button class=\"preset-btn\" onclick=\"setSpeed(20)\">20x<\/button>\n <\/div>\n <div class=\"speed-control\">\n <div class=\"speed-label\">\n <span>Speed Multiplier<\/span>\n <span class=\"speed-value\" id=\"speedDisplay\">1.0x<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"speedSlider\" \n min=\"0.05\" \n max=\"20\" \n step=\"0.05\" \n value=\"1.0\"\n >\n <\/div>\n\n <div class=\"button-group\">\n <button class=\"btn-start\" id=\"startBtn\" onclick=\"startClock()\">Start<\/button>\n <button class=\"btn-stop\" id=\"stopBtn\" onclick=\"stopClock()\" disabled>Pause<\/button>\n <button class=\"btn-reset\" id=\"resetBtn\" onclick=\"applyTimeInputs()\">Apply Time<\/button>\n <\/div>\n <div class=\"info-box\">\n <strong>How to use:<\/strong><br>\n \u2022 Set your desired starting time and date<br>\n \u2022 Choose speed (1x = real-time, 2x = double speed)<br>\n \u2022 Click “Start” to begin simulation<br>\n \u2022 Click “Apply Time” to update while running\n <\/div>\n <div class=\"status idle\" id=\"statusDisplay\">Status: Ready<\/div>\n <\/div>\n\n <\/div>\n\n <script>\n let clockInterval = null;\n let isRunning = false;\n let speedMultiplier = 1.0;\n let simulationTime = new Date();\n let lastUpdateTime = Date.now();\n\n const speedSlider = document.getElementById('speedSlider');\n const speedDisplay = document.getElementById('speedDisplay');\n const clockDisplay = document.getElementById('clockDisplay');\n const dateDisplay = document.getElementById('dateDisplay');\n\n \/\/ Initialize with current time\n function initializeInputs() {\n const now = new Date();\n document.getElementById('hourInput').value = now.getHours();\n document.getElementById('minuteInput').value = now.getMinutes();\n document.getElementById('secondInput').value = now.getSeconds();\n document.getElementById('monthInput').value = now.getMonth();\n document.getElementById('dayInput').value = now.getDate();\n document.getElementById('yearInput').value = now.getFullYear();\n simulationTime = now;\n updateDisplay();\n }\n\n \/\/ Apply user-inputted time\n function applyTimeInputs() {\n const hours = parseInt(document.getElementById('hourInput').value) || 0;\n const minutes = parseInt(document.getElementById('minuteInput').value) || 0;\n const seconds = parseInt(document.getElementById('secondInput').value) || 0;\n const month = parseInt(document.getElementById('monthInput').value) || 0;\n const day = parseInt(document.getElementById('dayInput').value) || 1;\n const year = parseInt(document.getElementById('yearInput').value) || 2025;\n\n \/\/ Validate inputs\n if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59 || seconds < 0 || seconds > 59) {\n alert('Please enter valid time values (Hours: 0-23, Minutes: 0-59, Seconds: 0-59)');\n return;\n }\n\n simulationTime = new Date(year, month, day, hours, minutes, seconds);\n lastUpdateTime = Date.now();\n updateDisplay();\n \n if (!isRunning) {\n updateStatus('idle', 'Time set - Ready to start');\n }\n }\n\n \/\/ Quick time buttons\n function setQuickTime(hour, minute) {\n document.getElementById('hourInput').value = hour;\n document.getElementById('minuteInput').value = minute;\n document.getElementById('secondInput').value = 0;\n applyTimeInputs();\n }\n\n \/\/ Update speed display when slider moves\n speedSlider.addEventListener('input', (e) => {\n const speed = parseFloat(e.target.value);\n speedDisplay.textContent = speed.toFixed(2) + 'x';\n updatePresetButtons(speed);\n \n if (isRunning) {\n speedMultiplier = speed;\n }\n });\n\n function setSpeed(speed) {\n speedSlider.value = speed;\n speedMultiplier = speed;\n speedDisplay.textContent = speed.toFixed(2) + 'x';\n updatePresetButtons(speed);\n }\n\n function updatePresetButtons(speed) {\n document.querySelectorAll('.preset-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n \n const presets = [0.05, 1, 2, 10, 20];\n const closestIndex = presets.findIndex(p => Math.abs(p - speed) < 0.01);\n if (closestIndex !== -1) {\n document.querySelectorAll('.preset-btn')[closestIndex].classList.add('active');\n }\n }\n\n function startClock() {\n if (isRunning) return;\n\n applyTimeInputs(); \/\/ Apply any changes before starting\n speedMultiplier = parseFloat(speedSlider.value);\n isRunning = true;\n lastUpdateTime = Date.now();\n \n updateButtons();\n updateStatus('running', `Running at ${speedMultiplier.toFixed(1)}x speed`);\n\n clockInterval = setInterval(() => {\n const now = Date.now();\n const realTimePassed = now - lastUpdateTime;\n const simulatedTimePassed = realTimePassed * speedMultiplier;\n \n simulationTime = new Date(simulationTime.getTime() + simulatedTimePassed);\n lastUpdateTime = now;\n \n updateDisplay();\n }, 50);\n }\n\n function stopClock() {\n if (!isRunning) return;\n\n isRunning = false;\n clearInterval(clockInterval);\n updateButtons();\n updateStatus('paused', 'Paused');\n }\n\n function updateDisplay() {\n \/\/ Format time (HH:MM:SS)\n const hours = String(simulationTime.getHours()).padStart(2, '0');\n const minutes = String(simulationTime.getMinutes()).padStart(2, '0');\n const seconds = String(simulationTime.getSeconds()).padStart(2, '0');\n clockDisplay.textContent = `${hours}:${minutes}:${seconds}`;\n\n \/\/ Format date\n const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n \n const dayName = days[simulationTime.getDay()];\n const monthName = months[simulationTime.getMonth()];\n const date = simulationTime.getDate();\n const year = simulationTime.getFullYear();\n \n dateDisplay.textContent = `${dayName}, ${monthName} ${date}, ${year}`;\n }\n\n function updateStatus(statusType, message) {\n const statusEl = document.getElementById('statusDisplay');\n statusEl.className = 'status ' + statusType;\n statusEl.textContent = 'Status: ' + message;\n }\n\n function updateButtons() {\n document.getElementById('startBtn').disabled = isRunning;\n document.getElementById('stopBtn').disabled = !isRunning;\n }\n\n \/\/ Initialize on load\n initializeInputs();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Simulation Clock \ud83d\udd50 Simulation Clock Set a starting time and watch it run at your chosen speed 12:00:00 Monday, Jan 1, 2025 Set Starting Time Hour Minute Second 6:00 AM 12:00 PM 6:00 PM Set Starting Date Month JanFebMarAprMayJunJulAugSepOctNovDec Day Year 0.05x 1x 2x 10x 20x Speed Multiplier 1.0x Start Pause Apply Time How to …<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.eggsarenotdairy.com\/index.php\/simulation-timer\/\"> <span class=\"screen-reader-text\">Sim Clock<\/span> Read More »<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":10,"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/pages\/22\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":22,"date":"2025-10-03T21:06:11","date_gmt":"2025-10-03T21:06:11","guid":{"rendered":"https:\/\/www.eggsarenotdairy.com\/?page_id=22"},"modified":"2025-10-10T03:10:09","modified_gmt":"2025-10-10T03:10:09","slug":"simulation-timer","status":"publish","type":"page","link":"https:\/\/www.eggsarenotdairy.com\/index.php\/simulation-timer\/","title":{"rendered":"Sim Clock"},"content":{"rendered":"\n\n\n\n \n \n Simulation Clock<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n background: linear-gradient(135deg, #060606 0%, #8d7f08 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 15px;\n touch-action: manipulation;\n }\n\n .container {\n background: rgba(169, 168, 166, 0.98);\n padding: clamp(20px, 5vw, 40px);\n border-radius: 20px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n max-width: 500px;\n width: 100%;\n }\n\n h1 {\n color: #060609;\n margin-bottom: 8px;\n font-size: clamp(24px, 6vw, 32px);\n text-align: center;\n }\n\n .subtitle {\n text-align: center;\n color: #050505;\n margin-bottom: 25px;\n font-size: clamp(12px, 3vw, 14px);\n line-height: 1.4;\n }\n\n .clock-display {\n background: #1a1a1a;\n padding: clamp(25px, 6vw, 40px);\n border-radius: 15px;\n text-align: center;\n margin-bottom: 25px;\n box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5);\n }\n\n .time {\n font-size: clamp(48px, 12vw, 72px);\n color: #00ff41;\n font-weight: bold;\n letter-spacing: 0.05em;\n font-family: 'Courier New', monospace;\n margin-bottom: 10px;\n }\n\n .date {\n font-size: clamp(14px, 3.5vw, 18px);\n color: #00ff41;\n font-family: 'Courier New', monospace;\n opacity: 0.8;\n }\n\n .controls {\n background: #f8f9fa;\n padding: clamp(15px, 4vw, 25px);\n border-radius: 12px;\n margin-bottom: 20px;\n }\n\n .time-input-section {\n background: white;\n padding: 15px;\n border-radius: 10px;\n margin-bottom: 20px;\n border: 2px solid #e0e0e0;\n }\n\n .input-label {\n color: #333;\n font-weight: 600;\n font-size: clamp(13px, 3.2vw, 15px);\n margin-bottom: 10px;\n display: block;\n }\n\n .time-inputs {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin-bottom: 15px;\n }\n\n .time-input-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .time-input-group label {\n font-size: clamp(11px, 2.8vw, 12px);\n color: #040404;\n margin-bottom: 5px;\n font-weight: 600;\n }\n\n .time-input-group input {\n width: 100%;\n padding: 10px 8px;\n border: 2px solid #070707;\n border-radius: 8px;\n font-size: clamp(16px, 4vw, 20px);\n text-align: center;\n font-family: 'Courier New', monospace;\n font-weight: bold;\n transition: all 0.2s ease;\n }\n\n .time-input-group input:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n }\n\n .date-input-row {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 10px;\n margin-bottom: 10px;\n }\n\n .date-input-group {\n display: flex;\n flex-direction: column;\n }\n\n .date-input-group label {\n font-size: clamp(11px, 2.8vw, 12px);\n color: #070707;\n margin-bottom: 5px;\n font-weight: 600;\n }\n\n .date-input-group input,\n .date-input-group select {\n padding: 8px;\n border: 2px solid #ddd;\n border-radius: 8px;\n font-size: clamp(13px, 3.2vw, 14px);\n font-family: inherit;\n transition: all 0.2s ease;\n }\n\n .date-input-group input:focus,\n .date-input-group select:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n }\n\n .quick-time-btns {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 8px;\n margin-top: 10px;\n }\n\n .quick-time-btn {\n padding: 8px;\n background: white;\n border: 2px solid #667eea;\n color: #667eea;\n border-radius: 6px;\n font-size: clamp(11px, 2.8vw, 12px);\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .quick-time-btn:active {\n background: #667eea;\n color: white;\n transform: scale(0.95);\n }\n\n .speed-control {\n margin-bottom: 20px;\n }\n\n .speed-label {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n color: #333;\n font-weight: 600;\n font-size: clamp(13px, 3.2vw, 15px);\n }\n\n .speed-value {\n background: #667eea;\n color: white;\n padding: 4px 12px;\n border-radius: 20px;\n font-size: clamp(12px, 3vw, 14px);\n }\n\n input[type=\"range\"] {\n width: 100%;\n height: 8px;\n border-radius: 5px;\n background: #ddd;\n outline: none;\n -webkit-appearance: none;\n margin-bottom: 15px;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: #667eea;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);\n }\n\n input[type=\"range\"]::-moz-range-thumb {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: #667eea;\n cursor: pointer;\n border: none;\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);\n }\n\n .quick-presets {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));\n gap: 8px;\n margin-bottom: 20px;\n }\n\n .preset-btn {\n padding: 10px 8px;\n background: white;\n border: 2px solid #667eea;\n color: #667eea;\n border-radius: 8px;\n font-size: clamp(11px, 2.8vw, 13px);\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n white-space: nowrap;\n }\n\n .preset-btn:active {\n background: #667eea;\n color: white;\n transform: scale(0.95);\n }\n\n .preset-btn.active {\n background: #667eea;\n color: white;\n }\n\n .button-group {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n button {\n padding: clamp(12px, 3vw, 15px);\n border: none;\n border-radius: 10px;\n font-size: clamp(14px, 3.5vw, 16px);\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n }\n\n .btn-start {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n }\n\n .btn-start:active {\n transform: scale(0.97);\n }\n\n .btn-stop {\n background: #e74c3c;\n color: white;\n }\n\n .btn-stop:active {\n transform: scale(0.97);\n }\n\n .btn-reset {\n background: #95a5a6;\n color: white;\n grid-column: 1 \/ -1;\n }\n\n .btn-reset:active {\n transform: scale(0.97);\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none !important;\n }\n\n .status {\n margin-top: 15px;\n padding: 12px;\n border-radius: 8px;\n text-align: center;\n font-size: clamp(12px, 3vw, 14px);\n font-weight: 600;\n }\n\n .status.running {\n background: #d4edda;\n color: #155724;\n }\n\n .status.paused {\n background: #fff3cd;\n color: #856404;\n }\n\n .status.idle {\n background: #e2e3e5;\n color: #383d41;\n }\n\n .info-box {\n background: #e8f4f8;\n padding: clamp(12px, 3vw, 15px);\n border-radius: 8px;\n border-left: 4px solid #667eea;\n font-size: clamp(11px, 2.8vw, 13px);\n color: #333;\n line-height: 1.6;\n }\n\n .info-box strong {\n color: #667eea;\n }\n\n @media (max-width: 480px) {\n body {\n padding: 10px;\n }\n \n .container {\n border-radius: 15px;\n }\n }\n\n @media (hover: hover) {\n button:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);\n }\n\n .preset-btn:hover,\n .quick-time-btn:hover {\n background: #667eea;\n color: white;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\ud83d\udd50 Simulation Clock<\/h1>\n <p class=\"subtitle\">Set a starting time and watch it run at your chosen speed<\/p>\n\n <div class=\"clock-display\">\n <div class=\"time\" id=\"clockDisplay\">12:00:00<\/div>\n <div class=\"date\" id=\"dateDisplay\">Monday, Jan 1, 2025<\/div>\n <\/div>\n\n <div class=\"controls\">\n <div class=\"time-input-section\">\n <span class=\"input-label\">Set Starting Time<\/span>\n \n <div class=\"time-inputs\">\n <div class=\"time-input-group\">\n <label>Hour<\/label>\n <input type=\"number\" id=\"hourInput\" min=\"0\" max=\"23\" value=\"12\">\n <\/div>\n <div class=\"time-input-group\">\n <label>Minute<\/label>\n <input type=\"number\" id=\"minuteInput\" min=\"0\" max=\"59\" value=\"0\">\n <\/div>\n <div class=\"time-input-group\">\n <label>Second<\/label>\n <input type=\"number\" id=\"secondInput\" min=\"0\" max=\"59\" value=\"0\">\n <\/div>\n <\/div>\n\n <div class=\"quick-time-btns\">\n <button class=\"quick-time-btn\" onclick=\"setQuickTime(6, 0)\">6:00 AM<\/button>\n <button class=\"quick-time-btn\" onclick=\"setQuickTime(12, 0)\">12:00 PM<\/button>\n <button class=\"quick-time-btn\" onclick=\"setQuickTime(18, 0)\">6:00 PM<\/button>\n <\/div>\n\n <span class=\"input-label\" style=\"margin-top: 15px;\">Set Starting Date<\/span>\n \n <div class=\"date-input-row\">\n <div class=\"date-input-group\">\n <label>Month<\/label>\n <select id=\"monthInput\">\n <option value=\"0\">Jan<\/option>\n <option value=\"1\">Feb<\/option>\n <option value=\"2\">Mar<\/option>\n <option value=\"3\">Apr<\/option>\n <option value=\"4\">May<\/option>\n <option value=\"5\">Jun<\/option>\n <option value=\"6\">Jul<\/option>\n <option value=\"7\">Aug<\/option>\n <option value=\"8\">Sep<\/option>\n <option value=\"9\">Oct<\/option>\n <option value=\"10\">Nov<\/option>\n <option value=\"11\">Dec<\/option>\n <\/select>\n <\/div>\n <div class=\"date-input-group\">\n <label>Day<\/label>\n <input type=\"number\" id=\"dayInput\" min=\"1\" max=\"31\" value=\"1\">\n <\/div>\n <div class=\"date-input-group\">\n <label>Year<\/label>\n <input type=\"number\" id=\"yearInput\" min=\"2000\" max=\"2100\" value=\"2025\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quick-presets\">\n <button class=\"preset-btn\" onclick=\"setSpeed(0.05)\">0.05x<\/button>\n <button class=\"preset-btn active\" onclick=\"setSpeed(1)\">1x<\/button>\n <button class=\"preset-btn\" onclick=\"setSpeed(2)\">2x<\/button>\n <button class=\"preset-btn\" onclick=\"setSpeed(10)\">10x<\/button>\n <button class=\"preset-btn\" onclick=\"setSpeed(20)\">20x<\/button>\n <\/div>\n <div class=\"speed-control\">\n <div class=\"speed-label\">\n <span>Speed Multiplier<\/span>\n <span class=\"speed-value\" id=\"speedDisplay\">1.0x<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"speedSlider\" \n min=\"0.05\" \n max=\"20\" \n step=\"0.05\" \n value=\"1.0\"\n >\n <\/div>\n\n <div class=\"button-group\">\n <button class=\"btn-start\" id=\"startBtn\" onclick=\"startClock()\">Start<\/button>\n <button class=\"btn-stop\" id=\"stopBtn\" onclick=\"stopClock()\" disabled>Pause<\/button>\n <button class=\"btn-reset\" id=\"resetBtn\" onclick=\"applyTimeInputs()\">Apply Time<\/button>\n <\/div>\n <div class=\"info-box\">\n <strong>How to use:<\/strong><br>\n \u2022 Set your desired starting time and date<br>\n \u2022 Choose speed (1x = real-time, 2x = double speed)<br>\n \u2022 Click “Start” to begin simulation<br>\n \u2022 Click “Apply Time” to update while running\n <\/div>\n <div class=\"status idle\" id=\"statusDisplay\">Status: Ready<\/div>\n <\/div>\n\n <\/div>\n\n <script>\n let clockInterval = null;\n let isRunning = false;\n let speedMultiplier = 1.0;\n let simulationTime = new Date();\n let lastUpdateTime = Date.now();\n\n const speedSlider = document.getElementById('speedSlider');\n const speedDisplay = document.getElementById('speedDisplay');\n const clockDisplay = document.getElementById('clockDisplay');\n const dateDisplay = document.getElementById('dateDisplay');\n\n \/\/ Initialize with current time\n function initializeInputs() {\n const now = new Date();\n document.getElementById('hourInput').value = now.getHours();\n document.getElementById('minuteInput').value = now.getMinutes();\n document.getElementById('secondInput').value = now.getSeconds();\n document.getElementById('monthInput').value = now.getMonth();\n document.getElementById('dayInput').value = now.getDate();\n document.getElementById('yearInput').value = now.getFullYear();\n simulationTime = now;\n updateDisplay();\n }\n\n \/\/ Apply user-inputted time\n function applyTimeInputs() {\n const hours = parseInt(document.getElementById('hourInput').value) || 0;\n const minutes = parseInt(document.getElementById('minuteInput').value) || 0;\n const seconds = parseInt(document.getElementById('secondInput').value) || 0;\n const month = parseInt(document.getElementById('monthInput').value) || 0;\n const day = parseInt(document.getElementById('dayInput').value) || 1;\n const year = parseInt(document.getElementById('yearInput').value) || 2025;\n\n \/\/ Validate inputs\n if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59 || seconds < 0 || seconds > 59) {\n alert('Please enter valid time values (Hours: 0-23, Minutes: 0-59, Seconds: 0-59)');\n return;\n }\n\n simulationTime = new Date(year, month, day, hours, minutes, seconds);\n lastUpdateTime = Date.now();\n updateDisplay();\n \n if (!isRunning) {\n updateStatus('idle', 'Time set - Ready to start');\n }\n }\n\n \/\/ Quick time buttons\n function setQuickTime(hour, minute) {\n document.getElementById('hourInput').value = hour;\n document.getElementById('minuteInput').value = minute;\n document.getElementById('secondInput').value = 0;\n applyTimeInputs();\n }\n\n \/\/ Update speed display when slider moves\n speedSlider.addEventListener('input', (e) => {\n const speed = parseFloat(e.target.value);\n speedDisplay.textContent = speed.toFixed(2) + 'x';\n updatePresetButtons(speed);\n \n if (isRunning) {\n speedMultiplier = speed;\n }\n });\n\n function setSpeed(speed) {\n speedSlider.value = speed;\n speedMultiplier = speed;\n speedDisplay.textContent = speed.toFixed(2) + 'x';\n updatePresetButtons(speed);\n }\n\n function updatePresetButtons(speed) {\n document.querySelectorAll('.preset-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n \n const presets = [0.05, 1, 2, 10, 20];\n const closestIndex = presets.findIndex(p => Math.abs(p - speed) < 0.01);\n if (closestIndex !== -1) {\n document.querySelectorAll('.preset-btn')[closestIndex].classList.add('active');\n }\n }\n\n function startClock() {\n if (isRunning) return;\n\n applyTimeInputs(); \/\/ Apply any changes before starting\n speedMultiplier = parseFloat(speedSlider.value);\n isRunning = true;\n lastUpdateTime = Date.now();\n \n updateButtons();\n updateStatus('running', `Running at ${speedMultiplier.toFixed(1)}x speed`);\n\n clockInterval = setInterval(() => {\n const now = Date.now();\n const realTimePassed = now - lastUpdateTime;\n const simulatedTimePassed = realTimePassed * speedMultiplier;\n \n simulationTime = new Date(simulationTime.getTime() + simulatedTimePassed);\n lastUpdateTime = now;\n \n updateDisplay();\n }, 50);\n }\n\n function stopClock() {\n if (!isRunning) return;\n\n isRunning = false;\n clearInterval(clockInterval);\n updateButtons();\n updateStatus('paused', 'Paused');\n }\n\n function updateDisplay() {\n \/\/ Format time (HH:MM:SS)\n const hours = String(simulationTime.getHours()).padStart(2, '0');\n const minutes = String(simulationTime.getMinutes()).padStart(2, '0');\n const seconds = String(simulationTime.getSeconds()).padStart(2, '0');\n clockDisplay.textContent = `${hours}:${minutes}:${seconds}`;\n\n \/\/ Format date\n const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n \n const dayName = days[simulationTime.getDay()];\n const monthName = months[simulationTime.getMonth()];\n const date = simulationTime.getDate();\n const year = simulationTime.getFullYear();\n \n dateDisplay.textContent = `${dayName}, ${monthName} ${date}, ${year}`;\n }\n\n function updateStatus(statusType, message) {\n const statusEl = document.getElementById('statusDisplay');\n statusEl.className = 'status ' + statusType;\n statusEl.textContent = 'Status: ' + message;\n }\n\n function updateButtons() {\n document.getElementById('startBtn').disabled = isRunning;\n document.getElementById('stopBtn').disabled = !isRunning;\n }\n\n \/\/ Initialize on load\n initializeInputs();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Simulation Clock \ud83d\udd50 Simulation Clock Set a starting time and watch it run at your chosen speed 12:00:00 Monday, Jan 1, 2025 Set Starting Time Hour Minute Second 6:00 AM 12:00 PM 6:00 PM Set Starting Date Month JanFebMarAprMayJunJulAugSepOctNovDec Day Year 0.05x 1x 2x 10x 20x Speed Multiplier 1.0x Start Pause Apply Time How to …<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.eggsarenotdairy.com\/index.php\/simulation-timer\/\"> <span class=\"screen-reader-text\">Sim Clock<\/span> Read More »<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":10,"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/pages\/22\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/www.eggsarenotdairy.com\/index.php\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}