diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/matt-chat/index.html | 126 |
1 files changed, 125 insertions, 1 deletions
diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html index c76b6c6..8e23494 100644 --- a/html/matt-chat/index.html +++ b/html/matt-chat/index.html @@ -9,6 +9,7 @@ <link rel="icon" href="cat.png" type="image/x-icon"> <link rel="shortcut icon" href="cat.png" type="image/x-icon"> <link rel="apple-touch-icon" href="cat.png"> + <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> <style> body { font-family: Arial, sans-serif; @@ -244,6 +245,125 @@ .theme-molly-millions .bot-time { color: #005500; } + + /* Add Cloud theme */ + body.theme-cloud { + font-family: "Press Start 2P", "Courier New", monospace; + font-size: 18px; + margin: 0; + padding: 20px; + background: linear-gradient(135deg, #1a1b4b 0%, #162057 50%, #1a1b4b 100%); + color: #ffffff; + max-width: 800px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + overflow: hidden; + } + + .theme-cloud #chat-container { + background: rgba(0, 0, 32, 0.75); + border: 3px solid #4080ff; + border-radius: 3px; + padding: 1em; + margin: 0 auto; + flex: 1; + overflow-y: auto; + width: 100%; + max-height: 400px; + scroll-behavior: smooth; + box-shadow: 0 0 15px rgba(64, 128, 255, 0.3); + } + + .theme-cloud #user-input { + width: 100%; + padding: 10px; + border: 2px solid #4080ff; + background: rgba(0, 0, 32, 0.75); + color: #ffffff; + font-family: "Press Start 2P", "Courier New", monospace; + font-size: 14px; + margin-top: 10px; + box-sizing: border-box; + } + + .theme-cloud #send-button { + padding: 10px 15px; + background: linear-gradient(to bottom, #4080ff 0%, #2048c0 100%); + color: white; + border: 2px solid #2048c0; + cursor: pointer; + margin-top: 10px; + width: 100%; + font-family: "Press Start 2P", "Courier New", monospace; + font-size: 14px; + text-transform: uppercase; + text-shadow: 2px 2px #000000; + } + + .theme-cloud #send-button:hover { + background: linear-gradient(to bottom, #50a0ff 0%, #3060e0 100%); + } + + .theme-cloud .message { + white-space: pre-wrap; + margin-bottom: 10px; + padding: 1em; + border: 2px solid #4080ff; + background: rgba(0, 0, 32, 0.5); + display: block; + max-width: 100%; + font-size: 14px; + } + + .theme-cloud .user-message { + background: rgba(64, 128, 255, 0.2); + color: #ffffff; + border: 2px solid #4080ff; + text-align: right; + margin-left: 20px; + text-shadow: 1px 1px #000000; + } + + .theme-cloud .bot-message { + background: rgba(32, 64, 128, 0.2); + color: #ffffff; + border: 2px solid #4080ff; + text-align: left; + margin-right: 20px; + text-shadow: 1px 1px #000000; + } + + .theme-cloud .bot-time { + color: #80c0ff; + font-size: 12px; + text-shadow: 1px 1px #000000; + } + + .theme-cloud #counter { + color: #80c0ff !important; + text-shadow: 1px 1px #000000; + } + + .theme-cloud .model-select-container { + background: rgba(0, 0, 32, 0.75); + border: 2px solid #4080ff; + padding: 10px; + margin-bottom: 10px; + width: 100%; + box-sizing: border-box; + } + + .theme-cloud #model-select { + background: rgba(0, 0, 32, 0.75); + color: #ffffff; + border: 1px solid #4080ff; + padding: 5px; + font-family: "Press Start 2P", "Courier New", monospace; + font-size: 12px; + } </style> </head> <body> @@ -301,7 +421,8 @@ // Add this near the top with other constants const AVAILABLE_THEMES = { 'professional': 'Professional Theme', - 'molly-millions': 'Molly Millions Cyberpunk Theme' + 'molly-millions': 'Molly Millions Cyberpunk Theme', + 'cloud': 'Cloud JRPG Theme' }; // Function to handle errors @@ -779,6 +900,9 @@ Available commands:\n case 'molly-millions': metaThemeColor.setAttribute('content', '#00ff00'); break; + case 'cloud': + metaThemeColor.setAttribute('content', '#4080ff'); + break; case 'professional': default: metaThemeColor.setAttribute('content', '#007BFF'); |