docs: Overhaul the webpage to reflect this fork.

FreeJ2ME-Plus should be treated as its own thing, and since the
original repo still doesn't have its own page as of yet, using
their icons and references could mislead some users into thinking
that this is the original since it is the most "complete".

This also comes with an all-new logo for FreeJ2ME-Plus as well,
which is also lighter than the previous one (partially because
a simplify pass was run over it, reducing the render accuracy
slightly, but not to a noticeable degree unless highly zoomed in).
The faster this webpage loads, the better.

As a plus, the webpage is in "dark mode" now.

Author: AShiningRay

docs/_css/compat.css

@@ -2,7 +2,7 @@ body {
     padding: 0;
     margin: 0;
     z-index: 4;
-    background-color: white;
+    background-color: black;
 }
 .main_frame {
     display: flex;
@@ -16,7 +16,8 @@ body {
     padding-bottom: 8px;
     border: 2px solid transparent;
     border-radius: 10px;
-    box-shadow: 0px 0px 6px #333333;
+    border: 4px solid #0066ffff;
+    background-color: #1a1a1aff;
     align-content: center;
     overflow: hidden;
     transition-duration: 0.4s;
@@ -46,7 +47,7 @@ body {
 }
 
 .compat_graph h1 {
-    color: #00ca31;
+    color: #ff6600ff;
     font-weight: bold;
     font-family: 'Times New Roman', Times, serif;
 }
@@ -56,7 +57,7 @@ body {
     font-weight: bold;
     font-size: 1.5em;
     text-align: center;
-    color: #5566ff;
+    color: #0066ffff;
     margin: 10px 0;
 }
 
@@ -89,18 +90,18 @@ body {
 }
 
 #b_minor_issue {
-    background-color: #729fcf;
-    border-color: #729fcf;
+    background-color: #0066ff;
+    border-color: #0066ff;
 }
 
 #b_playable {
-    background-color: #ffff38;
-    border-color: #ffff38;
+    background-color: #ffff00;
+    border-color: #ffff00;
 }
 
 #b_ingame {
-    background-color: #ff8000;
-    border-color: #ff8000;
+    background-color: #ff6600ff;
+    border-color: #ff6600ff;
 }
 
 #b_not_booting {
@@ -116,7 +117,8 @@ body {
     height: 700px;
     border: 2px solid transparent;
     border-radius: 10px;
-    box-shadow: 0px 0px 6px #333333;
+    border: 4px solid #0066ffff;
+    background-color: #1a1a1aff;
     z-index: 5;
     transition-duration: 0.4s;
 }
@@ -130,60 +132,59 @@ body {
     font-size: 1.5em;
     border: none;
     border-radius: 10px;
-    border-bottom: 4px solid #555555;
-    background-color: #efefef;
+    border-bottom: 4px solid #ff6600ff;
+    color: #ff6600ff;
+    background-color: #333333;
     transition-duration: 0.2s;
     font-weight: bolder;
 }
 
 #appsearch:hover {
     padding: 8px;
-    border-color: #5566ff;
-    color: #5566ff;
+    border-color: #0066ffff;
+    color: #0066ffff;
 }
 
 #appsearch:focus {
     padding: 8px;
-    border-color: #81d41a;
-    color: #81d41a;
+    border-color: white;
+    color: white;
     outline: none;
 }
 
 .appdata_categories {
     display: flex;
     text-align: center;
     font-size: 1.15vw;
-    /* font-size: 1.2em; */
+    color: white;
     font-family:Verdana, Geneva, Tahoma, sans-serif;
     font-weight: bolder;
-    /* border-top: 1px solid #555555;
-    border-radius: 10px; */
 }
 
 .compat_frame #name {
     width: 24%;
-    border-right: 2px solid #555555;
+    border-right: 2px solid white;
 }
 
 .compat_frame #resolutions {
     width: 19%;
-    border-right: 2px solid #555555;
+    border-right: 2px solid white;
 }
 
 
 .compat_frame #compat_status {
     width: 12%;
-    border-right: 2px solid #555555;
+    border-right: 2px solid white;
 }
 
 .compat_frame #description {
     width: 29%;
