Changes to tvrank.scroll.pub

root

26 days ago

Initial commit

body.html

Changed around line 1
+ 
+     TV Rankings Today
+     
+         
+         
+         
+         
+     
+ 
+ 
+ 
+     
+         
+             Sort by:
+             
+         
+     
+ 
+     
+         Loading TV Shows...
+     
+ 
+ 
+ 
+     TV Rankings updates daily with the latest UK television schedules and reviews
+     
+         About
+         Privacy
+         Contact
+     
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://tvrank.scroll.pub
+ metaTags
+ editButton /edit.html
+ title TV Show Rankings | UK Television Guide
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01NujKvCvM74QmogJQEBsYvo",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll help create this TV guide ranking website. For the domain, I suggest:\n\n---domain---\ntvrank.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://tvrank.scroll.pub\nmetaTags\neditButton /edit.html\ntitle TV Show Rankings | UK Television Guide\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n    TV Rankings Today\n    \n        \n        \n        \n        \n    \n\n\n\n    \n        \n            Sort by:\n            \n        
\n    \n\n    \n        Loading TV Shows...
\n    \n\n\n\n    TV Rankings updates daily with the latest UK television schedules and reviews
\n    \n        About\n        Privacy\n        Contact\n    \n\n\n---style.css---\n:root {\n    --primary-color: #2c3e50;\n    --secondary-color: #3498db;\n    --background-color: #f9f9f9;\n    --card-background: #ffffff;\n    --text-color: #333333;\n    --shadow: 0 2px 8px 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-Sans, Ubuntu, Cantarell, sans-serif;\n    line-height: 1.6;\n    color: var(--text-color);\n    background: var(--background-color);\n}\n\n.main-header {\n    background: var(--primary-color);\n    color: white;\n    padding: 2rem 1rem;\n    text-align: center;\n}\n\n.main-header h1 {\n    margin-bottom: 1.5rem;\n    font-size: 2.5rem;\n    font-weight: 700;\n}\n\nnav {\n    display: flex;\n    justify-content: center;\n    gap: 1rem;\n    flex-wrap: wrap;\n}\n\n.genre-filter {\n    padding: 0.5rem 1rem;\n    border: none;\n    border-radius: 25px;\n    background: transparent;\n    color: white;\n    border: 2px solid rgba(255,255,255,0.3);\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.genre-filter.active {\n    background: var(--secondary-color);\n    border-color: var(--secondary-color);\n}\n\n.filters {\n    padding: 1rem;\n    background: white;\n    box-shadow: var(--shadow);\n    margin: 1rem;\n    border-radius: 8px;\n}\n\n.sort-controls {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n}\n\nselect {\n    padding: 0.5rem;\n    border-radius: 4px;\n    border: 1px solid #ddd;\n}\n\n.shows-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 2rem;\n    padding: 2rem;\n}\n\n.show-card {\n    background: var(--card-background);\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: var(--shadow);\n    transition: transform 0.3s ease;\n}\n\n.show-card:hover {\n    transform: translateY(-5px);\n}\n\n.show-card img {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n}\n\n.show-info {\n    padding: 1.5rem;\n}\n\n.show-title {\n    font-size: 1.25rem;\n    margin-bottom: 0.5rem;\n    color: var(--primary-color);\n}\n\n.show-meta {\n    display: flex;\n    justify-content: space-between;\n    color: #666;\n    font-size: 0.9rem;\n    margin-bottom: 1rem;\n}\n\n.rating {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-weight: bold;\n    color: var(--secondary-color);\n}\n\n.loading-spinner {\n    grid-column: 1 / -1;\n    text-align: center;\n    padding: 2rem;\n    color: var(--primary-color);\n}\n\nfooter {\n    background: var(--primary-color);\n    color: white;\n    padding: 2rem;\n    text-align: center;\n    margin-top: 2rem;\n}\n\nfooter nav a {\n    color: white;\n    text-decoration: none;\n    margin: 0 1rem;\n}\n\n@media (max-width: 768px) {\n    .shows-grid {\n        padding: 1rem;\n        gap: 1rem;\n    }\n    \n    .main-header h1 {\n        font-size: 2rem;\n    }\n    \n    .genre-filter {\n        font-size: 0.9rem;\n        padding: 0.4rem 0.8rem;\n    }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n    let shows = [];\n    let currentGenre = 'all';\n\n    // Simulated TV show data fetch\n    async function fetchTVShows() {\n        try {\n            // In reality, this would be an API call\n            const response = await new Promise(resolve => setTimeout(() => {\n                resolve({\n                    shows: [\n                        {\n                            title: \"Doctor Who\",\n                            genre: \"drama\",\n                            time: \"19:00\",\n                            rating: 8.9,\n                            channel: \"BBC One\",\n                            image: \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%233498db'/%3E%3C/svg%3E\"\n                        },\n                        // Add more shows here\n                    ]\n                });\n            }, 1000));\n            \n            shows = response.shows;\n            renderShows();\n        } catch (error) {\n            console.error('Error fetching shows:', error);\n            document.getElementById('shows-container').innerHTML = \n                'Error loading shows. Please try again later.
';\n        }\n    }\n\n    function renderShows() {\n        const container = document.getElementById('shows-container');\n        const filteredShows = shows.filter(show => \n            currentGenre === 'all' || show.genre === currentGenre\n        );\n\n        const showsHTML = filteredShows.map(show => `\n            \n                \n                \n                    ${show.title}\n                    \n                        ${show.time} on ${show.channel}\n                        ★ ${show.rating}
\n                    
\n                    ${show.genre}
\n                
\n            \n        `).join('');\n\n        container.innerHTML = showsHTML || 'No shows found
';\n    }\n\n    // Event Listeners\n    document.querySelectorAll('.genre-filter').forEach(button => {\n        button.addEventListener('click', (e) => {\n            document.querySelector('.genre-filter.active').classList.remove('active');\n            e.target.classList.add('active');\n            currentGenre = e.target.dataset.genre;\n            renderShows();\n        });\n    });\n\n    document.getElementById('sort-by').addEventListener('change', (e) => {\n        const sortBy = e.target.value;\n        shows.sort((a, b) => {\n            if (sortBy === 'rating') return b.rating - a.rating;\n            if (sortBy === 'time') return a.time.localeCompare(b.time);\n            return a.title.localeCompare(b.title);\n        });\n        renderShows();\n    });\n\n    // Initial load\n    fetchTVShows();\n});\n\n---end---\n\nThis implementation provides a clean, modern TV show ranking website with:\n\n1. Responsive grid layout\n2. Genre filtering\n3. Sort functionality\n4. Loading states\n5. Beautiful card-based design\n6. Accessibility features\n7. Mobile-first approach\n8. Smooth animations\n9. Error handling\n10. Semantic HTML structure\n\nThe JavaScript includes a simulated data fetch that you would replace with real API calls to TV listing and review services. The CSS uses modern features like CSS variables, grid, and flexbox while maintaining broad browser compatibility.\n\nTo make it fully functional, you'd need to:\n1. Implement actual API calls to TV listing services\n2. Add real review aggregation\n3. Implement a backend service to cache and serve the data\n4. Add actual images and proper image handling\n5. Implement proper error boundaries and loading states\n\nThe design is clean and professional while being highly usable and accessible."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 302,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2559
+   }
+ }

readme.scroll

Changed around line 1

+ # tvrank.scroll.pub

+ Website generated by Claude from prompt: build me a website that can take a feed of the tv shows today on uk tv and rank them based on various tv review sites also group the programs by genre

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+     let shows = [];
+     let currentGenre = 'all';
+ 
+     // Simulated TV show data fetch
+     async function fetchTVShows() {
+         try {
+             // In reality, this would be an API call
+             const response = await new Promise(resolve => setTimeout(() => {
+                 resolve({
+                     shows: [
+                         {
+                             title: "Doctor Who",
+                             genre: "drama",
+                             time: "19:00",
+                             rating: 8.9,
+                             channel: "BBC One",
+                             image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%233498db'/%3E%3C/svg%3E"
+                         },
+                         // Add more shows here
+                     ]
+                 });
+             }, 1000));
+ 
+             shows = response.shows;
+             renderShows();
+         } catch (error) {
+             console.error('Error fetching shows:', error);
+             document.getElementById('shows-container').innerHTML =
+                 'Error loading shows. Please try again later.
';
+         }
+     }
+ 
+     function renderShows() {
+         const container = document.getElementById('shows-container');
+         const filteredShows = shows.filter(show =>
+             currentGenre === 'all' || show.genre === currentGenre
+         );
+ 
+         const showsHTML = filteredShows.map(show => `
+             
+                 
+                 
+                     ${show.title}
+                     
+                         ${show.time} on ${show.channel}
+                         ★ ${show.rating}
+                     
+                     ${show.genre}
+                 
+             
+         `).join('');
+ 
+         container.innerHTML = showsHTML || 'No shows found
';
+     }
+ 
+     // Event Listeners
+     document.querySelectorAll('.genre-filter').forEach(button => {
+         button.addEventListener('click', (e) => {
+             document.querySelector('.genre-filter.active').classList.remove('active');
+             e.target.classList.add('active');
+             currentGenre = e.target.dataset.genre;
+             renderShows();
+         });
+     });
+ 
+     document.getElementById('sort-by').addEventListener('change', (e) => {
+         const sortBy = e.target.value;
+         shows.sort((a, b) => {
+             if (sortBy === 'rating') return b.rating - a.rating;
+             if (sortBy === 'time') return a.time.localeCompare(b.time);
+             return a.title.localeCompare(b.title);
+         });
+         renderShows();
+     });
+ 
+     // Initial load
+     fetchTVShows();
+ });

style.css

Changed around line 1
+ :root {
+     --primary-color: #2c3e50;
+     --secondary-color: #3498db;
+     --background-color: #f9f9f9;
+     --card-background: #ffffff;
+     --text-color: #333333;
+     --shadow: 0 2px 8px rgba(0,0,0,0.1);
+ }
+ 
+ * {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+ }
+ 
+ body {
+     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
+     line-height: 1.6;
+     color: var(--text-color);
+     background: var(--background-color);
+ }
+ 
+ .main-header {
+     background: var(--primary-color);
+     color: white;
+     padding: 2rem 1rem;
+     text-align: center;
+ }
+ 
+ .main-header h1 {
+     margin-bottom: 1.5rem;
+     font-size: 2.5rem;
+     font-weight: 700;
+ }
+ 
+ nav {
+     display: flex;
+     justify-content: center;
+     gap: 1rem;
+     flex-wrap: wrap;
+ }
+ 
+ .genre-filter {
+     padding: 0.5rem 1rem;
+     border: none;
+     border-radius: 25px;
+     background: transparent;
+     color: white;
+     border: 2px solid rgba(255,255,255,0.3);
+     cursor: pointer;
+     transition: all 0.3s ease;
+ }
+ 
+ .genre-filter.active {
+     background: var(--secondary-color);
+     border-color: var(--secondary-color);
+ }
+ 
+ .filters {
+     padding: 1rem;
+     background: white;
+     box-shadow: var(--shadow);
+     margin: 1rem;
+     border-radius: 8px;
+ }
+ 
+ .sort-controls {
+     display: flex;
+     align-items: center;
+     gap: 1rem;
+ }
+ 
+ select {
+     padding: 0.5rem;
+     border-radius: 4px;
+     border: 1px solid #ddd;
+ }
+ 
+ .shows-grid {
+     display: grid;
+     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+     gap: 2rem;
+     padding: 2rem;
+ }
+ 
+ .show-card {
+     background: var(--card-background);
+     border-radius: 12px;
+     overflow: hidden;
+     box-shadow: var(--shadow);
+     transition: transform 0.3s ease;
+ }
+ 
+ .show-card:hover {
+     transform: translateY(-5px);
+ }
+ 
+ .show-card img {
+     width: 100%;
+     height: 200px;
+     object-fit: cover;
+ }
+ 
+ .show-info {
+     padding: 1.5rem;
+ }
+ 
+ .show-title {
+     font-size: 1.25rem;
+     margin-bottom: 0.5rem;
+     color: var(--primary-color);
+ }
+ 
+ .show-meta {
+     display: flex;
+     justify-content: space-between;
+     color: #666;
+     font-size: 0.9rem;
+     margin-bottom: 1rem;
+ }
+ 
+ .rating {
+     display: flex;
+     align-items: center;
+     gap: 0.5rem;
+     font-weight: bold;
+     color: var(--secondary-color);
+ }
+ 
+ .loading-spinner {
+     grid-column: 1 / -1;
+     text-align: center;
+     padding: 2rem;
+     color: var(--primary-color);
+ }
+ 
+ footer {
+     background: var(--primary-color);
+     color: white;
+     padding: 2rem;
+     text-align: center;
+     margin-top: 2rem;
+ }
+ 
+ footer nav a {
+     color: white;
+     text-decoration: none;
+     margin: 0 1rem;
+ }
+ 
+ @media (max-width: 768px) {
+     .shows-grid {
+         padding: 1rem;
+         gap: 1rem;
+     }
+ 
+     .main-header h1 {
+         font-size: 2rem;
+     }
+ 
+     .genre-filter {
+         font-size: 0.9rem;
+         padding: 0.4rem 0.8rem;
+     }
+ }