impr(typing test): allow test words to breakout from the container

this completely reworks the way main content is structured closes #5335
monkeytypegame · Apr 26, 2024 · 20d6c39 · 20d6c39
1 parent 68b3053
commit 20d6c39
Show file tree

Hide file tree

Showing 22 changed files with 231 additions and 214 deletions.
diff --git a/frontend/src/404.html b/frontend/src/404.html
@@ -11,60 +11,56 @@
       document.title = "404 Not Found | Monkeytype";
     </script>
     <load src="html/warnings.html" />
-    <div id="app" class="focus">
-      <div></div>
-      <div id="contentWrapper">
-        <header class="focus">
-          <a id="logo" href="/" router-link="">
-            <div class="icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                style="isolation: isolate"
-                viewBox="-680 -1030 300 180"
-              >
-                <g>
-                  <path
-                    d="M -430 -910 L -430 -910 C -424.481 -910 -420 -905.519 -420 -900 L -420 -900 C -420 -894.481 -424.481 -890 -430 -890 L -430 -890 C -435.519 -890 -440 -894.481 -440 -900 L -440 -900 C -440 -905.519 -435.519 -910 -430 -910 Z"
-                  ></path>
-                  <path
-                    d=" M -570 -910 L -510 -910 C -504.481 -910 -500 -905.519 -500 -900 L -500 -900 C -500 -894.481 -504.481 -890 -510 -890 L -570 -890 C -575.519 -890 -580 -894.481 -580 -900 L -580 -900 C -580 -905.519 -575.519 -910 -570 -910 Z "
-                  ></path>
-                  <path
-                    d="M -590 -970 L -590 -970 C -584.481 -970 -580 -965.519 -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 C -600 -965.519 -595.519 -970 -590 -970 Z"
-                  ></path>
-                  <path
-                    d=" M -639.991 -960.515 C -639.72 -976.836 -626.385 -990 -610 -990 L -610 -990 C -602.32 -990 -595.31 -987.108 -590 -982.355 C -584.69 -987.108 -577.68 -990 -570 -990 L -570 -990 C -553.615 -990 -540.28 -976.836 -540.009 -960.515 C -540.001 -960.345 -540 -960.172 -540 -960 L -540 -960 L -540 -940 C -540 -934.481 -544.481 -930 -550 -930 L -550 -930 C -555.519 -930 -560 -934.481 -560 -940 L -560 -960 L -560 -960 C -560 -965.519 -564.481 -970 -570 -970 C -575.519 -970 -580 -965.519 -580 -960 L -580 -960 L -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 C -600 -965.519 -604.481 -970 -610 -970 C -615.519 -970 -620 -965.519 -620 -960 L -620 -960 L -620 -940 C -620 -934.481 -624.481 -930 -630 -930 L -630 -930 C -635.519 -930 -640 -934.481 -640 -940 L -640 -960 L -640 -960 C -640 -960.172 -639.996 -960.344 -639.991 -960.515 Z "
-                  ></path>
-                  <path
-                    d=" M -460 -930 L -460 -900 C -460 -894.481 -464.481 -890 -470 -890 L -470 -890 C -475.519 -890 -480 -894.481 -480 -900 L -480 -930 L -508.82 -930 C -514.99 -930 -520 -934.481 -520 -940 L -520 -940 C -520 -945.519 -514.99 -950 -508.82 -950 L -431.18 -950 C -425.01 -950 -420 -945.519 -420 -940 L -420 -940 C -420 -934.481 -425.01 -930 -431.18 -930 L -460 -930 Z "
-                  ></path>
-                  <path
-                    d="M -470 -990 L -430 -990 C -424.481 -990 -420 -985.519 -420 -980 L -420 -980 C -420 -974.481 -424.481 -970 -430 -970 L -470 -970 C -475.519 -970 -480 -974.481 -480 -980 L -480 -980 C -480 -985.519 -475.519 -990 -470 -990 Z"
-                  ></path>
-                  <path
-                    d=" M -630 -910 L -610 -910 C -604.481 -910 -600 -905.519 -600 -900 L -600 -900 C -600 -894.481 -604.481 -890 -610 -890 L -630 -890 C -635.519 -890 -640 -894.481 -640 -900 L -640 -900 C -640 -905.519 -635.519 -910 -630 -910 Z "
-                  ></path>
-                  <path
-                    d=" M -515 -990 L -510 -990 C -504.481 -990 -500 -985.519 -500 -980 L -500 -980 C -500 -974.481 -504.481 -970 -510 -970 L -515 -970 C -520.519 -970 -525 -974.481 -525 -980 L -525 -980 C -525 -985.519 -520.519 -990 -515 -990 Z "
-                  ></path>
-                  <path
-                    d=" M -660 -910 L -680 -910 L -680 -980 C -680 -1007.596 -657.596 -1030 -630 -1030 L -430 -1030 C -402.404 -1030 -380 -1007.596 -380 -980 L -380 -900 C -380 -872.404 -402.404 -850 -430 -850 L -630 -850 C -657.596 -850 -680 -872.404 -680 -900 L -680 -920 L -660 -920 L -660 -900 C -660 -883.443 -646.557 -870 -630 -870 L -430 -870 C -413.443 -870 -400 -883.443 -400 -900 L -400 -980 C -400 -996.557 -413.443 -1010 -430 -1010 L -630 -1010 C -646.557 -1010 -660 -996.557 -660 -980 L -660 -910 Z "
-                  ></path>
-                </g>
-              </svg>
-            </div>
-            <h1 class="text">
-              <div class="top">monkey see</div>
-              monkeytype
-            </h1>
-          </a>
-        </header>
-        <main style="height: 100%">
-          <load src="html/pages/404.html" />
-        </main>
-      </div>
-      <div></div>
+    <div id="app" class="content-grid focus">
+      <header class="focus">
+        <a id="logo" href="/" router-link="">
+          <div class="icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              style="isolation: isolate"
+              viewBox="-680 -1030 300 180"
+            >
+              <g>
+                <path
+                  d="M -430 -910 L -430 -910 C -424.481 -910 -420 -905.519 -420 -900 L -420 -900 C -420 -894.481 -424.481 -890 -430 -890 L -430 -890 C -435.519 -890 -440 -894.481 -440 -900 L -440 -900 C -440 -905.519 -435.519 -910 -430 -910 Z"
+                ></path>
+                <path
+                  d=" M -570 -910 L -510 -910 C -504.481 -910 -500 -905.519 -500 -900 L -500 -900 C -500 -894.481 -504.481 -890 -510 -890 L -570 -890 C -575.519 -890 -580 -894.481 -580 -900 L -580 -900 C -580 -905.519 -575.519 -910 -570 -910 Z "
+                ></path>
+                <path
+                  d="M -590 -970 L -590 -970 C -584.481 -970 -580 -965.519 -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 C -600 -965.519 -595.519 -970 -590 -970 Z"
+                ></path>
+                <path
+                  d=" M -639.991 -960.515 C -639.72 -976.836 -626.385 -990 -610 -990 L -610 -990 C -602.32 -990 -595.31 -987.108 -590 -982.355 C -584.69 -987.108 -577.68 -990 -570 -990 L -570 -990 C -553.615 -990 -540.28 -976.836 -540.009 -960.515 C -540.001 -960.345 -540 -960.172 -540 -960 L -540 -960 L -540 -940 C -540 -934.481 -544.481 -930 -550 -930 L -550 -930 C -555.519 -930 -560 -934.481 -560 -940 L -560 -960 L -560 -960 C -560 -965.519 -564.481 -970 -570 -970 C -575.519 -970 -580 -965.519 -580 -960 L -580 -960 L -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 C -600 -965.519 -604.481 -970 -610 -970 C -615.519 -970 -620 -965.519 -620 -960 L -620 -960 L -620 -940 C -620 -934.481 -624.481 -930 -630 -930 L -630 -930 C -635.519 -930 -640 -934.481 -640 -940 L -640 -960 L -640 -960 C -640 -960.172 -639.996 -960.344 -639.991 -960.515 Z "
+                ></path>
+                <path
+                  d=" M -460 -930 L -460 -900 C -460 -894.481 -464.481 -890 -470 -890 L -470 -890 C -475.519 -890 -480 -894.481 -480 -900 L -480 -930 L -508.82 -930 C -514.99 -930 -520 -934.481 -520 -940 L -520 -940 C -520 -945.519 -514.99 -950 -508.82 -950 L -431.18 -950 C -425.01 -950 -420 -945.519 -420 -940 L -420 -940 C -420 -934.481 -425.01 -930 -431.18 -930 L -460 -930 Z "
+                ></path>
+                <path
+                  d="M -470 -990 L -430 -990 C -424.481 -990 -420 -985.519 -420 -980 L -420 -980 C -420 -974.481 -424.481 -970 -430 -970 L -470 -970 C -475.519 -970 -480 -974.481 -480 -980 L -480 -980 C -480 -985.519 -475.519 -990 -470 -990 Z"
+                ></path>
+                <path
+                  d=" M -630 -910 L -610 -910 C -604.481 -910 -600 -905.519 -600 -900 L -600 -900 C -600 -894.481 -604.481 -890 -610 -890 L -630 -890 C -635.519 -890 -640 -894.481 -640 -900 L -640 -900 C -640 -905.519 -635.519 -910 -630 -910 Z "
+                ></path>
+                <path
+                  d=" M -515 -990 L -510 -990 C -504.481 -990 -500 -985.519 -500 -980 L -500 -980 C -500 -974.481 -504.481 -970 -510 -970 L -515 -970 C -520.519 -970 -525 -974.481 -525 -980 L -525 -980 C -525 -985.519 -520.519 -990 -515 -990 Z "
+                ></path>
+                <path
+                  d=" M -660 -910 L -680 -910 L -680 -980 C -680 -1007.596 -657.596 -1030 -630 -1030 L -430 -1030 C -402.404 -1030 -380 -1007.596 -380 -980 L -380 -900 C -380 -872.404 -402.404 -850 -430 -850 L -630 -850 C -657.596 -850 -680 -872.404 -680 -900 L -680 -920 L -660 -920 L -660 -900 C -660 -883.443 -646.557 -870 -630 -870 L -430 -870 C -413.443 -870 -400 -883.443 -400 -900 L -400 -980 C -400 -996.557 -413.443 -1010 -430 -1010 L -630 -1010 C -646.557 -1010 -660 -996.557 -660 -980 L -660 -910 Z "
+                ></path>
+              </g>
+            </svg>
+          </div>
+          <h1 class="text">
+            <div class="top">monkey see</div>
+            monkeytype
+          </h1>
+        </a>
+      </header>
+      <main style="height: 100%">
+        <load src="html/pages/404.html" />
+      </main>
     </div>
     <link rel="stylesheet" href="/themes/serika_dark.css" id="currentTheme" />
   </body>

diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
@@ -67,13 +67,14 @@
       .preloader {
         text-align: center;
         display: grid;
-        width: 300px;
-        /* gap: 1rem; */
+        align-items: center;
+        align-content: center;
+        width: 350px;
+        gap: 1rem;
       }
       .preloader .icon {
         font-size: 2rem;
         color: var(--main-color);
-        margin-bottom: 1rem;
       }
       .preloader .subText {
         font-size: 1rem;
@@ -85,6 +86,8 @@
         display: grid;
         width: 300px;
         gap: 1rem;
+        align-items: center;
+        align-content: center;
       }
 
       .hidden {
@@ -94,7 +97,7 @@
   </head>
 
   <body>
-    <div id="contentWrapper">
+    <div id="app" class="content-grid">
       <header>
         <div id="logo">
           <div class="icon">

diff --git a/frontend/src/html/pages/about.html b/frontend/src/html/pages/about.html
@@ -1,4 +1,4 @@
-<div class="page pageAbout hidden" id="pageAbout">
+<div class="page pageAbout hidden full-width content-grid" id="pageAbout">
   <div class="scrollToTopButton invisible">
     <i class="fas fa-angle-double-up"></i>
   </div>
@@ -116,7 +116,7 @@ <h2>
       mapped onto a scale from 0 to 100.
     </p>
   </div>
-  <div id="ad-about-1-wrapper" class="ad advertisement ad-h">
+  <div id="ad-about-1-wrapper" class="ad full-width advertisement ad-h">
     <div class="icon"><i class="fas fa-ad"></i></div>
     <div id="ad-about-1"></div>
   </div>
@@ -266,7 +266,7 @@ <h2>
       adding themes and more
     </p>
   </div>
-  <div id="ad-about-2-wrapper" class="ad advertisement ad-h">
+  <div id="ad-about-2-wrapper" class="ad full-width advertisement ad-h">
     <div class="icon"><i class="fas fa-ad"></i></div>
     <div id="ad-about-2"></div>
   </div>

diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
@@ -1,4 +1,4 @@
-<div class="page pageAccount hidden" id="pageAccount">
+<div class="page pageAccount hidden full-width content-grid" id="pageAccount">
   <div class="scrollToTopButton">
     <i class="fas fa-angle-double-up"></i>
   </div>
@@ -13,7 +13,7 @@
       <div class="text">‎</div>
     </div>
   </div>
-  <div class="content">
+  <div class="content full-width content-grid">
     <div class="miniResultChartWrapper">
       <canvas id="miniResultChart"></canvas>
     </div>
@@ -300,11 +300,11 @@
 
     <!-- <div class="group createdDate">Account created on -</div> -->
 
-    <div id="ad-account-1-wrapper" class="ad ad-h">
+    <div id="ad-account-1-wrapper" class="ad full-width advertisement ad-h">
       <div class="icon"><i class="fas fa-ad"></i></div>
       <div id="ad-account-1"></div>
     </div>
-    <div id="ad-account-1-small-wrapper" class="ad ad-h-s">
+    <div id="ad-account-1-small-wrapper" class="ad advertisement ad-h-s">
       <div class="icon small"><i class="fas fa-ad"></i></div>
       <div id="ad-account-1-small"></div>
     </div>
@@ -608,7 +608,7 @@
         Export CSV
       </div>
     </div>
-    <div id="ad-account-2-wrapper" class="ad advertisement ad-h">
+    <div id="ad-account-2-wrapper" class="ad full-width advertisement ad-h">
       <div class="icon"><i class="fas fa-ad"></i></div>
       <div id="ad-account-2"></div>
     </div>

diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
@@ -1,4 +1,4 @@
-<div class="page pageSettings hidden" id="pageSettings">
+<div class="page pageSettings hidden full-width content-grid" id="pageSettings">
   <div class="scrollToTopButton">
     <i class="fas fa-angle-double-up"></i>
   </div>
@@ -27,7 +27,7 @@
     </div>
   </div>
 
-  <div id="ad-settings-1-wrapper" class="ad advertisement ad-h">
+  <div id="ad-settings-1-wrapper" class="ad full-width advertisement ad-h">
     <div class="icon"><i class="fas fa-ad"></i></div>
     <div id="ad-settings-1"></div>
   </div>
@@ -561,7 +561,7 @@
     <div class="sectionSpacer"></div>
   </div>
 
-  <div id="ad-settings-2-wrapper" class="ad advertisement ad-h">
+  <div id="ad-settings-2-wrapper" class="ad full-width advertisement ad-h">
     <div class="icon"><i class="fas fa-ad"></i></div>
     <div id="ad-settings-2"></div>
   </div>
@@ -989,7 +989,7 @@
     <div class="sectionSpacer"></div>
   </div>
 
-  <div id="ad-settings-3-wrapper" class="ad advertisement ad-h">
+  <div id="ad-settings-3-wrapper" class="ad full-width advertisement ad-h">
     <div class="icon"><i class="fas fa-ad"></i></div>
     <div id="ad-settings-3"></div>
   </div>

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
@@ -1,4 +1,4 @@
-<div class="page pageTest hidden">
+<div class="page pageTest hidden full-width content-grid">
   <div id="testConfig">
     <div class="row">
       <div class="puncAndNum">
@@ -93,7 +93,7 @@
       Test settings
     </button>
   </div>
-  <div id="typingTest">
+  <div id="typingTest" class="content-grid full-width">
     <div id="capsWarning" class="hidden">
       <i class="fas fa-lock"></i>
       Caps Lock
@@ -110,10 +110,6 @@
       <div class="acc hidden">100%</div>
       <div class="burst hidden">1</div>
     </div>
-    <div class="outOfFocusWarning hidden">
-      <i class="fas fa-fw fa-mouse-pointer"></i>
-      Click here or press any key to focus
-    </div>
     <input
       id="wordsInput"
       class=""
@@ -128,10 +124,18 @@
       list="autocompleteOff"
       spellcheck="false"
     />
-    <div id="wordsWrapper" translate="no">
-      <div id="paceCaret" class="default hidden"></div>
-      <div id="caret" class="default"></div>
-      <div id="words"></div>
+    <div
+      id="wordsWrapper"
+      class="content-grid full-width-padding"
+      translate="no"
+    >
+      <div class="outOfFocusWarning hidden">
+        <i class="fas fa-fw fa-mouse-pointer"></i>
+        Click here or press any key to focus
+      </div>
+      <div id="paceCaret" class="full-width default hidden"></div>
+      <div id="caret" class="full-width default"></div>
+      <div id="words" class="full-width"></div>
     </div>
 
     <div id="koInputVisualContainer" style="display: none">
@@ -438,7 +442,7 @@
       to save your result
     </div>
     <div style="grid-column: span 2">
-      <div id="ad-result-wrapper" class="ad advertisement ad-h">
+      <div id="ad-result-wrapper" class="ad full-width advertisement ad-h">
         <div class="iconAndText">
           <div class="icon"><i class="fas fa-ad"></i></div>
           <div class="text textRight"></div>

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -23,42 +23,37 @@
       <load src="html/popups.html" />
     </div>
     <!-- <div id="div-gpt-ad-mkt-0" style="height: 100vh"></div> -->
-    <div id="app" class="focus">
-      <div>
+    <div id="app" class="content-grid focus hidden">
+      <load src="html/header.html" />
+      <main class="full-width content-grid" style="height: 100%">
         <div id="ad-vertical-left-wrapper" class="ad advertisement ad-v focus">
           <div class="icon"><i class="fas fa-ad"></i></div>
           <div id="ad-vertical-left"></div>
         </div>
-      </div>
-      <div id="contentWrapper" class="hidden">
-        <load src="html/header.html" />
-        <main style="height: 100%">
-          <load src="html/pages/loading.html" />
-          <load src="html/pages/about.html" />
-          <load src="html/pages/settings.html" />
-          <load src="html/pages/login.html" />
-          <load src="html/pages/account.html" />
-          <load src="html/pages/profile.html" />
-          <load src="html/pages/test.html" />
-          <load src="html/pages/404.html" />
-        </main>
-
-        <load src="html/footer.html" />
-
-        <div id="ad-footer-wrapper" class="ad advertisement ad-h focus">
-          <div class="icon"><i class="fas fa-ad"></i></div>
-          <div id="ad-footer"></div>
-        </div>
-        <div id="ad-footer-small-wrapper" class="ad advertisement ad-h-s focus">
-          <div class="icon small"><i class="fas fa-ad"></i></div>
-          <div id="ad-footer-small"></div>
-        </div>
-      </div>
-      <div>
         <div id="ad-vertical-right-wrapper" class="ad advertisement ad-v focus">
           <div class="icon"><i class="fas fa-ad"></i></div>
           <div id="ad-vertical-right"></div>
         </div>
+        <load src="html/pages/loading.html" />
+        <load src="html/pages/about.html" />
+        <load src="html/pages/settings.html" />
+        <load src="html/pages/login.html" />
+        <load src="html/pages/account.html" />
+        <load src="html/pages/profile.html" />
+        <load src="html/pages/test.html" />
+        <load src="html/pages/404.html" />
+      </main>
+      <load src="html/footer.html" />
+      <div
+        id="ad-footer-wrapper"
+        class="full-width ad advertisement ad-h focus"
+      >
+        <div class="icon"><i class="fas fa-ad"></i></div>
+        <div id="ad-footer"></div>
+      </div>
+      <div id="ad-footer-small-wrapper" class="ad advertisement ad-h-s focus">
+        <div class="icon small"><i class="fas fa-ad"></i></div>
+        <div id="ad-footer-small"></div>
       </div>
     </div>
     <script

diff --git a/frontend/src/privacy-policy.html b/frontend/src/privacy-policy.html
@@ -58,7 +58,7 @@
   </head>
 
   <body>
-    <div id="contentWrapper">
+    <div id="app" class="content-grid">
       <header>
         <div id="logo">
           <div class="icon">