summaryrefslogtreecommitdiff
path: root/templates/base.html
blob: 6dfd59fe2d8f42f78dc7db493d264d1be2b54a3b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#336791">

    <!-- CSS -->
    <link href="https://assets.postgresql.org/bootstrap/4/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link href="https://assets.postgresql.org/font-awesome/fontawesome-free-6/css/all.min.css" rel="stylesheet" crossorigin="anonymous">

    <link rel="stylesheet" href="/static/css/pgcac.css">

    <title>{%block title%}{%endblock%} - PostgreSQL Community Association</title>

    <script>
      let theme = 'light';
      if (localStorage.getItem('theme')) {
        if (localStorage.getItem('theme') === 'dark') {
          theme = 'dark';
        }
      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        theme = 'dark';
      }
     </script>
  </head>
  <body>
    <div class="container-fluid">

      <!-- Nav -->
      <div class="row justify-content-md-center">
         <div class="col">
           <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
             <a class="navbar-brand p-0" href="/">
               <img class="logo" src="/static/img/elephant.png" alt="PostgreSQL Elephant Logo">
             </a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#pgNavbar" aria-controls="pgNavbar" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="pgNavbar">
               <ul class="navbar-nav mr-auto">
                 <li class="nav-item p-2"><a href="/" title="Home">Home</a></li>
                 <li class="nav-item p-2"><a href="/about/pgca" title="About">About</a></li>
                 <li class="nav-item p-2"><a href="/sponsors" title="Sponsors">Sponsors</a></li>
                 <li class="nav-item p-2"><a href="/donate" title="Donate">Donate</a></li>
                 <li class="nav-item p-2"><a href="/about/contact" title="Contact">Contact</a></li>
               </ul>
               <form id="form-theme" class="form-inline" style="display: none;">
                 <button id="btn-theme" class="btn btn-default ml-1" type="button" onclick="theme_switch()" title="Toggle light/dark mode"></button>
               </form>
             </div>
	       </nav>
         </div> <!-- col -->
      </div> <!-- row -->
      <!-- End Nav -->

      <!-- Content -->
      <div class="container-fluid margin">
        <div class="row">

          <!-- Side Nav -->
          <div class="col-lg-2">
            <div>
             <div>
               <h2>Quick Links</h2>
               <ul>
                 <li><a href="/">Home</a></li>
                 <li><a href="/about/pgca">About</a></li>
                 <li><a href="/donate">Donate</a></li>
                 <li><a href="/sponsors">Sponsors</a></li>
                 <li><a href="/faq">FAQ</a></li>
                 <li><a href="/trademarks/list">Trademarks</a></li>
                 <li><a href="/domains/list">Domain Names</li>
                 <li><a href="/about/privacypolicy/">Privacy Policy</a></li>
                 <li><a href="/about/website/">Website</a></li>
                 <li><a href="/about/contact/">Contact</a></li>
               </ul>
             </div>
            </div>
          </div>
          <!-- End Side Nav -->

          <!-- Content -->
          <div class="col-lg-10">
            <div>

              <div class="row">
                <!-- Main Content -->
                <div class="col-md-9">
                  {% block maincontent %}{% endblock %}
                </div>
                <!-- End Main Content -->

                <!-- Related Info -->
                <div class="col-md-3">
                  {% block relatedinfo %}{% endblock %}
                </div>
                <!-- End Related Info -->

              </div>
            </div>
          </div>
          <!-- End Content -->
        </div>
      </div>

      <!-- Footer -->
      <footer id="footer">
        <div class="container">
          <a href="/about/privacypolicy/">Privacy policy</a> | <a href="/about/website/">About the website</a>
          <br/>
          Copyright © 2008-2025 PostgreSQL Community Association
        </div>
      </footer>
      <!-- End Footer -->
    </div>

    <!-- jQuery/Bootstrap -->
    <script src="https://assets.postgresql.org/jquery/3/jquery-3.6.1.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://assets.postgresql.org/bootstrap/4/js/bootstrap.min.js" crossorigin="anonymous"></script>

    <script>
       function theme_apply() {
         'use strict';
         if (theme === 'light') {
           document.getElementById('btn-theme').innerHTML = '<i class="fas fa-moon"></i>';
           document.documentElement.setAttribute('data-theme', 'light');
           localStorage.setItem('theme', 'light');
         } else {
           document.getElementById('btn-theme').innerHTML = '<i class="fas fa-lightbulb"></i>';
           document.documentElement.setAttribute('data-theme', 'dark');
           localStorage.setItem('theme', 'dark');
         }
       }

       theme_apply();
       document.getElementById("form-theme").style.display="block";

       function theme_switch() {
         'use strict';
         if (theme === 'light') {
           theme = 'dark';
         } else {
           theme = 'light';
         }
         theme_apply();
       }

       let theme_OS = window.matchMedia('(prefers-color-scheme: light)');
       theme_OS.addEventListener('change', function (e) {
         'use strict';
         if (e.matches) {
           theme = 'light';
         } else {
           theme = 'dark';
         }
         theme_apply();
       });
     </script>
  </body>
</html>