├── .gitignore
├── app.py
├── assets
    └── demo.gif
├── readme.md
├── requirements.txt
├── sucveceza.txt
└── templates
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Byte-compiled / optimized / DLL files
  2 | __pycache__/
  3 | *.py[cod]
  4 | *$py.class
  5 | 
  6 | # C extensions
  7 | *.so
  8 | 
  9 | # Distribution / packaging
 10 | .Python
 11 | build/
 12 | develop-eggs/
 13 | dist/
 14 | downloads/
 15 | eggs/
 16 | .eggs/
 17 | lib/
 18 | lib64/
 19 | parts/
 20 | sdist/
 21 | var/
 22 | wheels/
 23 | share/python-wheels/
 24 | *.egg-info/
 25 | .installed.cfg
 26 | *.egg
 27 | MANIFEST
 28 | 
 29 | # PyInstaller
 30 | #  Usually these files are written by a python script from a template
 31 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 32 | *.manifest
 33 | *.spec
 34 | 
 35 | # Installer logs
 36 | pip-log.txt
 37 | pip-delete-this-directory.txt
 38 | 
 39 | # Unit test / coverage reports
 40 | htmlcov/
 41 | .tox/
 42 | .nox/
 43 | .coverage
 44 | .coverage.*
 45 | .cache
 46 | nosetests.xml
 47 | coverage.xml
 48 | *.cover
 49 | *.py,cover
 50 | .hypothesis/
 51 | .pytest_cache/
 52 | cover/
 53 | 
 54 | # Translations
 55 | *.mo
 56 | *.pot
 57 | 
 58 | # Django stuff:
 59 | *.log
 60 | local_settings.py
 61 | db.sqlite3
 62 | db.sqlite3-journal
 63 | 
 64 | # Flask stuff:
 65 | instance/
 66 | .webassets-cache
 67 | 
 68 | # Scrapy stuff:
 69 | .scrapy
 70 | 
 71 | # Sphinx documentation
 72 | docs/_build/
 73 | 
 74 | # PyBuilder
 75 | .pybuilder/
 76 | target/
 77 | 
 78 | # Jupyter Notebook
 79 | .ipynb_checkpoints
 80 | 
 81 | # IPython
 82 | profile_default/
 83 | ipython_config.py
 84 | 
 85 | # pyenv
 86 | #   For a library or package, you might want to ignore these files since the code is
 87 | #   intended to run in multiple environments; otherwise, check them in:
 88 | # .python-version
 89 | 
 90 | # pipenv
 91 | #   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
 92 | #   However, in case of collaboration, if having platform-specific dependencies or dependencies
 93 | #   having no cross-platform support, pipenv may install dependencies that don't work, or not
 94 | #   install all needed dependencies.
 95 | #Pipfile.lock
 96 | 
 97 | # poetry
 98 | #   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
 99 | #   This is especially recommended for binary packages to ensure reproducibility, and is more
100 | #   commonly ignored for libraries.
101 | #   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
102 | #poetry.lock
103 | 
104 | # pdm
105 | #   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
106 | #pdm.lock
107 | #   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
108 | #   in version control.
109 | #   https://pdm.fming.dev/#use-with-ide
110 | .pdm.toml
111 | 
112 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
113 | __pypackages__/
114 | 
115 | # Celery stuff
116 | celerybeat-schedule
117 | celerybeat.pid
118 | 
119 | # SageMath parsed files
120 | *.sage.py
121 | 
122 | # Environments
123 | .env
124 | .venv
125 | env/
126 | venv/
127 | ENV/
128 | env.bak/
129 | venv.bak/
130 | 
131 | # Spyder project settings
132 | .spyderproject
133 | .spyproject
134 | 
135 | # Rope project settings
136 | .ropeproject
137 | 
138 | # mkdocs documentation
139 | /site
140 | 
141 | # mypy
142 | .mypy_cache/
143 | .dmypy.json
144 | dmypy.json
145 | 
146 | # Pyre type checker
147 | .pyre/
148 | 
149 | # pytype static type analyzer
150 | .pytype/
151 | 
152 | # Cython debug symbols
153 | cython_debug/
154 | 
155 | # PyCharm
156 | #  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
157 | #  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
158 | #  and can be added to the global gitignore or merged into this file.  For a more nuclear
159 | #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
160 | #.idea/
161 | 


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, render_template
 2 | 
 3 | app = Flask(__name__)
 4 | 
 5 | 
 6 | @app.route("/")
 7 | def index():
 8 | 
 9 |     with open("sucveceza.txt", "r", encoding="utf8") as file:
