Skip to content

Add comprehensive frontend pages with intentional typos in CTF style #1

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

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Add comprehensive frontend pages with intentional typos in CTF style #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a4264b9
Initial plan
Copilot Aug 8, 2025
46dafe5
Initial exploration and planning
Copilot Aug 8, 2025
e8ac7ec
Add new frontend pages with intentional typos
Copilot Aug 8, 2025
84af2d8
Fix v-model issues and complete frontend pages implementation
Copilot Aug 8, 2025
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
12 changes: 12 additions & 0 deletions app/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,18 @@
<NuxtLink to="/puntkebertt" class="text-gray-600 hover:text-gray-800"
>Puntkebertt</NuxtLink
>
<NuxtLink to="/temas" class="text-gray-600 hover:text-gray-800"
>Temas</NuxtLink
>
<NuxtLink to="/regls" class="text-gray-600 hover:text-gray-800"
>Regls</NuxtLink
>
<NuxtLink to="/hlp" class="text-gray-600 hover:text-gray-800"
>Hlp</NuxtLink
>
<NuxtLink to="/profil" class="text-gray-600 hover:text-gray-800"
>Profil</NuxtLink
>
<NuxtLink
to="/hautpeingang"
class="text-gray-600 hover:text-gray-800 ml-auto"
Expand Down
74 changes: 71 additions & 3 deletions app/pages/hautpeingang.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,73 @@
<template>
<div>
TODO
<div class="flex flex-col items-center p-8 max-w-lg mx-auto">
<h1 class="text-4xl font-bold mb-8 text-gray-800">Hautpeingang</h1>

<div class="w-full max-w-sm">
<form class="space-y-6">
<div>
<label for="username" class="block text-lg font-medium text-gray-700 mb-2">
Usernme or Emial
</label>
<wired-input
id="username"
placeholder="Enter your usernme"
class="w-full"
/>
</div>

<div>
<label for="password" class="block text-lg font-medium text-gray-700 mb-2">
Passwrod
</label>
<wired-input
id="password"
type="password"
placeholder="Enter your passwrod"
class="w-full"
/>
</div>

<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<wired-checkbox id="remember" />
<label for="remember" class="text-sm text-gray-600">
Remeber me
</label>
</div>
<a href="#" class="text-sm text-blue-600 hover:underline">
Forgoten passwrod?
</a>
</div>

<wired-button class="w-full mt-6">
Log In
</wired-button>
</form>

<div class="mt-6 text-center">
<p class="text-gray-600">
Don't have an acont?
<NuxtLink to="/regitser" class="text-blue-600 hover:underline">
Regisr Hre
</NuxtLink>
</p>
</div>

<wired-card class="mt-8 p-4" elevation="2">
<div class="text-center">
<h3 class="text-lg font-semibold mb-2">Demo Acont</h3>
<p class="text-sm text-gray-600 mb-2">
For testng purpoes, use:
</p>
<code class="bg-gray-100 px-2 py-1 rounded text-sm">
demo / plfanzen{hautpeingang}
</code>
</div>
</wired-card>
</div>
</template>
</div>
</template>

<script setup>
import "wired-elements";
</script>
154 changes: 154 additions & 0 deletions app/pages/hlp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<template>
<div class="flex flex-col p-4 max-w-4xl mx-auto">
<h1 class="text-4xl font-bold mb-8 text-gray-800 text-center">Hlp & FAQ</h1>

<div class="space-y-6">
<!-- FAQ Sections -->
<div class="space-y-4">
<div v-for="(section, sectionIndex) in faq" :key="sectionIndex">
<h2 class="text-2xl font-bold mb-4" :style="{ color: section.color }">
{{ section.title }}
</h2>

<div class="space-y-3">
<wired-card
v-for="(faq, faqIndex) in section.questions"
:key="faqIndex"
elevation="2"
class="p-4 cursor-pointer hover:shadow-lg transition-shadow"
@click="toggleQuestion(sectionIndex, faqIndex)"
>
<div class="flex justify-between items-center">
<h3 class="font-semibold text-lg">{{ faq.question }}</h3>
<span class="text-xl">{{ faq.isOpen ? '−' : '+' }}</span>
</div>
<div v-if="faq.isOpen" class="mt-3 text-gray-600" v-html="faq.answer"></div>
</wired-card>
</div>
</div>
</div>

