Update index.html

index.html

@@ -17,7 +17,6 @@
             flex-direction: column;
             min-height: 100vh;
         }
-
         .container {
             flex: 1;
             display: flex;
@@ -26,14 +25,12 @@
             overflow-y: auto;
             scroll-behavior: smooth;
         }
-
         .message-container {
             display: flex;
             flex-direction: column;
             gap: 20px;
             align-items: flex-start;
         }
-
         .message {
             max-width: 80%;
             padding: 15px 20px;
@@ -46,12 +43,10 @@
             background: #fff;
             transition: all 0.3s ease-in-out;
         }
-
         .message:hover {
             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
             transform: translateY(-3px);
         }
-
         .message::after {
             content: '';
             position: absolute;
@@ -63,25 +58,21 @@
             opacity: 0;
             transition: opacity 0.3s ease-in-out;
         }
-
         .message:hover::after {
             opacity: 1;
         }
-
         .user-message {
             background-color: #e0f7fa;
             color: #00796b;
             align-self: flex-end;
             border-radius: 20px 20px 0 20px;
         }
-
         .bot-message {
             background-color: #4c51bf;
             color: #fff;
             align-self: flex-start;
             border-radius: 20px 20px 20px 0;
         }
-
         @media (max-width: 768px) {
             .message {
                 max-width: 90%;
@@ -89,7 +80,6 @@
                 border-radius: 15px;
             }
         }
-
         .input-container {
             position: fixed;
             bottom: 40px;
@@ -111,7 +101,6 @@
             filter: blur(1px);
             -webkit-filter: blur(1px);
         }
-
         .input-container:hover {
             box-shadow: 0 100px 200px rgba(0, 0, 0, 0.5);
             transform: translateY(-1px) scale(1.01);
@@ -119,7 +108,6 @@
             filter: blur(0px);
             -webkit-filter: blur(0px);
         }
-
         .input-container>textarea {
             flex: 1;
             border: none;
@@ -133,19 +121,15 @@
             outline: none;
             box-shadow: none;
             resize: none;
-
         }
-
         .input-container>textarea:focus {
             box-shadow: 0 0 0 4px rgba(0, 168, 255, 0.3);
         }
-
         .input-container>textarea::placeholder {
             color: #666;
             opacity: 1;
             font-weight: 500;
         }
-
         .input-container::before {
             content: '';
             position: absolute;
@@ -159,50 +143,39 @@
             transition: opacity 0.8s ease, transform 0.8s ease;
             pointer-events: none;
         }
-
         .input-container:hover::before {
             opacity: 0;
             transform: scale(1.05);
         }
-
         @keyframes pulse {
-
             0%,
             100% {
                 box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.5);
             }
-
             50% {
                 box-shadow: 0 0 0 6px rgba(0, 168, 255, 0);
             }
         }
-
         .input-container:focus-within {
             animation: pulse 2s infinite ease-in-out;
         }
-
         .input-container>textarea::-webkit-scrollbar {
             width: 8px;
         }
-
         .input-container>textarea::-webkit-scrollbar-track {
             background: #f0f0f0;
         }
-
         .input-container>textarea::-webkit-scrollbar-thumb {
             background: #bbb;
             border-radius: 8px;
             border: 2px solid #f0f0f0;
         }
-
         .input-container>textarea::-webkit-scrollbar-thumb:hover {
             background: #999;
         }
-
         .input-container>textarea::-webkit-scrollbar-corner {
             background: transparent;
         }
-
         .message-input {
             flex: 1;
             border: none;
@@ -210,7 +183,6 @@
             font-size: 16px;
             padding: 10px;
         }
-
         .btn-send {
             background-color: #4c51bf;
             color: #fff;
@@ -221,16 +193,13 @@
             cursor: pointer;
             transition: background-color 0.3s;
         }
-
         .btn-send[disabled] {
             background-color: #ccc;
             cursor: not-allowed;
         }
-
         .btn-send:hover {
             background-color: #3730a3;
         }
