Last 10 Commits for western-rugby.scroll.pub

commit ce7166f8a10220eef813d8cb8cc95f9e05b99f57 Author: root <root@hub.scroll.pub> Date: 2024-12-28 12:01:05 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..09c2c73 --- /dev/null +++ b/body.html @@ -0,0 +1,97 @@ +<header> + <nav class="main-nav"> + <div class="logo"> + <img src="images/logo.png" alt="Western Rugby Logo" width="50" height="50"> + <h1>Western Rugby</h1> + </div> + <button class="mobile-menu-btn" aria-label="Toggle menu"> + <span></span><span></span><span></span> + </button> + <ul class="nav-links"> + <li><a href="#news">News</a></li> + <li><a href="#standings">Standings</a></li> + <li><a href="#roster">Roster</a></li> + <li><a href="#schedule">Schedule</a></li> + <li><a href="#stats">Stats</a></li> + </ul> + </nav> +</header> + +<main> + <section id="hero"> + <div class="hero-content"> + <h2>Home of the Mustangs Rugby</h2> + <p>Excellence in athletics and academics</p> + </div> + </section> + + <section id="news" class="section"> + <h2>Latest News</h2> + <div class="news-grid"> + <article class="news-card"> + <div class="news-image"></div> + <div class="news-content"> + <h3>Mustangs Advance to Finals</h3> + <p>Western defeats Queens in thrilling semifinal match...</p> + <a href="#" class="read-more">Read More</a> + </div> + </article> +  + </div> + </section> + + <section id="standings" class="section"> + <h2>Current Standings</h2> + <div class="standings-table"> + <table> + <thead> + <tr> + <th>Position</th> + <th>Team</th> + <th>Played</th> + <th>Won</th> + <th>Lost</th> + <th>Points</th> + </tr> + </thead> + <tbody id="standings-body"> +  + </tbody> + </table> + </div> + </section> + + <section id="roster" class="section"> + <h2>Team Roster</h2> + <div class="roster-grid" id="roster-grid"> +  + </div> + </section> +</main> + +<footer> + <div class="footer-content"> + <div class="footer-section"> + <h3>Contact</h3> + <p>Western University Athletics</p> + <p>London, Ontario, Canada</p> + <p>N6A 3K7</p> + </div> + <div class="footer-section"> + <h3>Quick Links</h3> + <ul> + <li><a href="#news">News</a></li> + <li><a href="#standings">Standings</a></li> + <li><a href="#roster">Roster</a></li> + </ul> + </div> + <div class="footer-section"> + <h3>Follow Us</h3> + <div class="social-links"> + <a href="#" aria-label="Facebook">FB</a> + <a href="#" aria-label="Twitter">TW</a> + <a href="#" aria-label="Instagram">IG</a> + </div> + </div> + </div> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..d44196f --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://western-rugby.scroll.pub +metaTags +editButton /edit.html +title Western University Rugby - News, Stats & Updates +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..2b762d1 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01JHhUDb2LnBw98uGBkV5hMd", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help create a website for Western University's rugby program.\n\nSuggested domain name: western-rugby.scroll.pub\n\n---domain---\nwestern-rugby.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://western-rugby.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Western University Rugby - News, Stats & Updates\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">\n <img src=\"images/logo.png\" alt=\"Western Rugby Logo\" width=\"50\" height=\"50\">\n <h1>Western Rugby</h1>\n </div>\n <button class=\"mobile-menu-btn\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#news\">News</a></li>\n <li><a href=\"#standings\">Standings</a></li>\n <li><a href=\"#roster\">Roster</a></li>\n <li><a href=\"#schedule\">Schedule</a></li>\n <li><a href=\"#stats\">Stats</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <div class=\"hero-content\">\n <h2>Home of the Mustangs Rugby</h2>\n <p>Excellence in athletics and academics</p>\n </div>\n </section>\n\n <section id=\"news\" class=\"section\">\n <h2>Latest News</h2>\n <div class=\"news-grid\">\n <article class=\"news-card\">\n <div class=\"news-image\"></div>\n <div class=\"news-content\">\n <h3>Mustangs Advance to Finals</h3>\n <p>Western defeats Queens in thrilling semifinal match...</p>\n <a href=\"#\" class=\"read-more\">Read More</a>\n </div>\n </article>\n \n </div>\n </section>\n\n <section id=\"standings\" class=\"section\">\n <h2>Current Standings</h2>\n <div class=\"standings-table\">\n <table>\n <thead>\n <tr>\n <th>Position</th>\n <th>Team</th>\n <th>Played</th>\n <th>Won</th>\n <th>Lost</th>\n <th>Points</th>\n </tr>\n </thead>\n <tbody id=\"standings-body\">\n \n </tbody>\n </table>\n </div>\n </section>\n\n <section id=\"roster\" class=\"section\">\n <h2>Team Roster</h2>\n <div class=\"roster-grid\" id=\"roster-grid\">\n \n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h3>Contact</h3>\n <p>Western University Athletics</p>\n <p>London, Ontario, Canada</p>\n <p>N6A 3K7</p>\n </div>\n <div class=\"footer-section\">\n <h3>Quick Links</h3>\n <ul>\n <li><a href=\"#news\">News</a></li>\n <li><a href=\"#standings\">Standings</a></li>\n <li><a href=\"#roster\">Roster</a></li>\n </ul>\n </div>\n <div class=\"footer-section\">\n <h3>Follow Us</h3>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"Facebook\">FB</a>\n <a href=\"#\" aria-label=\"Twitter\">TW</a>\n <a href=\"#\" aria-label=\"Instagram\">IG</a>\n </div>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #4f2683;\n --secondary-color: #ffffff;\n --accent-color: #ffd200;\n --text-color: #333333;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n/* Header & Navigation */\nheader {\n background: var(--primary-color);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.logo {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.logo h1 {\n color: var(--secondary-color);\n font-size: 1.5rem;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n color: var(--secondary-color);\n text-decoration: none;\n font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n/* Hero Section */\n#hero {\n height: 80vh;\n background: linear-gradient(rgba(79,38,131,0.8), rgba(79,38,131,0.8)),\n url('images/hero-bg.jpg') center/cover;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--secondary-color);\n margin-top: 70px;\n}\n\n.hero-content h2 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n animation: fadeInUp 1s ease;\n}\n\n/* Sections */\n.section {\n padding: 5rem 5%;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n/* News Grid */\n.news-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.news-card {\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.news-card:hover {\n transform: translateY(-5px);\n}\n\n.news-image {\n height: 200px;\n background: #ddd;\n}\n\n.news-content {\n padding: 1.5rem;\n}\n\n/* Standings Table */\n.standings-table {\n overflow-x: auto;\n margin-top: 2rem;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #ddd;\n}\n\nth {\n background: var(--primary-color);\n color: var(--secondary-color);\n}\n\n/* Roster Grid */\n.roster-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n/* Footer */\nfooter {\n background: var(--primary-color);\n color: var(--secondary-color);\n padding: 3rem 5%;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n/* Mobile Responsiveness */\n.mobile-menu-btn {\n display: none;\n}\n\n@media (max-width: 768px) {\n .mobile-menu-btn {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu-btn span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--secondary-color);\n margin: 5px 0;\n transition: var(--transition);\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--primary-color);\n flex-direction: column;\n padding: 1rem;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .hero-content h2 {\n font-size: 2.5rem;\n }\n}\n\n/* Animations */\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile Menu Toggle\n const mobileMenuBtn = document.querySelector('.mobile-menu-btn');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenuBtn.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n const spans = mobileMenuBtn.querySelectorAll('span');\n spans[0].classList.toggle('rotate-45');\n spans[1].classList.toggle('opacity-0');\n spans[2].classList.toggle('rotate-negative-45');\n });\n\n // Sample Standings Data\n const standingsData = [\n { position: 1, team: 'Western', played: 10, won: 8, lost: 2, points: 40 },\n { position: 2, team: 'Queens', played: 10, won: 7, lost: 3, points: 35 },\n { position: 3, team: 'McMaster', played: 10, won: 6, lost: 4, points: 30 },\n // Add more teams as needed\n ];\n\n // Populate Standings Table\n const standingsBody = document.getElementById('standings-body');\n standingsData.forEach(team => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${team.position}</td>\n <td>${team.team}</td>\n <td>${team.played}</td>\n <td>${team.won}</td>\n <td>${team.lost}</td>\n <td>${team.points}</td>\n `;\n standingsBody.appendChild(row);\n });\n\n // Sample Roster Data\n const rosterData = [\n { name: 'John Smith', position: 'Prop', number: 1 },\n { name: 'Mike Johnson', position: 'Hooker', number: 2 },\n { name: 'David Wilson', position: 'Lock', number: 3 },\n // Add more players as needed\n ];\n\n // Populate Roster Grid\n const rosterGrid = document.getElementById('roster-grid');\n rosterData.forEach(player => {\n const playerCard = document.createElement('div');\n playerCard.className = 'player-card';\n playerCard.innerHTML = `\n <h3>${player.name}</h3>\n <p>Position: ${player.position}</p>\n <p>Number: ${player.number}</p>\n `;\n rosterGrid.appendChild(playerCard);\n });\n\n // Smooth Scrolling 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---end---\n\nThis creates a modern, responsive website for Western University's rugby program with a purple and white color scheme (Western's colors). The site includes:\n\n1. Fixed header with navigation\n2. Hero section with animated text\n3. News section with card layout\n4. Standings table\n5. Team roster grid\n6. Mobile-responsive design\n7. Interactive elements\n8. Smooth scrolling\n9. Accessible navigation\n10. SEO-friendly structure\n\nThe site uses CSS Grid and Flexbox for layouts, includes animations, and follows modern web development best practices. All content is placeholder and can be easily updated with real data." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 302, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3313 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..2b50ce5 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# western-rugby.scroll.pub +Website generated by Claude from prompt: i want website for my schools rugby news and announcements with stats standings, rosters, etc. make the page nice and interactive. make it for Western University \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4dc2e3e --- /dev/null +++ b/script.js @@ -0,0 +1,67 @@ +document.addEventListener('DOMContentLoaded', () => { + // Mobile Menu Toggle + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + const navLinks = document.querySelector('.nav-links'); + + mobileMenuBtn.addEventListener('click', () => { + navLinks.classList.toggle('active'); + const spans = mobileMenuBtn.querySelectorAll('span'); + spans[0].classList.toggle('rotate-45'); + spans[1].classList.toggle('opacity-0'); + spans[2].classList.toggle('rotate-negative-45'); + }); + + // Sample Standings Data + const standingsData = [ + { position: 1, team: 'Western', played: 10, won: 8, lost: 2, points: 40 }, + { position: 2, team: 'Queens', played: 10, won: 7, lost: 3, points: 35 }, + { position: 3, team: 'McMaster', played: 10, won: 6, lost: 4, points: 30 }, + // Add more teams as needed + ]; + + // Populate Standings Table + const standingsBody = document.getElementById('standings-body'); + standingsData.forEach(team => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${team.position}</td> + <td>${team.team}</td> + <td>${team.played}</td> + <td>${team.won}</td> + <td>${team.lost}</td> + <td>${team.points}</td> + `; + standingsBody.appendChild(row); + }); + + // Sample Roster Data + const rosterData = [ + { name: 'John Smith', position: 'Prop', number: 1 }, + { name: 'Mike Johnson', position: 'Hooker', number: 2 }, + { name: 'David Wilson', position: 'Lock', number: 3 }, + // Add more players as needed + ]; + + // Populate Roster Grid + const rosterGrid = document.getElementById('roster-grid'); + rosterData.forEach(player => { + const playerCard = document.createElement('div'); + playerCard.className = 'player-card'; + playerCard.innerHTML = ` + <h3>${player.name}</h3> + <p>Position: ${player.position}</p> + <p>Number: ${player.number}</p> + `; + rosterGrid.appendChild(playerCard); + }); + + // Smooth Scrolling for Navigation + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a5c3542 --- /dev/null +++ b/style.css @@ -0,0 +1,220 @@ +:root { + --primary-color: #4f2683; + --secondary-color: #ffffff; + --accent-color: #ffd200; + --text-color: #333333; + --transition: all 0.3s ease; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: var(--text-color); +} + +/* Header & Navigation */ +header { + background: var(--primary-color); + position: fixed; + width: 100%; + top: 0; + z-index: 1000; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.main-nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 5%; + max-width: 1400px; + margin: 0 auto; +} + +.logo { + display: flex; + align-items: center; + gap: 1rem; +} + +.logo h1 { + color: var(--secondary-color); + font-size: 1.5rem; +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav-links a { + color: var(--secondary-color); + text-decoration: none; + font-weight: 500; + transition: var(--transition); +} + +.nav-links a:hover { + color: var(--accent-color); +} + +/* Hero Section */ +#hero { + height: 80vh; + background: linear-gradient(rgba(79,38,131,0.8), rgba(79,38,131,0.8)), + url('images/hero-bg.jpg') center/cover; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: var(--secondary-color); + margin-top: 70px; +} + +.hero-content h2 { + font-size: 3.5rem; + margin-bottom: 1rem; + animation: fadeInUp 1s ease; +} + +/* Sections */ +.section { + padding: 5rem 5%; + max-width: 1400px; + margin: 0 auto; +} + +/* News Grid */ +.news-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.news-card { + background: white; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + transition: var(--transition); +} + +.news-card:hover { + transform: translateY(-5px); +} + +.news-image { + height: 200px; + background: #ddd; +} + +.news-content { + padding: 1.5rem; +} + +/* Standings Table */ +.standings-table { + overflow-x: auto; + margin-top: 2rem; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th, td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background: var(--primary-color); + color: var(--secondary-color); +} + +/* Roster Grid */ +.roster-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +/* Footer */ +footer { + background: var(--primary-color); + color: var(--secondary-color); + padding: 3rem 5%; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + max-width: 1400px; + margin: 0 auto; +} + +/* Mobile Responsiveness */ +.mobile-menu-btn { + display: none; +} + +@media (max-width: 768px) { + .mobile-menu-btn { + display: block; + background: none; + border: none; + cursor: pointer; + } + + .mobile-menu-btn span { + display: block; + width: 25px; + height: 3px; + background: var(--secondary-color); + margin: 5px 0; + transition: var(--transition); + } + + .nav-links { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--primary-color); + flex-direction: column; + padding: 1rem; + } + + .nav-links.active { + display: flex; + } + + .hero-content h2 { + font-size: 2.5rem; + } +} + +/* Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file