commit f87872ddfb46cece6c1270edf627e0a95568b71c
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 09:04:15 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8fb77b0
--- /dev/null
+++ b/body.html
@@ -0,0 +1,54 @@
+<header>
+ <nav>
+ <div class="logo">GolfBuddies</div>
+ <div class="nav-links">
+ <a href="#leaderboard">Leaderboard</a>
+ <a href="#groups">My Groups</a>
+ <a href="#profile">Profile</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section id="score-submit" class="card">
+ <h2>Submit New Score</h2>
+ <form id="score-form">
+ <div class="form-group">
+ <label for="course">Golf Course</label>
+ <input type="text" id="course" required>
+ </div>
+ <div class="form-group">
+ <label for="score">Your Score</label>
+ <input type="number" id="score" min="30" max="200" required>
+ </div>
+ <button type="submit" class="btn-primary">Post Score</button>
+ </form>
+ </section>
+
+ <section id="leaderboard" class="card">
+ <h2>Leaderboard</h2>
+ <div class="group-selector">
+ <label for="group-select">Select Group</label>
+ <select id="group-select">
+ <option value="weekend-warriors">Weekend Warriors</option>
+ <option value="office-gang">Office Gang</option>
+ </select>
+ </div>
+ <div id="rankings" class="rankings-list"></div>
+ </section>
+
+ <section id="chat" class="card">
+ <h2>Group Chat</h2>
+ <div id="chat-messages" class="chat-container"></div>
+ <form id="chat-form">
+ <input type="text" id="message" placeholder="Type a message...">
+ <button type="submit" class="btn-secondary">Send</button>
+ </form>
+ </section>
+</main>
+
+<div id="notification" class="notification"></div>
+
+<footer>
+ <p>GolfBuddies - Connect and compete with your golf friends</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..4f7e556
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://golfbuddies.scroll.pub
+metaTags
+editButton /edit.html
+title GolfBuddies - Social Golf Scoring & Rankings
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..b74a8c7
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01GCvzjjChjCCgxqzpU4sgWA",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create this golf scoring social platform. For the domain, I suggest:\n\n---domain---\ngolfbuddies.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://golfbuddies.scroll.pub\nmetaTags\neditButton /edit.html\ntitle GolfBuddies - Social Golf Scoring & Rankings\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">GolfBuddies</div>\n <div class=\"nav-links\">\n <a href=\"#leaderboard\">Leaderboard</a>\n <a href=\"#groups\">My Groups</a>\n <a href=\"#profile\">Profile</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"score-submit\" class=\"card\">\n <h2>Submit New Score</h2>\n <form id=\"score-form\">\n <div class=\"form-group\">\n <label for=\"course\">Golf Course</label>\n <input type=\"text\" id=\"course\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"score\">Your Score</label>\n <input type=\"number\" id=\"score\" min=\"30\" max=\"200\" required>\n </div>\n <button type=\"submit\" class=\"btn-primary\">Post Score</button>\n </form>\n </section>\n\n <section id=\"leaderboard\" class=\"card\">\n <h2>Leaderboard</h2>\n <div class=\"group-selector\">\n <label for=\"group-select\">Select Group</label>\n <select id=\"group-select\">\n <option value=\"weekend-warriors\">Weekend Warriors</option>\n <option value=\"office-gang\">Office Gang</option>\n </select>\n </div>\n <div id=\"rankings\" class=\"rankings-list\"></div>\n </section>\n\n <section id=\"chat\" class=\"card\">\n <h2>Group Chat</h2>\n <div id=\"chat-messages\" class=\"chat-container\"></div>\n <form id=\"chat-form\">\n <input type=\"text\" id=\"message\" placeholder=\"Type a message...\">\n <button type=\"submit\" class=\"btn-secondary\">Send</button>\n </form>\n </section>\n</main>\n\n<div id=\"notification\" class=\"notification\"></div>\n\n<footer>\n <p>GolfBuddies - Connect and compete with your golf friends</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2ecc71;\n --secondary-color: #34495e;\n --background-color: #f5f6fa;\n --card-color: #ffffff;\n --text-color: #2c3e50;\n --shadow: 0 4px 6px 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: 'Segoe UI', system-ui, sans-serif;\n background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: var(--card-color);\n box-shadow: var(--shadow);\n position: sticky;\n top: 0;\n z-index: 100;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n display: grid;\n grid-gap: 2rem;\n}\n\n.card {\n background: var(--card-color);\n border-radius: 10px;\n padding: 2rem;\n box-shadow: var(--shadow);\n}\n\n.form-group {\n margin-bottom: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput, select {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n font-size: 1rem;\n}\n\n.btn-primary, .btn-secondary {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1rem;\n transition: transform 0.2s ease;\n}\n\n.btn-primary {\n background: var(--primary-color);\n color: white;\n}\n\n.btn-secondary {\n background: var(--secondary-color);\n color: white;\n}\n\n.btn-primary:hover, .btn-secondary:hover {\n transform: translateY(-2px);\n}\n\n.rankings-list {\n margin-top: 1rem;\n}\n\n.chat-container {\n height: 300px;\n overflow-y: auto;\n margin-bottom: 1rem;\n padding: 1rem;\n background: #f8f9fa;\n border-radius: 5px;\n}\n\n.notification {\n position: fixed;\n bottom: 2rem;\n right: 2rem;\n padding: 1rem 2rem;\n background: var(--primary-color);\n color: white;\n border-radius: 5px;\n box-shadow: var(--shadow);\n transform: translateY(200%);\n transition: transform 0.3s ease;\n}\n\n.notification.show {\n transform: translateY(0);\n}\n\n@media (max-width: 768px) {\n nav {\n flex-direction: column;\n text-align: center;\n }\n \n .nav-links {\n margin-top: 1rem;\n }\n \n .nav-links a {\n margin: 0 1rem;\n font-size: 0.9rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const scoreForm = document.getElementById('score-form');\n const chatForm = document.getElementById('chat-form');\n const notification = document.getElementById('notification');\n const rankings = document.getElementById('rankings');\n const chatMessages = document.getElementById('chat-messages');\n\n // Mock data\n let scores = [];\n let messages = [];\n\n function showNotification(message) {\n notification.textContent = message;\n notification.classList.add('show');\n setTimeout(() => {\n notification.classList.remove('show');\n }, 3000);\n }\n\n function calculateNetScore(grossScore, handicap, courseRating) {\n return grossScore - handicap - (courseRating - 72);\n }\n\n function updateLeaderboard() {\n const sortedScores = scores.sort((a, b) => \n calculateNetScore(a.score, a.handicap, a.courseRating) - \n calculateNetScore(b.score, b.handicap, b.courseRating)\n );\n\n rankings.innerHTML = sortedScores.map((score, index) => `\n <div class=\"ranking-item\">\n <span class=\"position\">${index + 1}</span>\n <span class=\"player\">${score.player}</span>\n <span class=\"score\">Net: ${calculateNetScore(score.score, score.handicap, score.courseRating)}</span>\n </div>\n `).join('');\n }\n\n scoreForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const score = {\n player: 'Current User',\n course: document.getElementById('course').value,\n score: parseInt(document.getElementById('score').value),\n handicap: 12, // Mock handicap\n courseRating: 72 // Mock course rating\n };\n \n scores.push(score);\n updateLeaderboard();\n showNotification('Score submitted successfully! 🏌️♂️');\n scoreForm.reset();\n });\n\n chatForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const messageInput = document.getElementById('message');\n const message = {\n user: 'Current User',\n text: messageInput.value,\n timestamp: new Date()\n };\n \n messages.push(message);\n chatMessages.innerHTML += `\n <div class=\"chat-message\">\n <strong>${message.user}:</strong> ${message.text}\n </div>\n `;\n \n chatMessages.scrollTop = chatMessages.scrollHeight;\n messageInput.value = '';\n });\n\n // Initialize with mock data\n scores.push(\n {player: 'John', score: 82, handicap: 14, courseRating: 71},\n {player: 'Sarah', score: 78, handicap: 8, courseRating: 72},\n {player: 'Mike', score: 85, handicap: 16, courseRating: 73}\n );\n updateLeaderboard();\n});\n\n---end---\n\nThis implementation creates a clean, modern golf scoring platform with real-time updates and social features. The design is responsive and uses a fresh, professional color scheme with smooth animations and transitions. The JavaScript includes mock data to demonstrate functionality, which would need to be replaced with actual backend integration in a production environment.\n\nKey features:\n- Score submission form with validation\n- Dynamic leaderboard with net score calculations\n- Group chat functionality\n- Animated notifications\n- Mobile-responsive design\n- Accessible form controls and semantic HTML\n- Clean, modern UI with card-based design\n- Smooth animations and transitions\n\nThe site uses a simple but effective color scheme with green as the primary color (appropriate for golf) and a professional dark blue as the secondary color. The layout is clean and intuitive, with clear hierarchy and spacing."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 348,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2617
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..320f04d
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# golfbuddies.scroll.pub
+Website generated by Claude from prompt: I want a website where users can submit their golf scores, users join groups with their friends and their golf scores are ranked on a leaderboard by net score that is calculated both on the users handicap and the course handicap. Also, there are lots of playful notifications for when users submit scores and the leaderboard updates. Can also chat to your friends in the same group
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..fafa7b5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const scoreForm = document.getElementById('score-form');
+ const chatForm = document.getElementById('chat-form');
+ const notification = document.getElementById('notification');
+ const rankings = document.getElementById('rankings');
+ const chatMessages = document.getElementById('chat-messages');
+
+ // Mock data
+ let scores = [];
+ let messages = [];
+
+ function showNotification(message) {
+ notification.textContent = message;
+ notification.classList.add('show');
+ setTimeout(() => {
+ notification.classList.remove('show');
+ }, 3000);
+ }
+
+ function calculateNetScore(grossScore, handicap, courseRating) {
+ return grossScore - handicap - (courseRating - 72);
+ }
+
+ function updateLeaderboard() {
+ const sortedScores = scores.sort((a, b) =>
+ calculateNetScore(a.score, a.handicap, a.courseRating) -
+ calculateNetScore(b.score, b.handicap, b.courseRating)
+ );
+
+ rankings.innerHTML = sortedScores.map((score, index) => `
+ <div class="ranking-item">
+ <span class="position">${index + 1}</span>
+ <span class="player">${score.player}</span>
+ <span class="score">Net: ${calculateNetScore(score.score, score.handicap, score.courseRating)}</span>
+ </div>
+ `).join('');
+ }
+
+ scoreForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const score = {
+ player: 'Current User',
+ course: document.getElementById('course').value,
+ score: parseInt(document.getElementById('score').value),
+ handicap: 12, // Mock handicap
+ courseRating: 72 // Mock course rating
+ };
+
+ scores.push(score);
+ updateLeaderboard();
+ showNotification('Score submitted successfully! 🏌️♂️');
+ scoreForm.reset();
+ });
+
+ chatForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const messageInput = document.getElementById('message');
+ const message = {
+ user: 'Current User',
+ text: messageInput.value,
+ timestamp: new Date()
+ };
+
+ messages.push(message);
+ chatMessages.innerHTML += `
+ <div class="chat-message">
+ <strong>${message.user}:</strong> ${message.text}
+ </div>
+ `;
+
+ chatMessages.scrollTop = chatMessages.scrollHeight;
+ messageInput.value = '';
+ });
+
+ // Initialize with mock data
+ scores.push(
+ {player: 'John', score: 82, handicap: 14, courseRating: 71},
+ {player: 'Sarah', score: 78, handicap: 8, courseRating: 72},
+ {player: 'Mike', score: 85, handicap: 16, courseRating: 73}
+ );
+ updateLeaderboard();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0a5a0f6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,157 @@
+:root {
+ --primary-color: #2ecc71;
+ --secondary-color: #34495e;
+ --background-color: #f5f6fa;
+ --card-color: #ffffff;
+ --text-color: #2c3e50;
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ background: var(--card-color);
+ box-shadow: var(--shadow);
+ position: sticky;
+ top: 0;
+ z-index: 100;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ display: grid;
+ grid-gap: 2rem;
+}
+
+.card {
+ background: var(--card-color);
+ border-radius: 10px;
+ padding: 2rem;
+ box-shadow: var(--shadow);
+}
+
+.form-group {
+ margin-bottom: 1rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+input, select {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ font-size: 1rem;
+}
+
+.btn-primary, .btn-secondary {
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: transform 0.2s ease;
+}
+
+.btn-primary {
+ background: var(--primary-color);
+ color: white;
+}
+
+.btn-secondary {
+ background: var(--secondary-color);
+ color: white;
+}
+
+.btn-primary:hover, .btn-secondary:hover {
+ transform: translateY(-2px);
+}
+
+.rankings-list {
+ margin-top: 1rem;
+}
+
+.chat-container {
+ height: 300px;
+ overflow-y: auto;
+ margin-bottom: 1rem;
+ padding: 1rem;
+ background: #f8f9fa;
+ border-radius: 5px;
+}
+
+.notification {
+ position: fixed;
+ bottom: 2rem;
+ right: 2rem;
+ padding: 1rem 2rem;
+ background: var(--primary-color);
+ color: white;
+ border-radius: 5px;
+ box-shadow: var(--shadow);
+ transform: translateY(200%);
+ transition: transform 0.3s ease;
+}
+
+.notification.show {
+ transform: translateY(0);
+}
+
+@media (max-width: 768px) {
+ nav {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .nav-links {
+ margin-top: 1rem;
+ }
+
+ .nav-links a {
+ margin: 0 1rem;
+ font-size: 0.9rem;
+ }
+}