mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2025-05-28 14:23:13 +00:00
Make page not look shit
This commit is contained in:
parent
c1559307b6
commit
c32d7e3246
33 changed files with 716 additions and 715 deletions
41
templates/about.html
Normal file
41
templates/about.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
{% 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="Meeee :3">Meeee :3</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>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 data-value="Fluffy-Bean">Fluffy-Bean</h2>
|
||||
<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" style="opacity:0" onload="fadeOnLoad(this)">
|
||||
|
||||
<div class="content">
|
||||
<h2 data-value="Experiance">Experiance</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>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 data-value="Projects">Projects</h2>
|
||||
<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>
|
||||
{% endblock %}
|
||||
9
templates/blog.html
Normal file
9
templates/blog.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block nav_blog %}selected{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content">
|
||||
<h1 data-value="Blog">Blog</h1>
|
||||
<p class="subtitle" data-value="*sound of crickets chirping*">*sound of crickets chirping*</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
23
templates/cretura.html
Normal file
23
templates/cretura.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{% 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')}}" style="opacity:0" onload="fadeOnLoad(this)">
|
||||
{% endblock %}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block content %}
|
||||
<div class="error">
|
||||
<h1>{{error}}</h1>
|
||||
<p style="text-align: center;">{{msg}}</p>
|
||||
<div class="content">
|
||||
<h1 data-value="{{error}}">{{error}}</h1>
|
||||
<p class="subtitle" data-value="{{msg}}">{{msg}}</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block content %}
|
||||
<div class="content content-img">
|
||||
<img src="{{ url_for('static', filename='images/funny.jpg') }}" alt="Funny" id="funny">
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,33 +1,17 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block nav_home %}selected{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content content-header">
|
||||
<p>{{title}}</p>
|
||||
<div class="content">
|
||||
<h1 data-value="Social-Media">Social-Media</h1>
|
||||
<p class="subtitle" data-value="{{msg}}">{{msg}}</p>
|
||||
</div>
|
||||
|
||||
<div class="content content-list" id="contact">
|
||||
<button class="btn btn-blue">
|
||||
Twitter
|
||||
<i class="ph-twitter-logo"></i>
|
||||
</button>
|
||||
<button class="btn btn-purple">
|
||||
Mastodon
|
||||
<i class="ph-linux-logo"></i>
|
||||
</button>
|
||||
<button class="btn btn-blue">
|
||||
Telegram
|
||||
<i class="ph-telegram-logo"></i>
|
||||
</button>
|
||||
<button class="btn btn-yellow">
|
||||
Github
|
||||
<i class="ph-github-logo"></i>
|
||||
</button>
|
||||
<button class="btn btn-red">
|
||||
Discord
|
||||
<i class="ph-discord-logo"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="content content-img" id="contact">
|
||||
<img src="{{ url_for('static', filename='images/sneak.png') }}" alt="Fluffy the maned wolf art, line art by Shep, colouring by meeee" style="max-width: 500px;">
|
||||
<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>
|
||||
{% endblock %}
|
||||
|
|
@ -4,81 +4,30 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Leggy land</title>
|
||||
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}" defer>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||||
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
||||
crossorigin="anonymous">
|
||||
<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>
|
||||
<script>
|
||||
function fadeOnLoad(obj) {
|
||||
obj.style.transition = "opacity 1s";
|
||||
obj.style.opacity = 1;
|
||||
}
|
||||
</script>
|
||||
<script src="https://unpkg.com/phosphor-icons" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<button class="nav-toggle"><i class="ph-list"></i></button>
|
||||
<p>Leggy land</p>
|
||||
</div>
|
||||
<nav>
|
||||
<a class="{% block nav_home %}{% endblock %}" href="/">Home</a>
|
||||
<a class="{% block nav_cretura %}{% endblock %}" href="/cretura">Cretura</a>
|
||||
<a class="{% block nav_about %}{% endblock %}" href="/about">About</a>
|
||||
<span class="spacer"></span>
|
||||
<a class="{% block nav_music %}{% endblock %}" href="/music">Music</a>
|
||||
</nav>
|
||||
|
||||
<div class="aside">
|
||||
<div class="aside-container">
|
||||
<a href="/#" class="aside-item">
|
||||
Home
|
||||
<i class="ph-arrow-right"></i>
|
||||
</a>
|
||||
<a href="/thankies" class="aside-item">
|
||||
Thankies
|
||||
<i class="ph-heart"></i>
|
||||
</a>
|
||||
<a href="/funny" class="aside-item">
|
||||
lol
|
||||
<i class="ph-arrow-right"></i>
|
||||
</a>
|
||||
|
||||
<hr>
|
||||
|
||||
<a href="/" class="aside-item">
|
||||
Gallery
|
||||
<i class="ph-image"></i>
|
||||
</a>
|
||||
<a href="/status" class="aside-item">
|
||||
Server Status
|
||||
<i class="ph-cpu"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
{% block content %} {% endblock %}
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>Last updated 27th Dec</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let btnColours = [ 'red', 'yellow', 'green', 'blue', 'purple']
|
||||
let asideElements = document.querySelectorAll('.aside-item');
|
||||
|
||||
for (let i = 0; i < asideElements.length; i++) {
|
||||
asideElements[i].addEventListener("mouseover", function() {
|
||||
let randomColour = Math.floor(Math.random() * btnColours.length);
|
||||
this.classList.add(`aside-${btnColours[randomColour]}`);
|
||||
});
|
||||
|
||||
asideElements[i].addEventListener("mouseout", function() {
|
||||
this.classList = 'aside-item';
|
||||
});
|
||||
}
|
||||
|
||||
let navToggle = document.querySelector('.nav-toggle');
|
||||
let aside = document.querySelector('.aside');
|
||||
|
||||
navToggle.addEventListener('click', function() {
|
||||
aside.classList.toggle('aside-active');
|
||||
});
|
||||
|
||||
function fadeOnLoad(obj) {
|
||||
$(obj).fadeIn(621);
|
||||
}
|
||||
</script>
|
||||
<div class="toast-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
27
templates/music.html
Normal file
27
templates/music.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block nav_music %}selected{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 data-value="Enslaved-Sound">Enslaved-Sound</h1>
|
||||
|
||||
{% for track in tracks %}
|
||||
<div class="music">
|
||||
<span class="music-image"><img src="{{track.image}}" style="opacity:0" onload="fadeOnLoad(this)"></span>
|
||||
<div class="music-info">
|
||||
{% if track.nowPlaying %}
|
||||
<p class="music-nowplaying">Now Playing:</p>
|
||||
<a href={{track.url}}>{{track.name}}</a>
|
||||
<p>by {{track.artist}}</p>
|
||||
{% else %}
|
||||
<a href={{track.url}}>{{track.name}}</a>
|
||||
<p>by {{track.artist}}</p>
|
||||
<p>on {{track.album}}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="content">
|
||||
<p>Provided by <a href="http://www.last.fm">Last.fm</a></p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block content %}
|
||||
<div class="content content-default" id="about">
|
||||
<h2>Special thanks to these wonderful cretura</h2>
|
||||
<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 and most other art on the page!</p>
|
||||
<p>Zadok: Silly taidum art!</p>
|
||||
<p>Shep: For the free YHC!</p>
|
||||
</div>
|
||||
|
||||
<div class="content content-img">
|
||||
<img src="{{url_for('static', filename='images/ny.png')}}" style="max-width: 800px;">
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue