Merge pull request #2 from ok2/codex/create-javascript-config-for-periodic-events

Add periodic event config with futuristic tags

README.md

@@ -51,7 +51,9 @@ An interactive web app that visualizes the **CosmoChron Binary Epoch (CoBiE)** t
 ## Project Structure
 
 ```
-├── index.html       # Main HTML, styles, and scripts
+├── index.html       # Main HTML markup
+├── style.css        # Separated styles
+├── script.js        # JavaScript logic
 ├── README.md        # This documentation
 └── assets/          # (Optional) images or external CSS/JS
 ```

events.js

@@ -0,0 +1,14 @@
+// Configuration of periodic events in CoBiE time
+// Each event repeats every cosmocycle.
+// "cobie" is the timestamp within the cosmocycle when the event occurs.
+// "tag" is a short label that will be displayed on the calendar.
+
+window.SPECIAL_EVENTS = [
+  { cobie: '49f4.9332', label: 'Afina',        megasequence: 'Mythran Epoch', eonstrip: 'Ventaso' },
+  { cobie: '11e5.f552', label: 'Oleks',        megasequence: 'Umbral Echo',   eonstrip: 'Ignisar' },
+  { cobie: '4d07.a2b2', label: 'Vincent',      megasequence: 'Azurean Tide',  eonstrip: 'Floraen' },
+  { cobie: '3edc.d430', label: 'Hochzeitstag', megasequence: 'Lustran Bounty', eonstrip: 'Electros' },
+  { cobie: '330d.d4ae', label: 'Zusammentag',  megasequence: 'Azurean Tide',  eonstrip: 'Chronar' },
+  { cobie: '11de.0c52', label: 'Anna',         megasequence: 'Lustran Bounty', eonstrip: 'Radiantae' },
+  { cobie: '467f.ae61', label: 'Iris',         megasequence: 'Argent Veil',   eonstrip: 'Etherion' }
+];

style.css

