UI designed 👍🏻
This commit is contained in:
parent
de8acf4b88
commit
155afadba9
BIN
Assets/Fonts/C64-Angled.ttf
Normal file
BIN
Assets/Fonts/C64-Angled.ttf
Normal file
Binary file not shown.
BIN
Assets/Fonts/C64-Rounded.ttf
Normal file
BIN
Assets/Fonts/C64-Rounded.ttf
Normal file
Binary file not shown.
BIN
Assets/Fonts/C64.ttf
Normal file
BIN
Assets/Fonts/C64.ttf
Normal file
Binary file not shown.
BIN
Assets/Fonts/Led Bus.ttf
Normal file
BIN
Assets/Fonts/Led Bus.ttf
Normal file
Binary file not shown.
BIN
Assets/Fonts/PositiveSystem.otf
Normal file
BIN
Assets/Fonts/PositiveSystem.otf
Normal file
Binary file not shown.
BIN
Assets/HTown.png
Normal file
BIN
Assets/HTown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
Assets/HTown.xcf
Normal file
BIN
Assets/HTown.xcf
Normal file
Binary file not shown.
BIN
Assets/wallpaper4k.png
Normal file
BIN
Assets/wallpaper4k.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
BIN
Assets/wallpaper8k.png
Normal file
BIN
Assets/wallpaper8k.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 MiB |
8
config.json
Normal file
8
config.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
60
fittext.js
Normal file
60
fittext.js
Normal file
@ -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;
|
||||
};
|
||||
})();
|
||||
42
index.html
42
index.html
@ -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">
|
||||
<TTY ACCESS>
|
||||
</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>
|
||||
58
index.js
Normal file
58
index.js
Normal file
@ -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();
|
||||
}
|
||||
});
|
||||
62
style.css
Normal file
62
style.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user