Compare commits
9 Commits
64e3d7264d
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| e80078df65 | |||
| 22eef78e2d | |||
| b28c3d4b83 | |||
| f71d2e378f | |||
| 2ed130b6d9 | |||
| 3a6b004ec1 | |||
| 276fa4e8df | |||
| 94b352a2b2 | |||
| 82933b7f46 |
28
about.html
28
about.html
@ -2,30 +2,30 @@
|
||||
<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><a href="index.html">HOME</a></li>
|
||||
<li class="link"><a href="index.html">HOME</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li><a href="about.html" class="sel">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li class="link"><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
<li class="link"><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>
|
||||
<h2 class="laut">/ˈd<em>aɪ</em>.ə.lekt/</h2>
|
||||
<p>AI steckt nicht nur im Namen.</p>
|
||||
</div>
|
||||
<div id="blobs">
|
||||
<div id="blue" class="blob"></div>
|
||||
@ -34,15 +34,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="navbar-bottom">
|
||||
<div id="navbar">
|
||||
<div class="navbar">
|
||||
<ul>
|
||||
<li><a href="index.html">HOME</a></li>
|
||||
<li class="link"><a href="index.html">HOME</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li><a href="about.html" class="sel">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li class="link"><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
<li class="link"><a href="try.html">TRY NOW!</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,18 +2,24 @@ var stage = 0
|
||||
var a = ["..", ".", "", ".", "..", "..."]
|
||||
|
||||
$(document).ready(function () {
|
||||
up = document.getElementById("upload")
|
||||
if (up != null) {up.addEventListener ("click", ButtonPress)}
|
||||
var height1 = $("#eins").height ();
|
||||
var height2 = $("#zwei").height ();
|
||||
if (height1 < 300) {height1 += 550};
|
||||
console.log (height1, height2);
|
||||
upform = document.getElementById("fileupload")
|
||||
uplabel = document.getElementById("filelabel")
|
||||
upline = document.getElementById("formline")
|
||||
upbtn = document.getElementById("upload")
|
||||
$("#fileselect").change(function() {
|
||||
uplabel.textContent = this.files[0].name + " (Klick zum Ändern)"
|
||||
changeFile ()
|
||||
});
|
||||
if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
|
||||
$(window).scroll(function () {
|
||||
var height1 = $("#eins").height ();
|
||||
var height2 = $("#zwei").height ();
|
||||
var screenheight = $("body").height();
|
||||
var pos = $(this).scrollTop ();
|
||||
if (stage ==1 && pos-200 >= height2) { moveBlobs (2050, 600, 2)}
|
||||
else if (stage == 2 && pos < height2 ) { moveBlobs (1000, 1000, 1)}
|
||||
else if (stage == 0 && pos+600 >= height1){ moveBlobs (1000, 1000, 1)}
|
||||
else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) }
|
||||
if (stage == 1 && pos-(screenheight/4.5) >= height2) { moveBlobs ("225vh", "31vw", 2)}
|
||||
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) }
|
||||
})
|
||||
}
|
||||
)
|
||||
@ -50,46 +56,67 @@ function moveBlobs (t, r, to) {
|
||||
}
|
||||
setTimeout (function () {
|
||||
$("#blobs").css ({
|
||||
'top': t + 'px',
|
||||
'right': r + 'px',
|
||||
'top': t,
|
||||
'right': r,
|
||||
'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': '' })
|
||||
$("#blue").css ({ 'animation': '' })
|
||||
$("#red").css ({ 'animation': '' })
|
||||
stage = to;
|
||||
}, (dur*1000)-1)
|
||||
}, (dur*2000)-1)
|
||||
}
|
||||
|
||||
function ButtonPress () {
|
||||
up.setAttribute ('disabled', 'disabled')
|
||||
document.body.style.cursor = "progress"
|
||||
function changeFile (){
|
||||
$("#filelabel").css ({
|
||||
'font-family': 'League Spartan',
|
||||
'font-size': '2.5vw'
|
||||
})
|
||||
$("#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',
|
||||
'animation': 'text-in-out 1s'
|
||||
})
|
||||
$("#formline").css ({
|
||||
'animation': 'border-out 1s'
|
||||
})
|
||||
$("#upload").css ({
|
||||
'cursor': 'not-allowed',
|
||||
})
|
||||
setTimeout (function () {
|
||||
up.textContent = "Verarbeite..."
|
||||
$("#upload").css ({
|
||||
'padding-right': '140px',
|
||||
'padding-left': '139px',
|
||||
'padding-top': '80px',
|
||||
'padding-bottom': '57px',
|
||||
})
|
||||
uplabel.setAttribute('hidden', 'hidden')
|
||||
upline.setAttribute('hidden', 'hidden')
|
||||
upbtn.value = "Verarbeite..."
|
||||
$('#upload').css ({'padding-top': '3vw'})
|
||||
}, 500)
|
||||
setTimeout (function() {
|
||||
$("#upload").css ({
|
||||
$("#fileupload").css ({
|
||||
'animation': 'border-in-out 2s infinite'
|
||||
})
|
||||
}, 1000)
|
||||
setTimeout (function () {
|
||||
textLoop (0)
|
||||
}, 200)
|
||||
|
||||
}
|
||||
|
||||
function textLoop (i){
|
||||
setTimeout (function (){
|
||||
up.textContent = "Verarbeite" + a[i]
|
||||
upbtn.value = "Verarbeite" + a[i]
|
||||
if (i<5) { textLoop (++i)}
|
||||
else { textLoop (0)}
|
||||
}, 2000)
|
||||
|
||||
29
index.html
29
index.html
@ -2,29 +2,29 @@
|
||||
<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">HOME</a></li>
|
||||
<li><a href="index.html" class="sel">HOME</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li class="link"><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li class="link"><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
<li class="link"><a href="try.html">TRY NOW!</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="start">
|
||||
<div class="title">
|
||||
<h1>D<out>AI</out>A<br>LECT</h1>
|
||||
<h1>D<em>AI</em>A<br>LECT</h1>
|
||||
</div>
|
||||
<div id="blobs">
|
||||
<div id="blue" class="blob"></div>
|
||||
@ -43,19 +43,20 @@
|
||||
</div>
|
||||
<div id="zwei">
|
||||
<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 id="navbar-bottom">
|
||||
<div id="navbar">
|
||||
<div class="navbar">
|
||||
<ul>
|
||||
<li><a href="index.html">HOME</a></li>
|
||||
<li><a href="index.html" class="sel">HOME</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li class="link"><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li class="link"><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
<li class="link"><a href="try.html">TRY NOW!</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
24
pricing.html
24
pricing.html
@ -2,23 +2,23 @@
|
||||
<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><a href="index.html">HOME</a></li>
|
||||
<li class="link"><a href="index.html">HOME</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li class="link"><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li><a href="pricing.html" class="sel">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
<li class="link"><a href="try.html">TRY NOW!</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,15 +33,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="navbar-bottom">
|
||||
<div id="navbar">
|
||||
<div class="navbar">
|
||||
<ul>
|
||||
<li><a href="index.html">HOME</a></li>
|
||||
<li class="link"><a href="index.html">HOME</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li class="link"><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li><a class="sel" href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
<li class="link"><a href="try.html">TRY NOW!</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
23
readme.md
23
readme.md
@ -3,8 +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.
|
||||
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
|
||||
|
||||
|
||||
393
style.css
393
style.css
@ -1,18 +1,36 @@
|
||||
/* 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;
|
||||
background-image: url("resources/noise-texture.svg");
|
||||
color: #E07A31;
|
||||
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 {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
margin-top: 2vh;
|
||||
animation: float-in 0.3s ease-out;
|
||||
position: relative;
|
||||
z-index: 110;
|
||||
@ -21,37 +39,28 @@ body
|
||||
#navbar-bottom {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
text-align: center;
|
||||
width: 40%;
|
||||
background-color: #E07A31;
|
||||
z-index: 55;
|
||||
border-radius: 20px;
|
||||
opacity: 90%;
|
||||
height: 60px;
|
||||
margin-bottom: 2.5vh;
|
||||
}
|
||||
|
||||
ul {
|
||||
vertical-align: middle;
|
||||
list-style-type: none;
|
||||
margin: 8px;
|
||||
margin: 0.6vh;
|
||||
margin-bottom: 0.3vh;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
padding-right: 5%;
|
||||
padding-left: 5%;
|
||||
padding-right: 2vw;
|
||||
padding-left: 2vw;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
color: #FFE49F;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
padding: 0.6vw;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
font-size: 1.6vw;
|
||||
}
|
||||
|
||||
li a {
|
||||
@ -59,78 +68,62 @@ li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
animation: highlight-text 0.4s ease-in-out;
|
||||
li.link:hover {
|
||||
transform: scale(107%);
|
||||
}
|
||||
|
||||
|
||||
.start {
|
||||
display: flex;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
b {
|
||||
/* INHALT ALLGEMEIN */
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
font-size: 0.8vw;
|
||||
text-align: right;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
#eins {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
#zwei {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.text-rechts {
|
||||
width: 46%;
|
||||
margin-right: 100px;
|
||||
h1 em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size: 150px;
|
||||
font-size: 8vw;
|
||||
position: relative;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
#eins h2 {
|
||||
.start {
|
||||
display: flex;
|
||||
line-height: 0.3;
|
||||
justify-content: space-evenly;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#zwei h2 {
|
||||
font-size: 180px;
|
||||
line-height: 1.8;
|
||||
.text-rechts {
|
||||
width: 46vw;
|
||||
margin-right: 5vw;
|
||||
}
|
||||
|
||||
|
||||
.text-mittig {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.text-mittig small {
|
||||
font-size: 150px;
|
||||
}
|
||||
|
||||
p {
|
||||
.text-mittig h3 {
|
||||
font-size: 8vw;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
z-index: 60;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.title
|
||||
{
|
||||
font-family: "League Spartan Black";
|
||||
font-size: 170px;
|
||||
font-size: 10vw;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
@ -145,68 +138,131 @@ p {
|
||||
}
|
||||
|
||||
.title h2{
|
||||
font-size: 150px;
|
||||
font-size: 7.5vw;
|
||||
text-align: right;
|
||||
text-align-last: right;
|
||||
padding-right: 140px;
|
||||
padding-top: 140px;
|
||||
padding: 0 10vw 0 0;
|
||||
margin: 0;
|
||||
font-family: "League Spartan";
|
||||
}
|
||||
|
||||
.title h3{
|
||||
font-size: 125px;
|
||||
font-size: 6.6vw;
|
||||
text-align: right;
|
||||
text-align-last: right;
|
||||
padding-right: 140px;
|
||||
padding-top: 160px;
|
||||
padding-right: 7vw;
|
||||
font-family: "League Spartan";
|
||||
}
|
||||
|
||||
.title em {
|
||||
font-family: "sans-serif";
|
||||
font-size: 120px;
|
||||
}
|
||||
|
||||
.title out {
|
||||
.title em {
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke: 5px #E07A31;
|
||||
-webkit-text-stroke: 0.3vw #E07A31;
|
||||
}
|
||||
|
||||
.title small {
|
||||
font-size: 70px;
|
||||
.title p {
|
||||
font-size: 3.5vw;
|
||||
font-family: "League Spartan";
|
||||
font-style: normal;
|
||||
padding-right: 10vw;
|
||||
}
|
||||
|
||||
.button-rechts {
|
||||
height: 1000px;
|
||||
position: relative;
|
||||
top: 275px;
|
||||
width: 46%;
|
||||
margin-right: 100px;
|
||||
justify-content: center;
|
||||
display: block;
|
||||
#eins {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
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;
|
||||
border-style: dotted;
|
||||
border-color: #E07A31;
|
||||
border-width: 10px;
|
||||
border-radius: 32px;
|
||||
border-width: 1vh;
|
||||
border-radius: 1.5vw;
|
||||
color: #E07A31;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 20px;
|
||||
padding: 2vw;
|
||||
text-decoration: none;
|
||||
font-family: "League Spartan Black";
|
||||
font-size: 100px;
|
||||
font-size: 3vw;
|
||||
text-align: center;
|
||||
height: 9vw;
|
||||
}
|
||||
|
||||
form label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes raise {
|
||||
0% {z-index: 0; opacity: 0%;}
|
||||
70% {opacity: 50%;}
|
||||
100% {z-index: 100; opacity: 90%;}
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -220,19 +276,11 @@ button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.blob {
|
||||
border-radius: 200px;
|
||||
filter: blur(60px);
|
||||
width: 400px;
|
||||
height: 350px;
|
||||
top: 250px;
|
||||
}
|
||||
|
||||
#blue {
|
||||
background-color: rgb(80, 239, 244);
|
||||
background-color: #50eff4;
|
||||
position: relative;
|
||||
right: 200px;
|
||||
right: 22vh;
|
||||
top: 10vh;
|
||||
z-index: 0;
|
||||
animation: idle-blue 8s 0.4s infinite;
|
||||
}
|
||||
@ -240,21 +288,47 @@ button {
|
||||
#green {
|
||||
background-color: #86ec4f;
|
||||
position: relative;
|
||||
top: -200px;
|
||||
right: 150px;
|
||||
top: -22vh;
|
||||
right: 15vh;
|
||||
z-index: 2;
|
||||
animation: idle-green 5s 0.3s infinite;
|
||||
}
|
||||
|
||||
#red {
|
||||
background-color: rgb(240, 75, 193);
|
||||
background-color: #f04bc1;
|
||||
position: relative;
|
||||
left: 60px;
|
||||
top: -45px;
|
||||
left: 6vh;
|
||||
top: -4.5vh;
|
||||
z-index: 1;
|
||||
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}
|
||||
@ -263,101 +337,100 @@ button {
|
||||
}
|
||||
|
||||
@keyframes border-in-out {
|
||||
0% {border-radius: 32px}
|
||||
10%{border-radius: 32px}
|
||||
40% {border-radius: 125px}
|
||||
60% {border-radius: 125px}
|
||||
90%{border-radius: 32px}
|
||||
100% {border-radius: 32px}
|
||||
0% {border-radius: 1.5vw}
|
||||
10%{border-radius: 1.5vw}
|
||||
40% {border-radius: 6vw}
|
||||
60% {border-radius: 6vw}
|
||||
90%{border-radius: 1.5vw}
|
||||
100% {border-radius: 1.5vw}
|
||||
}
|
||||
|
||||
@keyframes float-in {
|
||||
0% {transform: translateY(-100px); opacity: 0%}
|
||||
100% {transform: translateY(0px); opacity: 90%;}
|
||||
@keyframes border-out {
|
||||
0% {opacity: 1;}
|
||||
40% {opacity: 0;}
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
|
||||
@keyframes highlight-text {
|
||||
0% {font-size: 30px;}
|
||||
40% {font-size: 38px;}
|
||||
80% {font-size: 38px;}
|
||||
100% {font-size: 30px;}
|
||||
}
|
||||
|
||||
|
||||
/* ANIMATIONEN 𑁋 BLOBS */
|
||||
|
||||
@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)}
|
||||
0% {transform: scale(1); z-index: 0;}
|
||||
20% {transform: scale(1.4); z-index: 1;}
|
||||
40% {transform: scale(1.1); z-index: 0; transform: translateY(2vw);}
|
||||
60% {transform: scale(0.8); transform: translateX(2.5vw)}
|
||||
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 {
|
||||
0% {transform: scale(1); }
|
||||
20% {transform: scale(0.8); }
|
||||
40% {transform: scale(1.1); transform: translateY(70px);}
|
||||
60% {transform: scale(0.9); transform: translateX(-20px)}
|
||||
40% {transform: scale(1.1); transform: translateY(3.5vw);}
|
||||
60% {transform: scale(0.9); transform: translateX(-1vw)}
|
||||
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 {
|
||||
0% {transform: scale(1); ;}
|
||||
20% {transform: scale(1.3); z-index: 3;}
|
||||
40% {transform: scale(1.2); z-index: 2; transform: translateY(-60px);}
|
||||
60% {transform: scale(0.7); z-index: 0; transform: translateX(-45px)}
|
||||
40% {transform: scale(1.2); z-index: 2; transform: translateY(-3vw);}
|
||||
60% {transform: scale(0.7); z-index: 0; transform: translateX(-2vw)}
|
||||
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 {
|
||||
0% {top: 0px; right: 0px}
|
||||
100% {top: 0px; right: 1000px}
|
||||
0% {top: 0; right: 0}
|
||||
100% {top: 0; right: 52vw}
|
||||
}
|
||||
|
||||
@keyframes green-move-down-1 {
|
||||
0% {top: 0px; right: 0px }
|
||||
50% {right: 400px}
|
||||
90% {top: 750px; opacity: 100%; right: 190px; transform: scale(1);}
|
||||
100% {top: 1000px; right: 200px; opacity: 20%; transform: scale(0.2);}
|
||||
0% {top: 0; right: 0 }
|
||||
50% {right: 21vw}
|
||||
90% {top: 75vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
|
||||
100% {top: 100vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
@keyframes red-move-down-1 {
|
||||
0% {top: 0px; right: 0px }
|
||||
90% {top: 850px; opacity: 100%; transform: scale(1);}
|
||||
100% {top: 1000px; right: 0px; opacity: 20%; transform: scale(0.2);}
|
||||
0% {top: 0;}
|
||||
90% {top: 85vh; opacity: 100%; transform: scale(1);}
|
||||
100% {top: 100vh; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
@keyframes blue-move-down-1 {
|
||||
0% {top: 0px; right: 0px }
|
||||
40% {right: 400px}
|
||||
75% {right: 300px}
|
||||
0% {top: 0; right: 0 }
|
||||
40% {right: 21vw}
|
||||
75% {right: 17vw}
|
||||
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 {
|
||||
0% {top: 0px; right: 1000px}
|
||||
100% {top: 0px; right: 600px}
|
||||
0% {top: 0; right: 52vw}
|
||||
100% {top: 0; right: 31vw}
|
||||
}
|
||||
|
||||
@keyframes green-move-down-2 {
|
||||
0% {top: 1000px; right: 0px }
|
||||
50% {right: 400px}
|
||||
90% {top: 1750px; opacity: 100%; right: 190px; transform: scale(1);}
|
||||
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);}
|
||||
0% {top: 100vh; right: 0 }
|
||||
50% {right: 21vw}
|
||||
90% {top: 175vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
|
||||
100% {top: 205vh; right: 0; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
@keyframes red-move-down-2 {
|
||||
0% {top: 1000px; right: 0px }
|
||||
90% {top: 1850px; opacity: 100%; transform: scale(1);}
|
||||
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);}
|
||||
0% {top: 100vh;}
|
||||
90% {top: 185vh; opacity: 100%; transform: scale(1);}
|
||||
100% {top: 205vw; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
@keyframes blue-move-down-2 {
|
||||
0% {top: 1100px; right: 200px }
|
||||
40% {right: 500px}
|
||||
75% {right: 400px}
|
||||
0% {top: 110vh; right: 10.4vw }
|
||||
40% {right: 26vw}
|
||||
75% {right: 21vw}
|
||||
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
31
try.html
@ -2,23 +2,23 @@
|
||||
<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><a href="index.html">HOME</a></li>
|
||||
<li class="link"><a href="index.html">HOME</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li class="link"><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li class="link"><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
<li><a href="try.html" class="sel">TRY NOW!</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,19 +34,24 @@
|
||||
</div>
|
||||
<div id="eins">
|
||||
<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 id="navbar-bottom">
|
||||
<div id="navbar">
|
||||
<div class="navbar">
|
||||
<ul>
|
||||
<li><a href="index.html">HOME</a></li>
|
||||
<li class="link"><a href="index.html">HOME</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li class="link"><a href="about.html">ABOUT</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="pricing.html">PRICING</a></li>
|
||||
<li class="link"><a href="pricing.html">PRICING</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="try.html">TRY NOW!</a></li>
|
||||
<li><a href="try.html" class="sel">TRY NOW!</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user