frontend-finished
This commit is contained in:
50
about.html
Normal file
50
about.html
Normal 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>
|
||||
@ -1,6 +1,7 @@
|
||||
<!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>
|
||||
@ -15,7 +16,7 @@
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">API Pricing</a></li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
</ul>
|
||||
@ -23,7 +24,7 @@
|
||||
</div>
|
||||
<div class="start">
|
||||
<div class="title">
|
||||
<h1>DAIA<br>LECT</h1>
|
||||
<h1>D<out>AI</out>A<br>LECT</h1>
|
||||
</div>
|
||||
<div id="blobs">
|
||||
<div id="blue" class="blob"></div>
|
||||
@ -52,7 +53,7 @@
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">API Pricing</a></li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
</ul>
|
||||
|
||||
49
pricing.html
Normal file
49
pricing.html
Normal 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>
|
||||
@ -3,3 +3,8 @@
|
||||
### 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
41
style.css
@ -149,10 +149,33 @@ p {
|
||||
text-align: right;
|
||||
text-align-last: right;
|
||||
padding-right: 140px;
|
||||
padding-top: 150px;
|
||||
padding-top: 140px;
|
||||
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 {
|
||||
height: 1000px;
|
||||
position: relative;
|
||||
@ -211,8 +234,7 @@ button {
|
||||
position: relative;
|
||||
right: 200px;
|
||||
z-index: 0;
|
||||
animation: appear 0.4s 0s ease-in;
|
||||
animation: idle-blue s 0.4s infinite;
|
||||
animation: idle-blue 8s 0.4s infinite;
|
||||
}
|
||||
|
||||
#green {
|
||||
@ -221,7 +243,6 @@ button {
|
||||
top: -200px;
|
||||
right: 150px;
|
||||
z-index: 2;
|
||||
animation: appear 0.4s -0.075s ease-in;
|
||||
animation: idle-green 5s 0.3s infinite;
|
||||
}
|
||||
|
||||
@ -231,7 +252,6 @@ button {
|
||||
left: 60px;
|
||||
top: -45px;
|
||||
z-index: 1;
|
||||
animation: appear 0.4s -0.15s ease-in;
|
||||
animation: idle-red 7s 0.3s infinite;
|
||||
}
|
||||
|
||||
@ -263,20 +283,13 @@ button {
|
||||
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 {
|
||||
0% {transform: scale(1); }
|
||||
20% {transform: scale(1.4); }
|
||||
40% {transform: scale(1.1); transform: translateY(40px);}
|
||||
60% {transform: scale(0.8); transform: translateX(50px)}
|
||||
80% {transform: scale(0.9); ;}
|
||||
95% {transform: scale(1); ; transform: translateY(-40px); transform: translateX(-50px);}
|
||||
80% {transform: scale(0.9);}
|
||||
95% {transform: scale(1); transform: translateY(-40px); transform: translateX(-50px);}
|
||||
}
|
||||
|
||||
@keyframes idle-green {
|
||||
|
||||
5
try.html
5
try.html
@ -1,6 +1,7 @@
|
||||
<!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>
|
||||
@ -15,7 +16,7 @@
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">API Pricing</a></li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
</ul>
|
||||
@ -43,7 +44,7 @@
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">API Pricing</a></li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user