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

Compare commits

merge into: paul:relative-css
Branches Tags
paul:main paul:relative-css
...
pull from: paul:main
Branches Tags
paul:main paul:relative-css

7 Commits
relative-c ... main

Author SHA1 Message Date
paulmart-n
e80078df65 Readme Noise 2023-12-30 17:41:43 +01:00
paulmart-n
22eef78e2d README 2023-12-30 17:37:09 +01:00
paulmart-n
b28c3d4b83 README + ICON 2023-12-30 17:33:52 +01:00
paulmart-n
f71d2e378f icon 2023-12-30 17:19:20 +01:00
paulmart-n
2ed130b6d9 icon 2023-12-30 17:18:30 +01:00
paulmart-n
3a6b004ec1 README + HEAD + CSS ordentlich 2023-12-30 17:10:58 +01:00
Paul Martin
276fa4e8df Merge pull request 'relative-css' (#1) from relative-css into main 
Reviewed-on: paul/WebEngineering#1
 2023-12-27 16:10:30 +01:00
8 changed files with 158 additions and 114 deletions
Expand all files Collapse all files

7
about.html
View File

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

4
animations.js
View File

@ -17,8 +17,8 @@ $(document).ready(function () {
var screenheight = $("body").height();
var pos = $(this).scrollTop ();
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 == 0 && pos+(screenheight/1.5) >= height1){ 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 ("105vh", "55vw", 1)}
else if ((stage == 1 && pos < height1-(screenheight/2))) { moveBlobs (0,0,0) }
})
}

BIN
blobs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 419 KiB

13
index.html
View File

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

7
pricing.html
View File

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

24
readme.md
View File