10 |         text = file.read()
11 | 
12 |     words = text.split()  # Split the text into words
13 |     return render_template("index.html", words=words)
14 | 
15 | 
16 | if __name__ == "__main__":
17 |     app.run(debug=True)
18 | 


--------------------------------------------------------------------------------
/assets/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cobanov/fast-focused/c7f7e539fa37f02787715f4b27749f8f66cbe549/assets/demo.gif


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Fast + Focused 
 2 | 
 3 | ![](assets/demo.gif)
 4 | 
 5 | The Fast + Focused App is a web-based application designed to enhance your reading speed by displaying words from a text file at a rapid pace. This method, often referred to as speed reading, allows users to consume content faster by minimizing the eye movement and focusing on central vision. The app dynamically reads a text file and displays each word individually at a user-defined speed.
 6 | 
 7 | ## Setup
 8 | 
 9 | The app will be running on http://localhost:5000. Open this URL in your web browser to access the app.
10 | 
11 | ```bash
12 | pip install Flask
13 | ```
14 | 
15 | ```bash
16 | python app.py
17 | ```
18 | 
19 | ## Usage
20 | 
21 | To use the app, simply follow these steps:
22 | 
23 | 1. Make sure you have a text file named `sucveceza.txt` in the same directory as `app.py`. This file should contain the text you want to read fast.
24 | 2. Start the application using the instructions provided in the **Setup** section.
25 | 3. Open your browser and go to http://localhost:5000.
26 | 4. Click the "Start" button to begin the speed reading session.
27 | 
28 | ## Customization
29 | 
30 | You can customize the reading speed by modifying the `speed` variable in the `index.html` file. The speed is defined in milliseconds per word. The default is set to 175 milliseconds per word.
31 | 
32 | ## Contributing
33 | 
34 | We welcome contributions to this project! If you have suggestions for improvements or encounter any issues, please feel free to submit an issue or pull request.
35 | 
36 | ## License
37 | 
38 | This project is licensed under the MIT License - see the LICENSE file for details.


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
 1 | blinker==1.8.2
 2 | click==8.1.7
 3 | Flask==3.0.3
 4 | importlib_metadata==8.0.0
 5 | itsdangerous==2.2.0
 6 | Jinja2==3.1.4
 7 | MarkupSafe==2.1.5
 8 | Werkzeug==3.0.3
 9 | zipp==3.19.2
10 | 


