More styling

web/app/static/styles/custom.css

@@ -1,3 +1,19 @@
+/*
+# @name: custom.css
+# @version: 0.1
+# @creation_date: 2021-10-25
+# @license: The MIT License <https://opensource.org/licenses/MIT>
+# @author: Simon Bowie <ad7588@coventry.ac.uk>
+# @purpose: Custom CSS to override Bootstrap 5 defaults
+# @acknowledgements:
+# Bootstrap 5.1.3: https://getbootstrap.com/
+*/
+
 main > .container {
   padding: 60px 15px 0;
 }
+
+.carousel-control-next,
+.carousel-control-prev {
+    filter: invert(100%);
+}

web/app/templates/base.html

@@ -29,13 +29,13 @@
 
     <header>
       <!-- Fixed navbar -->
-      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+      <nav class="navbar navbar-expand-md navbar-dark sticky-top bg-dark">
         <div class="container-fluid">
           <a class="navbar-brand" href="{{ url_for('main.index')}}">COPIM online toolkit</a>
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
           </button>
-          <div class="collapse navbar-collapse" id="navbarNav">
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav">
             <li class="nav-item">
                 <a href="{{ url_for('main.index') }}" class="nav-link">
@@ -110,8 +110,8 @@
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
 </body>
 
 </html>

web/app/templates/index.html

@@ -2,9 +2,41 @@
 
 {% block content %}
 <h1 class="mt-5">
-  COPIM online toolkit
+  Vestibulum leo ligula
 </h1>
-<h2 class="subtitle">
-  testing online toolkit site
-</h2>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius, justo a iaculis porta, ipsum nibh suscipit orci, at lobortis quam orci ac orci. In non consectetur ipsum. Suspendisse sodales tempor ullamcorper. Fusce placerat magna a nulla scelerisque, cursus accumsan quam tempus. Integer ac nulla sit amet nibh pulvinar porttitor non non leo. Nam a leo erat. Aliquam erat volutpat. Vestibulum quis diam sem.
+</p>
+
+<!-- Carousel -->
+<div id="tool_carousel" class="carousel slide" data-bs-ride="carousel">
+
+  <!-- Indicators/dots -->
+  <div class="carousel-indicators">
+    <button type="button" data-bs-target="#tool_carousel" data-bs-slide-to="0" class="active"></button>
+    <button type="button" data-bs-target="#tool_carousel" data-bs-slide-to="1"></button>
+    <button type="button" data-bs-target="#tool_carousel" data-bs-slide-to="2"></button>
+  </div>
+
+  <!-- The slideshow/carousel -->
+  <div class="carousel-inner">
+    <div class="carousel-item active text-center">
+      Tool 1
+    </div>
+    <div class="carousel-item text-center">
+      Tool 2
+    </div>
+    <div class="carousel-item text-center">
+      Tool 3
+    </div>
+  </div>
+
+  <!-- Left and right controls/icons -->
+  <button class="carousel-control-prev" type="button" data-bs-target="#tool_carousel" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon"></span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#tool_carousel" data-bs-slide="next">
+    <span class="carousel-control-next-icon"></span>
+  </button>
+</div>
 {% endblock %}

web/app/templates/signup.html

@@ -3,15 +3,15 @@
 {% block content %}
 <h1>{% block title %} Sign Up {% endblock %}</h1>
         <form method="POST" action="/signup">
-            <div class="form-group">
+            <div class="mb-3 mt-3">
                 <input class="form-control" type="email" name="email" placeholder="Email" autofocus="">
             </div>
 
-            <div class="form-group">
+            <div class="mb-3 mt-3">
                 <input class="form-control" type="text" name="name" placeholder="Name" autofocus="">
             </div>
 
-            <div class="form-group">
+            <div class="mb-3 mt-3">
                 <input class="form-control" type="password" name="password" placeholder="Password">
             </div>