commit 6aba7645f10c880f60eb662b4083e4770fac6494
Author: root <root@hub.scroll.pub> Date: 2024-12-28 09:02:28 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..f34a1b2 --- /dev/null +++ b/body.html @@ -0,0 +1,54 @@ +<header> + <h1>GolfMates</h1> + <p>Track, Rank, and Chat with Your Golf Buddies</p> +</header> + +<main> + <section id="score-submission"> + <h2>Submit Your Score</h2> + <form id="score-form"> + <label for="course">Course:</label> + <input type="text" id="course" name="course" required> + + <label for="score">Score:</label> + <input type="number" id="score" name="score" required> + + <label for="handicap">Your Handicap:</label> + <input type="number" id="handicap" name="handicap" required> + + <button type="submit">Submit Score</button> + </form> + <div id="notification" class="notification"></div> + </section> + + <section id="leaderboard"> + <h2>Leaderboard</h2> + <table> + <thead> + <tr> + <th>Rank</th> + <th>Name</th> + <th>Net Score</th> + </tr> + </thead> + <tbody id="leaderboard-body"> + <!-- Leaderboard rows will be populated here --> + </tbody> + </table> + </section> + + <section id="chat"> + <h2>Group Chat</h2> + <div id="chat-messages"> + <!-- Chat messages will be populated here --> + </div> + <form id="chat-form"> + <input type="text" id="chat-input" placeholder="Type your message..." required> + <button type="submit">Send</button> + </form> + </section> +</main> + +<footer> + <p>Join a group, submit your scores, and see where you rank among your friends!</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..c2a042b --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://golfmates.scroll.pub +metaTags +editButton /edit.html +title GolfMates - Track, Rank, and Chat with Your Golf Buddies +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..2a24e11 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "a221c7e1-e45f-470a-8a55-f3af1827032e", + "object": "chat.completion", + "created": 1735376526, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\ngolfmates.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://golfmates.scroll.pub\nmetaTags\neditButton /edit.html\ntitle GolfMates - Track, Rank, and Chat with Your Golf Buddies\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>GolfMates</h1>\n <p>Track, Rank, and Chat with Your Golf Buddies</p>\n</header>\n\n<main>\n <section id=\"score-submission\">\n <h2>Submit Your Score</h2>\n <form id=\"score-form\">\n <label for=\"course\">Course:</label>\n <input type=\"text\" id=\"course\" name=\"course\" required>\n \n <label for=\"score\">Score:</label>\n <input type=\"number\" id=\"score\" name=\"score\" required>\n \n <label for=\"handicap\">Your Handicap:</label>\n <input type=\"number\" id=\"handicap\" name=\"handicap\" required>\n \n <button type=\"submit\">Submit Score</button>\n </form>\n <div id=\"notification\" class=\"notification\"></div>\n </section>\n\n <section id=\"leaderboard\">\n <h2>Leaderboard</h2>\n <table>\n <thead>\n <tr>\n <th>Rank</th>\n <th>Name</th>\n <th>Net Score</th>\n </tr>\n </thead>\n <tbody id=\"leaderboard-body\">\n <!-- Leaderboard rows will be populated here -->\n </tbody>\n </table>\n </section>\n\n <section id=\"chat\">\n <h2>Group Chat</h2>\n <div id=\"chat-messages\">\n <!-- Chat messages will be populated here -->\n </div>\n <form id=\"chat-form\">\n <input type=\"text\" id=\"chat-input\" placeholder=\"Type your message...\" required>\n <button type=\"submit\">Send</button>\n </form>\n </section>\n</main>\n\n<footer>\n <p>Join a group, submit your scores, and see where you rank among your friends!</p>\n</footer>\n---style.css---\nbody {\n font-family: 'Arial', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n color: #333;\n}\n\nheader {\n background-color: #4CAF50;\n color: white;\n padding: 20px;\n text-align: center;\n}\n\nheader h1 {\n margin: 0;\n font-size: 2.5em;\n}\n\nheader p {\n margin: 0;\n font-size: 1.2em;\n}\n\nmain {\n padding: 20px;\n}\n\nsection {\n margin-bottom: 30px;\n}\n\nh2 {\n color: #4CAF50;\n border-bottom: 2px solid #4CAF50;\n padding-bottom: 10px;\n}\n\nform {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n margin-top: 10px;\n}\n\ninput, button {\n padding: 10px;\n margin-top: 5px;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbutton {\n background-color: #4CAF50;\n color: white;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n\n.notification {\n margin-top: 10px;\n padding: 10px;\n background-color: #dff0d8;\n border: 1px solid #d6e9c6;\n border-radius: 5px;\n color: #3c763d;\n display: none;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\nth, td {\n padding: 10px;\n text-align: left;\n border-bottom: 1px solid #ddd;\n}\n\nth {\n background-color: #4CAF50;\n color: white;\n}\n\n#chat-messages {\n height: 200px;\n overflow-y: scroll;\n border: 1px solid #ccc;\n padding: 10px;\n margin-bottom: 10px;\n background-color: white;\n}\n\nfooter {\n background-color: #333;\n color: white;\n text-align: center;\n padding: 10px;\n position: fixed;\n bottom: 0;\n width: 100%;\n}\n\n@media (max-width: 600px) {\n header h1 {\n font-size: 2em;\n }\n\n header p {\n font-size: 1em;\n }\n\n form {\n width: 100%;\n }\n\n #chat-messages {\n height: 150px;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const scoreForm = document.getElementById('score-form');\n const notification = document.getElementById('notification');\n const leaderboardBody = document.getElementById('leaderboard-body');\n const chatForm = document.getElementById('chat-form');\n const chatInput = document.getElementById('chat-input');\n const chatMessages = document.getElementById('chat-messages');\n\n let scores = [];\n let chat = [];\n\n scoreForm.addEventListener('submit', function(event) {\n event.preventDefault();\n const course = document.getElementById('course').value;\n const score = parseInt(document.getElementById('score').value);\n const handicap = parseInt(document.getElementById('handicap').value);\n\n const netScore = score - handicap;\n scores.push({ course, score, handicap, netScore });\n updateLeaderboard();\n\n notification.textContent = `Score submitted for ${course}!`;\n notification.style.display = 'block';\n setTimeout(() => {\n notification.style.display = 'none';\n }, 3000);\n\n scoreForm.reset();\n });\n\n chatForm.addEventListener('submit', function(event) {\n event.preventDefault();\n const message = chatInput.value;\n chat.push(message);\n updateChat();\n chatInput.value = '';\n });\n\n function updateLeaderboard() {\n leaderboardBody.innerHTML = '';\n scores.sort((a, b) => a.netScore - b.netScore).forEach((score, index) => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${index + 1}</td>\n <td>${score.course}</td>\n <td>${score.netScore}</td>\n `;\n leaderboardBody.appendChild(row);\n });\n }\n\n function updateChat() {\n chatMessages.innerHTML = '';\n chat.forEach(message => {\n const div = document.createElement('div');\n div.textContent = message;\n chatMessages.appendChild(div);\n });\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 307, + "completion_tokens": 1468, + "total_tokens": 1775, + "prompt_cache_hit_tokens": 64, + "prompt_cache_miss_tokens": 243 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..30606dd --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# golfmates.scroll.pub +Website generated by DeepSeek 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..fe2a1e3 --- /dev/null +++ b/script.js @@ -0,0 +1,61 @@ +document.addEventListener('DOMContentLoaded', function() { + const scoreForm = document.getElementById('score-form'); + const notification = document.getElementById('notification'); + const leaderboardBody = document.getElementById('leaderboard-body'); + const chatForm = document.getElementById('chat-form'); + const chatInput = document.getElementById('chat-input'); + const chatMessages = document.getElementById('chat-messages'); + + let scores = []; + let chat = []; + + scoreForm.addEventListener('submit', function(event) { + event.preventDefault(); + const course = document.getElementById('course').value; + const score = parseInt(document.getElementById('score').value); + const handicap = parseInt(document.getElementById('handicap').value); + + const netScore = score - handicap; + scores.push({ course, score, handicap, netScore }); + updateLeaderboard(); + + notification.textContent = `Score submitted for ${course}!`; + notification.style.display = 'block'; + setTimeout(() => { + notification.style.display = 'none'; + }, 3000); + + scoreForm.reset(); + }); + + chatForm.addEventListener('submit', function(event) { + event.preventDefault(); + const message = chatInput.value; + chat.push(message); + updateChat(); + chatInput.value = ''; + }); + + function updateLeaderboard() { + leaderboardBody.innerHTML = ''; + scores.sort((a, b) => a.netScore - b.netScore).forEach((score, index) => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${index + 1}</td> + <td>${score.course}</td> + <td>${score.netScore}</td> + `; + leaderboardBody.appendChild(row); + }); + } + + function updateChat() { + chatMessages.innerHTML = ''; + chat.forEach(message => { + const div = document.createElement('div'); + div.textContent = message; + chatMessages.appendChild(div); + }); + chatMessages.scrollTop = chatMessages.scrollHeight; + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5068952 --- /dev/null +++ b/style.css @@ -0,0 +1,127 @@ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; + color: #333; +} + +header { + background-color: #4CAF50; + color: white; + padding: 20px; + text-align: center; +} + +header h1 { + margin: 0; + font-size: 2.5em; +} + +header p { + margin: 0; + font-size: 1.2em; +} + +main { + padding: 20px; +} + +section { + margin-bottom: 30px; +} + +h2 { + color: #4CAF50; + border-bottom: 2px solid #4CAF50; + padding-bottom: 10px; +} + +form { + display: flex; + flex-direction: column; +} + +label { + margin-top: 10px; +} + +input, button { + padding: 10px; + margin-top: 5px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background-color: #4CAF50; + color: white; + cursor: pointer; +} + +button:hover { + background-color: #45a049; +} + +.notification { + margin-top: 10px; + padding: 10px; + background-color: #dff0d8; + border: 1px solid #d6e9c6; + border-radius: 5px; + color: #3c763d; + display: none; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th, td { + padding: 10px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background-color: #4CAF50; + color: white; +} + +#chat-messages { + height: 200px; + overflow-y: scroll; + border: 1px solid #ccc; + padding: 10px; + margin-bottom: 10px; + background-color: white; +} + +footer { + background-color: #333; + color: white; + text-align: center; + padding: 10px; + position: fixed; + bottom: 0; + width: 100%; +} + +@media (max-width: 600px) { + header h1 { + font-size: 2em; + } + + header p { + font-size: 1em; + } + + form { + width: 100%; + } + + #chat-messages { + height: 150px; + } +} \ No newline at end of file