winzer/elwig-www
2
0
Fork 0
Code Issues Pull Requests Activity

Add style to index page

Browse Source
This commit is contained in:
Lorenz Stechauner
2024-05-14 18:44:12 +02:00
parent f660e71ca7
commit ddcc746744
7 changed files with 274 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
www/clients.php
View File

@ -107,18 +107,24 @@ if ($path == '') {
<title>Mandanten - Elwig - Elektronische Winzergenossenschaftsverwaltung</title> <title>Mandanten - Elwig - Elektronische Winzergenossenschaftsverwaltung</title>
<link rel="icon" href="/favicon.ico" sizes="16x16 20x20 24x24 30x30 32x32 36x36 40x40 48x48 60x60 64x64 72x72 80x80 96x96 128x128 256x256"/> <link rel="icon" href="/favicon.ico" sizes="16x16 20x20 24x24 30x30 32x32 36x36 40x40 48x48 60x60 64x64 72x72 80x80 96x96 128x128 256x256"/>
<link rel="stylesheet" href="/res/style.css"/> <link rel="stylesheet" href="/res/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head> </head>
<body> <body>
<h1>Mandanten</h1> <main>
<table> <section>
<thead><tr><th>Name</th></tr></thead> <h3>Mandanten</h3>
<tbody> <p style="text-align: center;"><a href="/">Startseite</a></p>
<table>
<thead><tr><th>Name</th></tr></thead>
<tbody>
<?php foreach ($clients as $c) { <?php foreach ($clients as $c) {
echo " <tr><td><a href='clients/$c'>$c</a></td></tr>\n"; echo " <tr><td><a href='clients/$c'>$c</a></td></tr>\n";
} ?> } ?>
</tbody> </tbody>
</table> </table>
<p><a href="clients?format=json">JSON-Format</a></p> <p style="text-align: center;"><a href="?format=json">JSON-Format</a></p>
</section>
</main>
</body> </body>
</html> </html>
<?php } <?php }

24
www/files/index.php
View File

@ -116,18 +116,24 @@ if ($format === 'json') {
<title>Downloads - Elwig - Elektronische Winzergenossenschaftsverwaltung</title> <title>Downloads - Elwig - Elektronische Winzergenossenschaftsverwaltung</title>
<link rel="icon" href="/favicon.ico" sizes="16x16 20x20 24x24 30x30 32x32 36x36 40x40 48x48 60x60 64x64 72x72 80x80 96x96 128x128 256x256"/> <link rel="icon" href="/favicon.ico" sizes="16x16 20x20 24x24 30x30 32x32 36x36 40x40 48x48 60x60 64x64 72x72 80x80 96x96 128x128 256x256"/>
<link rel="stylesheet" href="/res/style.css"/> <link rel="stylesheet" href="/res/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head> </head>
<body> <body>
<h1>Downloads</h1> <main>
<table> <section>
<thead><tr><th>Name</th><th>Größe</th><th>Änderungsdatum</th></tr></thead> <h3>Downloads</h3>
<tbody> <p style="text-align: center;"><a href="/">Startseite</a></p>
<table>
<thead><tr><th>Name</th><th>Größe</th><th>Änderungsdatum</th></tr></thead>
<tbody>
<?php foreach ($entities as $name => [$prod, $vers, $url, $size, $mtime, $ctime, $mod, $cre]) { <?php foreach ($entities as $name => [$prod, $vers, $url, $size, $mtime, $ctime, $mod, $cre]) {
echo " <tr><td><a href='files/$name'>$name</a></td><td>" . number_format($size / 1024 / 1024, 1) . " MB</td><td>" . date('d.m.Y, H:i', $mtime) . "</td></tr>\n"; echo " <tr><td><a href='files/$name'>$name</a></td><td>" . number_format($size / 1024 / 1024, 1) . " MB</td><td>" . date('d.m.Y, H:i', $mtime) . "</td></tr>\n";
} ?> } ?>
</tbody> </tbody>
</table> </table>
<p><a href="files?format=json">JSON-Format</a></p> <p style="text-align: center;"><a href="?format=json">JSON-Format</a></p>
</section>
</main>
</body> </body>
</html> </html>
<?php } <?php }

64
www/index.xhtml
View File

