@@ -36,13 +35,13 @@
diff --git a/animations.js b/animations.js
index 5249a4b..e3107b6 100644
--- a/animations.js
+++ b/animations.js
@@ -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 ("95vh", "52vw", 1)}
+ else if (stage == 0 && pos+(screenheight/1.5) >= height1){ moveBlobs ("95vh", "52vw", 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)
diff --git a/index.html b/index.html
index fcb9919..49124a8 100644
--- a/index.html
+++ b/index.html
@@ -6,25 +6,25 @@
-
-
DAIA
LECT
+ DAIA
+ LECT
-
MIT HILFE VON
KI ALLE
MENSCHEN VERSTEHEN
+ MIT HILFE VON
+ KI ALLE
+ MENSCHEN VERSTEHEN
diff --git a/pricing.html b/pricing.html
index 304b1aa..bb2a807 100644
--- a/pricing.html
+++ b/pricing.html
@@ -6,19 +6,18 @@
-
@@ -35,13 +34,13 @@
diff --git a/readme.md b/readme.md
index 031bd95..fe78f57 100644
--- a/readme.md
+++ b/readme.md
@@ -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
\ No newline at end of file
diff --git a/style.css b/style.css
index 2c3b57e..0c51548 100644
--- a/style.css
+++ b/style.css
@@ -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: 3vw;
}
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,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,96 @@ 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;
+.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;
+ padding-right: 10vw;
}
.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 +257,19 @@ button {
.blob {
- border-radius: 200px;
- filter: blur(60px);
- width: 400px;
- height: 350px;
- top: 250px;
+ border-radius: 7.5vw;
+ filter: blur(1.6vw);
+ width: 15vw;
+ height: 15vw;
+ top: 25vh;
+ scale: 1.4;
}
#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 +277,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;
}
@@ -262,102 +299,110 @@ button {
100% {color: inherit}
}
+@keyframes border-out {
+ 0% {opacity: 1;}
+ 40% {opacity: 0;}
+ 100% {opacity: 0;}
+}
+
@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(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);}
-}
\ No newline at end of file
+ 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)}
+}
diff --git a/try.html b/try.html
index ed5c44b..5580ad5 100644
--- a/try.html
+++ b/try.html
@@ -6,19 +6,18 @@
-
@@ -34,19 +33,24 @@