index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://typemasterscroll.pub
+ metaTags
+ editButton /edit.html
+ title Typing Master: Race & Learn
+ style.css
+ header
+ class hero
+ nav
+ div Typing Master
+ class logo
+ div
+ class nav-links
+ a Race
+ href #race-game
+ a Mini-Games
+ href #mini-games
+ a Stats
+ href #stats
+ a Lessons
+ href #lessons
+ a Leaderboard
+ href #leaderboard
+ div
+ class hero-content
+ h1 Typing Master: Race & Learn
+ p Master your typing skills through exciting races and mini-games
+ a Start Typing
+ class primary-button
+ href #typing-area
+ main
+ section
+ id typing-area
+ class typing-section
+ div
+ class text-display
+ input
+ type text
+ id typing-input
+ autofocus
+ div
+ class feedback
+ section
+ id race-game
+ class game-section
+ div
+ class race-track
+ div
+ class distance-marker
+ style left: 200px;
+ div
+ class distance-marker
+ style left: 400px;
+ div
+ class distance-marker
+ style left: 600px;
+ div
+ class distance-marker
+ style left: 800px;
+ div
+ class car
+ id player-car
+ div
+ class car ai-car
+ id ai-car-1
+ div
+ class car ai-car
+ id ai-car-2
+ div
+ class car ai-car
+ id ai-car-3
+ div
+ class race-info
+ p Level:
+ span id race-level Beginner
+ p WPM:
+ span id race-wpm 0
+ p Accuracy:
+ span id race-accuracy 100%
+ section
+ id mini-games
+ class game-section
+ div
+ id word-shooter
+ canvas
+ id word-shooter-canvas
+ div
+ id letter-cascade
+ canvas
+ id letter-cascade-canvas
+ div
+ id rhythm-typer
+ canvas
+ id rhythm-typer-canvas
+ div
+ id word-builder
+ div
+ id word-builder-letters
+ input
+ type text
+ id word-builder-input
+ div
+ id error-crusher
+ div
+ id error-crusher-text
+ section
+ id stats
+ class game-section
+ canvas
+ id wpm-graph
+ p Accuracy:
+ span id stats-accuracy
+ p Most Frequent Errors:
+ span id stats-errors
+ p Improvement Rate:
+ span id stats-improvement
+ p Time Practiced:
+ span id stats-time
+ section
+ id lessons
+ class game-section
+ div
+ id lesson-content
+ section
+ id leaderboard
+ class game-section
+ table
+ id leaderboard-table
+ thead
+ tr
+ th Rank
+ th Name
+ th WPM
+ th Level
+ tbody
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href /docs
+ a Community
+ href /community
+ a Blog
+ href /blog
+ p Typing Master: Race & Learn - Improve your typing skills in style
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "e2286004-c0ad-4892-a252-1c6238b94f09",
+ "object": "chat.completion",
+ "created": 1742048335,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\ntypemasterscroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://typemasterscroll.pub\nmetaTags\neditButton /edit.html\ntitle Typing Master: Race & Learn\nstyle.css\nheader\n class hero\n nav\n div Typing Master\n class logo\n div\n class nav-links\n a Race\n href #race-game\n a Mini-Games\n href #mini-games\n a Stats\n href #stats\n a Lessons\n href #lessons\n a Leaderboard\n href #leaderboard\n div\n class hero-content\n h1 Typing Master: Race & Learn\n p Master your typing skills through exciting races and mini-games\n a Start Typing\n class primary-button\n href #typing-area\nmain\n section\n id typing-area\n class typing-section\n div\n class text-display\n input\n type text\n id typing-input\n autofocus\n div\n class feedback\n section\n id race-game\n class game-section\n div\n class race-track\n div\n class distance-marker\n style left: 200px;\n div\n class distance-marker\n style left: 400px;\n div\n class distance-marker\n style left: 600px;\n div\n class distance-marker\n style left: 800px;\n div\n class car\n id player-car\n div\n class car ai-car\n id ai-car-1\n div\n class car ai-car\n id ai-car-2\n div\n class car ai-car\n id ai-car-3\n div\n class race-info\n p Level: \n span id race-level Beginner\n p WPM: \n span id race-wpm 0\n p Accuracy: \n span id race-accuracy 100%\n section\n id mini-games\n class game-section\n div\n id word-shooter\n canvas\n id word-shooter-canvas\n div\n id letter-cascade\n canvas\n id letter-cascade-canvas\n div\n id rhythm-typer\n canvas\n id rhythm-typer-canvas\n div\n id word-builder\n div\n id word-builder-letters\n input\n type text\n id word-builder-input\n div\n id error-crusher\n div\n id error-crusher-text\n section\n id stats\n class game-section\n canvas\n id wpm-graph\n p Accuracy: \n span id stats-accuracy\n p Most Frequent Errors: \n span id stats-errors\n p Improvement Rate: \n span id stats-improvement\n p Time Practiced: \n span id stats-time\n section\n id lessons\n class game-section\n div\n id lesson-content\n section\n id leaderboard\n class game-section\n table\n id leaderboard-table\n thead\n tr\n th Rank\n th Name\n th WPM\n th Level\n tbody\nfooter\n div\n class footer-content\n div\n class footer-links\n a Documentation\n href /docs\n a Community\n href /community\n a Blog\n href /blog\n p Typing Master: Race & Learn - Improve your typing skills in style\nscript.js\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1e40af;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --accent-color: #f59e0b;\n --error-color: #dc2626;\n --success-color: #16a34a;\n --font-family: 'Inter', system-ui, -apple-system, sans-serif;\n}\n\nbody {\n font-family: var(--font-family);\n background-color: var(--background-color);\n color: var(--text-color);\n margin: 0;\n padding: 0;\n line-height: 1.6;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.nav-links {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.primary-button {\n background-color: var(--accent-color);\n color: white;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n text-decoration: none;\n display: inline-block;\n margin-top: 1rem;\n}\n\n.typing-section {\n max-width: 800px;\n margin: 2rem auto;\n padding: 1rem;\n}\n\n.text-display {\n background-color: white;\n padding: 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n margin-bottom: 1rem;\n font-size: 1.25rem;\n line-height: 1.75;\n}\n\n#typing-input {\n width: 100%;\n padding: 0.75rem;\n border: 2px solid var(--primary-color);\n border-radius: 0.5rem;\n font-size: 1rem;\n margin-bottom: 1rem;\n}\n\n.feedback {\n color: var(--error-color);\n font-weight: bold;\n text-align: center;\n}\n\n.game-section {\n display: none;\n padding: 2rem;\n}\n\n.race-track {\n position: relative;\n height: 200px;\n background-color: #e2e8f0;\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n.car {\n position: absolute;\n bottom: 0;\n width: 50px;\n height: 30px;\n background-color: var(--primary-color);\n border-radius: 0.5rem 0.5rem 0 0;\n transition: left 0.1s linear;\n}\n\n.ai-car {\n background-color: var(--secondary-color);\n}\n\n.race-info {\n margin-top: 1rem;\n text-align: center;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n flex-direction: column;\n gap: 0.5rem;\n }\n \n .typing-section {\n padding: 0.5rem;\n }\n \n .text-display {\n font-size: 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const typingInput = document.getElementById('typing-input');\n const textDisplay = document.querySelector('.text-display');\n const feedback = document.querySelector('.feedback');\n const playerCar = document.getElementById('player-car');\n \n const sampleText = \"The quick brown fox jumps over the lazy dog. Practice makes perfect!\";\n textDisplay.textContent = sampleText;\n \n typingInput.addEventListener('input', function() {\n const inputText = typingInput.value;\n const currentText = sampleText.slice(0, inputText.length);\n \n if (inputText === currentText) {\n feedback.textContent = \"Correct!\";\n feedback.style.color = \"var(--success-color)\";\n playerCar.style.left = `${(inputText.length / sampleText.length) * 100}%`;\n } else {\n feedback.textContent = \"Incorrect!\";\n feedback.style.color = \"var(--error-color)\";\n }\n \n if (inputText === sampleText) {\n feedback.textContent = \"Completed!\";\n typingInput.value = \"\";\n playerCar.style.left = \"0\";\n }\n });\n \n // Navigation functionality\n const navLinks = document.querySelectorAll('.nav-links a');\n const sections = document.querySelectorAll('.game-section');\n \n navLinks.forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n const target = this.getAttribute('href').slice(1);\n \n sections.forEach(section => {\n section.style.display = section.id === target ? 'block' : 'none';\n });\n });\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 3018,
+ "completion_tokens": 1824,
+ "total_tokens": 4842,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 3018
+ },
+ "system_fingerprint": "fp_3a5770e1b4_prod0225"
+ }
readme.scroll
Changed around line 1
+ # typemasterscroll.pub.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ Typing Master: Race & Learn
Typing Master: Race & Learn
~123 4567 890- =Backspace
TabQWE RTYU IOP[ ]\
CapsASD FGHJ KL;' Enter
ShiftZXC VBNM ,./Shift
Space
~123 4567 890- =Backspace
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: " Typing Master: Race & Learn "
Typing Master: Race & Learn
~123 4567 890- =Backspace
TabQWE RTYU IOP[ ]\
CapsASD FGHJ KL;' Enter
ShiftZXC VBNM ,./Shift
Space
~123 4567 890- =Backspace
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const typingInput = document.getElementById('typing-input');
+ const textDisplay = document.querySelector('.text-display');
+ const feedback = document.querySelector('.feedback');
+ const playerCar = document.getElementById('player-car');
+
+ const sampleText = "The quick brown fox jumps over the lazy dog. Practice makes perfect!";
+ textDisplay.textContent = sampleText;
+
+ typingInput.addEventListener('input', function() {
+ const inputText = typingInput.value;
+ const currentText = sampleText.slice(0, inputText.length);
+
+ if (inputText === currentText) {
+ feedback.textContent = "Correct!";
+ feedback.style.color = "var(--success-color)";
+ playerCar.style.left = `${(inputText.length / sampleText.length) * 100}%`;
+ } else {
+ feedback.textContent = "Incorrect!";
+ feedback.style.color = "var(--error-color)";
+ }
+
+ if (inputText === sampleText) {
+ feedback.textContent = "Completed!";
+ typingInput.value = "";
+ playerCar.style.left = "0";
+ }
+ });
+
+ // Navigation functionality
+ const navLinks = document.querySelectorAll('.nav-links a');
+ const sections = document.querySelectorAll('.game-section');
+
+ navLinks.forEach(link => {
+ link.addEventListener('click', function(e) {
+ e.preventDefault();
+ const target = this.getAttribute('href').slice(1);
+
+ sections.forEach(section => {
+ section.style.display = section.id === target ? 'block' : 'none';
+ });
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2563eb;
+ --secondary-color: #1e40af;
+ --background-color: #f8fafc;
+ --text-color: #1e293b;
+ --accent-color: #f59e0b;
+ --error-color: #dc2626;
+ --success-color: #16a34a;
+ --font-family: 'Inter', system-ui, -apple-system, sans-serif;
+ }
+
+ body {
+ font-family: var(--font-family);
+ background-color: var(--background-color);
+ color: var(--text-color);
+ margin: 0;
+ padding: 0;
+ line-height: 1.6;
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .nav-links {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .primary-button {
+ background-color: var(--accent-color);
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ text-decoration: none;
+ display: inline-block;
+ margin-top: 1rem;
+ }
+
+ .typing-section {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 1rem;
+ }
+
+ .text-display {
+ background-color: white;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin-bottom: 1rem;
+ font-size: 1.25rem;
+ line-height: 1.75;
+ }
+
+ #typing-input {
+ width: 100%;
+ padding: 0.75rem;
+ border: 2px solid var(--primary-color);
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .feedback {
+ color: var(--error-color);
+ font-weight: bold;
+ text-align: center;
+ }
+
+ .game-section {
+ display: none;
+ padding: 2rem;
+ }
+
+ .race-track {
+ position: relative;
+ height: 200px;
+ background-color: #e2e8f0;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ }
+
+ .car {
+ position: absolute;
+ bottom: 0;
+ width: 50px;
+ height: 30px;
+ background-color: var(--primary-color);
+ border-radius: 0.5rem 0.5rem 0 0;
+ transition: left 0.1s linear;
+ }
+
+ .ai-car {
+ background-color: var(--secondary-color);
+ }
+
+ .race-info {
+ margin-top: 1rem;
+ text-align: center;
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .typing-section {
+ padding: 0.5rem;
+ }
+
+ .text-display {
+ font-size: 1rem;
+ }
+ }