-    border-right: 2px solid #555555;
+    border-right: 2px solid white;
 }
 
 .compat_frame #updated {
     width: 16%;
-    border-right: 2px solid #555555;
+    border-right: 2px solid white;
 }
 
 .compat_frame #appmd5 {
@@ -196,15 +197,15 @@ body {
     overflow-y: scroll;
     overflow-x: hidden;
     border-radius: 5px;
-    border-top: 2px solid black;
-    border-bottom: 2px solid black;
+    border-top: 2px solid #ff6600ff;
+    border-bottom: 2px solid #ff6600ff;
     width: 98%;
     margin-left: 1%;
 }
 
 .compat_entry:nth-child(even) {
     border: 3px solid;
-    background-color: #fafafa;
+    background-color: #454545;
     display: flex;
     border-radius: 12px;
     margin: 3px 0;
@@ -213,7 +214,7 @@ body {
 
 .compat_entry:nth-child(odd) {
     border: 3px solid;
-    background-color: #dcdcdc;
+    background-color: #525252;
     display: flex;
     border-radius: 12px;
     margin: 3px 0;
@@ -227,6 +228,7 @@ body {
     align-self: center;
     font-family:Verdana, Geneva, Tahoma, sans-serif;
     font-weight: bold;
+    color: white;
 }
 
 #entryres {
@@ -236,6 +238,7 @@ body {
     align-self: center;
     font-family:Verdana, Geneva, Tahoma, sans-serif;
     font-weight: bold;
+    color: white;
 }
 
 #entrystat {
@@ -267,6 +270,7 @@ body {
     align-self: center;
     font-family:Verdana, Geneva, Tahoma, sans-serif;
     font-size: 0.85vw;
+    color: white;
 }
 
 #entryupd {
@@ -280,7 +284,7 @@ body {
 
 #entrymd5 {
     width: 20%;
-    font-size: 0.5vw;
+    font-size: 0.45vw;
     text-align: center;
     padding: 1%;
     margin-right: -3px;

docs/_css/index.css

@@ -16,11 +16,11 @@ body {
     width: 100vw;
     margin: 0;
     display: block;
-    background-color: #fff;
+    background-color: black;
 }
 
 #init-logo {
-    background-color: #fff;
+    background-color: black;
     display:block;
 }
 
@@ -35,8 +35,8 @@ body {
 
 @keyframes init-logoanim {
     0%   {opacity: 0;   transform: scale(0.5);}
-    40%  {opacity: 0.7; transform: scale(0.8);}
-    60%  {opacity: 0.7; transform: scale(0.8);}
+    40%  {opacity: 1; transform: scale(0.8);}
+    60%  {opacity: 1; transform: scale(0.8);}
     100% {opacity: 0;   transform: scale(0.5);}
 }
 
@@ -55,8 +55,8 @@ body {
     height: 100vh;
     min-height: 500px;
     max-height: 75vh;
-    background-color: white;
-    opacity: 0.75;
+    background-color: #222222;
+    opacity: 1;
     display: flex;
 }
 
@@ -104,13 +104,13 @@ body {
 }
 
 @keyframes slidegamebg {
-    0%   { opacity: 1; transform: translate3d(0, 0, 0); }
-    5%   { opacity: 0; } 10% { opacity: 1; } 15%  { opacity: 0; } 20% { opacity: 1; }
-    25%  { opacity: 0; } 30% { opacity: 1; } 35%  { opacity: 0; } 40% { opacity: 1; }
-    45%  { opacity: 0; } 50% { opacity: 1; } 55%  { opacity: 0; } 60% { opacity: 1; }
-    65%  { opacity: 0; } 70% { opacity: 1; } 75%  { opacity: 0; } 80% { opacity: 1; }
-    85%  { opacity: 0; } 90% { opacity: 1; } 95%  { opacity: 0; }
-    100% { opacity: 1; transform: translate3d(-2830px, 0, 0);}
+    0%   { opacity: 0.8; transform: translate3d(0, 0, 0); }
+    5%   { opacity: 0; } 10% { opacity: 0.8; } 15%  { opacity: 0; } 20% { opacity: 0.8; }
+    25%  { opacity: 0; } 30% { opacity: 0.8; } 35%  { opacity: 0; } 40% { opacity: 0.8; }
+    45%  { opacity: 0; } 50% { opacity: 0.8; } 55%  { opacity: 0; } 60% { opacity: 0.8; }
+    65%  { opacity: 0; } 70% { opacity: 0.8; } 75%  { opacity: 0; } 80% { opacity: 0.8; }
+    85%  { opacity: 0; } 90% { opacity: 0.8; } 95%  { opacity: 0; }
+    100% { opacity: 0.8; transform: translate3d(-2830px, 0, 0);}
 }
 
 .firstpane-content {
@@ -130,7 +130,7 @@ body {
 }
 
 #innertitletext {
-    color: #00ca31 !important;
+    color: #0066ffff !important;
 }
 
 #firstpane-content-right {
@@ -142,15 +142,15 @@ body {
     font-family:'Times New Roman', Times, serif;
     margin-top: 0;
     margin-bottom: 0;
-    color: #0064ca;
+    color: #ff6600ff;
     font-size: 4em;
     font-weight: bolder;
     transform: rotate(-2deg);
 }
 
 #firstpane-content-right p {
     font-family:Helvetica, Geneva, Tahoma, sans-serif;
-    color: black;
+    color: white;
     margin-left: 3%;
     margin-top: 0;
     font-size: 1.3em;
@@ -164,10 +164,10 @@ body {
     font-size: 2em;
     border-radius: 15px;
     border-width: 5px;
-    border-color: transparent;
+    border-color: #0066ffff;
     border-style: solid;
-    background-color: #0064ca;
-    color: #00ca31;
+    background-color: black;
+    color: #ff6600ff;
     font-weight: bold;
     float: right;
     margin-top: 2.5%;
@@ -184,8 +184,8 @@ body {
 }
 
 #downloadbutton:hover {
-    color: #0064ca;
-    background: #00ca31;
+    color: #ff6600ff;
+    border-color: #ff6600ff;
 }
 
 #downloadbutton:active {
@@ -195,8 +195,8 @@ body {
 }
 
 #freej2me_logo {
-    z-index: 5;
     width: 100%;
+    filter: saturate(1.5);
     animation: logoanim 3s ease-in-out infinite;
 }
 
@@ -233,9 +233,9 @@ body {
     position: relative;
     margin: 0;
     display:flex;
-    background-color: white;
+    background-color: #1a1a1aff;
     border: none;
-    border: 12px double #5566ff;
+    border: 12px double #0066ffff;
     border-left: none;
     border-right: none;
     box-shadow: 0px 0px 16px #444;
@@ -256,21 +256,21 @@ body {
     font-size: 4em;
     margin: 0 auto;
     font-family:'Times New Roman', Times, serif;
-    color: #00ca31;
+    color: #ff6600ff;
     font-weight: bolder;
 }
 
 .info-frame p {
     font-size: 1.3em;
     font-family:Helvetica, Geneva, Tahoma, sans-serif;
     font-weight: 700;
-    color: #555;
+    color: white;
 }
 
 .footerdiv {
     position: relative;
-    border-top: 12px double #5566ff;
-    background-color: white;
+    border-top: 12px double #0066ffff;
+    background-color: #1a1a1aff;
     box-shadow: 0px 0px 16px #444;
     z-index: 4;
     padding: 25px;
@@ -281,24 +281,25 @@ body {
     font-weight: bolder;
     font-family:'Times New Roman', Times, serif;
     font-size: 1.85em;
-    color: #5566ff;
+    color: #0066ffff;
     text-align: center;
     margin-bottom: 25px;
 }
 
 .footerdiv a {
     text-decoration: none;
+    color: #ff6600ff;
 }
 
 .footerdiv a:hover {
-    color: #00ca31;
+    color: #0066ffff;
 }
 
 .footerdiv #footer_bottom {
     font-weight: bold;
     font-family: cursive,sans-serif;
     font-size: 1.4em;
-    color: #5566ff;
+    color: #0066ffff;
     text-align: end;
 }