Redesign all unauthenticated pages (#137)

* Redesign unregistered user index page

* No longer send a message upon logout

* Update emoji on 'free to use' block

* Complete redesign of unauthenticated site

* Slight margin adjustments

app/static/css/core.css

@@ -409,6 +409,7 @@ body {
   }
 }
 
+
 /*
   Import and export
 */
@@ -423,3 +424,43 @@ body {
     font-size: 0.8rem;
     border-radius: var(--bs-border-radius-sm);
 }
+
+
+/*
+  Homepage
+*/
+
+#homepage-banner {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  background-color: #eaf5ff;
+  background-image: var(--bs-gradient);
+}
+
+
+.feature-block h4 {
+  color: var(--bs-primary);
+}
+
+.mw-1400 {
+  max-width: 1400px;
+}
+
+@media (max-width: 992px) {
+  #homepage-banner {
+    padding-top: 75px;
+    padding-bottom: 75px;
+  }
+}
+
+@media (max-width: 768px) {
+  .feature-block {
+    max-width: 60% !important;
+  }
+}
+
+@media (max-width: 576px) {
+  .feature-block {
+    max-width: 80% !important;
+  }
+}

app/templates/_footer.html

@@ -1,7 +1,7 @@
 <span class="float-start">
   {% block footer_left %}
       <span class="d-none d-md-block">
-        Copyright &copy; 2023 <a class="text-decoration-none text-white" href="https://buymeacoffee.com/anorthall">Andrew Northall</a>
+        Created by <a class="text-decoration-none text-white" href="https://buymeacoffee.com/anorthall">Andrew Northall</a>
       </span>
 
       <span class="d-md-none">

app/templates/_minimal.html

@@ -6,7 +6,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="{% block description %}caves.app: An online caving trip logger{% endblock %}">
-    <meta name="theme-color" content="#2c3e50">
+    <meta name="theme-color" content="{% block theme_color %}#2c3e50{% endblock %}">
 
     <title>{% block title %}caves.app{% endblock %}</title>
 

app/templates/_unregistered.html

@@ -0,0 +1,52 @@
+{% extends "_minimal.html" %}
+{% load static %}
+
+{% block theme_color %}#eaf5ff{% endblock %}
+
+{% block body %}
+  <main>
+    <div id="homepage-banner">
+      <div class="container">
+        <div class="row mw-1400">
+          <div class="col-12 col-md-8 mx-auto">
+            <h1 class="display-3 text-primary fw-bold">
+              {% block banner_title %}<a href="/" class="text-decoration-none text-primary">caves.app</a>{% endblock %}
+            </h1>
+            <h2 class="display-4">
+              {% block banner_subtitle %}{% endblock %}
+            </h2>
+          </div>
+          {% block banner_buttons %}{% endblock %}
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+      <div class="row mw-1400 {% if not form.errors and not messages %}my-5{% endif %}">
+        <div class="col-12 col-md-8 mx-auto">
+          {% if form.errors or messages %}
+            <div class="mt-5 mb-4">
+              {% include "_messages.html" %}
+            </div>
+          {% endif %}
+          {% block content %}{% endblock %}
+        </div>
+      </div>
+    </div>
+  </main>
+
+
+  <div class="container mt-auto">
+    <div class="row mw-1400">
+      <div class="col-12 col-md-8 mx-auto">
+        <footer class="mb-5 text-muted">
+          {% block footer %}
+            Created by <a class="text-muted" href="https://buymeacoffee.com/anorthall">Andrew Northall</a>
+            <span class="mx-1">&middot;</span>
+            <a class="text-muted" href="{% url 'core:help' %}">Need help?</a>
+          {% endblock %}
+        </footer>
+      </div>
+    </div>
+  </div>
+{% endblock %}

app/templates/core/index_unregistered.html

@@ -1,30 +1,104 @@
-{% extends "base_center.html" %}
+{% extends "_unregistered.html" %}
+{% load static %}
+
+{% block header_scripts %}
+  {% include "logger/_lightbox.html" %}
+{% endblock %}
 
 {% block title %}caves.app{% endblock %}
