base.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Calculadora Solar</title>
  7. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  8. <script>
  9. // Inicialización del tema
  10. const getStoredTheme = () => localStorage.getItem('theme');
  11. const getPreferredTheme = () => {
  12. const storedTheme = getStoredTheme();
  13. if (storedTheme) return storedTheme;
  14. return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  15. };
  16. document.documentElement.setAttribute('data-bs-theme', getPreferredTheme());
  17. </script>
  18. </head>
  19. <body>
  20. <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
  21. <div class="container">
  22. <a class="navbar-brand" href="{{ url_for('main.index') }}">Calculadora de Viabilidad Solar</a>
  23. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
  24. <span class="navbar-toggler-icon"></span>
  25. </button>
  26. <div class="collapse navbar-collapse" id="navbarNav">
  27. <ul class="navbar-nav ms-auto">
  28. <li class="nav-item">
  29. <a class="nav-link" href="{{ url_for('main.casas') }}">Casas</a>
  30. </li>
  31. <li class="nav-item">
  32. <a class="nav-link" href="{{ url_for('main.proyectos') }}">Proyectos</a>
  33. </li>
  34. <li class="nav-item">
  35. <a class="nav-link" href="{{ url_for('main.metodologia') }}">Cómo Funciona</a>
  36. </li>
  37. <li class="nav-item">
  38. <a class="nav-link" href="{{ url_for('main.configuracion') }}">Configuración</a>
  39. </li>
  40. <li class="nav-item">
  41. <button class="btn nav-link" id="theme-toggle" title="Cambiar tema">
  42. 🌓
  43. </button>
  44. </li>
  45. </ul>
  46. </div>
  47. </div>
  48. </nav>
  49. <div class="container">
  50. {% block content %}{% endblock %}
  51. </div>
  52. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  53. <script>
  54. document.getElementById('theme-toggle').addEventListener('click', () => {
  55. const currentTheme = document.documentElement.getAttribute('data-bs-theme');
  56. const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  57. document.documentElement.setAttribute('data-bs-theme', newTheme);
  58. localStorage.setItem('theme', newTheme);
  59. });
  60. </script>
  61. {% block scripts %}{% endblock %}
  62. </body>
  63. </html>