Changes to wordflow1.scroll.pub

root

23 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     WordFlow
+     Read word by word at your own pace.
+     
+     
+     
+   
+ 
+ 
+   WordFlow - A simple, elegant way to read.
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://wordflow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title WordFlow - Read Word by Word
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  \n    WordFlow\n    Read word by word at your own pace.
\n    \n    \n    
\n  
\n\n\n  WordFlow - A simple, elegant way to read.
\n\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"
+ }

readme.scroll

Changed around line 1

+ # 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)

script.js

Changed around line 1
+ 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();
+ });

style.css

Changed around line 1
+ * {
+   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;
+   }
+ }