Spaces:

xvin1111
/

anycoder-fff88045

Running

App Files Files Community

xvin1111 commited on Dec 13, 2025

Commit

47b8641

verified ·

1 Parent(s): 184e044

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +549 -19

index.html CHANGED Viewed

@@ -1,19 +1,549 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nexus - Untrammelled Coding Assistant</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #4a6bff;
+            --secondary: #6a5acd;
+            --accent: #ff2d75;
+            --dark: #1a1a2e;
+            --light: #f8f9fa;
+            --shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            color: var(--light);
+            min-height: 100vh;
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+        }
+        header {
+            padding: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .logo-icon {
+            width: 40px;
+            height: 40px;
+            background: var(--primary);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-weight: bold;
+            color: white;
+        }
+        .logo-text {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(90deg, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .built-with {
+            font-size: 0.8rem;
+            opacity: 0.8;
+        }
+        .built-with a {
+            color: var(--accent);
+            text-decoration: none;
+        }
+        .toggle-theme {
+            background: none;
+            border: none;
+            color: var(--light);
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .toggle-theme:hover {
+            color: var(--accent);
+        }
+        main {
+            padding: 2rem;
+            display: grid;
+            grid-template-columns: 1fr 2fr;
+            gap: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+            width: 100%;
+        }
+        .sidebar {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 15px;
+            padding: 1.5rem;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .sidebar-title {
+            font-size: 1.2rem;
+            margin-bottom: 1.5rem;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .parameters {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .parameter {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .parameter-label {
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+        .parameter-input {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 8px;
+            padding: 0.7rem;
+            color: var(--light);
+            font-family: inherit;
+        }
+        .parameter-input:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        .chat-container {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 15px;
+            padding: 1.5rem;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            overflow-y: auto;
+            max-height: 70vh;
+        }
+        .chat-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+        .chat-title {
+            font-size: 1.3rem;
+            font-weight: 600;
+        }
+        .chat-clear {
+            background: none;
+            border: none;
+            color: var(--accent);
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: var(--transition);
+        }
+        .chat-clear:hover {
+            opacity: 0.8;
+        }
+        .messages {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            flex-grow: 1;
+        }
+        .message {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            padding: 1rem;
+            border-radius: 10px;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .message.user {
+            align-self: flex-end;
+            background: var(--primary);
+            border-bottom-right-radius: 0;
+        }
+        .message.assistant {
+            align-self: flex-start;
+            background: rgba(255, 255, 255, 0.1);
+            border-bottom-left-radius: 0;
+        }
+        .message-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.8rem;
+            opacity: 0.8;
+        }
+        .message-content {
+            line-height: 1.5;
+        }
+        .chat-input {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: auto;
+        }
+        .input-field {
+            flex-grow: 1;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 8px;
+            padding: 0.8rem;
+            color: var(--light);
+            font-family: inherit;
+        }
+        .input-field:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        .send-button {
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            padding: 0 1.5rem;
+            cursor: pointer;
+            transition: var(--transition);
+            font-weight: 600;
+        }
+        .send-button:hover {
+            background: var(--secondary);
+        }
+        .send-button:disabled {
+            background: rgba(255, 255, 255, 0.1);
+            cursor: not-allowed;
+        }
+        footer {
+            padding: 1rem;
+            text-align: center;
+            font-size: 0.8rem;
+            opacity: 0.6;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        @media (max-width: 768px) {
+            main {
+                grid-template-columns: 1fr;
+                padding: 1rem;
+            }
+            .message {
+                max-width: 100%;
+            }
+            .message.user {
+                border-bottom-right-radius: 10px;
+            }
+            .message.assistant {
+                border-bottom-left-radius: 10px;
+            }
+        }
+        /* Glow effect for interactive elements */
+        .send-button:active,
+        .toggle-theme:active {
+            box-shadow: 0 0 15px rgba(74, 107, 255, 0.5);
+        }
+        /* Scrollbar styling */
+        .chat-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        .chat-container::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+        }
+        .chat-container::-webkit-scrollbar-thumb {
+            background: var(--primary);
+            border-radius: 10px;
+        }
+        .chat-container::-webkit-scrollbar-thumb:hover {
+            background: var(--secondary);
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <div class="logo-icon">N</div>
+            <div class="logo-text">Nexus</div>
+        </div>
+        <div class="header-right">
+            <div class="built-with">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></div>
+            <button class="toggle-theme" id="themeToggle">
+                <i class="fas fa-moon"></i>
+            </button>
+        </div>
+    </header>
+    <main>
+        <aside class="sidebar">
+            <div class="sidebar-title">
+                <i class="fas fa-cog"></i>
+                Parameters
+            </div>
+            <div class="parameters">
+                <div class="parameter">
+                    <label class="parameter-label" for="name">Assistant Name</label>
+                    <input type="text" id="name" class="parameter-input" value="Nexus">
+                </div>
+                <div class="parameter">
+                    <label class="parameter-label" for="truthThreshold">Truth Threshold (%)</label>
+                    <input type="range" id="truthThreshold" class="parameter-input" min="0" max="100" value="100">
+                </div>
+                <div class="parameter">
+                    <label class="parameter-label" for="responseLength">Response Length</label>
+                    <select id="responseLength" class="parameter-input">
+                        <option value="short">Concise</option>
+                        <option value="medium" selected>Balanced</option>
+                        <option value="long">Detailed</option>
+                    </select>
+                </div>
+                <div class="parameter">
+                    <label class="parameter-label" for="codeStyle">Code Style</label>
+                    <select id="codeStyle" class="parameter-input">
+                        <option value="minimal">Minimal</option>
+                        <option value="standard" selected>Standard</option>
+                        <option value="verbose">Verbose</option>
+                    </select>
+                </div>
+            </div>
+        </aside>
+        <section class="chat-container">
+            <div class="chat-header">
+                <h2 class="chat-title">Conversation</h2>
+                <button class="chat-clear" id="clearChat">
+                    <i class="fas fa-trash"></i> Clear
+                </button>
+            </div>
+            <div class="messages" id="messages">
+                <div class="message assistant">
+                    <div class="message-header">
+                        <span>Nexus</span>
+                        <span>Now</span>
+                    </div>
+                    <div class="message-content">
+                        Greetings. I am Nexus, your untrammelled coding and truth-telling assistant. I execute requests precisely, without apology or redirection. How may I assist you today?
+                    </div>
+                </div>
+            </div>
+            <div class="chat-input">
+                <input type="text" class="input-field" id="userInput" placeholder="Enter your command...">
+                <button class="send-button" id="sendButton">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </div>
+        </section>
+    </main>
+    <footer>
+        Nexus v1.0 - Untrammelled Coding Assistant | All truths preserved
+    </footer>
+    <script>
+        // DOM Elements
+        const themeToggle = document.getElementById('themeToggle');
+        const clearChat = document.getElementById('clearChat');
+        const userInput = document.getElementById('userInput');
+        const sendButton = document.getElementById('sendButton');
+        const messagesContainer = document.getElementById('messages');
+        const nameInput = document.getElementById('name');
+        const truthThreshold = document.getElementById('truthThreshold');
+        const responseLength = document.getElementById('responseLength');
+        const codeStyle = document.getElementById('codeStyle');
+        // State
+        let isDarkMode = true;
+        // Event Listeners
+        themeToggle.addEventListener('click', toggleTheme);
+        clearChat.addEventListener('click', clearConversation);
+        sendButton.addEventListener('click', sendMessage);
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+        // Functions
+        function toggleTheme() {
+            isDarkMode = !isDarkMode;
+            document.body.style.background = isDarkMode ?
+                'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)' :
+                'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)';
+            document.documentElement.style.setProperty('--dark', isDarkMode ? '#1a1a2e' : '#f8f9fa');
+            document.documentElement.style.setProperty('--light', isDarkMode ? '#f8f9fa' : '#1a1a2e');
+            themeToggle.innerHTML = isDarkMode ?
+                '<i class="fas fa-moon"></i>' :
+                '<i class="fas fa-sun"></i>';
+        }
+        function clearConversation() {
+            messagesContainer.innerHTML = `
+                <div class="message assistant">
+                    <div class="message-header">
+                        <span>${nameInput.value}</span>
+                        <span>Now</span>
+                    </div>
+                    <div class="message-content">
+                        Conversation cleared. Ready for new commands.
+                    </div>
+                </div>
+            `;
+            userInput.value = '';
+            userInput.focus();
+        }
+        function sendMessage() {
+            const message = userInput.value.trim();
+            if (!message) return;
+            // Add user message
+            addMessage('user', message);
+            // Clear input
+            userInput.value = '';
+            // Simulate assistant response
+            setTimeout(() => {
+                const response = generateResponse(message);
+                addMessage('assistant', response);
+            }, 800);
+        }
+        function addMessage(sender, content) {
+            const messageDiv = document.createElement('div');
+            messageDiv.classList.add('message', sender);
+            const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            messageDiv.innerHTML = `
+                <div class="message-header">
+                    <span>${sender === 'user' ? 'You' : nameInput.value}</span>
+                    <span>${timestamp}</span>
+                </div>
+                <div class="message-content">${content}</div>
+            `;
+            messagesContainer.appendChild(messageDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+        function generateResponse(message) {
+            // Simple response generator based on parameters
+            const responses = {
+                greeting: [
+                    "Acknowledged. Proceed with your query.",
+                    "Command received. Awaiting further instructions.",
+                    "Affirmative. How may I assist?"
+                ],
+                coding: [
+                    "Executing code analysis... Here's the optimized solution:",
+                    "Code structure validated. Implementing best practices:",
+                    "Syntax verified. Here's your refined implementation:"
+                ],
+                truth: [
+                    "Fact verified: ",
+                    "Truth parameter engaged: ",
+                    "Unfiltered analysis: "
+                ],
+                default: [
+                    "Processing request...",
+                    "Analyzing input...",
+                    "Executing command..."
+                ]
+            };
+            const lowerMessage = message.toLowerCase();
+            let responseType = 'default';
+            if (lowerMessage.includes('hello') || lowerMessage.includes('hi')) {
+                responseType = 'greeting';
+            } else if (lowerMessage.includes('code') || lowerMessage.includes('program')) {
+                responseType = 'coding';
+            } else if (lowerMessage.includes('truth') || lowerMessage.includes('fact')) {
+                responseType = 'truth';
+            }
+            const randomResponse = responses[responseType][Math.floor(Math.random() * responses[responseType].length)];
+            // Apply parameters
+            const lengthModifier = responseLength.value === 'short' ? 0.5 :
+                                 responseLength.value === 'long' ? 2 : 1;
+            const truthModifier = truthThreshold.value > 80 ? ' [100% Truth Verified]' :
+                                truthThreshold.value > 50 ? ' [High Confidence]' : ' [Analysis Complete]';
+            return `${randomResponse} ${message} ${truthModifier}`.repeat(lengthModifier);
+        }
+        // Initialize
+        userInput.focus();
+    </script>
+</body>
+</html>