-{% block display_title %}A modern approach to cave logging{% endblock %}
-{% block description %}An online tool to log caving trips and activity.{% endblock %}
-
-{% block main %}
-  <div class="text-center mw-35">
-    <p>
-      A streamlined, mobile-friendly interface allows you to record and view your caving trips
-      from anywhere. Keep detailed records of everything you've done &mdash; who was there, the
-      distance you surveyed, how long you spent underground, and more.
-    </p>
-
-    <p>
-      Easily share your activities with anyone via your public profile, and keep up to date with what
-      your friends are up to via the activity feed.
-    </p>
-
-    <p>
-      The service is free to use and you have complete control over your data.
-      Questions? Have a look at the <a href="{% url 'core:help' %}">help page</a>.
-    </p>
-
-    <div class="d-flex flex-column flex-fill text-center">
-      <a class="btn btn-lg btn-primary mt-3" href="{% url 'users:register' %}">Sign up!</a>
-      <a class="btn btn-lg btn-success mt-3" href="{% url 'users:login' %}">Log in</a>
+{% block description %}caves.app: An online tool to log caving trips and activity.{% endblock %}
+{% block banner_subtitle %}A simple online caving<br>trip tracker{% endblock %}
+{% block banner_buttons %}
+  <div class="col-12 col-md-8 mx-auto mt-3">
+    <a class="btn btn-lg btn-primary me-2 me-md-4" href="{% url 'users:register' %}">Sign up</a>
+    <a class="btn btn-lg btn-outline-success" href="{% url 'users:login' %}">Log in</a>
+  </div>
+{% endblock %}
+
+{% block content %}
+  <h3 class="display-5 mb-4 mb-md-5 text-primary">Features</h3>
+  <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 g-md-5 mb-5">
+    <div class="col feature-block">
+      <h4>Trip logbook &nbsp;&#x1F5D2;</h4>
+      <p>
+        See <a class="link-body-emphasis" href="https://caves.app/u/andrew">how many trips you've been on</a>, where you've been, and how many hours you've spent underground.
+      </p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>Add your friends &nbsp;&#x2b50;</h4>
+      <p>Follow what your friends have been up to in the social feed, and like/comment on their trips.</p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>Upload photos &nbsp;&#x1F4F8;</h4>
+      <p>No more endless scrolling to find that photo on your phone - locate it easily on caves.app.</p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>Flexible logging &nbsp;&#x1F4DD;</h4>
+      <p>Add as much or as little data as you want, and caves.app will adapt to your usage.</p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>Custom fields &nbsp;&#x1F4A1;</h4>
+      <p>Want to track distance crawled on your side in flowing water on a Tuesday? You can do it!</p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>Track statistics &nbsp;&#x1F4C8;</h4>
+      <p>See your rope climbed, distance surveyed, unique caves visited, and much more.</p>
     </div>
+
+    <div class="col feature-block">
+      <h4>Full trip reports &nbsp;&#x1F58B;</h4>
+      <p>
+        Have more to say about a trip? Add a
+        <a class="text-body-emphasis" href="https://caves.app/report/27c34e03-31c4-404f-90a4-386d2d364f27/">rich text trip report</a>
+        in the style of a blog post.
+      </p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>Privacy focused &nbsp;&#x1F512;</h4>
+      <p>Locked down by default. Nobody can see any of your activities unless you explicitly allow it.</p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>No data lock-in &nbsp;&#x1F4BE;</h4>
+      <p>We respect the importance of your data. Download it as a CSV file at any time.</p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>Free to use &nbsp;&#x1F4B8;</h4>
+      <p>No tracking. No selling your data. We will never paywall you out of your logbook.</p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>Mobile friendly &nbsp;&#x1F4F1;</h4>
+      <p>Record your trips from anywhere with a phone signal. No need to wait to open Excel once you get home.</p>
+    </div>
+
+    <div class="col feature-block">
+      <h4>Open source &nbsp;&#x1F4D6;</h4>
+      <p>
+        Proudly built with Python and Django. The full source code for caves.app is available on
+        <a class="text-body-emphasis" href="https://github.com/anorthall/caves.app">GitHub</a>.
+      </p>
+    </div>
+  </div>
+
+  <h3 class="display-5 mb-4 mb-md-5 text-primary">Screenshots</h3>
+
+  <div class="mx-3 mx-md-0">
+    <a href="{% static 'images/homepage/social-feed.png' %}" data-lightbox="screenshots" data-title="The social feed on caves.app">
+      <img class="img-fluid rounded shadow-lg border mb-5" alt="The social feed on caves.app" src="{% static 'images/homepage/social-feed.png' %}">
+    </a>
+    <a href="{% static 'images/homepage/trip-list.png' %}" data-lightbox="screenshots" data-title="The trip list for a user on caves.app">
+      <img class="img-fluid rounded shadow-lg border mb-5" alt="The trip list for a user on caves.app" src="{% static 'images/homepage/trip-list.png' %}">
+    </a>
+    <a href="{% static 'images/homepage/statistics-full.png' %}" data-lightbox="screenshots" data-title="The statistics page on caves.app">
+      <img class="img-fluid rounded shadow-lg border mb-3" alt="The statistics page on caves.app" src="{% static 'images/homepage/statistics-full.png' %}">
+    </a>
   </div>
 {% endblock %}

