From 231ff50eb79b4eb9fafa27c439f9d8139bf5734f Mon Sep 17 00:00:00 2001 From: kgsensei Date: Sat, 29 Apr 2023 20:33:46 -0400 Subject: [PATCH] Fix Website on Mobile --- docs/css/index.css | 292 ++++++++++++++++++++++++++++++++++----------- docs/index.html | 113 +++++++++++------- 2 files changed, 292 insertions(+), 113 deletions(-) diff --git a/docs/css/index.css b/docs/css/index.css index b4014ae..9f98268 100644 --- a/docs/css/index.css +++ b/docs/css/index.css @@ -8,123 +8,176 @@ body { margin: 0px; font-family: Arial, Helvetica, sans-serif; color: white; + overflow-x: hidden; } -#titleContainer { +.fullSize { + height: 100%; + width: auto; +} + +.centerText { position: absolute; - left: 0px; - top: 0px; + top: 50%; + left: 0%; width: 100%; - height: var(--iconSize); + text-align: center; + transform: translate(0%, -50%); } .fullSizeImg { - display: inline-block; - height: var(--iconSize); - width: var(--iconSize); + display: inline-block; + height: var(--iconSize); + width: var(--iconSize); } -.fullSize { - height: 100%; - width: auto; +#gradient { + position: absolute; + left: var(--iconSize); + display: inline-block; + width: 200px; + height: 100%; + background: linear-gradient(90deg, #d42e3b 25%, rgba(0, 0, 0, 0) 100%); + font-size: calc(var(--iconSize) - 15px); } -#gradient { - position: absolute; - left: var(--iconSize); - display: inline-block; - width: 25%; - height: 100%; - background: linear-gradient(90deg, #d42e3b 0%, rgba(0, 0, 0, 0) 100%); - font-size: calc(var(--iconSize) - 15px); +#titleContainer { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: var(--iconSize); } -.centerText { +#cheat_name { + top: 25%; + transform: translate(0, 100px); + font-size: 3vw; +} + +#cheat_author { + top: calc(27% + 3vw); + transform: translate(0, 80px); + font-size: 1.8vw; + animation-delay: 125ms; +} + +.cheat_front_item { position: absolute; - top: 50%; - left: 0%; width: 100%; text-align: center; - transform: translate(0%, -50%); + left: 0; + animation: fadeInUp 1s forwards; + opacity: 0; } -.titleCenterText { +#stats_container { + display: flex; position: absolute; - top: 50%; - left: 2%; - width: 80%; - transform: translate(0%, -50%); + width: 1200px; + top: 70%; + left: calc((100% - 1200px) / 2); } -#contentSectionOne { +.stat { + flex-grow: 5; + position: relative; + border-radius: 15px; + height: 225px; + margin: 0px 50px 0px 50px; + background-color: #404253; + opacity: 0; + animation: fadeInUp 1s forwards; +} + +.stat_num { + font-size: 65px; + width: 100%; + text-align: center; position: absolute; - left: 5%; - width: 95%; - top: 10%; - height: 90%; + top: 50px; } -#sectionOneImg { +.stat_desc { + font-size: 28px; + width: 100%; + text-align: center; position: absolute; - top: 5%; - left: calc(90% - 960px); - width: 960px; - height: 480px; - border-radius: 10px; - overflow: hidden; + top: 120px; } -#titleContent { +#download_title { position: absolute; - font-size: 2vw; - top: 10%; - left: 0%; - width: 50%; + top: 120%; + width: 100%; + text-align: center; + left: 0; + font-size: 3vw; } -#titleParagraph { +#download_text { position: absolute; - font-size: 1.2vw; - top: 17.5%; - left: 0%; - width: calc(85% - 930px); + top: calc(122% + 3vw); + width: 100%; + text-align: center; + left: 0; + font-size: 1.8vw; } #downloadLinks { + display: flex; position: absolute; - font-size: 1.5vw; - top: 50%; - left: 0%; - width: 32.5%; + width: 1200px; + top: 155%; + left: calc((100% - 1200px) / 2); } .download { position: relative; cursor: pointer; display: inline-block; + flex-grow: 5; background-color: rgb(221, 125, 0); border-radius: 5px; - width: 25%; + width: 300px; height: 40px; transition: all 200ms; + margin: 0px 50px 0px 50px; } .download:hover { background-color: rgb(255, 149, 0); } +.downloadIcon { + position: absolute; + left: 17%; + top: 57.5%; + transform: translate(-50%, -50%); +} + +.downloadText { + position: absolute; + left: 30%; + top: 50%; + width: 70%; + color: white; + font-size: 20px; + transform: translate(0%, -50%); +} + #copyright { position: absolute; - font-size: 18px; - top: calc(100% - 22px); + font-size: 16px; + top: calc(200% - 20px); left: 0%; } -.downloadIcon { - position: absolute; - left: 50%; - top: 57.5%; - transform: translate(-50%, -50%); +@keyframes fadeInUp { + 100% { + transform: translate(0, 0); + opacity: 1; + } } .returnLink { @@ -136,22 +189,119 @@ body { color: rgb(0, 183, 255); } -#mobileBlock { - display: none; -} - a { text-decoration: none; } -@media only screen and (max-device-width: 1375px) { - #mobileBlock { +@media only screen and (max-device-width: 750px) { + #cheat_name { + top: 28%; + transform: translate(0, 100px); + font-size: 8vw; + } + + #cheat_author { + top: calc(30% + 8vw); + transform: translate(0, 80px); + font-size: 6.8vw; + animation-delay: 125ms; + } + + #stats_container { + display: block; + width: 80%; + top: 75%; + left: 10%; + } + + .stat { + position: relative; + border-radius: 15px; + height: 225px; + width: 100%; + background-color: #404253; + opacity: 0; + animation: fadeInUp 1s forwards; + margin: 20px 0px 20px 0px; + } + + .stat_num { + font-size: 45px; + width: 100%; + text-align: center; position: absolute; - font-size: 3vw; - background-color: #2e3040; + top: 50px; + } + + .stat_desc { + font-size: 20px; + width: 100%; + text-align: center; + position: absolute; + top: 120px; + } + + #download_title { + position: absolute; + top: 200%; + width: 100%; + text-align: center; + left: 0; + font-size: 8vw; + } + + #download_text { + position: absolute; + top: calc(202% + 8vw); + width: 100%; + text-align: center; + left: 0; + font-size: 6.8vw; + } + + #downloadLinks { display: block; + width: 80%; + top: 230%; + left: 10%; + } + + .download { + position: relative; + cursor: pointer; + background-color: rgb(221, 125, 0); + border-radius: 5px; width: 100%; - height: 100%; - z-index: 999999; + height: 40px; + transition: all 200ms; + margin: 20px 0px 15px 0px; + } + + .download:hover { + background-color: rgb(255, 149, 0); + } + + .downloadIcon { + position: absolute; + left: 17%; + top: 57.5%; + transform: translate(-50%, -50%); + } + + .downloadText { + position: absolute; + left: 30%; + top: 50%; + width: 70%; + color: white; + font-size: 20px; + transform: translate(0%, -50%); + } + + #copyright { + position: absolute; + font-size: 16px; + top: calc(290% - 18px); + left: 0%; } } diff --git a/docs/index.html b/docs/index.html index dd39cb8..46c0c36 100644 --- a/docs/index.html +++ b/docs/index.html @@ -28,59 +28,88 @@ -
-
-

Darn it!

- This website isn't supported on your device. -
-
-
-
- NitroType Cheats +
+ NitroType Hack v2 +
+
+ by kgsensei +
+
+
+
+ 320+ +
+
+ Daily Users +
+
+
+
+ 20,400+ +
+
+ Cheat Opens +
-
- NitroType automation cheats that allow you to "type" 33,000 WPM at 100% accuracy. - Built in automatic and manual start options. Speed slider & beta accuracy slider. +
+
+ 30,000+ +
+
+ Max Tested WPM +
-