-
         /* Base styles */
         :root {
             --primary-color: #ffffff;
@@ -244,7 +213,6 @@
             --arrow-size: 16px;
             --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
-
         /* Resetting default styles */
         * {
             box-sizing: border-box;
@@ -252,7 +220,6 @@
             padding: 0;
             font-family: var(--font-family);
         }
-
         /* Styling the dropdown button with shadow */
         .dropbtn {
             background-color: var(--primary-color);
@@ -268,7 +235,6 @@
             padding-right: 50px;
             box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
         }
-
         .dropbtn::after {
             content: '▲';
             font-size: var(--arrow-size);
@@ -278,21 +244,17 @@
             transform: translateY(-50%);
             transition: transform var(--transition-duration), content var(--transition-duration);
         }
-
         .dropbtn.active::after {
             content: '▼';
             transform: translateY(-50%);
         }
-
         .dropbtn:hover {
             box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
         }
-
         .dropdown {
             position: relative;
             display: inline-block;
         }
-
         .dropdown-content {
             display: none;
             position: absolute;
@@ -304,7 +266,6 @@
             overflow: hidden;
             transition: all var(--transition-duration);
         }
-
         .dropdown-content a {
             display: flex;
             align-items: center;
@@ -313,205 +274,179 @@
             color: var(--text-color);
             transition: background-color var(--transition-duration);
         }
-
         .dropdown-content a .icon {
             margin-right: 8px;
             width: 24px;
             height: 24px;
         }
-
         .dropdown-content a:hover {
             background-color: var(--hover-bg-color);
         }
-
         .dropdown-content a:hover {
             background-color: var(--hover-bg-color);
         }
-
         .dropbtn:focus {
             box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
         }
-
         .dropbtn:focus:not(.active)::after {
             content: '▲';
         }
-
         .dropbtn.active:focus::after {
             content: '▼';
         }
-
-
         /* Markdown styles */
         .message-container h1 {
             font-size: 36px;
             margin-top: 24px;
             margin-bottom: 16px;
             color: #fff;
-            /* Change text color to white */
         }
-
         .message-container h2 {
             font-size: 32px;
             margin-top: 20px;
             margin-bottom: 12px;
             color: #fff;
-            /* Change text color to white */
         }
-
         .message-container h3 {
             font-size: 28px;
             margin-top: 16px;
             margin-bottom: 8px;
             color: #fff;
-            /* Change text color to white */
         }
-
         .message-container ul,
         .message-container ol {
             margin-top: 12px;
             margin-bottom: 12px;
             padding-left: 20px;
             color: #fff;
-            /* Change text color to white */
         }
-
         .message-container li {
             margin-bottom: 6px;
         }
-
         .message-container pre {
             background-color: #333;
-            /* Darken the background for better contrast */
             padding: 16px;
             border-radius: 8px;
             margin-top: 12px;
             margin-bottom: 12px;
             overflow-x: auto;
             color: #fff;
-            /* Change text color to white */
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
-
         .message-container pre code {
             display: block;
             padding: 0;
             font-size: 18px;
             color: #fff;
-            /* Change text color to white */
         }
-
         .message-container a {
             color: #007bff;
             text-decoration: none;
             border-bottom: 1px solid transparent;
             transition: border-bottom-color 0.3s;
         }
-
         .message-container a:hover {
             border-bottom-color: #007bff;
         }
-      
-        /* Support for italic and bold italic */
         .message-container em {
             font-style: italic;
         }
-
         .message-container strong {
             font-weight: bold;
         }
+        .initial-message {
+            font-size: 18px;
+            color: #4c51bf;
+            margin-bottom: 20px;
+        }
     </style>
 </head>
 
-<div class="container">
-    <div class="message-container"></div>
-</div>
-<div class="input-container">
-    <textarea type="text" id="user-input" class="message-input" placeholder="Type your message..."></textarea>
-    <button id="send-btn" class="btn-send">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
-        </svg>
-    </button>
-
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
-    <script>
-        const userInput = document.getElementById('user-input');
-        const sendBtn = document.getElementById('send-btn');
-        const chatOutput = document.querySelector('.message-container');
-        let messages = [];
-
-async function sendMessage() {
-    try {
-        sendBtn.disabled = true;
-        const response = await fetch('https://gpt4.discord.rocks/ask', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                "messages": messages,
-                "model": "gpt-4o"
-            })
-        });
-        const data = await response.json();
-        sendBtn.disabled = false;
-        return data.response;
-    } catch (error) {
-        console.error('Error sending message:', error);
-        sendBtn.disabled = false;
-        return 'Error: Failed to send message.';
-    }
-}
-
-
-        function displayMessage(message, role) {
-            const messageElement = document.createElement('div');
-            messageElement.classList.add('message', `${role}-message`);
-
-            // Parse Markdown syntax
-            const markdownParsedMessage = parseMarkdown(message);
-
-            // Set HTML content
-            messageElement.innerHTML = markdownParsedMessage;
-
-            chatOutput.appendChild(messageElement);
-            chatOutput.scrollTop = chatOutput.scrollHeight;
-        }
+<body>
+    <div class="container">
+        <div class="message-container">
+            <div class="initial-message">This is the real OpenAI GPT-4o</div>
+        </div>
+    </div>
+    <div class="input-container">
+        <textarea type="text" id="user-input" class="message-input" placeholder="Type your message..."></textarea>
+        <button id="send-btn" class="btn-send">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
+            </svg>
+        </button>
+
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
+        <script>
+            const userInput = document.getElementById('user-input');
+            const sendBtn = document.getElementById('send-btn');
+            const chatOutput = document.querySelector('.message-container');
+            let messages = [];
+
+            async function sendMessage() {
+                try {
+                    sendBtn.disabled = true;
+                    const response = await fetch('https://gpt4.discord.rocks/ask', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            "messages": messages,
+                            "model": "gpt-4o"
+                        })
+                    });
+                    const data = await response.json();
+                    sendBtn.disabled = false;
+                    return data.response;
+                } catch (error) {
+                    console.error('Error sending message:', error);
+                    sendBtn.disabled = false;
+                    return 'Error: Failed to send message.';
+                }
+            }
 
