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" >
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') }}" >
2025-02-17 15:41:48 -05:00
< meta property = "og:url" content = "https://{{ SERVERNAME }}/" >
2025-02-16 19:24:50 -05:00
< 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') }}" >
2025-02-16 16:07:55 -05:00
< title > ION Static Site Hosting - {% block title %}{% endblock %}</ title >
2025-02-14 22:37:52 -05:00
< link rel = "stylesheet" href = "{{ url_for('static', filename='styles.css') }}" id = "theme-style" >
2025-02-16 19:24:50 -05:00
< link rel = "icon" href = "{{ url_for('static', filename='favicon.ico') }}" >
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 ;
2025-02-17 22:40:50 -05:00
// get saved theme from localStorage
2025-02-14 22:37:52 -05:00
const savedTheme = localStorage . getItem ( 'theme' ) || 'dark' ;
body . setAttribute ( 'data-theme' , savedTheme );
if ( ! savedTheme ) localStorage . setItem ( 'theme' , savedTheme );
2025-02-17 22:40:50 -05:00
// set initial button text
themeToggle . textContent = savedTheme === 'dark' ? 'light mode' : 'dark mode' ;
2025-02-14 22:37:52 -05:00
themeToggle . addEventListener ( 'click' , () => {
const isDark = body . getAttribute ( 'data-theme' ) === 'dark' ;
body . setAttribute ( 'data-theme' , isDark ? 'light' : 'dark' );
localStorage . setItem ( 'theme' , isDark ? 'light' : 'dark' );
2025-02-17 22:40:50 -05:00
themeToggle . textContent = isDark ? 'dark mode' : 'light mode' ;
2025-02-14 22:37:52 -05:00
});
});
</ script >
2025-02-17 22:18:29 -05:00
< style >
. navbar-toggle {
display : none ;
}
@ media ( max-width : 768px ) {
. navbar-toggle {
display : block ;
}
}
</ style >
2025-02-14 22:37:52 -05:00
</ head >
< body >
< nav class = "navbar" >
< div class = "container" >
2025-02-18 01:27:40 +00:00
< a href = "{{ url_for('main.home', _external=True) }}" > Home</ a >
2025-02-17 22:40:50 -05:00
< button id = "nav-toggle" class = "navbar-toggle" aria-label = "menu" > ☰ </ button >
2025-02-17 22:18:29 -05:00
< 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 %}
2025-02-17 22:40:50 -05:00
< button id = "theme-toggle" class = "btn" > toggle dark mode</ button >
2025-02-17 22:18:29 -05:00
</ div >
2025-02-14 22:37:52 -05:00
</ 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 >
2025-02-17 22:40:50 -05:00
< 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 >
2025-02-14 22:37:52 -05:00
</ body >
2025-02-17 22:44:03 -05:00
</ html >
