ION_Archive/static-site-hosting
1
0
Fork 0
mirror of https://github.com/ION606/static-site-hosting.git synced 2026-05-14 22:16:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

name change

Browse Source
This commit is contained in:
ION606
2025-06-05 12:14:25 -04:00
parent 8033545849
commit 23b5468d42
3 changed files with 153 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+10 -6
View File
@@ -1,15 +1,18 @@
# ION Static Site Hosting
# TinySite.cloud Hosting
ION Static Site Hosting is a lightweight Python application designed to serve static websites effortlessly. Built with Flask, it allows developers to deploy HTML, CSS, JavaScript, and image files quickly, making it ideal for personal projects, documentation, or simple web pages.
TinySite.cloud Hosting is a lightweight Python application designed to serve static websites effortlessly. Built with Flask, it allows developers to deploy HTML, CSS, JavaScript, and image files quickly, making it ideal for personal projects, documentation, or simple web pages.
## Features
- Easy usage
- Sleek and simple UI
- Syntax highlighting/In-browser code editor
- Default dark mode!!!
- Easy usage
- Sleek and simple UI
- Syntax highlighting/In-browser code editor
- Default dark mode!!!
## Self-Hosting?
Just clone the repo, then use the following to get started:
```bash
python -m venv .venv
# Activate the env (use .venv/bin/activate.fish for fish)
@@ -17,6 +20,7 @@ source .venv/bin/activate
pip install -r requirements.txt
python app.py
```
And that's it! The app should be available at http://localhost:5121
## Contributing
app/templates/base.html
+124 -102
View File
@@ -1,117 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="TinySite.cloud Hosting offers effortless hosting and sharing of static sites with instant deployment, dark mode interface, and secure, private data handling!" />
<meta
name="keywords"
content="static site hosting, instant deployment, dark mode, secure hosting, private data, file management, blazing fast" />
<meta name="author" content="ION606" />
<meta property="og:title" content="TinySite.cloud" />
<meta
property="og:description"
content="Host and share your static sites effortlessly with TinySite.cloud Hosting. Enjoy instant deployment, a sleek dark mode interface, and secure, private data handling!" />
<meta
property="og:image"
content="{{ url_for('static', filename='hosting.png') }}" />
<meta property="og:url" content="https://{{ SERVERNAME }}/" />
<meta
name="twitter:card"
content="{{ url_for('static', filename='hosting.png') }}" />
<meta name="twitter:title" content="TinySite.cloud" />
<meta
name="twitter:description"
content="Host and share your static sites effortlessly with TinySite.cloud Hosting. Enjoy instant deployment, a sleek dark mode interface, and secure, private data handling!" />
<meta
name="twitter:image"
content="{{ url_for('static', filename='hosting.png') }}" />
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="ION Static Site Hosting offers effortless hosting and sharing of static sites with instant deployment, dark mode interface, and secure, private data handling!">
<meta name="keywords"
content="static site hosting, instant deployment, dark mode, secure hosting, private data, file management, blazing fast">
<meta name="author" content="ION606">
<meta property="og:title" content="ION Static Site Hosting">
<meta property="og:description"
content="Host and share your static sites effortlessly with ION Static Site Hosting. Enjoy instant deployment, a sleek dark mode interface, and secure, private data handling!">
<meta property="og:image" content="{{ url_for('static', filename='hosting.png') }}">
<meta property="og:url" content="https://{{ SERVERNAME }}/">
<meta name="twitter:card" content="{{ url_for('static', filename='hosting.png') }}">
<meta name="twitter:title" content="ION Static Site Hosting">
<meta name="twitter:description"
content="Host and share your static sites effortlessly with ION Static Site Hosting. Enjoy instant deployment, a sleek dark mode interface, and secure, private data handling!">
<meta name="twitter:image" content="{{ url_for('static', filename='hosting.png') }}">
<title>TinySite.cloud - {% block title %}{% endblock %}</title>
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles.css') }}"
id="theme-style" />
<link
rel="icon"
href="{{ url_for('static', filename='favicon.ico') }}" />
<title>ION Static Site Hosting - {% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" id="theme-style">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const themeToggle = document.querySelector("#theme-toggle");
const body = document.body;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.querySelector('#theme-toggle');
const body = document.body;
// get saved theme from localStorage
const savedTheme = localStorage.getItem("theme") || "dark";
body.setAttribute("data-theme", savedTheme);
// get saved theme from localStorage
const savedTheme = localStorage.getItem('theme') || 'dark';
body.setAttribute('data-theme', savedTheme);
if (!savedTheme) localStorage.setItem("theme", savedTheme);
if (!savedTheme) localStorage.setItem('theme', savedTheme);
// set initial button text
themeToggle.textContent =
savedTheme === "dark" ? "light mode" : "dark mode";
// set initial button text
themeToggle.textContent = savedTheme === 'dark' ? 'light mode' : 'dark mode';
themeToggle.addEventListener('click', () => {
const isDark = body.getAttribute('data-theme') === 'dark';
body.setAttribute('data-theme', isDark ? 'light' : 'dark');
localStorage.setItem('theme', isDark ? 'light' : 'dark');
themeToggle.textContent = isDark ? 'dark mode' : 'light mode';
themeToggle.addEventListener("click", () => {
const isDark = body.getAttribute("data-theme") === "dark";
body.setAttribute("data-theme", isDark ? "light" : "dark");
localStorage.setItem("theme", isDark ? "light" : "dark");
themeToggle.textContent = isDark
? "dark mode"
: "light mode";
});
});
});
</script>
</script>
<style>
.navbar-toggle {
display: none;
}
@media (max-width: 768px) {
<style>
.navbar-toggle {
display: block;
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="container">
<a href="{{ url_for('main.home', _external=True) }}">Home</a>
<button id="nav-toggle" class="navbar-toggle" aria-label="menu">&#9776;</button>
<div id="navbar-links" class="navbar-links">
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.dashboard', _external=True) }}">Dashboard</a>
<a href="{{ url_for('main.logout', _external=True) }}">Logout</a>
{% else %}
<a href="{{ url_for('main.login', _external=True) }}">Login</a>
<a href="{{ url_for('main.register', _external=True) }}">Register</a>
{% endif %}
<button id="theme-toggle" class="btn">toggle dark mode</button>
</div>
</div>
</nav>
<div class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="flash-message flash-{{ category }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const navToggle = document.querySelector('#nav-toggle');
const navbarLinks = document.querySelector('#navbar-links');
const navbar = document.querySelector('.navbar');
navToggle.addEventListener('click', () => {
navbarLinks.classList.toggle('active');
navToggle.classList.toggle('active');
});
document.addEventListener('click', (e) => {
if (!navbar.contains(e.target)) {
navbarLinks.classList.remove('active');
navToggle.classList.remove('active');
@media (max-width: 768px) {
.navbar-toggle {
display: block;
}
});
});
</script>
</body>
}
</style>
</head>
</html>
<body>
<nav class="navbar">
<div class="container">
<a href="{{ url_for('main.home', _external=True) }}">Home</a>
<button id="nav-toggle" class="navbar-toggle" aria-label="menu">
&#9776;
</button>
<div id="navbar-links" class="navbar-links">
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.dashboard', _external=True) }}"
>Dashboard</a
>
<a href="{{ url_for('main.logout', _external=True) }}"
>Logout</a
>
{% else %}
<a href="{{ url_for('main.login', _external=True) }}"
>Login</a
>
<a href="{{ url_for('main.register', _external=True) }}"
>Register</a
>
{% endif %}
<button id="theme-toggle" class="btn">
toggle dark mode
</button>
</div>
</div>
</nav>
<div class="container">
{% with messages = get_flashed_messages(with_categories=true) %} {%
if messages %} {% for category, message in messages %}
<div class="flash-message flash-{{ category }}">{{ message }}</div>
{% endfor %} {% endif %} {% endwith %} {% block content %}{%
endblock %}
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const navToggle = document.querySelector("#nav-toggle");
const navbarLinks = document.querySelector("#navbar-links");
const navbar = document.querySelector(".navbar");
navToggle.addEventListener("click", () => {
navbarLinks.classList.toggle("active");
navToggle.classList.toggle("active");
});
document.addEventListener("click", (e) => {
if (!navbar.contains(e.target)) {
navbarLinks.classList.remove("active");
navToggle.classList.remove("active");
}
});
});
</script>
</body>
</html>
app/templates/home.html
+19 -18
View File
@@ -1,6 +1,4 @@
{% extends "base.html" %}
{% block content %}
{% extends "base.html" %} {% block content %}
<div class="floating-balls"></div>
<style>
@@ -13,12 +11,13 @@
}
body {
font-family: 'Arial', sans-serif;
font-family: "Arial", sans-serif;
line-height: 1.6;
background-color: var(--bg-color);
color: var(--text-color);
padding: 20px;
transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
transition: background-color var(--transition-speed) ease,
color var(--transition-speed) ease;
animation: fadeIn var(--fade-duration) ease-out;
}
@@ -62,7 +61,6 @@
}
@keyframes bounce {
0%,
20%,
50%,
@@ -199,14 +197,16 @@
</style>
<header>
<h1>🚀 ION Static Site Hosting</h1>
<h1>🚀 TinySite.cloud</h1>
<p>Host and share your static sites effortlessly.</p>
</header>
<div class="main-container">
<h2>Why Choose Us?</h2>
<p>Whether you’re a developer, designer, or just need to showcase your work, we make it easy to host and share
static sites.</p>
<p>
Whether you’re a developer, designer, or just need to showcase your
work, we make it easy to host and share static sites.
</p>
<div class="feature-list">
<div class="feature">
@@ -247,10 +247,10 @@
<!-- JavaScript to create balls and add "pop" effects -->
<script>
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
document.addEventListener("DOMContentLoaded", async () => {
const container = document.querySelector('.floating-balls');
const container = document.querySelector(".floating-balls");
// Generate a random number of balls between 10 and 30
const ballCount = Math.floor(Math.random() * 21) + 10;
@@ -258,14 +258,14 @@
const ball = document.createElement("div");
ball.classList.add("floating-ball");
await wait(Math.random() * 2000)
await wait(Math.random() * 2000);
// Randomize properties
const size = 30 + Math.random() * 40;
ball.style.width = size + "px";
ball.style.height = size + "px";
ball.style.left = Math.random() * 100 + "%";
ball.style.animationDuration = (10 + Math.random() * 10) + "s";
ball.style.animationDuration = 10 + Math.random() * 10 + "s";
ball.style.animationDelay = Math.random() * 5 + "s";
container.appendChild(ball);
@@ -273,16 +273,17 @@
// random pop every 2 seconds
setInterval(() => {
const balls = document.querySelectorAll('.floating-ball');
const balls = document.querySelectorAll(".floating-ball");
if (balls.length) {
const randomBall = balls[Math.floor(Math.random() * balls.length)];
randomBall.classList.add('pop');
const randomBall =
balls[Math.floor(Math.random() * balls.length)];
randomBall.classList.add("pop");
setTimeout(() => {
randomBall.classList.remove('pop');
randomBall.classList.remove("pop");
}, 500);
}
}, 2000);
});
</script>
{% endblock %}
{% endblock %}