Update playground.html

playground.html

@@ -349,6 +349,139 @@
             background-color: #555;
             color: white;
         }
+      @media screen and (max-width: 768px) {
+    body {
+        align-items: flex-start;
+        padding: 10px;
+    }
+
+    .chat-wrapper {
+        max-width: 100%;
+        height: 100vh;
+        border-radius: 16px;
+        margin: 0;
+    }
+
+    .chat-header {
+        padding: 10px 15px;
+        height: 50px;
+    }
+
+    .chat-messages {
+        padding: 10px;
+        gap: 10px;
+    }
+
+    .message {
+        max-width: 90%;
+        font-size: 13px;
+        padding: 10px 15px;
+    }
+
+    .chat-input {
+        padding: 10px;
+        height: 70px;
+    }
+
+    .chat-input input {
+        padding: 10px 14px;
+        padding-right: 40px;
+        font-size: 13px;
+    }
+
+    .send-icon {
+        width: 35px;
+        height: 35px;
+    }
+
+    .initial-input {
+        padding: 15px;
+    }
+
+    .initial-input h2 {
+        font-size: 20px;
+    }
+
+    .initial-input input {
+        padding: 12px 20px;
+        font-size: 14px;
+    }
+
+    .header-actions {
+        gap: 5px;
+    }
+
+    .model-select,
+    .clear-chat {
+        padding: 8px 10px;
+        font-size: 12px;
+    }
+
+    .watermark {
+        font-size: 8px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .chat-wrapper {
+        border-radius: 12px;
+    }
+
+    .message {
+        max-width: 95%;
+        font-size: 12px;
+        padding: 8px 12px;
+    }
+
+    .chat-input input {
+        font-size: 12px;
+    }
+
+    .header-actions {
+        flex-direction: column;
+        gap: 5px;
+    }
+
+    .model-select,
+    .clear-chat {
+        width: 100%;
+        text-align: center;
+    }
+}
+
+/* Additional responsive adjustments to existing CSS */
+* {
+    -webkit-tap-highlight-color: transparent;
+}
+
+body {
+    touch-action: manipulation;
+}
+
+input, button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+@media (hover: hover) {
+    .send-icon:hover {
+        background-color: var(--accent-color);
+        transform: translateY(-50%) scale(1.05);
+        border-radius: 15px;
+    }
+}
+
+@media (pointer: coarse) {
+    .send-icon {
+        width: 45px;
+        height: 45px;
+    }
+
+    .chat-input input {
+        font-size: 16px; /* Larger font for touch devices */
+    }
+}
     </style>
 </head>
 
@@ -361,13 +494,13 @@
                     <option value="gpt-4o-mini">GPT-4o Mini</option>
                     <option value="gpt-4o">GPT-4o</option>
                     <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
+                    <option value="searchgpt">SearchGPT(Realtime Stuff)</option>
                     <option value="claude-3-haiku">Claude 3 Haiku</option>
                     <option value="llama-3.1-8b">Llama 3.1 8B</option>
                     <option value="llama-3.1-70b">Llama 3.1 70B</option>
                     <option value="llama-3.1-405b">Llama 3.1 405b</option>
                     <option value="gemini-1.5-flash">Gemini 1.5 Flash</option>
                     <option value="gemini-pro">Gemini Pro</option>
-                    <option value="searchgpt">SearchGPT(Realtime Stuff)</option>
                     <option value="mixtral-8x7b">Mixtral 8x7b</option>
                     <option value="command-r">Command-R</option>
                     <option value="command">Command</option>
@@ -663,8 +796,5 @@
         clearChatButton.addEventListener('click', clearChat);
     </script>
 </body>
-<!-- random
-comments
-to get
-669 lines -->
+<!-- random comments to get 800 lines -->
 </html>