+
Nebelung - Owner and Main Developer
+
EnderKingJ - Helper/Proxy Developer/Squares Background
+
Caracal.js - Inspiration/Proxy Developer
+
Quite A Fancy Emerald - Inspiration/Holy Unblocker
+
LQ16 - TN Founder
+
MikeLime - Developer
+
BinBashBanana - Games Library and PyDodge
+
Binary Person - Creator of Womginx and Rammerhead
+
Divide - TOMP and Stomp
+
Shirt - Proxy Developer
-
-
Nebelung - Owner and Main Developer
-
EnderKingJ - Proxy Developer
-
Quite A Fancy Emerald - Holy Unblocker King
-
Caracal.js - Proxy Developer
-
MikeLime - Developer
-
BinBashBanana - Game Library and PyDodge
-
Binary Person - Creator of Womginx
-
Divide - SystemYA Chatbox
-
Shirt - Proxy Developer
-
Karlee Rae - MinecraftJS
+
FAQ
+
How can I get new domains?
+Join our
discord for more Tsunami links
+
Captcha not working/issues
+Captcha is only supported on Corrosion, though the support is limited
+
Why is Discord not working properly?
+Try using the QR code. Refreshing the page might help
+
Contact
+Nebelung -
Nebelung#1335
+
-
FAQ
-
How can I get new domains?
-Join our
discord for more Tsunami links
-
Captcha not working/issues
-Captcha is only supported on Corrosion, though the support is limited
-
Why is Discord not working properly?
-Try using the QR code. Refreshing the page might help
-
Contact
-Nebelung -
Nebelung#1335
-
-
-
-
diff --git a/public/css/appearance.css b/public/css/appearance.css
new file mode 100644
index 00000000..b265ab7f
--- /dev/null
+++ b/public/css/appearance.css
@@ -0,0 +1,153 @@
+@media (prefers-color-scheme: dark) {
+body[appearance="default"] {
+--light-text: white;
+--dark-text: black;
+--highlight: #2493ff;
+--bg-main: #121212;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Roboto;
+--font-title: Quicksand;
+}
+}
+
+@media (prefers-color-scheme: light) {
+body[appearance="default"] {
+--light-text: black;
+--dark-text: white;
+--highlight: #2493ff;
+--bg-main: white;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Roboto;
+--font-title: Quicksand;
+}
+}
+
+body[appearance="dark"] {
+--light-text: white;
+--dark-text: black;
+--highlight: #2493ff;
+--bg-main: #121212;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Roboto;
+--font-title: Quicksand;
+}
+
+body[appearance="light"] {
+--light-text: black;
+--dark-text: white;
+--highlight: #2493ff;
+--bg-main: white;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Roboto;
+--font-title: Quicksand;
+}
+
+body[appearance="lime"] {
+--light-text: white;
+--dark-text: black;
+--highlight: lime;
+--bg-main: #181c19;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Roboto;
+--font-title: Quicksand;
+}
+
+body[appearance="space"] {
+--light-text: white;
+--dark-text: black;
+--highlight: #7f00ff;
+--bg-main: black;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Roboto;
+--font-title: Quicksand;
+}
+
+body[appearance="molten"] {
+--light-text: white;
+--dark-text: black;
+--highlight: #ff6868;
+--bg-main: black;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Roboto;
+--font-title: Quicksand;
+}
+
+body[appearance="eagle"] {
+--light-text: white;
+--dark-text: black;
+--highlight: #4d004d;
+--bg-main: linear-gradient(to top right, #2ac5f7, #b128ff);
+--bg-secondary: linear-gradient(to right, #665fd2, #9824d3);
+--placeholder: lightgray;
+--border: white;
+--font-main: Roboto;
+--font-title: Quicksand;
+background-attachment: fixed;
+}
+
+body[appearance="eagle"] .navbar {
+background: var(--bg-secondary);
+}
+
+body[appearance="eagle"] #suggestions {
+background: var(--bg-secondary);
+}
+
+body[appearance="retro"] {
+--light-text: white;
+--dark-text: white;
+--highlight: #009600;
+--bg-main: black;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Ubuntu Mono;
+--font-title: Ubuntu Mono;
+}
+
+body[appearance="retro"] #suggestions {
+height: 240px;
+}
+
+body[appearance="retro"] .searchicon {
+top: 375px;
+}
+
+body[appearance="forest"] {
+--light-text: white;
+--dark-text: black;
+--highlight: #004953;
+--bg-main: #191919;
+--placeholder: #666666;
+--border: #004953;
+--font-main: Raleway;
+--font-title: Raleway;
+}
+
+body[appearance="midnight"] {
+--light-text: white;
+--dark-text: black;
+--highlight: #4B0082;
+--bg-main: #150025;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Roboto;
+--font-title: Quicksand;
+}
+
+body[appearance="lava"] {
+--light-text: white;
+--dark-text: black;
+--highlight: #ff001f;
+--bg-main: #1d0003;
+--placeholder: #666666;
+--border: #5f6368;
+--font-main: Roboto;
+--font-title: Montserrat;
+}
\ No newline at end of file
diff --git a/public/css/light.css b/public/css/light.css
deleted file mode 100644
index 97a57f9e..00000000
--- a/public/css/light.css
+++ /dev/null
@@ -1,183 +0,0 @@
-body[appearance="light"] {
- background: white;
-}
-
-body[appearance="light"] .navbar {
- background: lightgrey;
-}
-
-body[appearance="light"] .navname {
- color: black;
-}
-
-body[appearance="light"] a {
- color: black;
-}
-
-body[appearance="light"] .apptitle {
- color: black;
-}
-
-body[appearance="light"] .csstitle {
- color: black;
-}
-
-body[appearance="light"] .setitle {
- color: black;
-}
-
-body[appearance="light"] .settab2 {
- color: black;
-}
-
-body[appearance="light"] .settab8 {
- color: black;
- border: 1.5px solid black;
-}
-
-body[appearance="light"] .setcssinput {
- color: black;
- border: 1.5px solid black;
-}
-
-body[appearance="light"] .settit {
- color: black;
- border: 1.5px solid black;
-}
-
-body[appearance="light"] .setfav {
- color: black;
- border: 1.5px solid black;
-}
-
-body[appearance="light"] .setcssbtn {
- color: black;
- border: 1.5px solid black;
-}
-
-body[appearance="light"] .settab3 {
- border: 1px solid black;
-}
-
-body[appearance="light"] .settab4 {
- border: 1px solid black;
-}
-
-body[appearance="light"] .settab5 {
- border: 1px solid black;
-}
-
-body[appearance="light"] .settab6 {
- border: 1px solid black;
-}
-
-body[appearance="light"] .settab7 {
- border: 1px solid black;
-}
-
-body[appearance="light"] .se {
- color: black;
- border: 1px solid black;
-}
-
-body[appearance="light"] .seactive {
- background: black;
- border: 1px solid black;
- color: white;
-}
-
-body[appearance="light"] .chooseapp {
- color: black;
- border: 1px solid black;
-}
-
-body[appearance="light"] .chooseappactive {
- background: black;
- border: 1px solid black;
- color: white;
-}
-
-body[appearance="light"] .homename {
- color: black;
-}
-
-body[appearance="light"] .search {
- color: black;
- border: 2.5px solid black;
-}
-
-body[appearance="light"] .proxy {
- border: 2.5px solid black;
- color: black;
-}
-
-body[appearance="light"] .proxysel {
- color: white;
- background-color: black;
-}
-
-body[appearance="light"] .footer {
- color: black;
-}
-
-body[appearance="light"] .icon {
- border: 1px solid black;
-}
-
-body[appearance="light"] .searchgames {
- color: black;
- border: 1.5px solid black;
-}
-
-body[appearance="light"] #nogame {
- color: black;
-}
-
-body[appearance="light"] .gameinfo {
- color: black;
-}
-
-body[appearance="light"] .game {
- border: 1px solid black;
-}
-
-body[appearance="light"] .title {
- color: black;
-}
-
-body[appearance="light"] .body {
- color: black;
-}
-
-body[appearance="light"] #info {
- color: black;
- border: 1px solid black;
-}
-
-body[appearance="light"] #docspage {
-color: black;
-}
-
-body[appearance="light"] .link {
-color: black !important;
-}
-
-body[appearance="light"] #searchyoutube {
- color: black;
- border: 1.5px solid black;
-}
-
-body[appearance="light"] #suggestions {
- border: 2.5px solid black;
- border-top: none;
- background: white;
-}
-
-body[appearance="light"] .sugg {
- color: black;
-}
-
-body[appearance="light"] .sugg:hover {
- background: black;
- color: white;
-}
\ No newline at end of file
diff --git a/public/css/mobile.css b/public/css/mobile.css
new file mode 100644
index 00000000..efddc88b
--- /dev/null
+++ b/public/css/mobile.css
@@ -0,0 +1,44 @@
+@media only screen and (max-width: 730px) {
+.search {
+width: 85%;
+}
+
+#suggestions {
+width: calc(85% + 32px);
+}
+
+.navitem {
+display: none;
+}
+
+.navname {
+margin-left: auto;
+}
+
+/*
+Do In v3
+.search:focus {
+position: fixed;
+top: 10px;
+right: 10px;
+left: 10px;
+margin-right: auto;
+margin-left: auto;
+width: auto;
+}
+
+.search:focus ~ #suggestions {
+width: auto;
+top: 52px;
+right: 10px;
+left: 10px;
+position: fixed;
+margin-right: auto;
+margin-left: auto;
+}
+
+.search:focus ~ .proxies {
+display: none;
+}
+}
+*/
\ No newline at end of file
diff --git a/public/css/pwa.css b/public/css/pwa.css
new file mode 100644
index 00000000..2064b322
--- /dev/null
+++ b/public/css/pwa.css
@@ -0,0 +1,5 @@
+@media all and (display-mode: standalone) {
+ .pwacontent {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
index 29f1a587..90067325 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,14 +1,20 @@
+@import url('appearance.css');
+@import url('mobile.css');
+@import url('pwa.css');
+@import url('ui.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
-body {
-background-color: #121212;
---light: #f2f2f2;
---blue: #2493ff;
+* {
+font-family: var(--font-main);
}
-* {
-font-family: 'Roboto';
+body {
+background: var(--bg-main);
+margin: 0;
}
::-webkit-scrollbar {
@@ -16,100 +22,98 @@ display: none;
}
::placeholder {
-color: #666666;
+color: var(--placeholder);
+}
+
+center {
+display: block;
+text-align: -webkit-center;
}
.navbar {
-background-color: #343333;
+background: var(--bg-main);
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
+display: flex;
+flex-direction: row-reverse;
+align-items: center;
+justify-content: end;
}
.navname {
-color: var(--light);
-font-size: 35px;
padding: 8px;
padding-left: 15px;
-font-family: Quicksand;
+margin-right: auto;
+display: flex;
+cursor: pointer;
+filter: drop-shadow(0 3px 2px black);
}
.navitem {
-color: var(--light);
+color: var(--light-text);
font-size: 16px;
-position: fixed;
-top: 20px;
-}
-
-.home {
-right: 350px;
-}
-
-.arcade {
-right: 250px;
-}
-
-.chatbox {
-right: 150px;
-}
-
-.settings {
-right: 50px;
+margin: 25px;
}
a {
text-decoration: none;
-color: var(--light);
+color: var(--light-text);
}
.footer {
-color :var(--light);
+color :var(--light-text);
position: fixed;
-bottom: 3px;
+bottom: 14px;
text-align: center;
-width: 100%;
font-size: 12px;
+right: 14px;
}
.link {
-color: white !important;
+color: var(--light-text) !important;
+margin: 0 7.5px;
}
.homename {
-color: white;
-font-size: 60px;
+color: var(--highlight);
+font-size: 70px;
text-align: center;
-margin-top: 285px;
-margin-bottom: 20px;
+margin-top: 185px;
+margin-bottom: 50px;
+font-family: var(--font-title);
}
.homelogo {
position: absolute;
top: 75px;
-width: 100%
+width: 100%;
+user-select: none;
+filter: drop-shadow(0 4px 6px black);
}
.search {
border-radius: 5px;
outline: none;
-border: 2.5px solid white;
font-size: 16px;
padding: 5px;
-width: 700px;
+width: 100%;
height: 30px;
-background-color: rgb(16,16,16,0);
-padding-left: 40px;
-color: white;
+background-color: var(--bg-main);
+color: var(--light-text);
+border: none;
}
.searchicon {
position: absolute;
-top: 388px;
-margin-left: 12px;
-color: #666666;
font-size: 22px;
+color: var(--placeholder);
+height: 30px;
+width: 30px;
+line-height: 30px !important;
+left: 5px;
}
#chatbox {
@@ -119,6 +123,8 @@ left: 0;
right: 0;
bottom: 0;
border: none;
+width: 100%;
+height: calc(100% - 60px);
}
.icons-pos {
@@ -135,7 +141,7 @@ align-items: center;
.icon{
border-radius: 50%;
-border: 1px solid rgb(255, 255, 255, .2);
+border: 1px solid var(--border);
width: 38px;
height: 38px;
display: flex;
@@ -156,7 +162,9 @@ bottom: 0;
border: none;
z-index: 10;
display: none;
-background: white;
+background: var(--bg-main);
+width: 100%;
+height: calc(100% - 60px);
}
#arcade {
@@ -168,15 +176,15 @@ bottom: 0;
border: none;
z-index: 10;
display: none;
-background: white;
+background: var(--bg-main);
}
#closesurf {
display: none;
position: fixed;
-top: 70px;
+top: 10px;
right: 10px;
-background-color: #2493ff;
+background-color: var(--highlight);
border-radius: 2.5px;
height: 40px;
width: 40px;
@@ -188,9 +196,9 @@ cursor: pointer;
#reloadsurf {
display: none;
position: absolute;
-top: 70px;
+top: 10px;
right: 60px;
-background-color: #2493ff;
+background-color: var(--highlight);
border-radius: 2.5px;
height: 40px;
width: 40px;
@@ -204,7 +212,7 @@ display: none;
position: fixed;
top: 70px;
right: 10px;
-background-color: #2493ff;
+background-color: var(--highlight);
border-radius: 2.5px;
height: 40px;
width: 40px;
@@ -218,7 +226,7 @@ display: none;
position: fixed;
top: 70px;
right: 60px;
-background-color: #2493ff;
+background-color: var(--highlight);
border-radius: 2.5px;
height: 40px;
width: 40px;
@@ -228,25 +236,25 @@ cursor: pointer;
}
#closeicon {
-color: black;
+color: var(--light-text);
font-size: 30px;
line-height: 40px;
}
#reloadicon {
-color: black;
+color: var(--light-text);
font-size: 25px;
line-height: 40px;
}
#closearcadeicon {
-color: black;
+color: var(--light-text);
font-size: 30px;
line-height: 40px;
}
#fullarcadeicon {
-color: black;
+color: var(--light-text);
font-size: 30px;
line-height: 40px;
}
@@ -263,7 +271,7 @@ width: 230px;
height: 310px;
border-radius: 8px;
cursor: pointer;
-border: 1px solid white;
+border: 1px solid var(--light-text);
display: inline-block;
margin-right: 35px;
margin-left: 35px;
@@ -272,24 +280,24 @@ margin-bottom: 15px;
}
.searchgames {
-width: 70%;
+width: 55%;
margin-top: 75px;
margin-bottom: 5px;
outline: none;
-color: white;
+color: var(--light-text);
border-radius: 5px;
padding: 5px;
padding-left: 8px;
-border: 1.5px solid white;
+border: 1px solid var(--border);
font-size: 16px;
height: 30px;
-background-color: rgb(16,16,16,0);
+background-color: transparent;
}
.gameimg {
width: 100%;
height: 265px;
-border-bottom: 1px solid white;
+border-bottom: 1px solid var(--light-text);
border-radius: 8px 8px 0px 0px;
object-fit: cover;
}
@@ -299,14 +307,14 @@ width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
-color: white;
+color: var(--light-text);
font-size: 16px;
line-height: 35px;
}
.settab, .settab2 {
margin-top: 75px;
-color: white;
+color: var(--light-text);
text-align: center;
font-size: 35px;
}
@@ -320,32 +328,32 @@ font-size: 40px;
width: 30%;
margin-top: 14px;
outline: none;
-color: white;
+color: var(--light-text);
border-radius: 5px;
padding: 3px;
padding-left: 8px;
-border: 1.5px solid white;
+border: 1px solid var(--border);
font-size: 15px;
height: 28px;
-background-color: rgb(16,16,16,0);
+background-color: transparent;
}
.settit, .setfav, .setcssbtn {
width: 62px;
-color: white;
+color: var(--light-text);
border-radius: 5px;
padding: 3px;
-border: 1.5px solid white;
+border: 1px solid var(--border);
font-size: 15px;
height: 38px;
-background-color: rgb(16,16,16,0);
+background-color: transparent;
cursor: pointer;
margin-top: 14px;
}
.settabs {
display: flex;
-flex-direction: row;
+flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 6px;
@@ -357,24 +365,24 @@ margin-left: 5px;
margin-right: 5px;
cursor: pointer;
border-radius: 50%;
-border: 1px solid rgb(255, 255, 255, .5);
+border: 1px solid var(--border);
height: 40px;
width: 40px;
-}
-
-.setimg {
-height: 28px;
+display: flex;
+justify-content: center;
+align-content: center;
+align-items: center;
}
.title {
margin-top: 75px;
-color: white;
+color: var(--light-text);
text-align: center;
font-size: 40px;
}
.body {
-color: white;
+color: var(--light-text);
text-align: center;
font-size: 20px;
margin-top: 7px;
@@ -393,10 +401,10 @@ right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
-border: 1px solid rgb(255, 255, 255, .2);
+border: 1px solid var(--border);
border-radius: 2.5px;
text-align: center;
-color: white;
+color: var(--light-text);
display: none;
padding: 5px;
}
@@ -409,47 +417,47 @@ cursor: pointer;
}
.infoitem:hover {
- text-decoration: underline;
+text-decoration: underline;
}
.proxies {
display: flex;
-flex-direction: row;
+flex-direction: row;
justify-content: center;
align-items: center;
}
.proxy {
border-radius: 5px;
-border: 2.5px solid white;
+border: 1px solid var(--border);
font-size: 16px;
padding: 5px;
-padding-top: 10px;
-padding-bottom: 0;
-width: 70px;
+min-width: 70px;
height: 30px;
-background-color: rgb(16,16,16,0);
-color: white;
+background-color: transparent;
+color: var(--light-text);
margin: 5px;
margin-top: 15px;
cursor: pointer;
+display: flex;
+justify-content: center;
+align-items: center;
}
.proxysel {
-color: black;
-background-color: white;
+color: var(--highlight);
}
.setitle {
margin-top: 15px;
-color: white;
+color: var(--light-text);
text-align: center;
font-size: 40px;
}
.sesel {
display: flex;
-flex-direction: row;
+flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 6px;
@@ -461,44 +469,38 @@ margin-left: 5px;
margin-right: 5px;
cursor: pointer;
border-radius: 30px;
-border: 1px solid rgb(255, 255, 255, .5);
-color: white;
+border: 1px solid var(--border);
+color: var(--light-text);
text-align: center;
padding: 14px 18px;
}
.seactive {
-background: white;
-border: 1px solid white;
-color: black;
+color: var(--highlight);
}
#nogame {
font-size: 20px;
text-align: center;
margin-top: 7px;
-color: white;
+color: var(--light-text);
display: none;
}
-.homepage {
-overflow: hidden;
-}
-
.setapp {
margin-top: 15px;
}
.apptitle {
margin-top: 15px;
-color: white;
+color: var(--light-text);
text-align: center;
font-size: 40px;
}
.chooseappsel {
display: flex;
-flex-direction: row;
+flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 6px;
@@ -510,21 +512,19 @@ margin-left: 5px;
margin-right: 5px;
cursor: pointer;
border-radius: 30px;
-border: 1px solid rgb(255, 255, 255, .5);
-color: white;
+border: 1px solid var(--border);
+color: var(--light-text);
text-align: center;
padding: 14px 18px;
}
.chooseappactive {
-background: white;
-border: 1px solid white;
-color: black;
+color: var(--highlight);
}
#docspage {
margin-top: 75px;
-color: white;
+color: var(--light-text);
line-height: 35px;
}
@@ -534,14 +534,14 @@ margin-top: 15px;
.csstitle {
margin-top: 15px;
-color: white;
+color: var(--light-text);
text-align: center;
font-size: 40px;
}
.setcssmain {
display: flex;
-flex-direction: row;
+flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 6px;
@@ -552,14 +552,14 @@ margin-bottom: 6px;
width: 30%;
margin-top: 14px;
outline: none;
-color: white;
+color: var(--light-text);
border-radius: 5px;
padding: 3px;
padding-left: 8px;
-border: 1.5px solid white;
+border: 1px solid var(--border);
font-size: 15px;
height: 28px;
-background-color: rgb(16,16,16,0);
+background-color: transparent;
margin-right: 8px;
}
@@ -568,7 +568,7 @@ text-decoration: underline;
}
.underline:hover {
- text-decoration: underline;
+text-decoration: underline;
}
#searchyoutube {
@@ -576,26 +576,26 @@ width: 70%;
margin-top: 10px;
margin-bottom: 5px;
outline: none;
-color: white;
+color: var(--light-text);
border-radius: 5px;
padding: 5px;
padding-left: 8px;
-border: 1.5px solid white;
+border: 1.5px solid var(--light-text);
font-size: 16px;
height: 30px;
-background-color: rgb(16,16,16,0);
+background-color: transparent;
}
#suggestions {
display: none;
-width: 746px;
+width: calc(55% + 44px);
height: 272px;
-border: 2.5px solid white;
+border: 1px solid var(--border);
border-radius: 0 0 5px 5px;
border-top: none;
overflow: hidden;
position: absolute;
-background: #121212;
+background: var(--bg-main);
margin-left: auto;
margin-right: auto;
left: 0;
@@ -604,7 +604,7 @@ text-align: left;
}
.sugg {
-color: white;
+color: var(--light-text);
font-size: 20px;
cursor: pointer;
padding: 5px;
@@ -612,6 +612,244 @@ padding-left: 10px;
}
.sugg:hover {
-background: white;
-color: black;
+color: var(--highlight);
+}
+
+.chooseappflex {
+width: 470px;
+flex-wrap: wrap;
+margin-bottom: 1px;
+}
+
+.appflex {
+margin-bottom: 5px;
+}
+
+#controls {
+height: 60px;
+width: 100%;
+position: fixed;
+top: 0;
+right: 0;
+left: 0;
+background: var(--bg-main);
+display: flex;
+align-items: center;
+flex-direction: row;
+display: none;
+z-index: 100;
+}
+
+.nav-icon {
+margin: 0 5px 0 10px;
+height: 38px;
+width: 38px;
+border-radius: 5px;
+user-select: none;
+}
+
+.nav-title {
+color: var(--light-text);
+flex-grow: 1;
+margin: 0 10px 0 5px;
+padding: 7px;
+user-select: none;
+font-size: 20px;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: pre;
+}
+
+.nav-button {
+font-family: Material Icons;
+color: var(--highlight);
+font-size: 25px;
+cursor: pointer;
+padding: 7px;
+margin: 5px;
+user-select: none;
+}
+
+#omnibox {
+display: flex;
+align-items: center;
+justify-content: center;
+position: relative;
+border-radius: 5px;
+outline: none;
+border: 1px solid var(--border);
+font-size: 16px;
+padding: 5px;
+width: 55%;
+height: 30px;
+background-color: var(--bg-main);
+padding-left: 40px;
+color: var(--light-text);
+}
+
+div > img {
+height: 40px;
+width: 40px;
+}
+
+.sidebar {
+width: 250px;
+background: transparent;
+height: 100%;
+user-select: none;
+position: fixed;
+top: 60px;
+}
+
+.sidetitle {
+height: 55px;
+font-size: 22px;
+background: transparent;
+display: flex;
+align-items: center;
+padding-left: 18px;
+color: var(--light-text);
+}
+
+.sidecard {
+background: transparent;
+height: 50px;
+display: flex;
+align-items: center;
+padding-left: 18px;
+border-end-end-radius: 100px;
+border-start-end-radius: 100px;
+color: var(--light-text);
+cursor: pointer;
+border: 1px solid var(--bg-main);
+border-left: 0;
+}
+
+.sidecardsel {
+color: var(--highlight);
+border: 1px solid var(--highlight);
+border-left: 0;
+}
+
+.tabcontent {
+background: transparent;
+width: calc(100% - 250px);
+height: 100%;
+position: fixed;
+right: 0;
+top: 0;
+display: none;
+overflow-x: hidden;
+top: 60px;
+}
+
+.tabcontentopen {
+display: initial;
+}
+
+.tabtitle {
+margin: 10px;
+color: var(--light-text);
+font-size: 22px;
+}
+
+.tabinput {
+font-size: 18px;
+color: var(--light-text);
+margin: 10px;
+border: 1px solid var(--border);
+background: transparent;
+border-radius: 2.5px;
+padding: 10px;
+outline: none;
+width: 400px;
+}
+
+.tabbuttons {
+display: flex;
+flex-wrap: wrap;
+max-width: 800px;
+}
+
+.tabbutton {
+border-radius: 30px;
+font-size: 18px;
+color: var(--light-text);
+margin: 10px;
+border: 1px solid #5f6368;
+background: transparent;
+padding: 14px 18px;
+cursor: pointer;
+}
+
+.tabchoice {
+border-radius: 50%;
+font-size: 18px;
+color: white;
+margin: 10px;
+border: 1px solid var(--border);
+background: transparent;
+padding: 20px;
+width: 10px;
+height: 10px;
+display: flex;
+justify-content: center;
+align-content: center;
+align-items: center;
+cursor: pointer;
+}
+
+.tabbuttonactive {
+color: var(--highlight)
+}
+
+#particles-js {
+position: fixed;
+width: 100%;
+height: 100%;
+top: 0;
+bottom: 0;
+right: 0;
+left: 0;
+z-index: -69;
+}
+
+#squares {
+position: fixed;
+width: 100%;
+height: 100%;
+top: 0;
+bottom: 0;
+right: 0;
+left: 0;
+z-index: -69;
+overflow: hidden;
+}
+
+
+#squares .animated-box{
+position: absolute;
+background: rgba(255,255,255,.2);
+display: block;
+pointer-events: none;
+border-radius: .5rem;
+animation: animate-squares 6s linear infinite;
+z-index: 1000;
+}
+
+@keyframes animate-squares{
+0%{
+opacity: 0;
+transform:scale(0) translateY(-200%) rotate(0deg);
+}
+10%{
+opacity: 1;
+}
+90%{
+opacity: 1;
+}
+100%{
+opacity: 0;
+transform:scale(0.5) translateY(-500%) rotate(360deg);
+}
}
\ No newline at end of file
diff --git a/public/css/ui.css b/public/css/ui.css
new file mode 100644
index 00000000..5448482d
--- /dev/null
+++ b/public/css/ui.css
@@ -0,0 +1,16 @@
+body #closesurf {
+display: none;
+}
+
+body #reloadsurf {
+display: none;
+}
+
+body[go="classic"] #surf {
+height: 100%;
+top: 0;
+}
+
+body[go="classic"] #controls {
+display: none !important;
+}
\ No newline at end of file
diff --git a/public/img/app.png b/public/img/app.png
new file mode 100644
index 00000000..76854fc5
Binary files /dev/null and b/public/img/app.png differ
diff --git a/public/img/app.svg b/public/img/app.svg
new file mode 100644
index 00000000..b5117f92
--- /dev/null
+++ b/public/img/app.svg
@@ -0,0 +1 @@
+