* started adding basic html & css

This commit is contained in:
david 2025-09-17 08:51:51 +02:00
parent 1712555cbc
commit 3314abd73d
4 changed files with 63 additions and 6 deletions

0
www/admin/upload.html Normal file
View File

View File

@ -4,21 +4,31 @@
<meta charset="UTF-8">
<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">
</head>
<body>
<div class="nav-bar">
<ol>
<li><a href="/">Tux Gallery <img alt="logo" class="icon" src="static/img/icon.jpg"></a></li>
<li><a href="#upload">Upload</a></li>
<li><a href="#view">View</a></li>
<a href="/"><li><img alt="logo" class="logo" src="static/img/logo.jpg"> Tux Gallery </li></a>
<a href="/view.html"><li>View</li></a>
<a href="/login.html"><li>Login</li></a>
</ol>
</div>
<div class="wrapper">
<div class="upload">
</div>
<section class="info-part">
<h1>Tux gallery</h1>
<p>Tux is awesome ! So I made this extremely secure gallery.</p>
<p>You can also add tux pictures to the gallery, first <a href="login.html">login</a> and then you should be able to upload a new image of tux.</p>
</section>
<section class="gallery-part">
<div class="gallery">
<img alt="placeholder">
<img alt="placeholder2">
</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>
</body>
</html>

0
www/login.html Normal file
View File

View File

@ -0,0 +1,47 @@
.logo{
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:flex;
align-content: center;
justify-content: center;
}