paul/DAIALECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

README + HEAD + CSS ordentlich

Browse Source
This commit is contained in:
Paul Martin
2023-12-30 17:10:58 +01:00
parent 276fa4e8df
commit 3a6b004ec1
8 changed files with 151 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
about.html
View File

@ -2,14 +2,15 @@
<html lang="de" > <html lang="de" >
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DAIALECT LOCAL</title> <title>DAIALECT 𑁋 ABOUT</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="resources/blobs.png">
<script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script> <script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="blob-animation.js"></script> <script type="text/javascript" src="blob-animation.js"></script>
</head> </head>
<body> <body>
<div id="navbar-top"> <div id="navbar-top">
<div id="navbar"> <div class="navbar">
<ul> <ul>
<li class="link"><a href="index.html">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>
@ -33,7 +34,7 @@
</div> </div>
</div> </div>
<div id="navbar-bottom"> <div id="navbar-bottom">
<div id="navbar"> <div class="navbar">
<ul> <ul>
<li class="link"><a href="index.html">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>

4
animations.js
View File

@ -17,8 +17,8 @@ $(document).ready(function () {
var screenheight = $("body").height(); var screenheight = $("body").height();
var pos = $(this).scrollTop (); var pos = $(this).scrollTop ();
if (stage == 1 && pos-(screenheight/4.5) >= height2) { moveBlobs ("225vh", "31vw", 2)} if (stage == 1 && pos-(screenheight/4.5) >= height2) { moveBlobs ("225vh", "31vw", 2)}
else if (stage == 2 && pos-(screenheight/1.9) < height2 ) { moveBlobs ("95vh", "52vw", 1)} else if (stage == 2 && pos-(screenheight/1.9) < height2 ) { moveBlobs ("105vh", "55vw", 1)}
else if (stage == 0 && pos+(screenheight/1.5) >= height1){ moveBlobs ("95vh", "52vw", 1)} else if (stage == 0 && pos+(screenheight/1.5) >= height1){ moveBlobs ("105vh", "55vw", 1)}
else if ((stage == 1 && pos < height1-(screenheight/2))) { moveBlobs (0,0,0) } else if ((stage == 1 && pos < height1-(screenheight/2))) { moveBlobs (0,0,0) }
}) })
} }

13
index.html
View File

@ -2,14 +2,15 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DAIALECT LOCAL</title> <title>DAIALECT 𑁋 HOME</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="resources/blobs.png">
<script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script> <script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="animations.js"></script> <script type="text/javascript" src="animations.js"></script>
</head> </head>
<body> <body>
<div id="navbar-top"> <div id="navbar-top">
<div id="navbar"> <div class="navbar">
<ul> <ul>
<li><a href="index.html" class="sel">HOME</a></li> <li><a href="index.html" class="sel">HOME</a></li>
<li>|</li> <li>|</li>
@ -23,8 +24,7 @@
</div> </div>
<div class="start"> <div class="start">
<div class="title"> <div class="title">
<h1>D<em>AI</em>A<br> <h1>D<em>AI</em>A<br>LECT</h1>
LECT</h1>
</div> </div>
<div id="blobs"> <div id="blobs">
<div id="blue" class="blob"></div> <div id="blue" class="blob"></div>
@ -43,13 +43,12 @@
</div> </div>
<div id="zwei"> <div id="zwei">
<div class = "text-mittig"> <div class = "text-mittig">
<h2> MIT HILFE VON <br> <h2> MIT HILFE VON <br> KI ALLE <br></h2>
KI ALLE <br></h2>
<h3>MENSCHEN VERSTEHEN</h3> <h3>MENSCHEN VERSTEHEN</h3>
</div> </div>
</div> </div>
<div id="navbar-bottom"> <div id="navbar-bottom">
<div id="navbar"> <div class="navbar">
<ul> <ul>
<li><a href="index.html" class="sel">HOME</a></li> <li><a href="index.html" class="sel">HOME</a></li>
<li>|</li> <li>|</li>

7
pricing.html
View File

@ -2,14 +2,15 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DAIALECT LOCAL</title> <title>DAIALECT 𑁋 PRICING</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="resources/blobs.png">
<script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script> <script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="blob-animation.js"></script> <script type="text/javascript" src="blob-animation.js"></script>
</head> </head>
<body> <body>
<div id="navbar-top"> <div id="navbar-top">
<div id="navbar"> <div class="navbar">
<ul> <ul>
<li class="link"><a href="index.html">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>
@ -32,7 +33,7 @@
</div> </div>
</div> </div>
<div id="navbar-bottom"> <div id="navbar-bottom">
<div id="navbar"> <div class="navbar">
<ul> <ul>
<li class="link"><a href="index.html">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>

15
readme.md
View File

