diff --git a/.gitignore b/.gitignore
index 4bb941c..b1b9f8b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
 .venv
 
 *.pyc
-*.pyi
\ No newline at end of file
+*.pyi
+
+__pycache__/
diff --git a/main.py b/main.py
index 7816d9c..82e1b14 100644
--- a/main.py
+++ b/main.py
@@ -7,24 +7,11 @@ from modules.clocks import crt
 
 app = flask.Flask(__name__)
 
-clock = crt.CRTClock(R=((1, 0, 0), (0, 1, 0), (0, 0, 1)))
-
 
 @app.route("/")
 def index():
     return render_template("index.html")
 
 
-@app.route("/color")
-def get_color():
-    global clock
-    now = datetime.datetime.now()
-    color = clock.transform(now)
-    r = int(color[0] * 255)
-    g = int(color[1] * 255)
-    b = int(color[2] * 255)
-    return flask.jsonify({"color": f"rgb({r}, {g}, {b})"})
-
-
 if __name__ == "__main__":
     app.run(debug=True)
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..473a0f4
diff --git a/static/js/clocks/clock.js b/static/js/clocks/clock.js
new file mode 100644
index 0000000..1aa70b5
--- /dev/null
+++ b/static/js/clocks/clock.js
@@ -0,0 +1,61 @@
+class CClock {
+    transform(time) {
+        return time;
+    }
+}
+
+class CRTClock extends CClock {
+    /**
+     * @param {number[][]} R
+     */
+    constructor(R) {
+        super();
+        this.R = R;
+    }
+
+    /**
+     * @param {Date} time
+     * @returns {number[]}
+     */
+    transform(time) {
+        const h = time.getHours() / 24.0;
+        const m = time.getMinutes() / 60.0;
+        const s = time.getSeconds() / 60.0;
+
+        const ret = [
+            h * this.R[0][0] + m * this.R[0][1] + s * this.R[0][2],
+            h * this.R[1][0] + m * this.R[1][1] + s * this.R[1][2],
+            h * this.R[2][0] + m * this.R[2][1] + s * this.R[2][2]
+        ];
+
+        return ret;
+    }
+}
+
+class CRTCosineClock extends CRTClock {
+    /**
+     * @param {Date} time
+     * @returns {number[]}
+     */
+    transform(time) {
+        // Calculate raw progress (0.0 ~ 1.0)
+        const hProg = (time.getHours() + time.getMinutes() / 60.0 + time.getSeconds() / 3600.0) / 24.0;
+        const mProg = (time.getMinutes() + time.getSeconds() / 60.0) / 60.0;
+        const sProg = (time.getSeconds() + time.getMilliseconds() / 1000.0) / 60.0;
+
+        // Use Cosine wave (0 -> 1 -> 0) to ensure continuity at the cycle boundary (1.0 -> 0.0)
+        // Formula: 0.5 - 0.5 * cos(2 * PI * t)
+        const h = 0.5 - 0.5 * Math.cos(2 * Math.PI * hProg);
+        const m = 0.5 - 0.5 * Math.cos(2 * Math.PI * mProg);
+        const s = 0.5 - 0.5 * Math.cos(2 * Math.PI * sProg);
+
+        // Matrix multiplication
+        const ret = [
+            h * this.R[0][0] + m * this.R[0][1] + s * this.R[0][2],
+            h * this.R[1][0] + m * this.R[1][1] + s * this.R[1][2],
+            h * this.R[2][0] + m * this.R[2][1] + s * this.R[2][2]
+        ];
+
+        return ret;
+    }
+}
\ No newline at end of file
diff --git a/static/js/operation.js b/static/js/operation.js
new file mode 100644
index 0000000..5d234a9
--- /dev/null
+++ b/static/js/operation.js
@@ -0,0 +1,342 @@
+// Initialize the clock
+// Define Matrices
+const IDENTITY_MATRIX = [
+    [1, 0, 0],
+    [0, 1, 0],
+    [0, 0, 1]
+];
+
+const MODIFIED_MATRIX = [
+    [0.6, 0.3, 0.1], // Red: Strongly H, Medium M, Weak S
+    [0.1, 0.6, 0.3], // Green: Weak H, Strongly M, Medium S
+    [0.3, 0.1, 0.6]  // Blue: Medium H, Weak M, Strongly S
+];
+
+const CLOCK_TYPES = {
+    'linear_crt': {
+        class: CRTClock,
+        matrix: IDENTITY_MATRIX,
+        label: 'Linear CRT'
+    },
+    'modified_crt': {
+        class: CRTClock,
+        matrix: MODIFIED_MATRIX,
+        label: 'Modified CRT'
+    },
+    'linear_cosine_crt': {
+        class: CRTCosineClock,
+        matrix: IDENTITY_MATRIX,
+        label: 'Linear Cosine CRT'
+    },
+    'modified_cosine_crt': {
+        class: CRTCosineClock,
+        matrix: MODIFIED_MATRIX,
+        label: 'Modified Cosine CRT'
+    }
+};
+
+let currentClockType = 'modified_cosine_crt'; // Default
+let clock = new CRTCosineClock(MODIFIED_MATRIX);
+
+const container = document.getElementById('boxContainer');
+const clockSelect = document.getElementById('clockSelect');
+const flushButton = document.getElementById('flushButton');
+const infoPanel = document.getElementById('infoPanel');
+const infoClock = document.getElementById('infoClock');
+const infoTime = document.getElementById('infoTime');
+const infoRGB = document.getElementById('infoRGB');
+const colorPreview = document.getElementById('colorPreview');
+
+const MAX_BOXES = 256;
+let zIndexCounter = 1;
+let isHovering = false;
+let pendingBoxes = [];
+
+function saveState() {
+    const boxesData = [];
+    for (let i = 0; i < container.children.length; i++) {
+        const box = container.children[i];
+        boxesData.push({
+            time: box.dataset.time,
+            rgb: box.dataset.rgb,
+            clockinfo: box.dataset.clockinfo,
+            zIndex: box.style.zIndex
+        });
+    }
+    const state = {
+        boxes: boxesData,
+        zIndexCounter: zIndexCounter
+    };
+    localStorage.setItem('clockEngagementState', JSON.stringify(state));
+}
+
+function loadState() {
+    const savedState = localStorage.getItem('clockEngagementState');
+    if (savedState) {
+        try {
+            const state = JSON.parse(savedState);
+            if (state.zIndexCounter) {
+                zIndexCounter = state.zIndexCounter;
+            }
+            if (Array.isArray(state.boxes)) {
+                state.boxes.forEach(data => {
+                    const box = document.createElement('div');
+                    box.className = 'box';
+                    box.style.backgroundColor = data.rgb;
+                    box.style.zIndex = data.zIndex;
+                    box.dataset.time = data.time;
+                    box.dataset.rgb = data.rgb;
+
+                    // Restore without animation for saved state
+                    box.classList.add('entered');
+
+                    box.dataset.clockinfo = data.clockinfo;
+                    container.appendChild(box);
+                });
+                updateLayout();
+            }
+        } catch (e) {
+            console.error("Failed to load state:", e);
+        }
+    }
+}
+
+function updateLayout() {
+    // Dynamic compression logic
+    const count = container.children.length;
+
+    // Get current box size from CSS variable
+    const boxSizePx = getComputedStyle(document.documentElement).getPropertyValue('--box-size').trim();
+    const boxSize = parseInt(boxSizePx, 10) || 300;
+
+    let visibleWidth = 80;
+    if (count > 10) {
+        // Decrease visibility as count increases (basic linear interpolation)
+        visibleWidth = Math.max(22, 80 - (1 * (count - 5)));
+    }
+    const overlap = -(boxSize - visibleWidth);
+    container.style.setProperty('--card-overlap', `${overlap}px`);
+}
+
+function flushPendingBoxes() {
+    if (pendingBoxes.length === 0) return;
+
+    // Add all pending boxes
+    while (pendingBoxes.length > 0) {
+        const box = pendingBoxes.shift();
+        container.appendChild(box);
+        // Force reflow and animate
+        void box.offsetWidth;
+        box.classList.add('entered');
+    }
+
+    // Remove excess boxes
+    while (container.children.length > MAX_BOXES) {
+        container.removeChild(container.firstChild);
+    }
+    updateLayout();
+    saveState();
+}
+
+container.addEventListener('mouseenter', () => {
+    isHovering = true;
+});
+
+container.addEventListener('mouseleave', () => {
+    isHovering = false;
+    infoPanel.classList.remove('visible'); // Hide info panel
+    flushPendingBoxes();
+});
+
+// Event delegation for box hovering to show info
+container.addEventListener('mouseover', (e) => {
+    const box = e.target.closest('.box');
+    if (box) {
+        const time = box.dataset.time;
+        const rgb = box.dataset.rgb;
+
+        if (time && rgb) {
+            infoTime.textContent = time;
+            infoRGB.textContent = rgb;
+            infoClock.textContent = box.dataset.clockinfo || "Unknown";
+            colorPreview.style.backgroundColor = rgb;
+            infoPanel.classList.add('visible');
+        }
+    }
+});
+
+
+function createBox() {
+    const box = document.createElement('div');
+    box.className = 'box';
+
+    // Calculate color based on current time
+    const now = new Date();
+    const color = clock.transform(now);
+    const r = Math.floor(color[0] * 255);
+    const g = Math.floor(color[1] * 255);
+    const b = Math.floor(color[2] * 255);
+    const rgbStr = `rgb(${r}, ${g}, ${b})`;
+
+    box.style.backgroundColor = rgbStr;
+
+    // Store data for info panel
+    box.dataset.time = now.toLocaleTimeString();
+    box.dataset.rgb = rgbStr;
+
+    // Get label from CLOCK_TYPES using currentClockType
+    let typeInfo = CLOCK_TYPES[currentClockType];
+    // Fallback if not found (should not happen normally)
+    const typeLabel = typeInfo ? typeInfo.label : "Unknown Clock";
+
+    box.dataset.clockinfo = typeLabel;
+
+    // Ensure the new box is visually on top of the older ones
+    box.style.zIndex = zIndexCounter++;
+
+    if (isHovering) {
+        // Create it but don't show it yet (prevent visual shift)
+        pendingBoxes.push(box);
+    } else {
+        // Append to the end (right side, newest)
+        container.appendChild(box);
+
+        // Trigger reflow to ensure the initial state is rendered before adding the class
+        void box.offsetWidth;
+        box.classList.add('entered');
+
+        // Limit the number of boxes
+        if (container.children.length > MAX_BOXES) {
+            container.removeChild(container.firstChild);
+        }
+        updateLayout();
+        saveState();
+    }
+}
+
+// Load saved state on startup
+loadState();
+
+function setClockType(type) {
+    const config = CLOCK_TYPES[type];
+    if (config) {
+        currentClockType = type;
+        // Instantiate the clock with the specific matrix
+        clock = new config.class(config.matrix);
+        clockSelect.value = type;
+        localStorage.setItem('clockType', type);
+    }
+}
+
+// Initialize clock selection from localStorage
+const savedClockType = localStorage.getItem('clockType');
+// Validate if saved type exists in our new structure
+if (savedClockType && CLOCK_TYPES[savedClockType]) {
+    setClockType(savedClockType);
+} else {
+    // Default fallback
+    setClockType('modified_cosine_crt');
+}
+
+// Clock selection handler
+clockSelect.addEventListener('change', (e) => {
+    setClockType(e.target.value);
+});
+
+// Flush Button Logic
+flushButton.addEventListener('click', () => {
+    // Confirm before flushing if there are many items
+    if (container.children.length > 0) {
+        // Clear DOM
+        while (container.firstChild) {
+            container.removeChild(container.firstChild);
+        }
+        // Clear pending boxes
+        pendingBoxes = [];
+        // Reset zIndex (optional, but cleaner)
+        // zIndexCounter = 1; 
+
+        // Reset scroll
+        currentOffset = 0;
+        container.style.setProperty('--scroll-offset', '0px');
+
+        // Update stats and storage
+        updateLayout();
+        saveState();
+    }
+});
+
+// Swipe / Drag Logic
+let isDragging = false;
+let startX = 0;
+let currentOffset = 0;
+let initialDragOffset = 0;
+
+// Add event listeners to the container (or window/document if you want full screen drag)
+// Using window for smoother drag even if mouse leaves container
+window.addEventListener('mousedown', (e) => {
+    // Only start drag if not clicking on the info panel
+    if (e.target.closest('#infoPanel')) return;
+
+    isDragging = true;
+    startX = e.clientX;
+    initialDragOffset = currentOffset;
+    container.style.cursor = 'grabbing';
+});
+
+window.addEventListener('mousemove', (e) => {
+    if (!isDragging) return;
+    e.preventDefault(); // Prevent text selection etc
+
+    const deltaX = e.clientX - startX;
+    let newOffset = initialDragOffset + deltaX;
+
+    // Bounds (optional but good)
+    // Min offset 0 (cannot pull the newest card further left/center is looked) -> Actually prevent pull to left
+    if (newOffset < 0) newOffset = 0;
+
+    // Max offset? Rough estimate: Total width. 
+    // Just letting it be somewhat open for now or we can calculate.
+    // Ideally we stop when the first card reaches center.
+    // But let's keep it simple first.
+
+    currentOffset = newOffset;
+    container.style.setProperty('--scroll-offset', `${currentOffset}px`);
+});
+
+window.addEventListener('mouseup', () => {
+    isDragging = false;
+    container.style.cursor = 'grab';
+});
+
+// Touch support for mobile
+window.addEventListener('touchstart', (e) => {
+    if (e.target.closest('#infoPanel')) return;
+    isDragging = true;
+    startX = e.touches[0].clientX;
+    initialDragOffset = currentOffset;
+}, { passive: false });
+
+window.addEventListener('touchmove', (e) => {
+    if (!isDragging) return;
+    if (e.cancelable) e.preventDefault(); // Block browser scroll
+
+    const deltaX = e.touches[0].clientX - startX;
+    let newOffset = initialDragOffset + deltaX;
+
+    if (newOffset < 0) newOffset = 0;
+
+    currentOffset = newOffset;
+    container.style.setProperty('--scroll-offset', `${currentOffset}px`);
+});
+
+window.addEventListener('touchend', () => {
+    isDragging = false;
+});
+
+
+// Create a box every 1 second (1000ms)
+setInterval(createBox, 1000);
+
+// Initialize with one box immediately
+createBox();
diff --git a/templates/index.html b/templates/index.html
index b3ef6d7..eb2de3f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,45 +1,320 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Clock Engagement</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23111%22/><text x=%2250%22 y=%2265%22 font-family=%22monospace%22 font-size=%2245%22 font-weight=%22900%22 text-anchor=%22middle%22 fill=%22%23fff%22>CRT</text></svg>">
+    <script src="{{ url_for('static', filename='js/clocks/clock.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/operation.js') }}" defer></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <style>
-        body {
-            background-color: #F3E5F5; /* Very pale light purple */
-            margin: 0;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
+        :root {
+            --box-size: 300px;
         }
+
+        @media (max-width: 600px) {
+            :root {
+                --box-size: 220px;
+            }
+            
+            #infoPanel {
+                top: 20px;
+                right: 20px;
+                left: 20px;
+                width: auto !important; /* Override fixed width */
+            }
+
+            #controls {
+                right: 20px;
+                bottom: 20px;
+            }
+
+            #leftControls {
+                left: 20px;
+                bottom: 20px;
+            }
+
+            #flushButton, #clockSelect {
+                padding: 10px 16px;
+                font-size: 0.9rem;
+            }
+        }
+
+        body {
+            background-color: #F3E5F5;
+            /* Very pale light purple */
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            position: fixed; /* Lock viewport on mobile */
+            overflow: hidden;
+            /* Prevent body scroll */
+            touch-action: none; /* Disable browser handling of gestures */
+            overscroll-behavior: none; /* Prevent pull-to-refresh effects */
+        }
+
+        #boxContainer {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            /* Position the container's right edge at the center of the screen */
+            position: absolute;
+            right: 50%;
+            top: 50%;
+            /* Shift right by half the box width (so the last box is centered) */
+            /* Shift up by 50% to vertically center */
+            /* Added --scroll-offset for swipe functionality */
+            transform: translate(calc(var(--box-size) / 2 + var(--scroll-offset, 0px)), -50%);
+            /* Ensure boxes don't wrap */
+            flex-wrap: nowrap;
+            /* Variable for overlaps */
+            --card-overlap: -240px;
+
+            /* Better cursor to indicate interactivity */
+            cursor: grab;
+            transition: transform 0.1s linear;
+            /* Smooth drag */
+        }
+
+        #boxContainer:active {
+            cursor: grabbing;
+        }
+
         .box {
-            width: 300px;
-            height: 300px;
-            border: 2px solid black;
+            width: var(--box-size);
+            height: var(--box-size);
+            border: 1px solid #333;
+            border-radius: 15px;
             background-color: #000000;
             display: flex;
             justify-content: center;
             align-items: center;
+            flex-shrink: 0;
+            /* Don't shrink the boxes */
+
+            /* Overlap logic: pulled to the left to overlap with previous sibling */
+            margin-left: var(--card-overlap);
+
+            /* Lighter shadow to prevent darkness accumulation when stacked */
+            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+
+            position: relative;
+            transition: transform 0.3s ease, margin-left 0.3s ease, margin-right 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
+            background-color: white;
+            /* Default background, will be overridden */
+
+            /* Initial state for creation animation */
+            opacity: 0;
+            transform: translateY(100px);
+        }
+
+        /* Class to trigger entry animation */
+        .box.entered {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        /* The first box shouldn't have a negative margin */
+        .box:first-child {
+            margin-left: 0;
+            box-shadow: none;
+            /* First card doesn't need a left shadow on anything */
+        }
+
+        /* Hover effect */
+        .box.entered:hover {
+            transform: translateY(-320px);
+            /* Move up clearly */
+            margin-left: 0px;
+            /* Expand to show full card */
+            margin-right: 20px;
+            /* Push next cards away */
+            z-index: 100000 !important;
+            /* Bring to front */
+            /* Stronger shadow to indicate lifting */
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        /* 
+           Invisible pseudo-element to extend the hit area downwards during hover.
+           This prevents the 'flickering' issue where the card moves up away from the mouse cursor.
+        */
+        .box::after {
+            content: '';
+            position: absolute;
+            top: 100%;
+            /* Anchor to the bottom of the card */
+            left: 0;
+            width: 100%;
+            height: 350px;
+            /* Covers the 320px movement + buffer */
+            display: none;
+            /* Hidden by default */
+        }
+
+        .box:hover::after {
+            display: block;
+            /* Show only on hover to maintain the capture */
+        }
+
+        #infoPanel {
+            position: fixed;
+            right: 40px;
+            top: 40px;
+            width: 250px;
+            background-color: rgba(255, 255, 255, 0.95);
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+            /* Let clicks pass through */
+        }
+
+        #infoPanel.visible {
+            opacity: 1;
+        }
+
+        #infoPanel h2 {
+            margin-top: 0;
+            color: #333;
+            font-size: 1.2rem;
+            border-bottom: 2px solid #eee;
+            padding-bottom: 10px;
+            margin-bottom: 15px;
+        }
+
+        .info-row {
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+        }
+
+        .info-label {
+            font-weight: bold;
+            color: #666;
+            width: 60px;
+            font-size: 0.9rem;
+        }
+
+        .info-value {
+            color: #111;
+            font-family: monospace;
+            font-size: 1rem;
+        }
+
+        #colorPreview {
+            width: 20px;
+            height: 20px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin-right: 8px;
+            display: inline-block;
+        }
+
+        #controls {
+            position: fixed;
+            right: 40px;
+            bottom: 40px;
+            z-index: 1000;
+        }
+
+        #clockSelect {
+            padding: 12px 16px;
+            font-size: 1rem;
+            border-radius: 25px;
+            border: none;
+            background-color: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+            cursor: pointer;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            color: #333;
+            outline: none;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            appearance: none;
+            /* Remove default arrow in some browsers for custom styling if needed, but keeping default is safer */
+            -webkit-appearance: none;
+            padding-right: 40px;
+            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+            background-repeat: no-repeat;
+            background-position: right 15px top 50%;
+            background-size: 10px auto;
+        }
+
+        #clockSelect:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        #leftControls {
+            position: fixed;
+            left: 40px;
+            bottom: 40px;
+            z-index: 1000;
+        }
+
+        #flushButton {
+            padding: 12px 24px;
+            font-size: 1rem;
+            border-radius: 25px;
+            border: none;
+            background-color: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+            cursor: pointer;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            color: #d32f2f; /* Red color for destructive action */
+            font-weight: bold;
+            outline: none;
+            transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+        }
+
+        #flushButton:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+            background-color: #ffebee;
         }
     </style>
 </head>
