commit f3d4c7d558c0a6427448e821736e38777077934b
Author: ffff:64.180.84.41 <ffff:64.180.84.41@hub.scroll.pub>
Date: 2025-01-07 09:14:42 +0000
Subject: updated index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..bdd46bb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>SnapSite - Instant Website Screenshots</title>
+ <script>
+ /* This HTML was generated by 📜 Scroll v165.0.0. https://scroll.pub */
+ </script>
+ <style>
+ @media print {
+ .doNotPrint {
+ display: none !important;
+ }
+ }
+ </style>
+ <link rel="canonical" href="https://snapsite.scroll.pub/index.html" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="description" content="" />
+ <meta name="generator" content="Scroll v165.0.0" />
+ <meta
+ property="og:title"
+ content="SnapSite - Instant Website Screenshots"
+ />
+ <meta property="og:description" content="" />
+ <meta property="og:image" content="" />
+
+ <link
+ rel="source"
+ type="application/git"
+ title="Source Code Repository"
+ href="index.scroll"
+ />
+
+ <meta name="twitter:card" content="summary_large_image" />
+ </head>
+ <body>
+ <style>
+ .abstractIconButtonParser {
+ position: absolute;
+ top: 0.25rem;
+ }
+ .abstractIconButtonParser svg {
+ fill: rgba(204, 204, 204, 0.8);
+ width: 1.875rem;
+ height: 1.875rem;
+ padding: 0 7px;
+ }
+ .abstractIconButtonParser:hover svg {
+ fill: #333;
+ }</style
+ ><a
+ href="/edit.html"
+ class="doNotPrint abstractIconButtonParser"
+ style="right: 2rem"
+ ><svg
+ width="800px"
+ height="800px"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"
+ /></svg
+ ></a>
+ <link rel="stylesheet" type="text/css" href="style.css" />
+ <header>
+ <nav>
+ <div class="logo">SnapSite</div>
+ <div class="menu">
+ <a href="#" class="active">Home</a>
+ <a href="#about">About</a>
+ </div>
+ </nav>
+ </header>
+
+ <main>
+ <section class="hero">
+ <h1>Capture Any Website Screenshot</h1>
+ <p>Enter a URL below to instantly view and save website screenshots</p>
+
+ <div class="url-input">
+ <input
+ type="url"
+ id="urlInput"
+ placeholder="Enter website URL (e.g. https://example.com)"
+ aria-label="Website URL"
+ />
+ <button id="captureBtn">Capture</button>
+ </div>
+ </section>
+
+ <section class="result" id="resultSection">
+ <div class="screenshot-container">
+ <div class="loading" id="loading">
+ <div class="spinner"></div>
+ <p>Capturing screenshot...</p>
+ </div>
+ <img id="screenshotImg" alt="Website screenshot" src="/breck.png" />
+ </div>
+ <div class="actions">
+ <button id="downloadBtn" class="download-btn" hidden>
+ Download Screenshot
+ </button>
+ </div>
+ </section>
+ </main>
+
+ <footer>
+ <p>Made with ♥ by SnapSite</p>
+ </footer>
+
+ <script src="script.js"></script>
+ </body>
+</html>
commit b3939b4d7787962e947bd16f2a5a5abcd7a1d877
Author: ffff:64.180.84.41 <ffff:64.180.84.41@hub.scroll.pub>
Date: 2025-01-07 09:14:11 +0000
Subject: Renamed Screenshot2025-01-07at1.11.42AM.png to breck.png
diff --git a/Screenshot2025-01-07at1.11.42AM.png b/breck.png
similarity index 100%
rename from Screenshot2025-01-07at1.11.42AM.png
rename to breck.png
commit 2e7eb98b6da55ff9a79a7cb665e8d742f1a0d072
Author: root <root@hub.scroll.pub>
Date: 2025-01-07 09:13:54 +0000
Subject: Deleted screenshot.jpg
diff --git a/screenshot.jpg b/screenshot.jpg
deleted file mode 100644
index e69de29..0000000
commit 900f043d54b29f5c1d4dd015750abb906d442d1f
Author: root <root@hub.scroll.pub>
Date: 2025-01-07 09:13:35 +0000
Subject: Added Screenshot2025-01-07at1.11.42AM.png
diff --git a/Screenshot2025-01-07at1.11.42AM.png b/Screenshot2025-01-07at1.11.42AM.png
new file mode 100644
index 0000000..cf6b1c3
Binary files /dev/null and b/Screenshot2025-01-07at1.11.42AM.png differ
commit d645d35433fe9108bbf7aba9a8d147cb1a001cf1
Author: ffff:64.180.84.41 <ffff:64.180.84.41@hub.scroll.pub>
Date: 2025-01-07 09:13:25 +0000
Subject: created screenshot.jpg
diff --git a/screenshot.jpg b/screenshot.jpg
new file mode 100644
index 0000000..e69de29
commit 185dbb2fc79a66530d4c3ca0020227271380d806
Author: root <root@hub.scroll.pub>
Date: 2025-01-07 09:12:44 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..25c113c
--- /dev/null
+++ b/body.html
@@ -0,0 +1,38 @@
+<header>
+ <nav>
+ <div class="logo">SnapSite</div>
+ <div class="menu">
+ <a href="#" class="active">Home</a>
+ <a href="#about">About</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Capture Any Website Screenshot</h1>
+ <p>Enter a URL below to instantly view and save website screenshots</p>
+
+ <div class="url-input">
+ <input type="url" id="urlInput" placeholder="Enter website URL (e.g. https://example.com)" aria-label="Website URL">
+ <button id="captureBtn">Capture</button>
+ </div>
+ </section>
+
+ <section class="result" id="resultSection">
+ <div class="screenshot-container">
+ <div class="loading" id="loading">
+ <div class="spinner"></div>
+ <p>Capturing screenshot...</p>
+ </div>
+ <img id="screenshotImg" alt="Website screenshot" hidden>
+ </div>
+ <div class="actions">
+ <button id="downloadBtn" class="download-btn" hidden>Download Screenshot</button>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ♥ by SnapSite</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..91d4722
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://snapsite.scroll.pub
+metaTags
+editButton /edit.html
+title SnapSite - Instant Website Screenshots
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..67e2d9f
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01GtEe1HG48RrQDMkLz89kRy",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website that allows users to enter a URL and display/capture a screenshot of that webpage.\n\n---domain---\nsnapsite.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://snapsite.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SnapSite - Instant Website Screenshots\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">SnapSite</div>\n <div class=\"menu\">\n <a href=\"#\" class=\"active\">Home</a>\n <a href=\"#about\">About</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Capture Any Website Screenshot</h1>\n <p>Enter a URL below to instantly view and save website screenshots</p>\n \n <div class=\"url-input\">\n <input type=\"url\" id=\"urlInput\" placeholder=\"Enter website URL (e.g. https://example.com)\" aria-label=\"Website URL\">\n <button id=\"captureBtn\">Capture</button>\n </div>\n </section>\n\n <section class=\"result\" id=\"resultSection\">\n <div class=\"screenshot-container\">\n <div class=\"loading\" id=\"loading\">\n <div class=\"spinner\"></div>\n <p>Capturing screenshot...</p>\n </div>\n <img id=\"screenshotImg\" alt=\"Website screenshot\" hidden>\n </div>\n <div class=\"actions\">\n <button id=\"downloadBtn\" class=\"download-btn\" hidden>Download Screenshot</button>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with ♥ by SnapSite</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2563eb;\n --primary-dark: #1d4ed8;\n --bg: #f8fafc;\n --text: #0f172a;\n --gray: #64748b;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n line-height: 1.5;\n}\n\nheader {\n background: white;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 100;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(45deg, var(--primary), var(--primary-dark));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.menu a {\n color: var(--text);\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.2s;\n}\n\n.menu a:hover {\n color: var(--primary);\n}\n\n.menu a.active {\n color: var(--primary);\n font-weight: 500;\n}\n\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 7rem 1rem 2rem;\n}\n\n.hero {\n text-align: center;\n margin-bottom: 3rem;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary), var(--primary-dark));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.url-input {\n max-width: 600px;\n margin: 2rem auto;\n display: flex;\n gap: 0.5rem;\n}\n\ninput[type=\"url\"] {\n flex: 1;\n padding: 0.75rem 1rem;\n border: 2px solid #e2e8f0;\n border-radius: 0.5rem;\n font-size: 1rem;\n transition: border-color 0.2s;\n}\n\ninput[type=\"url\"]:focus {\n outline: none;\n border-color: var(--primary);\n}\n\nbutton {\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 0.5rem;\n padding: 0.75rem 1.5rem;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\nbutton:hover {\n background: var(--primary-dark);\n}\n\n.screenshot-container {\n background: white;\n border-radius: 1rem;\n padding: 1rem;\n box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);\n min-height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loading {\n text-align: center;\n display: none;\n}\n\n.spinner {\n width: 40px;\n height: 40px;\n border: 4px solid #e2e8f0;\n border-top-color: var(--primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto 1rem;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n#screenshotImg {\n max-width: 100%;\n height: auto;\n border-radius: 0.5rem;\n}\n\n.actions {\n text-align: center;\n margin-top: 1rem;\n}\n\n.download-btn {\n background: var(--primary-dark);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n color: var(--gray);\n}\n\n@media (max-width: 640px) {\n .url-input {\n flex-direction: column;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .menu a {\n margin-left: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const urlInput = document.getElementById('urlInput');\n const captureBtn = document.getElementById('captureBtn');\n const loading = document.getElementById('loading');\n const screenshotImg = document.getElementById('screenshotImg');\n const downloadBtn = document.getElementById('downloadBtn');\n\n captureBtn.addEventListener('click', async () => {\n const url = urlInput.value.trim();\n \n if (!url) {\n alert('Please enter a valid URL');\n return;\n }\n\n try {\n // Show loading state\n loading.style.display = 'block';\n screenshotImg.hidden = true;\n downloadBtn.hidden = true;\n\n // In a real implementation, this would call a screenshot API\n // For demo purposes, we'll simulate a delay and show a placeholder\n await new Promise(resolve => setTimeout(resolve, 2000));\n \n // Simulate screenshot result\n screenshotImg.src = `data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"400\"><rect width=\"100%\" height=\"100%\" fill=\"%232563eb\"/><text x=\"50%\" y=\"50%\" font-family=\"Arial\" font-size=\"24\" fill=\"white\" text-anchor=\"middle\">Screenshot of ${url}</text></svg>`;\n \n // Show results\n loading.style.display = 'none';\n screenshotImg.hidden = false;\n downloadBtn.hidden = false;\n\n } catch (error) {\n alert('Error capturing screenshot. Please try again.');\n loading.style.display = 'none';\n }\n });\n\n downloadBtn.addEventListener('click', () => {\n // In a real implementation, this would download the actual screenshot\n const link = document.createElement('a');\n link.download = 'screenshot.png';\n link.href = screenshotImg.src;\n link.click();\n });\n\n // Enable form submission with Enter key\n urlInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n captureBtn.click();\n }\n });\n});\n\n---end---\n\nThis implementation creates a clean, modern website for capturing screenshots of URLs. Key features include:\n\n1. Beautiful gradient text effects\n2. Smooth animations and transitions\n3. Loading spinner animation\n4. Mobile-responsive design\n5. Accessible form controls\n6. Clean semantic HTML structure\n7. Modern CSS with variables\n8. Error handling and user feedback\n9. Professional visual design\n\nNote: The actual screenshot functionality would need to be implemented server-side or through a screenshot API service, as client-side JavaScript cannot directly capture screenshots of external websites due to security restrictions."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 274,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2339
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..b850b1d
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# snapsite.scroll.pub
+Website generated by Claude from prompt: display screenshot with url
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..203f6e0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const urlInput = document.getElementById('urlInput');
+ const captureBtn = document.getElementById('captureBtn');
+ const loading = document.getElementById('loading');
+ const screenshotImg = document.getElementById('screenshotImg');
+ const downloadBtn = document.getElementById('downloadBtn');
+
+ captureBtn.addEventListener('click', async () => {
+ const url = urlInput.value.trim();
+
+ if (!url) {
+ alert('Please enter a valid URL');
+ return;
+ }
+
+ try {
+ // Show loading state
+ loading.style.display = 'block';
+ screenshotImg.hidden = true;
+ downloadBtn.hidden = true;
+
+ // In a real implementation, this would call a screenshot API
+ // For demo purposes, we'll simulate a delay and show a placeholder
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ // Simulate screenshot result
+ screenshotImg.src = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400"><rect width="100%" height="100%" fill="%232563eb"/><text x="50%" y="50%" font-family="Arial" font-size="24" fill="white" text-anchor="middle">Screenshot of ${url}</text></svg>`;
+
+ // Show results
+ loading.style.display = 'none';
+ screenshotImg.hidden = false;
+ downloadBtn.hidden = false;
+
+ } catch (error) {
+ alert('Error capturing screenshot. Please try again.');
+ loading.style.display = 'none';
+ }
+ });
+
+ downloadBtn.addEventListener('click', () => {
+ // In a real implementation, this would download the actual screenshot
+ const link = document.createElement('a');
+ link.download = 'screenshot.png';
+ link.href = screenshotImg.src;
+ link.click();
+ });
+
+ // Enable form submission with Enter key
+ urlInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ captureBtn.click();
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..54af532
--- /dev/null
+++ b/style.css
@@ -0,0 +1,182 @@
+:root {
+ --primary: #2563eb;
+ --primary-dark: #1d4ed8;
+ --bg: #f8fafc;
+ --text: #0f172a;
+ --gray: #64748b;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ line-height: 1.5;
+}
+
+header {
+ background: white;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 100;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: 700;
+ background: linear-gradient(45deg, var(--primary), var(--primary-dark));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.menu a {
+ color: var(--text);
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.2s;
+}
+
+.menu a:hover {
+ color: var(--primary);
+}
+
+.menu a.active {
+ color: var(--primary);
+ font-weight: 500;
+}
+
+main {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 7rem 1rem 2rem;
+}
+
+.hero {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, var(--primary), var(--primary-dark));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.url-input {
+ max-width: 600px;
+ margin: 2rem auto;
+ display: flex;
+ gap: 0.5rem;
+}
+
+input[type="url"] {
+ flex: 1;
+ padding: 0.75rem 1rem;
+ border: 2px solid #e2e8f0;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ transition: border-color 0.2s;
+}
+
+input[type="url"]:focus {
+ outline: none;
+ border-color: var(--primary);
+}
+
+button {
+ background: var(--primary);
+ color: white;
+ border: none;
+ border-radius: 0.5rem;
+ padding: 0.75rem 1.5rem;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+button:hover {
+ background: var(--primary-dark);
+}
+
+.screenshot-container {
+ background: white;
+ border-radius: 1rem;
+ padding: 1rem;
+ box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+ min-height: 300px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.loading {
+ text-align: center;
+ display: none;
+}
+
+.spinner {
+ width: 40px;
+ height: 40px;
+ border: 4px solid #e2e8f0;
+ border-top-color: var(--primary);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin: 0 auto 1rem;
+}
+
+@keyframes spin {
+ to { transform: rotate(360deg); }
+}
+
+#screenshotImg {
+ max-width: 100%;
+ height: auto;
+ border-radius: 0.5rem;
+}
+
+.actions {
+ text-align: center;
+ margin-top: 1rem;
+}
+
+.download-btn {
+ background: var(--primary-dark);
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ color: var(--gray);
+}
+
+@media (max-width: 640px) {
+ .url-input {
+ flex-direction: column;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .menu a {
+ margin-left: 1rem;
+ }
+}