Merge pull request #1 from HilbertIdeals5/webstuff

Added a folder with all the files I've worked on
2026-04-24 07:16:48 -05:00 · 2023-06-19 18:29:09 -04:00 · 2023-06-19 18:29:09 -04:00 · eb05b16352
commit eb05b16352
parent 0552f60c01 ebe5a58d4b
27 changed files with 753 additions and 0 deletions
--- a/stuff/Graphics/Twitter
+++ b/stuff/Graphics/Twitter
--- a/stuff/Graphics/background.png
+++ b/stuff/Graphics/background.png
--- a/stuff/Graphics/bottombg.png
+++ b/stuff/Graphics/bottombg.png
--- a/stuff/Graphics/contentbg.png
+++ b/stuff/Graphics/contentbg.png
--- a/stuff/Graphics/discord-mark-white.png
+++ b/stuff/Graphics/discord-mark-white.png
--- a/stuff/Graphics/dnsbg.png
+++ b/stuff/Graphics/dnsbg.png
--- a/stuff/Graphics/github-mark-white.png
+++ b/stuff/Graphics/github-mark-white.png
--- a/stuff/Graphics/globetexture.jpg
+++ b/stuff/Graphics/globetexture.jpg
--- a/stuff/Graphics/info.png
+++ b/stuff/Graphics/info.png
--- a/stuff/Graphics/logobg.png
+++ b/stuff/Graphics/logobg.png
--- a/stuff/Graphics/mbarbg.png
+++ b/stuff/Graphics/mbarbg.png
--- a/stuff/Graphics/onlineside.png
+++ b/stuff/Graphics/onlineside.png
--- a/stuff/Graphics/sectbtmbg.png
+++ b/stuff/Graphics/sectbtmbg.png
--- a/stuff/Graphics/secttopbg.png
+++ b/stuff/Graphics/secttopbg.png
--- a/stuff/Graphics/servicesside.png
+++ b/stuff/Graphics/servicesside.png
--- a/stuff/Graphics/status/maintenance.png
+++ b/stuff/Graphics/status/maintenance.png
--- a/stuff/Graphics/status/offline.png
+++ b/stuff/Graphics/status/offline.png
--- a/stuff/Graphics/status/online.png
+++ b/stuff/Graphics/status/online.png
--- a/stuff/Graphics/topbg-concept.png
+++ b/stuff/Graphics/topbg-concept.png
--- a/stuff/Graphics/topbg.png
+++ b/stuff/Graphics/topbg.png
--- a/stuff/Graphics/wiimmfi-dark.png
+++ b/stuff/Graphics/wiimmfi-dark.png
--- a/stuff/credits/home.html
+++ b/stuff/credits/home.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+
+<title>Credits &mdash; Pok&eacute; Classic Network</title>
+<meta name="theme-color" content="rgb(0,0,0)">
+
+<link rel="stylesheet" href="looks.css">
+
+</head>
+
+<body>
+
+<div class="heading">
+About<br>
+<img alt="Pok&eacute; Classic Network">
+</div>
+
+<div class="credits">
+<p>GitHub &bull; Twitter &bull; Discord &bull; Wiimmfi &bull; Kaeru WFC<p><!--Links for these will be added soon!-->
+<p>Pok&eacute;mon is &copy; 1995-2022 Nintendo / Creatures / GAME FREAK. This service is not affiliated with Nintendo or GAME FREAK in any way.</p>
+<p>Maintenance periods are Thursdays at UTC 0300.</p>
+
+<h3>Website</h3>
+<p>Globe powered by Globe.GL<br>Globe image owned by NASA</p>
+<ul>
+    <li>[add your names here!]</li>
+    <li>Prayag</li>
+</ul>
+
+<h3>Service</h3>
+<ul>
+    <li>mm201</li>
+    <li>[etc.]</li>
+</ul>
+
+</div>
+
+</body>
+
+</html>
--- a/stuff/credits/looks.css
+++ b/stuff/credits/looks.css
@ -0,0 +1,24 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
+
+body {
+    margin: 0;
+    width: 100vw; height: 100vh;
+    font-family: "Hiragino Sans", "Hiragino Sans GB", "Noto Sans JP", sans-serif;
+}
+body * { box-sizing: border-box; }
+
+.heading {
+    height: 77px;
+    padding: 8px;
+    background-color: black;
+    background-image: url("../Graphics/topbg-concept.png");
+    color: white;
+    font-weight: bold; font-size: small;
+}
+
+.credits {
+    padding: 8px;
+    height: calc(100% - 77px); /*make a JS polyfill*/
+    font-size: x-small;
+    overflow: scroll;
+}
--- a/stuff/functions.js
+++ b/stuff/functions.js
@ -0,0 +1,107 @@
+// Get the viewport width and height, window height, and the coordinates of the window (will be important for later functions!)
+var width, height, windowheight, fromleft, fromtop; // They need to be global
+
+function updateWHVars () {
+    //~ Viewport width and height
+    if(window.innerWidth != undefined && window.innerHeight != undefined) {
+        width = window.innerWidth;
+        height = window.innerHeight;
+    } else {
+        width = document.documentElement.clientWidth;
+        height = document.documentElement.clientHeight;
+        // Hopefully this failsafe works? I'll have to double-check with IE6-8 in an emulator...
+    }
+    //~ Window width and height (no failsafe for IE yet)
+    windowheight = window.outerHeight;
+    //~ Coordinates of the window
+    if(window.screenX != undefined && window.screenY != undefined) {
+        fromleft = window.screenX;
+        fromtop = window.screenY;
+    } else {
+        fromleft = window.screenLeft;
+        fromtop = window.screenTop;
+        // Hopefully this failsafe works? I'll have to double-check with IE6-8 in an emulator...
+    }
+}
+
+
+
+function infoPopup () {
+    updateWHVars();
+
+    window.open("credits/home.html","credits","width=240px,height="+(height - 115)+"px,left="+(fromleft+width-205)+"px,top="+(fromtop+windowheight-height+38)+"px,toolbar=no");
+}
+
+
+
+function tabChanges (gen4width, gen5width) {
+    // Tab contents for each generation
+    gen4contents = "<ul> <li>GTS</li> <li>Battle Videos</li> <li>Dressup</li> <li>Box Uploads</li> <li>Wi-Fi Battle Tower</li> <li>Trainer Rankings [X]</li> <li>Wi-Fi Plaza [X]</li> </ul>";
+    gen5contents = "<ul> <li>GTS</li> <li>Battle Videos</li> <li>Musical Photos</li> <li>Wi-Fi Battle Subway</li> <li>Trainer Rankings [X]</li> <li>Game Sync [X]</li> </ul>";
+
+    // Define Gen 4 and Gen 5 tabs, and "features" div
+    gen4tab = document.getElementsByClassName("gen4")[0];
+    gen5tab = document.getElementsByClassName("gen5")[0];
+    featureslist = document.getElementsByClassName("features")[0];
+    
+    
+    
+    // Set styles
+    gen4tab.style.width = gen4width + "%";
+    gen5tab.style.width = gen5width + "%";
+    
+    // Change the contents of the "features" box appropriately
+    if (gen4width > gen5width) {
+        featureslist.innerHTML = gen4contents;
+    } else {
+        featureslist.innerHTML = gen5contents;;
+    }
+}
+
+
+
+function adjustSize () {
+    updateWHVars();
+
+    // Set up the test to check for CSS calc() support
+    // Source: https://stackoverflow.com/questions/14125415/how-can-i-check-if-css-calc-is-available-using-javascript
+    el = document.createElement('div');
+    el.style.cssText = "width: calc(10px)";
+    if (!el.style.length) {
+        // Set CSS of important elements that rely on dynamic width and height
+        //~ Body (in case you need to do "height: 100%;" or something like that)
+        document.body.style.width = width + "px";
+        document.body.style.height = height + "px";
+        
+        //~ Left and right sidebars
+        leftSidebar = document.getElementsByClassName("left")[0];
+        rightSidebar = document.getElementsByClassName("right")[0];
+        
+        leftSidebar.style.height = (height - 155) + "px";
+        rightSidebar.style.height = (height - 155) + "px";
+        
+        //~ "About" section
+        aboutSection = document.getElementsByClassName("about")[0];
+        
+        aboutSection.style.height = (height - 316) + "px";
+        
+        //~ Trades ticker
+        
+        //~ globeContainer
+        
+    }
+    
+    // Below are the ones that need to be resized regardless
+
+    //~ Twitter embed (this code doesn't work — Twitter embed is being quite finicky! This section will be commented out for the time being.)
+    //~ Oh! Maybe...I could make something where the Twitter embed gets removed, then gets re-added with a different height value?? Or would that break some sort of terms-of-use?...
+    //twitterEmbed = document.getElementsByClassName("twitter-timeline")[0];
+    
+    //twitterEmbed.style.height = "300px";
+    
+    
+    //~ Resize the Globe.GL instance
+    if (wxGlobe != undefined) {
+        wxGlobe.width(width).height(height+60);
+    }
+}
--- a/stuff/globe.js
+++ b/stuff/globe.js
@ -0,0 +1,63 @@
+// Globe tasks!!! These are run after the entire page loads, so this script is located after the end of the <body> element
+globeContainer = document.getElementsByClassName("globeContainer")[0];
+
+//~ Something that will be helpful: For the arcs representing real-time trades, there could be a variable containing the list of arcs, and that variable can be periodically updated (every few seconds) to prune already-finished trades and start arcs for new ones. The Globe.GL website has examples that can be referenced in creating this functionality.
+const wxGlobe = Globe()(globeContainer)
+    // To prepare the globe view
+    .width(width).height(height+60)
+    .backgroundColor("rgba(0,0,0,0)")
+    .globeImageUrl("Graphics/globetexture.jpg")
+    .atmosphereColor("rgb(0,0,0)")
+    .pointOfView({lat:0,lng:-75,altitude:2.6})
+    
+    // To make the flying arcs
+    .arcsData([
+        { // From Kyoto to Redmond
+            startLat: 35.0210700,
+            startLng: 135.7538500,
+            endLat: 47.673988,
+            endLng: -122.121513,
+            color: "#ff0000",
+            name: "<div style='background-color:rgb(0,0,0);padding:5px;font-family:\"Hiragino Maru Gothic ProN\";border-radius:5px;'>Between Kyoto and Redmond</div>"
+        },
+        { // From Redmond to Kyoto
+            startLat: 47.673988,
+            startLng: -122.121513,
+            endLat: 35.0210700,
+            endLng: 135.7538500,
+            color: "#0000ff", // Gradients are being weird, but at least this works!
+            name: "<div style='background-color:rgb(0,0,0);padding:5px;font-family:\"Hiragino Maru Gothic ProN\";border-radius:5px;'>Between Kyoto and Redmond</div>"
+        },
+        { // From New York to Paris
+            startLat: 40.730610,
+            startLng: -73.93524,
+            endLat: 48.8534100,
+            endLng: 2.3488000,
+            color: "#ffffff",
+            name: "<div style='background-color:rgb(0,0,0);padding:5px;font-family:\"Hiragino Maru Gothic ProN\";border-radius:5px;'>Between New York and Paris</div>"
+        },
+        { // From Paris to New York
+            startLat: 48.8534100,
+            startLng: 2.3488000,
+            endLat: 40.730610,
+            endLng: -73.93524,
+            color: "#000000",
+            name: "<div style='background-color:rgb(0,0,0);padding:5px;font-family:\"Hiragino Maru Gothic ProN\";border-radius:5px;'>Between New York and Paris</div>"
+        }
+    ])
+    .arcStroke(1)
+    .arcColor('color')
+    .arcDashLength(0.5)
+    .arcDashGap(1.5)
+    .arcDashAnimateTime(5000)
+    .arcAltitude(0.2);
+
+// Auto-rotating looks cool, but it makes it harder to control the globe and examine trades at different angles. There can probably be a toggle for starting or stopping auto-rotate.
+//wxGlobe.controls().autoRotate = true;
+//wxGlobe.controls().autoRotateSpeed = 1;
+
+// End of globe tasks
+
+
+
+// setTimeouts for real-time updates - coming soon!!!
--- a/stuff/home.html
+++ b/stuff/home.html
@ -0,0 +1,203 @@
+<!DOCTYPE html>
+
+<!-- Hopefully I haven't done too much of this by myself! I've spent too much time making it look like my drafts... :sweats_nervously: -->
+<html>
+
+<head>
+
+<title>Pok&eacute; Classic Network</title>
+<meta name="theme-color" content="rgb(0,0,0)">
+
+<link rel="stylesheet" href="looks.css">
+<script src="//unpkg.com/globe.gl"></script> <!--NOTE: The globe will only work if this page is loaded from a web server!-->
+<script src="functions.js"></script>
+
+</head>
+
+<body onload="tabChanges(66,34); adjustSize();" onresize="adjustSize();">
+
+
+<div class="globeContainer"><!--Add a message for older browsers that can't load Globe.GL: "You need a newer browser to load the globe. Check out this webpage on the latest version of Safari, Edge, Firefox, or Chrome." Or something like that, that disappears when the Globe() is created.--></div>
+<script src="globe.js"></script>
+
+
+
+<table class="top">
+<tr>
+    <td class="mbar nav">
+        <table>
+        <tr>
+            <!--
+            These text menu entries can be replaced with images. Colorful menu items would look more appealing, making the site more lively.
+            The idea is that the website goes beyond just being a utility.
+            -->
+            <td><a href="/gts/">GTS</a></td>
+            <td><a>Global Link</a></td>
+            <td><a>Events</a></td>
+        </tr>
+        </table>
+    </td>
+    <td class="logo" rowspan="2"><img alt="[Pok&eacute; Classic Network logo]" width="228px" height="51px"></td>
+    <td class="mbar info">
+        <a href="https://github.com/mm201/pkmn-classic-framework" target="_blank" rel="noopener noreferrer"><img src="Graphics/github-mark-white.png" alt="Github" height="26px"></a>
+        <a href="https://twitter.com/pcnstatus" target="_blank" rel="noopener noreferrer"><img src="Graphics/Twitter social icons - circle - white.png" alt="Twitter" height="26px"></a>
+        <a href="https://discord.com/invite/sDQVKFxvMM" target="_blank" rel="noopener noreferrer"><img src="Graphics/discord-mark-white.png" alt="Discord" height="26px"></a>
+        <a href="https://wiimmfi.de/" target="_blank" rel="noopener noreferrer"><img src="Graphics/wiimmfi-dark.png" alt="Wiimmfi" height="26px"></a>
+        <a href="http://wfc.kaeru.world/" target="_blank" rel="noopener noreferrer"><img alt="Kaeru WFC" width="26px" height="26px"></a>
+        <img onclick="infoPopup();" src="Graphics/info.png" alt="Full Credits" width="26px" height="26px">
+    </td>
+</tr>
+<tr><td><td></tr>
+</table>
+
+
+
+<!--The left and right sidebars aren't quite pretty yet, but they're being worked on!-->
+<div class="left">
+
+<table class="about"><!--"About" section-->
+<tr><td class="secttop" colspan="2"><span class="heading">ABOUT</span></td></tr>
+<tr>
+    <td class="content"><div class="container">
+        Pok&eacute; Classic Network is an unofficial replacement for the original Generation IV and V online services, re-enabling the GTS, Battle Videos, and more. It works with Wiimmfi for general-purpose NWFC emulation, and Kaeru WFC for SSL offloading. (Compatibility with AltWFC servers is not guaranteed.)<br><br>
+        <span class="heading">HOW TO CONNECT:</span><br>
+        To properly connect to this service, you need to change the DNS addresses for your connection to the ones below.<br><br>
+        Primary DNS:<br><span class="dns">178.&emsp;62.&emsp;43.212</span><br>
+        Secondary DNS:<br><span class="dns">&emsp;&emsp;0.&emsp;&emsp;0.&emsp;&emsp;0.&emsp;&emsp;0</span><br><br>
+        You can access these settings by going to the "Nintendo WFC Settings" in your game's main menu, tapping the big blue "Nintendo Wi-Fi Connection Settings" button, then tapping on the connection you're using, and scrolling to the bottom.<br><br>
+        Set "Auto-obtain DNS" to "No", then edit the "Primary DNS" and "Secondary DNS", and tap "Save Settings".
+    </div></td>
+    <td class="vborder"></td>
+</tr>
+<tr><td class="sectbtm" colspan="2"></td></tr>
+</table>
+
+<div class="pad"></div>
+
+<table class="services"><!--"Services" section-->
+<tr>
+    <td class="hborder"></td>
+    <td class="sectside" rowspan="3">
+    </td>
+</tr>
+<tr>
+    <td class="content"><div class="container">
+        <span class="blurb">Learn what services you can use with your Pok&eacute;mon version:</span><br>
+        
+        <!--The "list of features" box is in progress!!!-->
+        <table class="genselect">
+        <tr>
+            <td class="gen4" onclick="tabChanges(66,34);">IV</td>
+            <td class="gen5" onclick="tabChanges(33,67);">V</td>
+        </tr>
+        </table>
+        <div class="features">
+            <ul>
+                <li>GTS</li>
+                <li>Battle Videos</li>
+                <li>Dressup</li>
+                <li>Box Uploads</li>
+                <li>Wi-Fi Battle Tower</li>
+                <li>Trainer Rankings [X]</li>
+                <li>Wi-Fi Plaza</li>
+            </ul>
+            <!--
+            Concept for the feature list box:
+            Visitors can select the generation they're using to find out which services can be used in their game's generation. This can serve multiple purposes:
+            - Lets visitors know the full extent of their games' online capabilities (since the games don't lay this information out in one place)
+            - Can be used to indicate feature progress; in other words, letting users know whether the feature is working or not
+            - Can be used to provide links to information pages on how to use the service (since the games only offer vague text explanations)
+            - It's also nice as just a cool decoration
+            -->
+        </div>
+    </div></td>
+</tr>
+<tr><td class="hborder"></td></tr>
+</table>
+
+</div>
+
+
+
+<div class="right">
+
+<table class="online"><!--"Online" section-->
+<tr>
+    <td class="sectside" rowspan="3"></td>
+    <td class="hborder"></td>
+</tr>
+<tr>
+    <td class="content"><div class="container">
+        <span class="heading">ONLINE:</span><br>
+        <img src="Graphics/status/online.png" alt="Server is operating," height="12px" width="12px">
+        <!--
+        Concept for the status indicator:
+        - Green (online.png) = Indicates the server is online, and players can join. Alt: "Server is operating,". Text: display current online player count, which is updated every minute using AJAX.
+        - Yellow (maintenance.png) = Indicates the server is offline, but not for any unusual reason (i.e. during the maintenance period every Thursday). Alt: "Server is not operating,". Text: "Maintenance".
+        - Red (offline.png) = Indicates the server is offline for an unusual reason (e.g. unplanned maintenance, crash, etc.). Alt: "Server is not operating,". Text: "Offline".
+        -->
+        <span class="playerct">32</span> players<br><br><!--Is it possible for the player count to be tracked every minute? Or would that be too much?-->
+        136 GTS listings<br>
+        14424 Battle Videos<br>
+    </div></td>
+</tr>
+<tr><td class="hborder"></td></tr>
+</table>
+
+<div class="pad"></div>
+
+<!-- Are there any plans to make an RSS feed? Considering how Twitter has degenerated into a cesspool and all? (NOTE: Need to include another thing in adjustSize(); to adjust the size of this embed!) -->
+<a class="twitter-timeline" data-width="205" data-height="480" data-dnt="true" href="https://twitter.com/pcnstatus?ref_src=twsrc%5Etfw">Tweets by pcnstatus</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+</div>
+
+
+
+<table class="tradeticker">
+<tr>
+    <td class="ttleft" rowspan="3"></td>
+    <td class="ttborder"></td>
+    <td class="ttright" rowspan="3"></td>
+</tr>
+<tr>
+    <td class="tradelist">
+        <table class="tradeitem"><!--Represents a single trade; on load, the ticker should be populated with 5-10 of the most recent trades-->
+        <tr>
+            <td><img alt="Pok&eacute;mon #1" width="32px" height="32px"></td>
+            <td>&lt;&gt;</td>
+            <td><img alt="Pok&eacute;mon #1" width="32px" height="32px"></td>
+        </tr>
+        </table>
+    </td>
+</tr>
+<tr><td class="ttborder"></td></tr>
+</table>
+
+<table class="battleticker">
+<tr>
+    <td class="btlleft"></td>
+    <td class="battlect">999</td>
+    <td class="btllabel">ongoing<br>battles</td>
+    <!--
+    The service supports battles over WFC, but is there easily-accessible data for how many battles are taking place at once?
+    The reason why I'm asking: In an image I found here (https://bulbapedia.bulbagarden.net/wiki/Pokémon_Global_Link), the 2012 Global Link screenshot, I noticed a "VS". I figured that it would be good to have something aside from trades to fill the globe.
+    -->
+</tr>
+</table>
+
+
+
+<table class="bottom">
+<tr>
+    <td class="pad"></td>
+    <td class="cred">
+    Pok&eacute;mon is &copy; 1995-2022 Nintendo / Creatures / GAME FREAK. This service is not affiliated with Nintendo or GAME FREAK in any way.<br><br>
+    View more credits by clicking the <img src="Graphics/info.png" alt="Full Credits" height="13px"> button in the top-right corner.
+    </td>
+    <td class="pad"></td>
+</tr>
+</table>
+
+</body>
+
+</html>
--- a/stuff/looks.css
+++ b/stuff/looks.css
@ -0,0 +1,313 @@
+/* My backwards-compatibility goal: This should work in at least Safari 4, maybe IE 6-8, and of course the Wii Internet Channel and DS/DSi Browsers. */
+
+/* Animation keyframes */
+
+/* For Firefox */
+@-moz-keyframes movebg {
+    from { background-position: 0 0; }
+    to { background-position: 0 -32px; }
+}
+
+@-moz-keyframes movecontentbg {
+    from { background-position: 0 0; }
+    to { background-position: 0 -4px; }
+}
+
+/* For Safari */
+@-webkit-keyframes movebg {
+    from { background-position: 0 0; }
+    to { background-position: 0 -32px; }
+}
+
+@-webkit-keyframes movecontentbg {
+    from { background-position: 0 0; }
+    to { background-position: 0 -4px; }
+}
+
+/* No vendor prefix*/
+@keyframes movebg {
+    from { background-position: 0 0; }
+    to { background-position: 0 -32px; }
+}
+
+@keyframes movecontentbg {
+    from { background-position: 0 0; }
+    to { background-position: 0 -4px; }
+}
+
+/* What fonts would you like for the website? */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
+
+
+
+
+
+/* Overall body styling */
+body {
+    margin: 0;
+    background-color: rgb(0,128,255);
+    background-image: url("Graphics/background.png");
+    -moz-animation: movebg 5s infinite linear;
+    -webkit-animation: movebg 5s infinite linear;
+    animation: movebg 5s infinite linear;
+    /* ^^^ The idea is that this background imitates the grid background of Geonet, but with different colors. The animation is meant to be subtle, barely noticeable so as not to distract, while still bringing the page to life. GIFs are too limited in color to replace this background-image and animation combo; but even without animation, the page should still look nice in older browsers. */
+    width: 100vw; height: 100vh;
+    font-family: "Hiragino Sans", "Hiragino Sans GB", "Noto Sans JP", sans-serif; /*what fonts would you like to use?*/
+    overflow: hidden;
+}
+body * {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+table {
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+table td { padding: 0; }
+
+img { font-size: xx-small; }
+
+
+
+
+
+.top, .left, .tradeticker, .battleticker, .right, .bottom { position: absolute; }
+
+/* Style the bar at the top */
+.top {
+    top: 0; width: 100%; height: 77px;
+    background-image: url("Graphics/topbg.png");
+    color: white;
+}
+
+.top .mbar {
+    background-image: url("Graphics/mbarbg.png");
+    height: 38px;
+}
+
+.top .logo {
+    width: 341px;
+    background-image: url("Graphics/logobg.png");
+    text-align: center;
+}
+.logo img {
+    display: block;
+    margin: auto; /*will margin: auto work in older browsers?*/
+}
+
+.top .info {
+    padding: 0 8px;
+    text-align: right;
+}
+
+.nav table { height: 100%; }
+.nav table td {
+    padding: 0 8px;
+    border-right: 2px solid rgb(128,128,128);
+}
+.nav a { color: white; text-decoration: none; }
+
+
+
+
+
+/* Style the sidebars (this part was complicated!) */
+/*~ First, styling for the sidebars themselves*/
+.left { left: 0; } .right { right: 0; }
+.left, .right {
+    top: 58px; z-index: 1;
+    width: 205px; height: calc(100% - 155px);
+    back-ground: rgba(0,0,0,0.1);
+    font-size: x-small; color: white;
+    overflow: auto;
+    scrollbar-color: rgb(4,161,231) rgb(167,228,250);
+}
+
+
+
+/*~ Next, styling for common elements of the sidebars, like sections, heading labels, and borders */
+/*~~ The tables themselves... */
+.left table, .right table {
+    width: 100%;
+    table-layout: auto;
+}
+
+/*~~ The parts of the tables, like the borders and the "handles"... */
+.secttop {
+    height: 24px;
+    padding-left: 4px;
+    background-image: url("Graphics/secttopbg.png");
+    color: rgb(128,112,0);
+}
+.secttop .heading {
+    display: inline-block;
+    padding-top: 2px;
+}
+
+.sectbtm {
+    height: 12px;
+    background-image: url("Graphics/sectbtmbg.png");
+}
+
+.sectside { width: 12px; }
+
+.hborder { height: 1px; background-color: rgb(255,224,0); }
+.vborder { width: 1px; background-color: rgb(255,224,0); }
+
+/*~~ The table contents (the most important part!)... */
+.left .content, .right .content {
+    position: relative;
+    background-image: url("Graphics/contentbg.png");
+    -moz-animation: movecontentbg 0.5s infinite linear;
+    -webkit-animation: movecontentbg 0.5s infinite linear;
+    animation: movecontentbg 0.5s infinite linear;
+    /*^^^ see the animation for "body" at the top of this file, for the explanation of the animation. */
+    vertical-align: top;
+}
+.content .container {
+    position: absolute;
+    width: 100%; height: 100%;
+    overflow: auto;
+}
+.container a { color: rgb(192,224,255); }
+
+/*~~ ...And last, general elements that are used across all sidebars and tables. */
+.heading { font-weight: bold; font-size: small; }
+
+.left .pad, .right .pad {
+    height: 15px; width: 100%;
+}
+
+
+
+/*~ Finally, styling for specific sections, like "About" or "Online" */
+.about { height: calc(100% - 161px); }
+.about .container { padding: 12px; }
+.about .dns {
+    display: inline-block;
+    margin-bottom: 6px;
+    background-color: black;
+    background-image: url("Graphics/dnsbg.png");
+    font-family: "Courier", "Courier New", monospace;
+    font-size: 18px; line-height: 22px;
+}
+
+.services { height: 146px; }
+.services .sectside { background-image: url("Graphics/servicesside.png"); }
+.services .container, .online .container { padding: 8px; }
+.services .blurb { display: inline-block; }
+.services .genselect {
+    margin-top: 3px;
+    height: 16px;
+}
+.genselect td {
+    text-align: center;
+    font-weight: bold;
+    color: black;
+    cursor: pointer;
+    -webkit-transition: width 0.2s;
+    transition: width 0.2s;
+}
+.genselect .gen4 {
+    width: 50%;
+    background-color: rgb(246,194,152);
+    /*background-image: linear-gradient(rgb(255,255,216),rgb(236,132,87));*/
+}
+.genselect .gen5 {
+    width: 50%;
+    background-color: rgb(128,128,128);
+    background-image: ;
+}
+.services .features {
+    height: 76px;
+    background-color: rgba(0,0,0,0.25);
+    overflow: auto;
+}
+.features ul {
+    margin: 0; padding: 8px;
+    list-style-position: inside;
+}
+
+
+.online { height: 118px; }
+.online .sectside { background-image: url("Graphics/onlineside.png"); }
+.online .container { font-size: small; }
+.online .content img { margin-bottom: -1px; }
+
+
+
+
+
+/* Style the globeContainer div */
+.globeContainer {
+    margin-top: -60px; /* This likely won't translate well to other viewport heights, so I'll need to find something that's more universal. The goal is to keep the globe centered between the top bar and the tickers, and the Globe.GL globe only resizes by height. */
+    width: 100%; height: calc(100% + 60px); /*make JS polyfill*/
+    z-index: -1;
+}
+
+
+
+
+
+/* Style the real-time trades and battles tickers */
+.tradeticker, .battleticker {
+    bottom: 97px; height: 40px;
+}
+
+.tradeticker {
+    left: 225px;
+    width: calc(100% - (450px + 180px)); /* Note: 450px for the sidebars and 20px gaps, 180px for 170px battleticker and 10px gap. Again, JS polyfill in adjustSize(), but only after settling on a fixed width for the battleticker. */
+}
+.ttleft, .ttright { background: rgb(128,0,255); /*temporary styling, replace with background image*/ }
+.ttleft { width: 24px; }
+.ttright { width: 12px; }
+.ttborder { height: 1px; background-color: rgb(128,0,255);}
+.tradelist {
+    padding: 3px;
+    background: rgba(192,128,255,1);
+}
+.tradelist .tradeitem {
+    height: 100%;
+    background: rgb(128,0,255);
+}
+.tradeitem img { display: block; margin: 0 8px; background:gray;/*temp BG color*/}
+
+.battleticker {
+    right: 225px;
+    wid-th: 154px;
+    background: rgb(0,255,128); color: black; /*temporary styling*/
+    overflow: hidden;
+}
+.btlleft { width: 12px; }
+.battleticker .battlect {
+    width: 80px; padding: 0 4px;
+    background: yellow;
+    text-align: center;
+    line-height: 1; font-size: 40px;
+    font-family: "Courier", "Courier New", monospace;
+    font-weight: bold;
+}
+.battleticker .btllabel {
+    padding-left: 4px; padding-right: 8px;
+    color: teal;
+    line-height: 20px; font-size: medium;
+}
+
+
+
+
+
+/* Style the credits at the bottom */
+.bottom {
+    bottom: 0; width: 100%; height: 77px;
+    background-image: url("Graphics/bottombg.png");
+}
+.bottom .cred {
+    width: 512px;
+    text-align: center;
+    font-size: x-small;
+    color: white;
+}
+.cred img { margin-bottom: -2px; }