-<body>
-    <div class="box" id="colorBox">
-        <!-- Content can go here -->
-    </div>
-    <script>
-        function updateColor() {
-            fetch('/color')
-                .then(response => response.json())
-                .then(data => {
-                    document.getElementById('colorBox').style.backgroundColor = data.color;
-                })
-                .catch(error => console.error('Error fetching color:', error));
-        }
 
-        // Update every 100 milliseconds
-        setInterval(updateColor, 811);
-    </script>
+<body>
+    <div id="boxContainer">
+        <!-- Boxes will be added here -->
+    </div>
+
+    <div id="leftControls">
+        <button id="flushButton">Flush All</button>
+    </div>
+
+    <div id="controls">
+        <select id="clockSelect">
+            <option value="linear_crt">Linear CRT</option>
+            <option value="modified_crt">Modified CRT</option>
+            <option value="linear_cosine_crt">Linear Cosine CRT</option>
+            <option value="modified_cosine_crt">Modified Cosine CRT</option>
+        </select>
+    </div>
+
+    <div id="infoPanel">
+        <h2>Card Details</h2>
+        <div class="info-row">
+            <span class="info-label">Time:</span>
+            <span class="info-value" id="infoTime">--:--:--</span>
+        </div>
+        <div class="info-row">
+            <span class="info-label">RGB:</span>
+            <div id="colorPreview"></div>
+            <span class="info-value" id="infoRGB"></span>
+        </div>
+        <div class="info-row">
+            <span class="info-label">Clock:</span>
+            <span class="info-value" id="infoClock">--</span>
+        </div>
+    </div>
 </body>
+
 </html>
\ No newline at end of file