Add index page to the project.

23c60845 · Neda Moeini · ac16a182 · 23c60845 · 23c60845 · 23c60845
Commit 23c60845 authored 5 months ago by Neda Moeini
--- 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"),
+
 ]
--- a/static/images/geant_logo.svg
+++ b/static/images/geant_logo.svg
+<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>
--- a/templates/base.html
+++ b/templates/base.html
 <!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">&copy; 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
--- a/templates/index.html
+++ b/templates/index.html
+{% 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