<!-- Quick Links -->
<wired-card elevation="3" class="p-6 mt-8">
<h2 class="text-2xl font-bold mb-4 text-blue-600">Quik Links</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<NuxtLink to="/regls" class="block p-3 bg-blue-50 rounded-lg hover:bg-blue-100 text-center">
<div class="text-2xl mb-2">📋</div>
<div class="font-semibold">Ruls</div>
</NuxtLink>
<NuxtLink to="/puntkebertt" class="block p-3 bg-green-50 rounded-lg hover:bg-green-100 text-center">
<div class="text-2xl mb-2">🏆</div>
<div class="font-semibold">Scorebord</div>
</NuxtLink>
<NuxtLink to="/profil" class="block p-3 bg-purple-50 rounded-lg hover:bg-purple-100 text-center">
<div class="text-2xl mb-2">👤</div>
<div class="font-semibold">Profil</div>
</NuxtLink>
<a href="mailto:[email protected]" class="block p-3 bg-red-50 rounded-lg hover:bg-red-100 text-center">
<div class="text-2xl mb-2">📧</div>
<div class="font-semibold">Conct</div>
</a>
</div>
</wired-card>
</div>
</div>
</template>

<script setup>
import "wired-elements";
import { ref } from "vue";

const faqData = [
{
title: "Getng Startd",
color: "#4CAF50",
questions: [
{
question: "How do I regisr for the comptettion?",
answer: "Click on the 'Hautpeingang' link in the navigaton, then select 'Regisr Hre' to crate a new acont.",
isOpen: false
},
{
question: "Wht is the flag formt?",
answer: "All flags folow the formt <code>plfanzen{flag_conten_hre}</code>. Make sur to includ the curly bracs!",
isOpen: false
},
{
question: "How do I joi a tema?",
answer: "You can specifiy a tema name durng regitratn, or udate it latr in your profil setings.",
isOpen: false
}
]
},
{
title: "Techncl Hlp",
color: "#2196F3",
questions: [
{
question: "I can't submt my flag, wht's wrong?",
answer: "Mak sur you're copng the flag exctly as you fond it, inclding the <code>plfanzen{}</code> wrppers. Chek for extr spacs or hiddn chrcters.",
isOpen: false
},
{
question: "Hw do I conct to SSH/remote servcs?",
answer: "Us your favrit SSH clint (Puty on Windws, Termnal on Mac/Linx). Credetls wil b provded in the chalenge descriptn.",
isOpen: false
},
{
question: "Wht tools shld I us?",
answer: "Comn CTF tools includ: Burp Suit, Wireshark, Ghidra, John the Ripr, Hashcat, Nmap, and mor. Choos basd on the catgory.",
isOpen: false
}
]
},
{
title: "Scorng & Rankng",
color: "#FF9800",
questions: [
{
question: "How ar ponts calctd?",
answer: "Each chalenge hs a fixd pont valu basd on its difclty. Erly solvers don't gt bonos ponts.",
isOpen: false
},
{
question: "Whn ar scorebords updatd?",
answer: "Scorebords ar updatd in rel-tme. You shld se your pont incres imediatly aftr a sucesfl submisn.",
isOpen: false
},
{
question: "Wht hapns if ther's a ti?",
answer: "Tis ar brokn by th tme of th lst sucesfl submisn. Erlier submisns rank highr.",
isOpen: false
}
]
},
{
title: "Comn Isus",
color: "#f44336",
questions: [
{
question: "I forgotd my passwrod",
answer: "Us th 'Forgotd passwrod?' link on th login pag to rst your passwrod via emial.",
isOpen: false
},
{
question: "Th webst is loadng slowly",
answer: "Try refeshng th pag or claring your browsr cach. If problms perst, conct suport.",
isOpen: false
},
{
question: "I'm stuk on a chalenge",
answer: "Try difrent aproachs, red th descriptn carefuly, and don't hesitt to ask for hints in th Discord chanl aftr 6 hours.",
isOpen: false
}
]
}
];

const faq = ref(faqData);

