<!-- wp:html --> <!-- THE ULTIMATE THEME-SAFE COSMIC ODOMETER FOR LEBLITAS.COM --> <div id="leblitas-cosmic-odometer" class="cod-container"> <!-- Dynamic Starfield Canvas Background --> <div id="cod-starfield" class="cod-starfield"></div> <div class="cod-inner-container"> <!-- Dashboard Header --> <div class="cod-header"> <span class="cod-badge">Space-Time Telemetry Deck</span> <h2 class="cod-title">Cosmic Odometer Dashboard</h2> <p class="cod-subtitle">Calculate and visualize your continuous travel through the universe, mapped across four astronomical reference systems.</p> </div> <!-- MAIN CONTROL DECK (TOP BLOCK) --> <div class="cod-dashboard-card main-deck"> <div class="cod-deck-settings"> <div class="cod-btn-row"> <button type="button" class="cod-install-btn">📥 Live Feed</button> <div class="cod-unit-toggle"> <button type="button" id="cod-unit-km" class="cod-unit-btn active" onclick="setCodUnit('km')">KM</button> <button type="button" id="cod-unit-mi" class="cod-unit-btn" onclick="setCodUnit('mi')">MILES</button> </div> </div> <div class="cod-share-row"> <button type="button" class="cod-icon-btn" onclick="shareCod('x')" title="Share on X">𝕏</button> <button type="button" class="cod-icon-btn" onclick="shareCod('wa')" title="WhatsApp">💬</button> <button type="button" id="cod-copy-btn" class="cod-icon-btn" onclick="copyCodLink()" title="Copy Link">🔗</button> </div> </div> <!-- Date Inputs --> <div class="cod-input-row"> <div class="cod-field-group"> <label for="cod-birthdate">Enter Birth Date</label> <input type="date" id="cod-birthdate" class="cod-deck-input" value="1995-06-15"> </div> <div class="cod-field-group"> <label for="cod-birthtime">Time of Birth (Local)</label> <input type="time" id="cod-birthtime" class="cod-deck-input" value="12:00"> </div> </div> <!-- Latitude Slider --> <div class="cod-slider-group"> <div class="cod-slider-header"> <span>Your Latitude: <strong id="cod-lat-lbl">50°N</strong></span> <span id="cod-spin-speed-lbl" class="cod-speed-indicator">0.274 km/s</span> </div> <input type="range" id="cod-latitude-slider" class="cod-range-slider" min="-90" max="90" value="50"> <small class="cod-help">Earth's spin speed changes depending on your distance from the equator.</small> </div> </div> <!-- DOUBLE ODOMETER SECTION --> <div class="cod-odometers-grid"> <!-- Session Odometer (Glow Green) --> <div class="cod-dashboard-card session-odometer"> <span class="cod-session-title">Distance Traveled Since Opening This Page</span> <div class="cod-session-display"> <span id="cod-session-val">0.00</span> <small id="cod-session-unit">km</small> </div> </div> <!-- Cumulative Life Odometer --> <div class="cod-dashboard-card cumulative-odometer"> <span class="cod-odometer-title">Total Distance Traveled Since Birth</span> <div class="cod-odometer-display"> <span id="cod-odo-val" class="cod-odo-numbers">0.000</span> <span id="cod-odo-unit" class="cod-odo-unit-lbl">km</span> </div> </div> </div> <!-- MISSION CHRONOMETER --> <div class="cod-dashboard-card"> <span class="cod-chrono-title">Mission Duration (Your Space Age)</span> <div id="cod-chrono-display" class="cod-chrono-display"> <span id="cod-chr-y">0</span>y <span id="cod-chr-m">0</span>mo <span id="cod-chr-d">0</span>d <span class="cod-chrono-divider">|</span> <span id="cod-chr-h">00</span>h : <span id="cod-chr-min">00</span>min : <span id="cod-chr-sec">00</span>s </div> <button type="button" id="cod-planet-toggle-btn" class="cod-btn-planet-toggle" onclick="togglePlanetYearsView()">🪐 Switch to Planet Years</button> </div> <!-- SIDE-BY-SIDE VISUAL SIMULATORS (MIDDLE BLOCK) --> <div class="cod-visuals-grid"> <!-- Vortex Simulator --> <div class="cod-dashboard-card visual-panel"> <span class="cod-panel-label">🚀 Helical Vortex Simulator</span> <div class="cod-canvas-container"> <canvas id="cod-vortex-canvas"></canvas> <div class="cod-vortex-overlay"> <span id="cod-vortex-mode-lbl">CINEMATIC MODEL</span> </div> </div> <div class="cod-vortex-controls"> <button type="button" id="cod-vort-cinematic" class="cod-vort-btn active" onclick="setVortexMode('cinematic')">Cinematic</button> <button type="button" id="cod-vort-warp" class="cod-vort-btn" onclick="setVortexMode('warp')">Warp</button> <button type="button" id="cod-vort-today" class="cod-vort-btn" onclick="setVortexMode('today')">Today</button> <button type="button" id="cod-vort-birth" class="cod-vort-btn" onclick="setVortexMode('birth')">Birth Date</button> </div> </div> <!-- Galactic Context Map --> <div class="cod-dashboard-card visual-panel"> <span class="cod-panel-label">🌌 Galactic Context (Milky Way)</span> <div class="cod-canvas-container"> <canvas id="cod-galaxy-canvas"></canvas> <div class="cod-galaxy-marker-text">YOU ARE HERE</div> </div> <div class="cod-galaxy-stats"> <div class="cod-stat-row"><span>Galactic Speed</span> <strong id="cod-gal-speed">2.1M km/h</strong></div> <div class="cod-stat-row"><span>Dist. to Core</span> <strong>26,000 LY</strong></div> <div class="cod-stat-row"><span>Milky Way Orbit Complete</span> <strong id="cod-progress-pct" class="green-text">0.00000000%</strong></div> </div> </div> </div> <!-- SYSTEM SPEED BREAKDOWN & BIOLOGICAL MILESTONES --> <div class="cod-grid-info"> <!-- Cumulative Distance Breakdown --> <div class="cod-dashboard-card"> <h3 class="cod-card-inner-title">Distance Breakdown</h3> <div class="cod-odometers-breakdown"> <div class="cod-breakdown-row"> <div> <span>1. Rotated (Spin)</span> <small class="cod-row-speed">Speed: <span id="cod-speed-rot">0</span> <span class="cod-speed-unit">km/h</span></small> </div> <strong id="cod-break-rot">—</strong> </div> <div class="cod-breakdown-row"> <div> <span>2. Orbited Sun</span> <small class="cod-row-speed">Speed: <span id="cod-speed-orb">107,218</span> <span class="cod-speed-unit">km/h</span></small> </div> <strong id="cod-break-orb">—</strong> </div> <div class="cod-breakdown-row"> <div> <span>3. Milky Way Orbit (Galactic)</span> <small class="cod-row-speed">Speed: <span id="cod-speed-gal">828,000</span> <span class="cod-speed-unit">km/h</span></small> </div> <strong id="cod-break-gal">—</strong> </div> <div class="cod-breakdown-row highlighted"> <div> <span>4. Absolute Cosmic Move (vs CMB)</span> <small class="cod-row-speed">Speed: <span id="cod-speed-cmb">2,257,200</span> <span class="cod-speed-unit">km/h</span></small> </div> <strong id="cod-break-cmb">—</strong> </div> </div> </div> <!-- Your Cosmic Address --> <div class="cod-dashboard-card"> <h3 class="cod-card-inner-title">Your Cosmic Address</h3> <div class="cod-address-list"> <div class="cod-address-item"><span>Planet:</span> <strong>Earth</strong></div> <div class="cod-address-item"><span>System:</span> <strong>The Solar System</strong></div> <div class="cod-address-item"><span>Cloud:</span> <strong>Local Interstellar Cloud</strong></div> <div class="cod-address-item"><span>Arm:</span> <strong>Orion Cygnus Arm</strong></div> <div class="cod-address-item"><span>Galaxy:</span> <strong>The Milky Way</strong></div> <div class="cod-address-item"><span>Group:</span> <strong>The Local Group</strong></div> <div class="cod-address-item"><span>Supercluster:</span> <strong>Virgo Supercluster</strong></div> <div class="cod-address-item"><strong class="highlight-address">Laniakea Supercluster</strong></div> </div> </div> </div> <!-- BIOLOGICAL INTEGRATION CARD --> <div class="cod-dashboard-card"> <h3 class="cod-card-inner-title">Biological & Gravitational Milestones</h3> <div class="cod-grid-milestones"> <div class="cod-milestone-item"> <span class="cod-ms-icon">🌍</span> <div> <span class="cod-ms-lbl">Earth Rotations</span> <strong id="cod-ms-rotations">0</strong> <small>Completed axial spins</small> </div> </div> <div class="cod-milestone-item"> <span class="cod-ms-icon">🌙</span> <div> <span class="cod-ms-lbl">Moon Orbits</span> <strong id="cod-ms-lunar">0</strong> <small>Completed lunar cycles</small> </div> </div> <div class="cod-milestone-item"> <span class="cod-ms-icon">💓</span> <div> <span class="cod-ms-lbl">Heartbeats</span> <strong id="cod-ms-heart">0</strong> <small>Based on 80 bpm average</small> </div> </div> <div class="cod-milestone-item"> <span class="cod-ms-icon">🌬️</span> <div> <span class="cod-ms-lbl">Breaths Taken</span> <strong id="cod-ms-breaths">0</strong> <small>Based on 16 bpm average</small> </div> </div> </div> </div> <!-- PROGRESS CARD --> <div class="cod-dashboard-card"> <div class="cod-progress-header"> <span>Completed Galactic Year Progress (230M Earth Years)</span> <strong id="cod-progress-pct-alt">0.000000000%</strong> </div> <div class="cod-progress-bar-container"> <div id="cod-progress-bar" class="cod-progress-bar" style="width: 0%;"></div> </div> </div> <!-- Feedback Bar --> <div class="cod-feedback-bar"> <span class="cod-feed-prompt">Help us calibrate our spatial maps. Did you enjoy this flight?</span> <div class="cod-feed-buttons"> <button type="button" id="cod-vote-up" class="cod-v-btn" onclick="handleVote('up')">👍 Upvote (<span id="cod-up-count">5,912</span>)</button> <button type="button" id="cod-vote-down" class="cod-v-btn" onclick="handleVote('down')">👎 Downvote (<span id="cod-down-count">12</span>)</button> </div> <p id="cod-vote-thanks" class="cod-vote-thanks" style="display: none;"></p> </div> </div> </div> <style> /* Scoped Space Theme Styling with high WordPress safety protection */ #leblitas-cosmic-odometer.cod-container { box-sizing: border-box !important; font-family: 'Inter', -apple-system, sans-serif !important; max-width: 900px !important; margin: 2rem auto !important; padding: 2rem !important; background-color: #05070f !important; border-radius: 16px !important; border: 1px solid #1a202c !important; color: #e2e8f0 !important; line-height: 1.4 !important; position: relative !important; overflow: hidden !important; } #leblitas-cosmic-odometer * { box-sizing: border-box !important; } /* Starfield Background Layer */ #leblitas-cosmic-odometer .cod-starfield { position: absolute !important; top: -50% !important; left: -50% !important; width: 200% !important; height: 200% !important; background-image: radial-gradient(1.5px 1.5px at 40px 60px, #ffffff, rgba(0,0,0,0)), radial-gradient(1px 1px at 120px 240px, #a0aec0, rgba(0,0,0,0)), radial-gradient(2px 2px at 250px 150px, #ffffff, rgba(0,0,0,0)), radial-gradient(1.5px 1.5px at 380px 320px, #cbd5e0, rgba(0,0,0,0)) !important; background-size: 350px 350px !important; opacity: 0.15 !important; animation: codStarDrift 100s linear infinite !important; z-index: 1 !important; pointer-events: none !important; } #leblitas-cosmic-odometer .cod-inner-container { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; gap: 1.25rem !important; } #leblitas-cosmic-odometer .cod-header { text-align: center !important; margin-bottom: 1rem !important; } #leblitas-cosmic-odometer .cod-badge { display: inline-block !important; font-size: 0.7rem !important; font-weight: 700 !important; color: #63b3ed !important; background-color: rgba(66, 153, 225, 0.1) !important; padding: 0.35rem 0.85rem !important; border-radius: 100px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border: 1px solid rgba(99, 179, 237, 0.2) !important; margin-bottom: 0.75rem !important; } #leblitas-cosmic-odometer .cod-title { font-size: 1.85rem !important; font-weight: 900 !important; color: #ffffff !important; margin: 0 0 0.5rem 0 !important; letter-spacing: -0.025em !important; } #leblitas-cosmic-odometer .cod-subtitle { font-size: 0.95rem !important; color: #a0aec0 !important; margin: 0 !important; } /* Dashboard Cards standard rules */ #leblitas-cosmic-odometer .cod-dashboard-card { background-color: #0b0f19 !important; border: 1px solid #1a202c !important; border-radius: 12px !important; padding: 1.25rem !important; } #leblitas-cosmic-odometer .cod-card-inner-title { font-size: 1rem !important; font-weight: 750 !important; color: #a0aec0 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin: 0 0 1rem 0 !important; border-bottom: 1px solid #1a202c !important; padding-bottom: 0.5rem !important; } /* Settings Bar */ #leblitas-cosmic-odometer .cod-deck-settings { display: flex !important; justify-content: space-between !important; align-items: center !important; border-bottom: 1px solid #1a202c !important; padding-bottom: 0.75rem !important; margin-bottom: 1rem !important; } #leblitas-cosmic-odometer .cod-btn-row { display: flex !important; gap: 0.5rem !important; } #leblitas-cosmic-odometer .cod-install-btn { background-color: #121824 !important; border: 1.5px solid #00f0ff !important; color: #00f0ff !important; font-weight: 700 !important; padding: 0.4rem 0.75rem !important; border-radius: 6px !important; font-size: 0.8rem !important; cursor: pointer !important; } #leblitas-cosmic-odometer .cod-unit-toggle { display: flex !important; background-color: #05070f !important; border: 1px solid #1a202c !important; border-radius: 6px !important; padding: 0.15rem !important; } #leblitas-cosmic-odometer .cod-unit-btn { background: none !important; border: none !important; color: #4a5568 !important; padding: 0.25rem 0.6rem !important; font-size: 0.8rem !important; font-weight: 700 !important; border-radius: 4px !important; cursor: pointer !important; } #leblitas-cosmic-odometer .cod-unit-btn.active { background-color: #1c2237 !important; color: #63b3ed !important; } #leblitas-cosmic-odometer .cod-share-row { display: flex !important; gap: 0.35rem !important; } #leblitas-cosmic-odometer .cod-icon-btn { background-color: #121824 !important; border: 1px solid #1a202c !important; color: #a0aec0 !important; width: 32px !important; height: 32px !important; border-radius: 6px !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; } #leblitas-cosmic-odometer .cod-icon-btn:hover { border-color: #4299e1 !important; color: #4299e1 !important; } /* Input Rows */ #leblitas-cosmic-odometer .cod-input-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; margin-bottom: 1rem !important; } #leblitas-cosmic-odometer .cod-field-group label { display: block !important; font-size: 0.8rem !important; font-weight: 700 !important; color: #718096 !important; text-transform: uppercase !important; margin-bottom: 0.35rem !important; } #leblitas-cosmic-odometer .cod-deck-input { width: 100% !important; padding: 0.5rem 0.75rem !important; font-size: 0.9rem !important; border: 1.5px solid #1a202c !important; border-radius: 6px !important; background-color: #04060b !important; color: #ffffff !important; outline: none !important; } /* Slider Controls */ #leblitas-cosmic-odometer .cod-slider-header { display: flex !important; justify-content: space-between !important; font-size: 0.85rem !important; color: #cbd5e0 !important; margin-bottom: 0.5rem !important; } #leblitas-cosmic-odometer .cod-speed-indicator { font-weight: 700 !important; color: #f6ad55 !important; } #leblitas-cosmic-odometer .cod-range-slider { width: 100% !important; accent-color: #4299e1 !important; } #leblitas-cosmic-odometer .cod-help { display: block !important; font-size: 0.75rem !important; color: #718096 !important; margin-top: 0.35rem !important; } /* Double Odometers Layout grid */ #leblitas-cosmic-odometer .cod-odometers-grid { display: grid !important; grid-template-columns: 1fr 1.25fr !important; gap: 1rem !important; } @media (max-width: 768px) { #leblitas-cosmic-odometer .cod-odometers-grid { grid-template-columns: 1fr !important; } } /* Session Odometer (Glow Green) */ #leblitas-cosmic-odometer .cod-session-card { background: radial-gradient(circle, #0c2016 0%, #050a07 100%) !important; border: 1.5px solid #22543d !important; border-radius: 12px !important; } #leblitas-cosmic-odometer .cod-session-title { display: block !important; font-size: 0.8rem !important; font-weight: 700 !important; color: #48bb78 !important; text-transform: uppercase !important; margin-bottom: 0.5rem !important; } #leblitas-cosmic-odometer .cod-session-display { font-family: 'Courier New', monospace !important; font-size: 2.1rem !important; font-weight: 900 !important; color: #00ff66 !important; text-shadow: 0 0 10px rgba(0,255,102,0.3) !important; } #leblitas-cosmic-odometer .cod-session-display small { font-size: 1rem !important; color: #cbd5e0 !important; } /* Cumulative Odometer Card */ #leblitas-cosmic-odometer .cumulative-odometer { background: radial-gradient(circle at 50% 50%, #0d111d 0%, #06080e 100%) !important; border: 1.5px solid #1c2237 !important; } #leblitas-cosmic-odometer .cod-odometer-title { display: block !important; font-size: 0.85rem !important; font-weight: 800 !important; color: #90cdf4 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; margin-bottom: 0.5rem !important; } #leblitas-cosmic-odometer .cod-odometer-display { display: inline-flex !important; align-items: baseline !important; gap: 0.5rem !important; } #leblitas-cosmic-odometer .cod-odo-numbers { font-family: 'Courier New', Courier, monospace !important; font-size: 2.25rem !important; font-weight: 900 !important; color: #ffffff !important; text-shadow: 0 0 10px rgba(99, 179, 237, 0.4) !important; letter-spacing: 0.05em !important; } #leblitas-cosmic-odometer .cod-odo-unit-lbl { font-size: 1.1rem !important; font-weight: 850 !important; color: #cbd5e0 !important; } /* Chrono Mission Duration */ #leblitas-cosmic-odometer .cod-chrono-display { font-family: monospace !important; font-size: 1.15rem !important; font-weight: 700 !important; color: #cbd5e0 !important; text-align: center !important; } #leblitas-cosmic-odometer .cod-chrono-display span { font-size: 1.4rem !important; font-weight: 900 !important; color: #f6ad55 !important; } #leblitas-cosmic-odometer .cod-chrono-divider { color: #2d3748 !important; margin: 0 0.5rem !important; } #leblitas-cosmic-odometer .cod-btn-planet-toggle { display: block !important; background: none !important; border: none !important; color: #4299e1 !important; font-size: 0.8rem !important; font-weight: 700 !important; text-decoration: underline !important; margin: 0.5rem auto 0 auto !important; cursor: pointer !important; } /* Side-by-Side Visual Panels */ #leblitas-cosmic-odometer .cod-visuals-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.25rem !important; } @media (max-width: 768px) { #leblitas-cosmic-odometer .cod-visuals-grid { grid-template-columns: 1fr !important; } } #leblitas-cosmic-odometer .visual-panel { display: flex !important; flex-direction: column !important; } #leblitas-cosmic-odometer .cod-panel-label { display: block !important; font-size: 0.85rem !important; font-weight: 750 !important; color: #a0aec0 !important; text-transform: uppercase !important; margin-bottom: 0.75rem !important; } #leblitas-cosmic-odometer .cod-canvas-container { width: 100% !important; height: 200px !important; background-color: #04060b !important; border-radius: 8px !important; position: relative !important; overflow: hidden !important; border: 1px solid #1a202c !important; } #leblitas-cosmic-odometer canvas { width: 100% !important; height: 100% !important; display: block !important; } #leblitas-cosmic-odometer .cod-vortex-overlay { position: absolute !important; bottom: 0.5rem !important; left: 0.5rem !important; background-color: rgba(0,0,0,0.6) !important; padding: 0.2rem 0.5rem !important; border-radius: 4px !important; font-size: 0.65rem !important; font-weight: 700 !important; color: #00ff66 !important; } #leblitas-cosmic-odometer .cod-vortex-controls { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0.25rem !important; margin-top: 0.75rem !important; } #leblitas-cosmic-odometer .cod-vort-btn { background-color: #121824 !important; border: 1px solid #1a202c !important; color: #718096 !important; padding: 0.35rem 0 !important; font-size: 0.7rem !important; font-weight: 700 !important; border-radius: 4px !important; cursor: pointer !important; text-transform: uppercase !important; } #leblitas-cosmic-odometer .cod-vort-btn.active, #leblitas-cosmic-odometer .cod-vort-btn:hover { border-color: #00f0ff !important; color: #00f0ff !important; background-color: rgba(0, 240, 255, 0.05) !important; } #leblitas-cosmic-odometer .cod-galaxy-marker-text { position: absolute !important; top: 10px !important; left: 10px !important; background-color: rgba(0,255,102,0.1) !important; border: 1px solid #00ff66 !important; padding: 0.15rem 0.35rem !important; border-radius: 4px !important; font-size: 0.6rem !important; color: #00ff66 !important; font-weight: bold !important; } #leblitas-cosmic-odometer .cod-galaxy-stats { display: flex !important; flex-direction: column !important; gap: 0.35rem !important; margin-top: 0.75rem !important; } #leblitas-cosmic-odometer .cod-stat-row { display: flex !important; justify-content: space-between !important; font-size: 0.8rem !important; } /* Info and address blocks */ #leblitas-cosmic-odometer .cod-grid-info { display: grid !important; grid-template-columns: 1.25fr 1fr !important; gap: 1.25rem !important; } @media (max-width: 768px) { #leblitas-cosmic-odometer .cod-grid-info { grid-template-columns: 1fr !important; } } #leblitas-cosmic-odometer .cod-odometers-breakdown { display: flex !important; flex-direction: column !important; } #leblitas-cosmic-odometer .cod-breakdown-row { display: flex !important; justify-content: space-between !important; border-bottom: 1px solid #121824 !important; padding: 0.5rem 0 !important; font-size: 0.8rem !important; } #leblitas-cosmic-odometer .cod-row-speed { font-size: 0.7rem !important; color: #718096 !important; display: block !important; margin-top: 0.15rem !important; } #leblitas-cosmic-odometer .cod-breakdown-row:last-child { border-bottom: none !important; } #leblitas-cosmic-odometer .cod-breakdown-row strong { font-family: monospace !important; font-size: 0.95rem !important; color: #cbd5e0 !important; } #leblitas-cosmic-odometer .cod-breakdown-row.highlighted strong { color: #63b3ed !important; } #leblitas-cosmic-odometer .cod-address-list { display: flex !important; flex-direction: column !important; gap: 0.35rem !important; } #leblitas-cosmic-odometer .cod-address-item { display: flex !important; justify-content: space-between !important; font-size: 0.8rem !important; border-bottom: 1px dashed #121824 !important; padding-bottom: 0.25rem !important; } #leblitas-cosmic-odometer .highlight-address { color: #bd00ff !important; text-shadow: 0 0 5px rgba(189,0,255,0.2) !important; } /* Milestones */ #leblitas-cosmic-odometer .cod-grid-milestones { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } @media (max-width: 600px) { #leblitas-cosmic-odometer .cod-grid-milestones { grid-template-columns: 1fr !important; } } #leblitas-cosmic-odometer .cod-milestone-item { display: flex !important; align-items: center !important; gap: 0.75rem !important; background-color: #04060b !important; border: 1px solid #1a202c !important; border-radius: 8px !important; padding: 0.6rem 0.85rem !important; } #leblitas-cosmic-odometer .cod-ms-icon { font-size: 1.5rem !important; } #leblitas-cosmic-odometer .cod-ms-lbl { display: block !important; font-size: 0.7rem !important; font-weight: 700 !important; color: #a0aec0 !important; text-transform: uppercase !important; } #leblitas-cosmic-odometer .cod-milestone-item strong { display: block !important; font-size: 1.1rem !important; font-weight: 850 !important; color: #ffffff !important; margin: 0.1rem 0 !important; } #leblitas-cosmic-odometer .cod-milestone-item small { font-size: 0.7rem !important; color: #718096 !important; display: block !important; } /* Progress bar */ #leblitas-cosmic-odometer .cod-progress-header { display: flex !important; justify-content: space-between !important; font-size: 0.8rem !important; font-weight: 700 !important; color: #cbd5e0 !important; margin-bottom: 0.4rem !important; } #leblitas-cosmic-odometer .cod-progress-bar-container { background-color: #04060b !important; height: 8px !important; border-radius: 100px !important; overflow: hidden !important; border: 1px solid #1a202c !important; } #leblitas-cosmic-odometer .cod-progress-bar { background: linear-gradient(90deg, #3182ce 0%, #319795 100%) !important; height: 100% !important; border-radius: 100px !important; } /* Feedback card */ #leblitas-cosmic-odometer .cod-feedback-bar { text-align: center !important; border-top: 1px solid #1a202c !important; padding-top: 1.25rem !important; margin-top: 1rem !important; } #leblitas-cosmic-odometer .cod-feed-prompt { display: block !important; font-size: 0.8rem !important; font-weight: 700 !important; color: #a0aec0 !important; margin-bottom: 0.5rem !important; } #leblitas-cosmic-odometer .cod-feed-buttons { display: flex !important; justify-content: center !important; gap: 1rem !important; } #leblitas-cosmic-odometer .cod-v-btn { background-color: #121824 !important; border: 1.5px solid #1a202c !important; color: #cbd5e0 !important; padding: 0.4rem 1rem !important; font-size: 0.8rem !important; font-weight: 700 !important; border-radius: 6px !important; cursor: pointer !important; } #leblitas-cosmic-odometer .cod-v-btn:hover { border-color: #63b3ed !important; color: #ffffff !important; } #leblitas-cosmic-odometer .cod-vote-thanks { font-size: 0.8rem !important; color: #00ff66 !important; font-weight: 600 !important; margin-top: 0.5rem !important; } /* STARFIELD BACKGROUND KEYFRAMES */ @keyframes codStarDrift { from { background-position: 0 0; } to { background-position: -300px -600px; } } </style> <script> (function() { function initCosmicOdometer() { const container = document.getElementById("leblitas-cosmic-odometer"); if (!container) return; // Inputs const birthdateInput = document.getElementById("cod-birthdate"); const birthtimeInput = document.getElementById("cod-birthtime"); const latSlider = document.getElementById("cod-latitude-slider"); const latLbl = document.getElementById("cod-lat-lbl"); const spinSpeedLbl = document.getElementById("cod-spin-speed-lbl"); // Dynamic Outputs const odoValue = document.getElementById("cod-odo-val"); const odoUnit = document.getElementById("cod-odo-unit"); const sessionVal = document.getElementById("cod-session-val"); const sessionUnitDisplay = document.getElementById("cod-session-unit"); const breakRot = document.getElementById("cod-break-rot"); const breakOrb = document.getElementById("cod-break-orb"); const breakGal = document.getElementById("cod-break-gal"); const breakCmb = document.getElementById("cod-break-cmb"); const progressPct = document.getElementById("cod-progress-pct"); const progressPctAlt = document.getElementById("cod-progress-pct-alt"); const progressBar = document.getElementById("cod-progress-bar"); // Chrono Displays const chrY = document.getElementById("cod-chr-y"); const chrMo = document.getElementById("cod-chr-m"); const chrD = document.getElementById("cod-chr-d"); const chrH = document.getElementById("cod-chr-h"); const chrMin = document.getElementById("cod-chr-min"); const chrSec = document.getElementById("cod-chr-sec"); const planetToggleBtn = document.getElementById("cod-planet-toggle-btn"); // Milestones const msRotations = document.getElementById("cod-ms-rotations"); const msLunar = document.getElementById("cod-ms-lunar"); const msHeart = document.getElementById("cod-ms-heart"); const msBreaths = document.getElementById("cod-ms-breaths"); // Interactive Canvases const vortexCanvas = document.getElementById("cod-vortex-canvas"); const vCtx = vortexCanvas ? vortexCanvas.getContext("2d") : null; const galaxyCanvas = document.getElementById("cod-galaxy-canvas"); const gCtx = galaxyCanvas ? galaxyCanvas.getContext("2d") : null; // Constant Physics Speeds (km/h) const ORBIT_SPEED = 107218; const GALACTIC_SPEED = 828000; const CMB_SPEED = 2257200; // Time Multipliers const LUNAR_MONTH_MS = 27.32166 * 24 * 60 * 60 * 1000; // Planetary Years Multipliers const PLANET_YEARS = { mercury: 0.2408, venus: 0.6152, mars: 1.8808, jupiter: 11.8626 }; let activePlanetYearKey = null; // null = Earth years // Odometer Unit State let activeUnit = "km"; const KM_TO_MI = 0.62137119; const sessionStartTime = Date.now(); // Vortex Render State variables let vortexMode = "cinematic"; // cinematic, warp, today, birth let rotationAngle = 0; let canvasWarpMultiplier = 1; // LATITUDE SPIN CONSTANTS const LAT_SPINS = { 0: 1670, // Equator 25: 1513, // Low Latitudes 50: 1073, // Mid Latitudes 65: 705, // High Latitudes 90: 0 // Poles }; // Helper to safely write text content to avoid JavaScript crashes [1] function safeSetText(id, text) { const el = document.getElementById(id); if (el) { el.textContent = text; } } // Parse URL Parameter state to ensure 100% viral replication works function loadURLParams() { const params = new URLSearchParams(window.location.search); const dob = params.get("dob"); const tob = params.get("tob"); const lat = params.get("lat"); const unit = params.get("unit"); if (dob && birthdateInput) birthdateInput.value = dob; if (tob && birthtimeInput) birthtimeInput.value = tob; if (lat && latSlider) latSlider.value = lat; if (unit === "mi") setCodUnit("mi"); } window.setCodUnit = function(unit) { activeUnit = unit; const kmBtn = document.getElementById("cod-unit-km"); const miBtn = document.getElementById("cod-unit-mi"); if (kmBtn) kmBtn.classList.toggle("active", unit === "km"); if (miBtn) miBtn.classList.toggle("active", unit === "mi"); safeSetText("cod-odo-unit", unit); safeSetText("cod-session-unit", unit); runCalculations(); }; window.togglePlanetYearsView = function() { const keys = [null, "mercury", "venus", "mars", "jupiter"]; let currentIdx = keys.indexOf(activePlanetYearKey); currentIdx = (currentIdx + 1) % keys.length; activePlanetYearKey = keys[currentIdx]; if (activePlanetYearKey === null) { if (planetToggleBtn) planetToggleBtn.textContent = "🪐 Switch to Planet Years"; } else { const capitalized = activePlanetYearKey.charAt(0).toUpperCase() + activePlanetYearKey.slice(1); if (planetToggleBtn) planetToggleBtn.textContent = `🌍 Switch to Earth Years (Showing ${capitalized})`; } runCalculations(); }; window.setVortexMode = function(mode) { vortexMode = mode; document.querySelectorAll(".cod-vort-btn").forEach(el => el.classList.remove("active")); const targetBtn = document.getElementById("cod-vort-" + mode); if (targetBtn) targetBtn.classList.add("active"); safeSetText("cod-vortex-mode-lbl", mode.toUpperCase() + " MODEL"); if (mode === "warp") { canvasWarpMultiplier = 15; } else { canvasWarpMultiplier = 1; } }; window.toggleUniversalProjection = function() { setVortexMode("warp"); setTimeout(() => setVortexMode("cinematic"), 3000); }; // Upvote System let voted = localStorage.getItem("leblitas_cod_voted") || false; if (voted) lockVoting(voted); window.handleVote = function(type) { if (localStorage.getItem("leblitas_cod_voted")) return; localStorage.setItem("leblitas_cod_voted", type); lockVoting(type, true); }; function lockVoting(vType, increment = false) { const uEl = document.getElementById("cod-up-count"); const dEl = document.getElementById("cod-down-count"); const thanks = document.getElementById("cod-vote-thanks"); if (!uEl || !dEl) return; let ups = parseInt(uEl.textContent.replace(/,/g, '')); let downs = parseInt(dEl.textContent.replace(/,/g, '')); if (increment) { if (vType === 'up') ups++; else downs++; } uEl.textContent = ups.toLocaleString(); dEl.textContent = downs.toLocaleString(); if (thanks) { thanks.textContent = vType === 'up' ? "Calibration complete. Navigation parameters locked. 🚀" : "Calibrating spatial sensors..."; thanks.style.display = "block"; } const upBtn = document.getElementById("cod-vote-up"); const downBtn = document.getElementById("cod-vote-down"); if (upBtn) upBtn.disabled = true; if (downBtn) downBtn.disabled = true; } // Dynamic sharing Link generator window.shareCod = function(platform) { const cleanOdo = odoValue ? odoValue.textContent.split('.')[0] : "0"; const text = encodeURIComponent(`I've traveled over ${cleanOdo} ${activeUnit} through space since my birth! Calculate your cosmic odometer here:`); const path = `${window.location.origin}${window.location.pathname}?dob=${birthdateInput.value}&tob=${birthtimeInput.value}&lat=${latSlider.value}&unit=${activeUnit}`; const url = encodeURIComponent(path); let target = ""; if (platform === "x") target = `https://twitter.com/intent/tweet?text=${text}&url=${url}`; else if (platform === "wa") target = `https://api.whatsapp.com/send?text=${text}%20${url}`; else if (platform === "fb") target = `https://www.facebook.com/sharer/sharer.php?u=${url}`; if (target) window.open(target, "_blank"); }; window.copyCodLink = function() { const path = `${window.location.origin}${window.location.pathname}?dob=${birthdateInput.value}&tob=${birthtimeInput.value}&lat=${latSlider.value}&unit=${activeUnit}`; const dummy = document.createElement("input"); dummy.value = path; document.body.appendChild(dummy); dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); const copyBtn = document.getElementById("cod-copy-btn"); if (copyBtn) { copyBtn.textContent = "✔"; setTimeout(() => copyBtn.textContent = "🔗", 2000); } }; // ================= ASTROPHYSICS CALCULATOR ================= function runCalculations() { const dobVal = birthdateInput.value; const tobVal = birthtimeInput.value || "00:00"; if (!dobVal) return; // Safe, Cross-Browser Manual Date Construction to resolve iOS/Safari bug const dateParts = dobVal.split("-"); const timeParts = tobVal.split(":"); if (dateParts.length < 3) return; const birth = new Date( parseInt(dateParts[0], 10), parseInt(dateParts[1], 10) - 1, // 0-indexed month parseInt(dateParts[2], 10), timeParts[0] ? parseInt(timeParts[0], 10) : 0, timeParts[1] ? parseInt(timeParts[1], 10) : 0, 0, 0 ); const now = new Date(); const elapsedMs = now.getTime() - birth.getTime(); const unitMod = activeUnit === "km" ? 1 : KM_TO_MI; // Latitude configuration logic const latVal = parseInt(latSlider.value); const absLat = Math.abs(latVal); if (latLbl) latLbl.textContent = absLat + "°" + (latVal >= 0 ? "N" : "S"); // Calculate localized spin speed let rotSpeedKmh = 1670; // equator default const latKeys = [0, 25, 50, 65, 90]; let closestLat = latKeys.reduce((prev, curr) => { return (Math.abs(curr - absLat) < Math.abs(prev - absLat) ? curr : prev); }); rotSpeedKmh = LAT_SPINS[closestLat]; if (spinSpeedLbl) { spinSpeedLbl.textContent = (rotSpeedKmh * unitMod / 3600).toFixed(3) + " " + (activeUnit === "km" ? "km/s" : "mi/s"); } if (elapsedMs <= 0) { clearDashboard(); return; } const elapsedHours = elapsedMs / (1000 * 60 * 60); const elapsedMins = elapsedMs / (1000 * 60); // Distances traveled in km const dRot = elapsedHours * rotSpeedKmh; const dOrb = elapsedHours * ORBIT_SPEED; const dGal = elapsedHours * GALACTIC_SPEED; const dCmb = elapsedHours * CMB_SPEED; const dTotal = dRot + dOrb + dGal; // Sum total for Odometer // Render odometers if (odoValue) odoValue.textContent = (dTotal * unitMod).toFixed(3).replace(/\B(?=(\d{3})+(?!\d))/g, ","); safeSetText("cod-break-rot", Math.round(dRot * unitMod).toLocaleString() + " " + activeUnit); safeSetText("cod-break-orb", Math.round(dOrb * unitMod).toLocaleString() + " " + activeUnit); safeSetText("cod-break-gal", Math.round(dGal * unitMod).toLocaleString() + " " + activeUnit); safeSetText("cod-break-cmb", Math.round(dCmb * unitMod).toLocaleString() + " " + activeUnit); // Realtime Session Calculations const sessionSeconds = (Date.now() - sessionStartTime) / 1000; const totalSpeedKms = (rotSpeedKmh + ORBIT_SPEED + GALACTIC_SPEED + CMB_SPEED) / 3600; const dSession = sessionSeconds * totalSpeedKms; if (sessionVal) sessionVal.textContent = (dSession * unitMod).toFixed(2); // Chrono Age Display let ageYearsValue = elapsedMs / (1000 * 60 * 60 * 24 * 365.2425); if (activePlanetYearKey !== null) { ageYearsValue = ageYearsValue / PLANET_YEARS[activePlanetYearKey]; } const displayYears = Math.floor(ageYearsValue); const yearFraction = ageYearsValue - displayYears; const totalDaysInYear = activePlanetYearKey === null ? 365 : Math.round(365.25 * PLANET_YEARS[activePlanetYearKey]); const displayDays = Math.floor(yearFraction * totalDaysInYear); const totalHoursInDay = 24; const hourFraction = (yearFraction * totalDaysInYear) - displayDays; const displayHours = Math.floor(hourFraction * totalHoursInDay); const minFraction = (hourFraction * totalHoursInDay) - displayHours; const displayMins = Math.floor(minFraction * 60); const secFraction = (minFraction * 60) - displayMins; const displaySecs = Math.floor(secFraction * 60); if (chrY) chrY.textContent = displayYears; if (chrMo) chrMo.textContent = Math.floor((yearFraction * totalDaysInYear) / 30); // Approximate months if (chrD) chrD.textContent = displayDays % 30; if (chrH) chrH.textContent = String(displayHours).padStart(2, "0"); if (chrMin) chrMin.textContent = String(displayMins).padStart(2, "0"); if (chrSec) chrSec.textContent = String(displaySecs).padStart(2, "0"); // Update Milestones const totalSpins = elapsedHours / 24; const totalMoonOrbits = elapsedMs / LUNAR_MONTH_MS; const totalHeartbeats = elapsedMins * 80; const totalBreaths = elapsedMins * 16; if (msRotations) msRotations.textContent = Math.floor(totalSpins).toLocaleString(); if (msLunar) msLunar.textContent = totalMoonOrbits.toFixed(1).toLocaleString(); if (msHeart) msHeart.textContent = Math.floor(totalHeartbeats).toLocaleString(); if (msBreaths) msBreaths.textContent = Math.floor(totalBreaths).toLocaleString(); // Progress around the Galactic Core (230M years orbit) const currentEarthYears = elapsedMs / (1000 * 60 * 60 * 24 * 365.2425); const progressRatio = (currentEarthYears / 230000000) * 100; safeSetText("cod-progress-pct", progressRatio.toFixed(8) + "%"); safeSetText("cod-progress-pct-alt", progressRatio.toFixed(8) + "%"); if (progressBar) progressBar.style.width = Math.min(100, progressRatio * 10000000) + "%"; // Scale up visual representation } function clearDashboard() { if (odoValue) odoValue.textContent = "0.000"; safeSetText("cod-break-rot", "—"); safeSetText("cod-break-orb", "—"); safeSetText("cod-break-gal", "—"); safeSetText("cod-break-cmb", "—"); if (sessionVal) sessionVal.textContent = "0.00"; safeSetText("cod-progress-pct", "0.00000000%"); safeSetText("cod-progress-pct-alt", "0.00000000%"); if (progressBar) progressBar.style.width = "0%"; } // ================= RENDERING SPACE MODULES ================= function resizeCanvas(canvas) { if (!canvas) return; const dpr = window.devicePixelRatio || 1; const rect = canvas.getBoundingClientRect(); let w = rect.width; let h = rect.height; if (w === 0) w = 280; // Safe fallback boundaries if (h === 0) h = 200; canvas.width = w * dpr; canvas.height = h * dpr; const ctx = canvas.getContext("2d"); ctx.setTransform(1, 0, 0, 1, 0, 0); // reset scale ctx.scale(dpr, dpr); } resizeCanvas(vortexCanvas); resizeCanvas(galaxyCanvas); // Re-render and resize safely to avoid stretching window.addEventListener("resize", () => { resizeCanvas(vortexCanvas); resizeCanvas(galaxyCanvas); }); function drawVortex() { if (!vCtx || !vortexCanvas) return; const dpr = window.devicePixelRatio || 1; const w = vortexCanvas.width / dpr; const h = vortexCanvas.height / dpr; vCtx.clearRect(0, 0, w, h); rotationAngle += 0.015 * canvasWarpMultiplier; // Draw forward motion axis (Vortex baseline) vCtx.beginPath(); vCtx.strokeStyle = "rgba(255,255,255,0.04)"; vCtx.lineWidth = 1.5; vCtx.moveTo(w / 2, h); vCtx.lineTo(w / 2, 0); vCtx.stroke(); // Draw Sun moving forward const sunY = h / 2 + Math.sin(rotationAngle * 0.1) * 20; vCtx.beginPath(); vCtx.fillStyle = "#ffcc00"; vCtx.shadowBlur = 15; vCtx.shadowColor = "#ffaa00"; vCtx.arc(w / 2, sunY, 12, 0, Math.PI * 2); vCtx.fill(); vCtx.shadowBlur = 0; // reset // Draw Earth and Planet spirals const planets = [ { r: 22, speed: 1, color: "#3182ce" }, // Earth (Blue) { r: 35, speed: 0.5, color: "#e53e3e" }, // Mars (Red) { r: 48, speed: 0.1, color: "#ecc94b" } // Saturn (Gold) ]; planets.forEach(p => { // Draw trailing helical path vCtx.beginPath(); vCtx.strokeStyle = p.color; vCtx.globalAlpha = 0.15; vCtx.lineWidth = 1; vCtx.moveTo(w / 2, h); for (let y = h; y > 0; y -= 4) { const angleOffset = (y * 0.05) - (rotationAngle * p.speed); const x = (w / 2) + Math.cos(angleOffset) * p.r; vCtx.lineTo(x, y); } vCtx.stroke(); vCtx.globalAlpha = 1.0; // Draw Planet Body const angle = rotationAngle * p.speed; const pX = (w / 2) + Math.cos(angle) * p.r; vCtx.beginPath(); vCtx.fillStyle = p.color; vCtx.arc(pX, sunY + Math.sin(angle) * 8, 4, 0, Math.PI * 2); vCtx.fill(); }); requestAnimationFrame(drawVortex); } // 2. Logarithmic Spiral Galaxy (Milky Way) generator function drawGalaxy() { if (!gCtx || !galaxyCanvas) return; const dpr = window.devicePixelRatio || 1; const w = galaxyCanvas.width / dpr; const h = galaxyCanvas.height / dpr; gCtx.clearRect(0, 0, w, h); const centerX = w / 2; const centerY = h / 2; // Draw central massive core (Sagittarius A*) gCtx.beginPath(); gCtx.fillStyle = "#ffffff"; gCtx.shadowBlur = 20; gCtx.shadowColor = "#ebf8ff"; gCtx.arc(centerX, centerY, 8, 0, Math.PI * 2); gCtx.fill(); gCtx.shadowBlur = 0; // Render stellar clusters in logarithmic spirals (r = a * e^(b * theta)) const arms = 2; const starsPerArm = 180; gCtx.fillStyle = "rgba(144, 205, 244, 0.45)"; for (let arm = 0; arm < arms; arm++) { const armAngleOffset = arm * Math.PI; for (let i = 0; i < starsPerArm; i++) { const theta = (i / starsPerArm) * Math.PI * 4; // 2 complete revolutions const r = 5 * Math.exp(0.24 * theta); // logarithmic spiral growth rate const x = centerX + Math.cos(theta + armAngleOffset) * r; const y = centerY + Math.sin(theta + armAngleOffset) * r; if (x > 0 && x < w && y > 0 && y < h) { gCtx.fillRect(x, y, 1.5, 1.5); } } } // Draw "YOU ARE HERE" Indicator (Orion Arm - approx halfway out on the spiral) const earthTheta = Math.PI * 1.85; const earthR = 5 * Math.exp(0.24 * earthTheta); const earthX = centerX + Math.cos(earthTheta) * earthR; const earthY = centerY + Math.sin(earthTheta) * earthR; gCtx.beginPath(); gCtx.fillStyle = "#00ff66"; gCtx.shadowBlur = 10; gCtx.shadowColor = "#00ff66"; gCtx.arc(earthX, earthY, 5, 0, Math.PI * 2); gCtx.fill(); gCtx.shadowBlur = 0; requestAnimationFrame(drawGalaxy); } // Start calculations ticking setInterval(runCalculations, 35); // Run Initial Setups loadURLParams(); updateSpeedsLabels(); runCalculations(); drawVortex(); drawGalaxy(); } // Self-executing setup to prevent WordPress ready-state bypasses if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", initCosmicOdometer); } else { initCosmicOdometer(); } })(); </script> <!-- END OF COSMIC ODOMETER --> <!-- /wp:html -->