diff --git a/app.py b/app.py index 3eaca17..fa41823 100644 --- a/app.py +++ b/app.py @@ -1,10 +1,78 @@ -from flask import Flask, render_template, send_from_directory, abort, url_for, jsonify, redirect, request, session -from werkzeug.utils import secure_filename -import os -import random +from flask import Flask, render_template, redirect +from flask_compress import Compress + +import requests +from random import choice +import json app = Flask(__name__) +Compress(app) + + +# +# ROUTES +# +@app.route('/') +def index(): + msg = ['This is a test string', + 'This could go one of two ways...', + 'Gwa Gwa', 'It\'s a UNIX system! I know this!', + 'They turned him into a pickle, its the funnies shit I\'ve ever seen', + '*internal screaming*', + 'Don\'t forget to drink water!', + 'Fluffy made this!', + 'I wish we were better strangers.', + 'If I were you, I\'d run now', + 'SILICA GEL "DO NOT EAT".', + 'AAAAAAAAAAAAAAAAAAAA', + 'The weather is dry', + 'Gods die too.', + 'Eat hotchip and lie'] + + return render_template('index.html', msg=choice(msg)) + + +@app.route('/cretura') +def cretura(): + return render_template('cretura.html') + + +@app.route('/about') +def about(): + return render_template('about.html') + + +@app.route('/music') +def music(): + current_tracks = requests.get( + 'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Fluffy_Bean_&api_key=a6793a0176141e5cf7767c4cec1bda6f&limit=5&format=json') + current_tracks = json.loads(current_tracks.text) + + tracks = [] + + for track in current_tracks['recenttracks']['track']: + nowPlaying = False + if '@attr' in track: + nowPlaying = True + + tmp_track = { + 'name': track['name'], + 'artist': track['artist']['#text'], + 'album': track['album']['#text'], + 'url': track['url'], + 'image': track['image'][2]['#text'], + 'nowPlaying': nowPlaying, + } + + tracks.append(tmp_track) + + return render_template('music.html', tracks=tracks) + + +@app.route('/blog') +def blog(): + return render_template('blog.html') # @@ -42,50 +110,4 @@ def gone(e): def internal_server_error(e): error = '500' msg = 'Server died inside :c' - return render_template('error.html', error=error, msg=msg), 500 - - -# -# ROUTES -# -@app.route('/') -def index(): - msg = ['Some interesting text', 'Balls', 'hiiiiii'] - return render_template('index.html', title=random.choice(msg)) - -@app.route('/thankies') -def thankies(): - return render_template('thankies.html') - -@app.route('/funny') -def funny(): - return render_template('funny.html') - -@app.route('/status') -def status(): - abort(403) - -@app.route('/error//') -def error(error, msg): - try: - error = str(error) - except: - abort(405) - - try: - msg = str(msg) - except: - abort(405) - - return render_template('error.html', error=error, msg=msg) - - -# -# METHODS -# -@app.route('/fileList/', methods=['GET']) -def image_list(item_type): - if request.method != 'GET': - abort(405) - - #return jsonify(item_list) \ No newline at end of file + return render_template('error.html', error=error, msg=msg), 500 \ No newline at end of file diff --git a/static/css/_aside.scss b/static/css/_aside.scss deleted file mode 100644 index f4fc220..0000000 --- a/static/css/_aside.scss +++ /dev/null @@ -1,130 +0,0 @@ -@mixin aside-item($color) { - background-color: rgba($color, 0.1); - border: 1px solid rgba($color, 0.5); - color: $color; -} - -.aside { - margin: 0; - padding: 0; - - background-color: $black; - - box-sizing: border-box; - z-index: 68; - - hr { - margin: 0.5rem auto; - padding: 0; - - width: 80%; - height: 1px; - - background-color: $white; - border: none; - } - - br { - margin: 0.5rem 0; - padding: 0; - } -} -.aside-container { - margin: 0; - padding: 1rem; - - position: sticky; - top: 0; - - display: flex; - flex-direction: column; - gap: 0.5rem; -} -.aside-item { - margin: 0; - padding: 0.75rem; - - width: 100%; - height: auto; - - background-color: transparent; - color: $white; - - text-decoration: none; - - display: flex; - align-items: center; - gap: 0.5rem; - - border: 1px solid transparent; - border-radius: 3px; - - transition: all 0.2s ease-in-out; - cursor: pointer; - - i { - opacity: 0; - transform: translateX(1rem); - transition: all 0.2s ease-in-out; - filter: blur(0.1rem); - - pointer-events: none; - } - - &:hover i { - opacity: 1; - transform: translateX(0); - filter: blur(0); - } -} -.aside-red { - @include aside-item($red); -} -.aside-yellow { - @include aside-item($yellow); -} -.aside-green { - @include aside-item($green); -} -.aside-blue { - @include aside-item($blue); -} -.aside-purple { - @include aside-item($purple); -} - -@media screen and (max-width: $phone-width) { - @media screen and (min-width: calc(#{$phone-width} * 0.6)) { - .aside { - max-width: 20rem; - } - } - - .aside { - display: block; - - position: fixed; - top: 3rem; - left: -100vw; - - width: 100vw; - height: calc(100vh - 3rem); - - background-color: #121212; - - overflow-y: auto; - box-shadow: 0 0 0.5rem 5px rgba($black, 0.5); - transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; - - hr { - margin: 1rem auto; - - width: 100%; - } - } - - .aside-active { - opacity: 1; - left: 0; - } -} \ No newline at end of file diff --git a/static/css/_footer.scss b/static/css/_footer.scss deleted file mode 100644 index 02023a0..0000000 --- a/static/css/_footer.scss +++ /dev/null @@ -1,25 +0,0 @@ -.footer { - margin: 0; - padding: 0; - - display: flex; - justify-content: center; - align-items: center; - - background-color: $black; - color: $white; - - p { - margin: 0; - padding: 0; - - font-size: 0.8rem; - } -} - -@media screen and (max-width: $phone-width) { - .footer { - background-color: $black; - color: $white; - } -} \ No newline at end of file diff --git a/static/css/_nav.scss b/static/css/_nav.scss deleted file mode 100644 index 96b56e8..0000000 --- a/static/css/_nav.scss +++ /dev/null @@ -1,67 +0,0 @@ -.nav { - margin: 0; - padding: 0; - - background-color: $black; - color: $white; - - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - - position: relative; - - z-index: 69; - - p { - margin: 0 1rem; - padding: 0; - - font-size: 1rem; - } -} -.nav-toggle { - margin: 0; - padding: 0.5rem 1rem; - - display: none; - - background-color: transparent; - color: $white; - - border: none; - - i { - font-size: 1.5rem; - - display: inline-block; - - // display the hamburger icon vertically centered - line-height: 1.5rem; - } -} - -@media screen and (max-width: $phone-width) { - .nav { - margin: 0; - padding: 0; - - width: 100vw; - height: 3rem; - - position: fixed; - top: 0; - left: 0; - - justify-content: space-between; - - background-color: $black; - color: $white; - } - .nav-toggle { - display: flex; - justify-content: center; - align-items: center; - } -} \ No newline at end of file diff --git a/static/css/_wrapper.scss b/static/css/_wrapper.scss deleted file mode 100644 index 796ee6e..0000000 --- a/static/css/_wrapper.scss +++ /dev/null @@ -1,147 +0,0 @@ -@mixin btn-hover($color) { - background-color: rgba($color, 0.1); - border: 1px solid rgba($color, 0.5); - color: $color; -} - -.wrapper { - margin: 0; - padding: 0; - - background-color: #101010; - color: $white; - - border-radius: calc(0.8rem + 3px) 0 0 0; - - position: relative; - overflow: hidden; - - hr { - margin: 0.5rem 1rem; - padding: 0; - - height: 1px; - - background-color: $white; - border: none; - } -} - -.content { - margin: 1rem; - - position: relative; - - p { - margin: 0; - padding: 0; - - font-size: 1rem; - } -} -.content-header { - padding: 1rem; - - display: flex; - flex-direction: column; - gap: 1rem; - - background-color: rgba($white, 0.1); - border: 1px solid rgba($white, 0.5); - border-radius: 3px; - - p { - margin: 0; - padding: 0; - - font-size: 2rem; - font-weight: 600; - text-align: center; - } -} -.content-default { - padding: 1rem; - - display: flex; - flex-direction: column; - gap: 1rem; - - background-color: rgba($white, 0.1); - border: 1px solid rgba($white, 0.5); - border-radius: 3px; -} -.content-list { - display: flex; - flex-direction: column; - gap: 1rem; -} -.content-img { - padding: 1rem; - - display: flex; - - background-color: rgba($white, 0.1); - border: 1px solid rgba($white, 0.5); - border-radius: 3px; - - img { - margin: auto; - padding: 0; - - width: 100%; - height: auto; - - border-radius: 3px; - - object-fit: cover; - } -} - -.btn { - margin: 0; - padding: 1.5rem; - - width: auto; - height: auto; - - background-color: transparent; - color: $white; - - text-decoration: none; - font-size: 1rem; - - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - - border: 1px solid transparent; - border-radius: 3px; - - transition: all 0.2s ease-in-out; -} -.btn-red:hover { - @include btn-hover($red); -} -.btn-yellow:hover { - @include btn-hover($yellow); -} -.btn-green:hover { - @include btn-hover($green); -} -.btn-blue:hover { - @include btn-hover($blue); -} -.btn-purple:hover { - @include btn-hover($purple); -} - - -@media screen and (max-width: $phone-width) { - .wrapper { - margin: 0; - padding: 3rem 0 0 0; - - border-radius: 0; - } -} \ No newline at end of file diff --git a/static/css/buttons.sass b/static/css/buttons.sass new file mode 100644 index 0000000..be6b94c --- /dev/null +++ b/static/css/buttons.sass @@ -0,0 +1,36 @@ +.btn + margin: 0 + padding: 0.5rem 1rem + + width: auto + height: 2.5rem + + position: relative + + display: flex + justify-content: center + align-items: center + + border: transparent 0 solid + border-radius: 2px + + background: $black + color: $white !important + + font-size: 1rem + font-weight: 500 + line-height: 1 + + text-decoration: none + text-align: center + text-transform: uppercase + + cursor: pointer + transition: all 0.2s ease-in-out + + &:hover + background: $white + color: $black !important + + &:focus + outline: none \ No newline at end of file diff --git a/static/css/scss/_grid.scss b/static/css/scss/_grid.scss deleted file mode 100644 index edfb40a..0000000 --- a/static/css/scss/_grid.scss +++ /dev/null @@ -1,34 +0,0 @@ -body { - min-height: 100vh; - - display: grid; - grid-template-areas: 'aside nav' - 'aside wrapper' - 'footer wrapper'; - - grid-template-rows: 3rem auto 3rem; - grid-template-columns: 20rem 1fr; -} - -.nav { - grid-area: nav; -} -.wrapper { - grid-area: wrapper; -} -.aside { - grid-area: aside; -} -.footer { - grid-area: footer; -} - -@media screen and (max-width: $phone-width) { - body { - grid-template-areas: 'wrapper' - 'footer'; - - grid-template-rows: 1fr 3rem; - grid-template-columns: 1fr; - } -} \ No newline at end of file diff --git a/static/css/scss/_normalize.scss b/static/css/scss/_normalize.scss deleted file mode 100644 index 06fb2f4..0000000 --- a/static/css/scss/_normalize.scss +++ /dev/null @@ -1,32 +0,0 @@ -* { - box-sizing: border-box; - - font-family: $font-header; - font-weight: 400; -} - -html { - margin: 0; - padding: 0; - - background-color: $black; - color: $white; - - -ms-overflow-style: none; - scrollbar-width: none; - - ::-webkit-scrollbar { - display: none; - } -} - -body { - margin: 0; - padding: 0; - - min-height: 100vh; - - background-color: $black; - - scroll-behavior: smooth; -} \ No newline at end of file diff --git a/static/css/scss/_variables.scss b/static/css/scss/_variables.scss deleted file mode 100644 index 14badae..0000000 --- a/static/css/scss/_variables.scss +++ /dev/null @@ -1,46 +0,0 @@ -$black: #151515; -$white: #e8e3e3; - -$red: #B66467; -$yellow: #D9BC8C; -$green: #8C977D; -$blue: #8DA3B9; -//$dblue: #222c45; -$purple: #A988B0; - -$primary: #f5622d; - -@font-face { - font-family: 'Mona-Sans'; - src: url('../fonts/Mona-Sans.woff2') format('woff2 supports variations'), - url('../fonts/Mona-Sans.woff2') format('woff2-variations'); - font-weight: 200 900; - font-stretch: 75% 125%; -} -@font-face { - font-family: 'Hubot-Sans'; - src: url('../fonts/Hubot-Sans.woff2') format('woff2 supports variations'), - url('../fonts/Hubot-Sans.woff2') format('woff2-variations'); - font-weight: 200 900; - font-stretch: 75% 125%; -} - -$font-header: "Mona-Sans", sans-serif; -$font-body: "Hubot-Sans", sans-serif; - -$phone-width: 900px; - -@function hexToRGB($hex) { - @return red($hex), green($hex), blue($hex); -} - -:root { - --red: #{hexToRGB($red)}; - --yellow: #{hexToRGB($yellow)}; - --green: #{hexToRGB($green)}; - --blue: #{hexToRGB($blue)}; - --purple: #{hexToRGB($purple)}; -} - -// I want to use this somewhere -//background: linear-gradient(200deg, rgba($primary, 0.5) 1.7%, rgba($black, 0) 30%); \ No newline at end of file diff --git a/static/css/style.sass b/static/css/style.sass new file mode 100644 index 0000000..43c2fd8 --- /dev/null +++ b/static/css/style.sass @@ -0,0 +1,300 @@ +$black: #101010 +$dark: #151515 +$grey: #808080 +$white: #e8e3e3 +$primary: #8C977D + +@font-face + font-family: 'jetbrains_monoitalic' + src: url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff') format('woff') + font-weight: normal + font-style: normal + font-display: swap +@font-face + font-family: 'jetbrains_monoregular' + src: url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff') format('woff') + font-weight: normal + font-style: normal + font-display: swap + +html + margin: 0 + padding: 0 +body + margin: 0 + padding: 3rem 1rem 1rem + width: 100vw + min-height: 100vh + + background-color: $black + + font-family: 'jetbrains_monoregular', sans-serif + + display: flex + justify-content: center + align-items: center + + overflow-x: hidden + box-sizing: border-box + + * + box-sizing: border-box + +nav + margin: 0 + padding: 0.5rem 1rem + + width: 100vw + height: 3rem + + position: fixed + top: 0 + left: 0 + + display: flex + justify-content: center + align-items: center + gap: 1rem + + z-index: 1 + + color: $white + + a + margin: 0 + padding: 0 + + width: auto + height: 2rem + + position: relative + + display: flex + justify-content: center + align-items: center + + font-size: 1.1rem + font-weight: 400 + line-height: 1 + + text-align: left + text-decoration: none + text-transform: uppercase + + color: $grey + + &:hover + color: $white + + a.selected + color: $primary + + &:hover + color: $white + + span + margin: 0 0 0.2rem 0 + padding: 0 + + width: 2px + height: 1.25rem + + position: relative + + display: flex + justify-content: center + align-items: center + + background-color: $grey + +.wrapper + margin: 0 auto + padding: 1rem + + width: 100% + max-width: 621px + + min-height: auto + + position: relative + + display: flex + flex-direction: column + gap: 1rem + + background: $dark + color: $white + border-radius: 2px + + z-index: 2 + box-sizing: border-box + overflow: hidden + + h1 + margin: 0 // 0 1rem 0 + padding: 0 + + font-size: 2.25rem + font-weight: 600 + line-height: 1 + + text-align: left + text-transform: uppercase + white-space: break-spaces + + h2 + margin: 0 + padding: 0 + + font-size: 1.5rem + font-weight: 600 + line-height: 1 + + text-align: left + text-transform: uppercase + + h3 + margin: 0 + padding: 0 + + font-size: 1.25rem + font-weight: 600 + line-height: 1 + + text-align: left + text-transform: uppercase + + p + margin: 0 + padding: 0 + + font-size: 1.1rem + font-weight: 400 + line-height: 1.2 + + text-align: left + + color: $grey + + a + margin: 0 + padding: 0 + + font-size: 1.1rem + font-weight: 400 + line-height: 1.2 + + text-align: left + + color: $primary + + &:hover + color: $white + + img + margin: 0 auto + padding: 0 + + width: auto + max-width: 100% + + position: relative + + display: block + + border-radius: 2px + + object-fit: cover + + z-index: 1 + +p.subtitle + color: $white + text-transform: uppercase + +.content + display: flex + flex-direction: column + justify-content: space-between + gap: 0.5rem + + overflow: hidden + +.music + display: flex + flex-direction: row + gap: 1rem + + overflow: hidden + +.music-image + width: 5rem + height: 5rem + + border-radius: 2px + background-color: $black + + img + margin: 0 + padding: 0 + + width: 5rem + height: 5rem + + display: block + float: left + + border-radius: 2px + background-color: $dark + + object-fit: cover + +.music-info + display: flex + flex-direction: column + //justify-content: space-between + gap: 0.5rem + + overflow: hidden + + a + margin: 0 + padding: 0 + + font-size: 1.1rem + font-weight: 600 + line-height: 1.2 + + text-align: left + text-decoration: none + + color: $white + + &:hover + color: $primary + +p.music-nowplaying + color: $primary + + +@import "buttons" +@import "toast" + +@media (max-width: 669px) + .wrapper + max-width: 100% + border-radius: 0 + + h1 + font-size: 2rem + text-align: center + + p.subtitle + text-align: center + + .music + padding-left: 0.5rem + border-left: 2px solid $primary + + span, img + display: none \ No newline at end of file diff --git a/static/css/style.scss b/static/css/style.scss deleted file mode 100644 index 8d642c7..0000000 --- a/static/css/style.scss +++ /dev/null @@ -1,64 +0,0 @@ -@import 'scss/variables'; -@import 'scss/grid'; - -@import 'scss/normalize'; - -@import 'nav'; -@import 'aside'; -@import 'wrapper'; -@import 'footer'; - -h1 { - margin: 0; - padding: 0; - - font-size: 2rem; - text-align: center; - font-weight: 600; -} - -h2 { - margin: 0; - padding: 0; - - font-size: 1.5rem; - font-weight: 600; -} - -h3 { - margin: 0; - padding: 0; - - font-size: 1rem; - font-weight: 600; -} - -.error { - margin: 0; - padding: 0; - - width: 80%; - - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - h1 { - margin: 0; - padding: 0; - - font-size: 5rem; - text-align: center; - font-weight: 700; - } - - p { - margin: 0; - padding: 0; - - font-size: 1.5rem; - text-align: center; - font-weight: 400; - } -} \ No newline at end of file diff --git a/static/css/toast.sass b/static/css/toast.sass new file mode 100644 index 0000000..947da13 --- /dev/null +++ b/static/css/toast.sass @@ -0,0 +1,89 @@ +@keyframes toastTimeout + 0% + left: -100% + 100% + left: 0% + +.toast-container + margin: 0 + padding: 0 + + width: 100% + height: auto + max-width: 400px + + position: fixed + bottom: 0.5rem + left: 50% + transform: translateX(-50%) + + display: flex + flex-direction: column + gap: 0.5rem + + font-size: 1rem + font-weight: 500 + line-height: 1 + text-align: center + + z-index: 9999 + +.toast + margin: 0 + padding: 0.5rem 1rem + + min-height: 2.5rem + + position: relative + + display: flex + justify-content: center + align-items: center + + transform: scaleY(0) + + color: $white + background-color: $dark + border-radius: 2px + + opacity: 0 + + transition: all 0.3s ease-in-out + overflow: hidden + + &:hover + cursor: pointer + +.toast-show + opacity: 1 + transform: scaleY(1) + +.toast-hide + opacity: 0 + tansform: translateY(5rem) + +.toast-time + margin: 0 + padding: 0 + + width: 100% + height: 2px + + position: absolute + bottom: 0 + left: 0% + + background-color: $primary + + animation: toastTimeout 5s linear forwards + +@media (max-width: 669px) + .toast-container + padding: 0.5rem + + width: 100% + max-width: 100% + + bottom: 0 + left: 0 + transform: none \ No newline at end of file diff --git a/static/fonts/Hubot-Sans.woff2 b/static/fonts/Hubot-Sans.woff2 deleted file mode 100644 index 5089fc4..0000000 Binary files a/static/fonts/Hubot-Sans.woff2 and /dev/null differ diff --git a/static/fonts/Mona-Sans.woff2 b/static/fonts/Mona-Sans.woff2 deleted file mode 100644 index 8208a50..0000000 Binary files a/static/fonts/Mona-Sans.woff2 and /dev/null differ diff --git a/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff b/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff new file mode 100644 index 0000000..8bd716b Binary files /dev/null and b/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff differ diff --git a/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2 b/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2 new file mode 100644 index 0000000..1ca13f0 Binary files /dev/null and b/static/fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2 differ diff --git a/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff b/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff new file mode 100644 index 0000000..7c463d3 Binary files /dev/null and b/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff differ diff --git a/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff2 b/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff2 new file mode 100644 index 0000000..186f54a Binary files /dev/null and b/static/fonts/jetbrainsmono-variablefont_wght-webfont.woff2 differ diff --git a/static/images/funny.jpg b/static/images/funny.jpg deleted file mode 100644 index 2417b6d..0000000 Binary files a/static/images/funny.jpg and /dev/null differ diff --git a/static/images/landscape.webp b/static/images/landscape.webp deleted file mode 100644 index f34a982..0000000 Binary files a/static/images/landscape.webp and /dev/null differ diff --git a/static/images/leaves.jpg b/static/images/leaves.jpg deleted file mode 100644 index 5a8e723..0000000 Binary files a/static/images/leaves.jpg and /dev/null differ diff --git a/static/images/ref.png b/static/images/ref.png new file mode 100644 index 0000000..55b6f4c Binary files /dev/null and b/static/images/ref.png differ diff --git a/static/images/taidum.png b/static/images/taidum.png new file mode 100644 index 0000000..a9d4d7b Binary files /dev/null and b/static/images/taidum.png differ diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 0000000..7eaa429 --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,87 @@ +function addToast(text='Sample toast notification') { + var container = document.querySelector('.toast-container'); + + // Create notification element + var parent = document.createElement('span'); + parent.classList.add('toast'); + parent.innerText = text; + parent.onclick = function() { + if (parent.parentNode) { + parent.classList.add('toast-hide'); + + setTimeout(function() { + container.removeChild(parent); + }, 500); + } + }; + + // Create span to show time remaining + var timer = document.createElement('span'); + timer.classList.add('toast-time'); + parent.appendChild(timer); + + // Append notification to container + container.appendChild(parent); + setTimeout(function() { + parent.classList.add('toast-show'); + }, 1); + + // Remove notification after 5 seconds + setTimeout(function() { + if (parent.parentNode) { + parent.classList.add('toast-hide'); + + setTimeout(function() { + container.removeChild(parent); + }, 500); + } + }, 5000); +} + +function garble(obj, speed=1) { + const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ_-" + + let interval = null; + let iteration = 0; + + clearInterval(interval); + + interval = setInterval(() => { + obj.innerText = obj.innerText + .split("") + .map((letter, index) => { + if (index < iteration) { + return obj.dataset.value[index]; + } + // 27 as hyphens wrap text that can make page jump a lot + return letters[Math.floor(Math.random() * 27)] + }) + .join(""); + + if(iteration >= obj.dataset.value.length){ + clearInterval(interval); + } + + iteration += 1 / speed; + }, 30); +} + + +// Main title and subtitle, should only be one of each per page +if (document.querySelector("h1")) { + const title = document.querySelector("h1"); + garble(title, 1.5); +} +if (document.querySelector(".subtitle")) { + const subtitle = document.querySelector(".subtitle"); + garble(subtitle); +} + + +// h2 and h3 headers on page, there can be multiple so we need to loop through them +if (document.querySelectorAll("h2, h3")) { + const headers = document.querySelectorAll("h2, h3"); + headers.forEach((header) => { + garble(header); + }); +} \ No newline at end of file diff --git a/templates/about.html b/templates/about.html new file mode 100644 index 0000000..59b0068 --- /dev/null +++ b/templates/about.html @@ -0,0 +1,41 @@ +{% extends 'layout.html' %} +{% block nav_about %}selected{% endblock %} + +{% block content %} +
+

