Spaces:

Chickaboo
/

gpt-4o

Running

App Files Files Community

Chickaboo commited on Jun 2

Commit

9dfcb2b

•

1 Parent(s): f164992

Update index.html

Browse files

Files changed (1) hide show

index.html +19 -463

index.html CHANGED Viewed

@@ -1,480 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GPT-4 Chat Interface</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css">
     <style>
         body {
-            font-family: 'Roboto', sans-serif;
-            background-color: #f3f4f6;
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-        .container {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            padding: 20px;
-            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;
-            border-radius: 20px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            line-height: 1.6;
-            word-wrap: break-word;
-            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-            position: relative;
-            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;
-            bottom: -10px;
-            left: 20px;
-            width: calc(100% - 40px);
-            height: 3px;
-            background: linear-gradient(to right, #4c51bf, #5a67d8);
-            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%;
-                padding: 12px 15px;
-                border-radius: 15px;
-            }
-        }
-        .input-container {
-            position: fixed;
-            bottom: 40px;
-            left: 40px;
-            right: 40px;
-            background: linear-gradient(135deg, #f8f8f8 0%, #e4e4e4 100%);
-            border-radius: 40px;
-            padding: 20px;
             display: flex;
             align-items: center;
-            gap: 15px;
-            box-shadow: 0 60px 120px rgba(0, 0, 0, 0.3);
-            transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-            z-index: 1000;
-            backdrop-filter: blur(12px);
-            border: 2px solid rgba(255, 255, 255, 0.8);
-            overflow: hidden;
-            opacity: 0.7;
-            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);
-            opacity: 1;
-            filter: blur(0px);
-            -webkit-filter: blur(0px);
-        }
-        .input-container>textarea {
-            flex: 1;
-            border: none;
-            border-radius: 20px;
-            padding: 15px;
-            font-size: 18px;
-            font-weight: 700;
-            color: #333;
-            background-color: transparent;
-            transition: all 0.7s ease;
-            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;
-            top: -2px;
-            right: -2px;
-            bottom: -2px;
-            left: -2px;
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
-            border-radius: inherit;
-            z-index: -1;
-            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;
-            outline: none;
-            font-size: 16px;
-            padding: 10px;
-        }
-        .btn-send {
-            background-color: #4c51bf;
-            color: #fff;
-            border: none;
-            border-radius: 10px;
-            padding: 10px 10px;
-            font-size: 16px;
-            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;
-            --hover-color: #2980b9;
-            --dropdown-bg: #ffffff;
-            --text-color: #2c3e50;
-            --hover-bg-color: #ecf0f1;
-            --border-radius: 16px;
-            --padding: 16px 32px;
-            --transition-duration: 0.4s;
-            --arrow-size: 16px;
-            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        /* Resetting default styles */
-        * {
-            box-sizing: border-box;
             margin: 0;
-            padding: 0;
-            font-family: var(--font-family);
-        }
-        /* Styling the dropdown button with shadow */
-        .dropbtn {
-            background-color: var(--primary-color);
-            color: #2c3e50;
-            padding: var(--padding);
-            font-size: 18px;
-            border: none;
-            cursor: pointer;
-            border-radius: var(--border-radius);
-            outline: none;
-            position: relative;
-            transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
-            padding-right: 50px;
-            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-        }
-        .dropbtn::after {
-            content: '▲';
-            font-size: var(--arrow-size);
-            position: absolute;
-            right: 16px;
-            top: 50%;
-            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;
-            background-color: var(--dropdown-bg);
-            min-width: 200px;
-            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-            z-index: 1;
-            border-radius: var(--border-radius);
-            overflow: hidden;
-            transition: all var(--transition-duration);
-        }
-        .dropdown-content a {
-            display: flex;
-            align-items: center;
-            padding: 8px 16px;
-            text-decoration: none;
-            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: 26px;
-        color: #fff;
-        background-color: #4c51bf;
-        padding: 20px;
-        border-radius: 12px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        text-align: center;
-        position: fixed;
-        top: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 1000;
-        width: 80%;
-        max-width: 600px;
-        opacity: 0;
-        transform: translateY(-20px) translateX(-50%);
-        animation: fadeIn 1s forwards;
-    }
-    @keyframes fadeIn {
-        to {
-            opacity: 1;
-            transform: translateY(0) translateX(-50%);
         }
-    }
     </style>
-</head>    <div class="container">
-        <div class="initial-message">This Space uses the real OpenAI GPT-4o model.</div>
-        <div class="message-container"></div>
     </div>
-<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/showdown@1.9.1/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;
-        }
-        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 = '';
-            }
-        });
-        userInput.addEventListener('keypress', async (event) => {
-            if (event.key === 'Enter') {
-                sendBtn.click();
-            }
-        });
-    </script>
-    </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Under Maintenance</title>
     <style>
         body {
             display: flex;
+            justify-content: center;
             align-items: center;
+            height: 100vh;
             margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: #f2f2f2;
+            color: #333;
         }
+        .container {
+            text-align: center;
         }
+        h1 {
+            font-size: 3em;
+            margin-bottom: 0.5em;
         }
+        p {
+            font-size: 1.2em;
         }
     </style>
+</head>
+<body>
+    <div class="container">
+        <h1>We are under maintenance</h1>
+        <p>Sorry for the inconvenience. We'll be back soon.</p>
     </div>
+</body>
 </html>