commit 513913c750cc9bd1c896a5fdc83a553548615f0f
Author: root <root@hub.scroll.pub>
Date: 2025-01-07 08:46:55 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0943efc
--- /dev/null
+++ b/body.html
@@ -0,0 +1,33 @@
+<header>
+ <h1>Find Your Webmail Login</h1>
+ <p class="tagline">Access your email provider's login page instantly</p>
+</header>
+
+<main>
+ <section class="search-container">
+ <form id="emailForm" aria-label="Email search form">
+ <div class="input-group">
+ <label for="emailInput">Enter your email address:</label>
+ <input type="email" id="emailInput" placeholder="you@example.com" required>
+ </div>
+ <button type="submit" class="search-button">
+ <span class="button-text">Find Login Page</span>
+ <span class="button-icon">→</span>
+ </button>
+ </form>
+ </section>
+
+ <section id="result" class="result-container" aria-live="polite">
+ <!-- Results will be inserted here via JavaScript -->
+ </section>
+</main>
+
+<footer>
+ <nav>
+ <ul>
+ <li><a href="/privacy">Privacy Policy</a></li>
+ <li><a href="/terms">Terms of Use</a></li>
+ <li><a href="/contact">Contact</a></li>
+ </ul>
+ </nav>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..f56f959
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://findmail.scroll.pub
+metaTags
+ title Find Your Webmail Login Page
+ description Quickly locate and access your webmail login page by entering your email address
+ keywords webmail, login, email access, mail login finder
+editButton /edit.html
+title Find Your Webmail Login
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..9bcccf1
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_015pusMRJWgCtCMKVTNa4H9s",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website that helps users find and access webmail login pages. Here's a suitable domain name and implementation:\n\n---domain---\nfindmail.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://findmail.scroll.pub\nmetaTags\n title Find Your Webmail Login Page\n description Quickly locate and access your webmail login page by entering your email address\n keywords webmail, login, email access, mail login finder\neditButton /edit.html\ntitle Find Your Webmail Login\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Find Your Webmail Login</h1>\n <p class=\"tagline\">Access your email provider's login page instantly</p>\n</header>\n\n<main>\n <section class=\"search-container\">\n <form id=\"emailForm\" aria-label=\"Email search form\">\n <div class=\"input-group\">\n <label for=\"emailInput\">Enter your email address:</label>\n <input type=\"email\" id=\"emailInput\" placeholder=\"you@example.com\" required>\n </div>\n <button type=\"submit\" class=\"search-button\">\n <span class=\"button-text\">Find Login Page</span>\n <span class=\"button-icon\">→</span>\n </button>\n </form>\n </section>\n\n <section id=\"result\" class=\"result-container\" aria-live=\"polite\">\n <!-- Results will be inserted here via JavaScript -->\n </section>\n</main>\n\n<footer>\n <nav>\n <ul>\n <li><a href=\"/privacy\">Privacy Policy</a></li>\n <li><a href=\"/terms\">Terms of Use</a></li>\n <li><a href=\"/contact\">Contact</a></li>\n </ul>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2d5ff3;\n --secondary-color: #17bcb4;\n --background-color: #f8faff;\n --text-color: #2c3e50;\n --shadow-color: rgba(45, 95, 243, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 4rem 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease-out;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\nmain {\n flex: 1;\n padding: 2rem 1rem;\n max-width: 800px;\n margin: 0 auto;\n width: 100%;\n}\n\n.search-container {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 10px 30px var(--shadow-color);\n transform: translateY(-2rem);\n}\n\n.input-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 1rem;\n border: 2px solid #e1e5ee;\n border-radius: 0.5rem;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n}\n\ninput:focus {\n outline: none;\n border-color: var(--primary-color);\n}\n\n.search-button {\n width: 100%;\n padding: 1rem;\n background: var(--primary-color);\n color: white;\n border: none;\n border-radius: 0.5rem;\n font-size: 1rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.search-button:hover {\n background: var(--secondary-color);\n transform: translateY(-2px);\n}\n\n.result-container {\n margin-top: 2rem;\n padding: 1rem;\n border-radius: 0.5rem;\n background: white;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.3s ease, transform 0.3s ease;\n}\n\n.result-container.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\nfooter {\n margin-top: auto;\n padding: 2rem;\n background: white;\n text-align: center;\n}\n\nfooter ul {\n list-style: none;\n display: flex;\n justify-content: center;\n gap: 2rem;\n}\n\nfooter a {\n color: var(--text-color);\n text-decoration: none;\n transition: color 0.2s ease;\n}\n\nfooter a:hover {\n color: var(--primary-color);\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n .search-container {\n padding: 1.5rem;\n }\n \n footer ul {\n flex-direction: column;\n gap: 1rem;\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const emailForm = document.getElementById('emailForm');\n const resultContainer = document.getElementById('result');\n\n emailForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n const email = document.getElementById('emailInput').value;\n const domain = email.split('@')[1];\n\n if (!domain) {\n showResult('Please enter a valid email address.');\n return;\n }\n\n try {\n const webmailUrl = await findWebmailUrl(domain);\n showResult(`\n <h2>Webmail Login Found</h2>\n <p>We found the login page for ${domain}:</p>\n <a href=\"${webmailUrl}\" target=\"_blank\" class=\"search-button\">\n <span class=\"button-text\">Go to Login Page</span>\n <span class=\"button-icon\">↗</span>\n </a>\n `);\n } catch (error) {\n showResult('Sorry, we couldn\\'t find the webmail login page for this domain.');\n }\n });\n\n function showResult(content) {\n resultContainer.innerHTML = content;\n resultContainer.classList.remove('visible');\n // Force reflow\n void resultContainer.offsetWidth;\n resultContainer.classList.add('visible');\n }\n\n async function findWebmailUrl(domain) {\n // Common webmail patterns\n const patterns = {\n 'gmail.com': 'https://mail.google.com',\n 'yahoo.com': 'https://mail.yahoo.com',\n 'outlook.com': 'https://outlook.live.com',\n 'hotmail.com': 'https://outlook.live.com',\n 'aol.com': 'https://mail.aol.com'\n };\n\n if (patterns[domain]) {\n return patterns[domain];\n }\n\n // For custom domains, try common webmail paths\n return `https://webmail.${domain}`;\n }\n});\n\n---end---\n\nThis implementation provides:\n\n1. A beautiful, gradient-based header with smooth animations\n2. A floating search card with subtle shadows\n3. Smooth transitions and hover effects\n4. Fully responsive design\n5. Accessibility features including ARIA labels\n6. Clean, semantic HTML structure\n7. Modern CSS with custom properties\n8. Error handling and user feedback\n9. Common webmail provider detection\n10. Proper meta tags for SEO\n\nThe site looks professional while maintaining simplicity and usability. The animations and transitions add polish without being overwhelming. The color scheme is modern and trustworthy, using blue tones that are associated with reliability and professionalism."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 296,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2220
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..a6b888a
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# findmail.scroll.pub
+Website generated by Claude from prompt: create a website that takes an input of an email, and finds the webmail login page, then display the webmail login page
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..1a51138
--- /dev/null
+++ b/script.js
@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const emailForm = document.getElementById('emailForm');
+ const resultContainer = document.getElementById('result');
+
+ emailForm.addEventListener('submit', async (e) => {
+ e.preventDefault();
+ const email = document.getElementById('emailInput').value;
+ const domain = email.split('@')[1];
+
+ if (!domain) {
+ showResult('Please enter a valid email address.');
+ return;
+ }
+
+ try {
+ const webmailUrl = await findWebmailUrl(domain);
+ showResult(`
+ <h2>Webmail Login Found</h2>
+ <p>We found the login page for ${domain}:</p>
+ <a href="${webmailUrl}" target="_blank" class="search-button">
+ <span class="button-text">Go to Login Page</span>
+ <span class="button-icon">↗</span>
+ </a>
+ `);
+ } catch (error) {
+ showResult('Sorry, we couldn\'t find the webmail login page for this domain.');
+ }
+ });
+
+ function showResult(content) {
+ resultContainer.innerHTML = content;
+ resultContainer.classList.remove('visible');
+ // Force reflow
+ void resultContainer.offsetWidth;
+ resultContainer.classList.add('visible');
+ }
+
+ async function findWebmailUrl(domain) {
+ // Common webmail patterns
+ const patterns = {
+ 'gmail.com': 'https://mail.google.com',
+ 'yahoo.com': 'https://mail.yahoo.com',
+ 'outlook.com': 'https://outlook.live.com',
+ 'hotmail.com': 'https://outlook.live.com',
+ 'aol.com': 'https://mail.aol.com'
+ };
+
+ if (patterns[domain]) {
+ return patterns[domain];
+ }
+
+ // For custom domains, try common webmail paths
+ return `https://webmail.${domain}`;
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ab5271b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,167 @@
+:root {
+ --primary-color: #2d5ff3;
+ --secondary-color: #17bcb4;
+ --background-color: #f8faff;
+ --text-color: #2c3e50;
+ --shadow-color: rgba(45, 95, 243, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ text-align: center;
+ padding: 4rem 1rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ animation: fadeIn 1s ease-out;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+}
+
+main {
+ flex: 1;
+ padding: 2rem 1rem;
+ max-width: 800px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.search-container {
+ background: white;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 10px 30px var(--shadow-color);
+ transform: translateY(-2rem);
+}
+
+.input-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+input {
+ width: 100%;
+ padding: 1rem;
+ border: 2px solid #e1e5ee;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+}
+
+input:focus {
+ outline: none;
+ border-color: var(--primary-color);
+}
+
+.search-button {
+ width: 100%;
+ padding: 1rem;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.search-button:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+}
+
+.result-container {
+ margin-top: 2rem;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ background: white;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.result-container.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+footer {
+ margin-top: auto;
+ padding: 2rem;
+ background: white;
+ text-align: center;
+}
+
+footer ul {
+ list-style: none;
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+}
+
+footer a {
+ color: var(--text-color);
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+
+footer a:hover {
+ color: var(--primary-color);
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .search-container {
+ padding: 1.5rem;
+ }
+
+ footer ul {
+ flex-direction: column;
+ gap: 1rem;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}