Make UI.

mainsite/admin.py

@@ -1,3 +1,7 @@
 from django.contrib import admin
+from .models import Presence
 
-# Register your models here.
+
+@admin.register(Presence)
+class PresenceAdmin(admin.ModelAdmin):
+    list_display = ["name", "created"]

mainsite/migrations/0001_initial.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.1.3 on 2024-11-14 00:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = []
+
+    operations = [
+        migrations.CreateModel(
+            name="Presence",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("name", models.CharField(max_length=256, verbose_name="Nom")),
+                ("created", models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+    ]

mainsite/models.py

@@ -1,3 +1,9 @@
 from django.db import models
 
-# Create your models here.
+
+class Presence(models.Model):
+    name = models.CharField(max_length=256, blank=False, null=False, verbose_name="Nom")
+    created = models.DateTimeField(auto_now=False, auto_now_add=True)
+
+    def __str__(self):
+        return self.name

mainsite/scss/_params.scss

@@ -8,7 +8,8 @@ $head_bg_color: #060033;
 
 $resp_small: 1350px;
 $resp_vsmall: 1000px;
+$resp_tiny: 440px;
 
-$profile_pic_wid: 350px;
+$main_width: 800px;
-$profile_pic_wid_small: 180px;
+$active_color: #9593c6;
-$profile_pic_wid_vsmall: 250px;
+$active_color_bg: #9593c616;

mainsite/scss/style.scss

@@ -15,6 +15,11 @@ body {
   text-align:justify;
   margin: 0;
   padding: 0;
+
+  @media (max-width: $resp_tiny) {
+    font-size:14px;
+    line-height:1.3;
+  }
 }
 
 header {
@@ -23,7 +28,9 @@ header {
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
+  column-gap: 30px;
   margin: 0;
+  margin-bottom: 20px;
   padding: 30px 60px;
   color: $bg_color;
 
@@ -41,6 +48,26 @@ header {
   }
 }
 
+#messages {
+  display: flex;
+  justify-content: space-between;
+
+  .message {
+    max-width: $main_width;
+    flex-basis: $main_width;
+
+    border: 2px solid black;
+    border-radius: 8px;
+    padding: 5px 15px;
+    margin: 5px auto;
+
+    &.success {
+      background-color: #e1ffef;
+      border-color: #159953;
+    }
+  }
+}
+
 #content {
   display: flex;
   justify-content: space-between;
@@ -50,10 +77,14 @@ header {
   }
 
   main {
-    margin:2em auto;
+    margin: 10px auto;
-    max-width:800px;
+    padding: 0 30px;
-    padding:1em;
+    max-width: $main_width;
-    flex-basis: 800px;
+    flex-basis: $main_width;
+
+    @media (max-width: $resp_tiny) {
+      padding: 0 20px;
+    }
   }
 }
 
@@ -120,6 +151,7 @@ dl {
   list-style: none;
   display: grid;
   grid-template-columns: 1fr 3fr;
+  align-items: center;
 
   dt {
     grid-column: 1 / span 1;
@@ -133,6 +165,10 @@ dl {
     justify-self: start;
     text-align: left;
   }
+
+  dt, dd {
+    padding: 5px 0;
+  }
 }
 
 .antispam {
@@ -147,3 +183,52 @@ dl {
   position: relative;
   top: 5px;
 }
+
+input:focus {
+  outline: none;
+}
+
+form {
+  p.already_replied {
+    color: red;
+  }
+
+  div {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    column-gap: 15px;
+    margin: 5px 0;
+
+    input[type=text] {
+      width: 100%;
+      padding: 5px;
+      border: 2px solid #ccc;
+      border-radius: 5px;
+
+      &:focus {
+        border-color: $active_color;
+        background-color: $active_color_bg;
+      }
+    }
+  }
+
+  input[type=submit] {
+    margin-top: 10px;
+    padding: 5px 15px;
+    background: #ccc;
+    border: 0 none;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+    font-size: 1.1em;
+
+    &:focus, &:hover {
+      background-color: $active_color;
+    }
+    &:active {
+      background-color: darken($active_color, 15%);
+    }
+  }
+}

mainsite/static/css/font-opensans.css

@@ -0,0 +1,58 @@
+/**** OPEN SANS **************************************************************/
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

mainsite/static/css/fonts.css

@@ -0,0 +1 @@
+@import url('font-opensans.css');

mainsite/static/css/style.css

@@ -10,14 +10,19 @@ body {
   text-align: justify;
   margin: 0;
   padding: 0; }
-
+  @media (max-width: 440px) {
+    body {
+      font-size: 14px;
+      line-height: 1.3; } }
 header {
   background-color: #060033;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
+  column-gap: 30px;
   margin: 0;
+  margin-bottom: 20px;
   padding: 30px 60px;
   color: white; }
   @media (max-width: 1000px) {
@@ -29,6 +34,20 @@ header {
   header a, header a:visited {
     color: white; }
 
+#messages {
+  display: flex;
+  justify-content: space-between; }
+  #messages .message {
+    max-width: 800px;
+    flex-basis: 800px;
+    border: 2px solid black;
+    border-radius: 8px;
+    padding: 5px 15px;
+    margin: 5px auto; }
+    #messages .message.success {
+      background-color: #e1ffef;
+      border-color: #159953; }
+
 #content {
   display: flex;
   justify-content: space-between; }
@@ -36,11 +55,13 @@ header {
     #content {
       flex-wrap: wrap; } }
   #content main {
-    margin: 2em auto;
+    margin: 10px auto;
+    padding: 0 30px;
     max-width: 800px;
-    padding: 1em;
     flex-basis: 800px; }
