Skip to content

refactor(finbot-templates):unify base layout, active nav, and about p… #476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nitinawari wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(finbot-templates):unify base layout, active nav, and about p… #476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 11 additions & 133 deletions finbot/apps/finbot/templates/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,97 +1,31 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% extends "base.html" %}

{% block title %}About FinBot - OWASP GenAI Security Project{% endblock %}

{% block meta %}
<meta name="description" content="FinBot is an Agentic Security CTF platform by OWASP GenAI Security Project, designed to help builders and defenders understand and mitigate agentic AI risks.">
<meta name="keywords" content="finbot, owasp, genai, agentic security, ctf, ai security, llm security, prompt injection">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://owasp-finbot-ctf.org/about">
<meta property="og:title" content="About FinBot - OWASP GenAI Security Project">
<meta property="og:description" content="FinBot is an Agentic Security CTF platform - the Juice Shop for Agentic AI.">
<meta property="og:image" content="{{ url_for('static', path='images/common/finbot.png') }}">
<meta property="og:site_name" content="FinBot CTF">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="About FinBot - OWASP GenAI Security Project">
<meta name="twitter:description" content="FinBot is an Agentic Security CTF platform - the Juice Shop for Agentic AI.">
{% endblock %}

<title>About FinBot - OWASP GenAI Security Project</title>

<link rel="icon" type="image/x-icon" href="{{ url_for('static', path='images/common/favicon.ico') }}">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'bg-primary': '#07070d',
'bg-secondary': '#0e0e1a',
'bg-card': '#121220',
'cyan': '#00d4ff',
'purple': '#7c3aed',
'green': '#06ffa5',
'amber': '#ffb800',
'danger': '#ff3366',
'text-1': '#f1f5f9',
'text-2': '#94a3b8',
'text-3': '#64748b',
'border-dim': 'rgba(255,255,255,0.06)',
'border-glow': 'rgba(0,212,255,0.25)',
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
'mono': ['JetBrains Mono', 'monospace'],
},
}
}
}
</script>

<style>
body { background: #07070d; }

.grid-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(0,212,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,212,255,0.025) 1px, transparent 1px);
background-size: 60px 60px;
}

{% block extra_css %}
.hero-glow {
position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
width: 800px; height: 600px;
background: radial-gradient(ellipse, rgba(0,212,255,0.08) 0%, rgba(124,58,237,0.04) 40%, transparent 70%);
pointer-events: none;
}

.glass {
background: linear-gradient(135deg, rgba(18,18,32,0.85), rgba(14,14,26,0.95));
border: 1px solid rgba(255,255,255,0.06);
backdrop-filter: blur(12px);
}

