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

Compare commits

base: paul:64e3d7264db2c358c02687fca4a71dc007ea6b1b
Branches Tags
paul:main paul:relative-css
...
compare: paul:main
Branches Tags
paul:main paul:relative-css

9 Commits
64e3d7264d ... 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
paulmart-n
94b352a2b2 alles relativ 2023-12-27 16:08:07 +01:00
paulmart-n
82933b7f46 alles außer animation 2023-12-26 23:02:29 +01:00
8 changed files with 364 additions and 243 deletions
Expand all files Collapse all files

28
about.html
View File

@ -2,30 +2,30 @@
<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="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><a href="index.html">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li><a href="about.html" class="sel">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">PRICING</a></li> <li class="link"><a href="pricing.html">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li class="link"><a href="try.html">TRY NOW!</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="start"> <div class="start">
<div class="title"> <div class="title">
<h2><em>/ˈd<out>aɪ</out>.ə.lekt/</em> <br> <h2 class="laut">/ˈd<em>aɪ</em>.ə.lekt/</h2>
<small>AI steckt nicht nur im Namen.</small></h2> <p>AI steckt nicht nur im Namen.</p>
</div> </div>
<div id="blobs"> <div id="blobs">
<div id="blue" class="blob"></div> <div id="blue" class="blob"></div>
@ -34,15 +34,15 @@
</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">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li><a href="about.html" class="sel">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">PRICING</a></li> <li class="link"><a href="pricing.html">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li class="link"><a href="try.html">TRY NOW!</a></li>
</ul> </ul>
</div> </div>
</div> </div>

77
animations.js
View File

