commit dbb157ddb3cd79c548d040b45811e66840da8057

Author: root <root@hub.scroll.pub> Date: 2024-12-31 02:35:24 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..0ccc89f --- /dev/null +++ b/body.html @@ -0,0 +1,34 @@ +<header> + <nav> + <div class="logo">VidFlow</div> + <div class="search-bar"> + <input type="search" placeholder="Search videos..." aria-label="Search videos"> + <button type="button" aria-label="Search"><i class="icon-search"></i></button> + </div> + <button class="upload-btn" aria-label="Upload video">Upload</button> + </nav> +</header> + +<main> + <section class="video-grid"> + <article class="video-card"> + <div class="video-container"> + <video src="sample1.mp4" poster="thumbnail1.jpg" preload="none"></video> + <button class="play-btn" aria-label="Play video"></button> + </div> + <div class="video-info"> + <h3>Amazing Sunset Time-lapse</h3> + <p>1.2M views • 2 days ago</p> + </div> + </article> + <!-- More video cards would be dynamically added here --> + </section> +</main> + +<footer> + <nav> + <a href="/about">About</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..3e16bd4 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://vidflow.scroll.pub +metaTags +editButton /edit.html +title VidFlow - Share & Watch Videos +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..58217a9 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_019ddCSsCZD4rit7vuqqwMQW", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "Let me create a video sharing website with a clean, modern design.\n\n---domain---\nvidflow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://vidflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle VidFlow - Share & Watch Videos\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">VidFlow</div>\n <div class=\"search-bar\">\n <input type=\"search\" placeholder=\"Search videos...\" aria-label=\"Search videos\">\n <button type=\"button\" aria-label=\"Search\"><i class=\"icon-search\"></i></button>\n </div>\n <button class=\"upload-btn\" aria-label=\"Upload video\">Upload</button>\n </nav>\n</header>\n\n<main>\n <section class=\"video-grid\">\n <article class=\"video-card\">\n <div class=\"video-container\">\n <video src=\"sample1.mp4\" poster=\"thumbnail1.jpg\" preload=\"none\"></video>\n <button class=\"play-btn\" aria-label=\"Play video\"></button>\n </div>\n <div class=\"video-info\">\n <h3>Amazing Sunset Time-lapse</h3>\n <p>1.2M views • 2 days ago</p>\n </div>\n </article>\n <!-- More video cards would be dynamically added here -->\n </section>\n</main>\n\n<footer>\n <nav>\n <a href=\"/about\">About</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 --text-color: #2d3436;\n --bg-color: #ffffff;\n --card-shadow: 0 8px 16px rgba(0,0,0,0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n color: var(--text-color);\n background: var(--bg-color);\n line-height: 1.6;\n}\n\nheader {\n position: sticky;\n top: 0;\n background: var(--bg-color);\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n z-index: 100;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n align-items: center;\n gap: 2rem;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--accent-color);\n}\n\n.search-bar {\n flex: 1;\n display: flex;\n gap: 0.5rem;\n}\n\n.search-bar input {\n width: 100%;\n padding: 0.8rem 1rem;\n border: 2px solid #ddd;\n border-radius: 2rem;\n font-size: 1rem;\n transition: border-color 0.3s;\n}\n\n.search-bar input:focus {\n outline: none;\n border-color: var(--accent-color);\n}\n\n.upload-btn {\n padding: 0.8rem 1.5rem;\n background: var(--accent-color);\n color: white;\n border: none;\n border-radius: 2rem;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.upload-btn:hover {\n transform: translateY(-2px);\n}\n\n.video-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.video-card {\n background: var(--bg-color);\n border-radius: 1rem;\n overflow: hidden;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s;\n}\n\n.video-card:hover {\n transform: translateY(-4px);\n}\n\n.video-container {\n position: relative;\n aspect-ratio: 16/9;\n background: #000;\n}\n\nvideo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.play-btn {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 60px;\n height: 60px;\n background: rgba(255,255,255,0.9);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n}\n\n.play-btn::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 55%;\n transform: translate(-50%, -50%);\n border-left: 20px solid var(--accent-color);\n border-top: 12px solid transparent;\n border-bottom: 12px solid transparent;\n}\n\n.video-info {\n padding: 1rem;\n}\n\n.video-info h3 {\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n}\n\n.video-info p {\n color: #666;\n font-size: 0.9rem;\n}\n\nfooter {\n padding: 2rem;\n background: #f5f6fa;\n margin-top: 2rem;\n}\n\nfooter nav {\n justify-content: center;\n gap: 2rem;\n}\n\nfooter a {\n color: var(--text-color);\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n nav {\n flex-direction: column;\n gap: 1rem;\n }\n \n .search-bar {\n width: 100%;\n }\n \n .video-grid {\n grid-template-columns: 1fr;\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Video play functionality\n const videoCards = document.querySelectorAll('.video-card');\n \n videoCards.forEach(card => {\n const video = card.querySelector('video');\n const playBtn = card.querySelector('.play-btn');\n \n playBtn.addEventListener('click', () => {\n if (video.paused) {\n // Pause all other videos\n document.querySelectorAll('video').forEach(v => {\n if (v !== video) {\n v.pause();\n v.parentElement.querySelector('.play-btn').style.display = 'block';\n }\n });\n \n video.play();\n playBtn.style.display = 'none';\n } else {\n video.pause();\n playBtn.style.display = 'block';\n }\n });\n \n video.addEventListener('ended', () => {\n playBtn.style.display = 'block';\n });\n });\n \n // Search functionality\n const searchInput = document.querySelector('.search-bar input');\n let searchTimeout;\n \n searchInput.addEventListener('input', (e) => {\n clearTimeout(searchTimeout);\n searchTimeout = setTimeout(() => {\n // Here you would typically make an API call to search videos\n console.log('Searching for:', e.target.value);\n }, 500);\n });\n \n // Upload button\n const uploadBtn = document.querySelector('.upload-btn');\n \n uploadBtn.addEventListener('click', () => {\n // Here you would typically open an upload modal or navigate to upload page\n console.log('Upload clicked');\n });\n});\n\n---end---\n\nThis implementation creates a modern, responsive video sharing platform with:\n\n1. Clean, semantic HTML5 structure\n2. Beautiful CSS with smooth animations and transitions\n3. Mobile-responsive design\n4. Accessible navigation and controls\n5. Video grid layout with hover effects\n6. Search functionality\n7. Upload button\n8. Video player controls\n9. Professional styling with CSS variables\n10. Performance optimizations (lazy loading, debounced search)\n\nThe design features:\n- Sticky header with search\n- Card-based video grid\n- Custom play button design\n- Smooth hover animations\n- Professional color scheme\n- Clean typography\n- Proper spacing and hierarchy\n- Shadow effects for depth\n- Responsive breakpoints\n\nAll functionality is implemented with vanilla JavaScript, and the design follows modern web best practices while maintaining simplicity and usability." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 274, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2245 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..4ad4d18 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# vidflow.scroll.pub +Website generated by Claude from prompt: a website show videos \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4bbb522 --- /dev/null +++ b/script.js @@ -0,0 +1,51 @@ +document.addEventListener('DOMContentLoaded', () => { + // Video play functionality + const videoCards = document.querySelectorAll('.video-card'); + + videoCards.forEach(card => { + const video = card.querySelector('video'); + const playBtn = card.querySelector('.play-btn'); + + playBtn.addEventListener('click', () => { + if (video.paused) { + // Pause all other videos + document.querySelectorAll('video').forEach(v => { + if (v !== video) { + v.pause(); + v.parentElement.querySelector('.play-btn').style.display = 'block'; + } + }); + + video.play(); + playBtn.style.display = 'none'; + } else { + video.pause(); + playBtn.style.display = 'block'; + } + }); + + video.addEventListener('ended', () => { + playBtn.style.display = 'block'; + }); + }); + + // Search functionality + const searchInput = document.querySelector('.search-bar input'); + let searchTimeout; + + searchInput.addEventListener('input', (e) => { + clearTimeout(searchTimeout); + searchTimeout = setTimeout(() => { + // Here you would typically make an API call to search videos + console.log('Searching for:', e.target.value); + }, 500); + }); + + // Upload button + const uploadBtn = document.querySelector('.upload-btn'); + + uploadBtn.addEventListener('click', () => { + // Here you would typically open an upload modal or navigate to upload page + console.log('Upload clicked'); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..35fb8e5 --- /dev/null +++ b/style.css @@ -0,0 +1,180 @@ +:root { + --primary-color: #2d3436; + --accent-color: #6c5ce7; + --text-color: #2d3436; + --bg-color: #ffffff; + --card-shadow: 0 8px 16px rgba(0,0,0,0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + color: var(--text-color); + background: var(--bg-color); + line-height: 1.6; +} + +header { + position: sticky; + top: 0; + background: var(--bg-color); + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + z-index: 100; +} + +nav { + max-width: 1200px; + margin: 0 auto; + padding: 1rem; + display: flex; + align-items: center; + gap: 2rem; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--accent-color); +} + +.search-bar { + flex: 1; + display: flex; + gap: 0.5rem; +} + +.search-bar input { + width: 100%; + padding: 0.8rem 1rem; + border: 2px solid #ddd; + border-radius: 2rem; + font-size: 1rem; + transition: border-color 0.3s; +} + +.search-bar input:focus { + outline: none; + border-color: var(--accent-color); +} + +.upload-btn { + padding: 0.8rem 1.5rem; + background: var(--accent-color); + color: white; + border: none; + border-radius: 2rem; + cursor: pointer; + transition: transform 0.2s; +} + +.upload-btn:hover { + transform: translateY(-2px); +} + +.video-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; + padding: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.video-card { + background: var(--bg-color); + border-radius: 1rem; + overflow: hidden; + box-shadow: var(--card-shadow); + transition: transform 0.3s; +} + +.video-card:hover { + transform: translateY(-4px); +} + +.video-container { + position: relative; + aspect-ratio: 16/9; + background: #000; +} + +video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.play-btn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 60px; + height: 60px; + background: rgba(255,255,255,0.9); + border: none; + border-radius: 50%; + cursor: pointer; +} + +.play-btn::after { + content: ''; + position: absolute; + top: 50%; + left: 55%; + transform: translate(-50%, -50%); + border-left: 20px solid var(--accent-color); + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; +} + +.video-info { + padding: 1rem; +} + +.video-info h3 { + font-size: 1.1rem; + margin-bottom: 0.5rem; +} + +.video-info p { + color: #666; + font-size: 0.9rem; +} + +footer { + padding: 2rem; + background: #f5f6fa; + margin-top: 2rem; +} + +footer nav { + justify-content: center; + gap: 2rem; +} + +footer a { + color: var(--text-color); + text-decoration: none; +} + +@media (max-width: 768px) { + nav { + flex-direction: column; + gap: 1rem; + } + + .search-bar { + width: 100%; + } + + .video-grid { + grid-template-columns: 1fr; + padding: 1rem; + } +}