* Added bootstrap nav-bar

* Added nav-bar inside php file which is included in each page instead of copy pasting
 * Clicking on images will now redirect the user to a new page with the url of the image. This is to facilitate the exploit
This commit is contained in:
david 2025-09-17 11:37:36 +02:00
parent 9ec0afcee8
commit a4b1f68e34
5 changed files with 44 additions and 55 deletions

View File

@ -33,7 +33,7 @@ RUN sed -i 's/<VirtualHost \*:80>/<VirtualHost *:31337>/' /etc/apache2/sites-ava
# copy the app
#COPY ./app/ /var/www/html/
COPY ./www/ /var/www/html/
RUN mkdir /var/run/sshd

14
www/include/nav.php Normal file
View File

@ -0,0 +1,14 @@
<?php
echo "<nav class='navbar navbar-expand-lg navbar-light bg-light'>
<a class='navbar-brand' href='index.php'><img alt='logo' class='logo' src='static/img/logo.jpg'>Tux Gallery </a>
<div class='collapse navbar-collapse' id='navbarSupportedContent'>
<ul class='navbar-nav mr-auto'>
<li class='nav-item'>
<a class='nav-link' href='login.php'>Login</a>
</li>
</div>
</nav>";
?>

View File

@ -5,19 +5,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tux gallery !</title>
<link rel="stylesheet" href="static/css/stylesheet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
<div class="nav-bar">
<ol>
<a href="/index.php"><li><img alt="logo" class="logo" src="static/img/logo.jpg">Tux Gallery </li></a>
<a href="/login.php"><li>Login</li></a>
</ol>
</div>
<?php include 'include/nav.php'?>
<div class="wrapper">
<section class="info-part">
<h1>Tux gallery</h1>
<p>Tux is awesome ! So I made this extremely secure gallery.</p>
<p>Tux is awesome ! So I made this extremely secure gallery app.</p>
<p>You can also add tux pictures to the gallery, first <a href="login.php">login</a> and then you should be able to upload a new image of tux.</p>
</section>
<section class="gallery-part">
@ -25,13 +21,20 @@
<?php
foreach (new DirectoryIterator('static/img/gallery') as $file) {
if($file->isDot()) continue;
print '<img src="static/img/gallery/'. $file->getFilename() . '">';
print '<img class="tux-img" src="static/img/gallery/'. $file->getFilename() . '">'; // to do, is there an 'fstring' like for php ? just like in python
}
?>
</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<script>
window.addEventListener("load", (event) => {
console.log(document.getElementsByClassName("tux-img"))
Array.from(document.getElementsByClassName("tux-img")).forEach(img => {
img.addEventListener('click',function(){window.open(img.src)})
});
});
</script>
</body>
</html>

View File

@ -5,15 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tux gallery !</title>
<link rel="stylesheet" href="static/css/stylesheet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
<div class="nav-bar">
<ol>
<a href="/index.php"><li><img alt="logo" class="logo" src="static/img/logo.jpg">Tux Gallery </li></a>
<a href="/login.php"><li>Login</li></a>
</ol>
</div>
<?php include 'include/nav.php'?>
<div class="wrapper">
<form id="loginForm" method="POST" action="login.php">
<h1>Login</h1>

View File

@ -4,40 +4,6 @@
height:50px;
width:auto;
}
.nav-bar ol{
display:flex;
align-items: center;
gap:15px;
list-style-type: none;
width:100%;
height:60px;
padding:0;
margin:0;
background-color: rgb(36, 36, 36);
}
.nav-bar a {
padding:0;
margin:0;
height:60px;
display:flex;
align-content: center;
justify-content: center;
}
.nav-bar a:hover{
text-decoration: none;
}
.nav-bar li{
font-style: none;
color:black;
width:100%;
height:100%;
background-color: yellow;
}
.wrapper {
display:block;
margin-left:15%;
@ -45,8 +11,8 @@
}
.info-part{
margin-left:25%;
margin-right:25%;
margin-left:15%;
margin-right:15%;
}
.gallery img{
@ -65,4 +31,15 @@
margin-right:30%;
margin-left:30%;
gap:5px;
}
.tux-img{
cursor:pointer;
transition: all 0.1s ease-in-out;
border:2px solid white;
}
.tux-img:hover{
border:2px solid rgb(255, 196, 0);
}