commit 6871db91147577261b21afdbc2a3df96deb9889c
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 11:58:03 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..7d5ca6e
--- /dev/null
+++ b/body.html
@@ -0,0 +1,81 @@
+<header>
+ <h1>Video Showcase</h1>
+ <nav>
+ <button class="nav-btn active" data-view="grid">Grid View</button>
+ <button class="nav-btn" data-view="list">List View</button>
+ </nav>
+</header>
+
+<main>
+ <div class="video-container" id="videoGrid">
+ <article class="video-card">
+ <div class="video-wrapper">
+ <video controls preload="none" poster="video1-thumb.jpg">
+ <source src="video1.mp4" type="video/mp4">
+ Your browser doesn't support video playback.
+ </video>
+ </div>
+ <h2>Cinematic Nature</h2>
+ <p>Explore the beauty of untouched landscapes</p>
+ </article>
+
+ <article class="video-card">
+ <div class="video-wrapper">
+ <video controls preload="none" poster="video2-thumb.jpg">
+ <source src="video2.mp4" type="video/mp4">
+ Your browser doesn't support video playback.
+ </video>
+ </div>
+ <h2>Urban Life</h2>
+ <p>City lights and modern architecture</p>
+ </article>
+
+ <article class="video-card">
+ <div class="video-wrapper">
+ <video controls preload="none" poster="video3-thumb.jpg">
+ <source src="video3.mp4" type="video/mp4">
+ Your browser doesn't support video playback.
+ </video>
+ </div>
+ <h2>Ocean Depths</h2>
+ <p>Discovering marine life</p>
+ </article>
+
+ <article class="video-card">
+ <div class="video-wrapper">
+ <video controls preload="none" poster="video4-thumb.jpg">
+ <source src="video4.mp4" type="video/mp4">
+ Your browser doesn't support video playback.
+ </video>
+ </div>
+ <h2>Mountain Peak</h2>
+ <p>Adventures at high altitude</p>
+ </article>
+
+ <article class="video-card">
+ <div class="video-wrapper">
+ <video controls preload="none" poster="video5-thumb.jpg">
+ <source src="video5.mp4" type="video/mp4">
+ Your browser doesn't support video playback.
+ </video>
+ </div>
+ <h2>Desert Winds</h2>
+ <p>Sahara's golden dunes</p>
+ </article>
+
+ <article class="video-card">
+ <div class="video-wrapper">
+ <video controls preload="none" poster="video6-thumb.jpg">
+ <source src="video6.mp4" type="video/mp4">
+ Your browser doesn't support video playback.
+ </video>
+ </div>
+ <h2>Forest Stories</h2>
+ <p>Through ancient woodlands</p>
+ </article>
+ </div>
+</main>
+
+<footer>
+ <p>Created with passion by a video enthusiast</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..252b31f
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://showreel.scroll.pub
+metaTags
+editButton /edit.html
+title Video Showcase
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..87777ee
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01JZM9TuKeebX16PkS8aHRAd",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a website to showcase 6 videos in an elegant way.\n\nSuggested domain: showreel.scroll.pub (short, memorable, represents video content)\n\n---domain---\nshowreel.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://showreel.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Video Showcase\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Video Showcase</h1>\n <nav>\n <button class=\"nav-btn active\" data-view=\"grid\">Grid View</button>\n <button class=\"nav-btn\" data-view=\"list\">List View</button>\n </nav>\n</header>\n\n<main>\n <div class=\"video-container\" id=\"videoGrid\">\n <article class=\"video-card\">\n <div class=\"video-wrapper\">\n <video controls preload=\"none\" poster=\"video1-thumb.jpg\">\n <source src=\"video1.mp4\" type=\"video/mp4\">\n Your browser doesn't support video playback.\n </video>\n </div>\n <h2>Cinematic Nature</h2>\n <p>Explore the beauty of untouched landscapes</p>\n </article>\n\n <article class=\"video-card\">\n <div class=\"video-wrapper\">\n <video controls preload=\"none\" poster=\"video2-thumb.jpg\">\n <source src=\"video2.mp4\" type=\"video/mp4\">\n Your browser doesn't support video playback.\n </video>\n </div>\n <h2>Urban Life</h2>\n <p>City lights and modern architecture</p>\n </article>\n\n <article class=\"video-card\">\n <div class=\"video-wrapper\">\n <video controls preload=\"none\" poster=\"video3-thumb.jpg\">\n <source src=\"video3.mp4\" type=\"video/mp4\">\n Your browser doesn't support video playback.\n </video>\n </div>\n <h2>Ocean Depths</h2>\n <p>Discovering marine life</p>\n </article>\n\n <article class=\"video-card\">\n <div class=\"video-wrapper\">\n <video controls preload=\"none\" poster=\"video4-thumb.jpg\">\n <source src=\"video4.mp4\" type=\"video/mp4\">\n Your browser doesn't support video playback.\n </video>\n </div>\n <h2>Mountain Peak</h2>\n <p>Adventures at high altitude</p>\n </article>\n\n <article class=\"video-card\">\n <div class=\"video-wrapper\">\n <video controls preload=\"none\" poster=\"video5-thumb.jpg\">\n <source src=\"video5.mp4\" type=\"video/mp4\">\n Your browser doesn't support video playback.\n </video>\n </div>\n <h2>Desert Winds</h2>\n <p>Sahara's golden dunes</p>\n </article>\n\n <article class=\"video-card\">\n <div class=\"video-wrapper\">\n <video controls preload=\"none\" poster=\"video6-thumb.jpg\">\n <source src=\"video6.mp4\" type=\"video/mp4\">\n Your browser doesn't support video playback.\n </video>\n </div>\n <h2>Forest Stories</h2>\n <p>Through ancient woodlands</p>\n </article>\n </div>\n</main>\n\n<footer>\n <p>Created with passion by a video enthusiast</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #2a2a2a;\n --accent-color: #4a90e2;\n --text-color: #333;\n --background-color: #f5f5f5;\n --card-background: #ffffff;\n --transition-speed: 0.3s;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n font-weight: 300;\n}\n\nnav {\n margin: 1rem 0;\n}\n\n.nav-btn {\n background: transparent;\n border: 2px solid white;\n color: white;\n padding: 0.5rem 1.5rem;\n margin: 0 0.5rem;\n border-radius: 25px;\n cursor: pointer;\n transition: var(--transition-speed);\n}\n\n.nav-btn.active {\n background: white;\n color: var(--primary-color);\n}\n\n.video-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.video-card {\n background: var(--card-background);\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n transition: transform var(--transition-speed);\n}\n\n.video-card:hover {\n transform: translateY(-5px);\n}\n\n.video-wrapper {\n position: relative;\n padding-top: 56.25%;\n}\n\nvideo {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.video-card h2 {\n padding: 1rem 1rem 0.5rem;\n font-size: 1.25rem;\n color: var(--primary-color);\n}\n\n.video-card p {\n padding: 0 1rem 1rem;\n color: #666;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n .video-container {\n grid-template-columns: 1fr;\n padding: 1rem;\n }\n \n header {\n padding: 1rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n}\n\n.list-view .video-container {\n grid-template-columns: 1fr;\n max-width: 800px;\n}\n\n.list-view .video-card {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n}\n\n.list-view .video-wrapper {\n padding-top: 28.125%;\n}\n\n@media (max-width: 600px) {\n .list-view .video-card {\n grid-template-columns: 1fr;\n }\n \n .list-view .video-wrapper {\n padding-top: 56.25%;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const navButtons = document.querySelectorAll('.nav-btn');\n const main = document.querySelector('main');\n \n // View switching functionality\n navButtons.forEach(button => {\n button.addEventListener('click', () => {\n navButtons.forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');\n \n if (button.dataset.view === 'list') {\n main.classList.add('list-view');\n } else {\n main.classList.remove('list-view');\n }\n });\n });\n \n // Lazy loading for videos\n const videos = document.querySelectorAll('video');\n const videoObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const video = entry.target;\n video.poster = video.poster; // Trigger poster load\n videoObserver.unobserve(video);\n }\n });\n }, {\n rootMargin: '50px'\n });\n \n videos.forEach(video => videoObserver.observe(video));\n \n // Smooth scroll behavior\n document.documentElement.style.scrollBehavior = 'smooth';\n});\n---end---\n\nThis implementation features:\n\n1. Responsive grid/list layout switching\n2. Beautiful card design with hover effects\n3. Lazy loading for video elements\n4. Smooth transitions and animations\n5. Accessible navigation and semantic HTML\n6. Mobile-first approach\n7. Clean, modern design with subtle shadows and animations\n8. Proper video aspect ratio maintenance\n9. Intersection Observer for performance\n10. Flexible grid system that adapts to screen sizes\n\nThe design is both beautiful and functional, with attention to performance through lazy loading and proper resource management. The UI is intuitive and responsive, working well on all device sizes."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 276,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2384
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..90d5168
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# showreel.scroll.pub
+Website generated by Claude from prompt: present my 6 videos
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..0a44367
--- /dev/null
+++ b/script.js
@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const navButtons = document.querySelectorAll('.nav-btn');
+ const main = document.querySelector('main');
+
+ // View switching functionality
+ navButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ navButtons.forEach(btn => btn.classList.remove('active'));
+ button.classList.add('active');
+
+ if (button.dataset.view === 'list') {
+ main.classList.add('list-view');
+ } else {
+ main.classList.remove('list-view');
+ }
+ });
+ });
+
+ // Lazy loading for videos
+ const videos = document.querySelectorAll('video');
+ const videoObserver = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const video = entry.target;
+ video.poster = video.poster; // Trigger poster load
+ videoObserver.unobserve(video);
+ }
+ });
+ }, {
+ rootMargin: '50px'
+ });
+
+ videos.forEach(video => videoObserver.observe(video));
+
+ // Smooth scroll behavior
+ document.documentElement.style.scrollBehavior = 'smooth';
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f2bf81f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,149 @@
+:root {
+ --primary-color: #2a2a2a;
+ --accent-color: #4a90e2;
+ --text-color: #333;
+ --background-color: #f5f5f5;
+ --card-background: #ffffff;
+ --transition-speed: 0.3s;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ font-weight: 300;
+}
+
+nav {
+ margin: 1rem 0;
+}
+
+.nav-btn {
+ background: transparent;
+ border: 2px solid white;
+ color: white;
+ padding: 0.5rem 1.5rem;
+ margin: 0 0.5rem;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: var(--transition-speed);
+}
+
+.nav-btn.active {
+ background: white;
+ color: var(--primary-color);
+}
+
+.video-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+.video-card {
+ background: var(--card-background);
+ border-radius: 15px;
+ overflow: hidden;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+ transition: transform var(--transition-speed);
+}
+
+.video-card:hover {
+ transform: translateY(-5px);
+}
+
+.video-wrapper {
+ position: relative;
+ padding-top: 56.25%;
+}
+
+video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.video-card h2 {
+ padding: 1rem 1rem 0.5rem;
+ font-size: 1.25rem;
+ color: var(--primary-color);
+}
+
+.video-card p {
+ padding: 0 1rem 1rem;
+ color: #666;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ .video-container {
+ grid-template-columns: 1fr;
+ padding: 1rem;
+ }
+
+ header {
+ padding: 1rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+}
+
+.list-view .video-container {
+ grid-template-columns: 1fr;
+ max-width: 800px;
+}
+
+.list-view .video-card {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+}
+
+.list-view .video-wrapper {
+ padding-top: 28.125%;
+}
+
+@media (max-width: 600px) {
+ .list-view .video-card {
+ grid-template-columns: 1fr;
+ }
+
+ .list-view .video-wrapper {
+ padding-top: 56.25%;
+ }
+}
\ No newline at end of file