About-Me

+
+ +
+

Meeee :3

+

Hewwo, I'm a 17 year old nerd, who likes to code and tinker with computers!

+

I'm mostly a frontend developer, with some knowlage of the backend. I also enjoy programming for the hell of it

+
+ +
+

Fluffy-Bean

+

Fluffy Bean is a maned wolf, he reflects my personality and is my fursona

+

Refsheet made by mrHDash

+
+ + Orange maned wolf sneaking under a yellow sheet + +
+

Experiance

+

+ I'm quite well experianced with Python, HTML, CSS/Sass, and Shell Scripting. + And have some experiance with JavaScript, PHP, MySQL and a few other languages +

+

My main operating system has been Linux for about 1.5 years (Arch btw)

+

Now I have started to learn hardware and been messing around with Pi Picos!

+
+ +
+

Projects

+

Recently I have started working on a gallery, originally written in PHP for my own use before making it public

+

+ It is now written in Python with Flask and is open source! You can find it on GitHub. + Or on my self hosted instance of Gitea! +

+
+{% endblock %} \ No newline at end of file diff --git a/templates/blog.html b/templates/blog.html new file mode 100644 index 0000000..dacd34c --- /dev/null +++ b/templates/blog.html @@ -0,0 +1,9 @@ +{% extends 'layout.html' %} +{% block nav_blog %}selected{% endblock %} + +{% block content %} +
+

