From 82933b7f4679de97ebafa051f7bfa1790c7be9cc Mon Sep 17 00:00:00 2001 From: paulmart-n Date: Tue, 26 Dec 2023 23:02:29 +0100 Subject: [PATCH 1/2] =?UTF-8?q?alles=20au=C3=9Fer=20animation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- about.html | 21 ++-- animations.js | 65 +++++++++---- index.html | 21 ++-- pricing.html | 17 ++-- readme.md | 1 + style.css | 259 ++++++++++++++++++++++++++++---------------------- try.html | 24 +++-- 7 files changed, 236 insertions(+), 172 deletions(-) diff --git a/about.html b/about.html index e6c808a..55d7f9b 100644 --- a/about.html +++ b/about.html @@ -6,26 +6,25 @@ -
-

/ˈdaɪ.ə.lekt/
- AI steckt nicht nur im Namen.

+

/ˈdaɪ.ə.lekt/
+

AI steckt nicht nur im Namen.

@@ -36,13 +35,13 @@ diff --git a/animations.js b/animations.js index 5249a4b..bbf8857 100644 --- a/animations.js +++ b/animations.js @@ -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) diff --git a/index.html b/index.html index fcb9919..04454a2 100644 --- a/index.html +++ b/index.html @@ -6,25 +6,24 @@ -
-

DAIA
LECT

+

DAIA
LECT

@@ -43,19 +42,19 @@
-

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..54ddff9 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: 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);} -} \ No newline at end of file + 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)} +} 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 @@
- +
+ +
+ + +
From 94b352a2b2753031262e259b38dcf8b2471b7915 Mon Sep 17 00:00:00 2001 From: paulmart-n Date: Wed, 27 Dec 2023 16:08:07 +0100 Subject: [PATCH 2/2] alles relativ --- about.html | 4 +-- animations.js | 26 ++++++++-------- index.html | 7 +++-- style.css | 82 ++++++++++++++++++++++++++++----------------------- 4 files changed, 66 insertions(+), 53 deletions(-) diff --git a/about.html b/about.html index 55d7f9b..2ede06f 100644 --- a/about.html +++ b/about.html @@ -23,8 +23,8 @@
-

/ˈdaɪ.ə.lekt/
-

AI steckt nicht nur im Namen.

+

/ˈdaɪ.ə.lekt/

+

AI steckt nicht nur im Namen.

diff --git a/animations.js b/animations.js index bbf8857..e3107b6 100644 --- a/animations.js +++ b/animations.js @@ -6,21 +6,20 @@ $(document).ready(function () { 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 () }); + 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 ("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) } + 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) } }) } ) @@ -58,7 +57,7 @@ function moveBlobs (t, r, to) { setTimeout (function () { $("#blobs").css ({ 'top': t, - 'right': r + 'px', + 'right': r, 'animation': '',}); $("#green").css ({ 'animation': 'appear 0.4s -0.075s ease-in' }) $("#blue").css ({ 'animation': 'appear 0.4s 0s ease-in' }) @@ -88,17 +87,20 @@ function changeFile (){ 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' }) + $("#formline").css ({ + 'animation': 'border-out 1s' + }) $("#upload").css ({ 'cursor': 'not-allowed', }) setTimeout (function () { + uplabel.setAttribute('hidden', 'hidden') + upline.setAttribute('hidden', 'hidden') upbtn.value = "Verarbeite..." $('#upload').css ({'padding-top': '3vw'}) }, 500) diff --git a/index.html b/index.html index 04454a2..49124a8 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,8 @@
-

DAIA
LECT

+

DAIA
+ LECT

@@ -42,7 +43,9 @@
-

MIT HILFE VON
KI ALLE

MENSCHEN VERSTEHEN

+

MIT HILFE VON
+ KI ALLE

+

MENSCHEN VERSTEHEN