diff --git a/README.md b/README.md
deleted file mode 100644
index 5e44aa0..0000000
--- a/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# teleprompter
-
diff --git a/teleprompter.html b/teleprompter.html
new file mode 100644
index 0000000..d2719fc
--- /dev/null
+++ b/teleprompter.html
@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Superhero Teleprompter</title>
+    <!-- Bootswatch Superhero Theme -->
+    <link rel="stylesheet" href="https://bootswatch.com/4/superhero/bootstrap.min.css">
+    <!-- Custom Styles -->
+    <style>
+        body, html {
+            height: 100%;
+            margin: 0;
+            font-family: 'Inter', sans-serif;
+            overflow: hidden; /* Hide scrollbars on the body */
+        }
+        /* Main welcome screen */
+        .welcome-screen {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            flex-direction: column;
+            text-align: center;
+        }
+        .welcome-screen h1 {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+        .welcome-screen p {
+            font-size: 1.25rem;
+            margin-bottom: 2rem;
+            color: #adb5bd;
+        }
+        /* Teleprompter screen styles */
+        .teleprompter-view {
+            display: none; /* Hidden by default */
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #000;
+            color: #fff;
+            z-index: 1050;
+        }
+        /* The content area that will scroll */
+        #teleprompter-content {
+            font-size: 5vw; /* Responsive font size */
+            line-height: 1.5;
+            text-align: center;
+            padding: 50vh 10% 50vh 10%; /* Top and bottom padding push text start/end to center */
+            white-space: pre-wrap; /* Respect newlines and spaces */
+            overflow-wrap: break-word;
+            will-change: transform;
+        }
+        /* Center line indicator */
+        .indicator {
+            position: fixed;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            border-top: 3px solid #df691a;
+            transform: translateY(-50%);
+            z-index: 1051;
+            opacity: 0.7;
+        }
+        /* Controls at the bottom */
+        .controls {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 15px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            z-index: 1052;
+            flex-wrap: wrap;
+        }
+        .controls .btn {
+            min-width: 100px;
+        }
+        .controls .btn-info {
+            background-color: #4e5d6c;
+            border-color: #4e5d6c;
+        }
+        .controls .btn-info.active {
+            background-color: #df691a;
+            border-color: #c95a0c;
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Welcome Screen -->
+    <div class="container welcome-screen" id="welcomeScreen">
+        <div>
+            <h1 class="display-4">Teleprompter Suite</h1>
+            <p class="lead">Your presentation, delivered with precision. Paste your script to begin.</p>
+            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#scriptModal">
+                Load Script
+            </button>
+        </div>
+    </div>
+
+    <!-- Teleprompter View -->
+    <div class="teleprompter-view" id="teleprompterView">
+        <div class="indicator"></div>
+        <div id="teleprompter-content-wrapper" style="height:100%; overflow-y:scroll;">
+             <div id="teleprompter-content"></div>
+        </div>
+        <div class="controls">
+            <button id="speedSlow" class="btn btn-info">Slow</button>
+            <button id="speedMedium" class="btn btn-info">Medium</button>
+            <button id="speedFast" class="btn btn-info">Fast</button>
+            <button id="pauseResume" class="btn btn-success">Start</button>
+            <button id="reset" class="btn btn-danger">Restart</button>
+            <button id="editScript" class="btn btn-secondary">Edit Script</button>
+            <button id="exit" class="btn btn-dark">Exit</button>
+        </div>
+    </div>
+
+    <!-- Modal for script input -->
+    <div class="modal fade" id="scriptModal" tabindex="-1" role="dialog" aria-labelledby="scriptModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="scriptModalLabel">Enter Your Script</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <textarea id="scriptInput" class="form-control" rows="15" placeholder="Paste your text here..."></textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary" id="saveScript">Save & Use Script</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- jQuery and Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <!-- js-cookie for easy cookie management -->
+    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
+
+    <script>
+    $(document).ready(function() {
+        // --- State Variables ---
+        let scrollInterval;
+        let isPaused = true;
+        let currentSpeed = 25; // Default speed (milliseconds per pixel)
+        const speeds = {
+            slow: 50,
+            medium: 25,
+            fast: 10
+        };
+
+        const $teleprompterView = $('#teleprompterView');
+        const $welcomeScreen = $('#welcomeScreen');
+        const $contentWrapper = $('#teleprompter-content-wrapper');
+        const $pauseResumeBtn = $('#pauseResume');
+        const $speedBtns = $('.controls .btn-info');
+
+        // --- Core Functions ---
+
+        // Function to start scrolling
+        function startScrolling() {
+            if (scrollInterval) clearInterval(scrollInterval); // Clear any existing interval
+            scrollInterval = setInterval(function() {
+                $contentWrapper.scrollTop($contentWrapper.scrollTop() + 1);
+            }, currentSpeed);
+            isPaused = false;
+            $pauseResumeBtn.text('Pause').removeClass('btn-success').addClass('btn-warning');
+        }
+
+        // Function to stop scrolling
+        function stopScrolling() {
+            clearInterval(scrollInterval);
+            isPaused = true;
+            $pauseResumeBtn.text('Resume').removeClass('btn-warning').addClass('btn-success');
+        }
+
+        // Function to update the active speed button UI
+        function updateSpeedUI() {
+            $speedBtns.removeClass('active');
+            if (currentSpeed === speeds.slow) {
+                $('#speedSlow').addClass('active');
+            } else if (currentSpeed === speeds.medium) {
+                $('#speedMedium').addClass('active');
+            } else if (currentSpeed === speeds.fast) {
+                $('#speedFast').addClass('active');
+            }
+        }
+
+        // --- Cookie Management ---
+
+        // On load, check for a speed cookie
+        const savedSpeed = Cookies.get('teleprompterSpeed');
+        if (savedSpeed) {
+            currentSpeed = parseInt(savedSpeed, 10);
+        } else {
+            // Default to medium if no cookie is found
+            currentSpeed = speeds.medium;
+            Cookies.set('teleprompterSpeed', currentSpeed, { expires: 365 });
+        }
+        updateSpeedUI();
+
+        // On load, check for a script cookie
+        const savedScript = Cookies.get('teleprompterScript');
+        if (savedScript) {
+            $('#scriptInput').val(savedScript);
+        }
+
+
+        // --- Event Handlers ---
+
+        // Save/Start Teleprompter button in the modal
+        $('#saveScript').on('click', function() {
+            const scriptText = $('#scriptInput').val();
+            if (scriptText.trim() === '') {
+                alert('Please enter some text for the script.');
+                return;
+            }
+            // Save the script to a cookie for persistence
+            Cookies.set('teleprompterScript', scriptText, { expires: 365 });
+
+            $('#teleprompter-content').text(scriptText);
+            $('#scriptModal').modal('hide');
+
+            // If teleprompter isn't visible, it's the first run, so show it.
+            if (!$teleprompterView.is(':visible')) {
+                $welcomeScreen.hide();
+                $teleprompterView.show();
+            }
+
+            // Always reset the state after saving new text
+            stopScrolling();
+            $contentWrapper.scrollTop(0);
+            $pauseResumeBtn.text('Start').removeClass('btn-warning').addClass('btn-success');
+        });
+
+        // Pause/Resume button
+        $pauseResumeBtn.on('click', function() {
+            if (isPaused) {
+                startScrolling();
+            } else {
+                stopScrolling();
+            }
+        });
+
+        // Speed control buttons
+        $('.controls .btn-info').on('click', function() {
+            const speedKey = $(this).attr('id').replace('speed', '').toLowerCase();
+            currentSpeed = speeds[speedKey];
+            Cookies.set('teleprompterSpeed', currentSpeed, { expires: 365 }); // Save preference
+            updateSpeedUI();
+
+            // If it's not paused, restart the scrolling with the new speed
+            if (!isPaused) {
+                startScrolling();
+            }
+        });
+
+        // Reset button
+        $('#reset').on('click', function() {
+            stopScrolling();
+            $contentWrapper.scrollTop(0); // Scroll back to the top
+            $pauseResumeBtn.text('Start').removeClass('btn-warning').addClass('btn-success');
+        });
+
+        // Edit Script button
+        $('#editScript').on('click', function() {
+            stopScrolling();
+            // Ensure the modal has the latest text from the prompter
+            $('#scriptInput').val($('#teleprompter-content').text());
+            $('#scriptModal').modal('show');
+        });
+
+        // Exit button
+        $('#exit').on('click', function() {
+            stopScrolling();
+            $contentWrapper.scrollTop(0);
+            $teleprompterView.hide();
+            $welcomeScreen.show();
+            $pauseResumeBtn.text('Start').removeClass('btn-warning').addClass('btn-success');
+        });
+
+        // Allow keyboard control
+        $(document).on('keydown', function(e) {
+            // Only control if the teleprompter is visible
+            if ($teleprompterView.is(':visible')) {
+                // Space bar for pause/resume
+                if (e.keyCode === 32) {
+                    e.preventDefault(); // Prevent page from scrolling
+                    $pauseResumeBtn.click();
+                }
+                // Arrow up to scroll up (rewind)
+                if (e.keyCode === 38) {
+                    e.preventDefault();
+                    $contentWrapper.scrollTop($contentWrapper.scrollTop() - 30);
+                }
+                // Arrow down to scroll down (fast forward)
+                if (e.keyCode === 40) {
+                    e.preventDefault();
+                    $contentWrapper.scrollTop($contentWrapper.scrollTop() + 30);
+                }
+            }
+        });
+
+    });
+    </script>
+</body>
+</html>
+
+