Blog

+

*sound of crickets chirping*

+
+{% endblock %} \ No newline at end of file diff --git a/templates/cretura.html b/templates/cretura.html new file mode 100644 index 0000000..46f138a --- /dev/null +++ b/templates/cretura.html @@ -0,0 +1,23 @@ +{% extends 'layout.html' %} +{% block nav_cretura %}selected{% endblock %} + +{% block content %} +

Cretura

+

Thanks to these critters!

+ +
+

Jeetix: Helping me with learning how to make websites!

+

Carty: Teaching me how to run servers and the networking!

+

mrHDash: For the Ref Sheet, also my smelly brother

+

Zadok: Silly taidum art on the icon of this page!

+ +
+ + +{% endblock %} \ No newline at end of file diff --git a/templates/error.html b/templates/error.html index 425f5f8..c118c0e 100644 --- a/templates/error.html +++ b/templates/error.html @@ -1,7 +1,7 @@ {% extends 'layout.html' %} {% block content %} -
-

{{error}}

-

{{msg}}

+
+

{{error}}

+

{{msg}}

{% endblock %} \ No newline at end of file diff --git a/templates/funny.html b/templates/funny.html deleted file mode 100644 index 5dc2b2b..0000000 --- a/templates/funny.html +++ /dev/null @@ -1,6 +0,0 @@ -{% extends 'layout.html' %} -{% block content %} -
- Funny -
-{% endblock %} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 31f4486..c8702f9 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,33 +1,17 @@ {% extends 'layout.html' %} +{% block nav_home %}selected{% endblock %} + {% block content %} -
-

