Last 10 Commits for wallhub.scroll.pub

commit 61e4b832083e8c794e322aa0f69f81940ee40d63 Author: root <root@hub.scroll.pub> Date: 2024-12-27 16:09:02 +0000 Subject: Initial commit diff --git a/.log.txt b/.log.txt new file mode 100644 index 0000000..603349a --- /dev/null +++ b/.log.txt @@ -0,0 +1,3 @@ +read wallhub.scroll.pub https://hub.scroll.pub/edit.html?folderName=wallhub.scroll.pub 1735315738077 ::ffff:175.157.180.153 0.0 200 Chrome.131 WindowsNT.10.0 +read wallhub.scroll.pub https://hub.scroll.pub/ls.json?folderName=wallhub.scroll.pub 1735315740044 ::ffff:175.157.180.153 0.0 200 Chrome.131 WindowsNT.10.0 +read wallhub.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=wallhub.scroll.pub&filePath=wallhub.scroll.pub%2Findex.scroll 1735315740376 ::ffff:175.157.180.153 0.0 200 Chrome.131 WindowsNT.10.0 diff --git a/.stats.json b/.stats.json new file mode 100644 index 0000000..283141f --- /dev/null +++ b/.stats.json @@ -0,0 +1,20 @@ +{ + "files": [ + "body.html", + "index.scroll", + "prompt.json", + "readme.scroll", + "script.js", + "style.css" + ], + "stats": { + "folder": "wallhub.scroll.pub", + "folderLink": "http://wallhub.scroll.pub", + "created": "2024-12-27T16:08:57.000Z", + "revised": "2024-12-27T16:08:57.000Z", + "files": 6, + "mb": 1, + "revisions": 1, + "hash": "2834bf37c3" + } +} \ No newline at end of file diff --git a/body.html b/body.html index ef2cdd5..41156b3 100644 --- a/body.html +++ b/body.html @@ -1,21 +1,37 @@ <header> - <h1>WallHub</h1> - <p>Discover stunning wallpapers for every device</p> + <nav> + <div class="logo">WallHub</div> + <div class="search-bar"> + <input type="search" id="search" placeholder="Search wallpapers..."> + <button id="searchBtn">Search</button> + </div> + <div class="categories"> + <button class="active" data-category="all">All</button> + <button data-category="nature">Nature</button> + <button data-category="abstract">Abstract</button> + <button data-category="minimal">Minimal</button> + </div> + </nav> </header> <main> - <section class="search"> - <input type="text" id="searchInput" placeholder="Search wallpapers..."> - <button id="searchBtn">Search</button> - </section> + <div class="filters"> + <select id="sortBy"> + <option value="latest">Latest</option> + <option value="popular">Popular</option> + </select> + </div> + + <div class="wallpaper-grid" id="wallpaperGrid"> +  + </div> - <section class="wallpapers" id="wallpapersContainer"> -  - </section> - - <button id="loadMore" class="load-more">Load More</button> + <div class="loading" id="loading"> + <div class="spinner"></div> + </div> </main> <footer> - <p>Powered by Pexels API</p> -</footer> \ No newline at end of file + <p>WallHub - Curated Wallpapers For Everyone</p> + <p>Powered by Unsplash API</p> +</footer> diff --git a/index.html b/index.html new file mode 100644 index 0000000..587cf3c --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>WallHub - Free Wallpaper Hub</title> + <script>/* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */</script> + <style>@media print {.doNotPrint {display: none !important;}}</style> + <link rel="canonical" href="https://wallhub.scroll.pub/index.html"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content=""> + <meta name="generator" content="Scroll v164.7.0"> + <meta property="og:title" content="WallHub - Free Wallpaper Hub"> + <meta property="og:description" content=""> + <meta property="og:image" content=""> + + <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll"> + + <meta name="twitter:card" content="summary_large_image"> +</head> +<body> +<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a> +<link rel="stylesheet" type="text/css" href="style.css"> +<header> + <h1>WallHub</h1> + <p>Discover stunning wallpapers for every device</p> +</header> + +<main> + <section class="search"> + <input type="text" id="searchInput" placeholder="Search wallpapers..."> + <button id="searchBtn">Search</button> + </section> + + <section class="wallpapers" id="wallpapersContainer"> +  + </section> + + <button id="loadMore" class="load-more">Load More</button> +</main> + +<footer> + <p>Powered by Pexels API</p> +</footer> +<script src="script.js"></script> +</body> +</html> \ No newline at end of file diff --git a/index.scroll b/index.scroll index bb4db12..c16c234 100644 --- a/index.scroll +++ b/index.scroll @@ -2,7 +2,7 @@ buildHtml baseUrl https://wallhub.scroll.pub metaTags editButton /edit.html -title WallHub - Free Wallpaper Hub +title WallHub - Beautiful Free Wallpapers style.css body.html -script.js \ No newline at end of file +script.js diff --git a/prompt.json b/prompt.json index f95c650..1d6bc7d 100644 --- a/prompt.json +++ b/prompt.json @@ -1,25 +1,20 @@ { - "id": "40ba897a-90b9-4f55-a371-9961205bd22e", - "object": "chat.completion", - "created": 1735315718, - "model": "deepseek-chat", - "choices": [ + "id": "msg_01DNVU1qj4dJ7MaGJ3VMY5wC", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ { - "index": 0, - "message": { - "role": "assistant", - "content": "---domain---\nwallhub.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://wallhub.scroll.pub\nmetaTags\neditButton /edit.html\ntitle WallHub - Free Wallpaper Hub\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>WallHub</h1>\n <p>Discover stunning wallpapers for every device</p>\n</header>\n\n<main>\n <section class=\"search\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"Search wallpapers...\">\n <button id=\"searchBtn\">Search</button>\n </section>\n\n <section class=\"wallpapers\" id=\"wallpapersContainer\">\n \n </section>\n\n <button id=\"loadMore\" class=\"load-more\">Load More</button>\n</main>\n\n<footer>\n <p>Powered by Pexels API</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #1a1a1a;\n --secondary-color: #ffffff;\n --accent-color: #ff4757;\n --bg-color: #0a0a0a;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n background-color: var(--bg-color);\n color: var(--secondary-color);\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--bg-color));\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.search {\n display: flex;\n justify-content: center;\n gap: 1rem;\n padding: 2rem;\n}\n\ninput[type=\"text\"] {\n padding: 0.8rem;\n border: 2px solid var(--primary-color);\n border-radius: 25px;\n width: 300px;\n background-color: var(--primary-color);\n color: var(--secondary-color);\n font-size: 1rem;\n}\n\nbutton {\n padding: 0.8rem 1.5rem;\n background-color: var(--accent-color);\n color: var(--secondary-color);\n border: none;\n border-radius: 25px;\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #ff6b81;\n}\n\n.wallpapers {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n padding: 2rem;\n}\n\n.wallpaper {\n position: relative;\n overflow: hidden;\n border-radius: 15px;\n aspect-ratio: 16/9;\n background-color: var(--primary-color);\n}\n\n.wallpaper img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}\n\n.wallpaper:hover img {\n transform: scale(1.1);\n}\n\n.load-more {\n margin: 2rem auto;\n display: block;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n margin-top: auto;\n background-color: var(--primary-color);\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n\n .search {\n flex-direction: column;\n align-items: center;\n }\n\n input[type=\"text\"] {\n width: 100%;\n }\n}\n---script.js---\nlet currentPage = 1;\nconst perPage = 15;\n\nasync function fetchWallpapers(query = '', page = 1) {\n const url = `https://api.pexels.com/v1/search?query=${query}&per_page=${perPage}&page=${page}`;\n \n try {\n const response = await fetch(url, {\n headers: {\n Authorization: 'YOUR_PEXELS_API_KEY'\n }\n });\n const data = await response.json();\n displayWallpapers(data.photos);\n } catch (error) {\n console.error('Error fetching wallpapers:', error);\n }\n}\n\nfunction displayWallpapers(photos) {\n const container = document.getElementById('wallpapersContainer');\n \n if (currentPage === 1) {\n container.innerHTML = '';\n }\n\n photos.forEach(photo => {\n const wallpaper = document.createElement('div');\n wallpaper.className = 'wallpaper';\n wallpaper.innerHTML = `\n <img src=\"${photo.src.large}\" alt=\"${photo.photographer}\">\n `;\n container.appendChild(wallpaper);\n });\n}\n\ndocument.getElementById('searchBtn').addEventListener('click', () => {\n const query = document.getElementById('searchInput').value;\n currentPage = 1;\n fetchWallpapers(query);\n});\n\ndocument.getElementById('loadMore').addEventListener('click', () => {\n const query = document.getElementById('searchInput').value;\n currentPage++;\n fetchWallpapers(query, currentPage);\n});\n\n// Initial load\nfetchWallpapers();\n---end---" - }, - "logprobs": null, - "finish_reason": "stop" + "type": "text", + "text": "I'll help create a wallpaper hub website. For the domain, I suggest:\n\n---domain---\nwallhub.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://wallhub.scroll.pub\nmetaTags\neditButton /edit.html\ntitle WallHub - Beautiful Free Wallpapers\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">WallHub</div>\n <div class=\"search-bar\">\n <input type=\"search\" id=\"search\" placeholder=\"Search wallpapers...\">\n <button id=\"searchBtn\">Search</button>\n </div>\n <div class=\"categories\">\n <button class=\"active\" data-category=\"all\">All</button>\n <button data-category=\"nature\">Nature</button>\n <button data-category=\"abstract\">Abstract</button>\n <button data-category=\"minimal\">Minimal</button>\n </div>\n </nav>\n</header>\n\n<main>\n <div class=\"filters\">\n <select id=\"sortBy\">\n <option value=\"latest\">Latest</option>\n <option value=\"popular\">Popular</option>\n </select>\n </div>\n \n <div class=\"wallpaper-grid\" id=\"wallpaperGrid\">\n \n </div>\n\n <div class=\"loading\" id=\"loading\">\n <div class=\"spinner\"></div>\n </div>\n</main>\n\n<footer>\n <p>WallHub - Curated Wallpapers For Everyone</p>\n <p>Powered by Unsplash API</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a2a72;\n --secondary: #009ffd;\n --text: #333;\n --bg: #f5f5f5;\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, sans-serif;\n background: var(--bg);\n color: var(--text);\n line-height: 1.6;\n}\n\nheader {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n padding: 1rem;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.logo {\n font-size: 2rem;\n font-weight: bold;\n color: white;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n}\n\n.search-bar {\n display: flex;\n gap: 0.5rem;\n}\n\ninput[type=\"search\"] {\n flex: 1;\n padding: 0.8rem;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n}\n\nbutton {\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 25px;\n background: var(--primary);\n color: white;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n}\n\n.categories {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n}\n\n.categories button {\n background: rgba(255,255,255,0.2);\n}\n\n.categories button.active {\n background: white;\n color: var(--primary);\n}\n\n.wallpaper-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 1.5rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.wallpaper-card {\n position: relative;\n border-radius: 15px;\n overflow: hidden;\n transition: transform 0.3s;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n}\n\n.wallpaper-card:hover {\n transform: translateY(-5px);\n}\n\n.wallpaper-card img {\n width: 100%;\n height: 200px;\n object-fit: cover;\n}\n\n.loading {\n text-align: center;\n padding: 2rem;\n}\n\n.spinner {\n width: 50px;\n height: 50px;\n border: 5px solid var(--bg);\n border-top-color: var(--secondary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n nav {\n gap: 1.5rem;\n }\n \n .wallpaper-grid {\n padding: 1rem;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n }\n}\n\n---script.js---\nconst API_KEY = 'YOUR_UNSPLASH_API_KEY'; // Replace with actual API key\nconst wallpaperGrid = document.getElementById('wallpaperGrid');\nconst loading = document.getElementById('loading');\nlet page = 1;\n\nasync function fetchWallpapers(query = '') {\n loading.style.display = 'block';\n try {\n const url = query\n ? `https://api.unsplash.com/search/photos?page=${page}&query=${query}&per_page=20`\n : `https://api.unsplash.com/photos?page=${page}&per_page=20`;\n \n const response = await fetch(url, {\n headers: {\n 'Authorization': `Client-ID ${API_KEY}`\n }\n });\n \n const data = await response.json();\n const images = query ? data.results : data;\n \n images.forEach(image => {\n const card = createWallpaperCard(image);\n wallpaperGrid.appendChild(card);\n });\n } catch (error) {\n console.error('Error fetching wallpapers:', error);\n } finally {\n loading.style.display = 'none';\n }\n}\n\nfunction createWallpaperCard(image) {\n const card = document.createElement('div');\n card.className = 'wallpaper-card';\n \n const img = document.createElement('img');\n img.src = image.urls.regular;\n img.alt = image.alt_description || 'Wallpaper';\n img.loading = 'lazy';\n \n card.appendChild(img);\n \n card.addEventListener('click', () => {\n window.open(image.urls.full, '_blank');\n });\n \n return card;\n}\n\n// Infinite scroll\nwindow.addEventListener('scroll', () => {\n if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000) {\n page++;\n fetchWallpapers();\n }\n});\n\n// Search functionality\nconst searchBtn = document.getElementById('searchBtn');\nconst searchInput = document.getElementById('search');\n\nsearchBtn.addEventListener('click', () => {\n const query = searchInput.value.trim();\n wallpaperGrid.innerHTML = '';\n page = 1;\n fetchWallpapers(query);\n});\n\nsearchInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n searchBtn.click();\n }\n});\n\n// Category filters\ndocument.querySelectorAll('.categories button').forEach(button => {\n button.addEventListener('click', () => {\n document.querySelector('.categories .active').classList.remove('active');\n button.classList.add('active');\n wallpaperGrid.innerHTML = '';\n page = 1;\n fetchWallpapers(button.dataset.category === 'all' ? '' : button.dataset.category);\n });\n});\n\n// Initial load\nfetchWallpapers();\n\n---end---\n\nThis implementation creates a beautiful, responsive wallpaper hub website that:\n- Uses the Unsplash API to fetch high-quality images\n- Features infinite scroll for continuous loading\n- Includes search functionality\n- Has category filtering\n- Implements a clean, modern design with smooth animations\n- Is fully responsive for all screen sizes\n- Includes loading states and error handling\n- Uses semantic HTML and follows accessibility guidelines\n\nNote: You'll need to replace 'YOUR_UNSPLASH_API_KEY' in the JavaScript with an actual Unsplash API key to make it work." } ], + "stop_reason": "end_turn", + "stop_sequence": null, "usage": { - "prompt_tokens": 251, - "completion_tokens": 1164, - "total_tokens": 1415, - "prompt_cache_hit_tokens": 0, - "prompt_cache_miss_tokens": 251 - }, - "system_fingerprint": "fp_f1afce2943" + "input_tokens": 291, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2280 + } } \ No newline at end of file diff --git a/readme.scroll b/readme.scroll index 9cb0105..5c4d71e 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # wallhub.scroll.pub -Website generated by DeepSeek from prompt: i want a website that have serve as a wallpaper hub. use some free wallpaper api \ No newline at end of file +Website generated by Claude from prompt: i want a website that have serve as a wallpaper hub. use some free wallpaper api \ No newline at end of file diff --git a/script.js b/script.js index 094e562..5d7c204 100644 --- a/script.js +++ b/script.js @@ -1,50 +1,88 @@ -let currentPage = 1; -const perPage = 15; +const API_KEY = 'YOUR_UNSPLASH_API_KEY'; // Replace with actual API key +const wallpaperGrid = document.getElementById('wallpaperGrid'); +const loading = document.getElementById('loading'); +let page = 1; -async function fetchWallpapers(query = '', page = 1) { - const url = `https://api.pexels.com/v1/search?query=${query}&per_page=${perPage}&page=${page}`; - +async function fetchWallpapers(query = '') { + loading.style.display = 'block'; try { + const url = query + ? `https://api.unsplash.com/search/photos?page=${page}&query=${query}&per_page=20` + : `https://api.unsplash.com/photos?page=${page}&per_page=20`; + const response = await fetch(url, { headers: { - Authorization: 'YOUR_PEXELS_API_KEY' + 'Authorization': `Client-ID ${API_KEY}` } }); + const data = await response.json(); - displayWallpapers(data.photos); + const images = query ? data.results : data; + + images.forEach(image => { + const card = createWallpaperCard(image); + wallpaperGrid.appendChild(card); + }); } catch (error) { console.error('Error fetching wallpapers:', error); + } finally { + loading.style.display = 'none'; } } -function displayWallpapers(photos) { - const container = document.getElementById('wallpapersContainer'); +function createWallpaperCard(image) { + const card = document.createElement('div'); + card.className = 'wallpaper-card'; - if (currentPage === 1) { - container.innerHTML = ''; - } - - photos.forEach(photo => { - const wallpaper = document.createElement('div'); - wallpaper.className = 'wallpaper'; - wallpaper.innerHTML = ` - <img src="${photo.src.large}" alt="${photo.photographer}"> - `; - container.appendChild(wallpaper); + const img = document.createElement('img'); + img.src = image.urls.regular; + img.alt = image.alt_description || 'Wallpaper'; + img.loading = 'lazy'; + + card.appendChild(img); + + card.addEventListener('click', () => { + window.open(image.urls.full, '_blank'); }); + + return card; } -document.getElementById('searchBtn').addEventListener('click', () => { - const query = document.getElementById('searchInput').value; - currentPage = 1; +// Infinite scroll +window.addEventListener('scroll', () => { + if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000) { + page++; + fetchWallpapers(); + } +}); + +// Search functionality +const searchBtn = document.getElementById('searchBtn'); +const searchInput = document.getElementById('search'); + +searchBtn.addEventListener('click', () => { + const query = searchInput.value.trim(); + wallpaperGrid.innerHTML = ''; + page = 1; fetchWallpapers(query); }); -document.getElementById('loadMore').addEventListener('click', () => { - const query = document.getElementById('searchInput').value; - currentPage++; - fetchWallpapers(query, currentPage); +searchInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + searchBtn.click(); + } +}); + +// Category filters +document.querySelectorAll('.categories button').forEach(button => { + button.addEventListener('click', () => { + document.querySelector('.categories .active').classList.remove('active'); + button.classList.add('active'); + wallpaperGrid.innerHTML = ''; + page = 1; + fetchWallpapers(button.dataset.category === 'all' ? '' : button.dataset.category); + }); }); // Initial load -fetchWallpapers(); \ No newline at end of file +fetchWallpapers(); diff --git a/style.css b/style.css index c0b0c38..7a78aa7 100644 --- a/style.css +++ b/style.css @@ -1,8 +1,8 @@ :root { - --primary-color: #1a1a1a; - --secondary-color: #ffffff; - --accent-color: #ff4757; - --bg-color: #0a0a0a; + --primary: #2a2a72; + --secondary: #009ffd; + --text: #333; + --bg: #f5f5f5; } * { @@ -12,107 +12,135 @@ } body { - font-family: 'Segoe UI', sans-serif; - background-color: var(--bg-color); - color: var(--secondary-color); + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: var(--bg); + color: var(--text); line-height: 1.6; - min-height: 100vh; - display: flex; - flex-direction: column; } header { - text-align: center; - padding: 2rem; - background: linear-gradient(135deg, var(--primary-color), var(--bg-color)); + background: linear-gradient(135deg, var(--primary), var(--secondary)); + padding: 1rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +nav { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1rem; } -h1 { - font-size: 2.5rem; - margin-bottom: 0.5rem; +.logo { + font-size: 2rem; + font-weight: bold; + color: white; + text-shadow: 2px 2px 4px rgba(0,0,0,0.2); } -.search { +.search-bar { display: flex; - justify-content: center; - gap: 1rem; - padding: 2rem; + gap: 0.5rem; } -input[type="text"] { +input[type="search"] { + flex: 1; padding: 0.8rem; - border: 2px solid var(--primary-color); + border: none; border-radius: 25px; - width: 300px; - background-color: var(--primary-color); - color: var(--secondary-color); font-size: 1rem; } button { padding: 0.8rem 1.5rem; - background-color: var(--accent-color); - color: var(--secondary-color); border: none; border-radius: 25px; + background: var(--primary); + color: white; cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s ease; + transition: transform 0.2s; } button:hover { - background-color: #ff6b81; + transform: translateY(-2px); +} + +.categories { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.categories button { + background: rgba(255,255,255,0.2); +} + +.categories button.active { + background: white; + color: var(--primary); } -.wallpapers { +.wallpaper-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1.5rem; padding: 2rem; + max-width: 1200px; + margin: 0 auto; } -.wallpaper { +.wallpaper-card { position: relative; - overflow: hidden; border-radius: 15px; - aspect-ratio: 16/9; - background-color: var(--primary-color); + overflow: hidden; + transition: transform 0.3s; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); +} + +.wallpaper-card:hover { + transform: translateY(-5px); } -.wallpaper img { +.wallpaper-card img { width: 100%; - height: 100%; + height: 200px; object-fit: cover; - transition: transform 0.3s ease; } -.wallpaper:hover img { - transform: scale(1.1); +.loading { + text-align: center; + padding: 2rem; +} + +.spinner { + width: 50px; + height: 50px; + border: 5px solid var(--bg); + border-top-color: var(--secondary); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto; } -.load-more { - margin: 2rem auto; - display: block; +@keyframes spin { + to { transform: rotate(360deg); } } footer { text-align: center; - padding: 1rem; - margin-top: auto; - background-color: var(--primary-color); + padding: 2rem; + background: white; + margin-top: 2rem; } @media (max-width: 768px) { - h1 { - font-size: 2rem; + nav { + gap: 1.5rem; } - - .search { - flex-direction: column; - align-items: center; - } - - input[type="text"] { - width: 100%; + + .wallpaper-grid { + padding: 1rem; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } -} \ No newline at end of file +}