--------------------------------------------------------------------------------
/sucveceza.txt:
--------------------------------------------------------------------------------
  1 | Temmuz başlarında çok sıcak bir gün, akşama doğru, genç
  2 | bir adam “S…” Sokağı’ndaki bir pansiyonda kiraladığı küçük
  3 | odasından çıktı ve ağır, kararsız adımlarla “K…” Köprüsü’ne
  4 | yöneldi.
  5 | Ev sahibiyle merdivenlerde karşılaşmaktan kurtulmayı
  6 | başarmıştı. Kiraladığı küçük oda, beş katlı yüksek bir evin
  7 | çatı katındaydı ve odadan çok bir dolabı andırıyordu. Yemek
  8 | ve öteki hizmetler de içinde olmak üzere kiralamıştı odayı. Ev
  9 | sahibi kadın bir merdiven aşağıda ayrı bir dairede oturuyordu
 10 | ve genç adam her sokağa çıkışında, ev sahibi kadının
 11 | merdivenlere doğru ardına dek açılmış olan mutfak kapısının
 12 | önünden geçmek zorundaydı. Buradan her geçişinde de genç
 13 | adam korkuya benzer sayrılı bir duygu içinde kalır, utanç
 14 | duyar, yüzünü buruştururdu. Ev sahibi kadına epey borcu
 15 | vardı ve onunla karşılaşmaktan çekiniyordu.
 16 | Korkak ve çekingen biri değildi aslında. Hatta tam tersine;
 17 | ama bir süredir tedirgindi, gerilim içindeydi. Öylesine kendi
 18 | içine kapanmış, öylesine herkesten kopmuştu ki, yalnızca ev
 19 | sahibi kadınla değil, kiminle olursa olsun, karşılaşmaktan
 20 | kaçınıyordu. Ezici bir yoksulluk içindeydi, ama şu son
 21 | günlerde buna bile aldırdığı yoktu. Asıl işlerini tümüyle bir
 22 | yana bırakmıştı ve bunlarla uğraşmayı hiç istemiyordu.
 23 | Aslında o kendisine karşı neler tasarlıyor olursa olsun, ev
 24 | sahibi kadına da aldırdığı yoktu. Ama merdivenlerde durmak,
 25 | kendisini hiç mi hiç ilgilendirmeyen gündelik birtakım
 26 | saçmalıkları dinlemek, kira borcu konusundaki sızlanmalara,
 27 | korkutmalara, yakınmalara katlanmak, üstelik yakasını
 28 | kurtarabilmek için sözde nedenler bulmak, özürler dilemek,
 29 | yalanlar söylemek… Hayır, merdivenleri bir kedi sessizliğiyle
 30 | inip sıvışmak yapılacak en iyi şeydi.
 31 | Ama bu kez borçlu olduğu kişiyle karşılaşmak korkusu,
 32 | sokağa çıktığında kendisini bile şaşırttı. “Ne denli zorlu bir
 33 | işe girişmek istiyorum, ama aynı zamanda da ne denli boş
 34 | şeylerden korkuyorum” diye düşündü tuhaf bir
 35 | gülümsemeyle. “Hmm… Evet… Hem her şey insanın kendi
 36 | elinde, hem de insan yalnızca korkaklığı yüzünden ne fırsatlar
 37 | kaçırıyor… Bu artık yadsınamaz bir gerçek, bir belit. İlginç
 38 | bir şey, acaba insanlar en çok neden korkarlar? Atacakları
 39 | yeni bir adımdan, kendi söyleyecekleri yeni bir sözden
 40 | herhalde… Ben de amma gevezelik ediyorum ha! Gevezelik
 41 | ettiğim için de hiçbir şey yapmıyorum. Ya da şöyle: Hiçbir
 42 | şey yapmadığım için gevezelik ediyorum. Gevezelik bana şu
 43 | son ay içinde günlerce bir köşede yatmaktan ve düşünmekten
 44 | gelmiş bir şey. Düşündüklerim de bir şey olsa bari, ipe sapa
 45 | gelmez şeyler… Peki şimdi niçin gidiyorum? Yapabilecek
 46 | miyim düşündüğüm şeyi? Hem ciddi bir şey mi bu? Hayır, hiç
 47 | de değil. Düşlerle avutup duruyorum kendimi; oyuncaklarla!
 48 | Evet, evet oyuncaklarla!”
 49 | Boğucu bir hava vardı sokakta, çok sıcaktı; yapı iskeleleri,
 50 | tuğlalar, kireç tozları, itişip kakışan kalabalık; bir yazlık
 51 | kiralama olanağı bulamayan her Petersburglunun çok iyi
 52 | bildiği o özel, pis, yaz kokusu… Tüm bunlar, genç adamın
 53 | zaten bozuk olan sinirlerini iyice germişti. Hele kentin bu
 54 | bölgesinde sayıları oldukça kabarık olan meyhanelerden
 55 | yayılan dayanılmaz içki kokusu, henüz iş zamanı olmasına
 56 | karşın, adım başında rastlanan sarhoşlar, tablonun iğrenç ve iç
 57 | karartıcı rengini tamamlıyor gibiydi. Delikanlının ince yüz
 58 | çizgilerinde derin bir iğrenme anlatımı belirdi bir an. Yeri
 59 | gelmişken belirtelim, delikanlı gerçekten yakışıklıydı; güzel
 60 | kara gözleri, esmer teni, ortadan biraz uzunca boyu, ince ve
 61 | biçimli vücuduyla çekiciydi. Ama işte bir anda yeniden derin
 62 | düşüncelere gömülür gibi olmuştu; daha doğrusu kendinden
 63 | geçmiş gibiydi. Çevresinde kimseyi ayrımsamadan
 64 | yürüyordu, aslında kimseyi ayrımsamak istediği de yoktu.
 65 | Yalnız, arada bir, kendi kendisiyle konuşmak alışkanlığıyla
 66 | bir şeyler mırıldanıyordu. Bu alışkanlığını kendisine bile daha
 67 | şu anda itiraf ediyordu. Yine şu anda, zaman zaman
 68 | düşüncelerinin karıştığını, iyiden iyiye güçten düştüğünü
 69 | ayrımsıyordu: İki gün vardı ki, ağzına hiçbir şey koymamıştı.
 70 | Öylesine kötü giyimliydi ki, alışık biri bile bu derece yırtık
 71 | pırtık şeylerle güpegündüz sokakta dolaşmaya utanırdı.
 72 | Ancak burası insanın kılık kıyafetiyle hiç kimseyi
 73 | şaşırtamayacağı bir semtti. Samanpazarı’nın yakınlığı, şu
 74 | bilinen evlerin çokluğu, hele Petersburg’un bu merkezi
 75 | semtinin cadde ve sokaklarını dolduran işçi, esnaf, sanatkâr
 76 | takımı, buranın genel görüntüsünü öyle tiplerle renklendirirdi
 77 | ki, yabancı birinin görülmesi kimsede şaşkınlık uyandırmaz,
 78 | kimsece yadırganmazdı. Ama delikanlının ruhunda öylesine
 79 | yakıcı bir küçümseme duygusu birikmişti ki, bazen çocukluk
 80 | derecesine varan bütün utangaçlığına rağmen, şu anda en az
 81 | utandığı şey, sırtındaki paçavralardı. Tabii, kimi tanıdıklarına
 82 | ya da genel olarak karşılaşmaktan hiç de hoşlanmadığı eski
 83 | dostlarına rastladığında iş değişirdi… Oysa bu sırada, iri bir
 84 | atın çektiği büyük bir arabayla, günün bu saatinde nereye,
 85 | niçin götürüldüğü belli olmayan bir sarhoş, eliyle kendisini
 86 | göstererek, “Hey, sen! Alman şapkalı!” diye gırtlağını
 87 | yırtarcasına bağırınca, delikanlı durup, elini sinirli bir şekilde
 88 | şapkasına götürmüştü. Zimmermann’dan[1] satın alınmış,
 89 | yüksek, yuvarlak bir şapkaydı bu. Ama her yanı delik deşik
 90 | olmuş, yırtılıp solmuş, leke içindeki bu kenarsız şapka, üstelik
 91 | bir yanından çok çirkin bir köşe oluşturacak biçimde yana
 92 | sarkmıştı. Ancak sarhoşun bağırması delikanlıda utanma
 93 | değil, korkuya benzer başka bir duygu uyandırmıştı.
 94 | — Biliyordum zaten! –diye mırıldandı şaşkınlık içinde.–
 95 | Biliyordum böyle olacağını! Olabileceklerin en kötüsü bu!
 96 | Böyle bir saçmalık, böyle bir anlamsız ayrıntı her şeyi altüst
 97 | edebilir! Evet, doğrusu fazla göze batan bir şapka bu… Göze
 98 | batması, gülünçlüğünden… Üstümdeki paçavralara uygun bir
 99 | kasket bulmam gerek, eski de olsa olur, yeter ki şu nalet
