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

frontend-finished

Browse Source
This commit is contained in:
Paul Martin
2023-11-27 14:33:38 +01:00
parent 5f4233ae1d
commit 4fda3ba00f
6 changed files with 138 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
about.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="de" >
<head>
<meta charset="UTF-8">
<title>DAIALECT LOCAL</title>
<link rel="stylesheet" type="text/css" href="style.css">
<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">
<ul>
<li><a href="index.html">HOME</a></li>
<li>|</li>
<li><a href="about.html">ABOUT</a></li>
<li>|</li>
<li><a href="pricing.html">PRICING</a></li>
<li>|</li>
<li><a href="try.html">TRY NOW!</a></li>
</ul>
</div>
</div>
<div class="start">
<div class="title">
<h2><em>/ˈd <out>aɪ</out>.ə.lekt/</em> <br>
<small>AI steckt nicht nur im Namen.</small></h2>
</div>
<div id="blobs">
<div id="blue" class="blob"></div>
<div id="red" class="blob"></div>
<div id="green" class="blob"></div>
</div>
</div>
<div id="navbar-bottom">
<div id="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li>|</li>
<li><a href="about.html">ABOUT</a></li>
<li>|</li>
<li><a href="pricing.html">PRICING</a></li>
<li>|</li>
<li><a href="try.html">TRY NOW!</a></li>
</ul>
</div>
</div>
</body>
</html>

7
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8">
<title>DAIALECT LOCAL</title> <title>DAIALECT LOCAL</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<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>
@ -15,7 +16,7 @@
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">API Pricing</a></li> <li><a href="pricing.html">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li><a href="try.html">TRY NOW!</a></li>
</ul> </ul>
@ -23,7 +24,7 @@
</div> </div>
<div class="start"> <div class="start">
<div class="title"> <div class="title">
<h1>DAIA<br>LECT</h1> <h1>D<out>AI</out>A<br>LECT</h1>
</div> </div>
<div id="blobs"> <div id="blobs">
<div id="blue" class="blob"></div> <div id="blue" class="blob"></div>
@ -52,7 +53,7 @@
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">API Pricing</a></li> <li><a href="pricing.html">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li><a href="try.html">TRY NOW!</a></li>
</ul> </ul>

49
pricing.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DAIALECT LOCAL</title>
<link rel="stylesheet" type="text/css" href="style.css">
<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">
<ul>
<li><a href="index.html">HOME</a></li>
<li>|</li>
<li><a href="about.html">ABOUT</a></li>
<li>|</li>
<li><a href="pricing.html">PRICING</a></li>
<li>|</li>
<li><a href="try.html">TRY NOW!</a></li>
</ul>
</div>
</div>
<div class="start">
<div class="title">
<h3>API zur Dialekterkennung mit fairen Preisen.</h3>
</div>
<div id="blobs">
<div id="blue" class="blob"></div>
<div id="red" class="blob"></div>
<div id="green" class="blob"></div>
</div>
</div>
<div id="navbar-bottom">
<div id="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li>|</li>
<li><a href="about.html">ABOUT</a></li>
<li>|</li>
<li><a href="pricing.html">PRICING</a></li>
<li>|</li>
<li><a href="try.html">TRY NOW!</a></li>
</ul>
</div>
</div>
</body>
</html>

5
readme.md
View File

@ -3,3 +3,8 @@
### Paul Martin, TINF22B3, für Prof. Jürgen Röthig ### 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.
### 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

41
style.css
View File

@ -149,10 +149,33 @@ p {
text-align: right; text-align: right;
text-align-last: right; text-align-last: right;
padding-right: 140px; padding-right: 140px;
padding-top: 150px; padding-top: 140px;
font-family: "League Spartan"; font-family: "League Spartan";
} }
.title h3{
font-size: 125px;
text-align: right;
text-align-last: right;
padding-right: 140px;
padding-top: 160px;
font-family: "League Spartan";
}
.title em {
font-family: "sans-serif";
font-size: 120px;
}
.title out {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 5px #E07A31;
}
.title small {
font-size: 70px;
}
.button-rechts { .button-rechts {
height: 1000px; height: 1000px;
position: relative; position: relative;
@ -211,8 +234,7 @@ button {
position: relative; position: relative;
right: 200px; right: 200px;
z-index: 0; z-index: 0;
animation: appear 0.4s 0s ease-in; animation: idle-blue 8s 0.4s infinite;
animation: idle-blue s 0.4s infinite;
} }
#green { #green {
@ -221,7 +243,6 @@ button {
top: -200px; top: -200px;
right: 150px; right: 150px;
z-index: 2; z-index: 2;
animation: appear 0.4s -0.075s ease-in;
animation: idle-green 5s 0.3s infinite; animation: idle-green 5s 0.3s infinite;
} }
@ -231,7 +252,6 @@ button {
left: 60px; left: 60px;
top: -45px; top: -45px;
z-index: 1; z-index: 1;
animation: appear 0.4s -0.15s ease-in;
animation: idle-red 7s 0.3s infinite; animation: idle-red 7s 0.3s infinite;
} }
@ -263,20 +283,13 @@ button {
100% {font-size: 30px;} 100% {font-size: 30px;}
} }
@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 idle-blue { @keyframes idle-blue {
0% {transform: scale(1); } 0% {transform: scale(1); }
20% {transform: scale(1.4); } 20% {transform: scale(1.4); }
40% {transform: scale(1.1); transform: translateY(40px);} 40% {transform: scale(1.1); transform: translateY(40px);}
60% {transform: scale(0.8); transform: translateX(50px)} 60% {transform: scale(0.8); transform: translateX(50px)}
80% {transform: scale(0.9); ;} 80% {transform: scale(0.9);}
95% {transform: scale(1); ; transform: translateY(-40px); transform: translateX(-50px);} 95% {transform: scale(1); transform: translateY(-40px); transform: translateX(-50px);}
} }
@keyframes idle-green { @keyframes idle-green {

5
try.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8">
<title>DAIALECT LOCAL</title> <title>DAIALECT LOCAL</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<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>
@ -15,7 +16,7 @@
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">API Pricing</a></li> <li><a href="pricing.html">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li><a href="try.html">TRY NOW!</a></li>
</ul> </ul>
@ -43,7 +44,7 @@
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">API Pricing</a></li> <li><a href="pricing.html">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li><a href="try.html">TRY NOW!</a></li>
</ul> </ul>