Basic Web Design

This commit is contained in:
Arnold Dechamps 2024-02-26 12:02:06 +01:00
parent ee29cef38e
commit da22e30ab3
No known key found for this signature in database
GPG key ID: AE66543374E41C89
9 changed files with 567 additions and 28 deletions

View file

@ -9,4 +9,23 @@ source venv/bin/activate
pip install -r requirements.txt pip install -r requirements.txt
./manage.py migrate ./manage.py migrate
./manage.py runserver ./manage.py runserver
``` ```
# When running in debug False :
```
./manage.py collectstatic
./manage.py runserver --insecure
```
# CSS :
To install the CSS bundler :
```
npm install -D tailwindcss
npx tailwindcss init
```
To update CSS files (they use the tailwinds framework)
```
npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css
```

BIN
static/images/image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View file

@ -544,14 +544,429 @@ video {
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
} }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.static { .static {
position: static; position: static;
} }
.row-start-2 {
grid-row-start: 2;
}
.m-4 {
margin: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.me-4 {
margin-inline-end: 1rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.block { .block {
display: block; display: block;
} }
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table { .table {
display: table; display: table;
} }
.grid {
display: grid;
}
.hidden {
display: none;
}
.h-10 {
height: 2.5rem;
}
.h-5 {
height: 1.25rem;
}
.h-8 {
height: 2rem;
}
.w-10 {
width: 2.5rem;
}
.w-5 {
width: 1.25rem;
}
.w-full {
width: 100%;
}
.max-w-screen-xl {
max-width: 1280px;
}
.table-auto {
table-layout: auto;
}
.border-separate {
border-collapse: separate;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-4 {
gap: 1rem;
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.self-center {
align-self: center;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.border {
border-width: 1px;
}
.border-gray-100 {
--tw-border-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-border-opacity));
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-slate-500 {
--tw-border-opacity: 1;
border-color: rgb(100 116 139 / var(--tw-border-opacity));
}
.border-slate-600 {
--tw-border-opacity: 1;
border-color: rgb(71 85 105 / var(--tw-border-opacity));
}
.border-slate-700 {
--tw-border-opacity: 1;
border-color: rgb(51 65 85 / var(--tw-border-opacity));
}
.bg-blue-700 {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-gray-200:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
}
@media (min-width: 640px) {
.sm\:mt-0 {
margin-top: 0px;
}
.sm\:text-center {
text-align: center;
}
}
@media (min-width: 768px) {
.md\:me-6 {
margin-inline-end: 1.5rem;
}
.md\:mt-0 {
margin-top: 0px;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:w-auto {
width: auto;
}
.md\:flex-row {
flex-direction: row;
}
.md\:items-center {
align-items: center;
}
.md\:justify-between {
justify-content: space-between;
}
.md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.md\:border-0 {
border-width: 0px;
}
.md\:bg-transparent {
background-color: transparent;
}
.md\:bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.md\:p-0 {
padding: 0px;
}
.md\:text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.md\:hover\:bg-transparent:hover {
background-color: transparent;
}
.md\:hover\:text-blue-700:hover {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
}
.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 1;
}
@media (prefers-color-scheme: dark) {
.dark\:border-gray-700 {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark\:text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.dark\:hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:focus\:ring-gray-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
}
}
@media (min-width: 768px) {
@media (prefers-color-scheme: dark) {
.md\:dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.md\:dark\:text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.md\:dark\:hover\:bg-transparent:hover {
background-color: transparent;
}
.md\:dark\:hover\:text-blue-500:hover {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
}
}

View file

@ -0,0 +1,4 @@
{% extends "base.html" %}
{% block content %}
Website Under construction
{% endblock content %}

View file

@ -4,10 +4,94 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="title" content="TLD tester">
<meta name="description" content="How is your top level domain built?">
<meta property="og:type" content="website">
<meta property="og:url" content="https://tldtest.net/">
<meta property="og:title" content="TLD tester">
<meta property="og:description" content="How is your top level domain built?">
<meta property="og:image" content="{% static 'images/image.png' %}">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://tldtest.net/">
<meta property="twitter:title" content="TLD tester">
<meta property="twitter:description" content="How is your top level domain built?">
<meta property="twitter:image" content="{% static 'images/image.png' %}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="{% static 'images/image.png' %}">
<title>{% block title %}TLD Tester{% endblock %}</title> <title>{% block title %}TLD Tester{% endblock %}</title>
{% compress css %}
<link rel="stylesheet" href="{% static 'src/output.css' %}">
{% endcompress %}
</head> </head>
<body> <body class="bg-white">
<header>
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="{% static 'images/image.png' %}" class="h-8" alt="Logo"/>
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">TLD-Tester</span>
</a>
<button data-collapse-toggle="navbar-default" type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="/"
class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
aria-current="page">Home</a>
</li>
<li>
<a href="/about"
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
</li>
<li>
<a href="/latency"
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Latency</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
{% block content %} {% block content %}
{% endblock content %} {% endblock content %}
<footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800">
<div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">Made with ❤️ under GPLv3
</span>
<ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
<li>
<a href="https://github.com/tldtest/tldtest.net" class="hover:underline me-4 md:me-6">Github</a>
</li>
<li>
<a href="https://raw.githubusercontent.com/tldtest/tldtest.net/master/LICENSE?token=GHSAT0AAAAAACJMTGHPQI5UOLAA4QVYVAFSZO4NM6A" class="hover:underline me-4 md:me-6">GPL</a>
</li>
<li>
<a href="https://github.com/tldtest/tldtest.net/issues/new" class="hover:underline">New Issue?</a>
</li>
</ul>
</div>
</footer>
</body> </body>
</html> </html>

View file

@ -1,27 +1,33 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<table> <div class="grid gap-4">
<thead> <div class="row-start-2">
<tr> <div class="flex justify-center">
<th>Top Level Domain</th> <table class="table-auto border-separate border border-slate-500">
<th>Amount of NS servers</th> <thead>
<th>IPv4 compatible NS servers</th> <tr>
<th>IPv6 compatible NS servers</th> <th class="border border-slate-600">Top Level Domain</th>
<th>Strongest DNSSEC algo available</th> <th class="border border-slate-600">Amount of NS servers</th>
<th>Amount of DNSSEC keys</th> <th class="border border-slate-600">IPv4 compatible NS servers</th>
</tr> <th class="border border-slate-600">IPv6 compatible NS servers</th>
</thead> <th class="border border-slate-600">Strongest DNSSEC algo available</th>
<tbody> <th class="border border-slate-600">Amount of DNSSEC keys</th>
{% for TLD in object_list %} </tr>
<tr> </thead>
<td>{{ TLD.tld }}</td> <tbody>
<td>{{ TLD.nsamount }}</td> {% for TLD in object_list %}
<td>{{ TLD.v4nsamount }}</td> <tr>
<td>{{ TLD.v6nsamount }}</td> <td class="border border-slate-700">{{ TLD.tld }}</td>
<td>{{ TLD.get_dnssec_display }}</td> <td class="border border-slate-700">{{ TLD.nsamount }}</td>
<td>{{ TLD.amountofkeys }}</td> <td class="border border-slate-700">{{ TLD.v4nsamount }}</td>
</tr> <td class="border border-slate-700">{{ TLD.v6nsamount }}</td>
{% endfor %} <td class="border border-slate-700">{{ TLD.get_dnssec_display }}</td>
</tbody> <td class="border border-slate-700">{{ TLD.amountofkeys }}</td>
</table> </tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock content %} {% endblock content %}

View file

@ -0,0 +1,4 @@
{% extends "base.html" %}
{% block content %}
Website under construction
{% endblock content %}

View file

@ -15,9 +15,11 @@ Including another URLconf
""" """
from django.contrib import admin from django.contrib import admin
from django.urls import path from django.urls import path
from .views import Index from .views import Index, About, Latency
urlpatterns = [ urlpatterns = [
path("", Index.as_view(), name="home"), path("", Index.as_view(), name="home"),
path("about/", About.as_view(), name="about"),
path("latency/", Latency.as_view(), name="latency"),
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
] ]

View file

@ -1,5 +1,5 @@
from django.shortcuts import render from django.shortcuts import render
from django.views.generic import ListView from django.views.generic import ListView, TemplateView
from tldtester.models import TLD from tldtester.models import TLD
@ -15,6 +15,11 @@ class Index(ListView):
object_list = TLD.objects.all() object_list = TLD.objects.all()
return object_list return object_list
class About(TemplateView):
template_name= 'about.html'
class Latency(TemplateView):
template_name = 'latency.html'
def handler404(request): def handler404(request):
return render(request, '404.html', status=404) return render(request, '404.html', status=404)