Merge pull request #55 from senju1337/feat/OPS-90

Feat: OPS-90 working info page

senju/main.py

@@ -218,3 +218,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"
+    )

senju/templates/base.html

@@ -49,9 +49,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="#"
+								<a href="{{ url_for('info_view') }}"
-									class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">
+									class="rounded-md px-3 py-2 text-sm font-medium
-									Information
+   {% 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>

senju/templates/info.html

@@ -0,0 +1,142 @@
+{% 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;
+  position: relative;
+}
+
+/* Parallax Image Effect */
+.grid-item img {
+  --f: .1; /* 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)));
+}
+
+/* Info Box (No effect, solid background) */
+.info-box {
+  width: 250px;
+  padding: 12px;
+  background: #fff; /* Solid white */
+  border-radius: 10px;
+  color: black;
+  text-align: left;
+  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;
+}
+
+.button {
+  background-color: #7c3aed;
+  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: #8b5cf6;
+}
+
+  </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 text-violet-900">Backend Developer</p>
+        <p>Cyber Security Student, passionate Hobbyist, Networkadmin and Sotware Engineer</p>
+
+<a href="https://github.com/PlexSheep">Github</a>
+        <p>software@cscherr.de</p>
+<p><a href="mailto:software@cscherr.de"><button class="button">Contact</button></a></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 text-violet-900">Frontend Developer</p>
+        <p>Cyber Security Student working on malware research and development.</p>
+        <a href="https://github.com/0xjrx">Github</a>
+
+        
+<p>mrmarquard@protonmail.com</p>
+<p><a href="mailto:mrmarquard@protonmail.com"><button class="button">Contact</button></a></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 text-violet-900" >Backend Developer</p>
+        <p>Cyber Security Student with a focus on Linux Security</p>
+        <a href="https://github.com/0xalivecow">Github</a>
+
+        <p>0xalivecow@ta-lotz.de</p>
+<p><a href="mailto:0xalivecow@ta-lotz.de" ><button class="button">Contact</button></a></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 text-violet-900">Documentation and Code coverage</p>
+        <p>Cyber Security student passionate about Mathematics and Machine Learning.</p>
+        
+<a href="https://github.com/Amrasil">Github</a>
+
+        <p>amrasil@protonmail.ma</p>
+<p><a href="mailto:amrasil@example.ma"><button class="button">Contact</button></a></p>
+      </div>
+    </div>
+  </div>
+{% endblock %}
+