app/templates/core/new_user.html

@@ -6,24 +6,29 @@
 
 {% block main %}
   <div class="mw-45">
-    <p class="lead">
+    <p class="lead mb-4">
       Thanks for signing up to caves.app, {{ user.name }}!
     </p>
 
-    <p class="mb-3">
-      Before you add your first trip, I thought I'd give you a few hints on how to best use
+    <p class="mb-4">
+      I thought I'd give you a few hints on how to best use
       the site. Follow the steps below to get started:
     </p>
 
-    <ol>
+    <ol class="mb-4">
       <li class="mb-2">
-        <a href="{% url 'users:profile_update' %}">Fill out your user profile!</a> Some settings are important for the functionality
+        <a href="{% url 'users:profile_update' %}">Fill out your user profile!</a> Let people know who you are and where you are from.
+      </li>
+
+      <li class="mb-2">
+        <a href="{% url 'users:account_settings' %}">Check your account settings!</a> Some settings are important for the functionality
         of the site &mdash; such as the timezone that will be used to enter/display trips and which distance units to use.
       </li>
 
       <li class="mb-2">
         <a href="{% url 'log:trip_create' %}">Add your first trips!</a> The form should be straightforward enough
-        and the only required data to create a trip is the cave name and trip start time.
+        and the only required data to create a trip is the cave name and trip start time. Alternatively, you can
+        <a href="{% url 'import:index' %}">import your trips</a> from a CSV file.
       </li>
 
       <li class="mb-2">
@@ -32,9 +37,9 @@
       </li>
 
       <li>
-        Enjoy the website! It is being actively developed and you may come across features that do not work properly.
-        If you do, please <a href="mailto:admin@caves.app">let me know</a> immediately by sending an email to
-        <code>admin@caves.app</code> and I will do my best to fix them.
+        Enjoy the website! If you have any issues at all, or any feedback, please do
+        <a href="mailto:admin@caves.app">let me know</a> immediately by sending an email to
+        <code>admin@caves.app</code> and I will do my best to help.
       </li>
     </ol>
 

app/templates/users/login.html

@@ -1,20 +1,20 @@
-{% extends "base_center.html" %}
+{% extends "_unregistered.html" %}
 {% load crispy_forms_tags %}
 
-{% block title %}Sign in to caves.app{% endblock %}
-{% block display_title %}Sign in{% endblock %}
+{% block title %}Sign in caves.app{% endblock %}
+{% block banner_subtitle %}Welcome back!{% endblock %}
 
-{% block main %}
-    {% crispy form %}
-
-    <p class="fs-5">
-      Need an account? <a href="{% url 'users:register' %}">Sign up!</a>
+{% block content %}
+  <div class="mw-35">
+    <p class="lead">
+      Enter your account details below to sign in.
     </p>
 
-    <p>
-      <a class="link-dark" href="{% url 'users:password_reset' %}">
-        <small>Forgotten your password?</small>
-      </a>
+    <p class="text-muted mb-5">
+      You may wish to <a class="text-decoration-none" href="{% url 'users:register' %}">create an account</a>
+      or <a class="text-decoration-none" href="{% url 'users:password_reset' %}">reset your password</a> instead.
     </p>
+
+    {% crispy form %}
   </div>
 {% endblock %}

app/templates/users/password_reset.html

@@ -0,0 +1,16 @@
+{% extends "_unregistered.html" %}
+{% load crispy_forms_tags %}
+
+{% block title %}Reset your password{% endblock %}
+{% block banner_subtitle %}Reset your password{% endblock %}
+
+{% block content %}
+  <div class="mw-35">
+    <p class="lead mb-5">
+      If you've forgotten your password, enter your email address below and we will send
+      you a message with instructions to reset it.
+    </p>
+
+    {% crispy form %}
+  </div>
+{% endblock %}

app/templates/users/password_reset_confirm.html

@@ -1,15 +1,18 @@
-{% extends "base_center.html" %}
+{% extends "_unregistered.html" %}
 {% load crispy_forms_tags %}
 
 {% block title %}Reset your password{% endblock %}
-{% block display_title %}Reset your password{% endblock %}
+{% block banner_subtitle %}Reset your password{% endblock %}
 
-{% block main %}
-  <div class="mw-35 mx-auto">
+{% block content %}
+  <div class="mw-35">
     {% if validlink %}
+      <p class="lead mb-4">
+        Please enter your new password below.
+      </p>
       {% crispy form %}
     {% else %}
-      <p class="lead">
+      <p class="lead mb-4">
         I'm afraid the link you have followed is invalid or expired.
       </p>