@ -2,18 +2,24 @@ var stage = 0
var a = ["..", ".", "", ".", "..", "..."] var a = ["..", ".", "", ".", "..", "..."]
$(document).ready(function () { $(document).ready(function () {
up = document.getElementById("upload") upform = document.getElementById("fileupload")
if (up != null) {up.addEventListener ("click", ButtonPress)} uplabel = document.getElementById("filelabel")
var height1 = $("#eins").height (); upline = document.getElementById("formline")
var height2 = $("#zwei").height (); upbtn = document.getElementById("upload")
if (height1 < 300) {height1 += 550}; $("#fileselect").change(function() {
console.log (height1, height2); uplabel.textContent = this.files[0].name + " (Klick zum Ändern)"
changeFile ()
});
if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
$(window).scroll(function () { $(window).scroll(function () {
var height1 = $("#eins").height ();
var height2 = $("#zwei").height ();
var screenheight = $("body").height();
var pos = $(this).scrollTop (); var pos = $(this).scrollTop ();
if (stage ==1 && pos-200 >= height2) { moveBlobs (2050, 600, 2)} if (stage == 1 && pos-(screenheight/4.5) >= height2) { moveBlobs ("225vh", "31vw", 2)}
else if (stage == 2 && pos < height2 ) { moveBlobs (1000, 1000, 1)} else if (stage == 2 && pos-(screenheight/1.9) < height2 ) { moveBlobs ("105vh", "55vw", 1)}
else if (stage == 0 && pos+600 >= height1){ moveBlobs (1000, 1000, 1)} else if (stage == 0 && pos+(screenheight/1.5) >= height1){ moveBlobs ("105vh", "55vw", 1)}
else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) } else if ((stage == 1 && pos < height1-(screenheight/2))) { moveBlobs (0,0,0) }
}) })
} }
) )
@ -50,46 +56,67 @@ function moveBlobs (t, r, to) {
} }
setTimeout (function () { setTimeout (function () {
$("#blobs").css ({ $("#blobs").css ({
'top': t + 'px', 'top': t,
'right': r + 'px', 'right': r,
'animation': '',}); 'animation': '',});
$("#green").css ({ 'animation': 'appear 0.4s -0.075s ease-in' })
$("#blue").css ({ 'animation': 'appear 0.4s 0s ease-in' })
$("#red").css ({ 'animation': 'appear 0.4s 0.15s ease-in' })
stage = to;
}, (dur*1000)-10)
setTimeout (function () {
$("#green").css ({ 'animation': '' }) $("#green").css ({ 'animation': '' })
$("#blue").css ({ 'animation': '' }) $("#blue").css ({ 'animation': '' })
$("#red").css ({ 'animation': '' }) $("#red").css ({ 'animation': '' })
stage = to; stage = to;
}, (dur*1000)-1) }, (dur*2000)-1)
}
function changeFile (){
$("#filelabel").css ({
'font-family': 'League Spartan',
'font-size': '2.5vw'
})
$("#upload").css ({
'color': 'inherit',
'cursor': 'pointer'
})
upbtn.removeAttribute("disabled")
} }
function ButtonPress () { function ButtonPress () {
up.setAttribute ('disabled', 'disabled') upbtn.setAttribute ('disabled', 'disabled')
document.body.style.cursor = "progress" document.body.style.cursor = "progress"
$("#upload").css ({ $("#fileupload").css ({
'cursor': 'not-allowed', 'cursor': 'not-allowed',
'animation': 'text-in-out 1s' 'animation': 'text-in-out 1s'
}) })
$("#formline").css ({
'animation': 'border-out 1s'
})
$("#upload").css ({
'cursor': 'not-allowed',
})
setTimeout (function () { setTimeout (function () {
up.textContent = "Verarbeite..." uplabel.setAttribute('hidden', 'hidden')
$("#upload").css ({ upline.setAttribute('hidden', 'hidden')
'padding-right': '140px', upbtn.value = "Verarbeite..."
'padding-left': '139px', $('#upload').css ({'padding-top': '3vw'})
'padding-top': '80px',
'padding-bottom': '57px',
})
}, 500) }, 500)
setTimeout (function() { setTimeout (function() {
$("#upload").css ({ $("#fileupload").css ({
'animation': 'border-in-out 2s infinite' 'animation': 'border-in-out 2s infinite'
}) })
}, 1000) }, 1000)
setTimeout (function () { setTimeout (function () {
textLoop (0) textLoop (0)
}, 200) }, 200)
} }
function textLoop (i){ function textLoop (i){
setTimeout (function (){ setTimeout (function (){
up.textContent = "Verarbeite" + a[i] upbtn.value = "Verarbeite" + a[i]
if (i<5) { textLoop (++i)} if (i<5) { textLoop (++i)}
else { textLoop (0)} else { textLoop (0)}
}, 2000) }, 2000)

BIN
blobs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 419 KiB

29
index.html
View File

@ -2,29 +2,29 @@
<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="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">HOME</a></li> <li><a href="index.html" class="sel">HOME</a></li>
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li class="link"><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">PRICING</a></li> <li class="link"><a href="pricing.html">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li class="link"><a href="try.html">TRY NOW!</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="start"> <div class="start">
<div class="title"> <div class="title">
<h1>D<out>AI</out>A<br>LECT</h1> <h1>D<em>AI</em>A<br>LECT</h1>
</div> </div>
<div id="blobs"> <div id="blobs">
<div id="blue" class="blob"></div> <div id="blue" class="blob"></div>
@ -43,19 +43,20 @@
</div> </div>
<div id="zwei"> <div id="zwei">
<div class = "text-mittig"> <div class = "text-mittig">
<h2> MIT HILFE VON <br> KI ALLE <br> <small> MENSCHEN VERSTEHEN </small></h2> <h2> MIT HILFE VON <br> KI ALLE <br></h2>
<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">HOME</a></li> <li><a href="index.html" class="sel">HOME</a></li>
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li class="link"><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">PRICING</a></li> <li class="link"><a href="pricing.html">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li class="link"><a href="try.html">TRY NOW!</a></li>
</ul> </ul>
</div> </div>
</div> </div>

24
pricing.html
View File

@ -2,23 +2,23 @@
<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="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><a href="index.html">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li class="link"><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">PRICING</a></li> <li><a href="pricing.html" class="sel">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li class="link"><a href="try.html">TRY NOW!</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -33,15 +33,15 @@
</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">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li class="link"><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">PRICING</a></li> <li><a class="sel" href="pricing.html">PRICING</a></li>
<li>|</li> <li>|</li>
<li><a href="try.html">TRY NOW!</a></li> <li class="link"><a href="try.html">TRY NOW!</a></li>
</ul> </ul>
</div> </div>
</div> </div>

21
readme.md
View File

@ -3,8 +3,23 @@
### 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". Das imaginäre Produkt, für das ich eine Website entwickelt habe, ist 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 ### 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.
### 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 ### 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

389
style.css
View File

@ -1,18 +1,36 @@
/* 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;
background-image: url("resources/noise-texture.svg"); background-image: url("resources/noise-texture.svg");
color: #E07A31; color: #E07A31;
font-family: "League Spartan"; font-family: "League Spartan";
height: 100vh;
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;
margin-top: 20px; margin-top: 2vh;
animation: float-in 0.3s ease-out; animation: float-in 0.3s ease-out;
position: relative; position: relative;
z-index: 110; z-index: 110;
@ -21,37 +39,28 @@ body
#navbar-bottom { #navbar-bottom {
justify-content: center; justify-content: center;
display: flex; display: flex;
margin-bottom: 50px; margin-bottom: 2.5vh;
}
#navbar {
text-align: center;
width: 40%;
background-color: #E07A31;
z-index: 55;
border-radius: 20px;
opacity: 90%;
height: 60px;
} }
ul { ul {
vertical-align: middle; vertical-align: middle;
list-style-type: none; list-style-type: none;
margin: 8px; margin: 0.6vh;
margin-bottom: 0.3vh;
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
padding-right: 5%; padding-right: 2vw;
padding-left: 5%; padding-left: 2vw;
} }
li { li {
float: left; float: left;
color: #FFE49F; color: #FFE49F;
text-align: center; text-align: center;
padding: 10px; padding: 0.6vw;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
font-size: 30px; font-size: 1.6vw;
} }
li a { li a {
@ -59,78 +68,62 @@ li a {
text-decoration: none; text-decoration: none;
} }
li a:hover { li.link:hover {
animation: highlight-text 0.4s ease-in-out; transform: scale(107%);
} }
.start {
display: flex;
margin-top: -100px;
}
b { /* INHALT ALLGEMEIN */
p {
position: relative;
font-size: 0.8vw;
text-align: right; text-align: right;
z-index: 60;
} }
#eins { h1 em {
display: flex; font-style: normal;
justify-content: right;
}
#zwei {
height: 100%;
width: 100%;
z-index: 10;
}
.text-rechts {
width: 46%;
margin-right: 100px;
} }
h2 { h2 {
font-weight: bold; font-weight: bold;
font-size: 150px; font-size: 8vw;
position: relative; position: relative;
text-align: justify; text-align: justify;
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: 180px; width: 46vw;
line-height: 1.8; margin-right: 5vw;
} }
.text-mittig { .text-mittig {
display: flex;
justify-content: center;
width: 90%; width: 90%;
margin-left: 5%; margin-left: 5%;
margin-right: 5%; margin-right: 5%;
} }
.text-mittig small { .text-mittig h3 {
font-size: 150px; font-size: 8vw;
} font-weight: bold;
p {
position: relative; position: relative;
font-size: 20px; text-align: justify;
text-align: right; text-align-last: justify;
z-index: 60;
} }
.title .title
{ {
font-family: "League Spartan Black"; font-family: "League Spartan Black";
font-size: 170px; font-size: 10vw;
display: flex; display: flex;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
@ -145,68 +138,131 @@ p {
} }
.title h2{ .title h2{
font-size: 150px; font-size: 7.5vw;
text-align: right; text-align: right;
text-align-last: right; text-align-last: right;
padding-right: 140px; padding: 0 10vw 0 0;
padding-top: 140px; margin: 0;
font-family: "League Spartan"; font-family: "League Spartan";
} }
.title h3{ .title h3{
font-size: 125px; font-size: 6.6vw;
text-align: right; text-align: right;
text-align-last: right; text-align-last: right;
padding-right: 140px; padding-right: 7vw;
padding-top: 160px;
font-family: "League Spartan"; font-family: "League Spartan";
} }
.title em { .title em {
font-family: "sans-serif";
font-size: 120px;
}
.title out {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
-webkit-text-stroke: 5px #E07A31; -webkit-text-stroke: 0.3vw #E07A31;
} }
.title small { .title p {
font-size: 70px; font-size: 3.5vw;
font-family: "League Spartan";
font-style: normal;
padding-right: 10vw;
} }
.button-rechts { #eins {
height: 1000px; display: flex;
position: relative; justify-content: right;
top: 275px; height: 100vh;
width: 46%;
margin-right: 100px;
justify-content: center;
display: block;
} }
button { #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; background-color: transparent;
border-style: dotted; border-style: dotted;
border-color: #E07A31; border-color: #E07A31;
border-width: 10px; border-width: 1vh;
border-radius: 32px; border-radius: 1.5vw;
color: #E07A31; color: #E07A31;
padding-left: 25px; padding: 2vw;
padding-right: 25px;
padding-top: 25px;
padding-bottom: 20px;
text-decoration: none; text-decoration: none;
font-family: "League Spartan Black"; font-family: "League Spartan Black";
font-size: 100px; font-size: 3vw;
text-align: center;
height: 9vw;
}
form label {
cursor: pointer; cursor: pointer;
} }
@keyframes raise { input {
0% {z-index: 0; opacity: 0%;} background-color: transparent;
70% {opacity: 50%;} border-color: transparent;
100% {z-index: 100; opacity: 90%;} color: #e07a319c;
font-family: inherit;
font-size: inherit;
cursor: not-allowed;
}
hr {
color: #E07A31;
border-style: dotted none none none;
border-width: 1vh;
}
.button-rechts {
height: 100vh;
position: relative;
top: 25vh;
width: 46%;
margin-right: 5vw;
display: block;
}
.sel {
color:#fff0cb
}
#fileselect {
visibility: hidden;
}
/* BLOBS */
.blob {
border-radius: 7.5vw;
filter: blur(1.6vw);
width: 15vw;
height: 15vw;
top: 25vh;
scale: 1.4;
} }
#blobs { #blobs {
@ -220,19 +276,11 @@ button {
position: relative; position: relative;
} }
.blob {
border-radius: 200px;
filter: blur(60px);
width: 400px;
height: 350px;
top: 250px;
}
#blue { #blue {
background-color: rgb(80, 239, 244); background-color: #50eff4;
position: relative; position: relative;
right: 200px; right: 22vh;
top: 10vh;
z-index: 0; z-index: 0;
animation: idle-blue 8s 0.4s infinite; animation: idle-blue 8s 0.4s infinite;
} }
@ -240,21 +288,47 @@ button {
#green { #green {
background-color: #86ec4f; background-color: #86ec4f;
position: relative; position: relative;
top: -200px; top: -22vh;
right: 150px; right: 15vh;
z-index: 2; z-index: 2;
animation: idle-green 5s 0.3s infinite; animation: idle-green 5s 0.3s infinite;
} }
#red { #red {
background-color: rgb(240, 75, 193); background-color: #f04bc1;
position: relative; position: relative;
left: 60px; left: 6vh;
top: -45px; top: -4.5vh;
z-index: 1; z-index: 1;
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}
@ -263,101 +337,100 @@ button {
} }
@keyframes border-in-out { @keyframes border-in-out {
0% {border-radius: 32px} 0% {border-radius: 1.5vw}
10%{border-radius: 32px} 10%{border-radius: 1.5vw}
40% {border-radius: 125px} 40% {border-radius: 6vw}
60% {border-radius: 125px} 60% {border-radius: 6vw}
90%{border-radius: 32px} 90%{border-radius: 1.5vw}
100% {border-radius: 32px} 100% {border-radius: 1.5vw}
} }
@keyframes float-in { @keyframes border-out {
0% {transform: translateY(-100px); opacity: 0%} 0% {opacity: 1;}
100% {transform: translateY(0px); opacity: 90%;} 40% {opacity: 0;}
100% {opacity: 0;}
} }
@keyframes highlight-text {
0% {font-size: 30px;}
40% {font-size: 38px;} /* ANIMATIONEN 𑁋 BLOBS */
80% {font-size: 38px;}
100% {font-size: 30px;}
}
@keyframes idle-blue { @keyframes idle-blue {
0% {transform: scale(1); } 0% {transform: scale(1); z-index: 0;}
20% {transform: scale(1.4); } 20% {transform: scale(1.4); z-index: 1;}
40% {transform: scale(1.1); transform: translateY(40px);} 40% {transform: scale(1.1); z-index: 0; transform: translateY(2vw);}
60% {transform: scale(0.8); transform: translateX(50px)} 60% {transform: scale(0.8); transform: translateX(2.5vw)}
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(-2vw); transform: translateX(-2.5vw);}
} }
@keyframes idle-green { @keyframes idle-green {
0% {transform: scale(1); } 0% {transform: scale(1); }
20% {transform: scale(0.8); } 20% {transform: scale(0.8); }
40% {transform: scale(1.1); transform: translateY(70px);} 40% {transform: scale(1.1); transform: translateY(3.5vw);}
60% {transform: scale(0.9); transform: translateX(-20px)} 60% {transform: scale(0.9); transform: translateX(-1vw)}
80% {transform: scale(1.3); } 80% {transform: scale(1.3); }
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);} 95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
} }
@keyframes idle-red { @keyframes idle-red {
0% {transform: scale(1); ;} 0% {transform: scale(1); ;}
20% {transform: scale(1.3); z-index: 3;} 20% {transform: scale(1.3); z-index: 3;}
40% {transform: scale(1.2); z-index: 2; transform: translateY(-60px);} 40% {transform: scale(1.2); z-index: 2; transform: translateY(-3vw);}
60% {transform: scale(0.7); z-index: 0; transform: translateX(-45px)} 60% {transform: scale(0.7); z-index: 0; transform: translateX(-2vw)}
80% {transform: scale(0.9); z-index: 0;} 80% {transform: scale(0.9); z-index: 0;}
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);} 95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
} }
@keyframes move-down-1 { @keyframes move-down-1 {
0% {top: 0px; right: 0px} 0% {top: 0; right: 0}
100% {top: 0px; right: 1000px} 100% {top: 0; right: 52vw}
} }
@keyframes green-move-down-1 { @keyframes green-move-down-1 {
0% {top: 0px; right: 0px } 0% {top: 0; right: 0 }
50% {right: 400px} 50% {right: 21vw}
90% {top: 750px; opacity: 100%; right: 190px; transform: scale(1);} 90% {top: 75vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
100% {top: 1000px; right: 200px; opacity: 20%; transform: scale(0.2);} 100% {top: 100vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
} }
@keyframes red-move-down-1 { @keyframes red-move-down-1 {
0% {top: 0px; right: 0px } 0% {top: 0;}
90% {top: 850px; opacity: 100%; transform: scale(1);} 90% {top: 85vh; opacity: 100%; transform: scale(1);}
100% {top: 1000px; right: 0px; opacity: 20%; transform: scale(0.2);} 100% {top: 100vh; opacity: 10%; transform: scale(0.2);}
} }
@keyframes blue-move-down-1 { @keyframes blue-move-down-1 {
0% {top: 0px; right: 0px } 0% {top: 0; right: 0 }
40% {right: 400px} 40% {right: 21vw}
75% {right: 300px} 75% {right: 17vw}
90% {opacity: 100%; transform: scale(1);} 90% {opacity: 100%; transform: scale(1);}
100% {top: 1100px; right: 0px; opacity: 20%; transform: scale(0.2);} 100% {top: 110vh; right: 0; opacity: 10%; transform: scale(0.2);}
} }
@keyframes move-down-2 { @keyframes move-down-2 {
0% {top: 0px; right: 1000px} 0% {top: 0; right: 52vw}
100% {top: 0px; right: 600px} 100% {top: 0; right: 31vw}
} }
@keyframes green-move-down-2 { @keyframes green-move-down-2 {
0% {top: 1000px; right: 0px } 0% {top: 100vh; right: 0 }
50% {right: 400px} 50% {right: 21vw}
90% {top: 1750px; opacity: 100%; right: 190px; transform: scale(1);} 90% {top: 175vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);} 100% {top: 205vh; right: 0; opacity: 10%; transform: scale(0.2);}
} }
@keyframes red-move-down-2 { @keyframes red-move-down-2 {
0% {top: 1000px; right: 0px } 0% {top: 100vh;}
90% {top: 1850px; opacity: 100%; transform: scale(1);} 90% {top: 185vh; opacity: 100%; transform: scale(1);}
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);} 100% {top: 205vw; opacity: 10%; transform: scale(0.2);}
} }
@keyframes blue-move-down-2 { @keyframes blue-move-down-2 {
0% {top: 1100px; right: 200px } 0% {top: 110vh; right: 10.4vw }
40% {right: 500px} 40% {right: 26vw}
75% {right: 400px} 75% {right: 21vw}
90% {opacity: 100%; transform: scale(1);} 90% {opacity: 100%; transform: scale(1);}
100% {top: 2150px; right: 200px; opacity: 20%; transform: scale(0.2);} 100% {top: 215vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
} }

31
try.html
View File

@ -2,23 +2,23 @@
<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="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">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li class="link"><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">PRICING</a></li> <li class="link"><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" class="sel">TRY NOW!</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -34,19 +34,24 @@
</div> </div>
<div id="eins"> <div id="eins">
<div class="button-rechts"> <div class="button-rechts">
<button id="upload">AUDIO HOCHLADEN!</button> <form id="fileupload">
<label for="fileselect" class="btn" id="filelabel">DATEI AUSWÄHLEN!</label>
<hr id="formline">
<input type=submit value="AUDIO HOCHLADEN!" id="upload" disabled>
<input type=file name=file id="fileselect" accept="audio/*">
</form>
</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">HOME</a></li> <li class="link"><a href="index.html">HOME</a></li>
<li>|</li> <li>|</li>
<li><a href="about.html">ABOUT</a></li> <li class="link"><a href="about.html">ABOUT</a></li>
<li>|</li> <li>|</li>
<li><a href="pricing.html">PRICING</a></li> <li class="link"><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" class="sel">TRY NOW!</a></li>
</ul> </ul>
</div> </div>
</div> </div>