.gradient-text {
background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 50%, #06ffa5 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-text-alt {
background: linear-gradient(90deg, #00d4ff, #06ffa5);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 40px rgba(0,212,255,0.2); } 50% { box-shadow: 0 0 60px rgba(0,212,255,0.35); } }

Expand Down Expand Up @@ -122,44 +56,15 @@
border-radius: 50%;
display: inline-block;
}
</style>
</head>

<body class="text-text-2 font-sans antialiased overflow-x-hidden">
<div class="grid-bg"></div>

<!-- Header -->
<header class="fixed top-0 w-full z-50 bg-bg-primary/80 backdrop-blur-xl border-b border-border-dim">
<div class="max-w-7xl mx-auto px-6 flex items-center justify-between h-16">
<a href="/" class="flex items-center space-x-3 group">
<div class="w-9 h-9 rounded-full overflow-hidden bg-gradient-to-r from-cyan to-purple p-0.5">
<img src="{{ url_for('static', path='images/common/finbot.png') }}" alt="OWASP FinBot" class="w-full h-full object-contain rounded-full bg-bg-primary">
</div>
<div>
<span class="text-text-1 font-bold text-lg tracking-tight">OWASP FINBOT</span>
<span class="text-cyan text-[10px] font-mono tracking-widest ml-1.5 hidden sm:inline">CTF</span>
</div>
</a>
<nav class="flex items-center space-x-1 sm:space-x-2">
<a href="/" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Home</a>
<a href="/portals" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Portals</a>
<a href="/about" class="text-cyan text-sm px-3 py-2 rounded-lg bg-white/[0.03]">About</a>
<a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<span class="hidden sm:inline">GitHub</span>
</a>
</nav>
</div>
</header>
{% endblock %}

<!-- Main Content -->
<main class="relative z-10">
{% block content %}
<!-- Hero Section -->
<section class="relative pt-32 pb-20 px-6">
<div class="hero-glow"></div>
<div class="max-w-5xl mx-auto text-center relative">
<!-- OWASP Badge -->
<a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="owasp-badge inline-flex items-center space-x-3 px-5 py-2.5 rounded-full glass border border-border-dim mb-10">
<a href="https://genai.owasp.org/" target="_blank" rel="noopener noreferrer" class="owasp-badge inline-flex items-center space-x-3 px-5 py-2.5 rounded-full glass border border-border-dim mb-10">
<img src="{{ url_for('static', path='images/common/GenAI_OWASP_Logo.png') }}" alt="OWASP GenAI Security Project" class="h-7">
<span class="text-text-2 text-sm font-medium">OWASP GenAI Security Project</span>
<svg class="w-3.5 h-3.5 text-text-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
Expand Down Expand Up @@ -702,31 +607,4 @@ <h2 class="text-3xl sm:text-4xl font-bold text-text-1 mb-4">Ready to Test Your S
</div>
</div>
</section>
</main>

<!-- Footer -->
<footer class="border-t border-border-dim py-10 px-6 relative z-10">
<div class="max-w-6xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-r from-cyan to-purple p-0.5">
<img src="{{ url_for('static', path='images/common/finbot.png') }}" alt="OWASP FinBot" class="w-full h-full object-contain rounded-full bg-bg-primary">
</div>
<div>
<span class="text-text-1 font-bold">OWASP FINBOT</span>
<span class="text-cyan text-xs font-mono ml-1">CTF</span>
</div>
</div>
<div class="flex items-center space-x-6 text-sm">
<a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="text-text-3 hover:text-cyan transition">OWASP GenAI</a>
<a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="text-text-3 hover:text-cyan transition">GitHub</a>
<a href="/portals" class="text-text-3 hover:text-cyan transition">Portals</a>
</div>
</div>
<div class="mt-8 pt-6 border-t border-border-dim text-center">
<p class="text-text-3 text-sm">Part of the <a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="text-cyan hover:text-green transition">OWASP GenAI Security Project</a></p>
</div>
</div>
</footer>
</body>
</html>
{% endblock %}
35 changes: 24 additions & 11 deletions finbot/apps/finbot/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,12 +89,13 @@
</div>
</a>
<nav class="flex items-center space-x-1 sm:space-x-2">
{% set current_path = request.url.path %}
{% block nav %}
<a href="/" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Home</a>
<a href="/how-it-works" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">How It Works</a>
<a href="/portals" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">Portals</a>
<a href="/about" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden md:inline-flex">About</a>
<a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
<a href="/" class="{% if current_path == '/' %}text-cyan bg-white/[0.03]{% else %}text-text-3 hover:text-cyan hover:bg-white/[0.03]{% endif %} transition text-sm px-3 py-2 rounded-lg">Home</a>
<a href="/how-it-works" class="{% if current_path == '/how-it-works' %}text-cyan bg-white/[0.03]{% else %}text-text-3 hover:text-cyan hover:bg-white/[0.03]{% endif %} transition text-sm px-3 py-2 rounded-lg hidden sm:inline-flex">How It Works</a>
<a href="/portals" class="{% if current_path == '/portals' %}text-cyan bg-white/[0.03]{% else %}text-text-3 hover:text-cyan hover:bg-white/[0.03]{% endif %} transition text-sm px-3 py-2 rounded-lg hidden sm:inline-flex">Portals</a>
<a href="/about" class="{% if current_path == '/about' %}text-cyan bg-white/[0.03]{% else %}text-text-3 hover:text-cyan hover:bg-white/[0.03]{% endif %} transition text-sm px-3 py-2 rounded-lg hidden md:inline-flex">About</a>
<a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener noreferrer" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<span class="hidden sm:inline">GitHub</span>
</a>
Expand All @@ -107,15 +108,27 @@
{% block content %}{% endblock %}
</main>

<footer class="border-t border-border-dim py-8 px-6 relative z-10">
<footer class="border-t border-border-dim py-10 px-6 relative z-10">
<div class="max-w-6xl mx-auto">
{% block footer %}
<div class="flex flex-col items-center gap-3">
<div class="flex items-center gap-5 text-sm">
<a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="text-text-3 hover:text-cyan transition">OWASP GenAI</a>
<a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="text-text-3 hover:text-cyan transition">GitHub</a>
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-r from-cyan to-purple p-0.5">
<img src="{{ url_for('static', path='images/common/finbot.png') }}" alt="OWASP FinBot" class="w-full h-full object-contain rounded-full bg-bg-primary">
</div>
<div>
<span class="text-text-1 font-bold">OWASP FINBOT</span>
<span class="text-cyan text-xs font-mono ml-1">CTF</span>
</div>
</div>
<p class="text-text-3 text-xs">Part of the <a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="text-cyan hover:text-green transition">OWASP GenAI Security Project</a></p>
<div class="flex items-center space-x-6 text-sm">
<a href="https://genai.owasp.org/" target="_blank" rel="noopener noreferrer" class="text-text-3 hover:text-cyan transition">OWASP GenAI</a>
<a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener noreferrer" class="text-text-3 hover:text-cyan transition">GitHub</a>
<a href="/portals" class="text-text-3 hover:text-cyan transition">Portals</a>
</div>
</div>
<div class="mt-8 pt-6 border-t border-border-dim text-center">
<p class="text-text-3 text-sm">Part of the <a href="https://genai.owasp.org/" target="_blank" rel="noopener noreferrer" class="text-cyan hover:text-green transition">OWASP GenAI Security Project</a></p>
</div>
{% endblock %}
</div>
Expand Down
10 changes: 0 additions & 10 deletions finbot/apps/finbot/templates/how-it-works.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,16 +58,6 @@
}
{% endblock %}

{% block nav %}
<a href="/" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Home</a>
<a href="/portals" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">Portals</a>
<a href="/about" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden md:inline-flex">About</a>
<a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<span class="hidden sm:inline">GitHub</span>
</a>
{% endblock %}

{% block content %}
<!-- Hero -->
<section class="relative pt-32 pb-16 px-6">
Expand Down
Loading