-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix Styling of flag formats and other small fixes (#2)
* "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
1 parent
bcdfeb7
commit 5ec0316
Showing
6 changed files
with
346 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters