janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

optimised UI

Browse Source
This commit is contained in:
janis
2023-01-05 21:59:33 +01:00
parent 6f6a526e67
commit cc9f74c106
16 changed files with 173 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
server.js
View File

@@ -82,12 +82,9 @@ app.get( '/assets/:filename', ( request, response ) => {
// Serve 404 pages // Serve 404 pages
app.use( ( req, res, next ) => { app.use( ( req, res, next ) => {
if ( req.query.lang == 'en' ) { res.status( 404 ).sendFile( path.join( __dirname + '/ui/404.html' ) );
res.status( 404 ).sendFile( path.join( __dirname + '/ui/en/errorResponses/404.html' ) );
} else {
res.status( 404 ).sendFile( path.join( __dirname + '/ui/de/errorResponses/404.html' ) );
};
}); });
const PORT = process.env.PORT || 8080;
http.createServer( app ).listen( 8080 ); http.createServer( app ).listen( PORT );

4
ui/404.html
View File

@@ -3,8 +3,8 @@
<head> <head>
<title>404 - Page not Found - janishutz.com</title> <title>404 - Page not Found - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/js/jquery.js"></script> <script defer src="/js/jquery.js"></script>
<script src="/js/basicanimations.js"></script> <script defer src="/js/basicanimations.js"></script>
<link rel="stylesheet" href="/css/mainstyle.css"> <link rel="stylesheet" href="/css/mainstyle.css">
<style> <style>
.errorpage { .errorpage {

4
ui/about.html
View File

@@ -4,8 +4,8 @@
<title>About - janishutz.com</title> <title>About - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/mainstyle.css"> <link rel="stylesheet" href="./css/mainstyle.css">
<script src="./js/jquery.js"></script> <script defer src="./js/jquery.js"></script>
<script src="./js/basicanimations.js"></script> <script defer src="./js/basicanimations.js"></script>
</head> </head>
<body> <body>

4
ui/aboutPage.html
View File

@@ -4,8 +4,8 @@
<title>About - janishutz.com</title> <title>About - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/mainstyle.css"> <link rel="stylesheet" href="./css/mainstyle.css">
<script src="./js/jquery.js"></script> <script defer src="./js/jquery.js"></script>
<script src="./js/basicanimations.js"></script> <script defer src="./js/basicanimations.js"></script>
</head> </head>
<body> <body>
<div id="ContentToInclude"></div> <div id="ContentToInclude"></div>

9
ui/css/mainstyle.css
View File

@@ -14,6 +14,9 @@ html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
}
body {
background-color: rgba(70, 72, 167, 0.5); background-color: rgba(70, 72, 167, 0.5);
font-family: sans-serif; font-family: sans-serif;
} }
@@ -42,9 +45,9 @@ html, body {
padding-top: 5%; padding-top: 5%;
padding-bottom: 5%; padding-bottom: 5%;
border-color: black; border-color: black;
border-style: inset; border-style: none;
border-radius: 50px; border-radius: 50px;
background-color:dimgray; background-color: rgba(195, 195, 229, 1);
} }
/* /*
@@ -66,7 +69,7 @@ html, body {
display: inline-block; display: inline-block;
padding: 20px; padding: 20px;
color: white; color: white;
background-color:blue; background-color:rgba(0, 40, 131, 1);
border-radius: 20px; border-radius: 20px;
} }

185
ui/css/menustyle.css
View File

@@ -1,102 +1,109 @@
.logo { /*
width: 5%; *
display: inline-block; * janishutz.com - menustyle.css
margin-left: 2%; *
position: relative; *
vertical-align: middle; * Created 2023 by Janis Hutz
} */
.menu-container { .Menu {
display: inline-flex; margin-top: -1%;
width: 80%; padding: 2%;
justify-content: center; padding-left: 0;
} padding-right: 0;
width: 100%;
overflow: hidden;
background-color: #38444d;
}
.stickybox { .logo {
display: inline; width: 5%;
position: sticky; display: inline-block;
position: -webkit-sticky; margin-left: 2%;
top: 0px; position: relative;
} vertical-align: middle;
}
.Menu { .menu-container {
margin-top: -1%; display: inline-flex;
padding: 2%; list-style-type: none;
padding-left: 0; width: 80%;
padding-right: 0; justify-content: center;
width: 100%; }
list-style-type: none;
overflow: hidden;
background-color: #38444d;
}
.menubutton { .stickybox {
text-decoration: none; display: inline;
display: inline-block; position: sticky;
padding: 20px; position: -webkit-sticky;
color: white; top: 0px;
border-radius: 0%; }
background-color: rgba(0,0,0,0);
}
.menubutton:hover { .menubutton {
border-radius: 0%; text-decoration: none;
animation-name: fadein; display: inline-block;
animation-duration: 300ms; padding: 20px;
background-color: darkblue; color: white;
} border-radius: 0%;
background-color: rgba(0,0,0,0);
}
.subitems:hover { .menubutton:hover {
animation-name: fadein; border-radius: 0%;
animation-duration: 300ms; animation-name: fadein;
background-color: darkblue; animation-duration: 300ms;
} background-color: darkblue;
}
.dropdown-menu { .subitems:hover {
margin: 0; animation-name: fadein;
padding: 0; animation-duration: 300ms;
background-color: lightseagreen; background-color: darkblue;
display: none; }
list-style-type: none;
position: absolute;
min-width: 200px;
}
@keyframes fadein { .dropdown-menu {
0% {opacity: 0;} margin: 0;
100% {opacity: 1;} padding: 0;
} background-color: lightseagreen;
display: none;
list-style-type: none;
position: absolute;
min-width: 200px;
}
@keyframes growDown { @keyframes fadein {
0% { 0% {opacity: 0;}
transform: scaleY(0) 100% {opacity: 1;}
} }
80% {
transform: scaleY(1.1)
}
100% {
transform: scaleY(1)
}
}
@keyframes rotateMenu { @keyframes growDown {
0% { 0% {
transform: rotateX(-90deg) transform: scaleY(0)
} }
70% { 80% {
transform: rotateX(20deg) transform: scaleY(1.1)
} }
100% { 100% {
transform: rotateX(0deg) transform: scaleY(1)
} }
} }
.dropdown:hover .dropdown-menu { @keyframes rotateMenu {
display: block; 0% {
animation: rotateMenu 300ms ease-in-out forwards; transform: rotateX(-90deg)
} }
70% {
transform: rotateX(20deg)
}
100% {
transform: rotateX(0deg)
}
}
.mainitems { .dropdown:hover .dropdown-menu {
display: inline-block; display: block;
} animation: rotateMenu 300ms ease-in-out forwards;
}
.mainitems {
display: inline-block;
}

4
ui/index.html
View File

@@ -5,8 +5,8 @@
<meta name="description" content="Discover my Software projects and services, and get support if you encounter problems."> <meta name="description" content="Discover my Software projects and services, and get support if you encounter problems.">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/mainstyle.css"> <link rel="stylesheet" href="/css/mainstyle.css">
<script src="/js/jquery.js"></script> <script defer src="/js/jquery.js"></script>
<script src="/js/basicanimations.js"></script> <script defer src="/js/basicanimations.js"></script>
</head> </head>
<body> <body>

61
ui/menu.html
View File

@@ -6,35 +6,36 @@
<title>Navmenu - janishutz.com</title> <title>Navmenu - janishutz.com</title>
</head> </head>
<body> <body>
<ul class="Menu"> <div class="Menu">
<a href="/"><img src="/assets/Logo.png" class="logo"></a> <a href="/"><img src="/assets/Logo.png" class="logo"></a>
<div class="menu-container"> <ul class="menu-container">
<li class="mainitems"><a class="menubutton" id="home" href="/">Home</a></li> <li class="mainitems"><a class="menubutton" id="home" href="/">Home</a></li>
<li class="dropdown mainitems"> <li class="dropdown mainitems">
<a class="menubutton" id="projects" href="/projects">Projects</a> <a class="menubutton" id="projects" href="/projects">Projects</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="subitems"><a class="menubutton" href="/projects/qrinsight">QR & Barcode Insight</a></li> <li class="subitems"><a class="menubutton" href="/projects/qrinsight">QR & Barcode Insight</a></li>
<li class="subitems"><a class="menubutton" href="/projects/storagemanager">StorageManager</a></li> <li class="subitems"><a class="menubutton" href="/projects/storagemanager">StorageManager</a></li>
<li class="subitems"><a class="menubutton" href="/projects/imagescaler">FSR Image & Video Upscaler Frontend</a></li> <li class="subitems"><a class="menubutton" href="/projects/imagescaler">FSR Image & Video Upscaler Frontend</a></li>
<li class="subitems"><a class="menubutton" href="/projects/musiplayer">MusicPlayer</a></li> <li class="subitems"><a class="menubutton" href="/projects/musiplayer">MusicPlayer</a></li>
<li class="subitems"><a class="menubutton" href="/projects/bgac">BiogasControllerApp</a></li> <li class="subitems"><a class="menubutton" href="/projects/bgac">BiogasControllerApp</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown mainitems"> <li class="dropdown mainitems">
<a class="menubutton" id="about" href="/aboutPage">About</a> <a class="menubutton" id="about" href="/aboutPage">About</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="subitems"><a class="menubutton" href="/privacypolicy">Privacy Policy</a></li> <li class="subitems"><a class="menubutton" href="/privacypolicy">Privacy Policy</a></li>
<li class="subitems"><a class="menubutton" href="/about">About me</a></li> <li class="subitems"><a class="menubutton" href="/about">About me</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown mainitems"> <li class="dropdown mainitems">
<a class="menubutton" id="services" href="/services">Services</a> <a class="menubutton" id="services" href="/services">Services</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="subitems"><a class="menubutton" href="https://pcbuilding.janishutz.com">PC Building</a></li> <li class="subitems"><a class="menubutton" href="https://pcbuilding.janishutz.com">PC Building</a></li>
<li class="subitems"><a class="menubutton" href="https://development.janishutz.com">Custom Websites</a></li> <li class="subitems"><a class="menubutton" href="https://development.janishutz.com">Custom Websites</a></li>
</ul> </ul>
</li> </li>
<li class="mainitems"><a class="menubutton" id="support" href="/support">Support</a></li> <li class="mainitems"><a class="menubutton" id="support" href="/support">Support</a></li>
</div> </ul>
</ul> </div>
<h3 style="text-align: center;">Note: This page is not yet optimised for mobile devices / vertical aspect ratios!</h3>
</body> </body>

4
ui/privacypolicy.html
View File

@@ -4,8 +4,8 @@
<title>Privacy Policy - janishutz.com</title> <title>Privacy Policy - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/mainstyle.css"> <link rel="stylesheet" href="/css/mainstyle.css">
<script src="/js/jquery.js"></script> <script defer src="/js/jquery.js"></script>
<script src="/js/basicanimations.js"></script> <script defer src="/js/basicanimations.js"></script>
</head> </head>
<body> <body>
<div id="ContentToInclude"></div> <div id="ContentToInclude"></div>

4
ui/projects.html
View File

@@ -4,8 +4,8 @@
<title>Projects - janishutz.com</title> <title>Projects - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/mainstyle.css"> <link rel="stylesheet" href="./css/mainstyle.css">
<script src="./js/jquery.js"></script> <script defer src="./js/jquery.js"></script>
<script src="./js/basicanimations.js"></script> <script defer src="./js/basicanimations.js"></script>
</head> </head>
<body> <body>
<div id="ContentToInclude"></div> <div id="ContentToInclude"></div>

4
ui/projects/bgac.html
View File

@@ -4,8 +4,8 @@
<title>BiogasControllerApp - janishutz.com</title> <title>BiogasControllerApp - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/mainstyle.css"> <link rel="stylesheet" href="/css/mainstyle.css">
<script src="/js/jquery.js"></script> <script defer src="/js/jquery.js"></script>
<script src="/js/basicanimations.js"></script> <script defer src="/js/basicanimations.js"></script>
</head> </head>
<body> <body>

4
ui/projects/imagescaler.html
View File

@@ -4,8 +4,8 @@
<title>FSR Image & Video Upscaler Frontend - janishutz.com</title> <title>FSR Image & Video Upscaler Frontend - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/mainstyle.css"> <link rel="stylesheet" href="/css/mainstyle.css">
<script src="/js/jquery.js"></script> <script defer src="/js/jquery.js"></script>
<script src="/js/basicanimations.js"></script> <script defer src="/js/basicanimations.js"></script>
</head> </head>
<body> <body>
<div id="ContentToInclude"></div> <div id="ContentToInclude"></div>

4
ui/projects/musiplayer.html
View File

@@ -4,8 +4,8 @@
<title>MusicPlayer - janishutz.com</title> <title>MusicPlayer - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/mainstyle.css"> <link rel="stylesheet" href="/css/mainstyle.css">
<script src="/js/jquery.js"></script> <script defer src="/js/jquery.js"></script>
<script src="/js/basicanimations.js"></script> <script defer src="/js/basicanimations.js"></script>
</head> </head>
<body> <body>

4
ui/projects/qrinsight.html
View File

@@ -4,8 +4,8 @@
<title>QR & Barcode Insight - janishutz.com</title> <title>QR & Barcode Insight - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/mainstyle.css"> <link rel="stylesheet" href="/css/mainstyle.css">
<script src="/js/jquery.js"></script> <script defer src="/js/jquery.js"></script>
<script src="/js/basicanimations.js"></script> <script defer src="/js/basicanimations.js"></script>
</head> </head>
<body> <body>
<div id="ContentToInclude"></div> <div id="ContentToInclude"></div>

4
ui/projects/storagemanager.html
View File

@@ -4,8 +4,8 @@
<title>StorageManager - janishutz.com</title> <title>StorageManager - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/mainstyle.css"> <link rel="stylesheet" href="/css/mainstyle.css">
<script src="/js/jquery.js"></script> <script defer src="/js/jquery.js"></script>
<script src="/js/basicanimations.js"></script> <script defer src="/js/basicanimations.js"></script>
</head> </head>
<body> <body>

4
ui/services.html
View File

@@ -4,8 +4,8 @@
<title>Services - janishutz.com</title> <title>Services - janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/mainstyle.css"> <link rel="stylesheet" href="./css/mainstyle.css">
<script src="./js/jquery.js"></script> <script defer src="./js/jquery.js"></script>
<script src="./js/basicanimations.js"></script> <script defer src="./js/basicanimations.js"></script>
</head> </head>
<body> <body>
<div id="ContentToInclude"></div> <div id="ContentToInclude"></div>