From 83c11a3d655e00b0b71e90a19289380be12fa35a Mon Sep 17 00:00:00 2001
From: Didi <mlambis2010@icloud.com>
Date: Sat, 6 Sep 2025 11:53:42 +0930
Subject: [PATCH] Add files via upload

---
 pitest.html | 177 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 pitest.html
diff --git a/pitest.html b/pitest.html
new file mode 100644
index 0000000..0d7295c
--- /dev/null
+++ b/pitest.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Learn Pi</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            height: 100vh;
+            background-color: #222;
+            color: white;
+            overflow: hidden;
+            padding-top: 20px;
+        }
+        .title {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .scroll-wrapper {
+            width: 90vw;
+            overflow: hidden;
+            display: flex;
+            justify-content: flex-start;
+            background: #333;
+            padding: 20px;
+            border-radius: 10px;
+            position: relative;
+        }
+        .container {
+            display: flex;
+            white-space: nowrap;
+            transition: transform 0.3s ease-in-out;
+            width: max-content;
+        }
+        .digit {
+            font-size: 2rem;
+            padding: 15px;
+            color: white;
+            background: #444;
+            border-radius: 5px;
+            margin: 5px;
+            min-width: 50px;
+            text-align: center;
+            transition: color 0.2s, background 0.2s;
+            visibility: hidden;
+        }
+        .correct {
+            color: #0f0;
+            background: #060;
+            visibility: visible;
+        }
+        input {
+            font-size: 1.5rem;
+            padding: 10px;
+            margin-top: 20px;
+            border: none;
+            border-radius: 5px;
+            outline: none;
+            background: #444;
+            color: white;
+            text-align: center;
+        }
+        .scoreboard {
+            margin-top: 10px;
+            font-size: 1.2rem;
+        }
+        .button-container {
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        button, .toggle-switch {
+            font-size: 1rem;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            background: #ff4444;
+            color: white;
+        }
+        .toggle-switch {
+            background: #444;
+            position: relative;
+            width: 70px;
+            text-align: center;
+        }
+        .toggle-switch.active {
+            background: #0f0;
+        }
+    </style>
+</head>
+<body>
+    <div class="title">Pi Typing Trainer</div>
+    <div class="scroll-wrapper">
+        <div class="container" id="piContainer"></div>
+    </div>
+    <input type="text" id="piInput" maxlength="1" autofocus>
+    <div class="scoreboard">Score: <span id="score">0</span></div>
+    <div class="button-container">
+        <button id="clearButton">Clear</button>
+        <div id="practiceMode" class="toggle-switch">Practice</div>
+    </div>
+    <script>
+        const container = document.getElementById('piContainer');
+        const input = document.getElementById('piInput');
+        const scoreDisplay = document.getElementById('score');
+        const clearButton = document.getElementById('clearButton');
+        const practiceMode = document.getElementById('practiceMode');
+        let index = 0;
+        let score = 0;
+        let practiceActive = false;
+        
+        const piDigits = "3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948954930381964428810975665933446128475648233786783165271201909145648566923460348610454326648213393607260249141273724587006606315588174881520920962829254091715364367892590360011330530548820466521384146951941511609433057270365759591953092186117381932611793105118548074462379962749567351885752724891227938183011949129833673362440656643086021394946395224737190702179860943702770539217176293176752384674818467669405132000568127145263560827785771342757789609173637178721468440901224953430146549585371050792279689258923542019956112129021960864034418159813629774771309960518707211349999998372978049951059731732816096318595024459455346908302642522308253344685035261931188171010003137838752886587533208381420617177669147303598253490428755468731159562863882353787593751957781857780532171226806613001927876611195909216420198938095257201065485863278865936153381827968230301952035301852968995773622599413891249721775283479131515574857242454150695950829533116861727855889075098381754637464939319255060400927701671139009848824012858361603563707660104710181942955596198946767837449448255379774726847104047534646208046684259069491293313677028989152104752162056966024058038150193511253382430035587640247496473263914199272604269922796782354781636009341721641219924586315030286182974555706749838505494588586926995690927210797509302955321165344987202755960236480665499119881834797753566369807426542527862551818417574672890977772793800081647060016145249192173217214772350141441973568548161361157352552133475741849468438523323907394143334547762416862518983569485562099219222184272550254256887671790494601653466804988627232791786085784383827967976681454100953883786360950680064225125205117392984896084128488626945604241965285022210661186306744278622039194945047123713786960956364371917287467764657573962413890865832645995813390478027590099465764078951269468398352595709825822620522489407726719478268482601476990902640136394437455305068203496252451749399651431429809190659250937221696461515709858387410597885959772975498930161753928468138268683868942774155991855925245953959431049972524680845987273644695848653836736222626099124608051243884390451244136549762780797715691435997700129616089441694868555848406353422072225828488648158456028506016842739452267467678895252138522549954666727823986456596116354886230577456498035593634568174324112515076069479451096596094025228879710893145669136867228748940560101503308617928680920874760917824938589009714909675985261365549781893129784821682998948722658804857564014270477555132379641451523746234364542858444795265867821051141354735739523113427166102135969536231442952484937187110145765403590279934403742007310578539062198387447808478489683321445713868751943506430218453191048481005370614680674919278191197939952061419663428754440643745123718192179998391015919561814675142691239748940907186494231961567945208095146550225231603881930142093762137855956638937787083039069792077346722182562599661501421503068038447734549202605414665925201497442850732518666002132434088190710486331734649651453905796268561005508106658796998163574736384052571459102897064140110971206280439039759515677157700420337869936007230558763176359421873125147120532928191826186125867321579198414848829164470609575270695722091756711672291098169091528017350671274858322287183520935396572512108357915136988209144421006751033467110314126711136990865851639831501970165151168517143765761835155650884909989859982387345528331635507647918535893226185489632132933089857064204675259070915481416549859461637180270981994309924488957571282890592323326097299712084433573265489382391193259746366730583604142813883032038249037589852437441702913276561809377344403070746921120191302033038019762110110044929321516084244485963766983895228684783123552658213144957685726243344189303968642624341077322697802807318915441101044682325271620105265227211166039666557309254711055785376346682065310989652691862056476931257058635662018558100729360659876486117910453348850346113657686753249441668039626579787718556084552965412665408530614344431858676975145661406800700237877659134401712749470420562230538994561314071127000407854733269939081454664645880797270826683063432858785698305235808933065757406795457163775254202114955761581400250126228594130216471550979259230990796547376125517656751357517829666454779174501129961489030463994713296210734043751895735961458901938971311179042978285647503203198691514028708085990480109412147221317947647772622414254854540332157185306142288137585043063321751829798662237172159160771669254748738986654949450114654062843366393790039769265672146385306736096571209180763832716641627488880078692560290228472104031721186082041900042296617119637792133757511495950156604963186294726547364252308177036751590673502350728354056704038674351362222477158915049530984448933309634087807693259939780541934144737744184263129860809988868741326047215695162396586457302163159819319516735381297416772947867242292465436680098067692823828068996400482435403701416314965897940924323789690706977942236250822168895738379862300159377647165122893578601588161755782973523344604281512627203734314653197777416031990665541876397929334419521541341899485444734567383162499341913181480927777103863877343177207545654532207770921201905166096280490926360197598828161332316663652861932668633606273567630354477628035045077723554710585954870279081435624014517180624643626794561275318134078330336254232783944975382437205835311477119926063813346776879695970309833913077109870408591337464144282277263465947047458784778720192771528073176790770715721344473060570073349243693113835049316312840425121925651798069411352801314701304781643788518529092854520116583934196562134914341595625865865570552690496520985803385072242648293972858478316305777756068887644624824685792603953527734803048029005876075825104747091643961362676044925627420420832085661190625454337213153595845068772460290161876679524061634252257719542916299193064553779914037340432875262888963995879475729174642635745525407909145135711136941091193932519107602082520261879853188770584297259167781314969900901921169717372784768472686084900337702424291651300500516832336435038951702989392233451722013812806965011784408745196012122859937162313017114448464090389064495444006198690754851602632750529834918740786680881833851022833450850486082503930213321971551843063545500766828294930413776552793975175461395398468339363830474611996653858153842056853386218672523340283087112328278921250771262946322956398989893582116745627010218356462201349671518819097303811980049734072396103685406643193950979019069963955245300545058068550195673022921913933918568034490398205955100226353536192041994745538593810234395544959778377902374216172711172364343543947822181852862408514006660443325888569867054315470696574745855033232334210730154594051655379068662733379958511562578432298827372319898757141595781119635833005940873068121602876496286744604774649159950549737425626901049037781986835938146574126804925648798556145372347867330390468838343634655379498641927056387293174872332083760112302991136793862708943879936201629515413371424892830722012690147546684765357616477379467520049075715552781965362132392640616013635815590742202020318727760527721900556148425551879253034351398442532234157623361064250639049750086562710953591946589751413103482276930624743536325691607815478181152843667957061108615331504452127473924544945423682886061340841486377670096120715124914043027253860764823634143346235189757664521641376796903149501910857598442391986291642193994907236234646844117394032659184044378051333894525742399508296591228508555821572503107125701266830240292952522011872676756220415420516184163484756516999811614101002996078386909291603028840026910414079288621507842451670908700069928212066041837180653556725253256753286129104248776182582976515795984703562226293486003415872298053498965022629174878820273420922224533985626476691490556284250391275771028402799806636582548892648802545661017296702664076559042909945681506526530537182941270336931378517860904070866711496558343434769338578171138645587367812301458768712660348913909562009939361031029161615288138437909904231747336394804575931493140529763475748119356709110137751721008031559024853090669203767192203322909433467685142214477379393751703443661991040337511173547191855046449026365512816228824462575916333039107225383742182140883508657391771509682887478265699599574490661758344137522397096834080053559849175417381883999446974867626551658276584835884531427756879002909517028352971634456212964043523117600665101241200659755851276178583829204197484423608007193045761893234922927965019875187212726750798125547095890455635792122103334669749923563025494780249011419521238281530911407907386025152274299581807247162591668545133312394804947079119153267343028244186041426363954800044800267049624820179289647669758318327131425170296923488962766844032326092752496035799646925650493681836090032380929345958897069536534940603402166544375589004563288225054525564056448246515187547119621844396582533754388569094113031509526179378002974120766514793942590298969594699556576121865619673378623625612521632086286922210327488921865436480229678070576561514463204692790682120738837781423356282360896320806822246801224826117718589638140918390367367222088832151375560037279839400415297002878307667094447456013455641725437090697939612257142989467154357846878861444581231459357198492252847160504922124247014121478057345510500801908699603302763478708108175450119307141223390866393833952942578690507643100638351983438934159613185434754649556978103829309716465143840700707360411237359984345225161050702705623526601276484830840761183013052793205427462865403603674532865105706587488225698157936789766974220575059683440869735020141020672358502007245225632651341055924019027421624843914035998953539459094407046912091409387001264560016237428802109276457931065792295524988727584610126483699989225695968815920560010165525637567";
+        
+        piDigits.split('').forEach(digit => {
+            const span = document.createElement('span');
+            span.textContent = digit;
+            span.classList.add('digit');
+            container.appendChild(span);
+        });
+        
+        function updateView() {
+            const nextDigit = container.children[index];
+            if (nextDigit) {
+                const scrollWrapper = container.parentElement;
+                const containerRect = container.getBoundingClientRect();
+                const digitRect = nextDigit.getBoundingClientRect();
+                const offset = digitRect.left - containerRect.left - scrollWrapper.clientWidth / 2 + digitRect.width;
+                container.style.transform = `translateX(${-offset}px)`;
+            }
+        }
+        
+        input.addEventListener('input', () => {
+            if (input.value === piDigits[index]) {
+                container.children[index].classList.add('correct');
+                container.children[index].style.visibility = 'visible';
+                index++;
+                score++;
+                scoreDisplay.textContent = score;
+                updateView();
+                input.value = '';
+            } else {
+                input.value = '';
+            }
+        });
+        
+        clearButton.addEventListener('click', () => {
+            index = 0;
+            score = 0;
+            scoreDisplay.textContent = score;
+            container.style.transform = 'translateX(0px)';
+            Array.from(container.children).forEach(span => {
+                span.classList.remove('correct');
+                span.style.visibility = practiceActive ? 'visible' : 'hidden';
+            });
+            input.value = '';
+            updateView();
+        });
+        
+        practiceMode.addEventListener('click', () => {
+            practiceActive = !practiceActive;
+            practiceMode.classList.toggle('active', practiceActive);
+            Array.from(container.children).forEach(span => {
+                span.style.visibility = practiceActive || span.classList.contains('correct') ? 'visible' : 'hidden';
+            });
+        });
+        
+        updateView();
+    </script>
+</body>
+</html>