-        function parseMarkdown(message) {
-        // Initialize Showdown converter
-        const converter = new showdown.Converter({
-            // Enable all Markdown extensions
-            simplifiedAutoLink: true,
-            strikethrough: true,
-            tables: true,
-            tasklists: true,
-            literalMidWordUnderscores: true,
-        });
-        // Convert Markdown to HTML
-        return converter.makeHtml(message);
-    }
-        sendBtn.addEventListener('click', async () => {
-            const message = userInput.value.trim();
-            if (message !== '') {
-                messages.push({ "role": "user", "content": message });
-                displayMessage("> " + message, 'user');
-                const botResponse = await sendMessage();
-                messages.push({ "role": "assistant", "content": botResponse });
-                displayMessage(botResponse, 'bot');
-                userInput.value = '';
+            function displayMessage(message, role) {
+                const messageElement = document.createElement('div');
+                messageElement.classList.add('message', `${role}-message`);
+                const markdownParsedMessage = parseMarkdown(message);
+                messageElement.innerHTML = markdownParsedMessage;
+                chatOutput.appendChild(messageElement);
+                chatOutput.scrollTop = chatOutput.scrollHeight;
             }
-        });
 
-        userInput.addEventListener('keypress', async (event) => {
-            if (event.key === 'Enter') {
-                sendBtn.click();
+            function parseMarkdown(message) {
+                const converter = new showdown.Converter({
+                    simplifiedAutoLink: true,
+                    strikethrough: true,
+                    tables: true,
+                    tasklists: true,
+                    literalMidWordUnderscores: true,
+                });
+                return converter.makeHtml(message);
             }
-        });
-    </script>
 
-    </body>
+            sendBtn.addEventListener('click', async () => {
+                const message = userInput.value.trim();
+                if (message !== '') {
+                    messages.push({ "role": "user", "content": message });
+                    displayMessage("> " + message, 'user');
+                    document.querySelector('.initial-message').style.display = 'none';
+                    const botResponse = await sendMessage();
+                    messages.push({ "role": "assistant", "content": botResponse });
+                    displayMessage(botResponse, 'bot');
+                    userInput.value = '';
+                }
+            });
+
+            userInput.addEventListener('keypress', async (event) => {
+                if (event.key === 'Enter') {
+                    sendBtn.click();
+                }
+            });
+        </script>
+    </div>
+</body>
 
 </html>
-