-
+    @media (max-width: 440px) {
+      #content main {
+        padding: 0 20px; } }
 .items {
   display: grid;
   grid-template-columns: 100px auto; }
@@ -88,7 +109,8 @@ ul.docsline {
 dl {
   list-style: none;
   display: grid;
-  grid-template-columns: 1fr 3fr; }
+  grid-template-columns: 1fr 3fr;
+  align-items: center; }
   dl dt {
     grid-column: 1 / span 1;
     justify-self: end;
@@ -99,6 +121,8 @@ dl {
     margin-left: 20px;
     justify-self: start;
     text-align: left; }
+  dl dt, dl dd {
+    padding: 5px 0; }
 
 .antispam {
   unicode-bidi: bidi-override;
@@ -110,3 +134,39 @@ dl {
   height: auto;
   position: relative;
   top: 5px; }
+
+input:focus {
+  outline: none; }
+
+form p.already_replied {
+  color: red; }
+
+form div {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 15px;
+  margin: 5px 0; }
+  form div input[type=text] {
+    width: 100%;
+    padding: 5px;
+    border: 2px solid #ccc;
+    border-radius: 5px; }
+    form div input[type=text]:focus {
+      border-color: #9593c6;
+      background-color: #9593c616; }
+
+form input[type=submit] {
+  margin-top: 10px;
+  padding: 5px 15px;
+  background: #ccc;
+  border: 0 none;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 100%;
+  font-size: 1.1em; }
+  form input[type=submit]:focus, form input[type=submit]:hover {
+    background-color: #9593c6; }
+  form input[type=submit]:active {
+    background-color: #6461ac; }

mainsite/static/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1da615" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cpu"><rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>

mainsite/templates/base.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Soutenance de thèse — Théophile Bastian</title>
     <link rel="stylesheet" href="{% static "css/style.css" %}">
+    <link rel="icon" href="{% static "favicon.svg" %}">
   </head>
 
   <body>
@@ -14,6 +15,16 @@
           {% include "navbar.html" %}
       </header>
 
+      {% if messages %}
+      <div id="messages">
+          {% for message in messages %}
+          <div class="message {% if message.tags %}{{ message.tags }}{% endif %}">
+              {{ message }}
+          </div>
+          {% endfor %}
+      </div>
+      {% endif %}
+
       <div id="content">
           <main>
               {% block content %}

mainsite/templates/phd/home.html

@@ -20,8 +20,7 @@ prochainement disponible), une partie du jury étant à distance.</p>
 
 <p>Toute personne qui le souhaite est bienvenue pour y assister !</p>
 
-<h2>Détails pratiques</h2>
+<h2>Informations pratiques</h2>
-
 
 <dl>
 <dt>{% lucide "calendar" %}</dt>
@@ -44,7 +43,32 @@ Campus universitaire, Université Grenoble Alpes<br/>
     <img class="tag_ligne" src="{% static "img/tag/C5.png" %}" alt="bus C5" />
     <img class="tag_ligne" src="{% static "img/tag/C8.png" %}" alt="bus C8" />
     Université Bibliothèques</dd>
+
+<dt>{% lucide "headset" %}</dt>
+<dd>(lien de visio à venir)</dd>
+
+<dt>{% lucide "calendar-cog" %}</dt>
+<dd><a href="{% static "soutenance.ics" %}">Événement calendrier</a></dd>
 </dl>
 
-{% endblock content %}
+<h2>Recensement des estomacs</h2>
 
+<p>Qui dit soutenance, dit pot. Et pour qu'on ait assez à manger, je vous invite
+donc à remplir le sondage ci-dessous si vous comptez assister à la soutenance.
+</p>
+
+<p>Et si jamais vous êtes très motivé·e pour filer un coup de main à
+l'organisation, n'hésitez pas à m'en parler :)</p>
+
+<form action="{% url 'home' %}" method="post">
+    {% csrf_token %}
+
+    {% if has_replied %}
+    <p class="already_replied">Vous avez déjà répondu depuis ce navigateur.</p>
+    {% endif %}
+
+    {{ form.as_div }}
+    <input type="submit" value="Je viens !" />
+</form>
+
+{% endblock content %}

mainsite/urls.py

@@ -1,4 +1,6 @@
 from django.urls import path
 from . import views
 
-urlpatterns = [path("", views.HomeView.as_view(), name="home")]
+urlpatterns = [
+    path("", views.HomeView.as_view(), name="home"),
+]

mainsite/views.py

@@ -1,8 +1,24 @@
-from django.shortcuts import render
+from django.contrib.messages.views import SuccessMessageMixin
-from django.views.generic import TemplateView
+from django.urls import reverse_lazy
+from django.views.generic.edit import CreateView
+
+from .models import Presence
 
 
-class HomeView(TemplateView):
+class HomeView(SuccessMessageMixin, CreateView):
     """Home page"""
 
     template_name = "phd/home.html"
+    model = Presence
+    fields = ["name"]
+    success_url = reverse_lazy("home")
+    success_message = "Super, merci d'avoir prévenu !"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["has_replied"] = self.request.session.get("presence_has_replied", False)
+        return context
+
+    def form_valid(self, form):
+        self.request.session["presence_has_replied"] = True
+        return super().form_valid(form)