@@ -0,0 +1,356 @@
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    body {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
+        color: #e0e0e0;
+        min-height: 100vh;
+        overflow-x: hidden;
+    }
+
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    .header {
+        text-align: center;
+        margin-bottom: 30px;
+        padding: 20px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 15px;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .tooltip {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(0, 0, 0, 0.8);
+        color: #fff;
+        padding: 8px 12px;
+        border-radius: 4px;
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s;
+        z-index: 9999;
+    }
+
+    h1 {
+        font-size: 2.5em;
+        background: linear-gradient(45deg, #00ffff, #ff00ff);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-bottom: 10px;
+        animation: glow 3s ease-in-out infinite;
+    }
+
+    @keyframes glow {
+        0%, 100% { opacity: 0.8; }
+        50% { opacity: 1; }
+    }
+
+    .current-time {
+        background: rgba(0, 255, 255, 0.1);
+        border: 2px solid rgba(0, 255, 255, 0.3);
+        border-radius: 10px;
+        padding: 20px;
+        margin-bottom: 20px;
+        text-align: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .current-time.manual::before {
+        animation-play-state: paused;
+    }
+
+    .current-time::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.1), transparent);
+        transform: rotate(45deg);
+        animation: sweep 3s linear infinite;
+    }
+
+    @keyframes sweep {
+        0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+        100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+    }
+
+    .cobie-time {
+        font-size: 2.5em;
+        font-family: 'Courier New', monospace;
+        letter-spacing: 2px;
+        margin: 10px 0;
+        text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+    }
+
+    .regular-time {
+        font-size: 1.2em;
+        color: #aaa;
+    }
+
+    .timezone-selector {
+        margin: 20px 0;
+        text-align: center;
+    }
+
+    select {
+        padding: 10px 20px;
+        font-size: 16px;
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        border-radius: 5px;
+        color: #fff;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    select:hover {
+        background: rgba(255, 255, 255, 0.2);
+        transform: translateY(-2px);
+    }
+
+    .calendar-controls {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
+        margin: 20px 0;
+    }
+
+    button {
+        padding: 10px 20px;
+        font-size: 16px;
+        background: linear-gradient(45deg, #00ffff, #0080ff);
+        border: none;
+        border-radius: 5px;
+        color: #fff;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        position: relative;
+        overflow: hidden;
+    }
+
+    button::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        transition: width 0.6s, height 0.6s;
+    }
+
+    button:hover::before {
+        width: 300px;
+        height: 300px;
+    }
+
+    button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
+    }
+
+    .calendar-view {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 15px;
+        padding: 20px;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .calendar-header {
+        text-align: center;
+        font-size: 1.5em;
+        margin-bottom: 20px;
+        color: #00ffff;
+    }
+
+    .eonstrip-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 15px;
+        margin-bottom: 20px;
+    }
+
+    .eonstrip-card {
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 10px;
+        padding: 15px;
+        text-align: center;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        position: relative;
+        overflow: visible;
+        white-space: normal;
+    }
+
+    .eonstrip-card::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
+    .eonstrip-card:hover::before {
+        opacity: 1;
+    }
+
+    .eonstrip-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 20px rgba(0, 255, 255, 0.2);
+        border-color: rgba(0, 255, 255, 0.5);
+            z-index: 1000;
+    }
+
+    .eonstrip-card:hover .tooltip {
+        opacity: 1;
+    }
+
+    .eonstrip-card.current {
+        background: rgba(0, 255, 255, 0.2);
+        border-color: rgba(0, 255, 255, 0.5);
+    }
+
+    .eonstrip-name {
+        font-size: 1em;
+        font-weight: bold;
+        color: #00ffff;
+        margin-bottom: 5px;
+    }
+
+    .eonstrip-hex {
+        font-size: 0.85em;             /* was default monospace size */
+        font-family: 'Courier New', monospace;
+        color: #ffaaff;
+        margin-bottom: 10px;
+    }
+
+    .eonstrip-dates {
+        font-size: 0.7em;
+        color: #aaa;
+        line-height: 1.4;
+    }
+
+    .event-tag {
+        display: inline-block;
+        margin-top: 4px;
+        padding: 2px 6px;
+        font-size: 0.75em;
+        font-weight: 600;
+        color: #fff;
+        background: linear-gradient(135deg, rgba(0,255,255,0.25), rgba(255,0,255,0.25));
+        border: 1px solid rgba(255,255,255,0.2);
+        border-radius: 4px;
+        text-shadow: 0 0 6px rgba(0,255,255,0.7);
+    }
+
+    .time-details {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 10px;
+        padding: 20px;
+        margin-top: 20px;
+    }
+
+    .time-unit {
+        display: flex;
+        justify-content: space-between;
+        padding: 10px 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .time-unit:last-child {
+        border-bottom: none;
+    }
+
+    .unit-name {
+        color: #00ffff;
+        font-weight: bold;
+    }
+
+    .unit-value {
+        font-family: 'Courier New', monospace;
+        color: #ffaaff;
+    }
+
+    .toggle-btn {
+        background: linear-gradient(45deg, #00ffff, #0080ff);
+        border: none;
+        border-radius: 8px;
+        color: #fff;
+        font-size: 0.9em;
+        padding: 8px 16px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        box-shadow: 0 0 10px rgba(0,255,255,0.4);
+        transition: all 0.3s ease;
+    }
+
+    .toggle-btn .arrow-icon {
+        display: inline-block;
+        margin-right: 6px;
+        transition: transform 0.3s ease;
+    }
+
+    .toggle-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 0 20px rgba(0,255,255,0.6);
+    }
+
+    .extended-section {
+        display: none; /* hidden by default */
+        margin-top: 10px;
+        animation: fadeIn 0.4s ease;
+    }
+
+    /* Simple fade‐in for when extended units show */
+    @keyframes fadeIn {
+        from { opacity: 0; }
+        to   { opacity: 1; }
+    }
+
+    @media only screen
+      and (max-width: 812px)    /* iPhone portrait widths go up to ~812px */
+      and (orientation: portrait) {
+
+      /* scale down your main text by 30% */
+      html {
+        font-size: 70%;
+      }
+
+      /* if you prefer targeting only the big “cobie-time” element: */
+      .cobie-time {
+        font-size: 1.75em; /* was 2.5em, which is 70% of 2.5em */
+      }
+    }
+
+    .eonstrip-grid {
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    }