Find Your Next Movie
\n\n \n \n
\n Popular Right Now
\n\n \n
\n 
body.html
index.scroll
Changed around line 1
+ 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
prompt.json
Changed around line 1
+ {
+ "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\n \n \n\n\n \n \n\n \n \n \n\n \n \n \n\n\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,');\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
\n
\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."\n
\n ${movie.title}
\nYear: ${movie.year}
\nRating: ${movie.rating}/10
\n+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2648
+ }
+ }
readme.scroll
Changed around line 1
+ # moviefinder.scroll.pub
+ Website generated by Claude from prompt: Help me build a universal movie search website
script.js
Changed around line 1
+ 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 `
+
+
+
${movie.title}
+
Year: ${movie.year}
+
Rating: ${movie.rating}/10
+
+
+ `;
+ }
+
+ 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);
+ });
+ });
style.css
Changed around line 1
+ :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,');
+ 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;
+ }
+ }