Spaces:

MySafeCode
/

WhackyChatApp

Sleeping

App Files Files Community

MySafeCode commited on 17 days ago

Commit

d9bfdee

verified ·

1 Parent(s): cbfb0e7

Upload 2 files

Browse files

Files changed (2) hide show

templates/chat.html +446 -0
templates/login.html +161 -0

templates/chat.html ADDED Viewed

	@@ -0,0 +1,446 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Whacky Chat - {{ session.username }}</title>
+    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;700&family=Orbitron:wght@700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Rajdhani', sans-serif;
+            background: linear-gradient(45deg, #0f0f23, #1a1a3a, #2d1b69);
+            background-size: 400% 400%;
+            animation: gradientShift 8s ease infinite;
+            color: #fff;
+            height: 100vh;
+            overflow: hidden;
+        }
+        @keyframes gradientShift {
+            0%{background-position:0% 50%}
+            50%{background-position:100% 50%}
+            100%{background-position:0% 50%}
+        }
+        .chat-container {
+            max-width: 800px;
+            margin: 0 auto;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border: 2px solid rgba(255,255,255,0.1);
+        }
+        .header {
+            text-align: center;
+            padding: 20px;
+            border-bottom: 2px solid rgba(255,255,255,0.2);
+            margin-bottom: 20px;
+            position: relative;
+        }
+        .title {
+            font-family: 'Orbitron', monospace;
+            font-size: 2.5rem;
+            background: linear-gradient(45deg, #ff6ec4, #7873f5, #00ff88);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-shadow: 0 0 20px rgba(255,110,196,0.5);
+            animation: titleGlow 2s ease-in-out infinite alternate;
+        }
+        @keyframes titleGlow {
+            from { filter: drop-shadow(0 0 10px rgba(255,110,196,0.5)); }
+            to { filter: drop-shadow(0 0 20px rgba(120,115,245,0.8)); }
+        }
+        .user-info {
+            text-align: center;
+            margin: 10px 0;
+            padding: 10px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 10px;
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+        .user-number {
+            font-size: 1.5rem;
+            color: #00ff88;
+            text-shadow: 0 0 10px #00ff88;
+            animation: userNumberPulse 1.5s ease-in-out infinite;
+        }
+        @keyframes userNumberPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        .logout-button {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            padding: 8px 15px;
+            background: rgba(255,0,0,0.3);
+            border: 1px solid rgba(255,0,0,0.5);
+            border-radius: 5px;
+            color: #fff;
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: all 0.3s ease;
+        }
+        .logout-button:hover {
+            background: rgba(255,0,0,0.5);
+            box-shadow: 0 0 10px rgba(255,0,0,0.3);
+        }
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background: rgba(0,0,0,0.2);
+            border-radius: 15px;
+            margin-bottom: 20px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .message {
+            margin: 15px 0;
+            padding: 15px;
+            border-radius: 15px;
+            background: rgba(255,255,255,0.1);
+            border: 1px solid rgba(255,255,255,0.2);
+            position: relative;
+            animation: messageSlide 0.5s ease-out;
+        }
+        @keyframes messageSlide {
+            from { transform: translateX(-100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        .message.own {
+            background: linear-gradient(45deg, rgba(255,110,196,0.3), rgba(120,115,245,0.3));
+            border: 1px solid rgba(255,110,196,0.5);
+            text-align: right;
+        }
+        .message-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        .message-user {
+            font-weight: bold;
+            color: #00ff88;
+            text-shadow: 0 0 5px #00ff88;
+        }
+        .message-time {
+            font-size: 0.8rem;
+            color: rgba(255,255,255,0.6);
+        }
+        .message-content {
+            font-size: 1.1rem;
+            line-height: 1.4;
+            word-wrap: break-word;
+        }
+        .system-message {
+            text-align: center;
+            color: #ff6ec4;
+            font-style: italic;
+            margin: 10px 0;
+            animation: systemMessagePulse 2s ease-in-out infinite;
+        }
+        @keyframes systemMessagePulse {
+            0%, 100% { opacity: 0.7; }
+            50% { opacity: 1; }
+        }
+        .typing-indicator {
+            color: rgba(255,255,255,0.6);
+            font-style: italic;
+            padding: 10px;
+            margin-bottom: 10px;
+            animation: typingBlink 1s ease-in-out infinite;
+        }
+        @keyframes typingBlink {
+            0%, 100% { opacity: 0.5; }
+            50% { opacity: 1; }
+        }
+        .input-container {
+            display: flex;
+            gap: 10px;
+            padding: 20px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 15px;
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+        #messageInput {
+            flex: 1;
+            padding: 15px;
+            border: none;
+            border-radius: 10px;
+            background: rgba(0,0,0,0.3);
+            color: #fff;
+            font-size: 1rem;
+            border: 1px solid rgba(255,255,255,0.2);
+            transition: all 0.3s ease;
+        }
+        #messageInput:focus {
+            outline: none;
+            border-color: #00ff88;
+            box-shadow: 0 0 15px rgba(0,255,136,0.3);
+        }
+        #sendButton {
+            padding: 15px 25px;
+            border: none;
+            border-radius: 10px;
+            background: linear-gradient(45deg, #ff6ec4, #7873f5);
+            color: #fff;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        #sendButton:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(255,110,196,0.4);
+        }
+        #sendButton:active {
+            transform: translateY(0);
+        }
+        .connected-users {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background: rgba(0,255,136,0.2);
+            padding: 10px 15px;
+            border-radius: 20px;
+            border: 1px solid rgba(0,255,136,0.5);
+            font-size: 0.9rem;
+        }
+        .status-dot {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            background: #00ff88;
+            border-radius: 50%;
+            margin-right: 5px;
+            animation: statusGlow 2s ease-in-out infinite;
+        }
+        @keyframes statusGlow {
+            0%, 100% { box-shadow: 0 0 5px #00ff88; }
+            50% { box-shadow: 0 0 15px #00ff88, 0 0 25px #00ff88; }
+        }
+        /* Scrollbar styling */
+        .messages-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        .messages-container::-webkit-scrollbar-track {
+            background: rgba(0,0,0,0.1);
+            border-radius: 4px;
+        }
+        .messages-container::-webkit-scrollbar-thumb {
+            background: linear-gradient(45deg, #ff6ec4, #7873f5);
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="header">
+            <a href="/logout" class="logout-button">Logout</a>
+            <div class="title">WHACKY CHAT</div>
+            <div class="user-info">
+                <span id="userNumberDisplay" class="user-number">Connecting...</span>
+            </div>
+        </div>
+        <div class="connected-users">
+            <span class="status-dot"></span>
+            <span id="connectedCount">0 users online</span>
+        </div>
+        <div class="messages-container" id="messagesContainer">
+            <div id="typingIndicator" class="typing-indicator" style="display: none;">
+                Someone is typing...
+            </div>
+        </div>
+        <div class="input-container">
+            <input type="text" id="messageInput" placeholder="Type your whacky message here..." maxlength="500">
+            <button id="sendButton">SEND</button>
+        </div>
+    </div>
+    <script>
+        const socket = io();
+        let currentUserNumber = null;
+        let currentUsername = null;
+        let typingTimer;
+        // DOM elements
+        const messagesContainer = document.getElementById('messagesContainer');
+        const messageInput = document.getElementById('messageInput');
+        const sendButton = document.getElementById('sendButton');
+        const userNumberDisplay = document.getElementById('userNumberDisplay');
+        const connectedCount = document.getElementById('connectedCount');
+        const typingIndicator = document.getElementById('typingIndicator');
+        // Socket event handlers
+        socket.on('user_assigned', (data) => {
+            currentUserNumber = data.user_number;
+            currentUsername = data.username;
+            userNumberDisplay.textContent = `${currentUsername} (#${currentUserNumber})`;
+            addSystemMessage(data.message);
+        });
+        socket.on('user_joined', (data) => {
+            addSystemMessage(data.message);
+            updateConnectedCount(data.total_users);
+        });
+        socket.on('user_left', (data) => {
+            addSystemMessage(data.message);
+            updateConnectedCount(data.total_users);
+        });
+        socket.on('new_message', (data) => {
+            addMessage(data.user_number, data.username, data.message, data.timestamp);
+        });
+        socket.on('user_typing', (data) => {
+            showTypingIndicator(data.user_number, data.username);
+        });
+        // Message functions
+        function addMessage(userNumber, username, message, timestamp) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message' + (userNumber === currentUserNumber ? ' own' : '');
+            const time = timestamp ? new Date(timestamp).toLocaleTimeString() : new Date().toLocaleTimeString();
+            messageDiv.innerHTML = `
+                <div class="message-header">
+                    <span class="message-user">${username} (#${userNumber})</span>
+                    <span class="message-time">${time}</span>
+                </div>
+                <div class="message-content">${escapeHtml(message)}</div>
+            `;
+            messagesContainer.insertBefore(messageDiv, typingIndicator);
+            scrollToBottom();
+        }
+        function addSystemMessage(message) {
+            const systemDiv = document.createElement('div');
+            systemDiv.className = 'system-message';
+            systemDiv.textContent = message;
+            messagesContainer.insertBefore(systemDiv, typingIndicator);
+            scrollToBottom();
+        }
+        function showTypingIndicator(userNumber, username) {
+            typingIndicator.textContent = `${username} is typing...`;
+            typingIndicator.style.display = 'block';
+            clearTimeout(typingTimer);
+            typingTimer = setTimeout(() => {
+                typingIndicator.style.display = 'none';
+            }, 2000);
+        }
+        function updateConnectedCount(count) {
+            connectedCount.textContent = `${count} user${count !== 1 ? 's' : ''} online`;
+        }
+        function scrollToBottom() {
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        // Send message
+        function sendMessage() {
+            const message = messageInput.value.trim();
+            if (message && currentUserNumber) {
+                socket.emit('send_message', {
+                    message: message,
+                    timestamp: new Date().toISOString()
+                });
+                messageInput.value = '';
+                typingIndicator.style.display = 'none';
+            }
+        }
+        // Event listeners
+        sendButton.addEventListener('click', sendMessage);
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            } else {
+                // Emit typing event
+                socket.emit('typing', {});
+            }
+        });
+        // Initial focus
+        messageInput.focus();
+    </script>
+</body>
+</html>
+```
+## 🚀 **How to set up:**
+1. **Create a new folder** for your project
+2. **Save each file** with the exact names I provided above
+3. **Create a `templates` subfolder** and put the HTML files there
+4. **Run the setup:**
+   ```bash
+   pip install -r requirements.txt
+   python app.py
+   ```
+5. **Open your browser** to `http://localhost:5000`
+The whacky chat app should now work perfectly with the login system and two-digit user numbers! 🎉
+**Note:** I can't create actual download links, but you can easily copy-paste each file. If you need help creating a ZIP file manually, let me know!

templates/login.html ADDED Viewed

	@@ -0,0 +1,161 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Whacky Chat - Login</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;700&family=Orbitron:wght@700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Rajdhani', sans-serif;
+            background: linear-gradient(45deg, #0f0f23, #1a1a3a, #2d1b69);
+            background-size: 400% 400%;
+            animation: gradientShift 8s ease infinite;
+            color: #fff;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        @keyframes gradientShift {
+            0%{background-position:0% 50%}
+            50%{background-position:100% 50%}
+            100%{background-position:0% 50%}
+        }
+        .login-container {
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border: 2px solid rgba(255,255,255,0.1);
+            border-radius: 20px;
+            padding: 40px;
+            text-align: center;
+            max-width: 400px;
+            width: 90%;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        }
+        .title {
+            font-family: 'Orbitron', monospace;
+            font-size: 2.5rem;
+            background: linear-gradient(45deg, #ff6ec4, #7873f5, #00ff88);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-shadow: 0 0 20px rgba(255,110,196,0.5);
+            margin-bottom: 30px;
+            animation: titleGlow 2s ease-in-out infinite alternate;
+        }
+        @keyframes titleGlow {
+            from { filter: drop-shadow(0 0 10px rgba(255,110,196,0.5)); }
+            to { filter: drop-shadow(0 0 20px rgba(120,115,245,0.8)); }
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            color: rgba(255,255,255,0.8);
+            margin-bottom: 30px;
+        }
+        .form-group {
+            margin-bottom: 25px;
+        }
+        .form-input {
+            width: 100%;
+            padding: 15px;
+            border: 2px solid rgba(255,255,255,0.2);
+            border-radius: 10px;
+            background: rgba(0,0,0,0.3);
+            color: #fff;
+            font-size: 1.1rem;
+            transition: all 0.3s ease;
+        }
+        .form-input:focus {
+            outline: none;
+            border-color: #00ff88;
+            box-shadow: 0 0 15px rgba(0,255,136,0.3);
+        }
+        .form-input::placeholder {
+            color: rgba(255,255,255,0.5);
+        }
+        .login-button {
+            width: 100%;
+            padding: 15px;
+            border: none;
+            border-radius: 10px;
+            background: linear-gradient(45deg, #ff6ec4, #7873f5);
+            color: #fff;
+            font-size: 1.1rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .login-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(255,110,196,0.4);
+        }
+        .login-button:active {
+            transform: translateY(0);
+        }
+        .info-text {
+            margin-top: 20px;
+            color: rgba(255,255,255,0.6);
+            font-size: 0.9rem;
+        }
+        .user-number-info {
+            background: rgba(0,255,136,0.2);
+            padding: 15px;
+            border-radius: 10px;
+            border: 1px solid rgba(0,255,136,0.5);
+            margin: 20px 0;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="title">WHACKY CHAT</div>
+        <div class="subtitle">Enter the Whacky Zone</div>
+        <form method="POST" action="/login">
+            <div class="form-group">
+                <input type="text"
+                       name="username"
+                       class="form-input"
+                       placeholder="Enter your username"
+                       required
+                       maxlength="20">
+            </div>
+            <button type="submit" class="login-button">JOIN CHAT</button>
+        </form>
+        <div class="user-number-info">
+            You'll be assigned a unique two-digit user number (01, 02, 03...)
+        </div>
+        <div class="info-text">
+            No password needed - just pick a username and join the fun!
+        </div>
+    </div>
+</body>
+</html>