Skip to content

Commit

Permalink
Fix Styling of flag formats and other small fixes (#2)
Browse files Browse the repository at this point in the history
* "Updated HTML files to increase max-width of challenge container and added line breaks to flag format labels."

* "Updated challenge description and PDF link in pdf-player.html"

* "Added 3 files encode-bin, zoom-toget,pdf-player
"

* "chage zoom-toget"

---------

Co-authored-by: S A G A R <[email protected]>
  • Loading branch information
Rahul-aithal and tmsagarofficial authored Nov 29, 2024
1 parent bcdfeb7 commit 5ec0316
Show file tree
Hide file tree
Showing 6 changed files with 346 additions and 0 deletions.
2 changes: 2 additions & 0 deletions audio-challenge.html
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,12 @@ <h2 class="text-2xl font-bold text-lime-400 mb-6">Challenge Description</h2>
Hint: Hover over the card to unlock controls.
</div>
<div class="challenge-input mb-6 mt-10">

<div style="background-color: #1a202c; border: 1px solid #4a5568; color: #e0e0e0; padding: 16px; border-radius: 8px; margin-top: 10px;">
<span style="font-weight: bold; color: #48bb78; display: block; margin-bottom: 8px;">Flag Format:</span>
<span>HVFLAG{Th1s_is_4_Fl4g}</span>
</div>

</div>
</div>
</div>
Expand Down
107 changes: 107 additions & 0 deletions encode-bin.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CTF Challenge | HashVault</title>
<link rel="favicon" href="favicon.ico" type="image/x-icon">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=VT323&display=swap');

body {
font-family: 'Orbitron', sans-serif;
background-color: #121212;
color: #e0e0e0;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.terminal-text {
font-family: 'VT323', monospace;
color: #1de9b6;
}

.challenge-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}

.challenge-card {
background-color: rgba(31, 41, 55, 0.8);
border-radius: 16px;
border: 1px solid rgba(79, 70, 229, 0.3);
padding: 30px;
backdrop-filter: blur(10px);
}

.glitch-text {
animation: glitch 1s infinite;
}

#code-display {
white-space: pre-wrap;
font-family: monospace;
background-color: #1a202c;
padding: 15px;
border-radius: 8px;
display: none;
}

@keyframes glitch {

2%,
64% {
transform: translate(2px, 0) skew(0deg);
}

4%,
60% {
transform: translate(-2px, 0) skew(0deg);
}

62% {
transform: translate(0, 0) skew(5deg);
}
}
</style>
</head>

<body class="bg-black">
<div class="container mx-auto px-4 py-10">
<div class="text-center mb-10">
<h1 class="text-3xl sm:text-4xl font-bold text-white glitch-text">
CTF <span class="text-red-400">Challenge</span> - HashVault
</h1>
<p class="mt-4 text-gray-300">Find the Hidden Flag</p>
</div>

<div class="challenge-container">
<div class="challenge-card">
<h2 class="text-2xl font-bold text-amber-400 mb-6">Mission Brief</h2>
<p class="text-gray-200 mb-6">
Use your language strength to find the FLAG
</p>
<p class="btn text-white bg-transpernt px-4 py-2 rounded-md">01001000 01010110 01000110 01001100 01000001 01000111 01111011 01000010 00110001 01001110 01011111 01000011 00110100 00110111 01000011 01001000 01111101</p>
<div class="challenge-input mb-6 mt-10">

<label type="text" id="flag-input"
class="w-full bg-gray-700 border border-gray-600 text-white p-2 rounded">Note: Flag Format:
<br class="md:hidden"> <br class="md:hidden">HVFLAG{Th1s_is_4_Fl4g}</label>
</div>

</div>
</div>

</div>


</body>

</html>
2 changes: 2 additions & 0 deletions hidden-flag.html
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,13 @@ <h2 class="text-2xl font-bold text-purple-400 mb-6">Challenge Description</h2>
🔍
</button></a>
</p>

<div class="challenge-input mb-6 mt-10">
<div style="background-color: #1a202c; border: 1px solid #4a5568; color: #e0e0e0; padding: 16px; border-radius: 8px; margin-top: 10px;">
<span style="font-weight: bold; color: #48bb78; display: block; margin-bottom: 8px;">Flag Format:</span>
<span>HVFLAG{Th1s_is_4_Fl4g}</span>
</div>

</div>


Expand Down
106 changes: 106 additions & 0 deletions pdf-player.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hidden Flag Challenge | HashVault</title>
<link rel="favicon" href="favicon.ico" type="image/x-icon">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=VT323&display=swap');

body {
font-family: 'Orbitron', sans-serif;
background-color: #111111;
color: #e0e0e0;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.terminal-text {
font-family: 'VT323', monospace;
color: #bcde23;
}

.challenge-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}

.challenge-card {
background-color: rgba(31, 41, 55, 0.8);
border-radius: 16px;
border: 1px solid rgba(4, 227, 34, 0.347);
padding: 30px;
backdrop-filter: blur(10px);
}

.glitch-text {
animation: glitch 1s infinite;
}

