base.html 3.17 KB
Newer Older
Andreas Berger's avatar
Andreas Berger committed
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
<!DOCTYPE html>
<html>
    <head>
        {% load static %}

        <!-- bootstrap -->
        {% load bootstrap4 %}
        {% bootstrap_css %}
        {% bootstrap_javascript jquery='full' %}
        {% bootstrap_messages %}

        <!-- Icons -->
        {% load icons %}

        <!-- Font Awesome CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
      >

        <title>{% block title %}{% endblock title %}</title>
        <link rel="shortcut icon" href="{% static 'favicon/favicon.ico' %}"/>
        <link rel="stylesheet" href="{% static 'css/main.css' %}"/>
    </head>

    <body>
      <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand font-weight-bold ml-5 mr-3" href="{% url 'home' %}">Agreelance</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse ml-1" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link font-weight-light" href="{% url 'home' %}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link font-weight-light" href="{% url 'projects' %}">Projects</a>
        </li>
      </ul>
      <div class="my-2 my-lg-0 mr-5">
dennisjl's avatar
dennisjl committed
45
46
47
48

        <!-- Darkmode toggleswich -->
        <a class="btn btn-link my-sm-0 mr-2"> 
          <div class="custom-control custom-switch">
49
            <input onclick="darkMode()" type="checkbox" class="custom-control-input" id="customSwitch1">
dennisjl's avatar
dennisjl committed
50
51
52
53
54
55
            <label class="custom-control-label" for="customSwitch1">Dark Mode</label>
            <svg class="bi bi-moon" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.002 8.002 0 1010.586 10.586z"></path>
            </svg>
          </div>
        </a>
Andreas Berger's avatar
Andreas Berger committed
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
        {% if user.is_authenticated %}
        <a role="button" class="btn btn-outline-primary my-2 my-sm-0" href="{% url 'new_project' %}">New project</a>
        <a class="btn btn-link my-2 my-sm-0" href="{% url 'logout' %}" role="button">Sign out</a>
        {% else %}
        <a role="button" class="btn btn-link my-sm-0 mr-2" href="{% url 'signup' %}">Sign up</a>
        <a role="button" class="btn btn-outline-primary my-2 my-sm-0" href="{% url 'login' %}">Sign in</a>
        {% endif %}
      </div>
    </div>
  </nav>
      <div class="container">
        {% if messages %}
          <ul class="messages">
              {% for message in messages %}
              <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
              {% endfor %}
          </ul>
        {% endif %}
        {% block content %}{% endblock content %}
      </div>
76
77
78
79

      <script src="{% static 'js/darkmode.js' %}"></script>


Andreas Berger's avatar
Andreas Berger committed
80
81
    </body>
</html>