diff --git a/backend.js b/backend.js index 63434b7..dc8dd90 100644 --- a/backend.js +++ b/backend.js @@ -14,7 +14,7 @@ const io = new Server(server, { var Filter = require('bad-words') filter = new Filter(); -app.use(requireHTTPS); // Set 'SET NODE_ENV=development' in local computer before use +// app.use(requireHTTPS); // Set 'SET NODE_ENV=development' in local computer before use function requireHTTPS(req, res, next) { // The 'x-forwarded-proto' check is for Heroku @@ -43,6 +43,7 @@ io.on('connection', (socket)=>{ y:136, clickX:615, clickY:136, + roomId:1, message:'', username:"Visitor", timeoutId:0 diff --git a/public/bgHOME4.png b/public/bgHOME4.png deleted file mode 100644 index 55034a6..0000000 Binary files a/public/bgHOME4.png and /dev/null differ diff --git a/public/characterSprites/Green/Down.png b/public/characterSprites/Green/Down.png new file mode 100644 index 0000000..236e285 Binary files /dev/null and b/public/characterSprites/Green/Down.png differ diff --git a/public/characterSprites/Green/Left.png b/public/characterSprites/Green/Left.png new file mode 100644 index 0000000..236e285 Binary files /dev/null and b/public/characterSprites/Green/Left.png differ diff --git a/public/characterSprites/Green/Right.png b/public/characterSprites/Green/Right.png new file mode 100644 index 0000000..8ca4ab0 Binary files /dev/null and b/public/characterSprites/Green/Right.png differ diff --git a/public/characterSprites/Green/Up.png b/public/characterSprites/Green/Up.png new file mode 100644 index 0000000..8ca4ab0 Binary files /dev/null and b/public/characterSprites/Green/Up.png differ diff --git a/public/classes/Player.js b/public/classes/Player.js index d9e3a05..3bacfcf 100644 --- a/public/classes/Player.js +++ b/public/classes/Player.js @@ -61,7 +61,7 @@ class Player extends Sprite { ctx.beginPath(); ctx.textAlign = "center"; ctx.font = 'bold 18px win98'; - ctx.fillStyle = 'cyan'; + ctx.fillStyle = 'white'; ctx.fillText(this.username, this.position.x, this.position.y+15); ctx.font = 'normal 15px sans-serif'; diff --git a/public/classes/Sprite.js b/public/classes/Sprite.js index e57883c..cb0f8d6 100644 --- a/public/classes/Sprite.js +++ b/public/classes/Sprite.js @@ -14,7 +14,7 @@ class Sprite{ this.frames = frames this.currentFrame = 0 this.elapsedFrames = 0 - this.frameBuffer = 10 + this.frameBuffer = 7 this.sprites = sprites this.Up = new Image() this.Down = new Image() @@ -66,12 +66,14 @@ class Sprite{ updateFrames(){ this.elapsedFrames++ // this.currentFrame++ - if(this.elapsedFrames % this.frameBuffer === 0){ + // console.log(this.currentFrame); + if((this.elapsedFrames % this.frameBuffer === 0) && this.frames>1){ + if(this.currentFrame < this.frames-1){ this.currentFrame++ } else{ - this.currentFrame=0 + this.currentFrame=1 } } } diff --git a/public/css/CONSOLA.TTF b/public/css/CONSOLA.TTF new file mode 100644 index 0000000..556d2fd Binary files /dev/null and b/public/css/CONSOLA.TTF differ diff --git a/public/css/FreePixel.ttf b/public/css/FreePixel.ttf new file mode 100644 index 0000000..d22b2a2 Binary files /dev/null and b/public/css/FreePixel.ttf differ diff --git a/public/css/IBMega.woff b/public/css/IBMega.woff new file mode 100644 index 0000000..e70ffa2 Binary files /dev/null and b/public/css/IBMega.woff differ diff --git a/public/css/IBMvga.woff b/public/css/IBMvga.woff new file mode 100644 index 0000000..8ff3510 Binary files /dev/null and b/public/css/IBMvga.woff differ diff --git a/public/css/WinReg.ttf b/public/css/WinReg.ttf new file mode 100644 index 0000000..26abb3d Binary files /dev/null and b/public/css/WinReg.ttf differ diff --git a/public/css/big.flf b/public/css/big.flf new file mode 100644 index 0000000..f1c2a03 --- /dev/null +++ b/public/css/big.flf @@ -0,0 +1,819 @@ +flf2a$ 8 6 20 15 2 +Big by Glenn Chappell 4/93 -- based on Standard +Figlet release 2.0 -- August 5, 1993 +$@ +$@ +$@ +$@ +$@ +$@ +$@ +$@@ + _ @ +| |@ +| |@ +| |@ +|_|@ +(_)@ + @ + @@ + _ _ @ +( | )@ + V V @ + @ + @ + @ + @ + @@ + ( ) ) @ + ) ( ( @ + _______)_ @ + .-'---------|@ +( C|/\/\/\/\/|@ + '-./\/\/\/\/|@ + '_________'@ + @@ + __/ \ @ + ___/ __\ @ +|\ __/\\ |@ +\ \_/\\ H_/@ + \ | H_/Y @ + \|_/Y ! @ + ! @ + @@ + /|\ @ + / | \ |"""""""""""--__ @ + | ( ) | |____________--""@ + | .-. | | | @ + ]( 0 )[ | | @ + / `-' \ | | @ + / /' `\ \ | | @ + @@ + @ + ___ @ + ( _ ) @ + / _ \/\@ +| (_> <@ + \___/\/@ + @ + @@ + _ @ +( )@ +|/ @ + @ + @ + @ + @ + @@ + (\ @ + \'\ __________ @ + / '| ()_________) @ + \ '/ \ ~~~~~~~~ \ @ + \ \ ~~~~~~ \ @ + ==). \__________\ @ + (__) ()__________)@ + @@ + _______________ @ +|,----------. |\ @ +|| |=| | @ +|| || | | @ +|| . _o| | | __@ +|`-----------' |/ /~/@ + ~~~~~~~~~~~~~~~ / / @ + @@ + _______________________ @ +| / _ \| _ \ __| \| | |@ +| | (_) | _/ _|| .` | |@ +| \___/|_| |___|_|\_| |@ +| |_ | | | / |_ | |@ +| | _|_ |/ / | | |@ +| |___| |_|_/ |_| |@ + @@ + @ + _ @ + _| |_ @ +|_ _|@ + |_| @ + @ + @ + @@ + @ + @ + @ + @ + _ @ +( )@ +|/ @ + @@ + @ + @ + ______ @ +|______|@ + @ + @ + @ + @@ + @ + @ + @ + @ + _ @ +(_)@ + @ + @@ + __@ + / /@ + / / @ + / / @ + / / @ +/_/ @ + @ + @@ + ___ @ + / _ \ @ +| | | |@ +| | | |@ +| |_| |@ + \___/ @ + @ + @@ + __ @ +/_ |@ + | |@ + | |@ + | |@ + |_|@ + @ + @@ + ___ @ +|__ \ @ + ) |@ + / / @ + / /_ @ +|____|@ + @ + @@ + ____ @ +|___ \ @ + __) |@ + |__ < @ + ___) |@ +|____/ @ + @ + @@ + _ _ @ +| || | @ +| || |_ @ +|__ _|@ + | | @ + |_| @ + @ + @@ + _____ @ +| ____|@ +| |__ @ +|___ \ @ + ___) |@ +|____/ @ + @ + @@ + __ @ + / / @ + / /_ @ +| '_ \ @ +| (_) |@ + \___/ @ + @ + @@ + ______ @ +|____ |@ + / / @ + / / @ + / / @ + /_/ @ + @ + @@ + ___ @ + / _ \ @ +| (_) |@ + > _ < @ +| (_) |@ + \___/ @ + @ + @@ + ___ @ + / _ \ @ +| (_) |@ + \__, |@ + / / @ + /_/ @ + @ + @@ + @ + _ @ +(_)@ + @ + _ @ +(_)@ + @ + @@ + @ + _ @ +(_)@ + @ + _ @ +( )@ +|/ @ + @@ + __@ + / /@ + / / @ +< < @ + \ \ @ + \_\@ + @ + @@ + @ + ______ @ +|______|@ + ______ @ +|______|@ + @ + @ + @@ +__ @ +\ \ @ + \ \ @ + > >@ + / / @ +/_/ @ + @ + @@ + ___ @ +|__ \ @ + ) |@ + / / @ + |_| @ + (_) @ + @ + @@ + @ + ____ @ + / __ \ @ + / / _` |@ +| | (_| |@ + \ \__,_|@ + \____/ @ + @@ + ___ @ + / _ \ @ +| |_| |@ +| _ |@ +| | | |@ +|_| |_|@ + @ + @@ + ____ @ +| _ \ @ +| |_) |@ +| _ < @ +| |_) |@ +|____/ @ + @ + @@ + _____ @ + / ____|@ +| | @ +| | @ +| |____ @ + \_____|@ + @ + @@ + _____ @ +| __ \ @ +| | | |@ +| | | |@ +| |__| |@ +|_____/ @ + @ + @@ + ______ @ +| ____|@ +| |__ @ +| __| @ +| |____ @ +|______|@ + @ + @@ + ______ @ +| ____|@ +| |__ @ +| __| @ +| | @ +|_| @ + @ + @@ + _____ @ + / ____|@ +| | __ @ +| | |_ |@ +| |__| |@ + \_____|@ + @ + @@ + _ _ @ +| | | |@ +| |__| |@ +| __ |@ +| | | |@ +|_| |_|@ + @ + @@ + _____ @ +|_ _|@ + | | @ + | | @ + _| |_ @ +|_____|@ + @ + @@ + _ @ + | |@ + | |@ + _ | |@ +| |__| |@ + \____/ @ + @ + @@ + _ __@ +| |/ /@ +| ' / @ +| < @ +| . \ @ +|_|\_\@ + @ + @@ + _ @ +| | @ +| | @ +| | @ +| |____ @ +|______|@ + @ + @@ + __ __ @ +| \/ |@ +| \ / |@ +| |\/| |@ +| | | |@ +|_| |_|@ + @ + @@ + _ _ @ +| \ | |@ +| \| |@ +| . ` |@ +| |\ |@ +|_| \_|@ + @ + @@ + ____ @ + / __ \ @ +| | | |@ +| | | |@ +| |__| |@ + \____/ @ + @ + @@ + _____ @ +| __ \ @ +| |__) |@ +| ___/ @ +| | @ +|_| @ + @ + @@ + ____ @ + / __ \ @ +| | | |@ +| | | |@ +| |__| |@ + \___\_\@ + @ + @@ + _____ @ +| __ \ @ +| |__) |@ +| _ / @ +| | \ \ @ +|_| \_\@ + @ + @@ + _____ @ + / ____|@ +| (___ @ + \___ \ @ + ____) |@ +|_____/ @ + @ + @@ + _______ @ +|__ __|@ + | | @ + | | @ + | | @ + |_| @ + @ + @@ + _ _ @ +| | | |@ +| | | |@ +| | | |@ +| |__| |@ + \____/ @ + @ + @@ +__ __@ +\ \ / /@ + \ \ / / @ + \ \/ / @ + \ / @ + \/ @ + @ + @@ +__ __@ +\ \ / /@ + \ \ /\ / / @ + \ \/ \/ / @ + \ /\ / @ + \/ \/ @ + @ + @@ +__ __@ +\ \ / /@ + \ V / @ + > < @ + / . \ @ +/_/ \_\@ + @ + @@ +__ __@ +\ \ / /@ + \ \_/ / @ + \ / @ + | | @ + |_| @ + @ + @@ + ______@ +|___ /@ + / / @ + / / @ + / /__ @ +/_____|@ + @ + @@ + ___ @ +| _|@ +| | @ +| | @ +| | @ +| |_ @ +|___|@ + @@ +__ @ +\ \ @ + \ \ @ + \ \ @ + \ \ @ + \_\@ + @ + @@ + ___ @ +|_ |@ + | |@ + | |@ + | |@ + _| |@ +|___|@ + @@ + @ + /\ @ +|/\|@ + @ + @ + @ + @ + @@ + @ + @ + @ + @ + @ + ______ @ +|______|@ + @@ + _ @ +( )@ + \|@ + @ + @ + @ + @ + @@ + @ + @ + __ _ @ + / _` |@ +| (_| |@ + \__,_|@ + @ + @@ + _ @ +| | @ +| |__ @ +| '_ \ @ +| |_) |@ +|_.__/ @ + @ + @@ + @ + @ + ___ @ + / __|@ +| (__ @ + \___|@ + @ + @@ + _ @ + | |@ + __| |@ + / _` |@ +| (_| |@ + \__,_|@ + @ + @@ + @ + @ + ___ @ + / _ \@ +| __/@ + \___|@ + @ + @@ + __ @ + / _|@ +| |_ @ +| _|@ +| | @ +|_| @ + @ + @@ + @ + @ + __ _ @ + / _` |@ +| (_| |@ + \__, |@ + __/ |@ + @@ + _ @ +| | @ +| |__ @ +| '_ \ @ +| | | |@ +|_| |_|@ + @ + @@ + _ @ +(_)@ + _ @ +| |@ +| |@ +|_|@ + @ + @@ + _ @ + (_)@ + _ @ + | |@ + | |@ + | |@ + _/ |@ + @@ + _ @ +| | @ +| | __@ +| |/ /@ +| < @ +|_|\_\@ + @ + @@ + _ @ +| |@ +| |@ +| |@ +| |@ +|_|@ + @ + @@ + @ + @ + _ __ ___ @ +| '_ ` _ \ @ +| | | | | |@ +|_| |_| |_|@ + @ + @@ + @ + @ + _ __ @ +| '_ \ @ +| | | |@ +|_| |_|@ + @ + @@ + @ + @ + ___ @ + / _ \ @ +| (_) |@ + \___/ @ + @ + @@ + @ + @ + _ __ @ +| '_ \ @ +| |_) |@ +| .__/ @ +| | @ + @@ + @ + @ + __ _ @ + / _` |@ +| (_| |@ + \__, |@ + | |@ + |_|@@ + @ + @ + _ __ @ +| '__|@ +| | @ +|_| @ + @ + @@ + @ + @ + ___ @ +/ __|@ +\__ \@ +|___/@ + @ + @@ + _ @ +| | @ +| |_ @ +| __|@ +| |_ @ + \__|@ + @ + @@ + @ + @ + _ _ @ +| | | |@ +| |_| |@ + \__,_|@ + @ + @@ + @ + @ +__ __@ +\ \ / /@ + \ V / @ + \_/ @ + @ + @@ + @ + @ +__ __@ +\ \ /\ / /@ + \ V V / @ + \_/\_/ @ + @ + @@ + @ + @ +__ __@ +\ \/ /@ + > < @ +/_/\_\@ + @ + @@ + @ + @ + _ _ @ +| | | |@ +| |_| |@ + \__, |@ + __/ |@ + @@ + @ + @ + ____@ +|_ /@ + / / @ +/___|@ + @ + @@ + __@ + / /@ + | | @ +/ / @ +\ \ @ + | | @ + \_\@ + @@ + _ @ +| |@ +| |@ +| |@ +| |@ +| |@ +| |@ +|_|@@ +__ @ +\ \ @ + | | @ + \ \@ + / /@ + | | @ +/_/ @ + @@ + @ + /\/|@ +|/\/ @ + @ + @ + @ + @ + @@ + _ _ @ +(_)_(_)@ + / _ \ @ +| |_| |@ +| _ |@ +|_| |_|@ + @ + @@ + _ _ @ +(_)_(_)@ + / _ \ @ +| | | |@ +| |_| |@ + \___/ @ + @ + @@ + _ _ @ +(_) (_)@ +| | | |@ +| | | |@ +| |_| |@ + \___/ @ + @ + @@ + _ _ @ +(_) (_)@ + __ _ @ + / _` |@ +| (_| |@ + \__,_|@ + @ + @@ + _ _ @ +(_) (_)@ + ___ @ + / _ \ @ +| (_) |@ + \___/ @ + @ + @@ + _ _ @ +(_) (_)@ + _ _ @ +| | | |@ +| |_| |@ + \__,_|@ + @ + @@ + ____ @ +| __ \ @ +| | ) |@ +| |< < @ +| | ) |@ +|_||_/ @ + @ + @@ diff --git a/public/css/boder.png b/public/css/boder.png new file mode 100644 index 0000000..4c2c7a8 Binary files /dev/null and b/public/css/boder.png differ diff --git a/public/css/cafe.css b/public/css/cafe.css new file mode 100644 index 0000000..889066c --- /dev/null +++ b/public/css/cafe.css @@ -0,0 +1,234 @@ + +html { + overflow: -moz-scrollbars-vertical; + overflow-y: scroll; +} + + + + + /* below this line is CSS for the layout */ + + /* this is a CSS comment +to uncomment a line of CSS, remove the * and the / +before and after the text */ + + + /* the "container" is what wraps your entire website */ + /* if you want something (like the header) to be Wider than +the other elements, you will need to move that div outside +of the container */ +.credits{ + margin-top: 20px; + font-size: 12px; +} + .loungeText ul{ + font-size: 16px; + padding-left: 15px; + margin: 0px; + } + + .loungeText li{ + padding-bottom: 10px; + } + + #input { + border:2px solid grey; + border-right: none; + /* box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; */ + margin: 0px; + width: 93%; + /* width: 530px; */ + margin-right:0px; + font-size: 18px; + height: 34px; + /* margin-top: 10px; */ + padding: 5px 5px; + /* margin-bottom: 10px; */ + /* vertical-align: middle; */ + vertical-align: middle; + + } + #textInput > button{ + font-size: 18px; + width: 15%; + padding: 5px 5px; + /* display: inline; */ + /* margin-top: 10px; */ + vertical-align: middle; + /* margin-right: 5px; */ + height: 34px; + /* float: right; */ + /* padding: 1px 2px; */ + /* all:initial; */ + } + + #textInput{ + margin-top: 10px; + margin-bottom: 10px; + padding-left: 8px; + padding-right: 8px; + display: flex; + /* vertical-align: middle; */ + } + + .tooltip:not(.shown) { + display: none; + } + + .inputWrapper{ + width: 85%; + height: 100%; + padding-right: 5px; + /* white-space-collapse: discard; */ + /* padding: 2px; */ + + /* display: inline; */ + /* box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; */ + } + #emojiButton{ + border:2px solid grey; + /* border-left: none; */ + vertical-align: middle; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.5em !important; + background-color: white; + /* border: none; */ + /* margin-right: 5px; */ + min-width: 20px !important; + width: 7% !important; + height: 34px !important; + box-shadow: none; + color: black !important; + padding:0px !important; + border-width: 2px; + /* border-style: inset; + border-top: solid black 2px; + border-bottom: solid grey 2px; + border-right: solid grey 2px; */ + + /* padding: 0px !important; */ + } + + .tooltip{ + z-index:999; + position: absolute; + data-popper-placement:top; + } + /* the area below is for all links on your page +EXCEPT for the navigation */ + + .icon{ + width: 25px; + } + + .loungeContainer{ + width: auto; + } + .loungeText{ + margin-left: 20px; + + } + + .loungeText p{ + font-size: 16px; + } + + /* .right-box{ + width: 250px; + margin-left: 10px; + } */ + /* .left-box{ + width: 740px; + } */ + + canvas { + /* image-rendering: optimizeSpeed; */ + padding-left: 0; + padding-right: 0; + margin-left: auto; + margin-right: auto; + display: block; + border: 8px solid; + border-image-source: url(./boder.png); + border-image-slice: 8; + + + } + + + /* navigation links*/ + + + /* navigation link when a link is hovered over */ + + + + .window{ + margin-bottom: 10px; + background: transparent; + } + .window-body{ + /* font-family: 'win98'; */ + font-family: sans-serif; + padding: 0px; + margin: 0px; + + /* background-color: #000055a6; */ + } + /* this colors BOTH sidebars +if you want to style them separately, +create styles for #leftSidebar and #rightSidebar */ + aside { + +padding: 10px; + + + } + + + /* this is the color of the main content area, +between the sidebars! */ + main { + /* background-color: #2a2a2a; */ + /* background-color: #00003e; */ + + flex: 1; + /* padding: 0px 20px; */ + padding: 0px 2px; + order: 2; + /* border: #383838 3px solid; */ + /* border-radius: 4px; */ + + /* width: 600px; */ + } + .main-right{ + background-color: #1522387b; + backdrop-filter: blur(16px); + + } + .main-left{ + background-color: rgba(0, 0, 0, 0.45); + backdrop-filter: blur(32px); + } + + + + + /* @media only screen and (max-width: 800px) { + + canvas { + min-width: 700px; + } + } */ + + + /* BELOW THIS POINT IS MEDIA QUERY */ + + /* so you wanna change the width of your page? +by default, the container width is 900px. +in order to keep things responsive, take your new height, +and then subtrack it by 100. use this new number as the +"max-width" value below +*/ + diff --git a/public/css/custom98.css b/public/css/custom98.css new file mode 100644 index 0000000..ca2729b --- /dev/null +++ b/public/css/custom98.css @@ -0,0 +1,705 @@ +/*! 98.css v0.1.20 - https://github.com/jdan/98.css */ +/* @font-face { + font-family:"Pixelated MS Sans Serif"; + font-style:normal; + font-weight:400; + src:url(ms_sans_serif.woff) format("woff"); + src:url(ms_sans_serif.woff2) format("woff2") +} +@font-face { + font-family:"Pixelated MS Sans Serif"; + font-style:normal; + font-weight:700; + src:url(ms_sans_serif_bold.woff) format("woff"); + src:url(ms_sans_serif_bold.woff2) format("woff2") +} */ +body { + color:#222; + font-family:Arial; + font-size:12px +} +.title-bar, +.window, +button, +input, +label, +option, +select, +table, +textarea, +ul.tree-view { + /* -webkit-font-smoothing:none; */ + /* font-smooth: always; */ + font-family:"Pixelated MS Sans Serif",Arial; + font-size:11px +} +h1 { + font-size:5rem +} +h2 { + font-size:2.5rem +} +h3 { + font-size:2rem +} +h4 { + font-size:1.5rem +} +u { + border-bottom:.5px solid #222; + text-decoration:none +} +button, +input[type=reset], +input[type=submit] { + border:none; + border-radius:0; + box-sizing:border-box; + color:transparent; + min-height:23px; + min-width:75px; + padding:0 12px; + text-shadow:0 0 #222 +} +.vertical-bar, +button, +input[type=reset], +input[type=submit] { + background:silver; + box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf +} +.vertical-bar { + height:20px; + width:4px +} +button:not(:disabled):active, +input[type=reset]:not(:disabled):active, +input[type=submit]:not(:disabled):active { + box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey; + text-shadow:1px 1px #222 +} +@media (not(hover)) { + button:not(:disabled):hover, + input[type=reset]:not(:disabled):hover, + input[type=submit]:not(:disabled):hover { + box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey + } +} +button:focus, +input[type=reset]:focus, +input[type=submit]:focus { + outline:1px dotted #000; + outline-offset:-4px +} +button::-moz-focus-inner, +input[type=reset]::-moz-focus-inner, +input[type=submit]::-moz-focus-inner { + border:0 +} +:disabled, +:disabled+label, +input[readonly], +input[readonly]+label { + color:grey +} +:disabled+label, +button:disabled, +input[type=reset]:disabled, +input[type=submit]:disabled { + text-shadow:1px 1px 0 #fff +} +.window { + background:silver; + box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff; + padding:3px +} + +.title-bar { + align-items:center; + background:linear-gradient(90deg,navy,#1084d0); + /* background:linear-gradient(90deg,rgb(50, 50, 50),gray); */ + display:flex; + justify-content:space-between; + padding:3px 2px 3px 3px +} +.title-bar.inactive { + background:linear-gradient(90deg,grey,#b5b5b5) +} +.title-bar.external { + background:linear-gradient(90deg,grey,#b5b5b5) +} +.title-bar.grey { + /* background:linear-gradient(90deg,rgb(50, 50, 50),gray); */ + background:linear-gradient(90deg,#46171d,#6D2932); +} +.title-bar-text { + color:#fff; + font-weight:700; + letter-spacing:0; + margin-right:24px +} +.title-bar-controls { + display:flex +} +.title-bar-controls button { + display:block; + min-height:14px; + min-width:16px; + padding:0 +} +.title-bar-controls button:active { + padding:0 +} +.title-bar-controls button:focus { + outline:none +} +.title-bar-controls button[aria-label=Minimize] { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E"); + background-position:bottom 3px left 4px; + background-repeat:no-repeat +} +.title-bar-controls button[aria-label=Maximize] { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E"); + background-position:top 2px left 3px; + background-repeat:no-repeat +} +.title-bar-controls button[aria-label=Restore] { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E"); + background-position:top 2px left 3px; + background-repeat:no-repeat +} +.title-bar-controls button[aria-label=Help] { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E"); + background-position:top 2px left 5px; + background-repeat:no-repeat +} +.title-bar-controls button[aria-label=Close] { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E"); + background-position:top 3px left 4px; + background-repeat:no-repeat; + margin-left:2px +} +.status-bar { + gap:1px; + display:flex; + margin:0 1px +} +.status-bar-field { + box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px grey; + flex-grow:1; + margin:0; + padding:2px 3px +} +.window-body { + margin:8px +} +fieldset { + border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2; + margin:0; + padding:10px; + padding-block-start:8px +} +legend { + background:silver +} +.field-row { + align-items:center; + display:flex +} +[class^=field-row]+[class^=field-row] { + margin-top:6px +} +.field-row>*+* { + margin-left:6px +} +.field-row-stacked { + display:flex; + flex-direction:column +} +.field-row-stacked *+* { + margin-top:6px +} +label { + align-items:center; + display:inline-flex +} +input[type=checkbox], +input[type=radio] { + appearance:none; + -webkit-appearance:none; + -moz-appearance:none; + background:0; + border:none; + margin:0; + opacity:0; + position:fixed +} +input[type=checkbox]+label, +input[type=radio]+label { + line-height:13px +} +input[type=radio]+label { + margin-left:18px; + position:relative +} +input[type=radio]+label:before { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E"); + content:""; + display:inline-block; + height:12px; + left:-18px; + margin-right:6px; + position:absolute; + top:0; + width:12px +} +input[type=radio]:active+label:before { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E") +} +input[type=radio]:checked+label:after { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E"); + content:""; + display:block; + height:4px; + left:-14px; + position:absolute; + top:4px; + width:4px +} +input[type=checkbox]:focus+label, +input[type=radio]:focus+label { + outline:1px dotted #000 +} +input[type=radio][disabled]+label:before { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E") +} +input[type=radio][disabled]:checked+label:after { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='gray'/%3E%3C/svg%3E") +} +input[type=checkbox]+label { + margin-left:19px; + position:relative +} +input[type=checkbox]+label:before { + background:#fff; + box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a; + content:""; + display:inline-block; + height:13px; + left:-19px; + margin-right:6px; + position:absolute; + width:13px +} +input[type=checkbox]:active+label:before { + background:silver +} +input[type=checkbox]:checked+label:after { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E"); + content:""; + display:block; + height:7px; + left:-16px; + position:absolute; + top:3px; + width:7px +} +input[type=checkbox][disabled]+label:before { + background:silver +} +input[type=checkbox][disabled]:checked+label:after { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E") +} +input[type=email], +input[type=number], +input[type=password], +input[type=text] { + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + border:none; + border-radius:0 +} +input[type=email], +input[type=number], +input[type=password], +input[type=text], +select { + background-color:#fff; + box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a; + box-sizing:border-box; + padding:3px 4px +} +select, +textarea { + border:none +} +textarea { + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + background-color:#fff; + border-radius:0; + box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a; + box-sizing:border-box; + padding:3px 4px +} +input[type=email], +input[type=password], +input[type=text], +select { + height:21px +} +input[type=number] { + height:22px +} +input[type=email], +input[type=number], +input[type=password], +input[type=text] { + line-height:2 +} +input[type=email]:disabled, +input[type=email]:read-only, +input[type=number]:disabled, +input[type=number]:read-only, +input[type=password]:disabled, +input[type=password]:read-only, +input[type=text]:disabled, +input[type=text]:read-only, +textarea:disabled { + background-color:silver +} +select { + appearance:none; + -webkit-appearance:none; + -moz-appearance:none; + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); + background-position:top 2px right 2px; + background-repeat:no-repeat; + border-radius:0; + padding-right:32px; + position:relative +} +input[type=email]:focus, +input[type=number]:focus, +input[type=password]:focus, +input[type=text]:focus, +select:focus, +textarea:focus { + outline:none +} +input[type=range] { + -webkit-appearance:none; + background:transparent; + width:100% +} +input[type=range]:focus { + outline:none +} +input[type=range]::-webkit-slider-thumb { + -webkit-appearance:none; + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E"); + border:none; + box-shadow:none; + height:21px; + transform:translateY(-8px); + width:11px +} +input[type=range].has-box-indicator::-webkit-slider-thumb { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E"); + transform:translateY(-10px) +} +input[type=range]::-moz-range-thumb { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E"); + border:0; + border-radius:0; + height:21px; + transform:translateY(2px); + width:11px +} +input[type=range].has-box-indicator::-moz-range-thumb { + background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E"); + transform:translateY(0) +} +input[type=range]::-webkit-slider-runnable-track { + background:#000; + border-bottom:1px solid grey; + border-right:1px solid grey; + box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9; + box-sizing:border-box; + height:2px; + width:100% +} +input[type=range]::-moz-range-track { + background:#000; + border-bottom:1px solid grey; + border-right:1px solid grey; + box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9; + box-sizing:border-box; + height:2px; + width:100% +} +.is-vertical { + display:inline-block; + height:150px; + transform:translateY(50%); + width:4px +} +.is-vertical>input[type=range] { + height:4px; + margin:0 16px 0 10px; + transform:rotate(270deg) translateX(calc(-50% + 8px)); + transform-origin:left; + width:150px +} +.is-vertical>input[type=range]::-webkit-slider-runnable-track { + border-bottom:1px solid grey; + border-left:1px solid grey; + border-right:0; + box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9 +} +.is-vertical>input[type=range]::-moz-range-track { + border-bottom:1px solid grey; + border-left:1px solid grey; + border-right:0; + box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9 +} +.is-vertical>input[type=range]::-webkit-slider-thumb { + transform:translateY(-8px) scaleX(-1) +} +.is-vertical>input[type=range].has-box-indicator::-webkit-slider-thumb { + transform:translateY(-10px) scaleX(-1) +} +.is-vertical>input[type=range]::-moz-range-thumb { + transform:translateY(2px) scaleX(-1) +} +.is-vertical>input[type=range].has-box-indicator::-moz-range-thumb { + transform:translateY(0) scaleX(-1) +} +select:focus { + background-color:navy; + color:#fff +} +select:focus option { + background-color:#fff; + color:#000 +} +select:active { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E") +} +a { + color:#00f +} +a:focus { + outline:1px dotted #00f +} +ul.tree-view { + background:#fff; + box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a; + display:block; + margin:0; + padding:6px +} +ul.tree-view li { + list-style-type:none +} +ul.tree-view a { + color:#000; + text-decoration:none +} +ul.tree-view a:focus { + background-color:navy; + color:#fff +} +ul.tree-view li, +ul.tree-view ul { + margin-top:3px +} +ul.tree-view ul { + border-left:1px dotted grey; + margin-left:16px; + padding-left:16px +} +ul.tree-view ul>li { + position:relative +} +ul.tree-view ul>li:before { + border-bottom:1px dotted grey; + content:""; + display:block; + left:-16px; + position:absolute; + top:6px; + width:12px +} +ul.tree-view ul>li:last-child:after { + background:#fff; + bottom:0; + content:""; + display:block; + left:-20px; + position:absolute; + top:7px; + width:8px +} +ul.tree-view details { + margin-top:0 +} +ul.tree-view details[open] summary { + margin-bottom:0 +} +ul.tree-view ul details>summary:before { + margin-left:-22px; + position:relative; + z-index:1 +} +ul.tree-view details>summary:before { + background-color:#fff; + border:1px solid grey; + content:"+"; + display:block; + float:left; + height:9px; + line-height:8px; + margin-right:5px; + padding-left:1px; + text-align:center; + width:8px +} +ul.tree-view details[open]>summary:before { + content:"-" +} +ul.tree-view details>summary::-webkit-details-marker, +ul.tree-view details>summary::marker { + content:"" +} +pre { + background:#fff; + box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a; + display:block; + margin:0; + padding:12px 8px +} + +summary:focus { + outline:1px dotted #000 +} +::-webkit-scrollbar { + width:16px +} +::-webkit-scrollbar:horizontal { + height:17px +} +::-webkit-scrollbar-corner { + background:#dfdfdf +} +::-webkit-scrollbar-track { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E") +} +::-webkit-scrollbar-thumb { + background-color:#dfdfdf; + box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf +} +::-webkit-scrollbar-button:horizontal:end:increment, +::-webkit-scrollbar-button:horizontal:start:decrement, +::-webkit-scrollbar-button:vertical:end:increment, +::-webkit-scrollbar-button:vertical:start:decrement { + display:block +} +::-webkit-scrollbar-button:vertical:start { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E"); + height:17px +} +::-webkit-scrollbar-button:vertical:end { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); + height:17px +} +::-webkit-scrollbar-button:horizontal:start { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E"); + width:16px +} +::-webkit-scrollbar-button:horizontal:end { + background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E"); + width:16px +} +.window[role=tabpanel] { + position:relative; + z-index:2 +} +menu[role=tablist] { + display:flex; + list-style-type:none; + margin:0 0 -2px; + padding-left:3px; + position:relative; + text-indent:0 +} +menu[role=tablist]>li { + border-top-left-radius:3px; + border-top-right-radius:3px; + box-shadow:inset -1px 0 #0a0a0a,inset 1px 1px #dfdfdf,inset -2px 0 grey,inset 2px 2px #fff; + z-index:1 +} +menu[role=tablist]>li[aria-selected=true] { + background-color:silver; + margin-left:-3px; + margin-top:-2px; + padding-bottom:2px; + position:relative; + z-index:8 +} +menu[role=tablist]>li>a { + color:#222; + display:block; + margin:6px; + text-decoration:none +} +menu[role=tablist]>li[aria-selected=true]>a:focus { + outline:none +} +menu[role=tablist]>li>a:focus { + outline:1px dotted #222 +} +menu[role=tablist].multirows>li { + flex-grow:1; + text-align:center +} +.sunken-panel { + border:2px groove transparent; + border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2; + box-sizing:border-box; + overflow:auto +} +.sunken-panel, +table { + background-color:#fff +} +table { + border-collapse:collapse; + position:relative; + text-align:left; + white-space:nowrap +} +table>thead>tr>* { + background:silver; + box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; + box-sizing:border-box; + font-weight:400; + height:17px; + padding:0 6px; + position:sticky; + top:0 +} +table.interactive>tbody>tr { + cursor:pointer +} +table>tbody>tr.highlighted { + background-color:navy; + color:#fff +} +table>tbody>tr>* { + height:14px; + padding:0 6px +} +/*# sourceMappingURL=98.css.map */ diff --git a/public/css/easvhs.ttf b/public/css/easvhs.ttf new file mode 100644 index 0000000..32db281 Binary files /dev/null and b/public/css/easvhs.ttf differ diff --git a/public/css/pix.TTF b/public/css/pix.TTF new file mode 100644 index 0000000..8eaf339 Binary files /dev/null and b/public/css/pix.TTF differ diff --git a/public/css/prism-atom-dark.css b/public/css/prism-atom-dark.css new file mode 100644 index 0000000..0955bf2 --- /dev/null +++ b/public/css/prism-atom-dark.css @@ -0,0 +1,148 @@ +/** + * atom-dark theme for `prism.js` + * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax + * @author Joe Gibson (@gibsjose) + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #c5c8c6; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #1d1f21; +} + +/* Inline code */ +:not(pre) > code { + font-family: win98; + background-color:hsla(0,0%,100%,.1) ; + padding: 0px .3rem; + border: .1rem solid rgba(0,0,0,.1); + /* padding: .1em; + border-radius: .3em; */ + /* background: red; */ +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #7C7C7C; +} + +.token.punctuation { + color: #c5c8c6; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.keyword, +.token.tag { + color: #96CBFE; +} + +.token.class-name { + color: #FFFFB6; + text-decoration: underline; +} + +.token.boolean, +.token.constant { + color: #99CC99; +} + +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.number { + color: #FF73FD; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #A8FF60; +} + +.token.variable { + color: #C6C5FE; +} + +.token.operator { + color: #EDEDED; +} + +.token.entity { + color: #FFFFB6; + cursor: help; +} + +.token.url { + color: #96CBFE; +} + +.language-css .token.string, +.style .token.string { + color: #87C38A; +} + +.token.atrule, +.token.attr-value { + color: #F9EE98; +} + +.token.function { + color: #DAD085; +} + +.token.regex { + color: #E9C062; +} + +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} diff --git a/public/css/prism-duotone-space.css b/public/css/prism-duotone-space.css new file mode 100644 index 0000000..fa3102b --- /dev/null +++ b/public/css/prism-duotone-space.css @@ -0,0 +1,172 @@ +/* +Name: Duotone Space +Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) + +Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css) +Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) +*/ + +code[class*="language-"], +pre[class*="language-"] { + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; + font-size: 14px; + line-height: 1.375; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + background: #24242e; + color: #767693; +} + +pre > code[class*="language-"] { + font-size: 1em; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #5151e6; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #5151e6; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #5b5b76; +} + +.token.punctuation { + color: #5b5b76; +} + +.token.namespace { + opacity: .7; +} + +.token.tag, +.token.operator, +.token.number { + color: #dd672c; +} + +.token.property, +.token.function { + color: #767693; +} + +.token.tag-id, +.token.selector, +.token.atrule-id { + color: #ebebff; +} + +code.language-javascript, +.token.attr-name { + color: #aaaaca; +} + +code.language-css, +code.language-scss, +.token.boolean, +.token.string, +.token.entity, +.token.url, +.language-css .token.string, +.language-scss .token.string, +.style .token.string, +.token.attr-value, +.token.keyword, +.token.control, +.token.directive, +.token.unit, +.token.statement, +.token.regex, +.token.atrule { + color: #fe8c52; +} + +.token.placeholder, +.token.variable { + color: #fe8c52; +} + +.token.deleted { + text-decoration: line-through; +} + +.token.inserted { + border-bottom: 1px dotted #ebebff; + text-decoration: none; +} + +.token.italic { + font-style: italic; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.important { + color: #aaaaca; +} + +.token.entity { + cursor: help; +} + +pre > code.highlight { + outline: .4em solid #7676f4; + outline-offset: .4em; +} + +/* overrides color-values for the Line Numbers plugin + * http://prismjs.com/plugins/line-numbers/ + */ +.line-numbers.line-numbers .line-numbers-rows { + border-right-color: #262631; +} + +.line-numbers .line-numbers-rows > span:before { + color: #393949; +} + +/* overrides color-values for the Line Highlight plugin +* http://prismjs.com/plugins/line-highlight/ +*/ +.line-highlight.line-highlight { + background: rgba(221, 103, 44, 0.2); + background: -webkit-linear-gradient(left, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0)); + background: linear-gradient(to right, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0)); +} diff --git a/public/css/prism-holi-theme.css b/public/css/prism-holi-theme.css new file mode 100644 index 0000000..a1f7de3 --- /dev/null +++ b/public/css/prism-holi-theme.css @@ -0,0 +1,119 @@ +/** + * MIT License + * Copyright (c) 2021 Ayush Saini + * Holi Theme for prism.js + * @author Ayush Saini <@AyushCodes on Twitter> + */ + +code[class*='language-'], +pre[class*='language-'] { + color: #d6e7ff; + background: #030314; + text-shadow: none; + font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + font-size: 1em; + line-height: 1.5; + letter-spacing: .2px; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + text-align: left; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*='language-']::-moz-selection, +pre[class*='language-'] ::-moz-selection, +code[class*='language-']::-moz-selection, +code[class*='language-'] ::-moz-selection, +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + color: inherit; + background: #1d3b54; + text-shadow: none; +} + +pre[class*='language-'] { + border: 1px solid #2a4555; + border-radius: 5px; + padding: 1.5em 1em; + margin: 1em 0; + overflow: auto; +} + +:not(pre) > code[class*='language-'] { + color: #f0f6f6; + background: #2a4555; + padding: 0.2em 0.3em; + border-radius: 0.2em; + box-decoration-break: clone; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #446e69; +} + +.token.punctuation { + color: #d6b007; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #d6e7ff; +} + +.token.selector, +.token.attr-name, +.token.builtin, +.token.inserted { + color: #e60067; +} + +.token.string, +.token.char { + color: #49c6ec; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #ec8e01; + background: transparent; +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #0fe468; +} + +.token.function, +.token.class-name { + color: #78f3e9; +} + +.token.regex, +.token.important, +.token.variable { + color: #d6e7ff; +} diff --git a/public/css/prism-pojoaque.css b/public/css/prism-pojoaque.css new file mode 100644 index 0000000..565cf94 --- /dev/null +++ b/public/css/prism-pojoaque.css @@ -0,0 +1,151 @@ +/* + * Pojoaque Style by Jason Tate + * http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html + * Based on Solarized Style from http://ethanschoonover.com/solarized + * http://softwaremaniacs.org/media/soft/highlight/test.html +*/ + +code[class*="language-"], +pre[class*="language-"] { + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + font-family: Menlo, Monaco, "Courier New", monospace; + font-size: 15px; + line-height: 1.5; + color: #dccf8f; + text-shadow: 0; +} + +pre > code[class*="language-"] { + font-size: 1em; +} + +pre[class*="language-"], +:not(pre) > code[class*="language-"] { + border-radius: 5px; + border: 1px solid #000; + color: #DCCF8F; + background: #181914 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQACQYGBgcGCQcHCQ0IBwgNDwsJCQsPEQ4ODw4OERENDg4ODg0RERQUFhQUERoaHBwaGiYmJiYmKysrKysrKysrKwEJCAgJCgkMCgoMDwwODA8TDg4ODhMVDg4PDg4VGhMRERERExoXGhYWFhoXHR0aGh0dJCQjJCQrKysrKysrKysr/8AAEQgAjACMAwEiAAIRAQMRAf/EAF4AAQEBAAAAAAAAAAAAAAAAAAABBwEBAQAAAAAAAAAAAAAAAAAAAAIQAAEDAwIHAQEAAAAAAAAAAADwAREhYaExkUFRcYGxwdHh8REBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AyGFEjHaBS2fDDs2zkhKmBKktb7km+ZwwCnXPkLVmCTMItj6AXFxRS465/BTnkAJvkLkJe+7AKKoi2AtRS2zuAWsCb5GOlBN8gKfmuGHZ8MFqIth3ALmFoFwbwKWyAlTAp17uKqBvgBD8sM4fTjhvAhkzhaRkBMKBrfs7jGPIpzy7gFrAqnC0C0gB0EWwBDW2cBVQwm+QtPpa3wBO3sVvszCnLAhkzgL5/RLf13cLQd8/AGlu0Cb5HTx9KuAEieGJEdcehS3eRTp2ATdt3CpIm+QtZwAhROXFeb7swp/ahaM3kBE/jSIUBc/AWrgBN8uNFAl+b7sAXFxFn2YLUU5Ns7gFX8C4ib+hN8gFWXwK3bZglxEJm+gKdciLPsFV/TClsgJUwKJ5FVA7tvIFrfZhVfGJDcsCKaYgAqv6YRbE+RWOWBtu7+AL3yRalXLyKqAIIfk+zARbDgFyEsncYwJvlgFRW+GEWntIi2P0BooyFxcNr8Ep3+ANLbMO+QyhvbiqdgC0kVvgUUiLYgBS2QtPbiVI1/sgOmG9uO+Y8DW+7jS2zAOnj6O2BndwuIAUtkdRN8gFoK3wwXMQyZwHVbClsuNLd4E3yAUR6FVDBR+BafQGt93LVMxJTv8ABts4CVLhcfYWsCb5kC9/BHdU8CLYFY5bMAd+eX9MGthhpbA1vu4B7+RKkaW2Yq4AQtVBBFsAJU/AuIXBhN8gGWnstefhiZyWvLAEnbYS1uzSFP6Jvn4Baxx70JKkQojLib5AVTey1jjgkKJGO0AKWyOm7N7cSpgSpAdPH0Tfd/gp1z5C1ZgKqN9J2wFxcUUuAFLZAm+QC0Fb4YUVRFsAOvj4KW2dwtYE3yAWk/wS/PLMKfmuGHZ8MAXF/Ja32Yi5haAKWz4Ydm2cSpgU693Atb7km+Zwwh+WGcPpxw3gAkzCLY+iYUDW/Z3Adc/gpzyFrAqnALkJe+7DoItgAtRS2zuKqGE3yAx0oJvkdvYrfZmALURbDuL5/RLf13cAuDeBS2RpbtAm+QFVA3wR+3fUtFHoBDJnC0jIXH0HWsgMY8inPLuOkd9chp4z20ALQLSA8cI9jYAIa2zjzjBd8gRafS1vgiUho/kAKcsCGTOGWvoOpkAtB3z8Hm8x2Ff5ADp4+lXAlIvcmwH/2Q==') repeat left top; +} + +pre[class*="language-"] { + padding: 12px; + overflow: auto; +} + +:not(pre) > code[class*="language-"] { + padding: 2px 6px; +} + +.token.namespace { + opacity: .7; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #586e75; + font-style: italic; +} + +.token.number, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #468966; +} + +.token.attr-name { + color: #b89859; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #dccf8f; +} + +.token.selector, +.token.regex { + color: #859900; +} + +.token.atrule, +.token.keyword { + color: #cb4b16; +} + +.token.attr-value { + color: #468966; +} + +.token.function, +.token.variable, +.token.placeholder { + color: #b58900; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol { + color: #b89859; +} + +.token.tag { + color: #ffb03b; +} + +.token.important, +.token.statement, +.token.deleted { + color: #dc322f; +} + +.token.punctuation { + color: #dccf8f; +} + +.token.entity { + cursor: help; +} + +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +/* +.pojoaque-colors { + color: #586e75; + color: #b64926; + color: #468966; + color: #ffb03b; + color: #b58900; + color: #b89859; + color: #dccf8f; + color: #d3a60c; + color: #cb4b16; + color: #dc322f; + color: #073642; + color: #181914; +} +*/ diff --git a/public/css/prism-synthwave84.css b/public/css/prism-synthwave84.css new file mode 100644 index 0000000..7f0595e --- /dev/null +++ b/public/css/prism-synthwave84.css @@ -0,0 +1,140 @@ +/* + * Synthwave '84 Theme originally by Robb Owen [@Robb0wen] for Visual Studio Code + * Demo: https://marc.dev/demo/prism-synthwave84 + * + * Ported for PrismJS by Marc Backes [@themarcba] + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #f92aad; + text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; + background: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background-color: transparent !important; + background-image: linear-gradient(to bottom, #2a2139 75%, #34294f); +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.block-comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #8e8e8e; +} + +.token.punctuation { + color: #ccc; +} + +.token.tag, +.token.attr-name, +.token.namespace, +.token.number, +.token.unit, +.token.hexcode, +.token.deleted { + color: #e2777a; +} + +.token.property, +.token.selector { + color: #72f1b8; + text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475; +} + +.token.function-name { + color: #6196cc; +} + +.token.boolean, +.token.selector .token.id, +.token.function { + color: #fdfdfd; + text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975; +} + +.token.class-name { + color: #fff5f6; + text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75; +} + +.token.constant, +.token.symbol { + color: #f92aad; + text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; +} + +.token.important, +.token.atrule, +.token.keyword, +.token.selector .token.class, +.token.builtin { + color: #f4eee4; + text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575; +} + +.token.string, +.token.char, +.token.attr-value, +.token.regex, +.token.variable { + color: #f87c32; +} + +.token.operator, +.token.entity, +.token.url { + color: #67cdcc; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +.token.inserted { + color: green; +} diff --git a/public/css/scanlines.css b/public/css/scanlines.css new file mode 100644 index 0000000..380c57f --- /dev/null +++ b/public/css/scanlines.css @@ -0,0 +1,91 @@ +/* LIST OF FURTHER IMPROVEMENTS */ +/* +currently working on : +calculation draft for keyframes steps + +$scan-moving-duration: 3s; +$scan-moving-delay: 7s; + +total time = 10s (duration + delay) +keyframes : + 0%: wait + 15%: start moving + 85%: end moving & start waiting + 100% : wait + +(the rest later) + +*/ +/* REGULAR SCANLINES SETTINGS */ +/* MOVING SCANLINE SETTINGS */ +/* MIXINS */ +/* CSS .scanlines CLASS */ + +/* .screen::before { + background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0; + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate3d(-50%, -50%, 0); + width: 100%; + height: 100%; + z-index: -1; +} */ + +.scanlines { + background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png'); + position: relative; + overflow: hidden; + /* margin-bottom: 20px; */ + } + .scanlines:before, .scanlines:after { + display: block; + pointer-events: none; + content: ""; + position: absolute; + } + .scanlines:before { + width: 100%; + height: 2px; + z-index: 2147483649; + background: rgba(0, 0, 0, 0.2); + opacity: 0.1; + -webkit-animation: scanline 6s linear infinite; + animation: scanline 6s linear infinite; + } + .scanlines:after { + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 2147483648; + background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.2) 51%); + background-size: 100% 4px; + -webkit-animation: scanlines 1s steps(60) infinite; + animation: scanlines 1s steps(60) infinite; + } + + /* ANIMATE UNIQUE SCANLINE */ + @-webkit-keyframes scanline { + 0% { + transform: translate3d(0, 200000%, 0); + } + } + @keyframes scanline { + 0% { + transform: translate3d(0, 200000%, 0); + } + } + @-webkit-keyframes scanlines { + 0% { + background-position: 0 50%; + } + } + @keyframes scanlines { + 0% { + background-position: 0 50%; + } + } + /* PRESENTATION STUFF */ + \ No newline at end of file diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..67623c6 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,1501 @@ + + + :root { + --header-image: url('/images/HeaderTest.png'); + --theme-1: url('/images/tileg.jpg'); + --theme-2:url('/images/hallo.png'); + --theme-3:url('/images/stars3.gif'); + --theme-4:url('/images/vintage.png'); + + /* colors */ + /* --content: #c3aae5; */ + } + + /* if you have the URL of a font, you can set it below */ + /* feel free to delete this if it's not your vibe */ + + /* this seems like a lot for just one font and I would have to agree +but I wanted to include an example of how to include a custom font. +If you download a font file you can upload it onto your Neocities +and then link it! Many fonts have separate files for each style +(bold, italic, etc. T_T) which is why there are so many! + +*/ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:500'); + + @font-face { + font-family: Nunito; + src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf'); + + } + + @font-face { + font-family: Nunito; + src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf'); + font-weight: bold; + } + + @font-face { + font-family: Nunito; + src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf'); + font-style: italic; + } + + @font-face { + font-family: Nunito; + src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf'); + font-style: italic; + font-weight: bold; + } + + /* @font-face { + font-family: Win98; + src: url(./Windows\ Regular.ttf); + + } */ + + @font-face { + font-family: typeWriter; + src: url(./typewriter.ttf); + + } + + @font-face { + font-family: win98; + src: url(./FreePixel.ttf); + /* font-style: normal; */ + /* font-weight: 500; */ + + } + + @font-face { + font-family: asciiFont; + src: url(./CONSOLA.TTF); + font-style: normal; + + } + + @font-face { + font-family: VHS; + src: url(./easvhs.ttf); + font-style: normal; + + } + + @font-face { + font-family: pix; + src: url(./pix.TTF); + font-style: normal; + + } + + @font-face { + font-family: WinReg; + src: url(./WinReg.ttf); + font-style: normal; + + } + + @font-face { + font-family: IBM; + src: url(./IBMvga.woff); + font-style: normal; + + } + +html{ + min-height: 100vh; + /* position:relative; */ +} + + body { + height: 100%; + font-family:IBM; + /* line-height: 1.5; */ + /* font-family: 'Open Sans', sans-serif; */ + margin: 0; + background-color: #08031A; + /* you can delete the line below if you'd prefer to not use an image */ + /* background-repeat: no-repeat; */ + /* background-attachment: fixed; */ + /* background-size: cover; */ + color: #e9e4de; + background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), var(--theme-3); + /* background-image: var(--theme-3); */ + background-blend-mode: normal; + /* filter: grayscale(100%); */ + /* font-smooth: always !important; */ + } + body img{ + filter: brightness(.9) contrast(1); + } + + #theme-switch2:checked ~ #container { + --body-bg-image:var(--red-theme); + background-color:red !important; + } + + .info-bubble{ + width: 200px; + bottom:103%; + /* overflow:hidden; */ + color: black; + visibility: hidden; + position: absolute; + right: -4px; + /* bottom: -33px; */ + border: 1px solid black; + border-radius: 7px; + padding: 6px 28px 10px 10px; + background-color: #ffffe1; + font-size: 11px; + white-space: wrap; + } + .info-bubble:before { + content: ''; + overflow:hidden; + position: absolute; + display: block; + bottom: -19px; + right: 14px; + width: 0; + height: 0; + border-style: solid; + border-width: 0 19px 19px 0; + border-color: transparent black transparent transparent; + } + .info-bubble:after { + content: ''; + position: absolute; + display: block; + bottom: -17px; + right: 15px; + width: 0; + height: 0; + border-style: solid; + border-width: 0 18px 18px 0; + border-color: transparent #ffffe1 transparent transparent; + } + + .project{ + all:initial; + font-family: -apple-system, -apple-system, + BlinkMacSystemFont, 'Segoe UI', Roboto, + Oxygen, Ubuntu, Cantarell, 'Open Sans', + 'Helvetica Neue', sans-serif; + /* font-family: IBM; */ + /* font-weight: 500; */ + line-height: 1.5; + font-size: 17px; + color: #DBDBDB; + /* padding-top: 30px; */ + } + .project p{ + margin-top: 0px; + } + + .project ul{ + padding-left: 30px; + } + + .project img{ + width: 100%; + /* padding-left: 50px; + padding-right: 50px; */ + } + .project .imageSlides img{ + /* padding-left: 50px; + padding-right: 50px; */ + } + .project .splide__arrow--next { + right: 1em; + } + .project .splide__arrow--prev { + left: 1em; + } + + .project .imageSlides{ + margin: 30px 0 0 0; + } + + + .invisible{ + visibility: hidden; + position: absolute; + } + + .warning{ + background-color: #4D3800; + border-left: 3px solid #E6A700; + padding: 8px 10px; + font-family: "win98"; + } + + .warning p{ + margin: 0px; + } + + .note{ + background-color: #193C47; + border-left: 3px solid #4CB3D4; + padding: 8px 10px; + font-family: "win98"; + } + + .note strong{ + text-shadow: none; + color:white; + } + + .note p{ + margin: 0px; + } + + #main-carousel button{ + box-shadow: none; + min-width: initial; + min-height: initial; + font-size: 18px; + /* position: absolute !important; */ + /* color:black !important; */ +} + +.thumbnails { + display: flex; + margin: 1rem auto 0; + padding: 0; + justify-content: center; + } + + .thumbnail { + width: 70px; + height: 70px; + overflow: hidden; + list-style: none; + margin: 0 0.2rem; + cursor: pointer; + opacity: 0.3; + } + + .thumbnail img { + width: 100%; + height: auto; + } + + .thumbnail.is-active { + opacity: 1; + } + + .project__heading{ + padding-top: 30px; + margin-bottom: 10px !important; + } + .topHeader{ + margin-bottom: 30px; + } + .dateSection{ + margin-top: 10px; + } + .projectSummary{ + margin-top: 0px !important; + color: #A3A3A3 !important; + padding-left: 0px !important; + } + .project :is(h1, h2, h3, h4, h5) { + /* all:initial; */ + line-height: 1.1; + margin-block-end: 0.65em; + /* font-family: 'Open Sans', sans-serif; */ + font-family: IBM; + font-weight: 500; + /* line-height: 1.5; */ + /* color:white; ; */ + } + + .project h1 { + margin-top: 0; + font-size: 2.441rem; + } + + /* .project h2 {font-size: 1.842rem;margin-bottom:18px;margin-top:54px;} */ + .project h2 {font-size: 1.953rem;margin-top: 1em;padding-top:1em;text-align: center; border-top: dashed grey 1px;} + + /* .project h3 {font-size: 1.63rem;} */ + .project h3 {font-size: 1.563rem;margin-top: 1.5em; color:#DBDBDB; text-shadow: none; } + + .project h4 {font-size: 1.25rem; display: block;} + + .project h5 {font-size: 1.277rem;} + + .project small, .text_small {font-size: 0.855rem;} + + .eleventy-plugin-youtube-embed{ + margin-bottom: 1rem; + } + +/* code{ + font: inherit; + background-color:hsla(0,0%,100%,.1) ; + padding: 0px .1rem; + border: .1rem solid rgba(0,0,0,.1); + +} */ + + * { + box-sizing: border-box; + } + + button { + width: 100%; + height: 100%; + font-family: "winReg"; + font-weight: bold; + font-size: 8px; + font-weight: 500; + padding: 5px 5px; + } + /* below this line is CSS for the layout */ + + /* this is a CSS comment +to uncomment a line of CSS, remove the * and the / +before and after the text */ + +.guestBook{ + width: 100%; + +} + +.guestBook p{ + font-size: 16px; +} + +.guestBook img{ + display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 10px; +} + +.guestBook u{ + text-decoration: underline; +} + +.iframeWrapper{ + padding: 0; + overflow: hidden; + width: 100%; +} + +.guestBook iframe{ + + width: 100%; + height: 1000px; + +} + /* the "container" is what wraps your entire website */ + /* if you want something (like the header) to be Wider than +the other elements, you will need to move that div outside +of the container */ + #container { + max-width: 960px; + /* this is the width of your layout! */ + /* if you change the above value, scroll to the bottom +and change the media query according to the comment! */ + margin: 0 auto; + /* padding-top: 50px; */ + /* this centers the entire page */ + } + + /* the area below is for all links on your page +EXCEPT for the navigation */ + #container a { + /* color: #C84B31; */ + /* font-weight: bold; */ + /* color: #49adff; */ + color:#fe6161; + text-shadow: 0px 0px 3px #ff4c4c; + /* if you want to remove the underline +you can add a line below here that says: +text-decoration:none; */ + } + #container a[target=_blank] { + padding-right: 0.9em; + background-image: url("/images/icons/external.png"); + background-size: auto 0.9em; + background-position: center right; + background-repeat: no-repeat; + padding-top: 2px; + text-shadow:none; + filter: drop-shadow(0px 0px 3px #ff4c4c) + + } + + .icon{ + width: 25px; + } + .asciiArt{ + /* all: initial; */ + line-height: 1.2; + width: 100%; + height: 150px; + background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png'); + /* background-color: #282828; */ + background-color: #301A16; + /* background-color: #4d1d24; */ + background-repeat: no-repeat; + background-size: 100% 100%; + text-align: center; + opacity: 1; + transition: opacity 10ms ease 2000ms; + + + + /* background: linear-gradient(90deg,#ff000013,#00ff0011,#0000ff13); */ + /* z-index: 2; + background-size: 100% 2px, 3px 100%; + pointer-events: none; */ + + + /* background-color: rgba(0, 0, 0, 0.65); */ + text-shadow: 3px 3px 16px #FF0000; + /* text-shadow: 0px 0px 16px #ff8000; */ + + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + white-space: pre; + font-family: asciiFont; + font-size: 17px; + font-weight: bold; + -webkit-font-smoothing: antialiased; + /* padding-top:10px ; */ + padding-bottom:10px ; + color: #f9bc60; + /* color: #f9bc60; */ + border: 3px #BEBEBE inset; + /* border-right: 2px solid gray; + border-left: 2px solid gray; */ + + } + .headerContainer{ + margin-bottom: 20px; + } + #header { + width: 100%; + /* background-color: #5e4e8c; */ + /* header color here! */ + height: 150px; + /* this is only for a background image! */ + /* if you want to put images IN the header, +you can add them directly to the element! */ + background-image: var(--header-image); + background-size: 100%; + } + + /* navigation section!! */ + #navbar { + /* height: 100%; */ + /* padding-bottom: 50px; */ + /* margin-bottom: 10px; */ + /* background-color: #13092D; */ + /* navbar color */ + width: 100%; + vertical-align: center; + + } + + #navbar ul { + display: flex; + flex-direction: row; + border: 3px solid #bebebe; + padding: 0; + margin: 0; + list-style-type: none; + justify-content: space-between; + vertical-align: bottom !important; + /* vertical-align: middle; */ + } + + #navbar li { + /* padding: 5px 5px; */ + border: 2px solid #bebebe; + background-color: #047e7e; + border-bottom:none; + border-top: none; + /* color: white; */ + /* border-top-right-radius: 12px; + border-top-left-radius: 12px; */ + /* border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; */ + + width: 100%; + flex-direction: row; + + text-align: center; + margin:auto 0; + + } + + .right-box{ + width: 210px; + /* background-color: #15223857; */ + /* background-color: #152238; */ + margin-left: 20px; + } + .TOCnav{ + width:200px; + + /* position: relative; */ + } + .fixed + { + + position: -webkit-sticky; + position: sticky; + top: 20px; + /* top: 20px; */ + } + .left-box{ + width: 100%; + } + + + + /* navigation links*/ + #navbar li a { + color: #ffffff; + font-size: large; + margin:0px; + /* navbar text color */ + font-weight: 800; + text-decoration: none; + vertical-align: middle; + /* this removes the underline */ + } + + /* navigation link when a link is hovered over */ + #navbar li a:hover { + color: #a49cba; + text-decoration: underline; + } + + #flex { + display: flex; + + } + .title-bar{ + font-family: 'win98'; + font-size:small; + } + + .window{ + margin-bottom: 10px; + /* background: transparent; */ + } + .window-body{ + /* font-family: 'win98'; */ + border: 3px inset; + font-family: IBM; + line-height: 1.5; + padding: 0px; + margin: 0px; + + /* background-color: #000055a6; */ + } + + .welcomeBox{ + all:initial; + font-family: IBM; + + /* font-family: 'Open Sans', sans-serif; */ + /* font-size: 1em; */ + font-weight: 500; + line-height: 1.5; + color: white; + display: flex; + flex-wrap: wrap; + } + .welcomeBox h3{ + margin-bottom: -5px; + margin-top: 15px; + } + .welcomeBox main{ + order: 1; + /* width: 60%; */ + /* display:inline; */ + /* float:left; */ + } + .welcomeBox figure{ + order: 2; + height:100%; + margin: auto; + padding-right: 40px; + padding-left: 10px; + text-align: center; + } + .welcomeBox figcaption{ + font-size: 12px; + + } + .updatesBox{ + font-size: 16px; + height: 465px; + overflow-y: scroll; + } + .updatesBox ul{ + padding-left: 15px; + margin-top: 0px; + font-size: 14px; + } + + .updatesBox p{ + margin-bottom: 0px; + } + + + ul.tree-view{ + background-color: inherit; + box-shadow: none; + } + ul.tree-view ul{ + margin-left: 0px; + } + ul.tree-view ul>li:last-child:after{ + background-color: inherit; + } + ul.tree-view li, ul.tree-view ul{ + margin-top: 5px; + line-height: 1.5; + } + + + summary a * { + pointer-events: none; + } + /* this colors BOTH sidebars +if you want to style them separately, +create styles for #leftSidebar and #rightSidebar */ + aside { + +padding: 10px; + + + } + + + .aboutMe, .aboutPage{ + width: 50%; + } + /* .tocNavigation{ + max-height: 200px; + } */ + + + /* this is the color of the main content area, +between the sidebars! */ + main { + /* background-color: #2a2a2a; */ + /* background-color: #00003e; */ + + flex: 1; + padding-left: 30px; + padding-right: 30px; + order: 2; + /* border: #383838 3px solid; */ + /* border-radius: 4px; */ + + /* width: 600px; */ + } + .main-right{ + background-color: #1522387b; + -webkit-backdrop-filter: blur(64px); + backdrop-filter: blur(64px); + + } + .main-left{ + /* background-color: rgba(0, 0, 0, 0.45); */ + /* background-color: rgba(40, 40, 40, 0.555); */ + background-color: rgba(40, 40, 40, .7); + -webkit-backdrop-filter: blur(64px); + backdrop-filter: blur(64px); + /* backdrop-filter: grayscale(80%); */ + } + h4{ + display: inline; + vertical-align: middle; + font-size: large; + /* padding-left: 5px; */ + } + + /* Project card styles*/ + .projectTagRow { + /* position: absolute; */ + bottom: 5px; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 5px; + + } + + .projectTagRowTitle{ + bottom: 5px; + padding-top: 0px; + padding-bottom: 5px; + + } +.projectImgContainer{ + max-width: 290px; + position: relative; + text-align: center; +} + +.project-list .window.main-left{ + margin-bottom:0px; +} + .topProjectTag { + position: absolute; + top: 0px; + left: 0px; + padding: 8px 10px; + /* border-right: 2px solid #bebebe; + border-bottom: 2px solid #bebebe; */ + + } + + .showcaseTag{ + background-color: #047e00; + } + .DIYtag{ + background-color: #7e007e; + } + .contentFilter{ + width: 100px; + } + + .contentTag { + + /* border-radius: 4px; */ + /* background-color: #7e0000; */ + background-color: grey; + /* border: 2px solid rgb(167, 167, 167); */ + /* box-shadow: 0px 0px 8px #FF0000; */ + font-size: 12px; + font-weight: bold; + margin-right: 3px; + padding: 2px 5px; + font-family: 'Win98'; + /* text-decoration: none; */ + text-transform: uppercase; + } + .All-Projects{ + border:3px dashed white; + } + + .Raspberry-Pi{ + background-color: #c10060; + box-shadow: 0px 0px 8px #c10060; + } + + .Arduino{ + background-color: #008080 ; + box-shadow: 0px 0px 8px #008080; + } + .Astronomy{ + background-color: #3859b3; + box-shadow: 0px 0px 8px #3859b3; + } + .Clock{ + background-color: #c878af ; + box-shadow: 0px 0px 8px #c878af; + } + .Tool\/Utility{ + background-color: #dab163 ; + box-shadow: 0px 0px 8px #dab163 ; + } + .pico-8{ + background-color: #b33831 ; + box-shadow: 0px 0px 8px #b33831 ; + } + .Halloween{ + background-color: #ea4f36; + box-shadow: 0px 0px 8px #ea4f36; + } + .OSHWA-Certified{ + background-color: #006554 ; + box-shadow: 0px 0px 8px #006554 ; + } + .Custom-PCB{ + background-color: #8c78a5; + box-shadow: 0px 0px 8px #8c78a5; + } + .Quantum-Comp{ + background-color: #5ab552; + box-shadow: 0px 0px 8px #5ab552; + } + .Woodworking{ + background-color: #9e4539; + box-shadow: 0px 0px 8px #9e4539; + } + .Open-CV{ + background-color: #0b8a46 ; + box-shadow: 0px 0px 8px #0b8a46; + } + .Game{ + background-color: #62a477 ; + box-shadow: 0px 0px 8px #62a477 ; + } + .IOT{ + background-color: #b0a7b8; + box-shadow: 0px 0px 8px #b0a7b8; + } + .project-card{ + /* border: 2px solid #bebebe; */ + background-color: transparent; + /* color:black; */ + /* background-color: rgba(255, 255, 255, 0.055); */ + box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px; + /* padding-bottom:10px; */ + /* margin-bottom: 10px; */ + /* border: 2px solid #bebebe; */ + /* border-style: double; */ + } + + .tagBox{ + text-align: center; + padding: 10px; + line-height: 25px; + /* font-size: 15px; */ + } + .tagBox .contentTag{ + font-size: 13px; + } + .tagBox button{ + all:initial; + width: auto; + background: none; + border:none; + box-shadow: none; + color:white; + padding: 0; + + } + + .project-card:hover{ + /* background-color: #d27f26; */ + + } + .project-list a:link{ + text-decoration: none !important; + + } + .galleryContainer a{ + color:white !important; + text-shadow: none !important; + } + .projectCardTitle{ + padding-left: 10px; + } + .galleryContainer{ + /* padding-top: 20px; */ + } + .projectImage{ + /* max-width: 288px !important; */ + width: 100%; + margin-bottom:-5px; + /* border: 5px splid white; */ + } + + .blogImageSmall{ + width: 100%; + } + .project-list{ + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 25px; + margin: 0px; + } + + ol { + padding-left:30px; + } + /* what's this "order" stuff about?? +allow me to explain! +if you're using both sidebars, the "order" value +tells the CSS the order in which to display them. +left sidebar is 1, content is 2, and right sidebar is 3! */ + + */ #leftSidebar { + order: 1; + } + + #rightSidebar { + order: 3; + + /* background-color: #152238; */ + } + /* iframe { + font-family: win98 !important; + + } */ + + footer { + /* background-color: #6d40dd; */ + /* background color for footer */ + width: 100%; + /* height: 40px; */ + margin-top: 20px; + padding: 10px; + text-align: center; + /* this centers the footer text */ + } + + h1, + h2, + h3 + { + /* color: #49adff; */ + text-shadow: 1px 1px 4px #ff8000; + color:#f9bc60; + } + + /* h1 { + font-size: 25px; + } */ + p { + /* margin-top: 0; */ + margin-bottom: 1rem; + /* font-size: medium; + color: white; + line-height: 1.5; */ + } + strong { + /* this styles bold text */ + /* color: #06ffff; */ + /* color:#97a6f0; */ + /* color:#FFA500; */ + text-shadow: 1px 1px 4px #ff8000; + color:#f9bc60; + } + + /* this is just a cool box, it's the darker colored one */ + .box { + background-color: #13092D; + border: 1px solid #ED64F5; + padding: 10px; + } + .bottomWindowUpdates{ + width: 50%; + float: left; + + } + .bottomWindowStatus{ + width: 48%; + float: left; + } + + .activityBox small{ + font-size: 10px; + font-family: winReg; + margin-left: -5px; + } + + .activityBox legend { + background: transparent; + font-size: smaller; + padding: 0px 10px 0px 10px; + /* border-top: 2px solid; */ + /* border-bottom: 2px solid; */ + /* all:unset; */ + margin:0 auto; + } + + .activityBox legend strong{ + + /* font-size: 22px; */ + /* color: ; */ + /* all:unset; */ + /* margin:0 auto; */ + } + + .movieBox{ + /* border: 2px white inset; */ + padding-left: 5px; + padding-right: 5px; + margin: 5px; + /* width: 100%; */ + + /* background-color: rgb(61, 61, 61); */ + } + + .statusBox{ + width: 100%; + border: 2px inset; + background-color: rgb(40, 40, 40); + margin-left: 3px; + margin-right: 3px; + + } + + .booklog, .gamelog{ + padding:10px 20px 10px 20px ; + text-align: center; + + } + + .booklog p, .gamelog p{ + + display:none; + + + } + + + + .movieLog{ + border: 2px inset; + background-color: rgb(40, 40, 40); + } + .statusContainer{ + display: flex; + padding-left: 2px; + padding-right: 2px; + margin: 5px; + } + + .subtitle{ + background-color: #828282; + font-size: 14px; + border: 2px inset; + } + + .movieBox legend { + background: transparent; + font-size: smaller; + padding: 0px 10px 0px 10px; + /* border-top: 2px solid; */ + /* border-bottom: 2px solid; */ + /* all:unset; */ + /* margin:0 auto; */ + } + + #statuscafe { + padding: 0px 5px 10px 5px; + + font-size: small; + background-color: none; + /* border: 1px solid midnightblue; */ + } + #statuscafe-username { + font-size: 11px; + /* margin-bottom: .5em; */ + } + + #statuscafe-username a{ + font-size: 14px; + /* margin-bottom: .5em; */ + } + + #statuscafe-content { + padding-left:8px ; + /* margin: 0 1em 0.5em 1em; */ + } + + .postCollection{ + order:1; + width: 100%; + + } + + .postCollection a{ + text-decoration: none; + color: white; + } + .cardWrapper{ + display: flex; + height: 200px; + } + + .blogImage{ + /* padding: 20px; */ + /* float: left; */ + width: 267px; + /* height: 200px; */ + } + + .blogSummary{ + flex: 1; + height: 150px; + overflow: hidden; + color: white; + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 10px; + text-shadow: none; + text-overflow: ellipsis; + } +.categoryBox{ + order:2; +} + .categoryBox a{ + font-size: medium; + } + + .categoryBox ul{ + padding-left: 25px; + } + + .blogSummary .dateString{ + font-size: 12px; + font-family: -apple-system, -apple-system, + BlinkMacSystemFont, 'Segoe UI', Roboto, + Oxygen, Ubuntu, Cantarell, 'Open Sans', + 'Helvetica Neue', sans-serif; + } + + .blogSummary h4{ + + padding-left: 0px; + font-size: 1.5rem; + color:#f9bc60; + text-shadow: 1px 1px 4px #ff8000; + line-height: 1.2; + + } + + .blogTextContainer > button{ + font-size: 12px; + width: initial; + padding: 5px 5px; + margin-left: 20px; + margin-top: 10px; + /* display: inline; */ + /* margin-top: 10px; */ + vertical-align: middle; + /* margin-right: 5px; */ + height: initial; + bottom: 5px; + /* float: right; */ + /* padding: 1px 2px; */ + /* all:initial; */ + } + .blogTextContainer{ + flex: 1; + } + + .blogSummary .dateSection{ + margin-top: 0px; + color: #A3A3A3 !important; + } + + .summaryText{ + height: auto; + overflow: hidden; + font-family: -apple-system, -apple-system, + BlinkMacSystemFont, 'Segoe UI', Roboto, + Oxygen, Ubuntu, Cantarell, 'Open Sans', + 'Helvetica Neue', sans-serif; + /* white-space: nowrap; */ + text-overflow: ellipsis; + font-size: 15px; + } + + /* CSS for extras */ + + #topBar { + width: 100%; + height: 30px; + padding: 10px; + /* font-size: smaller; */ + background-color: #13092D; + } + .cactus-container{ + position: relative; + max-width: 780px; + } + + + /* #navbar li.active{ + background-color:#00cece; + + } */ + button.active { + box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, + inset -2px -2px #dfdfdf, inset 2px 2px #808080; + } + + .commentWrapper{ + width: 775px; + background-color: rgba(0, 0, 0, 0.415); + -webkit-backdrop-filter: blur(16px); + backdrop-filter: blur(16px); + font-size: 17px; + + } + .commentWrapper main { + padding-top: 10px; +} + + + +.cactus-editor-buttons .cactus-button{ +background: none !important; +box-shadow: none !important; +/* width: auto; */ +} + +.cactus-editor-buttons .cactus-send-button{ + background: silver !important; + color: black; + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf !important; + width: auto; + } + + .cactus-editor-buttons .cactus-button:after{ + content: "‎ (Optional)"; + } + + .cactus-editor-buttons .cactus-send-button:after{ + content: "‎ Comment"; + } +.cactus-editor-name input[type="text"]{ + height: 40px !important; +} + + + + +.activate a{ + color:white !important; +} + +.rssFeed{ + display: flex; +} + +.rssFeed img{ + width: 100%; +} + +.rssFeed div{ +flex: 33%; +padding: 8px; +} +.booklog .rssFeed div, .gamelog .rssFeed div{ + padding: 0px; +} + +.rssFeed p{ + margin: 0px; + text-align: center; +} + +.window.main-left.bottomWindowStatus{ + margin-left: 7px; +} + + + /* BELOW THIS POINT IS MEDIA QUERY */ + + /* so you wanna change the width of your page? +by default, the container width is 900px. +in order to keep things responsive, take your new height, +and then subtrack it by 100. use this new number as the +"max-width" value below +*/ + + @media only screen and (max-width: 800px) { + #flex { + flex-wrap: wrap; + } + .left-box{ + width: 100%; + /* padding: 10px 5px 0px 5px; */ + + } + + + .headerContainer{ + margin-bottom: 10px; + } + + .project .left-box{ + padding:0; + } + .project{ + font-size: 16px; + } + .window{ + width: 100%; + margin-left: 0px; + } + + .homeContainer .window{ + padding: 3px; + + } + + .homeContainer .left-box{ + + padding: 0px 8px 0px 8px; + + } + + .projectContainer .window{ + width: 100%; + margin-left: 0px; + padding: 3px 0px 0px 0px; + + } + #moon{ + display: none; + } + #visitorCount{ + display:none; + } + .categoryBox{ + order:1; + width: 100%; + text-align: center; + display: none; + /* margin-top: 10px; */ + + } + + + + .categoryBox li{ + /* list-style-type: none; */ + display: inline; + white-space:nowrap; + padding-left: 5px; + } + .categoryBox ul{ + /* list-style-type: none; */ + display: inline; + padding: 10px; + + } + .postCollection{ + order:2; + } + .right-box{ + width:210px; + margin-left: auto; + margin-right: auto; + } + + .window.main-left.bottomWindowStatus{ + margin-left: 0px; + } + + aside { + width: 100%; + } + + + main { + order: 1; + padding-left: 15px; + padding-right: 15px; + } + + .welcomeBox figure{ + padding:0px 0px 15px 0px; + width: 100%; + } + + #leftSidebar { + order: 2; + } + + #rightSidebar { + order: 3; + } + + #navbar h4 { + font-size: 13px; + padding: 0px; + } + + #navbar img{ + margin: 0px 5px 0px 5px; + /* margin: 0 auto; */ + } + + #headerArea{ + width: 100%; + } + #navbar button{ + min-width: 30px; + + } + + .asciiArt{ + font-size: 8px; + height: 80px; + padding: 0; + display: none; + } + + .project-list{ + width: 90%; + margin: auto; + } + .projectImgContainer{ + width: 100%; + max-width: none; + + } + /* Blog Section */ + + .blogImage{ + display: none; + width: 150px; + } + #readMore{ + /* display: none; */ + margin-bottom: 10px; + /* margin-left: auto; */ + /* margin-right: 10px; */ + } + h4.blogCardTitle{ + font-size: 1.4rem; + } + + .blogSummary{ + height: 190px; + } + .cardWrapper{ + height: auto; + } + .summaryText{ + /* display: none; */ + } + + .guestBook iframe{ + width: 130vw; + /* overflow: hidden; */ + -ms-zoom: 0.75; + -moz-transform: scale(0.75); + -moz-transform-origin: 0 0; + -o-transform: scale(0.75); + -o-transform-origin: 0 0; + -webkit-transform: scale(0.75); + -webkit-transform-origin: 0 0; + + } + + /* :root{ + --theme-3: url('/images/carpet.JPG'); + } */ + } + + @media only screen and (max-width: 400px) { + + .asciiArt{ + font-size: 6.5px; + height: 65px; + padding: 0; + } + } \ No newline at end of file diff --git a/public/figlet.js b/public/figlet.js new file mode 100644 index 0000000..6a7e44b --- /dev/null +++ b/public/figlet.js @@ -0,0 +1,1479 @@ +/* + FIGlet.js (a FIGDriver for FIGlet fonts) + Written by https://github.com/patorjk/figlet.js/graphs/contributors + Originally Written For: http://patorjk.com/software/taag/ + License: MIT (with this header staying intact) + + This JavaScript code aims to fully implement the FIGlet spec. + Full FIGlet spec: http://patorjk.com/software/taag/docs/figfont.txt + + FIGlet fonts are actually kind of complex, which is why you will see + a lot of code about parsing and interpreting rules. The actual generation + code is pretty simple and is done near the bottom of the code. +*/ + +"use strict"; + +const figlet = (() => { + // --------------------------------------------------------------------- + // Private static variables + + const FULL_WIDTH = 0, + FITTING = 1, + SMUSHING = 2, + CONTROLLED_SMUSHING = 3; + + // --------------------------------------------------------------------- + // Variable that will hold information about the fonts + + const figFonts = {}; // What stores all of the FIGlet font data + const figDefaults = { + font: "Standard", + fontPath: "./fonts", + }; + + // --------------------------------------------------------------------- + // Private static methods + + /* + This method takes in the oldLayout and newLayout data from the FIGfont header file and returns + the layout information. + */ + function getSmushingRules(oldLayout, newLayout) { + let rules = {}; + let val, index, len, code; + let codes = [ + [16384, "vLayout", SMUSHING], + [8192, "vLayout", FITTING], + [4096, "vRule5", true], + [2048, "vRule4", true], + [1024, "vRule3", true], + [512, "vRule2", true], + [256, "vRule1", true], + [128, "hLayout", SMUSHING], + [64, "hLayout", FITTING], + [32, "hRule6", true], + [16, "hRule5", true], + [8, "hRule4", true], + [4, "hRule3", true], + [2, "hRule2", true], + [1, "hRule1", true], + ]; + + val = newLayout !== null ? newLayout : oldLayout; + index = 0; + len = codes.length; + while (index < len) { + code = codes[index]; + if (val >= code[0]) { + val = val - code[0]; + rules[code[1]] = + typeof rules[code[1]] === "undefined" ? code[2] : rules[code[1]]; + } else if (code[1] !== "vLayout" && code[1] !== "hLayout") { + rules[code[1]] = false; + } + index++; + } + + if (typeof rules["hLayout"] === "undefined") { + if (oldLayout === 0) { + rules["hLayout"] = FITTING; + } else if (oldLayout === -1) { + rules["hLayout"] = FULL_WIDTH; + } else { + if ( + rules["hRule1"] || + rules["hRule2"] || + rules["hRule3"] || + rules["hRule4"] || + rules["hRule5"] || + rules["hRule6"] + ) { + rules["hLayout"] = CONTROLLED_SMUSHING; + } else { + rules["hLayout"] = SMUSHING; + } + } + } else if (rules["hLayout"] === SMUSHING) { + if ( + rules["hRule1"] || + rules["hRule2"] || + rules["hRule3"] || + rules["hRule4"] || + rules["hRule5"] || + rules["hRule6"] + ) { + rules["hLayout"] = CONTROLLED_SMUSHING; + } + } + + if (typeof rules["vLayout"] === "undefined") { + if ( + rules["vRule1"] || + rules["vRule2"] || + rules["vRule3"] || + rules["vRule4"] || + rules["vRule5"] + ) { + rules["vLayout"] = CONTROLLED_SMUSHING; + } else { + rules["vLayout"] = FULL_WIDTH; + } + } else if (rules["vLayout"] === SMUSHING) { + if ( + rules["vRule1"] || + rules["vRule2"] || + rules["vRule3"] || + rules["vRule4"] || + rules["vRule5"] + ) { + rules["vLayout"] = CONTROLLED_SMUSHING; + } + } + + return rules; + } + + /* The [vh]Rule[1-6]_Smush functions return the smushed character OR false if the two characters can't be smushed */ + + /* + Rule 1: EQUAL CHARACTER SMUSHING (code value 1) + + Two sub-characters are smushed into a single sub-character + if they are the same. This rule does not smush + hardblanks. (See rule 6 on hardblanks below) + */ + function hRule1_Smush(ch1, ch2, hardBlank) { + if (ch1 === ch2 && ch1 !== hardBlank) { + return ch1; + } + return false; + } + + /* + Rule 2: UNDERSCORE SMUSHING (code value 2) + + An underscore ("_") will be replaced by any of: "|", "/", + "\", "[", "]", "{", "}", "(", ")", "<" or ">". + */ + function hRule2_Smush(ch1, ch2) { + let rule2Str = "|/\\[]{}()<>"; + if (ch1 === "_") { + if (rule2Str.indexOf(ch2) !== -1) { + return ch2; + } + } else if (ch2 === "_") { + if (rule2Str.indexOf(ch1) !== -1) { + return ch1; + } + } + return false; + } + + /* + Rule 3: HIERARCHY SMUSHING (code value 4) + + A hierarchy of six classes is used: "|", "/\", "[]", "{}", + "()", and "<>". When two smushing sub-characters are + from different classes, the one from the latter class + will be used. + */ + function hRule3_Smush(ch1, ch2) { + let rule3Classes = "| /\\ [] {} () <>"; + let r3_pos1 = rule3Classes.indexOf(ch1); + let r3_pos2 = rule3Classes.indexOf(ch2); + if (r3_pos1 !== -1 && r3_pos2 !== -1) { + if (r3_pos1 !== r3_pos2 && Math.abs(r3_pos1 - r3_pos2) !== 1) { + const startPos = Math.max(r3_pos1, r3_pos2); + const endPos = startPos + 1; + return rule3Classes.substring(startPos, endPos); + } + } + return false; + } + + /* + Rule 4: OPPOSITE PAIR SMUSHING (code value 8) + + Smushes opposing brackets ("[]" or "]["), braces ("{}" or + "}{") and parentheses ("()" or ")(") together, replacing + any such pair with a vertical bar ("|"). + */ + function hRule4_Smush(ch1, ch2) { + let rule4Str = "[] {} ()"; + let r4_pos1 = rule4Str.indexOf(ch1); + let r4_pos2 = rule4Str.indexOf(ch2); + if (r4_pos1 !== -1 && r4_pos2 !== -1) { + if (Math.abs(r4_pos1 - r4_pos2) <= 1) { + return "|"; + } + } + return false; + } + + /* + Rule 5: BIG X SMUSHING (code value 16) + + Smushes "/\" into "|", "\/" into "Y", and "><" into "X". + Note that "<>" is not smushed in any way by this rule. + The name "BIG X" is historical; originally all three pairs + were smushed into "X". + */ + function hRule5_Smush(ch1, ch2) { + let rule5Str = "/\\ \\/ ><"; + let rule5Hash = { 0: "|", 3: "Y", 6: "X" }; + let r5_pos1 = rule5Str.indexOf(ch1); + let r5_pos2 = rule5Str.indexOf(ch2); + if (r5_pos1 !== -1 && r5_pos2 !== -1) { + if (r5_pos2 - r5_pos1 === 1) { + return rule5Hash[r5_pos1]; + } + } + return false; + } + + /* + Rule 6: HARDBLANK SMUSHING (code value 32) + + Smushes two hardblanks together, replacing them with a + single hardblank. (See "Hardblanks" below.) + */ + function hRule6_Smush(ch1, ch2, hardBlank) { + if (ch1 === hardBlank && ch2 === hardBlank) { + return hardBlank; + } + return false; + } + + /* + Rule 1: EQUAL CHARACTER SMUSHING (code value 256) + + Same as horizontal smushing rule 1. + */ + function vRule1_Smush(ch1, ch2) { + if (ch1 === ch2) { + return ch1; + } + return false; + } + + /* + Rule 2: UNDERSCORE SMUSHING (code value 512) + + Same as horizontal smushing rule 2. + */ + function vRule2_Smush(ch1, ch2) { + let rule2Str = "|/\\[]{}()<>"; + if (ch1 === "_") { + if (rule2Str.indexOf(ch2) !== -1) { + return ch2; + } + } else if (ch2 === "_") { + if (rule2Str.indexOf(ch1) !== -1) { + return ch1; + } + } + return false; + } + + /* + Rule 3: HIERARCHY SMUSHING (code value 1024) + + Same as horizontal smushing rule 3. + */ + function vRule3_Smush(ch1, ch2) { + let rule3Classes = "| /\\ [] {} () <>"; + let r3_pos1 = rule3Classes.indexOf(ch1); + let r3_pos2 = rule3Classes.indexOf(ch2); + if (r3_pos1 !== -1 && r3_pos2 !== -1) { + if (r3_pos1 !== r3_pos2 && Math.abs(r3_pos1 - r3_pos2) !== 1) { + const startPos = Math.max(r3_pos1, r3_pos2); + const endPos = startPos + 1; + return rule3Classes.substring(startPos, endPos); + } + } + return false; + } + + /* + Rule 4: HORIZONTAL LINE SMUSHING (code value 2048) + + Smushes stacked pairs of "-" and "_", replacing them with + a single "=" sub-character. It does not matter which is + found above the other. Note that vertical smushing rule 1 + will smush IDENTICAL pairs of horizontal lines, while this + rule smushes horizontal lines consisting of DIFFERENT + sub-characters. + */ + function vRule4_Smush(ch1, ch2) { + if ((ch1 === "-" && ch2 === "_") || (ch1 === "_" && ch2 === "-")) { + return "="; + } + return false; + } + + /* + Rule 5: VERTICAL LINE SUPERSMUSHING (code value 4096) + + This one rule is different from all others, in that it + "supersmushes" vertical lines consisting of several + vertical bars ("|"). This creates the illusion that + FIGcharacters have slid vertically against each other. + Supersmushing continues until any sub-characters other + than "|" would have to be smushed. Supersmushing can + produce impressive results, but it is seldom possible, + since other sub-characters would usually have to be + considered for smushing as soon as any such stacked + vertical lines are encountered. + */ + function vRule5_Smush(ch1, ch2) { + if (ch1 === "|" && ch2 === "|") { + return "|"; + } + return false; + } + + /* + Universal smushing simply overrides the sub-character from the + earlier FIGcharacter with the sub-character from the later + FIGcharacter. This produces an "overlapping" effect with some + FIGfonts, wherin the latter FIGcharacter may appear to be "in + front". + */ + function uni_Smush(ch1, ch2, hardBlank) { + if (ch2 === " " || ch2 === "") { + return ch1; + } else if (ch2 === hardBlank && ch1 !== " ") { + return ch1; + } else { + return ch2; + } + } + + // -------------------------------------------------------------------------- + // main vertical smush routines (excluding rules) + + /* + txt1 - A line of text + txt2 - A line of text + opts - FIGlet options array + + About: Takes in two lines of text and returns one of the following: + "valid" - These lines can be smushed together given the current smushing rules + "end" - The lines can be smushed, but we're at a stopping point + "invalid" - The two lines cannot be smushed together + */ + function canVerticalSmush(txt1, txt2, opts) { + if (opts.fittingRules.vLayout === FULL_WIDTH) { + return "invalid"; + } + let ii, + len = Math.min(txt1.length, txt2.length), + ch1, + ch2, + endSmush = false, + validSmush; + if (len === 0) { + return "invalid"; + } + + for (ii = 0; ii < len; ii++) { + ch1 = txt1.substring(ii, ii + 1); + ch2 = txt2.substring(ii, ii + 1); + if (ch1 !== " " && ch2 !== " ") { + if (opts.fittingRules.vLayout === FITTING) { + return "invalid"; + } else if (opts.fittingRules.vLayout === SMUSHING) { + return "end"; + } else { + if (vRule5_Smush(ch1, ch2)) { + endSmush = endSmush || false; + continue; + } // rule 5 allow for "super" smushing, but only if we're not already ending this smush + validSmush = false; + validSmush = opts.fittingRules.vRule1 + ? vRule1_Smush(ch1, ch2) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.vRule2 + ? vRule2_Smush(ch1, ch2) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.vRule3 + ? vRule3_Smush(ch1, ch2) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.vRule4 + ? vRule4_Smush(ch1, ch2) + : validSmush; + endSmush = true; + if (!validSmush) { + return "invalid"; + } + } + } + } + if (endSmush) { + return "end"; + } else { + return "valid"; + } + } + + function getVerticalSmushDist(lines1, lines2, opts) { + let maxDist = lines1.length; + let len1 = lines1.length; + let len2 = lines2.length; + let subLines1, subLines2, slen; + let curDist = 1; + let ii, ret, result; + while (curDist <= maxDist) { + subLines1 = lines1.slice(Math.max(0, len1 - curDist), len1); + subLines2 = lines2.slice(0, Math.min(maxDist, curDist)); + + slen = subLines2.length; //TODO:check this + result = ""; + for (ii = 0; ii < slen; ii++) { + ret = canVerticalSmush(subLines1[ii], subLines2[ii], opts); + if (ret === "end") { + result = ret; + } else if (ret === "invalid") { + result = ret; + break; + } else { + if (result === "") { + result = "valid"; + } + } + } + + if (result === "invalid") { + curDist--; + break; + } + if (result === "end") { + break; + } + if (result === "valid") { + curDist++; + } + } + + return Math.min(maxDist, curDist); + } + + function verticallySmushLines(line1, line2, opts) { + let ii, + len = Math.min(line1.length, line2.length); + let ch1, + ch2, + result = "", + validSmush; + + for (ii = 0; ii < len; ii++) { + ch1 = line1.substring(ii, ii + 1); + ch2 = line2.substring(ii, ii + 1); + if (ch1 !== " " && ch2 !== " ") { + if (opts.fittingRules.vLayout === FITTING) { + result += uni_Smush(ch1, ch2); + } else if (opts.fittingRules.vLayout === SMUSHING) { + result += uni_Smush(ch1, ch2); + } else { + validSmush = false; + validSmush = opts.fittingRules.vRule5 + ? vRule5_Smush(ch1, ch2) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.vRule1 + ? vRule1_Smush(ch1, ch2) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.vRule2 + ? vRule2_Smush(ch1, ch2) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.vRule3 + ? vRule3_Smush(ch1, ch2) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.vRule4 + ? vRule4_Smush(ch1, ch2) + : validSmush; + result += validSmush; + } + } else { + result += uni_Smush(ch1, ch2); + } + } + return result; + } + + function verticalSmush(lines1, lines2, overlap, opts) { + let len1 = lines1.length; + let len2 = lines2.length; + let piece1 = lines1.slice(0, Math.max(0, len1 - overlap)); + let piece2_1 = lines1.slice(Math.max(0, len1 - overlap), len1); + let piece2_2 = lines2.slice(0, Math.min(overlap, len2)); + let ii, + len, + line, + piece2 = [], + piece3, + result = []; + + len = piece2_1.length; + for (ii = 0; ii < len; ii++) { + if (ii >= len2) { + line = piece2_1[ii]; + } else { + line = verticallySmushLines(piece2_1[ii], piece2_2[ii], opts); + } + piece2.push(line); + } + + piece3 = lines2.slice(Math.min(overlap, len2), len2); + + return result.concat(piece1, piece2, piece3); + } + + function padLines(lines, numSpaces) { + let ii, + len = lines.length, + padding = ""; + for (ii = 0; ii < numSpaces; ii++) { + padding += " "; + } + for (ii = 0; ii < len; ii++) { + lines[ii] += padding; + } + } + + function smushVerticalFigLines(output, lines, opts) { + let len1 = output[0].length; + let len2 = lines[0].length; + let overlap; + if (len1 > len2) { + padLines(lines, len1 - len2); + } else if (len2 > len1) { + padLines(output, len2 - len1); + } + overlap = getVerticalSmushDist(output, lines, opts); + return verticalSmush(output, lines, overlap, opts); + } + + // ------------------------------------------------------------------------- + // Main horizontal smush routines (excluding rules) + + function getHorizontalSmushLength(txt1, txt2, opts) { + if (opts.fittingRules.hLayout === FULL_WIDTH) { + return 0; + } + let ii, + len1 = txt1.length, + len2 = txt2.length; + let maxDist = len1; + let curDist = 1; + let breakAfter = false; + let validSmush = false; + let seg1, seg2, ch1, ch2; + if (len1 === 0) { + return 0; + } + + distCal: while (curDist <= maxDist) { + const seg1StartPos = len1 - curDist; + seg1 = txt1.substring(seg1StartPos, seg1StartPos + curDist); + seg2 = txt2.substring(0, Math.min(curDist, len2)); + for (ii = 0; ii < Math.min(curDist, len2); ii++) { + ch1 = seg1.substring(ii, ii + 1); + ch2 = seg2.substring(ii, ii + 1); + if (ch1 !== " " && ch2 !== " ") { + if (opts.fittingRules.hLayout === FITTING) { + curDist = curDist - 1; + break distCal; + } else if (opts.fittingRules.hLayout === SMUSHING) { + if (ch1 === opts.hardBlank || ch2 === opts.hardBlank) { + curDist = curDist - 1; // universal smushing does not smush hardblanks + } + break distCal; + } else { + breakAfter = true; // we know we need to break, but we need to check if our smushing rules will allow us to smush the overlapped characters + validSmush = false; // the below checks will let us know if we can smush these characters + + validSmush = opts.fittingRules.hRule1 + ? hRule1_Smush(ch1, ch2, opts.hardBlank) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.hRule2 + ? hRule2_Smush(ch1, ch2, opts.hardBlank) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.hRule3 + ? hRule3_Smush(ch1, ch2, opts.hardBlank) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.hRule4 + ? hRule4_Smush(ch1, ch2, opts.hardBlank) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.hRule5 + ? hRule5_Smush(ch1, ch2, opts.hardBlank) + : validSmush; + validSmush = + !validSmush && opts.fittingRules.hRule6 + ? hRule6_Smush(ch1, ch2, opts.hardBlank) + : validSmush; + + if (!validSmush) { + curDist = curDist - 1; + break distCal; + } + } + } + } + if (breakAfter) { + break; + } + curDist++; + } + return Math.min(maxDist, curDist); + } + + function horizontalSmush(textBlock1, textBlock2, overlap, opts) { + let ii, + jj, + outputFig = [], + overlapStart, + piece1, + piece2, + piece3, + len1, + len2, + txt1, + txt2; + + for (ii = 0; ii < opts.height; ii++) { + txt1 = textBlock1[ii]; + txt2 = textBlock2[ii]; + len1 = txt1.length; + len2 = txt2.length; + overlapStart = len1 - overlap; + piece1 = txt1.substr(0, Math.max(0, overlapStart)); + piece2 = ""; + + // determine overlap piece + const seg1StartPos = Math.max(0, len1 - overlap); + var seg1 = txt1.substring(seg1StartPos, seg1StartPos + overlap); + var seg2 = txt2.substring(0, Math.min(overlap, len2)); + + for (jj = 0; jj < overlap; jj++) { + var ch1 = jj < len1 ? seg1.substring(jj, jj + 1) : " "; + var ch2 = jj < len2 ? seg2.substring(jj, jj + 1) : " "; + + if (ch1 !== " " && ch2 !== " ") { + if (opts.fittingRules.hLayout === FITTING) { + piece2 += uni_Smush(ch1, ch2, opts.hardBlank); + } else if (opts.fittingRules.hLayout === SMUSHING) { + piece2 += uni_Smush(ch1, ch2, opts.hardBlank); + } else { + // Controlled Smushing + var nextCh = ""; + nextCh = + !nextCh && opts.fittingRules.hRule1 + ? hRule1_Smush(ch1, ch2, opts.hardBlank) + : nextCh; + nextCh = + !nextCh && opts.fittingRules.hRule2 + ? hRule2_Smush(ch1, ch2, opts.hardBlank) + : nextCh; + nextCh = + !nextCh && opts.fittingRules.hRule3 + ? hRule3_Smush(ch1, ch2, opts.hardBlank) + : nextCh; + nextCh = + !nextCh && opts.fittingRules.hRule4 + ? hRule4_Smush(ch1, ch2, opts.hardBlank) + : nextCh; + nextCh = + !nextCh && opts.fittingRules.hRule5 + ? hRule5_Smush(ch1, ch2, opts.hardBlank) + : nextCh; + nextCh = + !nextCh && opts.fittingRules.hRule6 + ? hRule6_Smush(ch1, ch2, opts.hardBlank) + : nextCh; + nextCh = nextCh || uni_Smush(ch1, ch2, opts.hardBlank); + piece2 += nextCh; + } + } else { + piece2 += uni_Smush(ch1, ch2, opts.hardBlank); + } + } + + if (overlap >= len2) { + piece3 = ""; + } else { + piece3 = txt2.substring(overlap, overlap + Math.max(0, len2 - overlap)); + } + outputFig[ii] = piece1 + piece2 + piece3; + } + return outputFig; + } + + /* + Creates new empty ASCII placeholder of give len + - len - number + */ + function newFigChar(len) { + let outputFigText = [], + row; + for (row = 0; row < len; row++) { + outputFigText[row] = ""; + } + return outputFigText; + } + + /* + Return max line of the ASCII Art + - text is array of lines for text + - char is next character + */ + const figLinesWidth = function (textLines) { + return Math.max.apply( + Math, + textLines.map(function (line, i) { + return line.length; + }) + ); + }; + + /* + join words or single characaters into single Fig line + - array - array of ASCII words or single characters: {fig: array, overlap: number} + - len - height of the Characters (number of rows) + - opt - options object + */ + function joinFigArray(array, len, opts) { + return array.reduce(function (acc, data) { + return horizontalSmush(acc, data.fig, data.overlap, opts); + }, newFigChar(len)); + } + + /* + break long word return leftover characters and line before the break + - figChars - list of single ASCII characters in form {fig, overlap} + - len - number of rows + - opt - options object + */ + function breakWord(figChars, len, opts) { + const result = {}; + for (let i = figChars.length; --i; ) { + let w = joinFigArray(figChars.slice(0, i), len, opts); + if (figLinesWidth(w) <= opts.width) { + result.outputFigText = w; + if (i < figChars.length) { + result.chars = figChars.slice(i); + } else { + result.chars = []; + } + break; + } + } + return result; + } + + function generateFigTextLines(txt, figChars, opts) { + let charIndex, + figChar, + overlap = 0, + row, + outputFigText, + len, + height = opts.height, + outputFigLines = [], + maxWidth, + nextFigChars, + figWords = [], + char, + isSpace, + textFigWord, + textFigLine, + tmpBreak; + + outputFigText = newFigChar(height); + if (opts.width > 0 && opts.whitespaceBreak) { + // list of characters is used to break in the middle of the word when word is logner + // chars is array of characters with {fig, overlap} and overlap is for whole word + nextFigChars = { + chars: [], + overlap: overlap, + }; + } + if (opts.printDirection === 1) { + txt = txt.split("").reverse().join(""); + } + len = txt.length; + for (charIndex = 0; charIndex < len; charIndex++) { + char = txt.substring(charIndex, charIndex + 1); + isSpace = char.match(/\s/); + figChar = figChars[char.charCodeAt(0)]; + textFigLine = null; + if (figChar) { + if (opts.fittingRules.hLayout !== FULL_WIDTH) { + overlap = 10000; // a value too high to be the overlap + for (row = 0; row < opts.height; row++) { + overlap = Math.min( + overlap, + getHorizontalSmushLength(outputFigText[row], figChar[row], opts) + ); + } + overlap = overlap === 10000 ? 0 : overlap; + } + if (opts.width > 0) { + if (opts.whitespaceBreak) { + // next character in last word (figChars have same data as words) + textFigWord = joinFigArray( + nextFigChars.chars.concat([ + { + fig: figChar, + overlap: overlap, + }, + ]), + height, + opts + ); + textFigLine = joinFigArray( + figWords.concat([ + { + fig: textFigWord, + overlap: nextFigChars.overlap, + }, + ]), + height, + opts + ); + maxWidth = figLinesWidth(textFigLine); + } else { + textFigLine = horizontalSmush( + outputFigText, + figChar, + overlap, + opts + ); + maxWidth = figLinesWidth(textFigLine); + } + if (maxWidth >= opts.width && charIndex > 0) { + if (opts.whitespaceBreak) { + outputFigText = joinFigArray(figWords.slice(0, -1), height, opts); + if (figWords.length > 1) { + outputFigLines.push(outputFigText); + outputFigText = newFigChar(height); + } + figWords = []; + } else { + outputFigLines.push(outputFigText); + outputFigText = newFigChar(height); + } + } + } + if (opts.width > 0 && opts.whitespaceBreak) { + if (!isSpace || charIndex === len - 1) { + nextFigChars.chars.push({ fig: figChar, overlap: overlap }); + } + if (isSpace || charIndex === len - 1) { + // break long words + tmpBreak = null; + while (true) { + textFigLine = joinFigArray(nextFigChars.chars, height, opts); + maxWidth = figLinesWidth(textFigLine); + if (maxWidth >= opts.width) { + tmpBreak = breakWord(nextFigChars.chars, height, opts); + nextFigChars = { chars: tmpBreak.chars }; + outputFigLines.push(tmpBreak.outputFigText); + } else { + break; + } + } + // any leftovers + if (maxWidth > 0) { + if (tmpBreak) { + figWords.push({ fig: textFigLine, overlap: 1 }); + } else { + figWords.push({ + fig: textFigLine, + overlap: nextFigChars.overlap, + }); + } + } + // save space character and current overlap for smush in joinFigWords + if (isSpace) { + figWords.push({ fig: figChar, overlap: overlap }); + outputFigText = newFigChar(height); + } + if (charIndex === len - 1) { + // last line + outputFigText = joinFigArray(figWords, height, opts); + } + nextFigChars = { + chars: [], + overlap: overlap, + }; + continue; + } + } + outputFigText = horizontalSmush(outputFigText, figChar, overlap, opts); + } + } + // special case when last line would be empty + // this may happen if text fit exactly opt.width + if (figLinesWidth(outputFigText) > 0) { + outputFigLines.push(outputFigText); + } + // remove hardblanks + if (opts.showHardBlanks !== true) { + outputFigLines.forEach(function (outputFigText) { + len = outputFigText.length; + for (row = 0; row < len; row++) { + outputFigText[row] = outputFigText[row].replace( + new RegExp("\\" + opts.hardBlank, "g"), + " " + ); + } + }); + } + return outputFigLines; + } + + // ------------------------------------------------------------------------- + // Parsing and Generation methods + + const getHorizontalFittingRules = function (layout, options) { + let props = [ + "hLayout", + "hRule1", + "hRule2", + "hRule3", + "hRule4", + "hRule5", + "hRule6", + ], + params = {}, + ii; + if (layout === "default") { + for (ii = 0; ii < props.length; ii++) { + params[props[ii]] = options.fittingRules[props[ii]]; + } + } else if (layout === "full") { + params = { + hLayout: FULL_WIDTH, + hRule1: false, + hRule2: false, + hRule3: false, + hRule4: false, + hRule5: false, + hRule6: false, + }; + } else if (layout === "fitted") { + params = { + hLayout: FITTING, + hRule1: false, + hRule2: false, + hRule3: false, + hRule4: false, + hRule5: false, + hRule6: false, + }; + } else if (layout === "controlled smushing") { + params = { + hLayout: CONTROLLED_SMUSHING, + hRule1: true, + hRule2: true, + hRule3: true, + hRule4: true, + hRule5: true, + hRule6: true, + }; + } else if (layout === "universal smushing") { + params = { + hLayout: SMUSHING, + hRule1: false, + hRule2: false, + hRule3: false, + hRule4: false, + hRule5: false, + hRule6: false, + }; + } else { + return; + } + return params; + }; + + const getVerticalFittingRules = function (layout, options) { + let props = ["vLayout", "vRule1", "vRule2", "vRule3", "vRule4", "vRule5"], + params = {}, + ii; + if (layout === "default") { + for (ii = 0; ii < props.length; ii++) { + params[props[ii]] = options.fittingRules[props[ii]]; + } + } else if (layout === "full") { + params = { + vLayout: FULL_WIDTH, + vRule1: false, + vRule2: false, + vRule3: false, + vRule4: false, + vRule5: false, + }; + } else if (layout === "fitted") { + params = { + vLayout: FITTING, + vRule1: false, + vRule2: false, + vRule3: false, + vRule4: false, + vRule5: false, + }; + } else if (layout === "controlled smushing") { + params = { + vLayout: CONTROLLED_SMUSHING, + vRule1: true, + vRule2: true, + vRule3: true, + vRule4: true, + vRule5: true, + }; + } else if (layout === "universal smushing") { + params = { + vLayout: SMUSHING, + vRule1: false, + vRule2: false, + vRule3: false, + vRule4: false, + vRule5: false, + }; + } else { + return; + } + return params; + }; + + /* + Generates the ASCII Art + - fontName: Font to use + - option: Options to override the defaults + - txt: The text to make into ASCII Art + */ + const generateText = function (fontName, options, txt) { + txt = txt.replace(/\r\n/g, "\n").replace(/\r/g, "\n"); + let lines = txt.split("\n"); + let figLines = []; + let ii, len, output; + len = lines.length; + for (ii = 0; ii < len; ii++) { + figLines = figLines.concat( + generateFigTextLines(lines[ii], figFonts[fontName], options) + ); + } + len = figLines.length; + output = figLines[0]; + for (ii = 1; ii < len; ii++) { + output = smushVerticalFigLines(output, figLines[ii], options); + } + + return output ? output.join("\n") : ""; + }; + + /* + takes assigned options and merges them with the default options from the choosen font + */ + function _reworkFontOpts(fontOpts, options) { + let myOpts = JSON.parse(JSON.stringify(fontOpts)), // make a copy because we may edit this (see below) + params, + prop; + + /* + If the user is chosing to use a specific type of layout (e.g., 'full', 'fitted', etc etc) + Then we need to override the default font options. + */ + if (typeof options.horizontalLayout !== "undefined") { + params = getHorizontalFittingRules(options.horizontalLayout, fontOpts); + for (prop in params) { + if (params.hasOwnProperty(prop)) { + myOpts.fittingRules[prop] = params[prop]; + } + } + } + if (typeof options.verticalLayout !== "undefined") { + params = getVerticalFittingRules(options.verticalLayout, fontOpts); + for (prop in params) { + if (params.hasOwnProperty(prop)) { + myOpts.fittingRules[prop] = params[prop]; + } + } + } + myOpts.printDirection = + typeof options.printDirection !== "undefined" + ? options.printDirection + : fontOpts.printDirection; + myOpts.showHardBlanks = options.showHardBlanks || false; + myOpts.width = options.width || -1; + myOpts.whitespaceBreak = options.whitespaceBreak || false; + + return myOpts; + } + + // ------------------------------------------------------------------------- + // Public methods + + /* + A short-cut for the figlet.text method + + Parameters: + - txt (string): The text to make into ASCII Art + - options (object/string - optional): Options that will override the current font's default options. + If a string is provided instead of an object, it is assumed to be the font name. + + * font + * horizontalLayout + * verticalLayout + * showHardBlanks - Wont remove hardblank characters + + - next (function): A callback function, it will contained the outputted ASCII Art. + */ + const me = function (txt, options, next) { + return me.text(txt, options, next); + }; + me.text = async function (txt, options, next) { + let fontName = ""; + + // Validate inputs + txt = txt + ""; + + if (typeof arguments[1] === "function") { + next = options; + options = {}; + options.font = figDefaults.font; // default font + } + + if (typeof options === "string") { + fontName = options; + options = {}; + } else { + options = options || {}; + fontName = options.font || figDefaults.font; + } + + return await new Promise((resolve, reject) => { + /* + Load the font. If it loads, it's data will be contained in the figFonts object. + The callback will recieve a fontsOpts object, which contains the default + options of the font (its fitting rules, etc etc). + */ + me.loadFont(fontName, function (err, fontOpts) { + if (err) { + reject(err); + if (next) next(err); + return; + } + + const generatedTxt = generateText( + fontName, + _reworkFontOpts(fontOpts, options), + txt + ); + + resolve(generatedTxt); + if (next) next(null, generatedTxt); + }); + }); + }; + + /* + Synchronous version of figlet.text. + Accepts the same parameters. + */ + me.textSync = function (txt, options) { + let fontName = ""; + + // Validate inputs + txt = txt + ""; + + if (typeof options === "string") { + fontName = options; + options = {}; + } else { + options = options || {}; + fontName = options.font || figDefaults.font; + } + + var fontOpts = _reworkFontOpts(me.loadFontSync(fontName), options); + return generateText(fontName, fontOpts, txt); + }; + + /* + Returns metadata about a specfic FIGlet font. + + Returns: + next(err, options, headerComment) + - err: The error if an error occurred, otherwise null/falsey. + - options (object): The options defined for the font. + - headerComment (string): The font's header comment. + */ + me.metadata = function (fontName, next) { + fontName = fontName + ""; + + /* + Load the font. If it loads, it's data will be contained in the figFonts object. + The callback will recieve a fontsOpts object, which contains the default + options of the font (its fitting rules, etc etc). + */ + me.loadFont(fontName, function (err, fontOpts) { + if (err) { + next(err); + return; + } + + next(null, fontOpts, figFonts[fontName].comment); + }); + }; + + /* + Allows you to override defaults. See the definition of the figDefaults object up above + to see what properties can be overridden. + Returns the options for the font. + */ + me.defaults = function (opts) { + if (typeof opts === "object" && opts !== null) { + for (var prop in opts) { + if (opts.hasOwnProperty(prop)) { + figDefaults[prop] = opts[prop]; + } + } + } + return JSON.parse(JSON.stringify(figDefaults)); + }; + + /* + Parses data from a FIGlet font file and places it into the figFonts object. + */ + me.parseFont = function (fontName, data) { + data = data.replace(/\r\n/g, "\n").replace(/\r/g, "\n"); + figFonts[fontName] = {}; + + var lines = data.split("\n"); + var headerData = lines.splice(0, 1)[0].split(" "); + var figFont = figFonts[fontName]; + var opts = {}; + + opts.hardBlank = headerData[0].substr(5, 1); + opts.height = parseInt(headerData[1], 10); + opts.baseline = parseInt(headerData[2], 10); + opts.maxLength = parseInt(headerData[3], 10); + opts.oldLayout = parseInt(headerData[4], 10); + opts.numCommentLines = parseInt(headerData[5], 10); + opts.printDirection = + headerData.length >= 6 ? parseInt(headerData[6], 10) : 0; + opts.fullLayout = + headerData.length >= 7 ? parseInt(headerData[7], 10) : null; + opts.codeTagCount = + headerData.length >= 8 ? parseInt(headerData[8], 10) : null; + opts.fittingRules = getSmushingRules(opts.oldLayout, opts.fullLayout); + + figFont.options = opts; + + // error check + if ( + opts.hardBlank.length !== 1 || + isNaN(opts.height) || + isNaN(opts.baseline) || + isNaN(opts.maxLength) || + isNaN(opts.oldLayout) || + isNaN(opts.numCommentLines) + ) { + throw new Error("FIGlet header contains invalid values."); + } + + /* + All FIGlet fonts must contain chars 32-126, 196, 214, 220, 228, 246, 252, 223 + */ + + let charNums = [], + ii; + for (ii = 32; ii <= 126; ii++) { + charNums.push(ii); + } + charNums = charNums.concat(196, 214, 220, 228, 246, 252, 223); + + // error check - validate that there are enough lines in the file + if (lines.length < opts.numCommentLines + opts.height * charNums.length) { + throw new Error("FIGlet file is missing data."); + } + + /* + Parse out the context of the file and put it into our figFont object + */ + + let cNum, + endCharRegEx, + parseError = false; + + figFont.comment = lines.splice(0, opts.numCommentLines).join("\n"); + figFont.numChars = 0; + + while (lines.length > 0 && figFont.numChars < charNums.length) { + cNum = charNums[figFont.numChars]; + figFont[cNum] = lines.splice(0, opts.height); + // remove end sub-chars + for (ii = 0; ii < opts.height; ii++) { + if (typeof figFont[cNum][ii] === "undefined") { + figFont[cNum][ii] = ""; + } else { + endCharRegEx = new RegExp( + "\\" + + figFont[cNum][ii].substr(figFont[cNum][ii].length - 1, 1) + + "+$" + ); + figFont[cNum][ii] = figFont[cNum][ii].replace(endCharRegEx, ""); + } + } + figFont.numChars++; + } + + /* + Now we check to see if any additional characters are present + */ + + while (lines.length > 0) { + cNum = lines.splice(0, 1)[0].split(" ")[0]; + if (/^0[xX][0-9a-fA-F]+$/.test(cNum)) { + cNum = parseInt(cNum, 16); + } else if (/^0[0-7]+$/.test(cNum)) { + cNum = parseInt(cNum, 8); + } else if (/^[0-9]+$/.test(cNum)) { + cNum = parseInt(cNum, 10); + } else if (/^-0[xX][0-9a-fA-F]+$/.test(cNum)) { + cNum = parseInt(cNum, 16); + } else { + if (cNum === "") { + break; + } + // something's wrong + console.log("Invalid data:" + cNum); + parseError = true; + break; + } + + figFont[cNum] = lines.splice(0, opts.height); + // remove end sub-chars + for (ii = 0; ii < opts.height; ii++) { + if (typeof figFont[cNum][ii] === "undefined") { + figFont[cNum][ii] = ""; + } else { + endCharRegEx = new RegExp( + "\\" + + figFont[cNum][ii].substr(figFont[cNum][ii].length - 1, 1) + + "+$" + ); + figFont[cNum][ii] = figFont[cNum][ii].replace(endCharRegEx, ""); + } + } + figFont.numChars++; + } + + // error check + if (parseError === true) { + throw new Error("Error parsing data."); + } + + return opts; + }; + + /* + Loads a font. + */ + me.loadFont = function (fontName, next) { + if (figFonts[fontName]) { + next(null, figFonts[fontName].options); + return; + } + + if (typeof fetch !== "function") { + console.error( + "figlet.js requires the fetch API or a fetch polyfill such as https://cdnjs.com/libraries/fetch" + ); + throw new Error("fetch is required for figlet.js to work."); + } + + fetch(figDefaults.fontPath + "/" + fontName + ".flf") + .then(function (response) { + if (response.ok) { + return response.text(); + } + + console.log("Unexpected response", response); + throw new Error("Network response was not ok."); + }) + .then(function (text) { + next(null, me.parseFont(fontName, text)); + }) + .catch(next); + }; + + /* + loads a font synchronously, not implemented for the browser + */ + me.loadFontSync = function (name) { + if (figFonts[name]) { + return figFonts[name].options; + } + throw new Error( + "synchronous font loading is not implemented for the browser" + ); + }; + + /* + preloads a list of fonts prior to using textSync + - fonts: an array of font names (i.e. ["Standard","Soft"]) + - next: callback function + */ + me.preloadFonts = function (fonts, next) { + let fontData = []; + + fonts + .reduce(function (promise, name) { + return promise.then(function () { + return fetch(figDefaults.fontPath + "/" + name + ".flf") + .then((response) => { + return response.text(); + }) + .then(function (data) { + fontData.push(data); + }); + }); + }, Promise.resolve()) + .then(function (res) { + for (var i in fonts) { + if (fonts.hasOwnProperty(i)) { + me.parseFont(fonts[i], fontData[i]); + } + } + + if (next) { + next(); + } + }); + }; + + me.figFonts = figFonts; + + return me; +})(); + +// for node.js +if (typeof module !== "undefined") { + if (typeof module.exports !== "undefined") { + module.exports = figlet; + } +} diff --git a/public/Down.png b/public/friskSprites/Down.png similarity index 100% rename from public/Down.png rename to public/friskSprites/Down.png diff --git a/public/Left.png b/public/friskSprites/Left.png similarity index 100% rename from public/Left.png rename to public/friskSprites/Left.png diff --git a/public/Right.png b/public/friskSprites/Right.png similarity index 100% rename from public/Right.png rename to public/friskSprites/Right.png diff --git a/public/Up.png b/public/friskSprites/Up.png similarity index 100% rename from public/Up.png rename to public/friskSprites/Up.png diff --git a/public/asd.png b/public/friskSprites/asd.png similarity index 100% rename from public/asd.png rename to public/friskSprites/asd.png diff --git a/public/frisk.png b/public/friskSprites/frisk.png similarity index 100% rename from public/frisk.png rename to public/friskSprites/frisk.png diff --git a/public/ghost2.png b/public/friskSprites/ghost2.png similarity index 100% rename from public/ghost2.png rename to public/friskSprites/ghost2.png diff --git a/public/index2.html b/public/friskSprites/index2.html similarity index 100% rename from public/index2.html rename to public/friskSprites/index2.html diff --git a/public/friskSprites/indexOrg.html b/public/friskSprites/indexOrg.html new file mode 100644 index 0000000..fa6e071 --- /dev/null +++ b/public/friskSprites/indexOrg.html @@ -0,0 +1,125 @@ + + + + + + + Görkem's Café + + + + + + + + +
+
+ + +
+ + +
+ + + + + + + + + +
+
+
+
Lounge.exe
+
+ + +
+
+
+ + +
+ + + + +
+
+
+ + + + +
+ +
+
+ + + + + + + +
+
+
+
+
Instructions.txt
+
+ + +
+
+
+ +
+
+ + +
+
+ +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/friskSprites/indexTEST.html b/public/friskSprites/indexTEST.html new file mode 100644 index 0000000..4678535 --- /dev/null +++ b/public/friskSprites/indexTEST.html @@ -0,0 +1,179 @@ + + + + + + + CYber Café + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
Cyber Cafe
+ + + +
+ + +
+ + +
+
+
+ +
+
+
+
+
Lounge.exe
+
+ + +
+
+
+ + + + + + +
+
+ +
+ +
+ + + +
+
+ +
+
+
+
+
Instructions.txt
+
+ + +
+
+
+ +
+
+ +
+ +
+ + + + +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/oldd.png b/public/friskSprites/oldd.png similarity index 100% rename from public/oldd.png rename to public/friskSprites/oldd.png diff --git a/public/images/1dEdQoa.gif b/public/images/1dEdQoa.gif new file mode 100644 index 0000000..fcd763f Binary files /dev/null and b/public/images/1dEdQoa.gif differ diff --git a/public/images/GuestbookSpell.gif b/public/images/GuestbookSpell.gif new file mode 100644 index 0000000..42e77c9 Binary files /dev/null and b/public/images/GuestbookSpell.gif differ diff --git a/public/images/HeaderTest.png b/public/images/HeaderTest.png new file mode 100644 index 0000000..debc6ef Binary files /dev/null and b/public/images/HeaderTest.png differ diff --git a/public/images/ISupportOpenSourceSoftware-boyslime.gif b/public/images/ISupportOpenSourceSoftware-boyslime.gif new file mode 100644 index 0000000..8c15c31 Binary files /dev/null and b/public/images/ISupportOpenSourceSoftware-boyslime.gif differ diff --git a/public/images/Project Images/OTES.jpg b/public/images/Project Images/OTES.jpg new file mode 100644 index 0000000..3e343be Binary files /dev/null and b/public/images/Project Images/OTES.jpg differ diff --git a/public/images/Project Images/marbleClock.jpg b/public/images/Project Images/marbleClock.jpg new file mode 100644 index 0000000..bb8e919 Binary files /dev/null and b/public/images/Project Images/marbleClock.jpg differ diff --git a/public/images/Project Images/trinteract.jpg b/public/images/Project Images/trinteract.jpg new file mode 100644 index 0000000..67d7e25 Binary files /dev/null and b/public/images/Project Images/trinteract.jpg differ diff --git a/public/images/SilentHill3.png b/public/images/SilentHill3.png new file mode 100644 index 0000000..d74a626 Binary files /dev/null and b/public/images/SilentHill3.png differ diff --git a/public/abstract2.jpg b/public/images/abstract2.jpg similarity index 100% rename from public/abstract2.jpg rename to public/images/abstract2.jpg diff --git a/public/images/battleback_ow_download.png b/public/images/battleback_ow_download.png new file mode 100644 index 0000000..4a20e9c Binary files /dev/null and b/public/images/battleback_ow_download.png differ diff --git a/public/background2.png b/public/images/battleback_vf_kitekid.png similarity index 100% rename from public/background2.png rename to public/images/battleback_vf_kitekid.png diff --git a/public/images/bluenoise.gif b/public/images/bluenoise.gif new file mode 100644 index 0000000..78cd165 Binary files /dev/null and b/public/images/bluenoise.gif differ diff --git a/public/images/buttons/1bookmark.png b/public/images/buttons/1bookmark.png new file mode 100644 index 0000000..ba71354 Binary files /dev/null and b/public/images/buttons/1bookmark.png differ diff --git a/public/images/buttons/3passion.jpg b/public/images/buttons/3passion.jpg new file mode 100644 index 0000000..194bf6f Binary files /dev/null and b/public/images/buttons/3passion.jpg differ diff --git a/public/images/buttons/456636y6irlp4fwp.gif b/public/images/buttons/456636y6irlp4fwp.gif new file mode 100644 index 0000000..177e07c Binary files /dev/null and b/public/images/buttons/456636y6irlp4fwp.gif differ diff --git a/public/images/buttons/affection.gif b/public/images/buttons/affection.gif new file mode 100644 index 0000000..0e04ecd Binary files /dev/null and b/public/images/buttons/affection.gif differ diff --git a/public/images/buttons/another.gif b/public/images/buttons/another.gif new file mode 100644 index 0000000..f0d6b05 Binary files /dev/null and b/public/images/buttons/another.gif differ diff --git a/public/images/buttons/bestvw.gif b/public/images/buttons/bestvw.gif new file mode 100644 index 0000000..3695756 Binary files /dev/null and b/public/images/buttons/bestvw.gif differ diff --git a/public/images/buttons/blender.gif b/public/images/buttons/blender.gif new file mode 100644 index 0000000..0b7ee8a Binary files /dev/null and b/public/images/buttons/blender.gif differ diff --git a/public/images/buttons/bookmark_this_page.gif b/public/images/buttons/bookmark_this_page.gif new file mode 100644 index 0000000..e200a15 Binary files /dev/null and b/public/images/buttons/bookmark_this_page.gif differ diff --git a/public/images/buttons/button139.png b/public/images/buttons/button139.png new file mode 100644 index 0000000..a35cb92 Binary files /dev/null and b/public/images/buttons/button139.png differ diff --git a/public/images/buttons/button257.gif b/public/images/buttons/button257.gif new file mode 100644 index 0000000..8866af6 Binary files /dev/null and b/public/images/buttons/button257.gif differ diff --git a/public/images/buttons/cfs.gif b/public/images/buttons/cfs.gif new file mode 100644 index 0000000..567ed84 Binary files /dev/null and b/public/images/buttons/cfs.gif differ diff --git a/public/images/buttons/email-icon.gif b/public/images/buttons/email-icon.gif new file mode 100644 index 0000000..2139e09 Binary files /dev/null and b/public/images/buttons/email-icon.gif differ diff --git a/public/images/buttons/f56de5_6d381a5238e9442d82693e53c59583a3_mv2.gif b/public/images/buttons/f56de5_6d381a5238e9442d82693e53c59583a3_mv2.gif new file mode 100644 index 0000000..54dba01 Binary files /dev/null and b/public/images/buttons/f56de5_6d381a5238e9442d82693e53c59583a3_mv2.gif differ diff --git a/public/images/buttons/graphicdesign.gif b/public/images/buttons/graphicdesign.gif new file mode 100644 index 0000000..876d8fe Binary files /dev/null and b/public/images/buttons/graphicdesign.gif differ diff --git a/public/images/buttons/hackerpowered.gif b/public/images/buttons/hackerpowered.gif new file mode 100644 index 0000000..3486a36 Binary files /dev/null and b/public/images/buttons/hackerpowered.gif differ diff --git a/public/images/buttons/ilovehorror.gif b/public/images/buttons/ilovehorror.gif new file mode 100644 index 0000000..3f990b9 Binary files /dev/null and b/public/images/buttons/ilovehorror.gif differ diff --git a/public/images/buttons/keep.gif b/public/images/buttons/keep.gif new file mode 100644 index 0000000..c95a53e Binary files /dev/null and b/public/images/buttons/keep.gif differ diff --git a/public/images/buttons/makeawebsite.jpg b/public/images/buttons/makeawebsite.jpg new file mode 100644 index 0000000..f9cf96e Binary files /dev/null and b/public/images/buttons/makeawebsite.jpg differ diff --git a/public/images/buttons/nocookie.gif b/public/images/buttons/nocookie.gif new file mode 100644 index 0000000..c0dd092 Binary files /dev/null and b/public/images/buttons/nocookie.gif differ diff --git a/public/images/buttons/point_down.gif b/public/images/buttons/point_down.gif new file mode 100644 index 0000000..fe6fb95 Binary files /dev/null and b/public/images/buttons/point_down.gif differ diff --git a/public/images/buttons/powered.gif b/public/images/buttons/powered.gif new file mode 100644 index 0000000..fc9f559 Binary files /dev/null and b/public/images/buttons/powered.gif differ diff --git a/public/images/buttons/psbutton.gif b/public/images/buttons/psbutton.gif new file mode 100644 index 0000000..a4d8c38 Binary files /dev/null and b/public/images/buttons/psbutton.gif differ diff --git a/public/images/buttons/rtr.png b/public/images/buttons/rtr.png new file mode 100644 index 0000000..21fffb5 Binary files /dev/null and b/public/images/buttons/rtr.png differ diff --git a/public/images/buttons/seedyourtorrents.gif b/public/images/buttons/seedyourtorrents.gif new file mode 100644 index 0000000..b87356d Binary files /dev/null and b/public/images/buttons/seedyourtorrents.gif differ diff --git a/public/images/buttons/sendit.gif b/public/images/buttons/sendit.gif new file mode 100644 index 0000000..5ac6d05 Binary files /dev/null and b/public/images/buttons/sendit.gif differ diff --git a/public/images/buttons/signguest.gif b/public/images/buttons/signguest.gif new file mode 100644 index 0000000..042a659 Binary files /dev/null and b/public/images/buttons/signguest.gif differ diff --git a/public/images/buttons/step1.png b/public/images/buttons/step1.png new file mode 100644 index 0000000..91231d8 Binary files /dev/null and b/public/images/buttons/step1.png differ diff --git a/public/images/buttons/tumblr_n3xtofCV8I1trzml2o1_500.gif b/public/images/buttons/tumblr_n3xtofCV8I1trzml2o1_500.gif new file mode 100644 index 0000000..73e703c Binary files /dev/null and b/public/images/buttons/tumblr_n3xtofCV8I1trzml2o1_500.gif differ diff --git a/public/images/buttons/tumblr_pz87cap0SM1yq36ibo1_250.gif b/public/images/buttons/tumblr_pz87cap0SM1yq36ibo1_250.gif new file mode 100644 index 0000000..d521989 Binary files /dev/null and b/public/images/buttons/tumblr_pz87cap0SM1yq36ibo1_250.gif differ diff --git a/public/images/buttons/tumblr_pz89njhPQL1yq36ibo1_75sq.gif b/public/images/buttons/tumblr_pz89njhPQL1yq36ibo1_75sq.gif new file mode 100644 index 0000000..f685407 Binary files /dev/null and b/public/images/buttons/tumblr_pz89njhPQL1yq36ibo1_75sq.gif differ diff --git a/public/images/buttons/worldwideweb_badge.gif b/public/images/buttons/worldwideweb_badge.gif new file mode 100644 index 0000000..873436c Binary files /dev/null and b/public/images/buttons/worldwideweb_badge.gif differ diff --git a/public/images/carpet.JPG b/public/images/carpet.JPG new file mode 100644 index 0000000..05e5803 Binary files /dev/null and b/public/images/carpet.JPG differ diff --git a/public/images/comp.gif b/public/images/comp.gif new file mode 100644 index 0000000..236acc6 Binary files /dev/null and b/public/images/comp.gif differ diff --git a/public/images/construction.gif b/public/images/construction.gif new file mode 100644 index 0000000..edb4043 Binary files /dev/null and b/public/images/construction.gif differ diff --git a/public/images/favicon2.gif b/public/images/favicon2.gif new file mode 100644 index 0000000..55ad31c Binary files /dev/null and b/public/images/favicon2.gif differ diff --git a/public/images/hallo.png b/public/images/hallo.png new file mode 100644 index 0000000..095a66e Binary files /dev/null and b/public/images/hallo.png differ diff --git a/public/images/icons/accessibility_window_objs.png b/public/images/icons/accessibility_window_objs.png new file mode 100644 index 0000000..f17cc81 Binary files /dev/null and b/public/images/icons/accessibility_window_objs.png differ diff --git a/public/images/icons/address_book_home.png b/public/images/icons/address_book_home.png new file mode 100644 index 0000000..cfed861 Binary files /dev/null and b/public/images/icons/address_book_home.png differ diff --git a/public/images/icons/address_book_pad.png b/public/images/icons/address_book_pad.png new file mode 100644 index 0000000..21c4953 Binary files /dev/null and b/public/images/icons/address_book_pad.png differ diff --git a/public/images/icons/address_book_pad_users.png b/public/images/icons/address_book_pad_users.png new file mode 100644 index 0000000..071ceff Binary files /dev/null and b/public/images/icons/address_book_pad_users.png differ diff --git a/public/images/icons/chm-1.png b/public/images/icons/chm-1.png new file mode 100644 index 0000000..d109c68 Binary files /dev/null and b/public/images/icons/chm-1.png differ diff --git a/public/images/icons/connected_world-0 (1).png b/public/images/icons/connected_world-0 (1).png new file mode 100644 index 0000000..ba373b9 Binary files /dev/null and b/public/images/icons/connected_world-0 (1).png differ diff --git a/public/images/icons/connected_world-0.png b/public/images/icons/connected_world-0.png new file mode 100644 index 0000000..ba373b9 Binary files /dev/null and b/public/images/icons/connected_world-0.png differ diff --git a/public/images/icons/construction.gif b/public/images/icons/construction.gif new file mode 100644 index 0000000..fb6f252 Binary files /dev/null and b/public/images/icons/construction.gif differ diff --git a/public/images/icons/defragment-0.png b/public/images/icons/defragment-0.png new file mode 100644 index 0000000..452e250 Binary files /dev/null and b/public/images/icons/defragment-0.png differ diff --git a/public/images/icons/desktop_w95-0.png b/public/images/icons/desktop_w95-0.png new file mode 100644 index 0000000..4ebf52e Binary files /dev/null and b/public/images/icons/desktop_w95-0.png differ diff --git a/public/images/icons/directory_folder_options-2.png b/public/images/icons/directory_folder_options-2.png new file mode 100644 index 0000000..8b9510e Binary files /dev/null and b/public/images/icons/directory_folder_options-2.png differ diff --git a/public/images/icons/directory_fonts-1.png b/public/images/icons/directory_fonts-1.png new file mode 100644 index 0000000..13a08e9 Binary files /dev/null and b/public/images/icons/directory_fonts-1.png differ diff --git a/public/images/icons/display_properties-3.png b/public/images/icons/display_properties-3.png new file mode 100644 index 0000000..6d7da6e Binary files /dev/null and b/public/images/icons/display_properties-3.png differ diff --git a/public/images/icons/entire_network_globe-2.png b/public/images/icons/entire_network_globe-2.png new file mode 100644 index 0000000..1be0d68 Binary files /dev/null and b/public/images/icons/entire_network_globe-2.png differ diff --git a/public/images/icons/expand_hierarchial_array-0.png b/public/images/icons/expand_hierarchial_array-0.png new file mode 100644 index 0000000..e05bfef Binary files /dev/null and b/public/images/icons/expand_hierarchial_array-0.png differ diff --git a/public/images/icons/external.png b/public/images/icons/external.png new file mode 100644 index 0000000..881475e Binary files /dev/null and b/public/images/icons/external.png differ diff --git a/public/images/icons/help_book_cool_small-5.png b/public/images/icons/help_book_cool_small-5.png new file mode 100644 index 0000000..5f33f38 Binary files /dev/null and b/public/images/icons/help_book_cool_small-5.png differ diff --git a/public/images/icons/help_question_mark-0.png b/public/images/icons/help_question_mark-0.png new file mode 100644 index 0000000..67006ba Binary files /dev/null and b/public/images/icons/help_question_mark-0.png differ diff --git a/public/images/icons/help_sheet-0.png b/public/images/icons/help_sheet-0.png new file mode 100644 index 0000000..5f4b33e Binary files /dev/null and b/public/images/icons/help_sheet-0.png differ diff --git a/public/images/icons/internet_connection_wiz-0.png b/public/images/icons/internet_connection_wiz-0.png new file mode 100644 index 0000000..3cc4f19 Binary files /dev/null and b/public/images/icons/internet_connection_wiz-0.png differ diff --git a/public/images/icons/joystick-2.png b/public/images/icons/joystick-2.png new file mode 100644 index 0000000..56efa28 Binary files /dev/null and b/public/images/icons/joystick-2.png differ diff --git a/public/images/icons/msn3-1.png b/public/images/icons/msn3-1.png new file mode 100644 index 0000000..fdedf47 Binary files /dev/null and b/public/images/icons/msn3-1.png differ diff --git a/public/images/icons/network_cool_two_pcs-5.png b/public/images/icons/network_cool_two_pcs-5.png new file mode 100644 index 0000000..2d3ae28 Binary files /dev/null and b/public/images/icons/network_cool_two_pcs-5.png differ diff --git a/public/images/icons/newspaper.png b/public/images/icons/newspaper.png new file mode 100644 index 0000000..371e4d6 Binary files /dev/null and b/public/images/icons/newspaper.png differ diff --git a/public/images/icons/notepad-4.png b/public/images/icons/notepad-4.png new file mode 100644 index 0000000..f425ba1 Binary files /dev/null and b/public/images/icons/notepad-4.png differ diff --git a/public/images/icons/paint_file-2.png b/public/images/icons/paint_file-2.png new file mode 100644 index 0000000..2a3d573 Binary files /dev/null and b/public/images/icons/paint_file-2.png differ diff --git a/public/images/icons/tools_gear-0.png b/public/images/icons/tools_gear-0.png new file mode 100644 index 0000000..c81faeb Binary files /dev/null and b/public/images/icons/tools_gear-0.png differ diff --git a/public/images/icons/www.gif b/public/images/icons/www.gif new file mode 100644 index 0000000..873436c Binary files /dev/null and b/public/images/icons/www.gif differ diff --git a/public/images/lost.png b/public/images/lost.png new file mode 100644 index 0000000..b6387b7 Binary files /dev/null and b/public/images/lost.png differ diff --git a/public/images/mario.gif b/public/images/mario.gif new file mode 100644 index 0000000..854680e Binary files /dev/null and b/public/images/mario.gif differ diff --git a/public/images/me.jpg b/public/images/me.jpg new file mode 100644 index 0000000..355b6df Binary files /dev/null and b/public/images/me.jpg differ diff --git a/public/images/msn.gif b/public/images/msn.gif new file mode 100644 index 0000000..a04fb55 Binary files /dev/null and b/public/images/msn.gif differ diff --git a/public/ocean.jpg b/public/images/ocean.jpg similarity index 100% rename from public/ocean.jpg rename to public/images/ocean.jpg diff --git a/public/images/parallax_stump.png b/public/images/parallax_stump.png new file mode 100644 index 0000000..6d75365 Binary files /dev/null and b/public/images/parallax_stump.png differ diff --git a/public/images/point_down.gif b/public/images/point_down.gif new file mode 100644 index 0000000..fe6fb95 Binary files /dev/null and b/public/images/point_down.gif differ diff --git a/public/images/ps.jpg b/public/images/ps.jpg new file mode 100644 index 0000000..4392fbf Binary files /dev/null and b/public/images/ps.jpg differ diff --git a/public/skull-pile.jpg b/public/images/skull-pile.jpg similarity index 100% rename from public/skull-pile.jpg rename to public/images/skull-pile.jpg diff --git a/public/stars.gif b/public/images/stars.gif similarity index 100% rename from public/stars.gif rename to public/images/stars.gif diff --git a/public/images/stars3.gif b/public/images/stars3.gif new file mode 100644 index 0000000..483b449 Binary files /dev/null and b/public/images/stars3.gif differ diff --git a/public/images/tileg.jpg b/public/images/tileg.jpg new file mode 100644 index 0000000..3d39305 Binary files /dev/null and b/public/images/tileg.jpg differ diff --git a/public/images/unknown2.png b/public/images/unknown2.png new file mode 100644 index 0000000..20675db Binary files /dev/null and b/public/images/unknown2.png differ diff --git a/public/images/vintage.png b/public/images/vintage.png new file mode 100644 index 0000000..81d32af Binary files /dev/null and b/public/images/vintage.png differ diff --git a/public/index.html b/public/index.html index fa6e071..8565718 100644 --- a/public/index.html +++ b/public/index.html @@ -1,125 +1,184 @@ + + + + + + + Interweb Cafe + + + + + + + + + + + + + + + + + +
+
+
+
+ +
CyberCafe # *
+ + + +
+ + +
+ + +
+
+
+ + - -
- - - - - - - - - -
-
-
-
Lounge.exe
-
- - -
-
-
- - -
- - - - -
-
-
- - - - -
- -
-
- - - - - - - -
-
-
-
-
Instructions.txt
-
- - -
-
-
- -
-
- - -
-
- +
+
+
+
+
Lounge.exe
+
+ +
- +
+
+
+ + + +
+
+ +
+ +
+ +
+ +
+
+ +
+
+
+
+
Instructions.txt
+
+ + +
+
+
+ +
+
+ +
+ +
- - + + + +
+ + + + + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 0b9e212..c23f4f6 100644 --- a/public/index.js +++ b/public/index.js @@ -43,7 +43,7 @@ console.log(ctx); -const background1 = new Sprite({ +const room1 = new Sprite({ position:{ x:0, y:0 @@ -81,14 +81,14 @@ socket.on('updatePlayers', (bPlayers) =>{ message:'', atPosition:true, animationColumn:0, - imageSrc:'Down.png', - frames: 4, + imageSrc:'characterSprites/Green/Down.png', + frames: 7, center:true, sprites:{ - down:'Down.png', - up:'Up.png', - right:'Right.png', - left:'Left.png' + down:'characterSprites/Green/Down.png', + up:'characterSprites/Green/Up.png', + right:'characterSprites/Green/Right.png', + left:'characterSprites/Green/Left.png' } }) @@ -140,7 +140,7 @@ function animate(){ // console.log(pageVisible) // ctx.clearRect(0,0,canvas.width,canvas.height); - background1.draw() + room1.draw() animationId = requestAnimationFrame(animate); if(readyNow){ // ctx.drawImage(background,0,0); diff --git a/public/oldbg.png b/public/oldbg.png deleted file mode 100644 index 7c19c0e..0000000 Binary files a/public/oldbg.png and /dev/null differ diff --git a/public/style.css b/public/style.css deleted file mode 100644 index 33f9114..0000000 --- a/public/style.css +++ /dev/null @@ -1,502 +0,0 @@ - -html { - overflow: -moz-scrollbars-vertical; - overflow-y: scroll; -} - - :root { - --header-image: url('./bgHOME4.png'); - --body-bg-image: url('./abstract2.jpg'); - - /* colors */ - /* --content: #c3aae5; */ - } - - /* if you have the URL of a font, you can set it below */ - /* feel free to delete this if it's not your vibe */ - - /* this seems like a lot for just one font and I would have to agree -but I wanted to include an example of how to include a custom font. -If you download a font file you can upload it onto your Neocities -and then link it! Many fonts have separate files for each style -(bold, italic, etc. T_T) which is why there are so many! - -*/ - - @font-face { - font-family: Nunito; - src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf'); - - } - - @font-face { - font-family: Nunito; - src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf'); - font-weight: bold; - } - - @font-face { - font-family: Nunito; - src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf'); - font-style: italic; - } - - @font-face { - font-family: Nunito; - src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf'); - font-style: italic; - font-weight: bold; - } - - /* @font-face { - font-family: Win98; - src: url(./Windows\ Regular.ttf); - - } */ - - @font-face { - font-family: typeWriter; - src: url(./typewriter.ttf); - - } - - @font-face { - font-family: win98; - src: url(./FreePixel.ttf); - - } - - body { - font-family: 'win98'; - margin: 0; - /* background-color: #08031A; */ - /* you can delete the line below if you'd prefer to not use an image */ - /* background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; */ - color: #e9e4de; - background-image: var(--body-bg-image); - } - - * { - box-sizing: border-box; - } - - button { - width: 100%; - height: 100%; - font-family: "win98"; - font-weight: 500; - padding: 5px 5px; - } - /* below this line is CSS for the layout */ - - /* this is a CSS comment -to uncomment a line of CSS, remove the * and the / -before and after the text */ - - - /* the "container" is what wraps your entire website */ - /* if you want something (like the header) to be Wider than -the other elements, you will need to move that div outside -of the container */ - #container { - max-width: 905px; - /* this is the width of your layout! */ - /* if you change the above value, scroll to the bottom -and change the media query according to the comment! */ - margin: 0 auto; - /* padding-top: 50px; */ - /* this centers the entire page */ - } - - #input { - border:2px solid grey; - border-right: none; - /* box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; */ - margin: 0px; - width: 93%; - /* width: 530px; */ - margin-right:0px; - font-size: 18px; - height: 34px; - /* margin-top: 10px; */ - padding: 5px 5px; - /* margin-bottom: 10px; */ - /* vertical-align: middle; */ - vertical-align: middle; - - } - #textInput > button{ - font-size: 18px; - width: 15%; - padding: 5px 5px; - /* display: inline; */ - /* margin-top: 10px; */ - vertical-align: middle; - /* margin-right: 5px; */ - height: 34px; - /* float: right; */ - /* padding: 1px 2px; */ - /* all:initial; */ - } - - #textInput{ - margin-top: 10px; - margin-bottom: 10px; - display: flex; - /* vertical-align: middle; */ - } - - .tooltip:not(.shown) { - display: none; - } - - .inputWrapper{ - width: 85%; - height: 100%; - padding-right: 5px; - /* padding: 2px; */ - - /* display: inline; */ - /* box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; */ - } - #emojiButton{ - border:2px solid grey; - /* border-left: none; */ - vertical-align: middle; - font-family: Arial, Helvetica, sans-serif; - font-size: 1.5em !important; - background-color: white; - /* border: none; */ - /* margin-right: 5px; */ - min-width: 20px !important; - width: 7% !important; - height: 34px !important; - box-shadow: none; - color: black !important; - padding:0px !important; - border-width: 2px; - /* border-style: inset; - border-top: solid black 2px; - border-bottom: solid grey 2px; - border-right: solid grey 2px; */ - - /* padding: 0px !important; */ - } - - .tooltip{ - z-index:999; - position: absolute; - data-popper-placement:top; - } - /* the area below is for all links on your page -EXCEPT for the navigation */ - #container a { - /* color: #C84B31; */ - font-weight: bold; - color: #1896CA; - /* if you want to remove the underline -you can add a line below here that says: -text-decoration:none; */ - } - .icon{ - width: 25px; - } - - #header { - width: 100%; - /* background-color: #5e4e8c; */ - /* header color here! */ - height: 150px; - /* this is only for a background image! */ - /* if you want to put images IN the header, -you can add them directly to the element! */ - background-image: var(--header-image); - background-size: 100%; - } - - /* navigation section!! */ - #navbar { - height: 40px; - padding-bottom: 50px; - /* margin-bottom: 10px; */ - /* background-color: #13092D; */ - /* navbar color */ - width: 100%; - vertical-align: center; - - } - - #navbar ul { - display: flex; - flex-direction: row; - border: 3px solid #bebebe; - padding: 0; - margin: 0; - list-style-type: none; - justify-content: space-between; - vertical-align: bottom !important; - /* vertical-align: middle; */ - } - - #navbar li { - /* padding: 5px 5px; */ - border: 2px solid #bebebe; - background-color: #047e7e; - border-bottom:none; - border-top: none; - /* color: white; */ - /* border-top-right-radius: 12px; - border-top-left-radius: 12px; */ - /* border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; */ - - width: 100%; - flex-direction: row; - - text-align: center; - margin:auto 0; - - } - - .right-box{ - width: 250px; - /* background-color: #15223857; */ - /* background-color: #152238; */ - margin-left: 10px; - } - .left-box{ - /* width: 740px; */ - } - - canvas { - /* image-rendering: optimizeSpeed; */ - padding-left: 0; - padding-right: 0; - margin-left: auto; - margin-right: auto; - display: block; - border: 8px solid; - border-image-source: url(./boder.png); - border-image-slice: 8; - - - } - - - /* navigation links*/ - #navbar li a { - color: #ffffff; - font-size: large; - margin:0px; - /* navbar text color */ - font-weight: 800; - text-decoration: none; - vertical-align: middle; - /* this removes the underline */ - } - - /* navigation link when a link is hovered over */ - #navbar li a:hover { - color: #a49cba; - text-decoration: underline; - } - - #flex { - display: flex; - - } - .title-bar{ - font-family: 'win98'; - font-size:small; - } - - .window{ - margin-bottom: 10px; - background: transparent; - } - .window-body{ - /* font-family: 'win98'; */ - font-family: sans-serif; - padding: 0px; - margin: 0px; - - /* background-color: #000055a6; */ - } - /* this colors BOTH sidebars -if you want to style them separately, -create styles for #leftSidebar and #rightSidebar */ - aside { - -padding: 10px; - - - } - - - /* this is the color of the main content area, -between the sidebars! */ - main { - /* background-color: #2a2a2a; */ - /* background-color: #00003e; */ - - flex: 1; - /* padding: 0px 20px; */ - padding: 0px 2px; - order: 2; - /* border: #383838 3px solid; */ - /* border-radius: 4px; */ - - /* width: 600px; */ - } - .main-right{ - background-color: #1522387b; - backdrop-filter: blur(16px); - - } - .main-left{ - background-color: rgba(0, 0, 0, 0.45); - backdrop-filter: blur(32px); - } - h4{ - display: inline; - vertical-align: middle; - font-size: large; - padding-left: 5px; - } - - /* what's this "order" stuff about?? -allow me to explain! -if you're using both sidebars, the "order" value -tells the CSS the order in which to display them. -left sidebar is 1, content is 2, and right sidebar is 3! */ - - */ #leftSidebar { - order: 1; - } - - #rightSidebar { - order: 3; - /* background-color: #152238; */ - } - /* iframe { - font-family: win98 !important; - - } */ - - footer { - /* background-color: #6d40dd; */ - /* background color for footer */ - width: 100%; - height: 40px; - padding: 10px; - text-align: center; - /* this centers the footer text */ - } - - h1, - h2, - h3 { - /* color: #49adff; */ - color: white; - } - - h1 { - font-size: 25px; - } - p { - font-size: medium; - color: white; - } - strong { - /* this styles bold text */ - /* color: #06ffff; */ - color:#97a6f0; - } - - /* this is just a cool box, it's the darker colored one */ - .box { - background-color: #13092D; - border: 1px solid #ED64F5; - padding: 10px; - } - .bottomWindow{ - width: 49%; - float: left; - } - #statuscafe { - /* padding: .5em; */ - font-size: medium; - background-color: none; - /* border: 1px solid midnightblue; */ - } - #statuscafe-username { - margin-bottom: .5em; - } - #statuscafe-content { - margin: 0 1em 0.5em 1em; - } - .updates{ - height: 120px; - overflow-y: scroll; - } - - /* CSS for extras */ - - #topBar { - width: 100%; - height: 30px; - padding: 10px; - font-size: smaller; - background-color: #13092D; - } - - - /* #navbar li.active{ - background-color:#00cece; - - } */ - button.active { - box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, - inset -2px -2px #dfdfdf, inset 2px 2px #808080; - } - - /* BELOW THIS POINT IS MEDIA QUERY */ - - /* so you wanna change the width of your page? -by default, the container width is 900px. -in order to keep things responsive, take your new height, -and then subtrack it by 100. use this new number as the -"max-width" value below -*/ - - @media only screen and (max-width: 800px) { - #flex { - flex-wrap: wrap; - } - - aside { - width: 100%; - } - - /* the order of the items is adjusted here for responsiveness! -since the sidebars would be too small on a mobile device. -feel free to play around with the order! -*/ - main { - order: 1; - } - - #leftSidebar { - order: 2; - } - - #rightSidebar { - order: 3; - } - - #navbar ul { - flex-wrap: wrap; - } - } \ No newline at end of file