commit 2935eafe70316356b5390080e9432d0e9a789b06
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 18:33:41 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..3fe0438
--- /dev/null
+++ b/body.html
@@ -0,0 +1,12 @@
+<main>
+ <div class="container">
+ <h1>WordFlow</h1>
+ <p class="subtitle">Read word by word at your own pace.</p>
+ <textarea id="inputText" placeholder="Paste or type your text here..."></textarea>
+ <button id="startBtn">Start Reading</button>
+ <div id="wordDisplay" aria-live="polite"></div>
+ </div>
+</main>
+<footer>
+ <p>WordFlow - A simple, elegant way to read.</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..1192ea8
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://wordflow.scroll.pub
+metaTags
+editButton /edit.html
+title WordFlow - Read Word by Word
+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..17412de
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "72482f42-e527-4bb3-9316-67e6e51c0840",
+ "object": "chat.completion",
+ "created": 1735497207,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nwordflow.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://wordflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle WordFlow - Read Word by Word\nstyle.css\nbody.html\nscript.js\n---body.html---\n<main>\n <div class=\"container\">\n <h1>WordFlow</h1>\n <p class=\"subtitle\">Read word by word at your own pace.</p>\n <textarea id=\"inputText\" placeholder=\"Paste or type your text here...\"></textarea>\n <button id=\"startBtn\">Start Reading</button>\n <div id=\"wordDisplay\" aria-live=\"polite\"></div>\n </div>\n</main>\n<footer>\n <p>WordFlow - A simple, elegant way to read.</p>\n</footer>\n---style.css---\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n background: linear-gradient(135deg, #f5f7fa, #c3cfe2);\n color: #333;\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.container {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n background: rgba(255, 255, 255, 0.9);\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10px);\n}\n\nh1 {\n font-size: 2.5rem;\n color: #2c3e50;\n text-align: center;\n margin-bottom: 1rem;\n}\n\n.subtitle {\n text-align: center;\n color: #666;\n margin-bottom: 2rem;\n}\n\ntextarea {\n width: 100%;\n min-height: 150px;\n padding: 1rem;\n border: 2px solid #ddd;\n border-radius: 8px;\n font-size: 1rem;\n margin-bottom: 1rem;\n resize: vertical;\n transition: border-color 0.3s ease;\n}\n\ntextarea:focus {\n border-color: #3498db;\n outline: none;\n}\n\nbutton {\n display: block;\n width: 100%;\n padding: 1rem;\n background: #3498db;\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 1rem;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\nbutton:hover {\n background: #2980b9;\n}\n\n#wordDisplay {\n margin-top: 2rem;\n font-size: 1.5rem;\n line-height: 2;\n color: #2c3e50;\n white-space: pre-wrap;\n min-height: 200px;\n padding: 1rem;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 8px;\n box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);\n overflow-y: auto;\n max-height: 60vh;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n color: #666;\n margin-top: auto;\n}\n\n@media (max-width: 768px) {\n .container {\n margin: 1rem;\n padding: 1rem;\n }\n\n h1 {\n font-size: 2rem;\n }\n\n #wordDisplay {\n font-size: 1.2rem;\n }\n}\n---script.js---\ndocument.getElementById('startBtn').addEventListener('click', function() {\n const inputText = document.getElementById('inputText').value.trim();\n if (!inputText) {\n alert('Please enter some text to start reading.');\n return;\n }\n\n const words = inputText.split(/\\s+/);\n const wordDisplay = document.getElementById('wordDisplay');\n wordDisplay.innerHTML = '';\n\n let currentIndex = 0;\n\n function displayWord() {\n if (currentIndex < words.length) {\n const wordSpan = document.createElement('span');\n wordSpan.textContent = words[currentIndex] + ' ';\n wordDisplay.appendChild(wordSpan);\n currentIndex++;\n }\n }\n\n wordDisplay.addEventListener('scroll', function() {\n const { scrollTop, scrollHeight, clientHeight } = wordDisplay;\n if (scrollTop + clientHeight >= scrollHeight - 10) {\n displayWord();\n }\n });\n\n // Initial display of first word\n displayWord();\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 298,
+ "completion_tokens": 1040,
+ "total_tokens": 1338,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 298
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..5b3f316
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# wordflow1.scroll.pub
+Website generated by DeepSeek from prompt: Create a website that allows me to upload free text and then read the content word by word by scrolling using my mouse. I want the scroll speed to be reflective to the reading speed. All manual. I can also scroll back. Keep revealed word there (don't remove them after they show up only if scrolling back)
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..1b60bd6
--- /dev/null
+++ b/script.js
@@ -0,0 +1,32 @@
+document.getElementById('startBtn').addEventListener('click', function() {
+ const inputText = document.getElementById('inputText').value.trim();
+ if (!inputText) {
+ alert('Please enter some text to start reading.');
+ return;
+ }
+
+ const words = inputText.split(/\s+/);
+ const wordDisplay = document.getElementById('wordDisplay');
+ wordDisplay.innerHTML = '';
+
+ let currentIndex = 0;
+
+ function displayWord() {
+ if (currentIndex < words.length) {
+ const wordSpan = document.createElement('span');
+ wordSpan.textContent = words[currentIndex] + ' ';
+ wordDisplay.appendChild(wordSpan);
+ currentIndex++;
+ }
+ }
+
+ wordDisplay.addEventListener('scroll', function() {
+ const { scrollTop, scrollHeight, clientHeight } = wordDisplay;
+ if (scrollTop + clientHeight >= scrollHeight - 10) {
+ displayWord();
+ }
+ });
+
+ // Initial display of first word
+ displayWord();
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..977d9a1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,109 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+ color: #333;
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.container {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(10px);
+}
+
+h1 {
+ font-size: 2.5rem;
+ color: #2c3e50;
+ text-align: center;
+ margin-bottom: 1rem;
+}
+
+.subtitle {
+ text-align: center;
+ color: #666;
+ margin-bottom: 2rem;
+}
+
+textarea {
+ width: 100%;
+ min-height: 150px;
+ padding: 1rem;
+ border: 2px solid #ddd;
+ border-radius: 8px;
+ font-size: 1rem;
+ margin-bottom: 1rem;
+ resize: vertical;
+ transition: border-color 0.3s ease;
+}
+
+textarea:focus {
+ border-color: #3498db;
+ outline: none;
+}
+
+button {
+ display: block;
+ width: 100%;
+ padding: 1rem;
+ background: #3498db;
+ color: white;
+ border: none;
+ border-radius: 8px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+button:hover {
+ background: #2980b9;
+}
+
+#wordDisplay {
+ margin-top: 2rem;
+ font-size: 1.5rem;
+ line-height: 2;
+ color: #2c3e50;
+ white-space: pre-wrap;
+ min-height: 200px;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 8px;
+ box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+ overflow-y: auto;
+ max-height: 60vh;
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ color: #666;
+ margin-top: auto;
+}
+
+@media (max-width: 768px) {
+ .container {
+ margin: 1rem;
+ padding: 1rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ #wordDisplay {
+ font-size: 1.2rem;
+ }
+}
\ No newline at end of file