templates/base.html

<!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="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://sites.ion606.com/">
	<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>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;

			// Get saved theme from localStorage
			const savedTheme = localStorage.getItem('theme') || 'dark';
			body.setAttribute('data-theme', savedTheme);

			if (!savedTheme) localStorage.setItem('theme', savedTheme);

			// 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';
			});
		});
	</script>
</head>

<body>
	<nav class="navbar">
		<div class="container">
			<a href="{{ url_for('home') }}">Home</a>
			{% if current_user.is_authenticated %}
			<a href="{{ url_for('dashboard') }}">Dashboard</a>
			<a href="{{ url_for('logout') }}">Logout</a>
			{% else %}
			<a href="{{ url_for('login') }}">Login</a>
			<a href="{{ url_for('register') }}">Register</a>
			{% endif %}
			<button id="theme-toggle" class="btn">Toggle Dark Mode</button>
		</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>
</body>

</html>
initial commit 2025-02-14 22:37:52 -05:00			`<!DOCTYPE html>`
			`<html lang="en">`

			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
added icons 2025-02-16 19:24:50 -05:00			`<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://sites.ion606.com/">`
			`<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') }}">`


added styling 2025-02-16 16:07:55 -05:00			`<title>ION Static Site Hosting - {% block title %}{% endblock %}</title>`
initial commit 2025-02-14 22:37:52 -05:00			`<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" id="theme-style">`
added icons 2025-02-16 19:24:50 -05:00			`<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">`
initial commit 2025-02-14 22:37:52 -05:00
			`<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);`

			`if (!savedTheme) localStorage.setItem('theme', savedTheme);`

			`// 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';`
			`});`
			`});`
			`</script>`
			`</head>`

			`<body>`
			`<nav class="navbar">`
			`<div class="container">`
			`<a href="{{ url_for('home') }}">Home</a>`
			`{% if current_user.is_authenticated %}`
			`<a href="{{ url_for('dashboard') }}">Dashboard</a>`
			`<a href="{{ url_for('logout') }}">Logout</a>`
			`{% else %}`
			`<a href="{{ url_for('login') }}">Login</a>`
			`<a href="{{ url_for('register') }}">Register</a>`
			`{% endif %}`
			`<button id="theme-toggle" class="btn">Toggle Dark Mode</button>`
			`</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>`
			`</body>`

			`</html>`