{{title}}

+
+

Social-Media

+

{{msg}}

-
- - - - - -
- -
- Fluffy the maned wolf art, line art by Shep, colouring by meeee +
+ Twitter + Mastodon + Telegram + Github +
{% endblock %} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index 4974a92..f8d14a2 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -4,81 +4,30 @@ Leggy land - - + - -
- -

Leggy land

-
+ -
-
- - Home - - - - Thankies - - - - lol - - - -
- - - Gallery - - - - Server Status - - -
-
-
{% block content %} {% endblock %}
-
-

Last updated 27th Dec

-
- - +
\ No newline at end of file diff --git a/templates/music.html b/templates/music.html new file mode 100644 index 0000000..9c21025 --- /dev/null +++ b/templates/music.html @@ -0,0 +1,27 @@ +{% extends 'layout.html' %} +{% block nav_music %}selected{% endblock %} + +{% block content %} +

Enslaved-Sound

+ + {% for track in tracks %} +
+ +
+ {% if track.nowPlaying %} +

Now Playing:

+ {{track.name}} +

by {{track.artist}}

+ {% else %} + {{track.name}} +

by {{track.artist}}

+

on {{track.album}}

+ {% endif %} +
+
+ {% endfor %} + +
+

Provided by Last.fm

+
+{% endblock %} \ No newline at end of file diff --git a/templates/thankies.html b/templates/thankies.html deleted file mode 100644 index dbb4af5..0000000 --- a/templates/thankies.html +++ /dev/null @@ -1,15 +0,0 @@ -{% extends 'layout.html' %} -{% block content %} -
-

Special thanks to these wonderful cretura

-

Jeetix: Helping me with learning how to make websites!

-

Carty: Teaching me how to run servers and the networking!

-

mrHDash: For the Ref Sheet and most other art on the page!

-

Zadok: Silly taidum art!

-

Shep: For the free YHC!

-
- -
- -
-{% endblock %} \ No newline at end of file