commit 4084405929d015ac63f4c3bf400e073a62849175
Author: root <root@hub.scroll.pub>
Date: 2025-01-10 00:54:59 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..f29021f
--- /dev/null
+++ b/body.html
@@ -0,0 +1,77 @@
+<header>
+ <h1>D&D Character Lore Sheet</h1>
+ <nav>
+ <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
+ </nav>
+</header>
+
+<main class="character-sheet">
+ <section class="basic-info">
+ <h2>Character Details</h2>
+ <div class="info-grid">
+ <div class="input-group">
+ <label for="charName">Character Name</label>
+ <input type="text" id="charName" placeholder="Enter name">
+ </div>
+ <div class="input-group">
+ <label for="charClass">Class</label>
+ <input type="text" id="charClass" placeholder="Enter class">
+ </div>
+ <div class="input-group">
+ <label for="charRace">Race</label>
+ <input type="text" id="charRace" placeholder="Enter race">
+ </div>
+ <div class="input-group">
+ <label for="charLevel">Level</label>
+ <input type="number" id="charLevel" min="1" max="20" value="1">
+ </div>
+ </div>
+ </section>
+
+ <section class="background">
+ <h2>Background Story</h2>
+ <div class="story-container">
+ <div class="input-group">
+ <label for="charBackground">Background Type</label>
+ <select id="charBackground">
+ <option value="acolyte">Acolyte</option>
+ <option value="criminal">Criminal</option>
+ <option value="folk-hero">Folk Hero</option>
+ <option value="noble">Noble</option>
+ <option value="sage">Sage</option>
+ <option value="soldier">Soldier</option>
+ </select>
+ </div>
+ <div class="input-group">
+ <label for="backstory">Character Backstory</label>
+ <textarea id="backstory" rows="6" placeholder="Write your character's story..."></textarea>
+ </div>
+ </div>
+ </section>
+
+ <section class="traits">
+ <h2>Personality & Traits</h2>
+ <div class="traits-grid">
+ <div class="input-group">
+ <label for="personality">Personality Traits</label>
+ <textarea id="personality" rows="3"></textarea>
+ </div>
+ <div class="input-group">
+ <label for="ideals">Ideals</label>
+ <textarea id="ideals" rows="3"></textarea>
+ </div>
+ <div class="input-group">
+ <label for="bonds">Bonds</label>
+ <textarea id="bonds" rows="3"></textarea>
+ </div>
+ <div class="input-group">
+ <label for="flaws">Flaws</label>
+ <textarea id="flaws" rows="3"></textarea>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ❤️ for the D&D community</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..b54f6ad
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://dndlore.scroll.pub
+metaTags
+editButton /edit.html
+title D&D Character Lore Sheet
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..bd3cd95
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01Ap2HTiTZGUk4ED5nvZPSh9",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a D&D character sheet website with a focus on character lore and background story.\n\n---domain---\ndndlore.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://dndlore.scroll.pub\nmetaTags\neditButton /edit.html\ntitle D&D Character Lore Sheet\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>D&D Character Lore Sheet</h1>\n <nav>\n <button class=\"theme-toggle\" aria-label=\"Toggle dark mode\">🌙</button>\n </nav>\n</header>\n\n<main class=\"character-sheet\">\n <section class=\"basic-info\">\n <h2>Character Details</h2>\n <div class=\"info-grid\">\n <div class=\"input-group\">\n <label for=\"charName\">Character Name</label>\n <input type=\"text\" id=\"charName\" placeholder=\"Enter name\">\n </div>\n <div class=\"input-group\">\n <label for=\"charClass\">Class</label>\n <input type=\"text\" id=\"charClass\" placeholder=\"Enter class\">\n </div>\n <div class=\"input-group\">\n <label for=\"charRace\">Race</label>\n <input type=\"text\" id=\"charRace\" placeholder=\"Enter race\">\n </div>\n <div class=\"input-group\">\n <label for=\"charLevel\">Level</label>\n <input type=\"number\" id=\"charLevel\" min=\"1\" max=\"20\" value=\"1\">\n </div>\n </div>\n </section>\n\n <section class=\"background\">\n <h2>Background Story</h2>\n <div class=\"story-container\">\n <div class=\"input-group\">\n <label for=\"charBackground\">Background Type</label>\n <select id=\"charBackground\">\n <option value=\"acolyte\">Acolyte</option>\n <option value=\"criminal\">Criminal</option>\n <option value=\"folk-hero\">Folk Hero</option>\n <option value=\"noble\">Noble</option>\n <option value=\"sage\">Sage</option>\n <option value=\"soldier\">Soldier</option>\n </select>\n </div>\n <div class=\"input-group\">\n <label for=\"backstory\">Character Backstory</label>\n <textarea id=\"backstory\" rows=\"6\" placeholder=\"Write your character's story...\"></textarea>\n </div>\n </div>\n </section>\n\n <section class=\"traits\">\n <h2>Personality & Traits</h2>\n <div class=\"traits-grid\">\n <div class=\"input-group\">\n <label for=\"personality\">Personality Traits</label>\n <textarea id=\"personality\" rows=\"3\"></textarea>\n </div>\n <div class=\"input-group\">\n <label for=\"ideals\">Ideals</label>\n <textarea id=\"ideals\" rows=\"3\"></textarea>\n </div>\n <div class=\"input-group\">\n <label for=\"bonds\">Bonds</label>\n <textarea id=\"bonds\" rows=\"3\"></textarea>\n </div>\n <div class=\"input-group\">\n <label for=\"flaws\">Flaws</label>\n <textarea id=\"flaws\" rows=\"3\"></textarea>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with ❤️ for the D&D community</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #e74c3c;\n --bg-color: #f5f6fa;\n --text-color: #2c3e50;\n --border-radius: 8px;\n --transition: all 0.3s ease;\n}\n\n.dark-mode {\n --primary-color: #34495e;\n --secondary-color: #e74c3c;\n --bg-color: #2c3e50;\n --text-color: #ecf0f1;\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 background: var(--bg-color);\n color: var(--text-color);\n transition: var(--transition);\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 1rem;\n text-align: center;\n position: relative;\n}\n\nh1 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n font-weight: 700;\n}\n\n.theme-toggle {\n position: absolute;\n right: 1rem;\n top: 1rem;\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: white;\n padding: 0.5rem;\n border-radius: 50%;\n transition: var(--transition);\n}\n\n.theme-toggle:hover {\n transform: rotate(360deg);\n}\n\n.character-sheet {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\nsection {\n background: white;\n padding: 2rem;\n border-radius: var(--border-radius);\n margin-bottom: 2rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nh2 {\n color: var(--secondary-color);\n margin-bottom: 1.5rem;\n border-bottom: 2px solid var(--secondary-color);\n padding-bottom: 0.5rem;\n}\n\n.info-grid, .traits-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n}\n\n.input-group {\n margin-bottom: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 600;\n}\n\ninput, select, textarea {\n width: 100%;\n padding: 0.8rem;\n border: 2px solid #ddd;\n border-radius: var(--border-radius);\n font-size: 1rem;\n transition: var(--transition);\n}\n\ninput:focus, select:focus, textarea:focus {\n outline: none;\n border-color: var(--secondary-color);\n box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);\n}\n\ntextarea {\n resize: vertical;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n}\n\n@media (max-width: 768px) {\n .character-sheet {\n margin: 1rem auto;\n }\n \n section {\n padding: 1rem;\n }\n \n h1 {\n font-size: 1.5rem;\n }\n \n .info-grid, .traits-grid {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Theme toggle functionality\n const themeToggle = document.querySelector('.theme-toggle');\n const body = document.body;\n \n themeToggle.addEventListener('click', () => {\n body.classList.toggle('dark-mode');\n themeToggle.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌙';\n saveThemePreference();\n });\n\n // Load saved theme preference\n if (localStorage.getItem('theme') === 'dark') {\n body.classList.add('dark-mode');\n themeToggle.textContent = '☀️';\n }\n\n // Auto-save functionality\n const inputs = document.querySelectorAll('input, textarea, select');\n inputs.forEach(input => {\n // Load saved values\n const savedValue = localStorage.getItem(input.id);\n if (savedValue) {\n input.value = savedValue;\n }\n\n // Save on input\n input.addEventListener('input', () => {\n localStorage.setItem(input.id, input.value);\n });\n });\n\n // Save theme preference\n function saveThemePreference() {\n localStorage.setItem('theme', body.classList.contains('dark-mode') ? 'dark' : 'light');\n }\n});\n\n---end---\n\nThis implementation features:\n\n1. A clean, modern design with smooth animations\n2. Dark mode toggle with local storage persistence\n3. Auto-saving functionality for all form inputs\n4. Responsive grid layouts that adapt to different screen sizes\n5. Custom form styling with focus states\n6. Semantic HTML structure\n7. Accessible form labels and ARIA attributes\n8. CSS variables for easy theming\n9. Smooth transitions and hover effects\n10. Mobile-first approach with responsive design\n\nThe design uses a medieval/fantasy-inspired color scheme while maintaining modern web design principles. The layout is organized into clear sections for character details, background story, and personality traits."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 280,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2370
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..beb8499
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# dndlore.scroll.pub
+
+website generated by Claude from prompt: A DND Character Sheet with Lore Background
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8e94a5e
--- /dev/null
+++ b/script.js
@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Theme toggle functionality
+ const themeToggle = document.querySelector('.theme-toggle');
+ const body = document.body;
+
+ themeToggle.addEventListener('click', () => {
+ body.classList.toggle('dark-mode');
+ themeToggle.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌙';
+ saveThemePreference();
+ });
+
+ // Load saved theme preference
+ if (localStorage.getItem('theme') === 'dark') {
+ body.classList.add('dark-mode');
+ themeToggle.textContent = '☀️';
+ }
+
+ // Auto-save functionality
+ const inputs = document.querySelectorAll('input, textarea, select');
+ inputs.forEach(input => {
+ // Load saved values
+ const savedValue = localStorage.getItem(input.id);
+ if (savedValue) {
+ input.value = savedValue;
+ }
+
+ // Save on input
+ input.addEventListener('input', () => {
+ localStorage.setItem(input.id, input.value);
+ });
+ });
+
+ // Save theme preference
+ function saveThemePreference() {
+ localStorage.setItem('theme', body.classList.contains('dark-mode') ? 'dark' : 'light');
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5a4394f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,142 @@
+:root {
+ --primary-color: #2c3e50;
+ --secondary-color: #e74c3c;
+ --bg-color: #f5f6fa;
+ --text-color: #2c3e50;
+ --border-radius: 8px;
+ --transition: all 0.3s ease;
+}
+
+.dark-mode {
+ --primary-color: #34495e;
+ --secondary-color: #e74c3c;
+ --bg-color: #2c3e50;
+ --text-color: #ecf0f1;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+ background: var(--bg-color);
+ color: var(--text-color);
+ transition: var(--transition);
+}
+
+header {
+ background: var(--primary-color);
+ color: white;
+ padding: 1rem;
+ text-align: center;
+ position: relative;
+}
+
+h1 {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+ font-weight: 700;
+}
+
+.theme-toggle {
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: white;
+ padding: 0.5rem;
+ border-radius: 50%;
+ transition: var(--transition);
+}
+
+.theme-toggle:hover {
+ transform: rotate(360deg);
+}
+
+.character-sheet {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+}
+
+section {
+ background: white;
+ padding: 2rem;
+ border-radius: var(--border-radius);
+ margin-bottom: 2rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+ color: var(--secondary-color);
+ margin-bottom: 1.5rem;
+ border-bottom: 2px solid var(--secondary-color);
+ padding-bottom: 0.5rem;
+}
+
+.info-grid, .traits-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.input-group {
+ margin-bottom: 1rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+input, select, textarea {
+ width: 100%;
+ padding: 0.8rem;
+ border: 2px solid #ddd;
+ border-radius: var(--border-radius);
+ font-size: 1rem;
+ transition: var(--transition);
+}
+
+input:focus, select:focus, textarea:focus {
+ outline: none;
+ border-color: var(--secondary-color);
+ box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
+}
+
+textarea {
+ resize: vertical;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+}
+
+@media (max-width: 768px) {
+ .character-sheet {
+ margin: 1rem auto;
+ }
+
+ section {
+ padding: 1rem;
+ }
+
+ h1 {
+ font-size: 1.5rem;
+ }
+
+ .info-grid, .traits-grid {
+ grid-template-columns: 1fr;
+ }
+}