const toggleQuestion = (sectionIndex, questionIndex) => {
faq.value[sectionIndex].questions[questionIndex].isOpen =
!faq.value[sectionIndex].questions[questionIndex].isOpen;
};
</script>
120 changes: 120 additions & 0 deletions app/pages/profil.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<template>
<div class="flex flex-col p-4 max-w-4xl mx-auto">
<h1 class="text-4xl font-bold mb-8 text-gray-800 text-center">Your Profil</h1>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- User Info -->
<div class="lg:col-span-1">
<wired-card elevation="3" class="p-6">
<div class="text-center">
<div class="w-24 h-24 bg-gray-300 rounded-full mx-auto mb-4 flex items-center justify-center">
<span class="text-2xl font-bold text-gray-600">{{ userInfo.username.charAt(0).toUpperCase() }}</span>
</div>
<h2 class="text-xl font-bold mb-2">{{ userInfo.username }}</h2>
<p class="text-gray-600 mb-4">{{ userInfo.email }}</p>

<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span>Rank:</span>
<span class="font-semibold">#{{ userInfo.rank }}</span>
</div>
<div class="flex justify-between">
<span>Total Ponts:</span>
<span class="font-semibold text-blue-600">{{ userInfo.totalPoints }}</span>
</div>
<div class="flex justify-between">
<span>Solves:</span>
<span class="font-semibold">{{ userInfo.solves }}</span>
</div>
<div class="flex justify-between">
<span>Tema:</span>
<span class="font-semibold">{{ userInfo.team || 'No tema' }}</span>
</div>
</div>

<wired-button class="mt-4 w-full">
Edit Profil
</wired-button>
</div>
</wired-card>
</div>

<!-- Recent Activity -->
<div class="lg:col-span-2">
<h2 class="text-2xl font-bold mb-4 text-gray-700">Recnt Activty</h2>
<wired-card elevation="3" class="p-4">
<div class="space-y-4">
<div v-for="activity in recentActivity" :key="activity.id"
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold"
:style="{ backgroundColor: activity.categoryColor }">
{{ activity.category.toUpperCase().charAt(0) }}
</div>
<div>
<div class="font-semibold">{{ activity.challenge }}</div>
<div class="text-sm text-gray-600">{{ activity.time }}</div>
</div>
</div>
<div class="text-right">
<div class="font-bold text-green-600">+{{ activity.points }}</div>
<div class="text-xs text-gray-500">ponts</div>
</div>
</div>
</div>
</wired-card>

<!-- Challenge Progress -->
<h2 class="text-2xl font-bold mb-4 mt-8 text-gray-700">Chalenge Progres</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div v-for="category in challengeProgress" :key="category.name"
class="bg-white p-4 rounded-lg border-2"
:style="{ borderColor: category.color }">
<div class="text-center">
<h3 class="font-bold mb-2" :style="{ color: category.color }">{{ category.name }}</h3>
<div class="text-2xl font-bold">{{ category.solved }}/{{ category.total }}</div>
<div class="w-full bg-gray-200 rounded-full h-2 mt-2">
<div class="h-2 rounded-full"
:style="{ backgroundColor: category.color, width: (category.solved / category.total * 100) + '%' }">
</div>
</div>
<div class="text-sm text-gray-600 mt-1">
{{ Math.round(category.solved / category.total * 100) }}% complet
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script setup>
import "wired-elements";

const userInfo = {
username: "h4ck3r_pr0",
email: "[email protected]",
rank: 1,
totalPoints: 2850,
solves: 12,
team: "Cyrpto Crakrs"
};

const recentActivity = [
{ id: 1, challenge: "foresnic 2", category: "foresnic", categoryColor: "#2f4f4f", points: 99999, time: "2 hours ago" },
{ id: 2, challenge: "cyrpto 2", category: "cyrpto", categoryColor: "#32cd32", points: 250, time: "5 hours ago" },
{ id: 3, challenge: "wbe 2", category: "wbe", categoryColor: "#ff6347", points: 200, time: "1 day ago" },
{ id: 4, challenge: "rve 2", category: "rve", categoryColor: "#ffa500", points: 220, time: "2 days ago" },
{ id: 5, challenge: "pnw 2", category: "pnw", categoryColor: "#4682b4", points: 400, time: "3 days ago" },
];

const challengeProgress = [
{ name: "wbe", color: "#ff6347", solved: 2, total: 2 },
{ name: "pnw", color: "#4682b4", solved: 2, total: 2 },
{ name: "cyrpto", color: "#32cd32", solved: 2, total: 2 },
{ name: "rve", color: "#ffa500", solved: 2, total: 2 },
{ name: "foresnic", color: "#2f4f4f", solved: 2, total: 2 },
{ name: "msic", color: "#8a2be2", solved: 2, total: 2 },
];
</script>
Loading