diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..d16e6e6
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,293 @@
+<html>
+
+    <head>
+        <meta charset="UTF-8">
+        <title>
+            Zegar słowny
+        </title>
+        <style id="theme">
+            span {
+                color: #222;
+            }
+
+            .word {
+                color: #222 !important;
+            }
+
+            .active {
+                color: #fff !important;
+            }
+
+            .seconds .active {
+                color: #555 !important;
+            }
+
+            div {
+                background-color: #000;
+            }
+        </style>
+        <style>
+            div.containerT {
+                display: table;
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 100%;
+                width: 100%;
+            }
+
+            div.containerTC {
+                display: table-cell;
+                vertical-align: middle;
+                padding-left: 5px;
+            }
+
+            html {
+                font-size: 4.9vmin;
+                font-family: "Space Mono", monospace;
+                white-space: nowrap;
+                letter-spacing: 0.2em;
+                text-transform: uppercase;
+                line-height: 1.2em;
+                text-align: center;
+            }
+
+            .buttons {
+                float: left;
+                position: absolute;
+                display: inline;
+            }
+
+            .hidden {
+                display: none;
+            }
+        </style>
+        <script type="text/javascript">
+
+            var themes = {
+                "Czarny": "span{color:#222}.word{color:#222!important}.active{color:#fff!important}.seconds.active{color:#555!important}div{background-color:#000}",
+                "Biały": "span{color:#eee}.word{color:#eee!important}.active{color:#000!important}.seconds.active{color:#ccc!important}div{background-color:#fff}",
+                "Fiolet": "span{color:#8A4FFF}.word{color:#8A4FFF!important}.active{color:#4C1E4F!important}.seconds.active{color:#555!important}div{background-color:#E6C0E9}"
+            };
+
+            var showSeconds = true;
+
+            function setActive(selector, state) {
+                elems = document.querySelectorAll(selector);
+                if (state) {
+                    elems.forEach(elem => elem.classList.add('active'));
+                }
+                else {
+                    elems.forEach(elem => elem.classList.remove('active'));
+                }
+            }
+
+            function setTime(time) {
+                // dateTime = new Date('2022-07-17 00:00:00');
+                dateTime = new Date();
+
+                po = dateTime.getMinutes() < 30;
+                oclock = dateTime.getMinutes() == 0;
+
+                setActive('.po', !oclock && po);
+                setActive('.do', !oclock && !po);
+
+                hour = dateTime.getHours() > 12 ? dateTime.getHours() - 12 : (dateTime.getHours() == 0 ? 12 : dateTime.getHours());
+                hourClass = po ? `h${hour}${oclock ? '' : 'm'}` : `h${hour + 1 > 12 ? 1 : hour + 1}${oclock ? '' : 'm'}`;
+
+                setActive('.h1', hourClass == 'h1');
+                setActive('.h2', hourClass == 'h2');
+                setActive('.h3', hourClass == 'h3');
+                setActive('.h4', hourClass == 'h4');
+                setActive('.h5', hourClass == 'h5');
+                setActive('.h6', hourClass == 'h6');
+                setActive('.h7', hourClass == 'h7');
+                setActive('.h8', hourClass == 'h8');
+                setActive('.h9', hourClass == 'h9');
+                setActive('.h10', hourClass == 'h10');
+                setActive('.h11', hourClass == 'h11');
+                setActive('.h12', hourClass == 'h12');
+                setActive('.h1m', hourClass == 'h1m');
+                setActive('.h2m', hourClass == 'h2m');
+                setActive('.h3m', hourClass == 'h3m');
+                setActive('.h4m', hourClass == 'h4m');
+                setActive('.h5m', hourClass == 'h5m');
+                setActive('.h6m', hourClass == 'h6m');
+                setActive('.h7m', hourClass == 'h7m');
+                setActive('.h8m', hourClass == 'h8m');
+                setActive('.h9m', hourClass == 'h9m');
+                setActive('.h10m', hourClass == 'h10m');
+                setActive('.h11m', hourClass == 'h11m');
+                setActive('.h12m', hourClass == 'h12m');
+
+                minute = dateTime.getMinutes();
+                minuteClass = `m${minute > 30 ? 60 - minute : minute}`;
+                // console.log(minute);
+                // console.log(minuteClass);
+                setActive('.m1', minuteClass == 'm1' || minuteClass == 'm21');
+                setActive('.m2', minuteClass == 'm2' || minuteClass == 'm22');
+                setActive('.m3', minuteClass == 'm3' || minuteClass == 'm23');
+                setActive('.m4', minuteClass == 'm4' || minuteClass == 'm24');
+                setActive('.m5', minuteClass == 'm5' || minuteClass == 'm25');
+                setActive('.m6', minuteClass == 'm6' || minuteClass == 'm26');
+                setActive('.m7', minuteClass == 'm7' || minuteClass == 'm27');
+                setActive('.m8', minuteClass == 'm8' || minuteClass == 'm28');
+                setActive('.m9', minuteClass == 'm9' || minuteClass == 'm29');
+                setActive('.m10', minuteClass == 'm10');
+                setActive('.m11', minuteClass == 'm11');
+                setActive('.m12', minuteClass == 'm12');
+                setActive('.m13', minuteClass == 'm13');
+                setActive('.m14', minuteClass == 'm14');
+                setActive('.m15', minuteClass == 'm15');
+                setActive('.m16', minuteClass == 'm16');
+                setActive('.m17', minuteClass == 'm17');
+                setActive('.m18', minuteClass == 'm18');
+                setActive('.m19', minuteClass == 'm19');
+                setActive('.m20', minuteClass == 'm20' || minuteClass == 'm21' || minuteClass == 'm22' || minuteClass == 'm23' || minuteClass == 'm24' || minuteClass == 'm25' || minuteClass == 'm26' || minuteClass == 'm27' || minuteClass == 'm28' || minuteClass == 'm29');
+                setActive('.m30', minuteClass == 'm30');
+
+                if (showSeconds) {
+                    second = dateTime.getSeconds();
+                    secondClass = `s${second}`;
+
+                    setActive('.s0', secondClass == 's0');
+                    setActive('.s1', secondClass == 's1');
+                    setActive('.s2', secondClass == 's2');
+                    setActive('.s3', secondClass == 's3');
+                    setActive('.s4', secondClass == 's4');
+                    setActive('.s5', secondClass == 's5');
+                    setActive('.s6', secondClass == 's6');
+                    setActive('.s7', secondClass == 's7');
+                    setActive('.s8', secondClass == 's8');
+                    setActive('.s9', secondClass == 's9');
+                    setActive('.s10', secondClass == 's10');
+                    setActive('.s11', secondClass == 's11');
+                    setActive('.s12', secondClass == 's12');
+                    setActive('.s13', secondClass == 's13');
+                    setActive('.s14', secondClass == 's14');
+                    setActive('.s15', secondClass == 's15');
+                    setActive('.s16', secondClass == 's16');
+                    setActive('.s17', secondClass == 's17');
+                    setActive('.s18', secondClass == 's18');
+                    setActive('.s19', secondClass == 's19');
+                    setActive('.s20', secondClass == 's20');
+                    setActive('.s21', secondClass == 's21');
+                    setActive('.s22', secondClass == 's22');
+                    setActive('.s23', secondClass == 's23');
+                    setActive('.s24', secondClass == 's24');
+                    setActive('.s25', secondClass == 's25');
+                    setActive('.s26', secondClass == 's26');
+                    setActive('.s27', secondClass == 's27');
+                    setActive('.s28', secondClass == 's28');
+                    setActive('.s29', secondClass == 's29');
+                    setActive('.s30', secondClass == 's30');
+                    setActive('.s31', secondClass == 's31');
+                    setActive('.s32', secondClass == 's32');
+                    setActive('.s33', secondClass == 's33');
+                    setActive('.s34', secondClass == 's34');
+                    setActive('.s35', secondClass == 's35');
+                    setActive('.s36', secondClass == 's36');
+                    setActive('.s37', secondClass == 's37');
+                    setActive('.s38', secondClass == 's38');
+                    setActive('.s39', secondClass == 's39');
+                    setActive('.s40', secondClass == 's40');
+                    setActive('.s41', secondClass == 's41');
+                    setActive('.s42', secondClass == 's42');
+                    setActive('.s43', secondClass == 's43');
+                    setActive('.s44', secondClass == 's44');
+                    setActive('.s45', secondClass == 's45');
+                    setActive('.s46', secondClass == 's46');
+                    setActive('.s47', secondClass == 's47');
+                    setActive('.s48', secondClass == 's48');
+                    setActive('.s49', secondClass == 's49');
+                    setActive('.s50', secondClass == 's50');
+                    setActive('.s51', secondClass == 's51');
+                    setActive('.s52', secondClass == 's52');
+                    setActive('.s53', secondClass == 's53');
+                    setActive('.s54', secondClass == 's54');
+                    setActive('.s55', secondClass == 's55');
+                    setActive('.s56', secondClass == 's56');
+                    setActive('.s57', secondClass == 's57');
+                    setActive('.s58', secondClass == 's58');
+                    setActive('.s59', secondClass == 's59');
+                }
+            }
+
+            function showButtons() {
+                document.querySelector('.buttons').classList.remove('hidden');
+                setTimeout(() => {
+                    document.querySelector('.buttons').classList.add('hidden');
+                }, 5000);
+            }
+
+            function makeFullscreen() {
+                elem = document.querySelector('.containerT');
+                if (elem.requestFullscreen) {
+                    elem.requestFullscreen();
+                } else if (elem.webkitRequestFullscreen) { /* Safari */
+                    elem.webkitRequestFullscreen();
+                } else if (elem.msRequestFullscreen) { /* IE11 */
+                    elem.msRequestFullscreen();
+                }
+            }
+
+            function setTheme(theme) {
+                localStorage.setItem('theme', theme);
+                document.querySelector('#theme').innerHTML = themes[theme];
+            }
+
+            function toggleSeconds() {
+                showSeconds = !showSeconds;
+                setActive('.seconds.active', false);
+            }
+
+            function log(text) {
+                document.getElementById('log').innerText = text;
+            }
+        </script>
+    </head>
+
+    <body>
+        <span id="log"></span>
+        <div class="containerT">
+            <div class="buttons hidden"><button onclick="makeFullscreen()">Fullscreen</button><button onclick="toggleSeconds()">Seconds</button></div>
+            <div class="containerTC" onclick="showButtons()">
+                <!-- <input type="text" value="01:45:00"> -->
+                <div><span class="active" onclick="makeFullscreen()">Teraz</span><span class="word">X</span><span class="active">Jest</span><span class="word"><span class="s0 seconds">S</span><span span class="s1 seconds">m</span><span class="s2 seconds">o</span><span class="s3 seconds">k</span></span><span class="m20 m21 m22 m23 m24 m25 m26 m27 m28 m29">Dwadzieścia</span> </div>
+                <div><span class="m1 m21">Jeden</span><span class="m2 m22">Dwa</span><span class="m3 m23">Trzy</span><span class="word">Bób</span><span class="m4 m24">Cztery</span><span class="m5 m25">Pięć</span></div>
+                <div><span class="m6 m26">Sześć</span><span class="word">W</span><span class="m7 m27">Siedem</span><span class="m8 m28">Osiem</span><span class="m9 m29">Dziewięć</span></div>
+                <div><span class="m10">Dziesięć</span><span class="word"><span class="s4 seconds">M</span><span span class="s5 seconds">a</span><span class="s6 seconds">t</span><span class="s7 seconds">e</span><span span class="s8 seconds">u</span><span class="s9 seconds">s</span><span class="s10 seconds">z</span></span><span class="m11">Jedenaście</span> </div>
+                <div><span class="m12">Dwanaście</span><span class="word"><span class="s11 seconds">A</span><span span class="s12 seconds">n</span><span class="s13 seconds">d</span><span class="s14 seconds">r</span><span class="s15 seconds">u</span><span class="s16 seconds">s</span></span><span class="m13">Trzynaście</span>
+                </div>
+                <div><span class="m14">Czternaście</span><span class="word"><span class="s17 seconds">I</span><span span class="s18 seconds">n</span><span class="s19 seconds">k</span><span class="s20 seconds">a</span></span><span class="m15">Piętnaście</span> </div>
+                <div><span class="m16">Szesnaście</span><span class="word"><span class="s21 seconds">T</span><span span class="s22 seconds">i</span><span class="s23 seconds">k</span></span><span class="m17">Siedemnaście</span>
+                </div>
+                <div><span class="m18">Osiemnaście</span><span class="m19">Dziewiętnaście</span></div>
+                <div><span class="m30">Wpół</span><span class="po">Po</span><span class="do">Do</span><span class="word">V</span><span class="h1m">Pierwszej</span><span class="h2m">Drugiej</span>
+                </div>
+                <div><span class="h3m">Trzeciej</span><span class="word"><span class="s24 seconds">T</span><span span class="s25 seconds">a</span><span class="s26 seconds">k</span></span><span class="h4m">Czwartej</span><span class="h5m">Piątej</span></div>
+                <div><span class="h6m">Szóstej</span><span class="word"><span class="s27 seconds">K</span><span class="s28 seconds">o</span><span class="s29 seconds">c</span><span class="s30 seconds">i</span><span span class="s31 seconds">a</span><span class="s32 seconds">k</span></span><span class="h7m">Siódmej</span><span class="h8m">Ósmej</span></div>
+                <div><span class="h9m">Dziewiątej</span><span class="h10m">Dziesiątej</span><span class="word"><span span class="s33 seconds">D</span><span class="s34 seconds">e</span><span class="s35 seconds">j</span><span class="s36 seconds">z</span><span class="s37 seconds">i</span></span>
+                </div>
+                <div><span class="h11m">Jedenastej</span><span class="word"><span class="s38 seconds">M</span><span span class="s39 seconds">o</span><span class="s40 seconds">n</span><span class="s41 seconds">i</span><span class="s42 seconds">k</span><span class="s43 seconds">a</span></span><span class="h12m">Dwunastej</span>
+                </div>
+                <div><span class="h1">Pierwsza</span><span class="word"><span class="s44 seconds">P</span><span span class="s45 seconds">e</span><span class="s46 seconds">r</span><span class="s47 seconds">ł</span><span class="s48 seconds">a</span></span><span class="h2">Druga</span><span class="h3">Trzecia</span>
+                </div>
+                <div><span class="h4">Czwarta</span><span class="h5">Piąta</span><span class="word">K</span><span class="h6">Szósta</span><span class="h7">Siódma</span>
+                </div>
+                <div><span class="h8">Osma</span><span class="h9">Dziewiąta</span><span class="word"><span span class="s49 seconds">T</span><span span class="s50 seconds">o</span><span span class="s51 seconds">k</span></span><span class="h10">Dziesiąta</span></div>
+                <div><span class="h11">Jedenasta</span><span class="word"><span class="s52 seconds">I</span><span span class="s53 seconds">s</span><span class="s54 seconds">k</span><span class="s55 seconds">i</span><span class="s56 seconds">e</span><span class="s57 seconds">r</span><span class="s58 seconds">k</span><span span class="s59 seconds">a</span></span><span class="h12">Dwunasta</span></div>
+            </div>
+        </div>
+        <script type="text/javascript">
+            setTheme(localStorage.getItem('theme') != null ? localStorage.getItem('theme') : 'Czarny');
+
+            setTime();
+            for (theme in themes) {
+                document.querySelector('.buttons').innerHTML += `<button onclick="setTheme('${theme}')">${theme}</button>`;
+            }
+            setInterval(setTime, 100);
+        </script>
+    </body>
+
+</html>
\ No newline at end of file
