Changes to findmail.scroll.pub

root
root
15 days ago
Initial commit
body.html
Changed around line 1
+
+

Find Your Webmail Login

+

Access your email provider's login page instantly

+
+
+
+
+
+
+
+
+
+
+ Find Login Page
+ →
+
+
+
+
+
+
+
+
+
+
+
+
    +
  • Privacy Policy
    • +
  • Terms of Use
    • +
  • Contact
    • +
    +
    +
    index.scroll
    Changed around line 1
    + 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
    prompt.json
    Changed around line 1
    + {
    + "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
    \n

    Find Your Webmail Login

    \n

    Access your email provider's login page instantly

    \n
    \n\n
    \n
    \n
    \n
    \n \n \n
    \n \n
    \n
    \n\n
    \n \n
    \n
    \n\n\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

    Webmail Login Found

    \n

    We found the login page for ${domain}:

    \n \n Go to Login Page\n ↗\n \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
    + }
    + }
    readme.scroll
    Changed around line 1
    + # 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
    script.js
    Changed around line 1
    + 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(`
    +

    Webmail Login Found

    +

    We found the login page for ${domain}:

    +
    + Go to Login Page
    + ↗
    +
    + `);
    + } 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}`;
    + }
    + });
    style.css
    Changed around line 1
    + :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);
    + }
    + }