@ -5,27 +5,79 @@
<title>Elwig - Elektronische Winzergenossenschaftsverwaltung</title> <title>Elwig - Elektronische Winzergenossenschaftsverwaltung</title>
<link rel="icon" href="/favicon.ico" sizes="16x16 20x20 24x24 30x30 32x32 36x36 40x40 48x48 60x60 64x64 72x72 80x80 96x96 128x128 256x256"/> <link rel="icon" href="/favicon.ico" sizes="16x16 20x20 24x24 30x30 32x32 36x36 40x40 48x48 60x60 64x64 72x72 80x80 96x96 128x128 256x256"/>
<link rel="stylesheet" href="/res/style.css"/> <link rel="stylesheet" href="/res/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<div>
<a href="https://elwig.at/"><img src="/res/elwig.png" alt="Elwig Logo"/></a>
</div>
<ul> <ul>
<li><a href="/"><img src="/res/elwig.png" alt="Elwig Logo"/></a></li> <li><a href="/#">Start</a></li>
<li><a href="/#über">Über</a></li>
<li><a href="/#genossenschaften">Genossenschaften</a></li>
<li><a href="/files/">Downloads</a></li> <li><a href="/files/">Downloads</a></li>
<li><a href="https://git.necronda.net/winzer/">Quellcode</a></li> <li><a href="https://git.necronda.net/winzer/">Quellcode</a></li>
</ul> </ul>
<div/>
</nav> </nav>
</header> </header>
<main> <main>
<h1>Elwig</h1> <section class="home background">
<h2>Elektronische Winzergenossenschaftsverwaltung</h2> <a href="#über">
<a href="/clients">Mandanten</a> <div>
<img src="/res/elwig.png" alt="Elwig"/>
<div style="max-width: 16em;">
<h1>Elwig</h1>
<h2>Elektronische Winzer&#173;genossenschafts&#173;verwaltung</h2>
</div>
</div>
</a>
</section>
<section class="about">
<span id="über"/>
<h3>Elwig</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore etdolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore etdolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
<section class="picture-1"/>
<section class="clients">
<span id="genossenschaften"/>
<h3>Die Genossenschaften</h3>
<p>
<a href="/clients">Mandanten</a>
</p>
</section>
<section class="picture-2"/>
</main> </main>
<footer> <footer>
<a href="/" class="img"><img src="/res/elwig.png" alt="Elwig"/></a> <a href="https://elwig.at/"><img src="/res/elwig.png" alt="Elwig"/></a>
<p class="copyright">Copyright &#169; 2024 Lorenz Stechauner</p> <p>
<strong>Impressum</strong><br/>
Lorenz Stechauner, Thomas Hilscher<br/>
Österreich (Austria)<br/>
</p>
<p>
<strong>Kontakt</strong><br/>
E-Mail: <a href="mailto:contact@necronda.net">contact@necronda.net</a><br/>
</p>
</footer> </footer>
</body> </body>
</html> </html>

BIN
www/res/images/Italien-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 574 KiB

BIN
www/res/images/Italien-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 586 KiB

BIN
www/res/images/Italien-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 KiB

192
www/res/style.css
View File

@ -1,7 +1,11 @@
* {
box-sizing: border-box;
}
:root { :root {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
box-sizing: border-box; scroll-behavior: smooth;
} }
body { body {
@ -15,6 +19,7 @@ header {
height: 3em; height: 3em;
border-bottom: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0;
background-color: #FFFFFF; background-color: #FFFFFF;
z-index: 10;
} }
header img { header img {
@ -24,6 +29,13 @@ header img {
nav { nav {
height: 100%; height: 100%;
display: flex;
justify-content: space-between;
}
nav > *:first-child,
nav > *:last-child {
flex: 100px 1 1;
} }
nav ul { nav ul {
@ -36,15 +48,183 @@ nav ul {
height: 100%; height: 100%;
} }
nav li {
}
nav li a { nav li a {
text-decoration: none; text-decoration: none;
padding: 1em; padding: 1em 2em;
color: #808080;
}
nav li a:hover {
color: #A040C0;
}
main span[id] {
position: relative;
top: -8em;
}
p a {
color: #A040C0;
}
main .home {
height: 100vh;
background: url("/res/images/Italien-1.jpg") no-repeat bottom center fixed;
background-size: cover;
}
main .picture-1 {
width: 100%;
margin: 0;
background: url("/res/images/Italien-2.jpg") no-repeat bottom center fixed;
background-size: cover;
height: 24em;
}
main .picture-2 {
width: 100%;
margin: 0;
background: url("/res/images/Italien-3.jpg") no-repeat bottom center fixed;
background-size: cover;
height: 24em;
}
main .home a {
text-decoration: none;
color: #000000;
top: calc(32vh - 1em);
position: relative;
}
main .home a > div {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
transition: top 0.25s, font-size 0.25s;
width: fit-content;
margin: auto;
backdrop-filter: blur(16px);
padding: 1em 0.5em;
border-radius: 3em;
}
main .home a > div:hover {
font-size: 1.675em;
top: calc(32vh - 1.5em);
}
main .home img {
width: 8em;
height: 8em;
}
main .home h1 {
font-size: 3.5em;
margin: 0;
font-weight: normal;
}
main .home h2 {
font-size: 1.125em;
margin: 0;
font-weight: bold;
}
main section {
padding: 1em 0 2em 0;
}
main section p,
main section table {
max-width: 1000px;
margin: 1em auto;
}
main section p {
text-align: justify;
}
main section h3 {
text-align: center;
font-size: 2em;
}
main .about {
border-top: 1em solid #C0F080;
border-bottom: 1em solid #C0F080;
}
main .clients {
border-top: 1em solid #C0F080;
border-bottom: 1em solid #C0F080;
} }
table td { table td {
padding: 0.125em 0.5em; padding: 0.125em 0.5em;
} }
footer {
height: 8em;
padding: 1em;
width: 100%;
background-color: #404040;
color: #FFFFFF;
display: flex;
justify-content: center;
gap: 2em;
}
footer img {
height: 4em;
width: 4em;
}
footer a {
align-self: center;
}
@media screen and (max-width: 1032px) {
nav li a {
padding: 1em;
}
main section p,
main section table {
margin: 1em;
}
}
@media screen and (max-width: 800px) {
footer {
flex-direction: column;
height: unset;
align-items: center;
gap: 1em;
}
footer > *:not(:first-child) {
width: 300px;
}
.home {
font-size: 0.5em;
}
}
@media screen and (max-width: 650px) {
nav li:first-child {
display: none;
}
}
@media screen and (max-width: 550px) {
nav li:nth-child(2) {
display: none;
}
}
@media screen and (max-width: 500px) {
nav li:nth-child(3) {
display: none;
}
}