Last 10 Commits for hockeylive.scroll.pub

commit 0d0b8f872207ff687ac3977314a7e465ed29ad72 Author: root <root@hub.scroll.pub> Date: 2025-01-07 07:18:02 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..fe627f9 --- /dev/null +++ b/body.html @@ -0,0 +1,47 @@ +<header> + <nav> + <div class="logo">HockeyLive</div> + <div class="nav-links"> + <a href="#today">Today</a> + <a href="#upcoming">Upcoming</a> + <a href="#completed">Completed</a> + </div> + </nav> +</header> + +<main> + <section class="hero"> + <h1>Live Hockey Scores</h1> + <p class="subtitle">Real-time NHL game results</p> + </section> + + <section id="today" class="scores-section"> + <h2>Today's Games</h2> + <div class="scores-container" id="live-scores"> +  + </div> + </section> + + <section id="upcoming" class="scores-section"> + <h2>Upcoming Games</h2> + <div class="scores-container" id="upcoming-games"> +  + </div> + </section> + + <section id="completed" class="scores-section"> + <h2>Completed Games</h2> + <div class="scores-container" id="completed-games"> +  + </div> + </section> +</main> + +<footer> + <p>HockeyLive Scores</p> + <nav> + <a href="#">About</a> + <a href="#">Contact</a> + <a href="#">Privacy</a> + </nav> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..a077a03 --- /dev/null +++ b/index.scroll @@ -0,0 +1,11 @@ +buildHtml +baseUrl https://hockeylive.scroll.pub +metaTags + title Live Hockey Scores & Results + description Get real-time NHL hockey scores, game stats, and results updated live + keywords hockey, NHL, scores, live scores, hockey games, results +editButton /edit.html +title Live Hockey Scores +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..b777e80 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01QMSTwLfgXn6oe1QoC6wstd", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "Here's a complete hockey scores website:\n\n---domain---\nhockeylive.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://hockeylive.scroll.pub\nmetaTags\n title Live Hockey Scores & Results\n description Get real-time NHL hockey scores, game stats, and results updated live\n keywords hockey, NHL, scores, live scores, hockey games, results\neditButton /edit.html\ntitle Live Hockey Scores\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">HockeyLive</div>\n <div class=\"nav-links\">\n <a href=\"#today\">Today</a>\n <a href=\"#upcoming\">Upcoming</a>\n <a href=\"#completed\">Completed</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Live Hockey Scores</h1>\n <p class=\"subtitle\">Real-time NHL game results</p>\n </section>\n\n <section id=\"today\" class=\"scores-section\">\n <h2>Today's Games</h2>\n <div class=\"scores-container\" id=\"live-scores\">\n \n </div>\n </section>\n\n <section id=\"upcoming\" class=\"scores-section\">\n <h2>Upcoming Games</h2>\n <div class=\"scores-container\" id=\"upcoming-games\">\n \n </div>\n </section>\n\n <section id=\"completed\" class=\"scores-section\">\n <h2>Completed Games</h2>\n <div class=\"scores-container\" id=\"completed-games\">\n \n </div>\n </section>\n</main>\n\n<footer>\n <p>HockeyLive Scores</p>\n <nav>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n <a href=\"#\">Privacy</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary: #1a237e;\n --secondary: #304ffe;\n --accent: #536dfe;\n --background: #f5f5f5;\n --text: #212121;\n --white: #ffffff;\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 line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\nheader {\n background: var(--primary);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n color: var(--white);\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links a {\n color: var(--white);\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--accent);\n}\n\nmain {\n margin-top: 4rem;\n padding: 1rem;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 1rem;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: var(--white);\n border-radius: 1rem;\n margin: 1rem auto;\n max-width: 1200px;\n}\n\nh1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.subtitle {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\n.scores-section {\n max-width: 1200px;\n margin: 2rem auto;\n}\n\nh2 {\n color: var(--primary);\n margin-bottom: 1rem;\n}\n\n.scores-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1rem;\n}\n\n.game-card {\n background: var(--white);\n padding: 1.5rem;\n border-radius: 0.5rem;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.game-card:hover {\n transform: translateY(-2px);\n}\n\n.teams {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.score {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.status {\n text-align: center;\n font-size: 0.9rem;\n color: var(--secondary);\n}\n\nfooter {\n background: var(--primary);\n color: var(--white);\n padding: 2rem;\n margin-top: 4rem;\n text-align: center;\n}\n\nfooter nav {\n margin-top: 1rem;\n}\n\nfooter a {\n color: var(--white);\n text-decoration: none;\n margin: 0 1rem;\n}\n\n@media (max-width: 768px) {\n .nav-links a {\n margin-left: 1rem;\n }\n\n h1 {\n font-size: 2rem;\n }\n\n .hero {\n padding: 2rem 1rem;\n }\n\n .scores-container {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Sample data - in real app, this would come from an API\n const sampleGames = {\n live: [\n {\n homeTeam: 'Maple Leafs',\n awayTeam: 'Canadiens',\n homeScore: 3,\n awayScore: 2,\n period: '3rd',\n timeLeft: '12:45'\n },\n {\n homeTeam: 'Rangers',\n awayTeam: 'Bruins',\n homeScore: 1,\n awayScore: 1,\n period: '2nd',\n timeLeft: '8:30'\n }\n ],\n upcoming: [\n {\n homeTeam: 'Penguins',\n awayTeam: 'Flyers',\n startTime: '7:00 PM EST'\n },\n {\n homeTeam: 'Lightning',\n awayTeam: 'Panthers',\n startTime: '8:30 PM EST'\n }\n ],\n completed: [\n {\n homeTeam: 'Oilers',\n awayTeam: 'Flames',\n homeScore: 4,\n awayScore: 2,\n final: 'Final'\n }\n ]\n };\n\n function createGameCard(game, type) {\n const card = document.createElement('div');\n card.className = 'game-card';\n \n const teams = document.createElement('div');\n teams.className = 'teams';\n \n let statusText = '';\n switch(type) {\n case 'live':\n statusText = `${game.period} - ${game.timeLeft}`;\n break;\n case 'upcoming':\n statusText = game.startTime;\n break;\n case 'completed':\n statusText = game.final;\n break;\n }\n\n teams.innerHTML = `\n <div>\n <div>${game.homeTeam}</div>\n ${game.homeScore !== undefined ? `<div class=\"score\">${game.homeScore}</div>` : ''}\n </div>\n <div>\n <div>${game.awayTeam}</div>\n ${game.awayScore !== undefined ? `<div class=\"score\">${game.awayScore}</div>` : ''}\n </div>\n `;\n\n const status = document.createElement('div');\n status.className = 'status';\n status.textContent = statusText;\n\n card.appendChild(teams);\n card.appendChild(status);\n\n return card;\n }\n\n // Populate the scores containers\n const liveScores = document.getElementById('live-scores');\n sampleGames.live.forEach(game => {\n liveScores.appendChild(createGameCard(game, 'live'));\n });\n\n const upcomingGames = document.getElementById('upcoming-games');\n sampleGames.upcoming.forEach(game => {\n upcomingGames.appendChild(createGameCard(game, 'upcoming'));\n });\n\n const completedGames = document.getElementById('completed-games');\n sampleGames.completed.forEach(game => {\n completedGames.appendChild(createGameCard(game, 'completed'));\n });\n});\n\n---end---\n\nThis creates a beautiful, responsive hockey scores website with:\n- Clean, semantic HTML5 structure\n- Modern CSS with variables, flexbox, and grid\n- Smooth animations and transitions\n- Mobile-responsive design\n- Sample game data rendered dynamically\n- Accessible navigation and content structure\n- Professional color scheme and typography\n- Clear visual hierarchy\n- Interactive hover states\n- Proper meta tags for SEO\n- Clean, modular JavaScript\n\nThe site displays live scores, upcoming games, and completed games in an easy-to-read card layout that adapts to different screen sizes." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 273, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2539 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..334609b --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# hockeylive.scroll.pub +Website generated by Claude from prompt: latest hockey scores \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..8a71469 --- /dev/null +++ b/script.js @@ -0,0 +1,101 @@ +document.addEventListener('DOMContentLoaded', () => { + // Sample data - in real app, this would come from an API + const sampleGames = { + live: [ + { + homeTeam: 'Maple Leafs', + awayTeam: 'Canadiens', + homeScore: 3, + awayScore: 2, + period: '3rd', + timeLeft: '12:45' + }, + { + homeTeam: 'Rangers', + awayTeam: 'Bruins', + homeScore: 1, + awayScore: 1, + period: '2nd', + timeLeft: '8:30' + } + ], + upcoming: [ + { + homeTeam: 'Penguins', + awayTeam: 'Flyers', + startTime: '7:00 PM EST' + }, + { + homeTeam: 'Lightning', + awayTeam: 'Panthers', + startTime: '8:30 PM EST' + } + ], + completed: [ + { + homeTeam: 'Oilers', + awayTeam: 'Flames', + homeScore: 4, + awayScore: 2, + final: 'Final' + } + ] + }; + + function createGameCard(game, type) { + const card = document.createElement('div'); + card.className = 'game-card'; + + const teams = document.createElement('div'); + teams.className = 'teams'; + + let statusText = ''; + switch(type) { + case 'live': + statusText = `${game.period} - ${game.timeLeft}`; + break; + case 'upcoming': + statusText = game.startTime; + break; + case 'completed': + statusText = game.final; + break; + } + + teams.innerHTML = ` + <div> + <div>${game.homeTeam}</div> + ${game.homeScore !== undefined ? `<div class="score">${game.homeScore}</div>` : ''} + </div> + <div> + <div>${game.awayTeam}</div> + ${game.awayScore !== undefined ? `<div class="score">${game.awayScore}</div>` : ''} + </div> + `; + + const status = document.createElement('div'); + status.className = 'status'; + status.textContent = statusText; + + card.appendChild(teams); + card.appendChild(status); + + return card; + } + + // Populate the scores containers + const liveScores = document.getElementById('live-scores'); + sampleGames.live.forEach(game => { + liveScores.appendChild(createGameCard(game, 'live')); + }); + + const upcomingGames = document.getElementById('upcoming-games'); + sampleGames.upcoming.forEach(game => { + upcomingGames.appendChild(createGameCard(game, 'upcoming')); + }); + + const completedGames = document.getElementById('completed-games'); + sampleGames.completed.forEach(game => { + completedGames.appendChild(createGameCard(game, 'completed')); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..a4bad33 --- /dev/null +++ b/style.css @@ -0,0 +1,164 @@ +:root { + --primary: #1a237e; + --secondary: #304ffe; + --accent: #536dfe; + --background: #f5f5f5; + --text: #212121; + --white: #ffffff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + line-height: 1.6; + color: var(--text); + background: var(--background); +} + +header { + background: var(--primary); + padding: 1rem; + position: fixed; + width: 100%; + top: 0; + z-index: 100; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; +} + +.logo { + color: var(--white); + font-size: 1.5rem; + font-weight: bold; +} + +.nav-links a { + color: var(--white); + text-decoration: none; + margin-left: 2rem; + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: var(--accent); +} + +main { + margin-top: 4rem; + padding: 1rem; +} + +.hero { + text-align: center; + padding: 4rem 1rem; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: var(--white); + border-radius: 1rem; + margin: 1rem auto; + max-width: 1200px; +} + +h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +.subtitle { + font-size: 1.2rem; + opacity: 0.9; +} + +.scores-section { + max-width: 1200px; + margin: 2rem auto; +} + +h2 { + color: var(--primary); + margin-bottom: 1rem; +} + +.scores-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1rem; +} + +.game-card { + background: var(--white); + padding: 1.5rem; + border-radius: 0.5rem; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.game-card:hover { + transform: translateY(-2px); +} + +.teams { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} + +.score { + font-size: 1.5rem; + font-weight: bold; + color: var(--primary); +} + +.status { + text-align: center; + font-size: 0.9rem; + color: var(--secondary); +} + +footer { + background: var(--primary); + color: var(--white); + padding: 2rem; + margin-top: 4rem; + text-align: center; +} + +footer nav { + margin-top: 1rem; +} + +footer a { + color: var(--white); + text-decoration: none; + margin: 0 1rem; +} + +@media (max-width: 768px) { + .nav-links a { + margin-left: 1rem; + } + + h1 { + font-size: 2rem; + } + + .hero { + padding: 2rem 1rem; + } + + .scores-container { + grid-template-columns: 1fr; + } +}