From 2e9cef8e2c2d59390955c71b8ae5418f5505b560 Mon Sep 17 00:00:00 2001
From: 0xjrx <mrmarquard@protonmail.com>
Date: Thu, 27 Mar 2025 11:50:45 +0100
Subject: [PATCH] feat: Add info page and entry for every team member

Refs: OPS-90
---
 senju/main.py             |  14 ++++
 senju/templates/base.html |   7 +-
 senju/templates/info.html | 140 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 senju/templates/info.html

diff --git a/senju/main.py b/senju/main.py
index d22eae8..07886ed 100644
--- a/senju/main.py
+++ b/senju/main.py
@@ -201,3 +201,17 @@ def favicon():
     return send_from_directory(os.path.join(app.root_path, 'static/img'),
                                'favicon.ico',
                                mimetype='image/vnd.microsoft.icon')
+
+@app.route('/info')
+def info_view():
+    """
+    Render the info page.
+
+    :return: The info.html template with title "Info".
+    :rtype: flask.Response
+    """
+    return render_template(
+        "info.html",
+        title="Info"
+    )
+
diff --git a/senju/templates/base.html b/senju/templates/base.html
index 6087e01..3ffc00f 100644
--- a/senju/templates/base.html
+++ b/senju/templates/base.html
@@ -48,9 +48,10 @@
    {% if request.endpoint == 'scan_view' %} bg-gray-900 text-white {% else %} text-gray-300 hover:bg-gray-700 hover:text-white {% endif %}">
 									Image scanning
 								</a>
-								<a href="#"
-									class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">
-									Information
+								<a href="{{ url_for('info_view') }}"
+									class="rounded-md px-3 py-2 text-sm font-medium
+   {% if request.endpoint == 'info_view' %} bg-gray-900 text-white {% else %} text-gray-300 hover:bg-gray-700 hover:text-white {% endif %}">
+									Info
 								</a>
 							</div>
 						</div>
diff --git a/senju/templates/info.html b/senju/templates/info.html
new file mode 100644
index 0000000..81338c9
--- /dev/null
+++ b/senju/templates/info.html
@@ -0,0 +1,140 @@
+{% extends "base.html" %}
+
+{% block content %}
+  <style>
+    .grid-container {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr); /* Two columns per row */
+      gap: 30px;
+      justify-content: center;
+      align-items: start;
+      padding: 50px;
+    }
+
+    .grid-item {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      transition: 0.5s;
+      position: relative;
+    }
+
+    .grid-item img {
+      --f: .1; /* the parallax factor */
+      --r: 10px; /* radius */
+      
+      --_f: calc(100% * var(--f) / (1 + var(--f)));
+      --_a: calc(90deg * var(--f));
+      width: 150px;
+      aspect-ratio: calc(1 + var(--f));
+      object-fit: cover;
+      clip-path: inset(0 var(--_f) 0 0 round var(--r));
+      transform: perspective(400px) var(--_t, rotateY(var(--_a)));
+      transition: 0.5s;
+      cursor: pointer;
+    }
+
+    .grid-item img:hover {
+      clip-path: inset(0 0 0 var(--_f) round var(--r));
+      --_t: translateX(calc(-1 * var(--_f))) rotateY(calc(-1 * var(--_a)));
+    }
+
+    /* Member Info Box */
+    .info-box {
+      width: 250px;
+      padding: 12px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 10px;
+      color: white;
+      text-align: left;
+      backdrop-filter: blur(5px);
+      transition: 0.5s;
+      font-family: Arial, sans-serif;
+    }
+
+    .info-box h2 {
+      margin: 5px 0;
+      font-size: 18px;
+    }
+
+    .info-box p {
+      margin: 5px 0;
+      font-size: 14px;
+    }
+
+    .info-box .title {
+      font-weight: bold;
+      color: #FFD700;
+    }
+
+    .button {
+      background-color: #4CAF50;
+      border: none;
+      color: white;
+      padding: 8px 12px;
+      text-align: center;
+      font-size: 14px;
+      cursor: pointer;
+      border-radius: 5px;
+      transition: background 0.3s;
+    }
+
+    .button:hover {
+      background-color: #45a049;
+    }
+
+    /* Make both image & info box move on hover */
+    .grid-item:hover img,
+    .grid-item:hover .info-box {
+      transform: translateX(calc(-1 * var(--_f))) rotateY(calc(-1 * var(--_a)));
+    }
+
+  </style>
+  
+  <div class="grid-container">
+    <div class="grid-item">
+      <img src="https://avatars.githubusercontent.com/u/58274330?v=4" alt="PlexSheep">
+      <div class="info-box">
+        <h2>PlexSheep</h2>
+        <p class="title">Backend Developer</p>
+        <p>Passionate about cybersecurity and hacking.</p>
+        <p>plexsheep@example.com</p>
+        <p><button class="button">Contact</button></p>
+      </div>
+    </div>
+
+    <div class="grid-item">
+      <img src="https://avatars.githubusercontent.com/u/119286812?v=4" alt="0xjrx" style="--f:.12;--r:5px">
+      <div class="info-box">
+        <h2>0xjrx</h2>
+        <p class="title">Frontend Developer</p>
+        <p>Experienced in networking and malware research.</p>
+        <p>mrmarquard@protonmail.com</p>
+        <p><button class="button">Contact</button></p>
+      </div>
+    </div>
+
+    <div class="grid-item">
+      <img src="https://avatars.githubusercontent.com/u/45919207?v=4" alt="0xalivecow" style="--f:.08;--r:20px">
+      <div class="info-box">
+        <h2>0xalivecow</h2>
+        <p class="title">Backend Developer</p>
+        <p>Software engineer focused on security tools.</p>
+        <p>0xalivecow@example.com</p>
+        <p><button class="button">Contact</button></p>
+      </div>
+    </div>
+
+    <div class="grid-item">
+      <img src="https://avatars.githubusercontent.com/u/134395490?v=4" alt="Amrasil" style="--f:.08;--r:20px">
+      <div class="info-box">
+        <h2>Amrasil</h2>
+        <p class="title">Documentation and Code coverage</p>
+        <p>Exploring cryptography and adversarial AI.</p>
+        <p>amrasil@example.com</p>
+        <p><button class="button">Contact</button></p>
+      </div>
+    </div>
+  </div>
+{% endblock %}
+