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 >
