commit c68a220b642a71b732f65401c9fc3d48c0daa26e
Author: root <root@hub.scroll.pub> Date: 2025-01-07 03:31:44 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..a198830 --- /dev/null +++ b/body.html @@ -0,0 +1,18 @@ +<header class="header"> + <h1>Universal Movie Search</h1> + <p>Find any movie, anytime, anywhere</p> + <form id="search-form" class="search-form"> + <input type="text" id="search-input" placeholder="Enter movie title..." aria-label="Search movies"> + <button type="submit">Search</button> + </form> +</header> + +<main class="main-content"> + <div id="results" class="results-grid"></div> + <div id="loading" class="loading hidden">Loading...</div> + <div id="error" class="error hidden"></div> +</main> + +<footer class="footer"> + <p>Made with ❤️ for movie lovers everywhere</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..ff72976 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://moviefinder.scroll.pub +metaTags +editButton /edit.html +title Universal Movie Search +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..a1812d2 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "1a91e543-fed6-4d67-b250-7bc61ecf814f", + "object": "chat.completion", + "created": 1736220679, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nmoviefinder.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://moviefinder.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Universal Movie Search\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header class=\"header\">\n <h1>Universal Movie Search</h1>\n <p>Find any movie, anytime, anywhere</p>\n <form id=\"search-form\" class=\"search-form\">\n <input type=\"text\" id=\"search-input\" placeholder=\"Enter movie title...\" aria-label=\"Search movies\">\n <button type=\"submit\">Search</button>\n </form>\n</header>\n\n<main class=\"main-content\">\n <div id=\"results\" class=\"results-grid\"></div>\n <div id=\"loading\" class=\"loading hidden\">Loading...</div>\n <div id=\"error\" class=\"error hidden\"></div>\n</main>\n\n<footer class=\"footer\">\n <p>Made with ❤️ for movie lovers everywhere</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #ff6b6b;\n --secondary-color: #4ecdc4;\n --background-color: #1a1a1a;\n --text-color: #f5f5f5;\n --card-bg: #2d2d2d;\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-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.header {\n text-align: center;\n padding: 4rem 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n margin-bottom: 2rem;\n}\n\n.header h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n}\n\n.search-form {\n max-width: 600px;\n margin: 2rem auto 0;\n display: flex;\n gap: 0.5rem;\n}\n\n.search-form input {\n flex: 1;\n padding: 0.75rem;\n border: none;\n border-radius: 4px;\n font-size: 1rem;\n}\n\n.search-form button {\n padding: 0.75rem 1.5rem;\n background-color: var(--card-bg);\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.search-form button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n}\n\n.results-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 2rem;\n padding: 1rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.movie-card {\n background: var(--card-bg);\n border-radius: 8px;\n overflow: hidden;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.movie-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 16px rgba(0,0,0,0.3);\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.movie-info h3 {\n margin-bottom: 0.5rem;\n color: var(--primary-color);\n}\n\n.movie-info p {\n font-size: 0.9rem;\n color: #ccc;\n}\n\n.loading {\n text-align: center;\n font-size: 1.2rem;\n padding: 2rem;\n}\n\n.error {\n color: var(--primary-color);\n text-align: center;\n padding: 2rem;\n}\n\n.footer {\n text-align: center;\n padding: 2rem;\n margin-top: auto;\n background-color: var(--card-bg);\n}\n\n@media (max-width: 768px) {\n .header h1 {\n font-size: 2rem;\n }\n \n .search-form {\n flex-direction: column;\n }\n \n .search-form button {\n width: 100%;\n }\n \n .results-grid {\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n }\n}\n---script.js---\nconst API_URL = 'https://api.themoviedb.org/3/search/movie';\nconst API_KEY = 'YOUR_TMDB_API_KEY'; // Replace with your actual API key\n\nconst form = document.getElementById('search-form');\nconst searchInput = document.getElementById('search-input');\nconst resultsContainer = document.getElementById('results');\nconst loading = document.getElementById('loading');\nconst errorContainer = document.getElementById('error');\n\nform.addEventListener('submit', async (e) => {\n e.preventDefault();\n const query = searchInput.value.trim();\n \n if (!query) {\n errorContainer.textContent = 'Please enter a search term';\n errorContainer.classList.remove('hidden');\n return;\n }\n\n try {\n loading.classList.remove('hidden');\n errorContainer.classList.add('hidden');\n resultsContainer.innerHTML = '';\n \n const response = await fetch(`${API_URL}?api_key=${API_KEY}&query=${encodeURIComponent(query)}`);\n const data = await response.json();\n \n if (data.results.length === 0) {\n errorContainer.textContent = 'No movies found';\n errorContainer.classList.remove('hidden');\n return;\n }\n \n displayResults(data.results);\n } catch (err) {\n errorContainer.textContent = 'An error occurred while fetching data';\n errorContainer.classList.remove('hidden');\n } finally {\n loading.classList.add('hidden');\n }\n});\n\nfunction displayResults(movies) {\n resultsContainer.innerHTML = movies.map(movie => `\n <div class=\"movie-card\">\n <img src=\"https://image.tmdb.org/t/p/w500${movie.poster_path}\" alt=\"${movie.title}\">\n <div class=\"movie-info\">\n <h3>${movie.title}</h3>\n <p>${movie.overview.substring(0, 100)}...</p>\n <p>Rating: ${movie.vote_average}</p>\n <p>Release: ${movie.release_date}</p>\n </div>\n </div>\n `).join('');\n}\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 242, + "completion_tokens": 1491, + "total_tokens": 1733, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 242 + }, + "system_fingerprint": "fp_3a5770e1b4" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..97114a8 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# moviefinder1.scroll.pub +Website generated by DeepSeek 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..3857710 --- /dev/null +++ b/script.js @@ -0,0 +1,55 @@ +const API_URL = 'https://api.themoviedb.org/3/search/movie'; +const API_KEY = 'YOUR_TMDB_API_KEY'; // Replace with your actual API key + +const form = document.getElementById('search-form'); +const searchInput = document.getElementById('search-input'); +const resultsContainer = document.getElementById('results'); +const loading = document.getElementById('loading'); +const errorContainer = document.getElementById('error'); + +form.addEventListener('submit', async (e) => { + e.preventDefault(); + const query = searchInput.value.trim(); + + if (!query) { + errorContainer.textContent = 'Please enter a search term'; + errorContainer.classList.remove('hidden'); + return; + } + + try { + loading.classList.remove('hidden'); + errorContainer.classList.add('hidden'); + resultsContainer.innerHTML = ''; + + const response = await fetch(`${API_URL}?api_key=${API_KEY}&query=${encodeURIComponent(query)}`); + const data = await response.json(); + + if (data.results.length === 0) { + errorContainer.textContent = 'No movies found'; + errorContainer.classList.remove('hidden'); + return; + } + + displayResults(data.results); + } catch (err) { + errorContainer.textContent = 'An error occurred while fetching data'; + errorContainer.classList.remove('hidden'); + } finally { + loading.classList.add('hidden'); + } +}); + +function displayResults(movies) { + resultsContainer.innerHTML = movies.map(movie => ` + <div class="movie-card"> + <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}"> + <div class="movie-info"> + <h3>${movie.title}</h3> + <p>${movie.overview.substring(0, 100)}...</p> + <p>Rating: ${movie.vote_average}</p> + <p>Release: ${movie.release_date}</p> + </div> + </div> + `).join(''); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e8a1980 --- /dev/null +++ b/style.css @@ -0,0 +1,145 @@ +:root { + --primary-color: #ff6b6b; + --secondary-color: #4ecdc4; + --background-color: #1a1a1a; + --text-color: #f5f5f5; + --card-bg: #2d2d2d; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.header { + text-align: center; + padding: 4rem 1rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; + margin-bottom: 2rem; +} + +.header h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; + text-shadow: 2px 2px 4px rgba(0,0,0,0.2); +} + +.search-form { + max-width: 600px; + margin: 2rem auto 0; + display: flex; + gap: 0.5rem; +} + +.search-form input { + flex: 1; + padding: 0.75rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} + +.search-form button { + padding: 0.75rem 1.5rem; + background-color: var(--card-bg); + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; +} + +.search-form button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0,0,0,0.2); +} + +.results-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 2rem; + padding: 1rem; + max-width: 1200px; + margin: 0 auto; +} + +.movie-card { + background: var(--card-bg); + border-radius: 8px; + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.movie-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0,0,0,0.3); +} + +.movie-card img { + width: 100%; + height: 300px; + object-fit: cover; +} + +.movie-info { + padding: 1rem; +} + +.movie-info h3 { + margin-bottom: 0.5rem; + color: var(--primary-color); +} + +.movie-info p { + font-size: 0.9rem; + color: #ccc; +} + +.loading { + text-align: center; + font-size: 1.2rem; + padding: 2rem; +} + +.error { + color: var(--primary-color); + text-align: center; + padding: 2rem; +} + +.footer { + text-align: center; + padding: 2rem; + margin-top: auto; + background-color: var(--card-bg); +} + +@media (max-width: 768px) { + .header h1 { + font-size: 2rem; + } + + .search-form { + flex-direction: column; + } + + .search-form button { + width: 100%; + } + + .results-grid { + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + } +} \ No newline at end of file