commit 686af4f7c599336e571fd16cc021e61d02343ff4
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 17:38:06 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..4eeec2c
--- /dev/null
+++ b/body.html
@@ -0,0 +1,41 @@
+<header>
+ <nav>
+ <div class="logo">Lexify</div>
+ <div class="theme-toggle">
+ <button id="themeBtn" aria-label="Toggle dark mode">
+ <svg viewBox="0 0 24 24" width="24" height="24">
+ <path d="M12 2L12 22M2 12L22 12" stroke="currentColor" stroke-width="2"/>
+ </svg>
+ </button>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="search-section">
+ <h1>Look up any word</h1>
+ <div class="search-container">
+ <input type="text" id="searchInput" placeholder="Type a word..." aria-label="Search for a word">
+ <button id="searchBtn" aria-label="Search">
+ <svg viewBox="0 0 24 24" width="24" height="24">
+ <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2"/>
+ </svg>
+ </button>
+ </div>
+ </section>
+
+ <section class="results-section" aria-live="polite">
+ <div id="wordDisplay"></div>
+ <div id="definition"></div>
+ <div id="etymology"></div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with care by Lexify</p>
+ <nav>
+ <a href="/about">About</a>
+ <a href="/privacy">Privacy</a>
+ <a href="/terms">Terms</a>
+ </nav>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..98b84d4
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://lexify.scroll.pub
+metaTags
+ description A beautiful modern dictionary with instant word lookups and etymology
+ keywords dictionary, words, definitions, etymology, vocabulary, language
+editButton /edit.html
+title Lexify - Modern Dictionary
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..1cbce39
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01N5GYnowM2nHPi2dgNbUgvr",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a modern dictionary website:\n\n---domain---\nlexify.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://lexify.scroll.pub\nmetaTags\n description A beautiful modern dictionary with instant word lookups and etymology\n keywords dictionary, words, definitions, etymology, vocabulary, language\neditButton /edit.html\ntitle Lexify - Modern Dictionary\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Lexify</div>\n <div class=\"theme-toggle\">\n <button id=\"themeBtn\" aria-label=\"Toggle dark mode\">\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path d=\"M12 2L12 22M2 12L22 12\" stroke=\"currentColor\" stroke-width=\"2\"/>\n </svg>\n </button>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"search-section\">\n <h1>Look up any word</h1>\n <div class=\"search-container\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"Type a word...\" aria-label=\"Search for a word\">\n <button id=\"searchBtn\" aria-label=\"Search\">\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path d=\"M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z\" stroke=\"currentColor\" stroke-width=\"2\"/>\n </svg>\n </button>\n </div>\n </section>\n\n <section class=\"results-section\" aria-live=\"polite\">\n <div id=\"wordDisplay\"></div>\n <div id=\"definition\"></div>\n <div id=\"etymology\"></div>\n </section>\n</main>\n\n<footer>\n <p>Made with care by Lexify</p>\n <nav>\n <a href=\"/about\">About</a>\n <a href=\"/privacy\">Privacy</a>\n <a href=\"/terms\">Terms</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary: #2563eb;\n --bg: #ffffff;\n --text: #1f2937;\n --surface: #f3f4f6;\n --border: #e5e7eb;\n}\n\n[data-theme=\"dark\"] {\n --primary: #60a5fa;\n --bg: #111827;\n --text: #f9fafb;\n --surface: #1f2937;\n --border: #374151;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n line-height: 1.6;\n transition: background-color 0.3s, color 0.3s;\n}\n\nheader {\n padding: 1rem;\n border-bottom: 1px solid var(--border);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\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 background: linear-gradient(45deg, var(--primary), #a855f7);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\nmain {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem 1rem;\n}\n\n.search-section {\n text-align: center;\n margin-bottom: 3rem;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1.5rem;\n background: linear-gradient(45deg, var(--primary), #a855f7);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.search-container {\n display: flex;\n gap: 0.5rem;\n background: var(--surface);\n padding: 0.5rem;\n border-radius: 9999px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\ninput {\n flex: 1;\n padding: 0.75rem 1.5rem;\n border: none;\n background: transparent;\n color: var(--text);\n font-size: 1.1rem;\n}\n\ninput:focus {\n outline: none;\n}\n\nbutton {\n background: none;\n border: none;\n color: var(--text);\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 50%;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background: rgba(0, 0, 0, 0.1);\n}\n\n.results-section {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.3s, transform 0.3s;\n}\n\n.results-section.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n#wordDisplay {\n font-size: 2rem;\n font-weight: bold;\n margin-bottom: 1rem;\n}\n\n#definition, #etymology {\n background: var(--surface);\n padding: 1.5rem;\n border-radius: 1rem;\n margin-bottom: 1rem;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n border-top: 1px solid var(--border);\n}\n\nfooter nav {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n}\n\nfooter a {\n color: var(--text);\n text-decoration: none;\n}\n\n@media (max-width: 640px) {\n h1 {\n font-size: 2rem;\n }\n \n .search-container {\n flex-direction: column;\n border-radius: 1rem;\n }\n \n input {\n width: 100%;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const themeBtn = document.getElementById('themeBtn');\n const searchInput = document.getElementById('searchInput');\n const searchBtn = document.getElementById('searchBtn');\n const wordDisplay = document.getElementById('wordDisplay');\n const definition = document.getElementById('definition');\n const etymology = document.getElementById('etymology');\n const resultsSection = document.querySelector('.results-section');\n\n // Theme toggling\n const toggleTheme = () => {\n document.documentElement.setAttribute('data-theme',\n document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'\n );\n };\n\n themeBtn.addEventListener('click', toggleTheme);\n\n // Mock dictionary data\n const dictionary = {\n 'example': {\n definition: 'A representative form or pattern',\n etymology: 'From Latin exemplum (\"sample, pattern\")'\n },\n 'dictionary': {\n definition: 'A reference book containing words with their definitions',\n etymology: 'From Medieval Latin dictionarium (\"word book\")'\n }\n };\n\n const searchWord = () => {\n const word = searchInput.value.toLowerCase().trim();\n \n if (word) {\n const result = dictionary[word] || {\n definition: 'Word not found in dictionary',\n etymology: 'Etymology unavailable'\n };\n\n wordDisplay.textContent = word;\n definition.textContent = result.definition;\n etymology.textContent = result.etymology;\n \n resultsSection.classList.add('visible');\n }\n };\n\n searchBtn.addEventListener('click', searchWord);\n searchInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') searchWord();\n });\n\n // Animation on scroll\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n });\n\n observer.observe(resultsSection);\n});\n\n---end---\n\nThis dictionary website features:\n- Clean, minimalist design with beautiful gradients\n- Dark/light mode toggle\n- Smooth animations and transitions\n- Fully responsive layout\n- Accessible semantic HTML\n- Modern search interface\n- Mock dictionary functionality (expandable)\n- Intersection Observer for scroll animations\n- Beautiful typography and spacing\n- Professional gradients and shadows\n- SEO-optimized meta tags\n\nThe domain \"lexify\" combines \"lex\" (word/law in Latin) with \"-ify\" (to make), suggesting transformation through language learning."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 271,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2333
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..f853ae3
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# lexify.scroll.pub
+Website generated by Claude from prompt: dictionary
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b925703
--- /dev/null
+++ b/script.js
@@ -0,0 +1,63 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const themeBtn = document.getElementById('themeBtn');
+ const searchInput = document.getElementById('searchInput');
+ const searchBtn = document.getElementById('searchBtn');
+ const wordDisplay = document.getElementById('wordDisplay');
+ const definition = document.getElementById('definition');
+ const etymology = document.getElementById('etymology');
+ const resultsSection = document.querySelector('.results-section');
+
+ // Theme toggling
+ const toggleTheme = () => {
+ document.documentElement.setAttribute('data-theme',
+ document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
+ );
+ };
+
+ themeBtn.addEventListener('click', toggleTheme);
+
+ // Mock dictionary data
+ const dictionary = {
+ 'example': {
+ definition: 'A representative form or pattern',
+ etymology: 'From Latin exemplum ("sample, pattern")'
+ },
+ 'dictionary': {
+ definition: 'A reference book containing words with their definitions',
+ etymology: 'From Medieval Latin dictionarium ("word book")'
+ }
+ };
+
+ const searchWord = () => {
+ const word = searchInput.value.toLowerCase().trim();
+
+ if (word) {
+ const result = dictionary[word] || {
+ definition: 'Word not found in dictionary',
+ etymology: 'Etymology unavailable'
+ };
+
+ wordDisplay.textContent = word;
+ definition.textContent = result.definition;
+ etymology.textContent = result.etymology;
+
+ resultsSection.classList.add('visible');
+ }
+ };
+
+ searchBtn.addEventListener('click', searchWord);
+ searchInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') searchWord();
+ });
+
+ // Animation on scroll
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ });
+
+ observer.observe(resultsSection);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..40ba244
--- /dev/null
+++ b/style.css
@@ -0,0 +1,164 @@
+:root {
+ --primary: #2563eb;
+ --bg: #ffffff;
+ --text: #1f2937;
+ --surface: #f3f4f6;
+ --border: #e5e7eb;
+}
+
+[data-theme="dark"] {
+ --primary: #60a5fa;
+ --bg: #111827;
+ --text: #f9fafb;
+ --surface: #1f2937;
+ --border: #374151;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ line-height: 1.6;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+header {
+ padding: 1rem;
+ border-bottom: 1px solid var(--border);
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, var(--primary), #a855f7);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+main {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2rem 1rem;
+}
+
+.search-section {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1.5rem;
+ background: linear-gradient(45deg, var(--primary), #a855f7);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.search-container {
+ display: flex;
+ gap: 0.5rem;
+ background: var(--surface);
+ padding: 0.5rem;
+ border-radius: 9999px;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+input {
+ flex: 1;
+ padding: 0.75rem 1.5rem;
+ border: none;
+ background: transparent;
+ color: var(--text);
+ font-size: 1.1rem;
+}
+
+input:focus {
+ outline: none;
+}
+
+button {
+ background: none;
+ border: none;
+ color: var(--text);
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+}
+
+button:hover {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+.results-section {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.3s, transform 0.3s;
+}
+
+.results-section.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+#wordDisplay {
+ font-size: 2rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+}
+
+#definition, #etymology {
+ background: var(--surface);
+ padding: 1.5rem;
+ border-radius: 1rem;
+ margin-bottom: 1rem;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ border-top: 1px solid var(--border);
+}
+
+footer nav {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-top: 1rem;
+}
+
+footer a {
+ color: var(--text);
+ text-decoration: none;
+}
+
+@media (max-width: 640px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .search-container {
+ flex-direction: column;
+ border-radius: 1rem;
+ }
+
+ input {
+ width: 100%;
+ }
+}