@ -4,8 +4,17 @@
--- ---
Das imaginäre Produkt, für das ich eine Website entwickelt habe, nennt sich um die Dialekterkennungs-API "DAIALECT". Das imaginäre Produkt, für das ich eine Website entwickelt habe, nennt sich um die Dialekterkennungs-API "DAIALECT".
Getestet wurde die Website in Chrome, Edge, Opera und Firefox auf 1080p- sowie 1440p-Monitoren. Bei letzteren empfiehlt es sich, für die optimale Darstellung den Browser-Zoom um eine Stelle zu erhöhen. Zwei der drei verwendeten Schriftarten werden importiert, in meinen Tests hat das nie zu Problemen geführt.
Die verwendeten Schriftarten werden importiert. In meinen Tests hat das nie zu Problemen geführt.
### IMPLEMENTIERTE SEITEN ### IMPLEMENTIERTE SEITEN
Alle Links in der Navbar sind anklickbar, die Seiten "ABOUT" und "PRICING" sind aber nicht ausformuliert, sondern bestehen nur aus den Überschriften. Alle Links in der Navbar sind anklickbar, die Seiten "ABOUT" und "PRICING" sind aber nicht ausformuliert, sondern bestehen nur aus den Überschriften.
### https://dev.paulmartin.cloud/daialect/index.html
### VERSCHIEDENE VERSIONEN
Zusätzlich zu der abgegeben Version, ist eine identische auch online verfügbar unter:
### https://dev.paulmartin.cloud/daialect/index.html
Alle Dateien sowie die vergangenen Versionen der Website sind darüber hinaus auch in einem Git-Repository verfügbar:
### https://git.paulmartin.cloud/paul/DAIALECT

BIN
resources/blobs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 419 KiB

210
style.css
View File