@ -3,9 +3,23 @@
### Paul Martin, TINF22B3, für Prof. Jürgen Röthig
---
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.
Die verwendeten Schriftarten werden importiert. In meinen Tests hat das nie zu Problemen geführt.
Das imaginäre Produkt, für das ich eine Website entwickelt habe, ist die Dialekterkennungs-API "DAIALECT".
### IMPLEMENTIERTE SEITEN
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
Alle Links in der Navbar sind anklickbar, die Seiten _ABOUT_ und _PRICING_ sind aber nicht ausformuliert, sondern bestehen nur aus den Überschriften.
### IMPORTIERTE DATEIEN
Im Ordner _resources_ befinden sich nur Dateien, die ich **nicht** selbst erstellt habe.
Zwei der drei verwendeten Schriftarten werden importiert, in meinen Tests hat das nie zu Problemen geführt. Die Schriftart habe ich von folgender Seite: https://fonts.google.com/specimen/League+Spartan .
_jquery_ ist nötig, um die Blobs beim Scrollen zu animieren. Die Datei habe ich von der offiziellen Download-Seite: https://jquery.com/download/ .
Die _Noise-Textur_ im Hintergrund habe ich mithilfe folgender Seite erstellt: https://fffuel.co/nnnoise/ .
### 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

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 Black"; src: url("resources/LeagueSpartan-Black.ttf");}
/* BODY + NAVBAR */
body
{
background-color: #FFE49F;
@ -11,6 +17,16 @@ body
width: 100vw;
}
.navbar {
text-align: center;
width: 40vw;
background-color: #E07A31;
z-index: 55;
border-radius: 2cqmin;
opacity: 90%;
height: 3vw;
}
#navbar-top {
justify-content: center;
display: flex;
@ -26,16 +42,6 @@ body
margin-bottom: 2.5vh;
}
#navbar {
text-align: center;
width: 40vw;
background-color: #E07A31;
z-index: 55;
border-radius: 2cqmin;
opacity: 90%;
height: 3vw;
}
ul {
vertical-align: middle;
list-style-type: none;
@ -67,27 +73,18 @@ li.link:hover {
}
.start {
display: flex;
justify-content: space-evenly;
height: 100vh;
/* INHALT ALLGEMEIN */
p {
position: relative;
font-size: 0.8vw;
text-align: right;
z-index: 60;
}
#eins {
display: flex;
justify-content: right;
height: 100vh;
}
#zwei {
width: 100%;
z-index: 10;
height: 120vh;
}
.text-rechts {
width: 46vw;
margin-right: 5vw;
h1 em {
font-style: normal;
}
h2 {
@ -98,17 +95,17 @@ h2 {
text-align-last: justify;
}
#eins h2 {
.start {
display: flex;
line-height: 0.3;
justify-content: space-evenly;
height: 100vh;
}
#zwei h2 {
font-size: 10vw;
line-height: 1.8;
.text-rechts {
width: 46vw;
margin-right: 5vw;
}
.text-mittig {
width: 90%;
margin-left: 5%;
@ -123,13 +120,6 @@ h2 {
text-align-last: justify;
}
p {
position: relative;
font-size: 0.8vw;
text-align: right;
z-index: 60;
}
.title
{
font-family: "League Spartan Black";
@ -164,19 +154,9 @@ p {
font-family: "League Spartan";
}
.laut {
font-family: sans-serif !important;
font-size: 6vw !important;
font-style: italic;
}
.title em {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.3vw #E07A31;
}
h1 em {
font-style: normal;
}
.title p {
@ -186,15 +166,41 @@ h1 em {
padding-right: 10vw;
}
.button-rechts {
#eins {
display: flex;
justify-content: right;
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 {
background-color: transparent;
border-style: dotted;
@ -229,19 +235,34 @@ hr {
border-width: 1vh;
}
#fileselect {
visibility: hidden;
.button-rechts {
height: 100vh;
position: relative;
top: 25vh;
width: 46%;
margin-right: 5vw;
display: block;
}
.sel {
color:#fff0cb
}
@keyframes raise {
0% {z-index: 0; opacity: 0%;}
70% {opacity: 50%;}
100% {z-index: 100; opacity: 90%;}
#fileselect {
visibility: hidden;
}
/* BLOBS */
.blob {
border-radius: 7.5vw;
filter: blur(1.6vw);
width: 15vw;
height: 15vw;
top: 25vh;
scale: 1.4;
}
#blobs {
@ -255,16 +276,6 @@ hr {
position: relative;
}
.blob {
border-radius: 7.5vw;
filter: blur(1.6vw);
width: 15vw;
height: 15vw;
top: 25vh;
scale: 1.4;
}
#blue {
background-color: #50eff4;
position: relative;
@ -292,6 +303,32 @@ hr {
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 {
0% {color: inherit}
40% {color: transparent}
@ -299,12 +336,6 @@ hr {
100% {color: inherit}
}
@keyframes border-out {
0% {opacity: 1;}
40% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes border-in-out {
0% {border-radius: 1.5vw}
10%{border-radius: 1.5vw}
@ -314,12 +345,16 @@ hr {
100% {border-radius: 1.5vw}
}
@keyframes float-in {
0% {transform: translateY(-15vh); opacity: 0%}
100% {transform: translateY(0vh); opacity: 90%;}
@keyframes border-out {
0% {opacity: 1;}
40% {opacity: 0;}
100% {opacity: 0;}
}
/* ANIMATIONEN 𑁋 BLOBS */
@keyframes idle-blue {
0% {transform: scale(1); z-index: 0;}
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);}
}
@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">
<head>
<meta charset="UTF-8">
<title>DAIALECT LOCAL</title>
<title>DAIALECT 𑁋 TRY NOW</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="blobs.png">
<script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="animations.js"></script>
</head>
<body>
<div id="navbar-top">
<div id="navbar">
<div class="navbar">
<ul>
<li class="link"><a href="index.html">HOME</a></li>
<li>|</li>
@ -42,7 +43,7 @@
</div>
</div>
<div id="navbar-bottom">
<div id="navbar">
<div class="navbar">
<ul>
<li class="link"><a href="index.html">HOME</a></li>
<li>|</li>