mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2025-05-27 22:03:16 +00:00
Create a Django website
This commit is contained in:
parent
69170f19fb
commit
a71584ef98
60 changed files with 1344 additions and 1150 deletions
|
|
@ -1,104 +0,0 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block nav_about %}selected{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content">
|
||||
<h1 data-value="About-Me">About-Me</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 data-value="Meeeeeee">Meeeeeee</h2>
|
||||
<p>Hewwo, I'm a 17 year old nerd, who likes to code and tinker with computers!</p>
|
||||
<p>I'm mostly a frontend developer, with some knowlage of the backend. I also enjoy programming for the hell of it</p>
|
||||
<p>Fluffy Bean is a maned wolf, he reflects my personality and is my fursona</p>
|
||||
<p>Refsheet made by mrHDash</p>
|
||||
</div>
|
||||
|
||||
<img src="{{ url_for('static', filename='images/ref.png') }}" alt="Orange maned wolf sneaking under a yellow sheet">
|
||||
|
||||
<div class="content">
|
||||
<h2 data-value="Experiance and Projects">Experiance and Projects</h2>
|
||||
<p>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</p>
|
||||
<p>My main operating system has been Linux for about 1.5 years (Arch btw)</p>
|
||||
<p>Now I have started to learn hardware and been messing around with Pi Picos!</p>
|
||||
<p>Recently I have started working on a gallery, originally written in PHP for my own use before making it public</p>
|
||||
<p>It is now written in Python with Flask and is open source! You can find it on <a href="https://github.com/Fluffy-Bean/onlylegs">GitHub</a>. Or on my self hosted instance of <a href="https://git.leggy.dev/Fluffy/onlylegs">Gitea</a>!</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 data-value="Level of knowlage">Level of knowlage</h2>
|
||||
<p>My levels of knowlage are based on a scale of 0-5, with 0 being very little experiance and 5 being best in the world, obviously ;3</p>
|
||||
|
||||
<span class="bar-chart">
|
||||
<h3 data-value="Languages">Languages</h3>
|
||||
{% for lang in languages %}
|
||||
<span class="sub_experiance"
|
||||
data-value="{{ languages[lang].level }}"
|
||||
style="background-color: {{ languages[lang].color }};">
|
||||
<span class="fg"><span>{{ lang }} - Since {{ languages[lang].since }}</span></span>
|
||||
<span class="bg">{{ lang }} - Since {{ languages[lang].since }}</span>
|
||||
</span>
|
||||
{% endfor %}
|
||||
|
||||
<h3 data-value="OS'">OS'</h3>
|
||||
{% for os in systems %}
|
||||
<span class="sub_experiance"
|
||||
data-value="{{ systems[os].level }}"
|
||||
style="background-color: {{ systems[os].color }};">
|
||||
<span class="fg"><span>{{ os }} - Since {{ systems[os].since }}</span></span>
|
||||
<span class="bg">{{ os }} - Since {{ systems[os].since }}</span>
|
||||
</span>
|
||||
{% endfor %}
|
||||
|
||||
<span class="marker" data-value="0"></span>
|
||||
<span class="marker" data-value="1"></span>
|
||||
<span class="marker" data-value="2"></span>
|
||||
<span class="marker" data-value="3"></span>
|
||||
<span class="marker" data-value="4"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var bars = document.querySelectorAll(".sub_experiance");
|
||||
|
||||
bars.forEach(bar => {
|
||||
var value = bar.getAttribute("data-value");
|
||||
|
||||
// 0 - 5
|
||||
if (value == 0) {
|
||||
bar.style.width = "20%";
|
||||
} else if (value == 1) {
|
||||
bar.style.width = "40%";
|
||||
} else if (value == 2) {
|
||||
bar.style.width = "60%";
|
||||
} else if (value == 3) {
|
||||
bar.style.width = "80%";
|
||||
} else if (value == 4) {
|
||||
bar.style.width = "100%";
|
||||
} else if (value == 5) {
|
||||
bar.style.width = "621%";
|
||||
}
|
||||
});
|
||||
|
||||
var markers = document.querySelectorAll(".marker");
|
||||
|
||||
markers.forEach(bar => {
|
||||
var value = bar.getAttribute("data-value");
|
||||
|
||||
// 0 - 5
|
||||
if (value == 0) {
|
||||
bar.style.left = "20%";
|
||||
} else if (value == 1) {
|
||||
bar.style.left = "40%";
|
||||
} else if (value == 2) {
|
||||
bar.style.left = "60%";
|
||||
} else if (value == 3) {
|
||||
bar.style.left = "80%";
|
||||
} else if (value == 4) {
|
||||
bar.style.left = "100%";
|
||||
} else if (value == 5) {
|
||||
bar.style.left = "621%";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block nav_cretura %}selected{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 data-value="Cretura">Cretura</h1>
|
||||
<p class="subtitle" data-value="Thanks to these critters!">Thanks to these critters!</p>
|
||||
|
||||
<div class="content" id="about">
|
||||
<p>Jeetix: Helping me with learning how to make websites!</p>
|
||||
<p>Carty: Teaching me how to run servers and the networking!</p>
|
||||
<p>mrHDash: For the Ref Sheet, also my smelly brother</p>
|
||||
<p>Zadok: Silly taidum art on the icon of this page!</p>
|
||||
<!--
|
||||
<p>
|
||||
Shep: Provided free YCH,
|
||||
<a href="https://twitter.com/ShepGoesBlep/status/1563946805062148102?s=20&t=0wVGqoYa74AsjSSnkZbzjA">you can find it here</a>
|
||||
</p>
|
||||
<img src="{{ url_for('static', filename='images/sneak.png') }}" alt="Orange maned wolf sneaking under a yellow sheet" height="200px" style="opacity:0" onload="fadeOnLoad(this)">
|
||||
-->
|
||||
</div>
|
||||
|
||||
<img src="{{url_for('static', filename='images/ny.png')}}">
|
||||
{% endblock %}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block content %}
|
||||
<div class="content">
|
||||
<h1 data-value="{{error}}">{{error}}</h1>
|
||||
<p class="subtitle" data-value="{{msg}}">{{msg}}</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block nav_home %}selected{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content">
|
||||
<h1 data-value="Social-Media">Social-Media</h1>
|
||||
<p class="subtitle" data-value="{{msg}}">{{msg}}</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<a href="https://twitter.com/fluffybeanUwU" class="btn" data-value="Twitter">Twitter</a>
|
||||
<a href="https://meow.social/@Fluffy_Bean" class="btn" data-value="Mastodon">Mastodon</a>
|
||||
<a href="https://t.me/Fluffy_Bean" class="btn" data-value="Telegram">Telegram</a>
|
||||
<a href="https://github.com/Fluffy-Bean" class="btn" data-value="Github">Github</a>
|
||||
<button class="btn" data-value="Discord" id="discord">Discord</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById("discord").onclick = function() {
|
||||
try {
|
||||
navigator.clipboard.writeText("Fluffy Bean#5212");
|
||||
addToast("Copied to clipboard");
|
||||
} catch (err) {
|
||||
addToast("Error copying to clipboard, are you on HTTP?");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Leggy land</title>
|
||||
<meta name="description" content="Fluffy Bean's amazing website">
|
||||
<link rel="icon" href="{{url_for('static', filename='images/taidum.png')}}">
|
||||
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a class="{% block nav_home %}{% endblock %}" href="/">Home</a>
|
||||
<a class="{% block nav_about %}{% endblock %}" href="/about">About</a>
|
||||
<a class="{% block nav_cretura %}{% endblock %}" href="/cretura">Cretura</a>
|
||||
<span class="spacer"></span>
|
||||
<a class="{% block nav_music %}{% endblock %}" href="/music">Music</a>
|
||||
</nav>
|
||||
|
||||
<div class="wrapper">
|
||||
{% block content %} {% endblock %}
|
||||
</div>
|
||||
|
||||
<div class="toast-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block nav_music %}selected{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 data-value="Muuuuuuusic">Muuuuuuusic</h1>
|
||||
|
||||
<div class="music">
|
||||
<span class="loader"></span>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>Provided by <a href="http://www.last.fm">Last.fm</a></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function processMusic(data) {
|
||||
const music = document.querySelector('.music');
|
||||
music.innerHTML = '';
|
||||
|
||||
data = JSON.parse(data);
|
||||
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
// Create track container
|
||||
const track = document.createElement('div');
|
||||
track.classList.add('track');
|
||||
|
||||
// Create track image container
|
||||
const trackImage = document.createElement('span');
|
||||
trackImage.classList.add('track-image');
|
||||
// UUUUUUUUUGHHHHHHHHHH
|
||||
trackImage.style.backgroundColor = `rgb(${value.palette[0]}, ${value.palette[1]}, ${value.palette[2]})`;
|
||||
// Create track image
|
||||
const trackImageImg = document.createElement('img');
|
||||
trackImageImg.src = value.image;
|
||||
trackImage.appendChild(trackImageImg);
|
||||
|
||||
|
||||
// Create track info container
|
||||
const trackInfo = document.createElement('div');
|
||||
trackInfo.classList.add('track-info');
|
||||
|
||||
// Create track title
|
||||
const trackTitle = document.createElement('a');
|
||||
trackTitle.href = value.url;
|
||||
trackTitle.innerHTML = value.name;
|
||||
|
||||
// Create track artist
|
||||
const trackArtist = document.createElement('p');
|
||||
trackArtist.innerHTML = 'by ' + value.artist;
|
||||
|
||||
// If track is now playing, add now playing text
|
||||
// Else add album name
|
||||
if (value.nowPlaying) {
|
||||
const trackNowPlaying = document.createElement('p');
|
||||
trackNowPlaying.classList.add('track-nowplaying');
|
||||
trackNowPlaying.innerHTML = 'Now Playing:';
|
||||
|
||||
// Append now playing and track info to track info
|
||||
trackInfo.appendChild(trackNowPlaying);
|
||||
trackInfo.appendChild(trackTitle);
|
||||
trackInfo.appendChild(trackArtist);
|
||||
} else {
|
||||
const trackAlbum = document.createElement('p');
|
||||
trackAlbum.innerHTML = 'on ' + value.album;
|
||||
|
||||
// Append track title, artist and album to track info
|
||||
trackInfo.appendChild(trackTitle);
|
||||
trackInfo.appendChild(trackArtist);
|
||||
trackInfo.appendChild(trackAlbum);
|
||||
}
|
||||
|
||||
// Append track image and track info to track
|
||||
track.appendChild(trackImage);
|
||||
track.appendChild(trackInfo);
|
||||
|
||||
// Append track to music
|
||||
music.appendChild(track);
|
||||
});
|
||||
}
|
||||
|
||||
// Make POST request with XHR
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/music', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.send(JSON.stringify({}));
|
||||
|
||||
// Handle response
|
||||
xhr.onloadend = function () {
|
||||
if (xhr.readyState == XMLHttpRequest.DONE) {
|
||||
// check if no error occurred
|
||||
if (xhr.status == 200) {
|
||||
processMusic(xhr.responseText);
|
||||
} else {
|
||||
const music = document.querySelector('.music');
|
||||
music.innerHTML = '<p>Music data could not be loaded :<</p>';
|
||||
}
|
||||
} else {
|
||||
const music = document.querySelector('.music');
|
||||
music.innerHTML = '<p>Music data could not be loaded :<</p>';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue