Report-Generator / templates_preact /base_preact.html
root
Working CHanges to revesion ; add preact support
e8a57cb
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}DocuPDF{% endblock %}</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* === UNIFIED DESIGN SYSTEM === */
:root {
--bg-dark: #212529;
--bg-card: #2b3035;
--bg-elevated: #343a40;
--bg-hover: #3d444b;
--border-subtle: #495057;
--border-muted: #6c757d;
--text-primary: #e9ecef;
--text-muted: #adb5bd;
--accent-primary: #0d6efd;
--accent-info: #0dcaf0;
--accent-success: #198754;
--accent-warning: #ffc107;
--accent-danger: #dc3545;
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
}
/* Smooth Page Transitions */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.container, .container-fluid {
animation: fadeIn 0.25s ease-out;
}
</style>
{% block styles %}{% endblock %}
{% block head %}{% endblock %}
</head>
<body>
<!-- Simple Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top border-bottom border-secondary">
<div class="container-fluid">
<a class="navbar-brand" href="/dashboard">
<i class="bi bi-file-earmark-pdf-fill me-2 text-primary"></i>DocuPDF
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="/dashboard"><i class="bi bi-speedometer2 me-1"></i>Dashboard</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<i class="bi bi-flask me-1"></i>Beta
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/beta/demo"><i class="bi bi-lightning-charge me-1"></i>Preact Demo</a></li>
<li><a class="dropdown-item" href="/beta/dashboard"><i class="bi bi-speedometer2 me-1"></i>Preact Dashboard</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav">
{% if current_user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<i class="bi bi-person-circle me-1"></i>{{ current_user.username }}
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
</ul>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="content-wrapper" style="min-height: calc(100vh - 56px);">
{% block content %}{% endblock %}
</div>
<!-- Core Libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<!-- Preact (No Build) -->
<script type="module">
import { h, render } from 'https://esm.sh/preact@10.19.3';
import { useState, useEffect, useReducer, useCallback, useMemo, useRef } from 'https://esm.sh/preact@10.19.3/hooks';
import htm from 'https://esm.sh/htm@3.1.1';
// Make Preact available globally
window.html = htm.bind(h);
window.PreactLib = { h, render, useState, useEffect, useReducer, useCallback, useMemo, useRef };
</script>
{% block scripts %}{% endblock %}
</body>
</html>