commit b440eff7d77e5ad81eea1d5653a21de1c57d3890
Author: root <root@hub.scroll.pub>
Date: 2025-01-11 06:18:40 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0f0e080
--- /dev/null
+++ b/body.html
@@ -0,0 +1,60 @@
+<header>
+ <nav class="top-nav">
+ <div class="logo">
+ <h1>DevPins</h1>
+ </div>
+ <div class="search-bar">
+ <input type="search" placeholder="Search pins..." aria-label="Search pins">
+ </div>
+ <div class="nav-actions">
+ <button class="create-pin" aria-label="Create new pin">+</button>
+ <button class="profile" aria-label="View profile">
+ <img src="profile-placeholder.jpg" alt="Profile" width="32" height="32">
+ </button>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <div class="pins-grid">
+ <!-- Example pins - In production, these would be dynamically generated -->
+ <article class="pin">
+ <div class="pin-image">
+ <pre><code>const hello = () => {
+ console.log("Hello Dev!");
+}</code></pre>
+ </div>
+ <div class="pin-content">
+ <h2>Clean Arrow Function</h2>
+ <p>Modern JavaScript syntax example</p>
+ <div class="pin-meta">
+ <span class="language">JavaScript</span>
+ <button class="save-btn">Save</button>
+ </div>
+ </div>
+ </article>
+
+ <article class="pin">
+ <div class="pin-image">
+ <img src="css-grid.jpg" alt="CSS Grid Layout Example">
+ </div>
+ <div class="pin-content">
+ <h2>Responsive Grid Layout</h2>
+ <p>CSS Grid made simple</p>
+ <div class="pin-meta">
+ <span class="language">CSS</span>
+ <button class="save-btn">Save</button>
+ </div>
+ </div>
+ </article>
+ </div>
+</main>
+
+<footer>
+ <nav class="footer-nav">
+ <a href="/about">About</a>
+ <a href="/blog">Blog</a>
+ <a href="/terms">Terms</a>
+ <a href="/privacy">Privacy</a>
+ </nav>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..6da1451
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://devpins.scroll.pub
+metaTags
+ description A Pinterest-style platform for developers to discover and share code snippets, project ideas, and development resources
+ keywords developer, programming, code sharing, project ideas, dev resources, pinterest for developers
+ author DevPins Team
+editButton /edit.html
+title DevPins - Developer Inspiration Hub
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..58246b0
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01HSEsXFpYKq5WbLUto7mQxd",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a Pinterest-like website for developers called \"DevPins\" - a place where developers can share and discover code snippets, project ideas, and development resources in a visual, card-based layout.\n\n---domain---\ndevpins.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://devpins.scroll.pub\nmetaTags\n description A Pinterest-style platform for developers to discover and share code snippets, project ideas, and development resources\n keywords developer, programming, code sharing, project ideas, dev resources, pinterest for developers\n author DevPins Team\neditButton /edit.html\ntitle DevPins - Developer Inspiration Hub\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"top-nav\">\n <div class=\"logo\">\n <h1>DevPins</h1>\n </div>\n <div class=\"search-bar\">\n <input type=\"search\" placeholder=\"Search pins...\" aria-label=\"Search pins\">\n </div>\n <div class=\"nav-actions\">\n <button class=\"create-pin\" aria-label=\"Create new pin\">+</button>\n <button class=\"profile\" aria-label=\"View profile\">\n <img src=\"profile-placeholder.jpg\" alt=\"Profile\" width=\"32\" height=\"32\">\n </button>\n </div>\n </nav>\n</header>\n\n<main>\n <div class=\"pins-grid\">\n <!-- Example pins - In production, these would be dynamically generated -->\n <article class=\"pin\">\n <div class=\"pin-image\">\n <pre><code>const hello = () => {\n console.log(\"Hello Dev!\");\n}</code></pre>\n </div>\n <div class=\"pin-content\">\n <h2>Clean Arrow Function</h2>\n <p>Modern JavaScript syntax example</p>\n <div class=\"pin-meta\">\n <span class=\"language\">JavaScript</span>\n <button class=\"save-btn\">Save</button>\n </div>\n </div>\n </article>\n\n <article class=\"pin\">\n <div class=\"pin-image\">\n <img src=\"css-grid.jpg\" alt=\"CSS Grid Layout Example\">\n </div>\n <div class=\"pin-content\">\n <h2>Responsive Grid Layout</h2>\n <p>CSS Grid made simple</p>\n <div class=\"pin-meta\">\n <span class=\"language\">CSS</span>\n <button class=\"save-btn\">Save</button>\n </div>\n </div>\n </article>\n </div>\n</main>\n\n<footer>\n <nav class=\"footer-nav\">\n <a href=\"/about\">About</a>\n <a href=\"/blog\">Blog</a>\n <a href=\"/terms\">Terms</a>\n <a href=\"/privacy\">Privacy</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2d3436;\n --accent-color: #6c5ce7;\n --bg-color: #f5f6fa;\n --text-color: #2d3436;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n --transition: all 0.3s ease;\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', Roboto, sans-serif;\n background: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.top-nav {\n position: fixed;\n top: 0;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n background: white;\n box-shadow: var(--card-shadow);\n z-index: 1000;\n}\n\n.logo h1 {\n font-size: 1.5rem;\n color: var(--accent-color);\n font-weight: 800;\n}\n\n.search-bar input {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 25px;\n background: var(--bg-color);\n width: 300px;\n font-size: 1rem;\n}\n\n.nav-actions button {\n background: none;\n border: none;\n cursor: pointer;\n margin-left: 1rem;\n transition: var(--transition);\n}\n\n.create-pin {\n font-size: 2rem;\n color: var(--accent-color);\n}\n\n.pins-grid {\n margin-top: 80px;\n padding: 2rem;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1600px;\n margin-inline: auto;\n}\n\n.pin {\n background: white;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: var(--card-shadow);\n transition: var(--transition);\n}\n\n.pin:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);\n}\n\n.pin-image {\n width: 100%;\n padding-top: 100%;\n position: relative;\n background: var(--primary-color);\n overflow: hidden;\n}\n\n.pin-image pre {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 1rem;\n margin: 0;\n background: #282c34;\n color: #abb2bf;\n font-family: 'Fira Code', monospace;\n font-size: 0.9rem;\n overflow: auto;\n}\n\n.pin-content {\n padding: 1rem;\n}\n\n.pin-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 1rem;\n}\n\n.language {\n background: var(--bg-color);\n padding: 0.25rem 0.75rem;\n border-radius: 15px;\n font-size: 0.8rem;\n}\n\n.save-btn {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 20px;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.save-btn:hover {\n background: #5849c4;\n}\n\nfooter {\n padding: 2rem;\n text-align: center;\n background: white;\n margin-top: 2rem;\n}\n\n.footer-nav a {\n color: var(--text-color);\n text-decoration: none;\n margin: 0 1rem;\n transition: var(--transition);\n}\n\n.footer-nav a:hover {\n color: var(--accent-color);\n}\n\n@media (max-width: 768px) {\n .search-bar input {\n width: 200px;\n }\n \n .pins-grid {\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n padding: 1rem;\n }\n}\n\n@media (max-width: 480px) {\n .top-nav {\n padding: 1rem;\n }\n \n .search-bar input {\n width: 150px;\n }\n \n .pins-grid {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Save button functionality\n document.querySelectorAll('.save-btn').forEach(button => {\n button.addEventListener('click', (e) => {\n const btn = e.target;\n btn.textContent = 'Saved';\n btn.style.background = '#27ae60';\n setTimeout(() => {\n btn.textContent = 'Save';\n btn.style.background = '';\n }, 1500);\n });\n });\n\n // Search functionality\n const searchInput = document.querySelector('.search-bar input');\n searchInput.addEventListener('input', (e) => {\n const searchTerm = e.target.value.toLowerCase();\n const pins = document.querySelectorAll('.pin');\n \n pins.forEach(pin => {\n const title = pin.querySelector('h2').textContent.toLowerCase();\n const description = pin.querySelector('p').textContent.toLowerCase();\n \n if (title.includes(searchTerm) || description.includes(searchTerm)) {\n pin.style.display = 'block';\n } else {\n pin.style.display = 'none';\n }\n });\n });\n\n // Create pin button functionality\n const createPinBtn = document.querySelector('.create-pin');\n createPinBtn.addEventListener('click', () => {\n alert('Create pin feature coming soon!');\n });\n\n // Lazy loading for images\n if ('IntersectionObserver' in window) {\n const imageObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target;\n img.src = img.dataset.src;\n img.classList.remove('lazy');\n observer.unobserve(img);\n }\n });\n });\n\n document.querySelectorAll('img[data-src]').forEach(img => {\n imageObserver.observe(img);\n });\n }\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 275,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2507
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..84fa6c0
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# devpins.scroll.pub
+
+website generated by Claude from prompt: a pinterest built for developers
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..0ff909a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Save button functionality
+ document.querySelectorAll('.save-btn').forEach(button => {
+ button.addEventListener('click', (e) => {
+ const btn = e.target;
+ btn.textContent = 'Saved';
+ btn.style.background = '#27ae60';
+ setTimeout(() => {
+ btn.textContent = 'Save';
+ btn.style.background = '';
+ }, 1500);
+ });
+ });
+
+ // Search functionality
+ const searchInput = document.querySelector('.search-bar input');
+ searchInput.addEventListener('input', (e) => {
+ const searchTerm = e.target.value.toLowerCase();
+ const pins = document.querySelectorAll('.pin');
+
+ pins.forEach(pin => {
+ const title = pin.querySelector('h2').textContent.toLowerCase();
+ const description = pin.querySelector('p').textContent.toLowerCase();
+
+ if (title.includes(searchTerm) || description.includes(searchTerm)) {
+ pin.style.display = 'block';
+ } else {
+ pin.style.display = 'none';
+ }
+ });
+ });
+
+ // Create pin button functionality
+ const createPinBtn = document.querySelector('.create-pin');
+ createPinBtn.addEventListener('click', () => {
+ alert('Create pin feature coming soon!');
+ });
+
+ // Lazy loading for images
+ if ('IntersectionObserver' in window) {
+ const imageObserver = new IntersectionObserver((entries, observer) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const img = entry.target;
+ img.src = img.dataset.src;
+ img.classList.remove('lazy');
+ observer.unobserve(img);
+ }
+ });
+ });
+
+ document.querySelectorAll('img[data-src]').forEach(img => {
+ imageObserver.observe(img);
+ });
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7d62a38
--- /dev/null
+++ b/style.css
@@ -0,0 +1,183 @@
+:root {
+ --primary-color: #2d3436;
+ --accent-color: #6c5ce7;
+ --bg-color: #f5f6fa;
+ --text-color: #2d3436;
+ --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ background: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+.top-nav {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+ background: white;
+ box-shadow: var(--card-shadow);
+ z-index: 1000;
+}
+
+.logo h1 {
+ font-size: 1.5rem;
+ color: var(--accent-color);
+ font-weight: 800;
+}
+
+.search-bar input {
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 25px;
+ background: var(--bg-color);
+ width: 300px;
+ font-size: 1rem;
+}
+
+.nav-actions button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ margin-left: 1rem;
+ transition: var(--transition);
+}
+
+.create-pin {
+ font-size: 2rem;
+ color: var(--accent-color);
+}
+
+.pins-grid {
+ margin-top: 80px;
+ padding: 2rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1600px;
+ margin-inline: auto;
+}
+
+.pin {
+ background: white;
+ border-radius: 16px;
+ overflow: hidden;
+ box-shadow: var(--card-shadow);
+ transition: var(--transition);
+}
+
+.pin:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+}
+
+.pin-image {
+ width: 100%;
+ padding-top: 100%;
+ position: relative;
+ background: var(--primary-color);
+ overflow: hidden;
+}
+
+.pin-image pre {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 1rem;
+ margin: 0;
+ background: #282c34;
+ color: #abb2bf;
+ font-family: 'Fira Code', monospace;
+ font-size: 0.9rem;
+ overflow: auto;
+}
+
+.pin-content {
+ padding: 1rem;
+}
+
+.pin-meta {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 1rem;
+}
+
+.language {
+ background: var(--bg-color);
+ padding: 0.25rem 0.75rem;
+ border-radius: 15px;
+ font-size: 0.8rem;
+}
+
+.save-btn {
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.save-btn:hover {
+ background: #5849c4;
+}
+
+footer {
+ padding: 2rem;
+ text-align: center;
+ background: white;
+ margin-top: 2rem;
+}
+
+.footer-nav a {
+ color: var(--text-color);
+ text-decoration: none;
+ margin: 0 1rem;
+ transition: var(--transition);
+}
+
+.footer-nav a:hover {
+ color: var(--accent-color);
+}
+
+@media (max-width: 768px) {
+ .search-bar input {
+ width: 200px;
+ }
+
+ .pins-grid {
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ padding: 1rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .top-nav {
+ padding: 1rem;
+ }
+
+ .search-bar input {
+ width: 150px;
+ }
+
+ .pins-grid {
+ grid-template-columns: 1fr;
+ }
+}