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 ;
// 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 >
2025-02-17 22:18:29 -05:00
< style >
/* collapsible navbar */
. navbar-links {
display : flex ;
align-items : center ;
gap : 1 rem ;
}
. navbar-toggle {
display : none ;
font-size : 1.5 rem ;
background : none ;
border : none ;
color : var ( - - nav - text ) ;
cursor : pointer ;
}
@ media ( max-width : 768px ) {
. navbar-links {
display : none ;
flex-direction : column ;
width : 100 % ;
}
. navbar-links . active {
display : flex ;
}
. 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:18:29 -05:00
< button id = "nav-toggle" class = "navbar-toggle" > ☰ < / 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 >
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 >
< / body >
< / html >
