2025-02-14 22:37:52 -05:00
<!DOCTYPE html>
< html lang = "en" >
2025-06-05 12:14:25 -04:00
< 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') }}" / >
< 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') }}" / >
< 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" ;
} ) ;
2025-02-14 22:37:52 -05:00
} ) ;
2025-06-05 12:14:25 -04:00
< / script >
2025-02-17 22:18:29 -05:00
2025-06-05 12:14:25 -04:00
< style >
2025-02-17 22:18:29 -05:00
. navbar-toggle {
2025-06-05 12:14:25 -04:00
display : none ;
2025-02-17 22:18:29 -05:00
}
2025-02-14 22:37:52 -05:00
2025-06-05 12:14:25 -04:00
@ media ( max-width : 768px ) {
. navbar-toggle {
display : block ;
}
}
< / 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" >
☰
< / 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-17 22:18:29 -05:00
< / div >
2025-06-05 12:14:25 -04:00
< / nav >
2025-02-14 22:37:52 -05:00
2025-06-05 12:14:25 -04:00
< 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 %}
2025-02-14 22:37:52 -05:00
< / div >
2025-02-17 22:40:50 -05:00
2025-06-05 12:14:25 -04: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" ) ;
}
} ) ;
2025-02-17 22:40:50 -05:00
} ) ;
2025-06-05 12:14:25 -04:00
< / script >
< / body >
< / html >
