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

relative-css #1

Merged
paul merged 2 commits from relative-css into main 2023-12-27 16:10:32 +01:00
Conversation 0 Commits 2 Files Changed 7 +261 -184
7 changed files with 261 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
about.html
View File

@ -6,26 +6,25 @@
<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>
<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 id="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>
@ -36,13 +35,13 @@
<div id="navbar-bottom"> <div id="navbar-bottom">
<div id="navbar"> <div id="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>

79
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 ("95vh", "52vw", 1)}
else if (stage == 0 && pos+600 >= height1){ moveBlobs (1000, 1000, 1)} else if (stage == 0 && pos+(screenheight/1.5) >= height1){ moveBlobs ("95vh", "52vw", 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 ButtonPress () { function changeFile (){
up.setAttribute ('disabled', 'disabled') $("#filelabel").css ({
document.body.style.cursor = "progress" 'font-family': 'League Spartan',
'font-size': '2.5vw'
})
$("#upload").css ({ $("#upload").css ({
'color': 'inherit',
'cursor': 'pointer'
})
upbtn.removeAttribute("disabled")
}
function ButtonPress () {
upbtn.setAttribute ('disabled', 'disabled')
document.body.style.cursor = "progress"
$("#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)

24
index.html
View File

@ -6,25 +6,25 @@
<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>
<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 id="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,21 @@
</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 id="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>

17
pricing.html
View File

@ -6,19 +6,18 @@
<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>
<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 id="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>
@ -35,13 +34,13 @@
<div id="navbar-bottom"> <div id="navbar-bottom">
<div id="navbar"> <div id="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>

1
readme.md
View File

@ -5,6 +5,7 @@
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. 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.
### 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 ### https://dev.paulmartin.cloud/daialect/index.html

279
style.css
View File

@ -7,12 +7,14 @@ body
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-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 +23,38 @@ body
#navbar-bottom { #navbar-bottom {
justify-content: center; justify-content: center;
display: flex; display: flex;
margin-bottom: 50px; margin-bottom: 2.5vh;
} }
#navbar { #navbar {
text-align: center; text-align: center;
width: 40%; width: 40vw;
background-color: #E07A31; background-color: #E07A31;
z-index: 55; z-index: 55;
border-radius: 20px; border-radius: 2cqmin;
opacity: 90%; opacity: 90%;
height: 60px; height: 3vw;
} }
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,39 +62,37 @@ 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 { .start {
display: flex; display: flex;
margin-top: -100px; justify-content: space-evenly;
} height: 100vh;
b {
text-align: right;
} }
#eins { #eins {
display: flex; display: flex;
justify-content: right; justify-content: right;
height: 100vh;
} }
#zwei { #zwei {
height: 100%;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
height: 120vh;
} }
.text-rechts { .text-rechts {
width: 46%; width: 46vw;
margin-right: 100px; margin-right: 5vw;
} }
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;
@ -103,26 +104,28 @@ h2 {
} }
#zwei h2 { #zwei h2 {
font-size: 180px; font-size: 10vw;
line-height: 1.8; line-height: 1.8;
} }
.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;
position: relative;
text-align: justify;
text-align-last: justify;
} }
p { p {
position: relative; position: relative;
font-size: 20px; font-size: 0.8vw;
text-align: right; text-align: right;
z-index: 60; z-index: 60;
} }
@ -130,7 +133,7 @@ p {
.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,64 +148,96 @@ 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 { .laut {
font-family: "sans-serif"; font-family: sans-serif !important;
font-size: 120px; font-size: 6vw !important;
font-style: italic;
} }
.title out { .title em {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
-webkit-text-stroke: 5px #E07A31; -webkit-text-stroke: 0.3vw #E07A31;
}
h1 em {
font-style: normal;
} }
.title small { .title p {
font-size: 70px; font-size: 3.5vw;
font-family: "League Spartan";
font-style: normal;
padding-right: 10vw;
} }
.button-rechts { .button-rechts {
height: 1000px; height: 100vh;
position: relative; position: relative;
top: 275px; top: 25vh;
width: 46%; width: 46%;
margin-right: 100px; margin-right: 5vw;
justify-content: center;
display: block; display: block;
} }
button { 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;
} }
input {
background-color: transparent;
border-color: transparent;
color: #e07a319c;
font-family: inherit;
font-size: inherit;
cursor: not-allowed;
}
hr {
color: #E07A31;
border-style: dotted none none none;
border-width: 1vh;
}
#fileselect {
visibility: hidden;
}
.sel {
color:#fff0cb
}
@keyframes raise { @keyframes raise {
0% {z-index: 0; opacity: 0%;} 0% {z-index: 0; opacity: 0%;}
70% {opacity: 50%;} 70% {opacity: 50%;}
@ -222,17 +257,19 @@ button {
.blob { .blob {
border-radius: 200px; border-radius: 7.5vw;
filter: blur(60px); filter: blur(1.6vw);
width: 400px; width: 15vw;
height: 350px; height: 15vw;
top: 250px; top: 25vh;
scale: 1.4;
} }
#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,17 +277,17 @@ 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;
} }
@ -262,102 +299,110 @@ button {
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: 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 float-in {
0% {transform: translateY(-100px); opacity: 0%} 0% {transform: translateY(-15vh); opacity: 0%}
100% {transform: translateY(0px); opacity: 90%;} 100% {transform: translateY(0vh); opacity: 90%;}
} }
@keyframes highlight-text {
0% {font-size: 30px;}
40% {font-size: 38px;}
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);}
} }
@keyframes appear {
0% {transform: scale(0); opacity: 0%}
60% {transform: scale(0.8)}
80% {transform: scale(1.1); opacity: 100%}
100% {transform: scale(1)}
}

24
try.html
View File

@ -6,19 +6,18 @@
<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>
<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 id="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 +33,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 id="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>