@ -1,6 +1,12 @@
/* SCHRIFTARTEN */
@font-face { font-family: "League Spartan"; src: url("resources/LeagueSpartan.ttf");} @font-face { font-family: "League Spartan"; src: url("resources/LeagueSpartan.ttf");}
@font-face { font-family: "League Spartan Black"; src: url("resources/LeagueSpartan-Black.ttf");} @font-face { font-family: "League Spartan Black"; src: url("resources/LeagueSpartan-Black.ttf");}
/* BODY + NAVBAR */
body body
{ {
background-color: #FFE49F; background-color: #FFE49F;
@ -11,6 +17,16 @@ body
width: 100vw; width: 100vw;
} }
.navbar {
text-align: center;
width: 40vw;
background-color: #E07A31;
z-index: 55;
border-radius: 2cqmin;
opacity: 90%;
height: 3vw;
}
#navbar-top { #navbar-top {
justify-content: center; justify-content: center;
display: flex; display: flex;
@ -26,16 +42,6 @@ body
margin-bottom: 2.5vh; margin-bottom: 2.5vh;
} }
#navbar {
text-align: center;
width: 40vw;
background-color: #E07A31;
z-index: 55;
border-radius: 2cqmin;
opacity: 90%;
height: 3vw;
}
ul { ul {
vertical-align: middle; vertical-align: middle;
list-style-type: none; list-style-type: none;
@ -67,27 +73,18 @@ li.link:hover {
} }
.start {
display: flex; /* INHALT ALLGEMEIN */
justify-content: space-evenly;
height: 100vh; p {
position: relative;
font-size: 0.8vw;
text-align: right;
z-index: 60;
} }
#eins { h1 em {
display: flex; font-style: normal;
justify-content: right;
height: 100vh;
}
#zwei {
width: 100%;
z-index: 10;
height: 120vh;
}
.text-rechts {
width: 46vw;
margin-right: 5vw;
} }
h2 { h2 {
@ -98,17 +95,17 @@ h2 {
text-align-last: justify; text-align-last: justify;
} }
#eins h2 { .start {
display: flex; display: flex;
line-height: 0.3; justify-content: space-evenly;
height: 100vh;
} }
#zwei h2 { .text-rechts {
font-size: 10vw; width: 46vw;
line-height: 1.8; margin-right: 5vw;
} }
.text-mittig { .text-mittig {
width: 90%; width: 90%;
margin-left: 5%; margin-left: 5%;
@ -123,13 +120,6 @@ h2 {
text-align-last: justify; text-align-last: justify;
} }
p {
position: relative;
font-size: 0.8vw;
text-align: right;
z-index: 60;
}
.title .title
{ {
font-family: "League Spartan Black"; font-family: "League Spartan Black";
@ -164,19 +154,9 @@ p {
font-family: "League Spartan"; font-family: "League Spartan";
} }
.laut {
font-family: sans-serif !important;
font-size: 6vw !important;
font-style: italic;
}
.title em { .title em {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.3vw #E07A31; -webkit-text-stroke: 0.3vw #E07A31;
}
h1 em {
font-style: normal;
} }
.title p { .title p {
@ -186,15 +166,41 @@ h1 em {
padding-right: 10vw; padding-right: 10vw;
} }
.button-rechts { #eins {
display: flex;
justify-content: right;
height: 100vh; height: 100vh;
position: relative;
top: 25vh;
width: 46%;
margin-right: 5vw;
display: block;
} }
#eins h2 {
display: flex;
line-height: 0.3;
}
#zwei {
width: 100%;
z-index: 10;
height: 120vh;
}
#zwei h2 {
font-size: 10vw;
line-height: 1.8;
}
/* ABOUT */
.laut {
font-family: sans-serif !important;
font-size: 6vw !important;
font-style: italic;
}
/* TRY NOW */
form { form {
background-color: transparent; background-color: transparent;
border-style: dotted; border-style: dotted;
@ -229,19 +235,34 @@ hr {
border-width: 1vh; border-width: 1vh;
} }
#fileselect { .button-rechts {
visibility: hidden; height: 100vh;
position: relative;
top: 25vh;
width: 46%;
margin-right: 5vw;
display: block;
} }
.sel { .sel {
color:#fff0cb color:#fff0cb
} }
@keyframes raise { #fileselect {
0% {z-index: 0; opacity: 0%;} visibility: hidden;
70% {opacity: 50%;} }
100% {z-index: 100; opacity: 90%;}
/* BLOBS */
.blob {
border-radius: 7.5vw;
filter: blur(1.6vw);
width: 15vw;
height: 15vw;
top: 25vh;
scale: 1.4;
} }
#blobs { #blobs {
@ -255,16 +276,6 @@ hr {
position: relative; position: relative;
} }
.blob {
border-radius: 7.5vw;
filter: blur(1.6vw);
width: 15vw;
height: 15vw;
top: 25vh;
scale: 1.4;
}
#blue { #blue {
background-color: #50eff4; background-color: #50eff4;
position: relative; position: relative;
@ -292,6 +303,32 @@ hr {
animation: idle-red 7s 0.3s infinite; animation: idle-red 7s 0.3s infinite;
} }
/* ANIMATIONEN 𑁋 ERSCHEINEN */
@keyframes raise {
0% {z-index: 0; opacity: 0%;}
70% {opacity: 50%;}
100% {z-index: 100; opacity: 90%;}
}
@keyframes appear {
0% {transform: scale(0); opacity: 0%}
60% {transform: scale(0.8)}
80% {transform: scale(1.1); opacity: 100%}
100% {transform: scale(1)}
}
@keyframes float-in {
0% {transform: translateY(-15vh); opacity: 0%}
100% {transform: translateY(0vh); opacity: 90%;}
}
/* ANIMATIONEN 𑁋 TRY NOW */
@keyframes text-in-out { @keyframes text-in-out {
0% {color: inherit} 0% {color: inherit}
40% {color: transparent} 40% {color: transparent}
@ -299,12 +336,6 @@ hr {
100% {color: inherit} 100% {color: inherit}
} }
@keyframes border-out {
0% {opacity: 1;}
40% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes border-in-out { @keyframes border-in-out {
0% {border-radius: 1.5vw} 0% {border-radius: 1.5vw}
10%{border-radius: 1.5vw} 10%{border-radius: 1.5vw}
@ -314,12 +345,16 @@ hr {
100% {border-radius: 1.5vw} 100% {border-radius: 1.5vw}
} }
@keyframes float-in { @keyframes border-out {
0% {transform: translateY(-15vh); opacity: 0%} 0% {opacity: 1;}
100% {transform: translateY(0vh); opacity: 90%;} 40% {opacity: 0;}
100% {opacity: 0;}
} }
/* ANIMATIONEN 𑁋 BLOBS */
@keyframes idle-blue { @keyframes idle-blue {
0% {transform: scale(1); z-index: 0;} 0% {transform: scale(1); z-index: 0;}
20% {transform: scale(1.4); z-index: 1;} 20% {transform: scale(1.4); z-index: 1;}
@ -399,10 +434,3 @@ hr {
100% {top: 215vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);} 100% {top: 215vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
} }
@keyframes appear {
0% {transform: scale(0); opacity: 0%}
60% {transform: scale(0.8)}
80% {transform: scale(1.1); opacity: 100%}
100% {transform: scale(1)}
}

7
try.html
View File

@ -2,14 +2,15 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DAIALECT LOCAL</title> <title>DAIALECT 𑁋 TRY NOW</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="resources/blobs.png">
<script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script> <script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="animations.js"></script> <script type="text/javascript" src="animations.js"></script>
</head> </head>
<body> <body>
<div id="navbar-top"> <div id="navbar-top">
<div id="navbar"> <div class="navbar">
<ul> <ul>
<li class="link"><a href="index.html">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>
@ -42,7 +43,7 @@
</div> </div>
</div> </div>
<div id="navbar-bottom"> <div id="navbar-bottom">
<div id="navbar"> <div class="navbar">
<ul> <ul>
<li class="link"><a href="index.html">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>