From 23c60845514d66fa29e7319592f038e24da4e763 Mon Sep 17 00:00:00 2001
From: Neda Moeini <neda.moeini@geant.org>
Date: Fri, 18 Oct 2024 11:48:03 +0200
Subject: [PATCH] Add index page to the project.
---
root/urls.py | 4 ++
static/images/geant_logo.svg | 16 ++++++++
templates/base.html | 76 ++++++++++++++++++++++++++++--------
templates/index.html | 17 ++++++++
4 files changed, 96 insertions(+), 17 deletions(-)
create mode 100644 static/images/geant_logo.svg
create mode 100644 templates/index.html
diff --git a/root/urls.py b/root/urls.py
index ce10540..f645760 100644
--- a/root/urls.py
+++ b/root/urls.py
@@ -3,7 +3,11 @@ from django.contrib import admin
from django.urls import path
from django.urls.conf import include
+from file_validator.views import index_view
+
urlpatterns = [
path("admin/", admin.site.urls),
path("file-validator/", include("file_validator.urls")),
+ path("", index_view, name="index"),
+
]
diff --git a/static/images/geant_logo.svg b/static/images/geant_logo.svg
new file mode 100644
index 0000000..31bfead
--- /dev/null
+++ b/static/images/geant_logo.svg
@@ -0,0 +1,16 @@
+<svg width="79" height="35" viewBox="0 0 79 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_101_15)">
+<path d="M15.9 17.8C16.5 17.3 17 17.1 17.4 17.1C18.4 17.1 18.7 17.8 18.7 18.2C18.5 18.3 14.2 19.7 14 19.8C13.9 19.7 13.9 19.6 13.8 19.6C14 19.4 15.9 17.8 15.9 17.8Z" fill="white" fill-opacity="0.85"/>
+<path d="M0 27C0 31.8 2.1 34.3 6.3 34.3C9.1 34.3 10.8 33.1 10.8 33L10.9 32.9V26.2H5.2V28.1C5.2 28.1 8.1 28.1 8.6 28.1C8.6 28.6 8.6 31.6 8.6 31.9C8.3 32.1 7.4 32.4 6.2 32.4C3.7 32.4 2.5 30.6 2.5 27C2.5 24.9 3.1 22.4 5.9 22.4C7.8 22.4 8.5 23.5 8.5 24.5V24.8H11.1V24.5C11.1 22.1 9 20.5 5.9 20.5C2.2 20.5 0 22.9 0 27Z" fill="white" fill-opacity="0.85"/>
+<path d="M20.2 20.7H12.6V34.1H20.7V32.2C20.7 32.2 15.5 32.2 14.9 32.2C14.9 31.7 14.9 28.5 14.9 28C15.5 28 20.2 28 20.2 28V26.1C20.2 26.1 15.5 26.1 14.9 26.1C14.9 25.6 14.9 23 14.9 22.5C15.5 22.5 20.5 22.5 20.5 22.5V20.6H20.2V20.7Z" fill="white" fill-opacity="0.85"/>
+<path d="M54.5 20.7H42.9C42.9 20.7 42.9 28.7 42.9 30.6C42 29 37.2 20.7 37.2 20.7H34.5V34.1H36.8C36.8 34.1 36.8 26.1 36.8 24.2C37.7 25.8 42.5 34.1 42.5 34.1H45.2C45.2 34.1 45.2 23.2 45.2 22.6C45.7 22.6 48.4 22.6 48.9 22.6C48.9 23.2 48.9 34.1 48.9 34.1H51.3C51.3 34.1 51.3 23.2 51.3 22.6C51.8 22.6 54.9 22.6 54.9 22.6V20.7H54.5V20.7Z" fill="white" fill-opacity="0.85"/>
+<path d="M28.9 20.7H28.7H26.4L21.4 34.1H23.8C23.8 34.1 25.1 30.6 25.3 30.2C25.7 30.2 29.8 30.2 30.2 30.2C30.3 30.6 31.7 34.1 31.7 34.1H34L28.9 20.7ZM25.9 28.3C26.1 27.6 27.3 24.4 27.7 23.3C28.1 24.4 29.2 27.6 29.5 28.3C28.7 28.3 26.6 28.3 25.9 28.3Z" fill="white" fill-opacity="0.85"/>
+<path d="M77 8C68.2 -2.9 32.6 12.5 23 16.5C22.3 16.8 21.4 16.7 20.9 15.7C21.3 16.7 22.1 17.1 23.1 16.7C35.8 11.6 66.5 0.600002 74.2 10.7C77.7 15.3 76.7 20.9 72.9 28.8C72.7 29.1 72.6 29.4 72.6 29.4C72.6 29.4 72.6 29.4 72.6 29.5C72.6 29.5 72.6 29.5 72.6 29.6C72.3 30.1 71.9 30.3 71.6 30.4C72 30.4 72.5 30.2 72.9 29.6C73 29.5 73.1 29.3 73.3 29C78.7 19.5 80.7 12.5 77 8Z" fill="white" fill-opacity="0.85"/>
+<path d="M70.3 29.9C70.2 29.8 68.6 28.4 67 26.9C58.7 19 33.4 -5.3 22.4 1.1C19.3 2.9 18.8 8.2 20.7 15.2C20.7 15.3 20.8 15.4 20.8 15.5C21 16.2 21.5 16.7 22.2 16.7C21.7 16.6 21.3 16.2 21.1 15.7C21.1 15.6 21 15.5 21 15.5C21 15.4 20.9 15.3 20.9 15.1C20.9 15 20.9 14.9 20.8 14.9C19.8 9 21 5.1 23.4 3.5C32.3 -2.5 53.5 15.8 64.2 25C66.6 27.1 69.4 29.5 70.2 30.1C71.4 31 72.4 30 72.7 29.5C72.3 30.1 71.3 30.7 70.3 29.9Z" fill="white" fill-opacity="0.85"/>
+</g>
+<defs>
+<clipPath id="clip0_101_15">
+<rect width="78.9" height="34.3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/templates/base.html b/templates/base.html
index ad98eba..f1ad6e4 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,30 +1,72 @@
<!DOCTYPE html>
<html lang="en">
+{% load static %}
{% load static tailwind_tags %} <!-- Load Tailwind CSS template tags -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}CSV Upload{% endblock %}</title>
- {% tailwind_css %}
+ {% tailwind_css %}
</head>
-<body class="bg-gray-100">
- <header class="fixed top-0 left-0 w-full bg-blue-900 p-4 z-10">
- <div class="container mx-auto flex items-center justify-between">
- <!-- GÉANT Logo -->
- <img src="https://geant.org/wp-content/uploads/2022/01/geant_logo_f2020_new.svg" alt="GÉANT Logo" class="h-12">
- <div class="flex-grow text-center">
- <span class="text-white text-2xl font-bold tracking-wide">Sage Validation</span>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+<header class="fixed top-0 left-0 w-full bg-blue-900 p-4 z-10">
+ <div class="container mx-auto flex items-center justify-between">
+ <!-- GÉANT Logo -->
+ <div class="flex items-center">
+ <img src="{% static "images/geant_logo.svg" %}" alt="GÉANT Logo" class="h-12">
+ </div>
+ <div class="flex-grow text-center">
+ <a href="{% url "index" %}" class="text-white text-2xl font-bold tracking-wide">Sage Validation</a> <!-- Made title clickable -->
+ </div>
+ <div class="flex items-center"> <!-- Login link -->
+ <a href="/login" class="text-white hover:text-gray-300">Login</a>
+ <div class="md:hidden"> <!-- Hamburger icon for mobile -->
+ <button id="mobile-menu-button" class="text-white focus:outline-none ml-4">
+ <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
+ </svg>
+ </button>
</div>
</div>
- </header>
+ </div>
+</header>
+
+<main class="flex-grow mt-24 p-10">
+ {% block content %}
+ {% endblock %}
+</main>
+
+<!-- Mobile Menu -->
+<div id="mobile-menu" class="md:hidden bg-blue-900 text-white absolute w-full hidden">
+ <nav class="flex flex-col space-y-2 p-4">
+ <a href="/" class="hover:text-gray-300">Home</a>
+ <a href="/file-validator/upload" class="hover:text-gray-300">Upload File</a>
+ <a href="/login" class="hover:text-gray-300">Login</a>
+ </nav>
+</div>
+
+<!-- Footer -->
+<footer class="bg-blue-900 text-white py-6 mt-auto">
+ <div class="container mx-auto text-center">
+ <p class="text-sm">© 2024 Sage Validation. All rights reserved.</p>
+ <div class="mt-2">
+ <a href="#" class="hover:text-gray-300">Privacy Policy</a>
+ <span class="mx-2">|</span>
+ <a href="#" class="hover:text-gray-300">Terms of Service</a>
+ <span class="mx-2">|</span>
+ <a href="#" class="hover:text-gray-300">Contact Us</a>
+ </div>
+ </div>
+</footer>
- <main class="mt-24 p-10">
- {% block content %}
- {% endblock %}
- </main>
+<script>
+ // Toggle mobile menu
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
+ const mobileMenu = document.getElementById('mobile-menu');
- <script>
- // Global JavaScript code
- </script>
+ mobileMenuButton.addEventListener('click', () => {
+ mobileMenu.classList.toggle('hidden');
+ });
+</script>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..7d7376e
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+
+{% block title %}Home - Sage Validation{% endblock %}
+
+{% block content %}
+<section class="bg-white text-gray-900 min-h-screen flex flex-col justify-center items-center px-4">
+ <div class="text-center max-w-2xl mx-auto">
+ <h1 class="text-5xl md:text-6xl font-bold mb-12 text-blue-900">Welcome to Sage Validation</h1>
+ <p class="text-xl md:text-2xl mb-16 text-gray-700">Click the button below to upload your file for validation.</p>
+
+ <a href="{% url "upload-file" %}"
+ class="inline-flex py-4 px-16 bg-blue-600 text-white text-lg md:text-xl font-bold rounded-full shadow-lg transition-transform transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-50">
+ Upload File
+ </a>
+ </div>
+</section>
+{% endblock %}
\ No newline at end of file
--
GitLab