From 3613f90fa547ca536b9b7f032f535d3011907222 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sun, 26 Feb 2023 19:24:11 +0000 Subject: [PATCH] Move song page to a request for faster loading Updated some info --- app.py | 75 ++++++++++++----------- static/css/style.sass | 136 +++++++++++++++++++++++++++++++++++++---- templates/about.html | 42 +++++++------ templates/blog.html | 9 --- templates/cretura.html | 2 +- templates/layout.html | 8 +-- templates/music.html | 110 +++++++++++++++++++++++++++------ 7 files changed, 285 insertions(+), 97 deletions(-) delete mode 100644 templates/blog.html diff --git a/app.py b/app.py index 194bef5..f207df0 100644 --- a/app.py +++ b/app.py @@ -1,11 +1,14 @@ -from flask import Flask, render_template, redirect +from flask import Flask, render_template, request, jsonify from flask_compress import Compress -import requests import dotenv + from random import choice import json +import requests +# Getting color palette from album art +import colorthief LASTFM_API_KEY = dotenv.get_key('./.env', 'LASTFM') @@ -19,18 +22,15 @@ Compress(app) # @app.route('/') def index(): - msg = ['This is a test string', + msg = ['Don\'t cry because it\'s over, smile because it happened', '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', + 'Gwa Gwa', + 'It\'s a UNIX system! I know this!', '*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'] @@ -47,37 +47,42 @@ def about(): return render_template('about.html') -@app.route('/music') +@app.route('/music', methods=['GET', 'POST']) def music(): - current_tracks = requests.get( + if request.method == 'POST': + current_tracks = requests.get( f'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Fluffy_Bean_&api_key={LASTFM_API_KEY}&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, - } + current_tracks = json.loads(current_tracks.text) - tracks.append(tmp_track) + tracks = [] + + for track in current_tracks['recenttracks']['track']: + # As django is weird with @attr in json data + # I make a new dict with a bool for nowPlaying + nowPlaying = False + if '@attr' in track: + nowPlaying = True + + # Yoink color palette from album art + color_thief = colorthief.ColorThief(requests.get(track['image'][2]['#text'], stream=True).raw) + palette = color_thief.get_palette() + + tmp_track = { + 'name': track['name'], + 'artist': track['artist']['#text'], + 'album': track['album']['#text'], + 'url': track['url'], + 'image': track['image'][2]['#text'], + 'nowPlaying': nowPlaying, + 'palette': palette[0] + } + + tracks.append(tmp_track) + + return jsonify(tracks) - return render_template('music.html', tracks=tracks) - - -@app.route('/blog') -def blog(): - return render_template('blog.html') - + # GET request + return render_template('music.html') # # ERROR HANDLERS diff --git a/static/css/style.sass b/static/css/style.sass index 43c2fd8..25f243d 100644 --- a/static/css/style.sass +++ b/static/css/style.sass @@ -1,3 +1,5 @@ +@use 'sass:map' + $black: #101010 $dark: #151515 $grey: #808080 @@ -220,26 +222,136 @@ p.subtitle overflow: hidden +$languages: ("python": #3776AB, "js": #F7DF1E, "html": #E34F26, "css": #1572B6, "sass": #CC6699, "php": #777BB4, "sql": #4479A1, "shell": #89E051, "rust": #CE422B) +$os: ("ubuntu": #E95420, "arch": #1793D1, "proxmox": #E57000, "manjaro": #35BF5C, "windows": #0078D6) +.sub_experiance + padding-left: 0.25rem !important + position: relative + color: $white !important + + &::before + content: '' + + width: 2px + height: 100% + + position: absolute + top: 0 + left: 0 + + background-color: $primary + border-radius: 2px + + opacity: 0.5 + z-index: -1 + + @each $lang, $color in $languages + &.#{$lang} + &::before + background-color: $color + + @each $os, $color in $os + &.#{$os} + &::before + background-color: $color + + &.vbad + &::before + width: 2px + &.bad + &::before + width: 10% + &.ok + &::before + width: 20% + &.good + &::before + width: 40% + &.vgood + &::before + width: 80% + &.excellent + &::before + width: 100% + + span + font-size: 0.8rem + + +@keyframes loader + 0% + width: 0 + left: 0 + 30% + width: 100% + left: 0 + 60% + width: 100% + left: 100% + 100% + width: 100% + left: 100% + +.loader + margin: 1rem 0 + + width: 100% + height: 2px + + position: relative + + background-color: $black + + overflow: hidden + + &::after + content: '' + + margin: 0 + padding: 0 + + width: 0 + height: 100% + + position: absolute + top: 0 + left: 0 + + background-color: $primary + + animation: loader 1s ease-in-out infinite + .music + display: flex + flex-direction: column + gap: 1rem + +.track display: flex flex-direction: row gap: 1rem + position: relative + overflow: hidden -.music-image +.track-image + padding: 0px + width: 5rem height: 5rem border-radius: 2px background-color: $black + transition: all 0.3s cubic-bezier(.86,0,.07,1) + img margin: 0 padding: 0 - width: 5rem - height: 5rem + width: 100% + height: 100% display: block float: left @@ -247,9 +359,12 @@ p.subtitle border-radius: 2px background-color: $dark + opacity: 1 object-fit: cover -.music-info + transition: all 0.2s cubic-bezier(.86,0,.07,1) + +.track-info display: flex flex-direction: column //justify-content: space-between @@ -273,10 +388,9 @@ p.subtitle &:hover color: $primary -p.music-nowplaying +p.track-nowplaying color: $primary - @import "buttons" @import "toast" @@ -292,9 +406,9 @@ p.music-nowplaying p.subtitle text-align: center - .music - padding-left: 0.5rem - border-left: 2px solid $primary + .track-image + width: 2px + height: auto - span, img - display: none \ No newline at end of file + img + opacity: 0 \ No newline at end of file diff --git a/templates/about.html b/templates/about.html index 59b0068..e831734 100644 --- a/templates/about.html +++ b/templates/about.html @@ -7,35 +7,43 @@
-

Meeee :3

+

Meeeeeee

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 + 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 -

+

Experiance and Projects

+

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!

+

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!

-

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! -

+

Languages

+

Python Good

+

HTML Very Good

+

CSS Very Good

+

Sass/SCSS Very Good

+

JavaScript Meh

+

PHP Good

+

SQL Ok

+

Shell Scripting Ok

+

Rust Learning

+
+ +
+

OS'

+

Ubuntu Good

+

Arch Very Good

+

Proxmox Decent

+

Manjaro Breaking bad

+

Windows Ok

{% endblock %} \ No newline at end of file diff --git a/templates/blog.html b/templates/blog.html deleted file mode 100644 index dacd34c..0000000 --- a/templates/blog.html +++ /dev/null @@ -1,9 +0,0 @@ -{% 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 index 46f138a..a6a4407 100644 --- a/templates/cretura.html +++ b/templates/cretura.html @@ -19,5 +19,5 @@ --> - + {% endblock %} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index f8d14a2..05c303e 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -8,18 +8,12 @@ - diff --git a/templates/music.html b/templates/music.html index 9c21025..7472ebd 100644 --- a/templates/music.html +++ b/templates/music.html @@ -2,26 +2,102 @@ {% block nav_music %}selected{% endblock %} {% block content %} -

Enslaved-Sound

+

Muuuuuuusic

- {% 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