commit 3a5bb0ab156fbe18e6dbfeaae53c0168437aaf2b
Author: root <root@hub.scroll.pub>
Date: 2025-01-07 03:28:36 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..c55ad98
--- /dev/null
+++ b/body.html
@@ -0,0 +1,50 @@
+<header>
+ <nav>
+ <div class="logo">MovieFinder</div>
+ <div class="nav-links">
+ <a href="#search">Search</a>
+ <a href="#popular">Popular</a>
+ <a href="#about">About</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero" id="search">
+ <h1>Find Your Next Movie</h1>
+ <div class="search-container">
+ <input type="search" id="movieSearch" placeholder="Search for any movie..." aria-label="Search for movies">
+ <button type="button" id="searchButton" aria-label="Search">
+ <svg viewBox="0 0 24 24" class="search-icon">
+ <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>
+ </svg>
+ </button>
+ </div>
+ </section>
+
+ <section id="results" class="results-grid" aria-live="polite">
+ <!-- Movie results will be populated here -->
+ </section>
+
+ <section id="popular" class="popular-section">
+ <h2>Popular Right Now</h2>
+ <div class="popular-grid">
+ <!-- Popular movies will be populated here -->
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h3>MovieFinder</h3>
+ <p>Your universal movie search engine</p>
+ </div>
+ <div class="footer-section">
+ <h3>Quick Links</h3>
+ <a href="#search">Search</a>
+ <a href="#popular">Popular</a>
+ <a href="#about">About</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..2cf9584
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://moviefinder.scroll.pub
+metaTags
+ title Universal Movie Search - Find Any Movie
+ description Find information about any movie across all streaming platforms and theaters. Get ratings, reviews, cast details, and where to watch.
+ keywords movies, film search, movie database, streaming, watch movies
+editButton /edit.html
+title Universal Movie Search
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..94132e9
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01LWGHgN5uQsafCw43Y2kcTP",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a universal movie search website with a clean, modern design.\n\n---domain---\nmoviefinder.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://moviefinder.scroll.pub\nmetaTags\n title Universal Movie Search - Find Any Movie\n description Find information about any movie across all streaming platforms and theaters. Get ratings, reviews, cast details, and where to watch.\n keywords movies, film search, movie database, streaming, watch movies\neditButton /edit.html\ntitle Universal Movie Search\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">MovieFinder</div>\n <div class=\"nav-links\">\n <a href=\"#search\">Search</a>\n <a href=\"#popular\">Popular</a>\n <a href=\"#about\">About</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\" id=\"search\">\n <h1>Find Your Next Movie</h1>\n <div class=\"search-container\">\n <input type=\"search\" id=\"movieSearch\" placeholder=\"Search for any movie...\" aria-label=\"Search for movies\">\n <button type=\"button\" id=\"searchButton\" aria-label=\"Search\">\n <svg viewBox=\"0 0 24 24\" class=\"search-icon\">\n <path d=\"M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z\"/>\n </svg>\n </button>\n </div>\n </section>\n\n <section id=\"results\" class=\"results-grid\" aria-live=\"polite\">\n <!-- Movie results will be populated here -->\n </section>\n\n <section id=\"popular\" class=\"popular-section\">\n <h2>Popular Right Now</h2>\n <div class=\"popular-grid\">\n <!-- Popular movies will be populated here -->\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h3>MovieFinder</h3>\n <p>Your universal movie search engine</p>\n </div>\n <div class=\"footer-section\">\n <h3>Quick Links</h3>\n <a href=\"#search\">Search</a>\n <a href=\"#popular\">Popular</a>\n <a href=\"#about\">About</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2a2a72;\n --secondary-color: #009ffd;\n --text-color: #333;\n --background-color: #f5f5f5;\n --card-shadow: 0 4px 6px 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: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\nheader {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: white;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n margin-left: 2rem;\n transition: opacity 0.3s;\n}\n\n.nav-links a:hover {\n opacity: 0.8;\n}\n\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),\n url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"%232a2a72\"/></svg>');\n background-size: cover;\n color: white;\n text-align: center;\n padding: 2rem;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 2rem;\n animation: fadeIn 1s ease-out;\n}\n\n.search-container {\n display: flex;\n max-width: 600px;\n width: 90%;\n background: white;\n border-radius: 50px;\n overflow: hidden;\n box-shadow: var(--card-shadow);\n}\n\n#movieSearch {\n flex: 1;\n padding: 1rem 2rem;\n border: none;\n font-size: 1.1rem;\n}\n\n#searchButton {\n background: var(--secondary-color);\n border: none;\n padding: 1rem 2rem;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.search-icon {\n width: 24px;\n height: 24px;\n fill: white;\n}\n\n.results-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.movie-card {\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s;\n}\n\n.movie-card:hover {\n transform: translateY(-5px);\n}\n\n.movie-card img {\n width: 100%;\n height: 300px;\n object-fit: cover;\n}\n\n.movie-info {\n padding: 1rem;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n display: none;\n }\n \n .results-grid {\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const searchInput = document.getElementById('movieSearch');\n const searchButton = document.getElementById('searchButton');\n const resultsSection = document.getElementById('results');\n\n // Sample movie data (in real app, this would come from an API)\n const sampleMovies = [\n { title: 'Sample Movie 1', year: 2023, rating: 8.5 },\n { title: 'Sample Movie 2', year: 2023, rating: 7.9 },\n { title: 'Sample Movie 3', year: 2023, rating: 8.2 }\n ];\n\n function createMovieCard(movie) {\n return `\n <div class=\"movie-card\">\n <div class=\"movie-info\">\n <h3>${movie.title}</h3>\n <p>Year: ${movie.year}</p>\n <p>Rating: ${movie.rating}/10</p>\n </div>\n </div>\n `;\n }\n\n function handleSearch() {\n const searchTerm = searchInput.value.trim().toLowerCase();\n if (searchTerm.length < 2) return;\n\n // Filter movies (in real app, this would be an API call)\n const filteredMovies = sampleMovies.filter(movie => \n movie.title.toLowerCase().includes(searchTerm)\n );\n\n // Display results\n resultsSection.innerHTML = filteredMovies\n .map(movie => createMovieCard(movie))\n .join('');\n }\n\n // Event listeners\n searchButton.addEventListener('click', handleSearch);\n searchInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') handleSearch();\n });\n\n // Smooth scroll for navigation\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Animation on scroll\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = 1;\n entry.target.style.transform = 'translateY(0)';\n }\n });\n });\n\n document.querySelectorAll('.movie-card').forEach(card => {\n card.style.opacity = 0;\n card.style.transform = 'translateY(20px)';\n observer.observe(card);\n });\n});\n\n---end---\n\nThis implementation creates a beautiful, responsive movie search website with smooth animations, modern design, and proper semantic HTML. The design features:\n\n1. A fixed header with navigation\n2. A full-screen hero section with search\n3. A results grid with animated cards\n4. Smooth scrolling navigation\n5. Responsive design that works on all devices\n6. Accessibility features\n7. Modern CSS with variables and animations\n8. Clean, modular JavaScript\n9. SEO-friendly structure\n\nNote that this is a frontend-only implementation. In a real application, you'd need to connect to a movie database API to fetch real movie data."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2648
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..265f8b8
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# moviefinder.scroll.pub
+Website generated by Claude from prompt: Help me build a universal movie search website
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ce38fdf
--- /dev/null
+++ b/script.js
@@ -0,0 +1,71 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const searchInput = document.getElementById('movieSearch');
+ const searchButton = document.getElementById('searchButton');
+ const resultsSection = document.getElementById('results');
+
+ // Sample movie data (in real app, this would come from an API)
+ const sampleMovies = [
+ { title: 'Sample Movie 1', year: 2023, rating: 8.5 },
+ { title: 'Sample Movie 2', year: 2023, rating: 7.9 },
+ { title: 'Sample Movie 3', year: 2023, rating: 8.2 }
+ ];
+
+ function createMovieCard(movie) {
+ return `
+ <div class="movie-card">
+ <div class="movie-info">
+ <h3>${movie.title}</h3>
+ <p>Year: ${movie.year}</p>
+ <p>Rating: ${movie.rating}/10</p>
+ </div>
+ </div>
+ `;
+ }
+
+ function handleSearch() {
+ const searchTerm = searchInput.value.trim().toLowerCase();
+ if (searchTerm.length < 2) return;
+
+ // Filter movies (in real app, this would be an API call)
+ const filteredMovies = sampleMovies.filter(movie =>
+ movie.title.toLowerCase().includes(searchTerm)
+ );
+
+ // Display results
+ resultsSection.innerHTML = filteredMovies
+ .map(movie => createMovieCard(movie))
+ .join('');
+ }
+
+ // Event listeners
+ searchButton.addEventListener('click', handleSearch);
+ searchInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') handleSearch();
+ });
+
+ // Smooth scroll for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Animation on scroll
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = 1;
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ });
+
+ document.querySelectorAll('.movie-card').forEach(card => {
+ card.style.opacity = 0;
+ card.style.transform = 'translateY(20px)';
+ observer.observe(card);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..eaa8c94
--- /dev/null
+++ b/style.css
@@ -0,0 +1,156 @@
+:root {
+ --primary-color: #2a2a72;
+ --secondary-color: #009ffd;
+ --text-color: #333;
+ --background-color: #f5f5f5;
+ --card-shadow: 0 4px 6px rgba(0, 0, 0, 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-color: var(--background-color);
+}
+
+header {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: white;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: opacity 0.3s;
+}
+
+.nav-links a:hover {
+ opacity: 0.8;
+}
+
+.hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%232a2a72"/></svg>');
+ background-size: cover;
+ color: white;
+ text-align: center;
+ padding: 2rem;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 2rem;
+ animation: fadeIn 1s ease-out;
+}
+
+.search-container {
+ display: flex;
+ max-width: 600px;
+ width: 90%;
+ background: white;
+ border-radius: 50px;
+ overflow: hidden;
+ box-shadow: var(--card-shadow);
+}
+
+#movieSearch {
+ flex: 1;
+ padding: 1rem 2rem;
+ border: none;
+ font-size: 1.1rem;
+}
+
+#searchButton {
+ background: var(--secondary-color);
+ border: none;
+ padding: 1rem 2rem;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.search-icon {
+ width: 24px;
+ height: 24px;
+ fill: white;
+}
+
+.results-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.movie-card {
+ background: white;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: var(--card-shadow);
+ transition: transform 0.3s;
+}
+
+.movie-card:hover {
+ transform: translateY(-5px);
+}
+
+.movie-card img {
+ width: 100%;
+ height: 300px;
+ object-fit: cover;
+}
+
+.movie-info {
+ padding: 1rem;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .results-grid {
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ padding: 1rem;
+ }
+}