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

alles außer animation

Browse Source
This commit is contained in:
Paul Martin
2023-12-26 23:02:29 +01:00
parent 64e3d7264d
commit 82933b7f46
7 changed files with 236 additions and 172 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">
<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 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/ <br>
<p>AI steckt nicht nur im Namen.</p></h2>
</div>
<div id="blobs">
<div id="blue" class="blob"></div>
@ -36,13 +35,13 @@
<div id="navbar-bottom">
<div id="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>

65
animations.js
View File

@ -2,17 +2,24 @@ var stage = 0
var a = ["..", ".", "", ".", "..", "..."]
$(document).ready(function () {
up = document.getElementById("upload")
if (up != null) {up.addEventListener ("click", ButtonPress)}
upform = document.getElementById("fileupload")
uplabel = document.getElementById("filelabel")
upline = document.getElementById("formline")
upbtn = document.getElementById("upload")
if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
var height1 = $("#eins").height ();
var height2 = $("#zwei").height ();
if (height1 < 300) {height1 += 550};
console.log (height1, height2);
$("#fileselect").change(function() {
uplabel.textContent = this.files[0].name + " (Klick zum Ändern)"
changeFile ()
});
$(window).scroll(function () {
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)}
if (stage ==1 && pos-200 >= height2) { moveBlobs ("225vh", 600, 2)}
else if (stage == 2 && pos < height2 ) { moveBlobs ("95vh", 1000, 1)}
else if (stage == 0 && pos+600 >= height1){ moveBlobs ("95vh", 1000, 1)}
else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) }
})
}
@ -50,46 +57,64 @@ function moveBlobs (t, r, to) {
}
setTimeout (function () {
$("#blobs").css ({
'top': t + 'px',
'top': t,
'right': r + 'px',
'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')
uplabel.setAttribute('hidden', 'hidden')
upline.setAttribute('hidden', 'hidden')
document.body.style.cursor = "progress"
$("#fileupload").css ({
'cursor': 'not-allowed',
'animation': 'text-in-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',
})
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)

21
index.html
View File

@ -6,25 +6,24 @@
<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="animations.js"></script>
</head>
<body>
<div id="navbar-top">
<div id="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 +42,19 @@
</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">
<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>

17
pricing.html
View File

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

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".
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
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

259
style.css
View File

@ -7,12 +7,14 @@ body
background-image: url("resources/noise-texture.svg");
color: #E07A31;
font-family: "League Spartan";
height: 100vh;
width: 100vw;
}
#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 +23,38 @@ body
#navbar-bottom {
justify-content: center;
display: flex;
margin-bottom: 50px;
margin-bottom: 2.5vh;
}
#navbar {
text-align: center;
width: 40%;
width: 40vw;
background-color: #E07A31;
z-index: 55;
border-radius: 20px;
border-radius: 2cqmin;
opacity: 90%;
height: 60px;
height: 6vh;
}
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.7vw;
}
li a {
@ -59,39 +62,37 @@ 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 {
text-align: right;
justify-content: space-evenly;
height: 100vh;
}
#eins {
display: flex;
justify-content: right;
height: 100vh;
}
#zwei {
height: 100%;
width: 100%;
z-index: 10;
height: 120vh;
}
.text-rechts {
width: 46%;
margin-right: 100px;
width: 46vw;
margin-right: 5vw;
}
h2 {
font-weight: bold;
font-size: 150px;
font-size: 8vw;
position: relative;
text-align: justify;
text-align-last: justify;
@ -103,26 +104,28 @@ h2 {
}
#zwei h2 {
font-size: 180px;
font-size: 10vw;
line-height: 1.8;
}
.text-mittig {
display: flex;
justify-content: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
.text-mittig small {
font-size: 150px;
.text-mittig h3 {
font-size: 8vw;
font-weight: bold;
position: relative;
text-align: justify;
text-align-last: justify;
}
p {
position: relative;
font-size: 20px;
font-size: 0.8vw;
text-align: right;
z-index: 60;
}
@ -130,7 +133,7 @@ p {
.title
{
font-family: "League Spartan Black";
font-size: 170px;
font-size: 10vw;
display: flex;
text-align: center;
justify-content: center;
@ -145,64 +148,94 @@ p {
}
.title h2{
font-size: 150px;
font-size: 7.5vw;
text-align: right;
text-align-last: right;
padding-right: 140px;
padding-top: 140px;
padding-right: 10vw;
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;
.laut {
font-family: sans-serif !important;
font-size: 6vw !important;
font-style: italic;
}
.title out {
.title em {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 5px #E07A31;
-webkit-text-stroke: 0.3vw #E07A31;
}
h1 em {
font-style: normal;
}
.title small {
font-size: 70px;
.title p {
font-size: 3.5vw;
font-family: "League Spartan";
font-style: normal;
}
.button-rechts {
height: 1000px;
height: 100vh;
position: relative;
top: 275px;
top: 25vh;
width: 46%;
margin-right: 100px;
justify-content: center;
margin-right: 5vw;
display: block;
}
button {
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;
}
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 {
0% {z-index: 0; opacity: 0%;}
70% {opacity: 50%;}
@ -222,17 +255,19 @@ button {
.blob {
border-radius: 200px;
filter: blur(60px);
width: 400px;
height: 350px;
top: 250px;
border-radius: 5px;
filter: blur(1.5px);
width: 10px;
height: 10px;
top: 25vh;
scale: 45;
}
#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,17 +275,17 @@ 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;
}
@ -263,101 +298,103 @@ 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%;}
0% {transform: translateY(-15vh); opacity: 0%}
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 {
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(2px);}
60% {transform: scale(0.8); transform: translateX(2.5px)}
80% {transform: scale(0.9);}
95% {transform: scale(1); transform: translateY(-40px); transform: translateX(-50px);}
95% {transform: scale(1); transform: translateY(-2px); transform: translateX(-2.5px);}
}
@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.5px);}
60% {transform: scale(0.9); transform: translateX(-1px)}
80% {transform: scale(1.3); }
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
}
@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(-3px);}
60% {transform: scale(0.7); z-index: 0; transform: translateX(-2px)}
80% {transform: scale(0.9); z-index: 0;}
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
}
@keyframes move-down-1 {
0% {top: 0px; right: 0px}
100% {top: 0px; right: 1000px}
0% {top: 0; right: 0}
100% {top: 0; right: 1000px}
}
@keyframes green-move-down-1 {
0% {top: 0px; right: 0px }
0% {top: 0; right: 0 }
50% {right: 400px}
90% {top: 750px; opacity: 100%; right: 190px; transform: scale(1);}
100% {top: 1000px; right: 200px; opacity: 20%; transform: scale(0.2);}
90% {top: 75vh; opacity: 100%; right: 190px; transform: scale(1);}
100% {top: 100vh; right: 200px; 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; right: 0 }
90% {top: 85vh; opacity: 100%; transform: scale(1);}
100% {top: 100vh; right: 0; opacity: 10%; transform: scale(0.2);}
}
@keyframes blue-move-down-1 {
0% {top: 0px; right: 0px }
0% {top: 0; right: 0 }
40% {right: 400px}
75% {right: 300px}
90% {opacity: 100%; transform: scale(1);}
100% {top: 1100px; right: 0px; opacity: 20%; transform: scale(0.2);}
100% {top: 110vh; right: 0px; opacity: 10%; transform: scale(0.2);}
}
@keyframes move-down-2 {
0% {top: 0px; right: 1000px}
100% {top: 0px; right: 600px}
0% {top: 0; right: 1000px}
100% {top: 0; right: 600px}
}
@keyframes green-move-down-2 {
0% {top: 1000px; right: 0px }
0% {top: 100vh; 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);}
90% {top: 175vh; opacity: 100%; right: 190px; 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; right: 0px }
90% {top: 185vh; opacity: 100%; transform: scale(1);}
100% {top: 205vh; right: 0px; opacity: 10%; transform: scale(0.2);}
}
@keyframes blue-move-down-2 {
0% {top: 1100px; right: 200px }
0% {top: 110vh; right: 200px }
40% {right: 500px}
75% {right: 400px}
90% {opacity: 100%; transform: scale(1);}
100% {top: 2150px; right: 200px; opacity: 20%; transform: scale(0.2);}
}
100% {top: 215vh; right: 200px; 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">
<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">
<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 +33,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">
<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>