Spaces:

Sazzz02
/

MAILER

Runtime error

App Files Files Community

Sazzz02 commited on Aug 24, 2025

Commit

3fa5f5a

verified ·

1 Parent(s): 552a5d5

Create robot_ui.html

Browse files

Files changed (1) hide show

robot_ui.html +257 -0

robot_ui.html ADDED Viewed

	@@ -0,0 +1,257 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Cold Email Generator</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
+        :root {
+            --bg-color: #1a1a2e;
+            --container-color: #162447;
+            --text-color: #e4e4e4;
+            --accent-color: #e94560;
+            --form-bg: #2d3b5b;
+            --input-border: #4a5b7d;
+        }
+        body {
+            font-family: 'Roboto Mono', monospace;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            text-align: center;
+        }
+        .container {
+            width: 90%;
+            max-width: 800px;
+            padding: 40px;
+            background-color: var(--container-color);
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease-in-out;
+            border: 2px solid var(--input-border);
+        }
+        .robot-container {
+            position: relative;
+            margin-bottom: 50px;
+        }
+        .robot-head {
+            width: 80px;
+            height: 60px;
+            background-color: var(--form-bg);
+            border: 3px solid var(--accent-color);
+            border-radius: 10px 10px 20px 20px;
+            margin: 0 auto;
+            position: relative;
+            animation: float 2s ease-in-out infinite;
+        }
+        .robot-head::before, .robot-head::after {
+            content: '';
+            position: absolute;
+            top: 20px;
+            width: 12px;
+            height: 12px;
+            background-color: var(--accent-color);
+            border-radius: 50%;
+            animation: blink 3s infinite;
+        }
+        .robot-head::before { left: 15px; }
+        .robot-head::after { right: 15px; }
+        .chat-bubble {
+            background-color: var(--form-bg);
+            color: var(--text-color);
+            padding: 20px;
+            border-radius: 10px;
+            position: relative;
+            margin-top: 20px;
+            font-size: 1.1em;
+            text-align: left;
+            border: 1px solid var(--input-border);
+            animation: popin 0.5s ease-out;
+        }
+        .chat-bubble::after {
+            content: '';
+            position: absolute;
+            top: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-bottom: 10px solid var(--form-bg);
+        }
+        .form-container {
+            margin-top: 30px;
+            text-align: left;
+            display: none;
+            animation: fadein 1s;
+        }
+        .form-container.active, .output-container.active {
+            display: block;
+        }
+        label {
+            display: block;
+            margin-bottom: 8px;
+            color: var(--accent-color);
+        }
+        input[type="text"], input[type="password"], input[type="file"] {
+            width: 100%;
+            padding: 12px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            border: 1px solid var(--input-border);
+            background-color: var(--container-color);
+            color: var(--text-color);
+            font-family: 'Roboto Mono', monospace;
+        }
+        input[type="submit"], button {
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            border-radius: 5px;
+            font-family: 'Roboto Mono', monospace;
+            font-size: 1.1em;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        input[type="submit"]:hover, button:hover {
+            background-color: #c4374b;
+        }
+        .output-container {
+            margin-top: 40px;
+            text-align: left;
+            display: none;
+            animation: fadein 1s;
+        }
+        .output-container h2 {
+            color: var(--accent-color);
+        }
+        pre {
+            background-color: #0d1222;
+            padding: 20px;
+            border-radius: 10px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            border: 1px solid var(--input-border);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        @keyframes blink {
+            0%, 50%, 100% { transform: scaleY(1); }
+            52%, 98% { transform: scaleY(0.1); }
+        }
+        @keyframes fadein {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes popin {
+            from { transform: scale(0.8); opacity: 0; }
+            to { transform: scale(1); opacity: 1; }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="robot-container">
+            <div class="robot-head"></div>
+            <div class="chat-bubble" id="chat-message">
+                Hello. I am your AI Cold Mail Generator. Please provide a job posting URL and I will draft an email.
+            </div>
+        </div>
+        <form id="input-form" class="form-container" action="/generate" method="post">
+            <label for="job_url">Job Posting URL:</label>
+            <input type="text" id="job_url" name="job_url" required>
+            <input type="submit" value="Generate Email">
+        </form>
+        <div id="output-container" class="output-container">
+            <h2>Generated Email</h2>
+            <pre id="output-content"></pre>
+            <button onclick="window.location.reload();">Start Over</button>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const formContainer = document.getElementById('input-form');
+            const chatBubble = document.getElementById('chat-message');
+            setTimeout(() => {
+                formContainer.classList.add('active');
+            }, 1500);
+            const form = document.getElementById('input-form');
+            form.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                chatBubble.textContent = "Processing your request... This may take a moment. Please wait.";
+                const formData = new FormData(form);
+                const outputContainer = document.getElementById('output-container');
+                const outputContent = document.getElementById('output-content');
+                const submitButton = form.querySelector('input[type="submit"]');
+                submitButton.disabled = true;
+                submitButton.value = "Generating...";
+                try {
+                    const response = await fetch('/generate', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const data = await response.text();
+                    if (!response.ok) {
+                        chatBubble.textContent = `Error: ${data}`;
+                        outputContent.textContent = "An error occurred. Please try again.";
+                    } else {
+                        outputContent.textContent = data;
+                        chatBubble.textContent = "Request complete! Here is your email.";
+                        formContainer.classList.remove('active');
+                        outputContainer.classList.add('active');
+                    }
+                } catch (error) {
+                    chatBubble.textContent = `An unexpected error occurred: ${error}`;
+                } finally {
+                    submitButton.disabled = false;
+                    submitButton.value = "Generate Email";
+                }
+            });
+        });
+    </script>
+</body>
+</html>