Update index.html

index.html

@@ -4,179 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Slide Viewer with Grok Chat</title>
-    <style>
-        /* General styling */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: Arial, sans-serif;
-            display: flex;
-            flex-direction: row;
-            min-height: 100vh;
-            background-color: #000;
-            color: #fff;
-        }
-        /* Sidebar styling */
-        .sidebar {
-            width: 60px;
-            background-color: #333;
-            color: white;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 10px 0;
-        }
-        .prompt-icon {
-            margin-top: 100px;
-            cursor: pointer;
-            text-align: center;
-        }
-        .prompt-icon img {
-            width: 32px;
-            height: 32px;
-            margin-bottom: 5px;
-        }
-        .prompt-icon span {
-            font-size: 12px;
-            display: block;
-        }
-        /* Main content styling */
-        .container {
-            flex: 1;
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .top-bar {
-            position: absolute;
-            top: 0;
-            width: 100%;
-            background-color: #444;
-            color: white;
-            text-align: center;
-            padding: 10px;
-            z-index: 10;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        .top-bar h1 {
-            flex: 1;
-            text-align: center;
-        }
-        .nav-buttons {
-            display: flex;
-            gap: 10px;
-        }
-        .nav-buttons button {
-            background-color: #666;
-            color: white;
-            border: none;
-            padding: 10px;
-            font-size: 18px;
-            cursor: pointer;
-        }
-        .nav-buttons button:hover {
-            background-color: #888;
-        }
-        .main {
-            display: flex;
-            height: 100%;
-        }
-        .content {
-            flex: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            background-color: #000;
-        }
-        .content img {
-            max-width: 100%;
-            max-height: 100%;
-            object-fit: contain;
-            display: block;
-        }
-        /* Prompt box styling */
-        .prompt-box {
-            position: absolute;
-            top: 10%;
-            left: 10%;
-            background-color: rgba(255, 255, 255, 0.9);
-            color: #333;
-            padding: 15px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            display: none;
-            z-index: 20;
-        }
-        .prompt-box textarea {
-            width: 100%;
-            height: 60px;
-            margin-bottom: 10px;
-            padding: 10px;
-            font-size: 14px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-        }
-        .prompt-box button {
-            padding: 5px 10px;
-            font-size: 14px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        /* Response box styling */
-        .response-box {
-            position: absolute;
-            top: 30%;
-            left: 10%;
-            background-color: rgba(255, 255, 255, 0.9);
-            color: #333;
-            padding: 15px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            display: none;
-            z-index: 20;
-        }
-        .response-box h1, .response-box h2, .response-box h3 {
-            color: #007bff;
-        }
-        .response-box p {
-            font-size: 16px;
-            line-height: 1.5;
-        }
-        .response-box ul {
-            margin: 10px 0;
-            padding-left: 20px;
-        }
-        .response-box ul li {
-            list-style-type: disc;
-            margin-bottom: 5px;
-        }
-        .response-box a {
-            color: #007bff;
-            text-decoration: none;
-        }
-        .response-box a:hover {
-            text-decoration: underline;
-        }
-        .response-box code {
-            font-family: monospace;
-            background-color: #f0f0f0;
-            padding: 2px 4px;
-            border-radius: 3px;
-        }
-    </style>
+    <link rel="stylesheet" href="styles.css">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 </head>
 <body>