commit 2834bf37c3bc0e7412b038aa116d83b7f89de840 Author: root <root@hub.scroll.pub> Date: 2024-12-27 16:08:57 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..ef2cdd5 --- /dev/null +++ b/body.html @@ -0,0 +1,21 @@ +<header> + <h1>WallHub</h1> + <p>Discover stunning wallpapers for every device</p> +</header> + +<main> + <section class="search"> + <input type="text" id="searchInput" placeholder="Search wallpapers..."> + <button id="searchBtn">Search</button> + </section> + + <section class="wallpapers" id="wallpapersContainer"> +  + </section> + + <button id="loadMore" class="load-more">Load More</button> +</main> + +<footer> + <p>Powered by Pexels API</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..bb4db12 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://wallhub.scroll.pub +metaTags +editButton /edit.html +title WallHub - Free Wallpaper Hub +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..f95c650 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "40ba897a-90b9-4f55-a371-9961205bd22e", + "object": "chat.completion", + "created": 1735315718, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nwallhub.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://wallhub.scroll.pub\nmetaTags\neditButton /edit.html\ntitle WallHub - Free Wallpaper Hub\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>WallHub</h1>\n <p>Discover stunning wallpapers for every device</p>\n</header>\n\n<main>\n <section class=\"search\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"Search wallpapers...\">\n <button id=\"searchBtn\">Search</button>\n </section>\n\n <section class=\"wallpapers\" id=\"wallpapersContainer\">\n \n </section>\n\n <button id=\"loadMore\" class=\"load-more\">Load More</button>\n</main>\n\n<footer>\n <p>Powered by Pexels API</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #1a1a1a;\n --secondary-color: #ffffff;\n --accent-color: #ff4757;\n --bg-color: #0a0a0a;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n background-color: var(--bg-color);\n color: var(--secondary-color);\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--bg-color));\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.search {\n display: flex;\n justify-content: center;\n gap: 1rem;\n padding: 2rem;\n}\n\ninput[type=\"text\"] {\n padding: 0.8rem;\n border: 2px solid var(--primary-color);\n border-radius: 25px;\n width: 300px;\n background-color: var(--primary-color);\n color: var(--secondary-color);\n font-size: 1rem;\n}\n\nbutton {\n padding: 0.8rem 1.5rem;\n background-color: var(--accent-color);\n color: var(--secondary-color);\n border: none;\n border-radius: 25px;\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #ff6b81;\n}\n\n.wallpapers {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n padding: 2rem;\n}\n\n.wallpaper {\n position: relative;\n overflow: hidden;\n border-radius: 15px;\n aspect-ratio: 16/9;\n background-color: var(--primary-color);\n}\n\n.wallpaper img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}\n\n.wallpaper:hover img {\n transform: scale(1.1);\n}\n\n.load-more {\n margin: 2rem auto;\n display: block;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n margin-top: auto;\n background-color: var(--primary-color);\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n\n .search {\n flex-direction: column;\n align-items: center;\n }\n\n input[type=\"text\"] {\n width: 100%;\n }\n}\n---script.js---\nlet currentPage = 1;\nconst perPage = 15;\n\nasync function fetchWallpapers(query = '', page = 1) {\n const url = `https://api.pexels.com/v1/search?query=${query}&per_page=${perPage}&page=${page}`;\n \n try {\n const response = await fetch(url, {\n headers: {\n Authorization: 'YOUR_PEXELS_API_KEY'\n }\n });\n const data = await response.json();\n displayWallpapers(data.photos);\n } catch (error) {\n console.error('Error fetching wallpapers:', error);\n }\n}\n\nfunction displayWallpapers(photos) {\n const container = document.getElementById('wallpapersContainer');\n \n if (currentPage === 1) {\n container.innerHTML = '';\n }\n\n photos.forEach(photo => {\n const wallpaper = document.createElement('div');\n wallpaper.className = 'wallpaper';\n wallpaper.innerHTML = `\n <img src=\"${photo.src.large}\" alt=\"${photo.photographer}\">\n `;\n container.appendChild(wallpaper);\n });\n}\n\ndocument.getElementById('searchBtn').addEventListener('click', () => {\n const query = document.getElementById('searchInput').value;\n currentPage = 1;\n fetchWallpapers(query);\n});\n\ndocument.getElementById('loadMore').addEventListener('click', () => {\n const query = document.getElementById('searchInput').value;\n currentPage++;\n fetchWallpapers(query, currentPage);\n});\n\n// Initial load\nfetchWallpapers();\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 251, + "completion_tokens": 1164, + "total_tokens": 1415, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 251 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..9cb0105 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# wallhub.scroll.pub +Website generated by DeepSeek from prompt: i want a website that have serve as a wallpaper hub. use some free wallpaper api \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..094e562 --- /dev/null +++ b/script.js @@ -0,0 +1,50 @@ +let currentPage = 1; +const perPage = 15; + +async function fetchWallpapers(query = '', page = 1) { + const url = `https://api.pexels.com/v1/search?query=${query}&per_page=${perPage}&page=${page}`; + + try { + const response = await fetch(url, { + headers: { + Authorization: 'YOUR_PEXELS_API_KEY' + } + }); + const data = await response.json(); + displayWallpapers(data.photos); + } catch (error) { + console.error('Error fetching wallpapers:', error); + } +} + +function displayWallpapers(photos) { + const container = document.getElementById('wallpapersContainer'); + + if (currentPage === 1) { + container.innerHTML = ''; + } + + photos.forEach(photo => { + const wallpaper = document.createElement('div'); + wallpaper.className = 'wallpaper'; + wallpaper.innerHTML = ` + <img src="${photo.src.large}" alt="${photo.photographer}"> + `; + container.appendChild(wallpaper); + }); +} + +document.getElementById('searchBtn').addEventListener('click', () => { + const query = document.getElementById('searchInput').value; + currentPage = 1; + fetchWallpapers(query); +}); + +document.getElementById('loadMore').addEventListener('click', () => { + const query = document.getElementById('searchInput').value; + currentPage++; + fetchWallpapers(query, currentPage); +}); + +// Initial load +fetchWallpapers(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c0b0c38 --- /dev/null +++ b/style.css @@ -0,0 +1,118 @@ +:root { + --primary-color: #1a1a1a; + --secondary-color: #ffffff; + --accent-color: #ff4757; + --bg-color: #0a0a0a; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', sans-serif; + background-color: var(--bg-color); + color: var(--secondary-color); + line-height: 1.6; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + text-align: center; + padding: 2rem; + background: linear-gradient(135deg, var(--primary-color), var(--bg-color)); +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.search { + display: flex; + justify-content: center; + gap: 1rem; + padding: 2rem; +} + +input[type="text"] { + padding: 0.8rem; + border: 2px solid var(--primary-color); + border-radius: 25px; + width: 300px; + background-color: var(--primary-color); + color: var(--secondary-color); + font-size: 1rem; +} + +button { + padding: 0.8rem 1.5rem; + background-color: var(--accent-color); + color: var(--secondary-color); + border: none; + border-radius: 25px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #ff6b81; +} + +.wallpapers { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1rem; + padding: 2rem; +} + +.wallpaper { + position: relative; + overflow: hidden; + border-radius: 15px; + aspect-ratio: 16/9; + background-color: var(--primary-color); +} + +.wallpaper img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.wallpaper:hover img { + transform: scale(1.1); +} + +.load-more { + margin: 2rem auto; + display: block; +} + +footer { + text-align: center; + padding: 1rem; + margin-top: auto; + background-color: var(--primary-color); +} + +@media (max-width: 768px) { + h1 { + font-size: 2rem; + } + + .search { + flex-direction: column; + align-items: center; + } + + input[type="text"] { + width: 100%; + } +} \ No newline at end of file