#code-display {
white-space: pre-wrap;
font-family: monospace;
background-color: #1a202c;
padding: 15px;
border-radius: 8px;
display: none;
}

@keyframes glitch {

2%,
64% {
transform: translate(2px, 0) skew(0deg);
}

4%,
60% {
transform: translate(-2px, 0) skew(0deg);
}

62% {
transform: translate(0, 0) skew(5deg);
}
}
</style>
</head>

<body class="bg-black">
<div class="container mx-auto px-4 py-10">
<div class="text-center mb-10">
<h1 class="text-3xl sm:text-4xl font-bold text-white glitch-text">
Hidden <span class="text-orange-400">Flag</span> Challenge
</h1>
<p class="mt-4 text-gray-300">Reveal the Hidden Secret</p>
</div>

<div class="challenge-container">
<div class="challenge-card">
<h2 class="text-2xl font-bold text-green-400 mb-6">Challenge Description</h2>
<p class="mt-4 text-gray-300">Find the secret flag hidden in the PDF</p>
<br>
<a href="https://github.com/tmsagarofficial/hashvault/raw/main/Aliens-chat.pdf " download>
<button class="text-white bg-blue-700 px-4 py-2 rounded-md">Download PDF</button>
</a>
<div class="challenge-input mb-6 mt-10">
<label class="block text-sm font-medium text-gray-300 mb-2"></l>
<label type="text" id="flag-input"
class="w-full bg-gray-700 border border-gray-600 text-white p-2 rounded">Note: Flag Format:
<br class="md:hidden"> <br class="md:hidden"> HVFLAG{Th1s_is_4_Fl4g}</label>
</div>
</div>
</div>

</div>

</body>

</html>
128 changes: 128 additions & 0 deletions tilt-ur-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CTF Challenge | HashVault</title>
<link rel="favicon" href="favicon.ico" type="image/x-icon">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=VT323&display=swap');

body {
font-family: 'Orbitron', sans-serif;
background-color: #121212;
color: #e0e0e0;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.terminal-text {
font-family: 'VT323', monospace;
color: #1de9b6;
}

.challenge-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}

.challenge-card {
background-color: rgba(31, 41, 55, 0.8);
border-radius: 16px;
border: 1px solid rgba(79, 70, 229, 0.3);
padding: 30px;
backdrop-filter: blur(10px);
}

.glitch-text {
animation: glitch 1s infinite;
}

#code-display {
white-space: pre-wrap;
font-family: monospace;
background-color: #1a202c;
padding: 15px;
border-radius: 8px;
display: none;
}

@keyframes glitch {

2%,
64% {
transform: translate(2px, 0) skew(0deg);
}

4%,
60% {
transform: translate(-2px, 0) skew(0deg);
}

62% {
transform: translate(0, 0) skew(5deg);
}
}
</style>
</head>

<body class="bg-black">
<div class="container mx-auto px-4 py-10">
<div class="text-center mb-10">
<h1 class="text-3xl sm:text-4xl font-bold text-white glitch-text">
CTF <span class="text-green-400">Challenge</span> - HashVault
</h1>
<p class="mt-4 text-gray-300">Find the Hidden Flag</p>
</div>

<div class="challenge-container">
<div class="challenge-card">
<h2 class="text-2xl font-bold text-blue-400 mb-6">Mission Brief</h2>
<p class="text-gray-200 mb-6">
Use your skills to inspect and find
the secret.
</p>
<p class="btn text-white bg-transpernt px-4 py-2 rounded-md">HVFLAG{Th!s_is_N0T}</p>
<div class="challenge-input mb-6 mt-10">

<label type="text" id="flag-input"
class="w-full bg-gray-700 border border-gray-600 text-white p-2 rounded">Note: Flag Format:
<br class="md:hidden"> <br class="md:hidden">HVFLAG{Th1s_is_4_Fl4g}</label>
</div>

</div>
</div>

</div>

<script>
const btn = document.getElementsByClassName("btn")[0];

const updateVisibilityOnRotation = () => {
// Check for portrait or landscape mode
const isLandscape = window.innerWidth > window.innerHeight;
if (isLandscape) {
btn.classList.add('block');
btn.classList.remove('hidden');
} else {
btn.classList.add('hidden');
btn.classList.remove('block');
}
};

// Run on page load
updateVisibilityOnRotation();

// Add event listener for resize (to detect rotation)
window.addEventListener("resize", updateVisibilityOnRotation);
</script>
</body>

</html>
1 change: 1 addition & 0 deletions who-is-this.html
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ <h2 class="text-2xl font-bold text-green-400 mb-6">Challenge Description</h2>
</a>



<div class="challenge-input mb-6 mt-10">
<div style="background-color: #1a202c; border: 1px solid #4a5568; color: #e0e0e0; padding: 16px; border-radius: 8px; margin-top: 10px;">
<span style="font-weight: bold; color: #48bb78; display: block; margin-bottom: 8px;">Flag Format:</span>
Expand Down

0 comments on commit 5ec0316

Please sign in to comment.