100 | şeyden kurtulayım! Kimse giymiyor böyle bir şapkayı. Bir
101 | verstlik yoldan fark edilir ve kimin olsa aklında kalır… En
102 | önemlisi de bu: Sonradan anımsarlar, işte sana bir ipucu!
103 | Olabildiğince ayrımsanmamaya, göze çarpmamaya
104 | çalışmalıyım… Ayrıntılar çok önemli! Ayrıntılar mahveder
105 | her zaman her şeyi…
106 | Gideceği yere varmak için fazla yürümesi gerekmiyordu.
107 | Hatta evinden kaç adım tuttuğunu bile saymıştı; Tam yedi yüz
108 | otuz adım. Hayallerine gömülüp yürüdüğü bir gün saymıştı
109 | adımlarını. Ama o sıralar kurduğu bu hayallere kendisi de
110 | inanmıyordu, sinirleniyordu yalnızca; çirkin ama, insanı
111 | baştan çıkarıcı gözü peklikte hayallerdi bunlar. Şimdi ise,
112 | aradan bir hafta geçtikten sonra, işi başka türlü görmeye
113 | başlamıştı. Yakasını bir türlü bırakmayan o iç konuşmalarında
114 | kendisini onca güçsüz, onca kararsız görmesine rağmen,
115 | “çirkin” hayali adeta elinde olmayarak kendi tasarısı, kendi
116 | niyeti saymaya alışmıştı. Bu konuda hâlâ kendi kendisine
117 | inanmamasına rağmen, attığı her adımda heyecanı daha da
118 | artarak, şu anda bu tasarısının denemesini yapmaya
119 | gidiyordu.
120 | Yüreği durarak, sinirden titreyerek, bir duvarı kanala, bir
121 | duvarı “…” Sokağı’na bakan olağanüstü büyük yapıya
122 | yaklaştı. Küçük küçük dairelere bölünmüş olan bu evde
123 | terziler, çilingirler, aşçı kadınlar gibi her türden esnaf, çeşit
124 | çeşit Almanlar, başına buyruk yaşayan sokak kızları, küçük
125 | memurlar ve benzerleri oturuyordu. Evin iki yanındaki avlu
126 | ve kapılardan giren çıkan belirsizdi. Üç ya da dört kapıcısı
127 | vardı evin. Delikanlı bunlardan hiçbirine rastlamamış
128 | olduğuna sevinerek ana kapıdan süzülürcesine geçip sağdaki
129 | merdivenlere yöneldi: Bu merdiven karanlık, dar ve her
130 | zaman kullanılmayan bir tür servis merdiveniydi. Ama o
131 | bütün bunları biliyordu, öğrenmişti ve merdivenlerin bu
132 | durumu son derece hoşuna gidiyordu: Bu karanlıkta meraklı
133 | bir bakış bile tehlikeli olamazdı. Dördüncü kata çıkarken
134 | elinde olmadan: “Eğer şimdi böyle korkarsam, fırsat çıkıp da
135 | asıl işe giriştiğimde ne olacak?..” diye düşündü. Burada asker
136 | emeklisi hamallar kesti yolunu, bir daireden mobilya
137 | çıkarıyorlardı. Burada, memurluk yapan bir Alman’ın
138 | ailesiyle birlikte oturduğunu daha önceden biliyordu.
139 | “Anlaşılan Alman taşınıyor, o halde dördüncü katta; bu
140 | merdiven sahanlığında hiç değilse bir süre için yalnızca
141 | kocakarının dairesi dolu olacak. Bu çok iyi… Ne olur ne
142 | olmaz…” diye düşündü ve kocakarının kapısını çaldı.
143 | Çıngırak, bakırdan değil de tenekedenmiş gibi cılız bir ses
144 | çıkardı. Bu tür evlerin böyle küçük dairelerinde çıngıraklar
145 | hemen hep böyledir. O, bu çıngırak sesini unutmuştu bile…
146 | Ve şimdi bu özel ses ona birdenbire bir şeyler anımsatmış;
147 | apaçık bir şeyleri gözünün önüne getirmişti. Tir tir titriyordu,
148 | sinirleri allak bullak olmuştu. Az sonra kapı çizgi gibi hafifçe
149 | aralandı; kapıyı açan kadın geleni aralıktan açıkça duyulan bir
150 | güvensizlikle süzüyor, karanlıkta yalnızca ışıldayan gözleri
151 | görülüyordu. Ama sahanlıkta başkalarının da bulunduğunu
152 | görünce yüreklendi ve kapıyı iyice açtı. Delikanlı içeri girdi;
153 | tahta perdeyle küçücük bir mutfaktan ayrılmış olan karanlık
154 | bir antreydi burası. Kocakarı hiçbir şey söylemeden öylece
155 | duruyor ve soru dolu gözlerle ona bakıyordu. Küçücük;
156 | kupkuru bir ihtiyardı bu, altmış yaşlarında vardı, bakışları
157 | temiz değildi, burnu sivri ve küçük, başı açıktı. Hafif ağarmış
158 | kirli sarı saçlarına bolca yağ sürmüştü. Bir tavuk bacağını
159 | andıran ince uzun boynuna paçavralaşmış bir fanila parçası
160 | sarmıştı. Omuzlarındaysa, havanın sıcak olmasına rağmen,
161 | rengi yitmiş, paramparça bir kürk pelerin sallanıyordu. İkide
162 | bir öksürüyor, inliyordu. Anlaşılan delikanlının bakışları hiç
163 | de normal değildi ki, kocakarının gözlerinde az önceki
164 | güvensizlik anlatımı yeniden belirdi.


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <title>Word Display</title>
  7 |   <link rel="stylesheet" href="style.css" />
  8 |   <!-- External CSS for better caching and performance -->
  9 |   <style>
 10 |     body,
 11 |     html {
 12 |       height: 100%;
 13 |       margin: 0;
 14 |       display: flex;
 15 |       flex-direction: column;
 16 |       justify-content: flex-start;
 17 |       align-items: center;
 18 |       background-color: #f5f0dc;
 19 |     }
 20 | 
 21 |     #startButton {
 22 |       margin: 20px 0;
 23 |       /* Combined top and bottom margin for simplification */
 24 |     }
 25 | 
 26 |     #centerContent {
 27 |       display: flex;
 28 |       flex-direction: column;
 29 |       justify-content: center;
 30 |       align-items: center;
 31 |       flex-grow: 1;
 32 |     }
 33 | 
 34 |     #wordContainer {
 35 |       font-size: 48px;
 36 |       visibility: hidden;
 37 |     }
 38 | 
 39 |     #info {
 40 |       margin: 20px 0;
 41 |       opacity: 0.2;
 42 |     }
 43 |   </style>
 44 | </head>
 45 | 
 46 | <body>
 47 |   <header>
 48 |     <!-- Placeholder for potential navigation or header content -->
 49 |   </header>
 50 |   <main id="centerContent">
 51 |     <button id="startButton">Start</button>
 52 |     <section id="wordContainer"></section>
 53 |   </main>
 54 |   <button id="pauseButton">Pause</button>
 55 |   <br>
 56 |   <input type="range" min="100" max="500" value="343" id="wpmSlider">
 57 |   <footer id="info">
 58 |     <!-- Moved info into footer for semantic structure -->
 59 |   </footer>
 60 | 
 61 |   <script>
 62 |     function displayWords(words) {
 63 |       let index = 0;
 64 |       let timeOutId = null;
 65 |       const startTime = Date.now();
 66 |       const container = document.getElementById('wordContainer');
 67 |       const startButton = document.getElementById('startButton');
 68 |       const pauseButton = document.getElementById('pauseButton');
 69 |       const wpmSlider = document.getElementById('wpmSlider');
 70 |       const info = document.getElementById('info');
 71 | 
 72 |       let speed = 175; // 175 milliseconds per word
 73 | 
 74 |       container.style.visibility = 'visible';
 75 |       pauseButton.style.display = 'none';
 76 |       wpmSlider.style.display = 'none';
 77 | 
 78 |       function showNextWord() {
 79 |         if (index < words.length) {
 80 |           pauseButton.style.display = 'block';
 81 |           wpmSlider.style.display = 'block';
 82 |           const word = words[index++];
 83 |           const firstTwoLetters = word.substring(0, 2);
 84 |           const restOfWord = word.substring(2);
 85 |           container.innerHTML = `<strong>${firstTwoLetters}</strong>${restOfWord}`;
 86 | 
 87 |           let elapsedTime = (Date.now() - startTime) / 1000;
 88 |           let elapsedTimeInMinutes = elapsedTime / 60;
 89 |           const wordsPerMinute = Math.round(60000 / speed);
 90 |           let wordsLeft = words.length - index;
 91 |           info.innerHTML = `Time: ${elapsedTime.toFixed(1)} seconds | Words: ${index} | Words Left: ${wordsLeft} | WPM: ${wordsPerMinute}`;
 92 |           timeOutId = setTimeout(showNextWord, speed);
 93 |         }
 94 |       }
 95 | 
 96 |       wpmSlider.onchange = function () {
 97 |         const wpm = this.value;
 98 |         speed = Math.round(60000 / wpm);
 99 |         if (timeOutId) {
100 |           clearTimeout(timeOutId);
101 |           timeOutId = setTimeout(showNextWord, speed);
102 |         }
103 |       };
104 | 
105 |       startButton.onclick = function () {
106 |         this.style.display = 'none';
107 |         showNextWord();
108 |       };
109 | 
110 |       pauseButton.onclick = function () {
111 |         if (timeOutId) {
112 |           this.innerText = 'Resume';
113 |           clearTimeout(timeOutId);
114 |           timeOutId = null;
115 |         } else {
116 |           this.innerText = 'Pause';
117 |           showNextWord();
118 |         }
119 |       };
120 | 
121 |       document.addEventListener("visibilitychange", function () {
122 |         if (document.hidden) {
123 |           this.innerText = 'Resume';
124 |           clearTimeout(timeOutId);
125 |           timeOutId = null;
126 |         }
127 |       });
128 | 
129 |       document.body.onkeyup = function (e) {
130 |         if (e.key == " " || e.code == "Space" || e.keyCode == 32) {
131 |           if (timeOutId) {
132 |             clearTimeout(timeOutId);
133 |             timeOutId = null;
134 |             pauseButton.innerText = 'Resume';
135 |           } else {
136 |             startButton.style.display = 'none';
137 |             pauseButton.innerText = 'Pause';
138 |             showNextWord();
139 |           }
140 |         }
141 |       };
142 |     }
143 | 
144 |     // Ensure words data is correctly formatted or provided
145 |     window.onload = function () {
146 |       displayWords({{ words | tojson | safe }});
147 |     };
148 |   </script>
149 | </body>
150 | 
151 | </html>


--------------------------------------------------------------------------------