UI designed 👍🏻

2022-05-01 07:35:44 +00:00
1 parent de8acf4b88
commit 155afadba9
@@ -0,0 +1,8 @@
+{
+    "description": "This config file is inaccessible from the web",
+    "oauth": {
+        "key": "PHQaa7pbq1ljN6OjputOdMLuLvEolYKIm1qkKxrP2zM",
+        "secret": "9_-i-fbZF1CBhE1txc7i4HMj8WBTvB-tWyvXTgYuPE8",
+        "token": "TM7xgyYccUn5k8vM3IhnkxXopCf26w_ZdtCHf_Y4Y3U"
+    }
+}
@@ -0,0 +1,60 @@
+/*!	
+* FitText.js 1.0 jQuery free version
+*
+* Copyright 2011, Dave Rupert http://daverupert.com 
+* Released under the WTFPL license 
+* http://sam.zoy.org/wtfpl/
+* Modified by Slawomir Kolodziej http://slawekk.info
+*
+* Date: Tue Aug 09 2011 10:45:54 GMT+0200 (CEST)
+*/
+(function(){
+
+    var addEvent = function (el, type, fn) {
+      if (el.addEventListener)
+        el.addEventListener(type, fn, false);
+          else
+              el.attachEvent('on'+type, fn);
+    };
+    
+    var extend = function(obj,ext){
+      for(var key in ext)
+        if(ext.hasOwnProperty(key))
+          obj[key] = ext[key];
+      return obj;
+    };
+  
+    window.fitText = function (el, kompressor, options) {
+  
+      var settings = extend({
+        'minFontSize' : -1/0,
+        'maxFontSize' : 1/0
+      },options);
+  
+      var fit = function (el) {
+        var compressor = kompressor || 1;
+  
+        var resizer = function () {
+          el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px';
+        };
+  
+        // Call once to set.
+        resizer();
+  
+        // Bind events
+        // If you have any js library which support Events, replace this part
+        // and remove addEvent function (or use original jQuery version)
+        addEvent(window, 'resize', resizer);
+        addEvent(window, 'orientationchange', resizer);
+      };
+  
+      if (el.length)
+        for(var i=0; i<el.length; i++)
+          fit(el[i]);
+      else
+        fit(el);
+  
+      // return set of elements
+      return el;
+    };
+  })();
@@ -0,0 +1,42 @@
+<HTML lang="en">
+    <Head>
+        <Title>HackersTown Server Access</Title>
+        <meta charset="utf-8">
+        <base href="/"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- Stylesheets -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+        <link href="/style.css" rel="stylesheet"/>
+        <!-- Javascript -->
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+        <script src="/fittext.js"></script>
+        <script src="https://livejs.com/live.js"></script>
+
+        <script src="/index.js"></script>
+    </Head>
+    <Body>
+        <div class="row">
+            <div class="desktopOnly col-4"></div>
+            <div id="content" class="col-4 center">
+                <div class="row">
+                    <img src="/Assets/HTown.png" class="logo self-align-center mx-auto d-block" alt="Hacker Town logo in ASCII art. Rendered as image to force correct visualization."/>
+                </div>
+                <div id="title" class="row center">
+                    <span id="resizer">
+                        &ltTTY ACCESS&gt
+                    </span>
+                </div>
+                <div class="row button">
+                    <button id="bttn">Create Account</button>
+                </div>
+                <div class="row copyright">
+                    Canary
+                    <br>
+                    Copyright ©️ 2022 Elizabeth Anne Cray
+                </div>
+            </div>
+            <div class="desktopOnly col-4"></div>
+        </div>
+    </Body>
+</HTML>
@@ -0,0 +1,58 @@
+const DEBUG = true;
+var isMobile = false; //initiate as false
+
+const dbp = (msg) => {
+  console.log(msg);
+};
+
+const isOverflown = ({ clientHeight, scrollHeight }) => scrollHeight > clientHeight
+
+const resizeText = ({ element, elements, minSize = 10, maxSize = 512, step = 1, unit = 'px' }) => {
+  dbp("Resize");
+  (elements || [element]).forEach(el => {
+    let i = minSize
+    let overflow = false
+
+        const parent = el.parentNode
+
+    while (!overflow && i < maxSize) {
+        el.style.fontSize = `${i}${unit}`
+        overflow = isOverflown(parent)
+
+      if (!overflow) i += step
+    }
+
+    // revert to last state where no overflow happened
+    el.style.fontSize = `${i - step}${unit}`
+  })
+}
+
+const disableNonDesktopElements = () => {
+  var disableElements = document.getElementsByClassName("desktopOnly");
+  for(var i=0; i< disableElements.length; i++){
+    // disableElements.item(i).style.display = "none";
+    var gutter = disableElements.item(i);
+    gutter.classList.remove("col-4");
+    gutter.classList.add("col-1");
+  }
+  var content = document.getElementById("content");
+  content.style.marginTop = "6vw";
+  content.classList.remove("col-4");
+  content.classList.add("col-10");
+  var te = document.getElementById("resizer");
+  window.fitText(te);
+  document.getElementById("bttn").style.height = "15vw";
+}
+$(() => {
+  dbp("Begin Init Content");
+  // Device Detection
+  if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) ||
+    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) {
+    isMobile = true;
+  }
+  // Adjust for Mobile
+  if(isMobile){
+    dbp("Is Mobile 👍🏻");
+    disableNonDesktopElements();
+  }
+});
@@ -0,0 +1,62 @@
+@font-face {
+    font-family: Glitch;
+    src: url("/Assets/Fonts/PositiveSystem.otf") format("opentype");
+}
+
+@font-face {
+    font-family: C64;
+    src: url("/Assets/Fonts/C64-Rounded.ttf") format("truetype");
+}
+
+body {
+    background-color: black;
+    background-image: url("/Assets/wallpaper4k.png");
+    background-position: center;
+    background-size: cover;
+    overflow-x: hidden;
+    padding: 0;
+    margin: 0;
+}
+
+#content {
+    background-color: #022601;
+    height: 80%;
+    margin: 2vw;
+    padding: 2vw;
+    color: white;
+    border: 2px solid #377326;
+    border-radius: 1em;
+}
+
+.logo {
+    width: 60%;
+    height: auto;
+    left: 50%;
+    right: 50%;
+}
+
+span {
+    font-family: C64, Glitch, monospace;
+    font-size: 5vh;
+    color: #79F257;
+    text-align: center;
+    display: block;
+}
+
+.button {
+    margin: 8px;
+}
+.button > button {
+    background-color: #377326;
+    color: #79F257;
+    border: 1px solid #5AA637;
+    border-radius: 3px;
+    height: 3vw;
+}
+
+.copyright {
+    margin-top: 3vh;
+    text-align: center;
+    display: block;
+    color: #377326;
+}