From 7bae17df2c99e8d2b994ab1d3eb2ee5d9a6c6a9e Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 15 Mar 2024 19:59:53 +0530 Subject: [PATCH] Added some components and fixed navbar for small devices --- .../Impossible-Toggle-Button/index.html | 22 + .../Impossible-Toggle-Button/script.js | 306 +++++++ .../Impossible-Toggle-Button/style.css | 154 ++++ .../Buttons/Naughty-Submit-Button/index.html | 23 + .../Buttons/Naughty-Submit-Button/script.js | 62 ++ .../Buttons/Naughty-Submit-Button/style.css | 64 ++ .../Buttons/Toggle-Animated-Button/index.html | 102 +++ .../Buttons/Toggle-Animated-Button/style.css | 748 ++++++++++++++++++ Components/Forms/Yeti-Login-Form/index.html | 202 +++++ Components/Forms/Yeti-Login-Form/script.js | 368 +++++++++ Components/Forms/Yeti-Login-Form/style.css | 237 ++++++ assets/html_files/breadcrumbs.html | 2 +- assets/html_files/buttons.html | 39 + assets/html_files/cards.html | 2 +- assets/html_files/carousels.html | 2 +- assets/html_files/forms.html | 15 +- assets/html_files/navigation-bars.html | 2 +- assets/html_files/search-bars.html | 2 +- style.css | 38 +- 19 files changed, 2380 insertions(+), 10 deletions(-) create mode 100644 Components/Buttons/Impossible-Toggle-Button/index.html create mode 100644 Components/Buttons/Impossible-Toggle-Button/script.js create mode 100644 Components/Buttons/Impossible-Toggle-Button/style.css create mode 100644 Components/Buttons/Naughty-Submit-Button/index.html create mode 100644 Components/Buttons/Naughty-Submit-Button/script.js create mode 100644 Components/Buttons/Naughty-Submit-Button/style.css create mode 100644 Components/Buttons/Toggle-Animated-Button/index.html create mode 100644 Components/Buttons/Toggle-Animated-Button/style.css create mode 100644 Components/Forms/Yeti-Login-Form/index.html create mode 100644 Components/Forms/Yeti-Login-Form/script.js create mode 100644 Components/Forms/Yeti-Login-Form/style.css diff --git a/Components/Buttons/Impossible-Toggle-Button/index.html b/Components/Buttons/Impossible-Toggle-Button/index.html new file mode 100644 index 00000000..5bf44974 --- /dev/null +++ b/Components/Buttons/Impossible-Toggle-Button/index.html @@ -0,0 +1,22 @@ + + + + + + + + Impossible Toggle Button + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/Components/Buttons/Impossible-Toggle-Button/script.js b/Components/Buttons/Impossible-Toggle-Button/script.js new file mode 100644 index 00000000..9bba81c4 --- /dev/null +++ b/Components/Buttons/Impossible-Toggle-Button/script.js @@ -0,0 +1,306 @@ +const { + React: { useState, useRef, useEffect, Fragment }, + ReactDOM: { render }, + gsap: { + set, + to, + timeline, + utils: { random } } } = + + window; +const rootNode = document.getElementById('app'); +const armLimit = random(0, 3); +const headLimit = random(armLimit + 1, armLimit + 3); +const angerLimit = random(headLimit + 1, headLimit + 3); +const armDuration = 0.2; +const bearDuration = 0.25; +const checkboxDuration = 0.25; +const pawDuration = 0.1; + +const SOUNDS = { + ON: new Audio('https://assets.codepen.io/605876/switch-on.mp3'), + OFF: new Audio('https://assets.codepen.io/605876/switch-off.mp3'), + GROAN: new Audio('https://assets.codepen.io/605876/bear-groan.mp3') +}; + +SOUNDS.GROAN.playbackRate = 2; + +const App = () => { + const [checked, setChecked] = useState(false); + const [count, setCount] = useState(1); + const bearRef = useRef(null); + const swearRef = useRef(null); + const armWrapRef = useRef(null); + const pawRef = useRef(null); + const armRef = useRef(null); + const bgRef = useRef(null); + const indicatorRef = useRef(null); + + const onHover = () => { + if (Math.random() > 0.5 && count > armLimit) { + to(bearRef.current, bearDuration / 2, { y: '40%' }); + } + }; + const offHover = () => { + if (!checked) { + to(bearRef.current, bearDuration / 2, { y: '100%' }); + } + }; + const onChange = () => { + if (checked) return; + setChecked(true); + }; + + useEffect(() => { + const grabBearTL = () => { + let bearTranslation; + if (count > armLimit && count < headLimit) { + bearTranslation = '40%'; + } else if (count >= headLimit) { + bearTranslation = '0%'; + } + const onComplete = () => { + setChecked(false); + setCount(count + 1); + }; + let onBearComplete = () => { }; + if (Math.random() > 0.5 && count > angerLimit) + onBearComplete = () => { + SOUNDS.GROAN.play(); + set(swearRef.current, { display: 'block' }); + }; + const base = armDuration + armDuration + pawDuration; + const preDelay = Math.random(); + const delay = count > armLimit ? base + bearDuration + preDelay : base; + const bearTL = timeline({ delay: Math.random(), onComplete }); + bearTL. + add( + count > armLimit ? + to(bearRef.current, { + duration: bearDuration, + onComplete: onBearComplete, + y: bearTranslation + }) : + + () => { }). + to( + armWrapRef.current, + { x: 50, duration: armDuration }, + count > armLimit ? preDelay : 0). + + to(armRef.current, { scaleX: 0.7, duration: armDuration }). + to(pawRef.current, { + duration: pawDuration, + scaleX: 0.8, + onComplete: () => set(swearRef.current, { display: 'none' }) + }). + + to( + bgRef.current, + { + onStart: () => { + SOUNDS.OFF.play(); + }, + duration: checkboxDuration, + backgroundColor: '#aaa' + }, + + delay). + + to( + indicatorRef.current, + { duration: checkboxDuration, x: '0%' }, + delay). + + to(pawRef.current, { duration: pawDuration, scaleX: 0 }, delay). + to( + armRef.current, + { duration: pawDuration, scaleX: 1 }, + delay + pawDuration). + + to( + armWrapRef.current, + { duration: armDuration, x: 0 }, + delay + pawDuration). + + to( + bearRef.current, + { duration: bearDuration, y: '100%' }, + delay + pawDuration); + + return bearTL; + }; + const showTimeline = () => { + timeline({ + onStart: () => SOUNDS.ON.play() + }). + + to( + bgRef.current, + { duration: checkboxDuration, backgroundColor: '#2eec71' }, + 0). + + to(indicatorRef.current, { duration: checkboxDuration, x: '100%' }, 0). + add(grabBearTL(), checkboxDuration); + }; + if (checked) showTimeline(); + }, [checked, count]); + + return /*#__PURE__*/( + React.createElement(Fragment, null, /*#__PURE__*/ + React.createElement("div", { className: "bear__wrap" }, /*#__PURE__*/ + React.createElement("div", { ref: swearRef, className: "bear__swear" }, "#@$%*!"), /*#__PURE__*/ + + + React.createElement("svg", { + ref: bearRef, + className: "bear", + viewBox: "0 0 284.94574 359.73706", + preserveAspectRatio: "xMinYMin" + }, /*#__PURE__*/ + React.createElement("g", { id: "layer1", transform: "translate(-7.5271369,-761.38595)" }, /*#__PURE__*/ + React.createElement("g", { + id: "g5691", + transform: "matrix(1.2335313,0,0,1.2335313,-35.029693,-212.83637)" + }, /*#__PURE__*/ + React.createElement("path", { + id: "path4372", + d: "M 263.90933,1081.4151 A 113.96792,96.862576 0 0 0 149.99132,985.71456 113.96792,96.862576 0 0 0 36.090664,1081.4151 l 227.818666,0 z", + style: { fill: '#784421', fillOpacity: 1 } + }), /*#__PURE__*/ + + React.createElement("path", { + id: "path5634", + d: "m 250.42825,903.36218 c 2e-5,66.27108 -44.75411,114.99442 -102.42825,114.99442 -57.674143,0 -98.428271,-48.72334 -98.428251,-114.99442 4e-6,-66.27106 40.754125,-92.99437 98.428251,-92.99437 57.67413,0 102.42825,26.72331 102.42825,92.99437 z", + style: { fill: '#784421', fillOpacity: 1 } + }), /*#__PURE__*/ + + React.createElement("path", { + id: "path5639", + d: "m 217,972.86218 c 2e-5,21.53911 -30.44462,42.00002 -68,42.00002 -37.55538,0 -66.000019,-20.46091 -66,-42.00002 0,-21.53911 28.44464,-36 66,-36 37.55536,0 68,14.46089 68,36 z", + style: { fill: '#e9c6af', illOpacity: 1 } + }), /*#__PURE__*/ + + React.createElement("path", { + id: "path5636", + d: "m 181.5,944.36218 c 0,8.28427 -20.59974,26.5 -32.75,26.5 -12.15026,0 -34.75,-18.21573 -34.75,-26.5 0,-8.28427 22.59974,-13.5 34.75,-13.5 12.15026,0 32.75,5.21573 32.75,13.5 z", + style: { fill: '#000000', fillOpacity: 1 } + }), /*#__PURE__*/ + + React.createElement("g", { id: "g5681" }, /*#__PURE__*/ + React.createElement("ellipse", { + style: { fill: '#784421', fillOpacity: 1 }, + id: "path5657", + cx: "69", + cy: "823.07269", + rx: "34.5", + ry: "33.289474" + }), /*#__PURE__*/ + + React.createElement("path", { + style: { fill: '#e9c6af', fillOpacity: 1 }, + d: "M 69,47.310547 A 24.25,23.399124 0 0 0 44.75,70.710938 24.25,23.399124 0 0 0 64.720703,93.720703 c 0.276316,-0.40734 0.503874,-0.867778 0.787109,-1.267578 1.70087,-2.400855 3.527087,-4.666237 5.470704,-6.798828 1.943616,-2.132591 4.004963,-4.133318 6.179687,-6.003906 2.174725,-1.870589 4.461274,-3.611714 6.855469,-5.226563 2.394195,-1.614848 4.896019,-3.10338 7.498047,-4.46875 0.539935,-0.283322 1.133058,-0.500695 1.68164,-0.773437 A 24.25,23.399124 0 0 0 69,47.310547 Z", + id: "ellipse5659", + transform: "translate(0,752.36216)" + })), /*#__PURE__*/ + + + React.createElement("g", { transform: "matrix(-1,0,0,1,300,0)", id: "g5685" }, /*#__PURE__*/ + React.createElement("ellipse", { + ry: "33.289474", + rx: "34.5", + cy: "823.07269", + cx: "69", + id: "ellipse5687", + style: { fill: '#784421', illOpacity: 1 } + }), /*#__PURE__*/ + + React.createElement("path", { + transform: "translate(0,752.36216)", + id: "path5689", + d: "M 69,47.310547 A 24.25,23.399124 0 0 0 44.75,70.710938 24.25,23.399124 0 0 0 64.720703,93.720703 c 0.276316,-0.40734 0.503874,-0.867778 0.787109,-1.267578 1.70087,-2.400855 3.527087,-4.666237 5.470704,-6.798828 1.943616,-2.132591 4.004963,-4.133318 6.179687,-6.003906 2.174725,-1.870589 4.461274,-3.611714 6.855469,-5.226563 2.394195,-1.614848 4.896019,-3.10338 7.498047,-4.46875 0.539935,-0.283322 1.133058,-0.500695 1.68164,-0.773437 A 24.25,23.399124 0 0 0 69,47.310547 Z", + style: { fill: '#e9c6af', fillOpacity: 1 } + })), /*#__PURE__*/ + + + React.createElement("ellipse", { + ry: "9.6790915", + rx: "9.2701159", + cy: "900.38916", + cx: "105.83063", + id: "path4368", + style: { fill: '#000000', fillOpacity: 1 } + }), /*#__PURE__*/ + + React.createElement("ellipse", { + style: { fill: '#000000', fillOpacity: 1 }, + id: "ellipse4370", + cx: "186.89894", + cy: "900.38916", + rx: "9.2701159", + ry: "9.6790915" + }), + + count >= angerLimit && /*#__PURE__*/ + React.createElement(Fragment, null, /*#__PURE__*/ + React.createElement("path", { + id: "path4396", + d: "m 92.05833,865.4614 39.42665,22.76299", + style: { + stroke: '#000000', + strokeWidth: 4.86408424, + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeMiterlimit: 4, + strokeOpacity: 1 + } + }), /*#__PURE__*/ + + + React.createElement("path", { + style: { + stroke: '#000000', + strokeWidth: 4.86408424, + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeMiterlimit: 4, + strokeOpacity: 1 + }, + + d: "m 202.82482,865.4614 -39.42664,22.76299", + id: "path4400" + })))))), /*#__PURE__*/ + + React.createElement("div", { ref: armWrapRef, className: "bear__arm-wrap" }, /*#__PURE__*/ + React.createElement("svg", { + ref: armRef, + className: "bear__arm", + viewBox: "0 0 250.00001 99.999997", + preserveAspectRatio: "xMinYMin" + }, /*#__PURE__*/ + React.createElement("g", { transform: "translate(868.57141,-900.93359)", id: "layer1" }, /*#__PURE__*/ + React.createElement("path", { + style: { fill: '#784421', fillOpacity: 1 }, + d: "m -619.43416,945.05124 c 4.18776,73.01076 -78.25474,53.24342 -150.21568,52.94118 -82.38711,-0.34602 -98.92158,-19.44459 -98.92157,-47.05883 0,-27.61424 4.78794,-42.54902 73.82353,-42.54902 69.03559,0 171.43607,-30.93764 175.31372,36.66667 z", + id: "path4971" + }), /*#__PURE__*/ + + React.createElement("ellipse", { + style: { fill: '#e9c6af', fillOpacity: 1 }, + id: "path4974", + cx: "-683.02264", + cy: "950.98572", + rx: "29.910826", + ry: "29.414362" + })))), /*#__PURE__*/ + + React.createElement("div", { ref: pawRef, className: "bear__paw" }), /*#__PURE__*/ + React.createElement("div", { className: "mask" }), /*#__PURE__*/ + React.createElement("div", { className: "checkbox", onMouseOver: onHover, onMouseOut: offHover }, /*#__PURE__*/ + React.createElement("input", { type: "checkbox", onChange: onChange, checked: checked }), /*#__PURE__*/ + React.createElement("div", { ref: bgRef, className: "checkbox__bg" }), /*#__PURE__*/ + React.createElement("div", { ref: indicatorRef, className: "checkbox__indicator" })))); + +}; + +render( /*#__PURE__*/React.createElement(App, null), rootNode); \ No newline at end of file diff --git a/Components/Buttons/Impossible-Toggle-Button/style.css b/Components/Buttons/Impossible-Toggle-Button/style.css new file mode 100644 index 00000000..18792902 --- /dev/null +++ b/Components/Buttons/Impossible-Toggle-Button/style.css @@ -0,0 +1,154 @@ +* { + box-sizing: border-box; + background: #947cb0; +} + +body { + align-items: center; + display: flex; + justify-content: center; + font-family: 'Arial', sans-serif; + min-height: 100vh; + padding: 0; + margin: 0; + overflow: hidden; +} + +.mask { + position: fixed; + top: 50%; + left: 0; + right: 0; + bottom: 0; + background: #947cb0; +} + +.bear { + width: 100%; + background: transparent; + transform: translate(0, 100%); +} + +.bear__swear { + display: none; + position: absolute; + left: 105%; + top: 0; + background: #fff; + font-weight: bolder; + padding: 10px; + border-radius: 8px; +} + +.bear__swear:before { + content: ''; + background: #fff; + position: absolute; + top: 90%; + right: 70%; + height: 30px; + width: 30px; + clip-path: polygon(0 100%, 100% 0, 50% 0); + -webkit-clip-path: polygon(0 100%, 100% 0, 50% 0); +} + +.bear__wrap { + width: 100px; + left: 50%; + position: absolute; + top: 50%; + transform: translate(-15%, -50%) rotate(5deg) translate(0, -75%); + background: transparent; +} + +.bear__arm-wrap { + background: transparent; + position: fixed; + height: 30px; + width: 90px; + z-index: 4; + top: 50%; + left: 50%; + transform: translate(0, -50%) rotate(0deg); +} + +.bear__arm { + background: transparent; + transform-origin: left; + position: absolute; + height: 100%; + width: 100%; + top: 50%; + left: 50%; + transform: translate(-35%, -50%) scaleX(1); +} + +.bear__paw { + background: #784421; + border-radius: 100%; + position: fixed; + height: 30px; + width: 30px; + z-index: 10; + top: 50%; + left: 50%; + transform-origin: right; + transform: translate(80px, -15px) scaleX(0); +} + +.checkbox { + border-radius: 50px; + height: 100px; + position: fixed; + width: 200px; + z-index: 5; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.checkbox [type='checkbox'] { + cursor: pointer; + border-radius: 50px; + position: absolute; + outline: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0; + z-index: 10; + height: 100%; + width: 100%; + margin: 0; +} + +.checkbox__bg { + background: #aaa; + border-radius: 50px; + height: 100%; + width: 100%; + z-index: 10; +} + +.checkbox__indicator { + background: transparent; + height: 100%; + width: 50%; + border-radius: 100%; + position: absolute; + top: 0; + left: 0; +} + +.checkbox__indicator:after { + content: ''; + border-radius: 100%; + height: 85%; + width: 85%; + background: #fff; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/Components/Buttons/Naughty-Submit-Button/index.html b/Components/Buttons/Naughty-Submit-Button/index.html new file mode 100644 index 00000000..8d07bf38 --- /dev/null +++ b/Components/Buttons/Naughty-Submit-Button/index.html @@ -0,0 +1,23 @@ + + + + + + + Naughty Submit Button + + + +
+

Naughty Submit Button

+ + + +

Signed Up Successfully!

+
+ + + + + + \ No newline at end of file diff --git a/Components/Buttons/Naughty-Submit-Button/script.js b/Components/Buttons/Naughty-Submit-Button/script.js new file mode 100644 index 00000000..14810340 --- /dev/null +++ b/Components/Buttons/Naughty-Submit-Button/script.js @@ -0,0 +1,62 @@ +let usernameRef = document.getElementById("username"); +let passwordRef = document.getElementById("password"); +let submitBtn = document.getElementById("submit"); +let messageRef = document.getElementById("message-ref"); + +let isUsernameValid = () => { + /* Username should be contain more than 3 characters. Should begin with alphabetic character Can contain numbers */ + const usernameRegex = /^[a-zA-Z][a-zA-Z0-9]{3,32}/gi; + return usernameRegex.test(usernameRef.value); +}; + +let isPasswordValid = () => { + /* Password should be atleast 8 characters long. Should contain atleast 1 number, 1 special symbol , 1 lower case and 1 upper case */ + const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm; + return passwordRegex.test(passwordRef.value); +}; + +usernameRef.addEventListener("input", () => { + if (!isUsernameValid()) { + messageRef.style.visibility = "hidden"; + usernameRef.style.cssText = + "border-color: #fe2e2e; background-color: #ffc2c2"; + } else { + usernameRef.style.cssText = + "border-color: #34bd34; background-color: #c2ffc2"; + } +}); + +passwordRef.addEventListener("input", () => { + if (!isPasswordValid()) { + messageRef.style.visibility = "hidden"; + passwordRef.style.cssText = + "border-color: #fe2e2e; background-color: #ffc2c2"; + } else { + passwordRef.style.cssText = + "border-color: #34bd34; background-color: #c2ffc2"; + } +}); + +submitBtn.addEventListener("mouseover", () => { + //If either password or username is invalid then do this.. + if (!isUsernameValid() || !isPasswordValid()) { + //Get the current position of submit btn + let containerRect = document + .querySelector(".container") + .getBoundingClientRect(); + let submitRect = submitBtn.getBoundingClientRect(); + let offset = submitRect.left - containerRect.left; + console.log(offset); + //If the button is on the left hand side.. move it to the the right hand side + if (offset <= 100) { + submitBtn.style.transform = "translateX(16.25em)"; + } + //Vice versa + else { + submitBtn.style.transform = "translateX(0)"; + } + } +}); +submitBtn.addEventListener("click", () => { + messageRef.style.visibility = "visible"; +}); \ No newline at end of file diff --git a/Components/Buttons/Naughty-Submit-Button/style.css b/Components/Buttons/Naughty-Submit-Button/style.css new file mode 100644 index 00000000..bdb8c4a2 --- /dev/null +++ b/Components/Buttons/Naughty-Submit-Button/style.css @@ -0,0 +1,64 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + background-color: #262433; +} + +.container { + width: 31.25em; + background-color: #f8f8f8; + padding: 1.4em 3.75em; + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + border-radius: 0.7em; + box-shadow: 0 1em 4em rgba(212, 234, 255, 0.2); +} + +h2 { + text-align: center; + font-size: 32px; + margin-bottom: 30px; + color: lightblack; +} + +input, +#submit { + border: none; + outline: none; + display: block; +} + +input { + width: 100%; + background-color: transparent; + margin-bottom: 2em; + font-size: 20px; + padding: 1em 0 0.5em 0.5em; + border-bottom: 2px solid #202020; +} + +#submit { + position: relative; + left: 0; + font-size: 1.1em; + width: 7em; + background-color: #3492eb; + color: white; + padding: 0.8em 0; + margin-top: 2em; + border-radius: 0.3em; +} + +#message-ref { + font-size: 0.9em; + margin-top: 1.5em; + color: #34bd34; + visibility: hidden; +} \ No newline at end of file diff --git a/Components/Buttons/Toggle-Animated-Button/index.html b/Components/Buttons/Toggle-Animated-Button/index.html new file mode 100644 index 00000000..aaacf129 --- /dev/null +++ b/Components/Buttons/Toggle-Animated-Button/index.html @@ -0,0 +1,102 @@ + + + + + + + + + + Toggle Animated Button + + + +
+
+ + +
+
Normal
+
+
+
+ + +
+
Transparent
+
+
+
+ + +
+
Yes & No
+
+
+
+ + +
+
Gravity
+
+
+
+ + +
+
Pancake Stacks
+
+
+
+ + +
+
Doggo Wants a Treat
+
+
+
+ + +
+
Kobe Bryant Tribute
+
+
+
+ + +
+
+
+
+
Beer Pong
+
+ + + + + + \ No newline at end of file diff --git a/Components/Buttons/Toggle-Animated-Button/style.css b/Components/Buttons/Toggle-Animated-Button/style.css new file mode 100644 index 00000000..af634b6a --- /dev/null +++ b/Components/Buttons/Toggle-Animated-Button/style.css @@ -0,0 +1,748 @@ +body { + background: #2e394d; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +* { + box-sizing: border-box; +} + +*:before, +*:after { + content: ""; + position: absolute; +} + +input { + height: 40px; + left: 0; + opacity: 0; + position: absolute; + top: 0; + width: 40px; +} + +.toggle-wrapper { + flex: 1 1 calc(100% / 3); + min-height: 50vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; +} + +@media (max-width: 960px) { + .toggle-wrapper { + flex: 1 1 calc(100% / 2); + } +} + +@media (max-width: 700px) { + .toggle-wrapper { + flex: 1 1 100%; + } +} + +.toggle-wrapper:nth-child(1) { + background: #dec387; +} + +.toggle-wrapper:nth-child(2) { + background: #de8797; +} + +.toggle-wrapper:nth-child(3) { + background: #87aade; +} + +.toggle-wrapper:nth-child(4) { + background: #c5de87; +} + +.toggle-wrapper:nth-child(5) { + background: #87ded2; +} + +.toggle-wrapper:nth-child(6) { + background: #c487de; +} + +.toggle-wrapper:nth-child(7) { + background: #de8787; +} + +.toggle-wrapper:nth-child(7) .toggle { + transform: translate(-40px, 40px); +} + +.toggle-wrapper:nth-child(8) { + background: #decf87; +} + +.toggle-wrapper:nth-child(8) .toggle { + transform: translate(-40px, 40px); +} + +.name { + width: 80%; + position: absolute; + font: 500 14px "Rubik", sans-serif; + letter-spacing: 0.5px; + text-transform: uppercase; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); + bottom: 15px; + right: 15px; + text-align: right; +} + +.toggle { + position: relative; + display: inline-block; +} + +label.toggle-item { + width: 7em; + background: #2e394d; + height: 3em; + display: inline-block; + border-radius: 50px; + margin: 40px; + position: relative; + transition: all 0.3s ease; + transform-origin: 20% center; + cursor: pointer; +} + +label.toggle-item:before { + display: block; + transition: all 0.2s ease; + width: 2.3em; + height: 2.3em; + top: 0.25em; + left: 0.25em; + border-radius: 2em; + border: 2px solid #88cf8f; + transition: 0.3s ease; +} + +.normal label { + background: #af4c4c; + border: 0.5px solid rgba(117, 117, 117, 0.31); + box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0 -3px 4px rgba(0, 0, 0, 0.15); +} + +.normal label:before { + border: none; + width: 2.5em; + height: 2.5em; + box-shadow: inset 0.5px -1px 1px rgba(0, 0, 0, 0.35); + background: #fff; + transform: rotate(-25deg); +} + +.normal label:after { + background: transparent; + height: calc(100% + 8px); + border-radius: 30px; + top: -5px; + width: calc(100% + 8px); + left: -4px; + z-index: 0; + box-shadow: inset 0px 2px 4px -2px rgba(0, 0, 0, 0.2), 0px 1px 2px 0px rgba(151, 151, 151, 0.2); +} + +#normal:checked+label { + background: #4caf50; +} + +#normal:checked+label:before { + left: 67px; +} + +.transparent label { + background: transparent; + border: 3px solid #fff; + height: 3.35em; +} + +.transparent label:before { + border: 3px solid #fff; + width: 2em; + height: 2em; + top: 0.3em; + left: 0.3em; + background: #fff; +} + +#transparent:checked+label:before { + transform: translateX(59px); +} + +.checkcross label:before { + content: none; +} + +.checkcross .check { + border-radius: 50%; + width: 2.5em; + height: 2.5em; + position: absolute; + background: #8BC34A; + transition: 0.4s ease; + top: 4.5px; + left: 4.5px; +} + +.checkcross .check:before, +.checkcross .check:after { + height: 4px; + border-radius: 10px; + background: #fff; + transition: 0.4s ease; +} + +.checkcross .check:before { + width: 25px; + transform: rotate(-45deg) translate(-6px, 20px); +} + +.checkcross .check:after { + width: 10px; + transform: rotate(45deg) translate(20px, 11px); +} + +#checkcross:checked+label .check { + left: 68px; + transform: rotate(360deg); + background: #c34a4a; +} + +#checkcross:checked+label .check:before { + width: 27px; + transform: rotate(-45deg) translate(-8px, 18px); +} + +#checkcross:checked+label .check:after { + width: 27px; + transform: rotate(45deg) translate(18px, 8px); +} + +#gravity:checked+label { + transform: rotate(90deg); +} + +#gravity:checked+label:before { + transform: translateX(67px); + transition-delay: 0.2s; + transition: 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.2s; +} + +.beer-pong label:before { + background: #f9f9f9; + box-shadow: inset 0 -3px 0 0 #c6c5c5; + border: none; + width: 2.5em; + height: 2.5em; + top: 0.25em; + left: 0.25em; +} + +.beer-pong .cup { + top: -3%; + right: -118px; + border-top: 90px solid #f44336; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + height: 3px; + position: absolute; + width: 80px; + transform-origin: bottom right; + transition: 0.2s cubic-bezier(0.42, 0.5, 0.58, 1); +} + +.beer-pong .cup:before { + box-shadow: 0 -10px 0 0px rgba(39, 39, 39, 0.1), 0px -20px 0 0px rgba(39, 39, 39, 0.1); + border-radius: 3px; + overflow: hidden; + background: rgba(39, 39, 39, 0.1); + width: 120%; + left: -5px; + height: 4px; + top: -40px; +} + +.beer-pong .cup .lid { + position: absolute; + width: 95px; + height: 8px; + border-radius: 20px; + background: #efefef; + bottom: 86px; + left: -23px; +} + +.beer-pong .cup .lid:after { + background: #efefef; + width: 48px; + height: 5px; + left: 50%; + margin-left: -24px; + top: 94px; + border-radius: 0 0 3px 3px; +} + +#beer-pong:checked~.cup { + animation: 0.2s linear cup 1s forwards; +} + +#beer-pong:checked+label:before { + animation: 2s linear bounce-off forwards; +} + +@keyframes cup { + 0% { + transform: none; + } + + 50% { + transform: rotate(75deg) translate(10px, 15px); + } + + 90% { + transform: rotate(70deg) translate(10px, 15px); + } + + 100% { + transform: rotate(75deg) translate(10px, 15px); + } +} + +@keyframes bounce-off { + 0% { + transform: translateY(0); + } + + 10%, + 25% { + transform: translate(-20px, -80px); + } + + 50% { + transform: rotate(163deg); + transform-origin: 100px -12px; + } + + 70% { + transform: rotate(0) translate(-3px, -8px); + transform-origin: 100px -12px; + } + + 75% { + transform: translate(20px, -8px); + } + + 80% { + transform: translate(30px, 0px); + } + + 85% { + transform: translate(40px, -3px); + } + + 87% { + transform: translate(46px, 0px); + } + + 90% { + transform: translate(52px, -1px); + } + + 95% { + transform: translate(60px, 0px); + } + + 100% { + transform: translate(64px, 0px); + } +} + +.dog-rollover label:before { + content: none; +} + +.dog-rollover label .dog { + display: inline-block; + position: absolute; + width: 2.5em; + height: 2.5em; + top: 0.25em; + left: 0.2em; + transition: 0.6s ease; +} + +.dog-rollover label .eyes { + position: absolute; + width: 8px; + height: 8px; + background: #222; + border-radius: 50%; + transform: translate(8px, 14px); + box-shadow: 16px 0 0 #222, 22px -4px 0 12px #e4ac04; +} + +.dog-rollover label .ear { + width: 18px; + height: 20px; + position: absolute; + left: -4px; + bottom: 80%; + background: #f9bb00; + margin-bottom: -5px; + border-radius: 50% 50% 0 0/100% 100% 0 0; + box-shadow: inset 4px 0 0 0px #ffffff, inset -4px 0 0 0px #ffffff; + transform: rotate(-40deg); +} + +.dog-rollover label .ear.right { + transform: rotate(60deg) scaleX(-1); + left: auto; + transform-origin: center bottom; + transition: 0.4s ease-in-out; + right: 0px; +} + +.dog-rollover label .face { + overflow: hidden; + border-radius: 50%; + width: 2.5em; + height: 2.5em; + position: absolute; + background: #fff; + z-index: 8; +} + +.dog-rollover label .mouth { + position: absolute; + background: #222; + width: 14px; + height: 7px; + left: 50%; + margin-left: -7px; + bottom: 12px; + border-radius: 2px 2px 20px 20px; + bottom: 8px; + transform: scale(0); + transition: 0.1s ease; +} + +.dog-rollover label .mouth:before { + width: 8px; + height: 8px; + background: #ec788d; + border-radius: 0 0 50% 50%; + transform: translate(3px, 5px); +} + +.dog-rollover label:before { + border-color: white; + background: white; +} + +#doggo:checked~.cup { + animation: 0.2s linear cup 1s forwards; +} + +#doggo:checked+label .dog { + left: 68px; + transform: rotate(360deg); +} + +#doggo:checked+label .mouth { + transform: scale(1); + transition-delay: 0.7s; +} + +#doggo:checked+label .ear.right { + transform: scaleX(-1) rotate(-35deg); + transition-delay: 0.6s; +} + +.basketball-hoop label { + background: #fdb827; +} + +.basketball-hoop label:before { + content: none; +} + +.basketball-hoop .ball { + border-radius: 50%; + width: 2.5em; + height: 2.5em; + position: absolute; + background: #FF9800; + border: 2px solid black; + transition: 0.4s ease; + top: 4px; + left: 4px; + background-image: radial-gradient(circle at -5px 10px, transparent 15px, black 15px, black 17px, transparent 17px), radial-gradient(circle at 41px 25px, transparent 15px, black 15px, black 17px, transparent 17px), linear-gradient(110deg, transparent 22px, black 22px, black 24px, transparent 24px), linear-gradient(18deg, transparent 22px, black 22px, black 24px, transparent 24px); +} + +.basketball-hoop .ball__wrapper { + transition: 0.4s ease; + width: 195%; + height: 200%; + transform-origin: 50% -2%; +} + +.basketball-hoop .hoop { + top: -50px; + right: -84px; + width: 50px; + background: #f44336; + height: 8px; + position: absolute; +} + +.basketball-hoop .hoop:before { + position: absolute; + right: -4px; + width: 7px; + height: 60px; + background: #cd2e22; + top: -40px; +} + +.basketball-hoop .hoop:after { + width: 40px; + height: 35px; + background: repeating-linear-gradient(45deg, transparent, transparent 13px, white 13px, white 15px), repeating-linear-gradient(-45deg, transparent, transparent 13px, white 13px, white 15px); + top: 8px; + border-radius: 0 0 20% 20%/40% 40% 60% 60%; + border: 2px solid #fff; + border-width: 0 2px; + left: 2px; + z-index: 20; +} + +#hoop:checked+label { + background: #542583; + transition-delay: 1.35s; +} + +#hoop:checked+label .ball__wrapper { + animation: 1.5s linear ball-wrapper forwards; +} + +#hoop:checked+label .ball { + animation: 1.5s linear ball forwards; +} + +@keyframes ball { + 0% { + transform: none; + } + + 40% { + transform: rotate(-150deg); + } + + 48% { + transform: rotate(-150deg) translateY(92px); + } + + 52% { + transform: rotate(-150deg) translate(-10px, 80px); + } + + 56% { + transform: rotate(-150deg) translate(-25px, 91px); + } + + 60% { + transform: rotate(-150deg) translate(-35px, 86px); + } + + 65% { + transform: rotate(-150deg) translate(-45px, 91px); + } + + 70% { + transform: rotate(-150deg) translate(-50px, 87px); + } + + 75% { + transform: rotate(-150deg) translate(-60px, 91px); + } + + 80% { + transform: rotate(-150deg) translate(-65px, 88px); + } + + 85% { + transform: rotate(-150deg) translate(-70px, 91px); + } + + 90% { + transform: rotate(-150deg) translate(-75px, 90px); + } + + 95% { + transform: rotate(-150deg) translate(-80px, 90px); + } + + 100% { + transform: rotate(-150deg) translate(-82px, 91px); + } +} + +@keyframes ball-wrapper { + 0% { + transform: none; + } + + 40%, + 100% { + transform: rotate(150deg); + } +} + +.pancake-stack label:before { + content: none; +} + +.pancake-stack .pancakes { + transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.pancake-stack .pancake { + background: #e27c31; + border-radius: 50%; + width: 2.5em; + height: 2.5em; + position: absolute; + transition: 0.4s ease; + top: 2px; + left: 4px; + box-shadow: 0 2px 0 2px #fbbe7c; +} + +.pancake-stack .pancake:nth-child(2) { + left: 0; + top: -3px; + transform: scale(0); + transition: 0.2s ease 0.2s; +} + +.pancake-stack .pancake:nth-child(3) { + top: -8px; + transform: scale(0); + transition: 0.2s ease 0.2s; +} + +.pancake-stack .pancake:nth-child(3):before, +.pancake-stack .pancake:nth-child(3):after { + background: #ef8927; + border-radius: 20px; + width: 50%; + height: 20%; +} + +.pancake-stack .pancake:nth-child(3):before { + top: 20px; + left: 5px; +} + +.pancake-stack .pancake:nth-child(3):after { + top: 22px; + right: 5px; +} + +.pancake-stack .butter { + width: 12px; + height: 11px; + background: #fbdb60; + top: 6px; + left: 20px; + position: absolute; + border-radius: 4px; + box-shadow: 0 1px 0 1px #d67823; + transform: scale(0); + transition: 0.2s ease; +} + +#pancake:checked+label .pancakes { + transform: translateX(70px); +} + +#pancake:checked+label .pancake:nth-child(2) { + transform: scale(1); + transition-delay: 0.2s; +} + +#pancake:checked+label .pancake:nth-child(3) { + transform: scale(1); + transition-delay: 0.4s; +} + +#pancake:checked+label .butter { + transform: scale(1); + transition-delay: 0.6s; +} + +.footer { + flex-wrap: wrap; + padding: 5rem 5rem 3rem; + text-align: center; + min-height: 20vh; + display: flex; + font: 14px/1.7 "Rubik"; + color: #fff; + align-items: center; + justify-content: center; +} + +.footer a { + text-decoration: none; + color: #fff; + padding: 3px 0; + border-bottom: 1px dashed; +} + +.footer a:hover { + border-bottom: 1px solid; +} + +footer { + margin-top: 1.5rem; +} + +footer a { + text-decoration: none; + display: inline-block; + width: 45px; + height: 45px; + border-radius: 50%; + background: transparent; + border: 1px dashed #fff; + color: #fff; + margin: 5px; +} + +footer a:hover { + background: rgba(255, 255, 255, 0.1); +} + +footer a .icons { + margin-top: 8px; + display: inline-block; + font-size: 20px; +} + +footer a .icons:before { + position: relative; +} \ No newline at end of file diff --git a/Components/Forms/Yeti-Login-Form/index.html b/Components/Forms/Yeti-Login-Form/index.html new file mode 100644 index 00000000..976c214d --- /dev/null +++ b/Components/Forms/Yeti-Login-Form/index.html @@ -0,0 +1,202 @@ + + + + + + + + Yeti Login Form + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ + +

email@domain.com

+
+
+ + + +
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/Components/Forms/Yeti-Login-Form/script.js b/Components/Forms/Yeti-Login-Form/script.js new file mode 100644 index 00000000..89744ab5 --- /dev/null +++ b/Components/Forms/Yeti-Login-Form/script.js @@ -0,0 +1,368 @@ +var emailLabel = document.querySelector('#loginEmailLabel'), email = document.querySelector('#loginEmail'), passwordLabel = document.querySelector('#loginPasswordLabel'), password = document.querySelector('#loginPassword'), showPasswordCheck = document.querySelector('#showPasswordCheck'), showPasswordToggle = document.querySelector('#showPasswordToggle'), mySVG = document.querySelector('.svgContainer'), twoFingers = document.querySelector('.twoFingers'), armL = document.querySelector('.armL'), armR = document.querySelector('.armR'), eyeL = document.querySelector('.eyeL'), eyeR = document.querySelector('.eyeR'), nose = document.querySelector('.nose'), mouth = document.querySelector('.mouth'), mouthBG = document.querySelector('.mouthBG'), mouthSmallBG = document.querySelector('.mouthSmallBG'), mouthMediumBG = document.querySelector('.mouthMediumBG'), mouthLargeBG = document.querySelector('.mouthLargeBG'), mouthMaskPath = document.querySelector('#mouthMaskPath'), mouthOutline = document.querySelector('.mouthOutline'), tooth = document.querySelector('.tooth'), tongue = document.querySelector('.tongue'), chin = document.querySelector('.chin'), face = document.querySelector('.face'), eyebrow = document.querySelector('.eyebrow'), outerEarL = document.querySelector('.earL .outerEar'), outerEarR = document.querySelector('.earR .outerEar'), earHairL = document.querySelector('.earL .earHair'), earHairR = document.querySelector('.earR .earHair'), hair = document.querySelector('.hair'), bodyBG = document.querySelector('.bodyBGnormal'), bodyBGchanged = document.querySelector('.bodyBGchanged'); +var activeElement, curEmailIndex, screenCenter, svgCoords, emailCoords, emailScrollMax, chinMin = .5, dFromC, mouthStatus = "small", blinking, eyeScale = 1, eyesCovered = false, showPasswordClicked = false; +var eyeLCoords, eyeRCoords, noseCoords, mouthCoords, eyeLAngle, eyeLX, eyeLY, eyeRAngle, eyeRX, eyeRY, noseAngle, noseX, noseY, mouthAngle, mouthX, mouthY, mouthR, chinX, chinY, chinS, faceX, faceY, faceSkew, eyebrowSkew, outerEarX, outerEarY, hairX, hairS; + +function calculateFaceMove(e) { + var + carPos = email.selectionEnd, + div = document.createElement('div'), + span = document.createElement('span'), + copyStyle = getComputedStyle(email), + caretCoords = {} + ; + if (carPos == null || carPos == 0) { + // if browser doesn't support 'selectionEnd' property on input[type="email"], use 'value.length' property instead + carPos = email.value.length; + } + [].forEach.call(copyStyle, function (prop) { + div.style[prop] = copyStyle[prop]; + }); + div.style.position = 'absolute'; + document.body.appendChild(div); + div.textContent = email.value.substr(0, carPos); + span.textContent = email.value.substr(carPos) || '.'; + div.appendChild(span); + + if (email.scrollWidth <= emailScrollMax) { + caretCoords = getPosition(span); + dFromC = screenCenter - (caretCoords.x + emailCoords.x); + eyeLAngle = getAngle(eyeLCoords.x, eyeLCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25); + eyeRAngle = getAngle(eyeRCoords.x, eyeRCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25); + noseAngle = getAngle(noseCoords.x, noseCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25); + mouthAngle = getAngle(mouthCoords.x, mouthCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25); + } else { + eyeLAngle = getAngle(eyeLCoords.x, eyeLCoords.y, emailCoords.x + emailScrollMax, emailCoords.y + 25); + eyeRAngle = getAngle(eyeRCoords.x, eyeRCoords.y, emailCoords.x + emailScrollMax, emailCoords.y + 25); + noseAngle = getAngle(noseCoords.x, noseCoords.y, emailCoords.x + emailScrollMax, emailCoords.y + 25); + mouthAngle = getAngle(mouthCoords.x, mouthCoords.y, emailCoords.x + emailScrollMax, emailCoords.y + 25); + } + + eyeLX = Math.cos(eyeLAngle) * 20; + eyeLY = Math.sin(eyeLAngle) * 10; + eyeRX = Math.cos(eyeRAngle) * 20; + eyeRY = Math.sin(eyeRAngle) * 10; + noseX = Math.cos(noseAngle) * 23; + noseY = Math.sin(noseAngle) * 10; + mouthX = Math.cos(mouthAngle) * 23; + mouthY = Math.sin(mouthAngle) * 10; + mouthR = Math.cos(mouthAngle) * 6; + chinX = mouthX * .8; + chinY = mouthY * .5; + chinS = 1 - ((dFromC * .15) / 100); + if (chinS > 1) { + chinS = 1 - (chinS - 1); + if (chinS < chinMin) { + chinS = chinMin; + } + } + faceX = mouthX * .3; + faceY = mouthY * .4; + faceSkew = Math.cos(mouthAngle) * 5; + eyebrowSkew = Math.cos(mouthAngle) * 25; + outerEarX = Math.cos(mouthAngle) * 4; + outerEarY = Math.cos(mouthAngle) * 5; + hairX = Math.cos(mouthAngle) * 6; + hairS = 1.2; + + TweenMax.to(eyeL, 1, { x: -eyeLX, y: -eyeLY, ease: Expo.easeOut }); + TweenMax.to(eyeR, 1, { x: -eyeRX, y: -eyeRY, ease: Expo.easeOut }); + TweenMax.to(nose, 1, { x: -noseX, y: -noseY, rotation: mouthR, transformOrigin: "center center", ease: Expo.easeOut }); + TweenMax.to(mouth, 1, { x: -mouthX, y: -mouthY, rotation: mouthR, transformOrigin: "center center", ease: Expo.easeOut }); + TweenMax.to(chin, 1, { x: -chinX, y: -chinY, scaleY: chinS, ease: Expo.easeOut }); + TweenMax.to(face, 1, { x: -faceX, y: -faceY, skewX: -faceSkew, transformOrigin: "center top", ease: Expo.easeOut }); + TweenMax.to(eyebrow, 1, { x: -faceX, y: -faceY, skewX: -eyebrowSkew, transformOrigin: "center top", ease: Expo.easeOut }); + TweenMax.to(outerEarL, 1, { x: outerEarX, y: -outerEarY, ease: Expo.easeOut }); + TweenMax.to(outerEarR, 1, { x: outerEarX, y: outerEarY, ease: Expo.easeOut }); + TweenMax.to(earHairL, 1, { x: -outerEarX, y: -outerEarY, ease: Expo.easeOut }); + TweenMax.to(earHairR, 1, { x: -outerEarX, y: outerEarY, ease: Expo.easeOut }); + TweenMax.to(hair, 1, { x: hairX, scaleY: hairS, transformOrigin: "center bottom", ease: Expo.easeOut }); + + document.body.removeChild(div); +}; + +function onEmailInput(e) { + calculateFaceMove(e); + var value = email.value; + curEmailIndex = value.length; + + // very crude email validation to trigger effects + if (curEmailIndex > 0) { + if (mouthStatus == "small") { + mouthStatus = "medium"; + TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthMediumBG, shapeIndex: 8, ease: Expo.easeOut }); + TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut }); + TweenMax.to(tongue, 1, { x: 0, y: 1, ease: Expo.easeOut }); + TweenMax.to([eyeL, eyeR], 1, { scaleX: .85, scaleY: .85, ease: Expo.easeOut }); + eyeScale = .85; + } + if (value.includes("@")) { + mouthStatus = "large"; + TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthLargeBG, ease: Expo.easeOut }); + TweenMax.to(tooth, 1, { x: 3, y: -2, ease: Expo.easeOut }); + TweenMax.to(tongue, 1, { y: 2, ease: Expo.easeOut }); + TweenMax.to([eyeL, eyeR], 1, { scaleX: .65, scaleY: .65, ease: Expo.easeOut, transformOrigin: "center center" }); + eyeScale = .65; + } else { + mouthStatus = "medium"; + TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthMediumBG, ease: Expo.easeOut }); + TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut }); + TweenMax.to(tongue, 1, { x: 0, y: 1, ease: Expo.easeOut }); + TweenMax.to([eyeL, eyeR], 1, { scaleX: .85, scaleY: .85, ease: Expo.easeOut }); + eyeScale = .85; + } + } else { + mouthStatus = "small"; + TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthSmallBG, shapeIndex: 9, ease: Expo.easeOut }); + TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut }); + TweenMax.to(tongue, 1, { y: 0, ease: Expo.easeOut }); + TweenMax.to([eyeL, eyeR], 1, { scaleX: 1, scaleY: 1, ease: Expo.easeOut }); + eyeScale = 1; + } +} + +function onEmailFocus(e) { + activeElement = "email"; + e.target.parentElement.classList.add("focusWithText"); + //stopBlinking(); + //calculateFaceMove(); + onEmailInput(); +} + +function onEmailBlur(e) { + activeElement = null; + setTimeout(function () { + if (activeElement == "email") { + } else { + if (e.target.value == "") { + e.target.parentElement.classList.remove("focusWithText"); + } + //startBlinking(); + resetFace(); + } + }, 100); +} + +function onEmailLabelClick(e) { + activeElement = "email"; +} + +function onPasswordFocus(e) { + activeElement = "password"; + if (!eyesCovered) { + coverEyes(); + } +} + +function onPasswordBlur(e) { + activeElement = null; + setTimeout(function () { + if (activeElement == "toggle" || activeElement == "password") { + } else { + uncoverEyes(); + } + }, 100); +} + +function onPasswordToggleFocus(e) { + activeElement = "toggle"; + if (!eyesCovered) { + coverEyes(); + } +} + +function onPasswordToggleBlur(e) { + activeElement = null; + if (!showPasswordClicked) { + setTimeout(function () { + if (activeElement == "password" || activeElement == "toggle") { + } else { + uncoverEyes(); + } + }, 100); + } +} + +function onPasswordToggleMouseDown(e) { + showPasswordClicked = true; +} + +function onPasswordToggleMouseUp(e) { + showPasswordClicked = false; +} + +function onPasswordToggleChange(e) { + setTimeout(function () { + // if checkbox is checked, show password + if (e.target.checked) { + password.type = "text"; + spreadFingers(); + + // if checkbox is off, hide password + } else { + password.type = "password"; + closeFingers(); + } + }, 100); +} + +function onPasswordToggleClick(e) { + //console.log("click: " + e.target.id); + e.target.focus(); +} + +function spreadFingers() { + TweenMax.to(twoFingers, .35, { transformOrigin: "bottom left", rotation: 30, x: -9, y: -2, ease: Power2.easeInOut }); +} + +function closeFingers() { + TweenMax.to(twoFingers, .35, { transformOrigin: "bottom left", rotation: 0, x: 0, y: 0, ease: Power2.easeInOut }); +} + +function coverEyes() { + TweenMax.killTweensOf([armL, armR]); + TweenMax.set([armL, armR], { visibility: "visible" }); + TweenMax.to(armL, .45, { x: -93, y: 10, rotation: 0, ease: Quad.easeOut }); + TweenMax.to(armR, .45, { x: -93, y: 10, rotation: 0, ease: Quad.easeOut, delay: .1 }); + TweenMax.to(bodyBG, .45, { morphSVG: bodyBGchanged, ease: Quad.easeOut }); + eyesCovered = true; +} + +function uncoverEyes() { + TweenMax.killTweensOf([armL, armR]); + TweenMax.to(armL, 1.35, { y: 220, ease: Quad.easeOut }); + TweenMax.to(armL, 1.35, { rotation: 105, ease: Quad.easeOut, delay: .1 }); + TweenMax.to(armR, 1.35, { y: 220, ease: Quad.easeOut }); + TweenMax.to(armR, 1.35, { + rotation: -105, ease: Quad.easeOut, delay: .1, onComplete: function () { + TweenMax.set([armL, armR], { visibility: "hidden" }); + } + }); + TweenMax.to(bodyBG, .45, { morphSVG: bodyBG, ease: Quad.easeOut }); + eyesCovered = false; +} + +function resetFace() { + TweenMax.to([eyeL, eyeR], 1, { x: 0, y: 0, ease: Expo.easeOut }); + TweenMax.to(nose, 1, { x: 0, y: 0, scaleX: 1, scaleY: 1, ease: Expo.easeOut }); + TweenMax.to(mouth, 1, { x: 0, y: 0, rotation: 0, ease: Expo.easeOut }); + TweenMax.to(chin, 1, { x: 0, y: 0, scaleY: 1, ease: Expo.easeOut }); + TweenMax.to([face, eyebrow], 1, { x: 0, y: 0, skewX: 0, ease: Expo.easeOut }); + TweenMax.to([outerEarL, outerEarR, earHairL, earHairR, hair], 1, { x: 0, y: 0, scaleY: 1, ease: Expo.easeOut }); +} + +function startBlinking(delay) { + if (delay) { + delay = getRandomInt(delay); + } else { + delay = 1; + } + blinking = TweenMax.to([eyeL, eyeR], .1, { + delay: delay, scaleY: 0, yoyo: true, repeat: 1, transformOrigin: "center center", onComplete: function () { + startBlinking(12); + } + }); +} + +function stopBlinking() { + blinking.kill(); + blinking = null; + TweenMax.set([eyeL, eyeR], { scaleY: eyeScale }); +} + +function getRandomInt(max) { + return Math.floor(Math.random() * Math.floor(max)); +} + +function getAngle(x1, y1, x2, y2) { + var angle = Math.atan2(y1 - y2, x1 - x2); + return angle; +} + +function getPosition(el) { + var xPos = 0; + var yPos = 0; + + while (el) { + if (el.tagName == "BODY") { + // deal with browser quirks with body/window/document and page scroll + var xScroll = el.scrollLeft || document.documentElement.scrollLeft; + var yScroll = el.scrollTop || document.documentElement.scrollTop; + + xPos += (el.offsetLeft - xScroll + el.clientLeft); + yPos += (el.offsetTop - yScroll + el.clientTop); + } else { + // for all other non-BODY elements + xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft); + yPos += (el.offsetTop - el.scrollTop + el.clientTop); + } + + el = el.offsetParent; + } + //console.log("xPos: " + xPos + ", yPos: " + yPos); + return { + x: xPos, + y: yPos + }; +} + +function isMobileDevice() { + var check = false; + (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera); + return check; +}; + +function initLoginForm() { + // some measurements for the svg's elements + svgCoords = getPosition(mySVG); + emailCoords = getPosition(email); + screenCenter = svgCoords.x + (mySVG.offsetWidth / 2); + eyeLCoords = { x: svgCoords.x + 84, y: svgCoords.y + 76 }; + eyeRCoords = { x: svgCoords.x + 113, y: svgCoords.y + 76 }; + noseCoords = { x: svgCoords.x + 97, y: svgCoords.y + 81 }; + mouthCoords = { x: svgCoords.x + 100, y: svgCoords.y + 100 }; + + // handle events for email input + email.addEventListener('focus', onEmailFocus); + email.addEventListener('blur', onEmailBlur); + email.addEventListener('input', onEmailInput); + emailLabel.addEventListener('click', onEmailLabelClick); + + // handle events for password input + password.addEventListener('focus', onPasswordFocus); + password.addEventListener('blur', onPasswordBlur); + //passwordLabel.addEventListener('click', onPasswordLabelClick); + + // handle events for password checkbox + showPasswordCheck.addEventListener('change', onPasswordToggleChange); + showPasswordCheck.addEventListener('focus', onPasswordToggleFocus); + showPasswordCheck.addEventListener('blur', onPasswordToggleBlur); + showPasswordCheck.addEventListener('click', onPasswordToggleClick); + showPasswordToggle.addEventListener('mouseup', onPasswordToggleMouseUp); + showPasswordToggle.addEventListener('mousedown', onPasswordToggleMouseDown); + + // move arms to initial positions + TweenMax.set(armL, { x: -93, y: 220, rotation: 105, transformOrigin: "top left" }); + TweenMax.set(armR, { x: -93, y: 220, rotation: -105, transformOrigin: "top right" }); + + // set initial mouth property (fixes positioning bug) + TweenMax.set(mouth, { transformOrigin: "center center" }); + + // activate blinking + startBlinking(5); + + // determine how far email input can go before scrolling occurs + // will be used as the furthest point avatar will look to the right + emailScrollMax = email.scrollWidth; + + // check if we're on mobile/tablet, if so then show password initially + if (isMobileDevice()) { + password.type = "text"; + showPasswordCheck.checked = true; + TweenMax.set(twoFingers, { transformOrigin: "bottom left", rotation: 30, x: -9, y: -2, ease: Power2.easeInOut }); + } + + // clear the console + console.clear(); +} + +initLoginForm(); \ No newline at end of file diff --git a/Components/Forms/Yeti-Login-Form/style.css b/Components/Forms/Yeti-Login-Form/style.css new file mode 100644 index 00000000..7ffde62f --- /dev/null +++ b/Components/Forms/Yeti-Login-Form/style.css @@ -0,0 +1,237 @@ +html { + width: 100%; + height: 100%; +} + +body { + background-color: #eff3f4; + position: relative; + width: 100%; + height: 100%; + font-size: 16px; + font-family: "Source Sans Pro", sans-serif; + font-weight: 400; + -webkit-font-smoothing: antialiased; +} + +form { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: block; + width: 100%; + max-width: 400px; + background-color: #FFF; + margin: 0; + padding: 2.25em; + box-sizing: border-box; + border: solid 1px #DDD; + border-radius: 0.5em; + font-family: "Source Sans Pro", sans-serif; +} + +form .svgContainer { + position: relative; + width: 200px; + height: 200px; + margin: 0 auto 1em; + border-radius: 50%; + pointer-events: none; +} + +form .svgContainer div { + position: relative; + width: 100%; + height: 0; + overflow: hidden; + border-radius: 50%; + padding-bottom: 100%; +} + +form .svgContainer .mySVG { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +form .svgContainer:after { + content: ""; + position: absolute; + top: 0; + left: 0; + z-index: 10; + width: inherit; + height: inherit; + box-sizing: border-box; + border: solid 2.5px #217093; + border-radius: 50%; +} + +form .inputGroup { + margin: 0 0 2em; + padding: 0; + position: relative; +} + +form .inputGroup:last-of-type { + margin-bottom: 0; +} + +form label { + margin: 0 0 12px; + display: block; + font-size: 1.25em; + color: #217093; + font-weight: 700; + font-family: inherit; +} + +form input[type=email], +form input[type=text], +form input[type=number], +form input[type=url], +form input[type=search], +form input[type=password] { + display: block; + margin: 0; + padding: 0 1em 0; + padding: 0.875em 1em 0; + background-color: #f3fafd; + border: solid 2px #217093; + border-radius: 4px; + -webkit-appearance: none; + box-sizing: border-box; + width: 100%; + height: 65px; + font-size: 1.55em; + color: #353538; + font-weight: 600; + font-family: inherit; + transition: box-shadow 0.2s linear, border-color 0.25s ease-out; +} + +form input[type=email]:focus, +form input[type=text]:focus, +form input[type=number]:focus, +form input[type=url]:focus, +form input[type=search]:focus, +form input[type=password]:focus { + outline: none; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); + border: solid 2px #4eb8dd; +} + +form button { + display: block; + margin: 0; + padding: 0.65em 1em 1em; + background-color: #4eb8dd; + border: none; + border-radius: 4px; + box-sizing: border-box; + box-shadow: none; + width: 100%; + height: 65px; + font-size: 1.55em; + color: #FFF; + font-weight: 600; + font-family: inherit; + transition: background-color 0.2s ease-out; +} + +form button:hover, +form button:active { + background-color: #217093; +} + +form .inputGroup1 .helper { + position: absolute; + z-index: 1; + font-family: inherit; +} + +form .inputGroup1 .helper1 { + top: 0; + left: 0; + transform: translate(1em, 2.2em) scale(1); + transform-origin: 0 0; + color: #217093; + font-size: 1.55em; + font-weight: 400; + opacity: 0.65; + pointer-events: none; + transition: transform 0.2s ease-out, opacity 0.2s linear; +} + +form .inputGroup1.focusWithText .helper { + transform: translate(1em, 1.55em) scale(0.6); + opacity: 1; +} + +form .inputGroup2 input[type=password] { + padding: 0.4em 1em 0.5em; +} + +form .inputGroup2 input[type=text] { + padding: 0.025em 1em 0; +} + +form .inputGroup2 #showPasswordToggle { + display: block; + padding: 0 0 0 1.45em; + position: absolute; + top: 0.25em; + right: 0; + font-size: 1em; +} + +form .inputGroup2 #showPasswordToggle input { + position: absolute; + z-index: -1; + opacity: 0; +} + +form .inputGroup2 #showPasswordToggle .indicator { + position: absolute; + top: 0; + left: 0; + height: 0.85em; + width: 0.85em; + background-color: #f3fafd; + border: solid 2px #217093; + border-radius: 3px; +} + +form .inputGroup2 #showPasswordToggle .indicator:after { + content: ""; + position: absolute; + left: 0.25em; + top: 0.025em; + width: 0.2em; + height: 0.5em; + border: solid #217093; + border-width: 0 3px 3px 0; + transform: rotate(45deg); + visibility: hidden; +} + +form .inputGroup2 #showPasswordToggle input:checked~.indicator:after { + visibility: visible; +} + +form .inputGroup2 #showPasswordToggle input:focus~.indicator, +form .inputGroup2 #showPasswordToggle input:hover~.indicator { + border-color: #4eb8dd; +} + +form .inputGroup2 #showPasswordToggle input:disabled~.indicator { + opacity: 0.5; +} + +form .inputGroup2 #showPasswordToggle input:disabled~.indicator:after { + visibility: hidden; +} \ No newline at end of file diff --git a/assets/html_files/breadcrumbs.html b/assets/html_files/breadcrumbs.html index 46563ffa..6e6f68b2 100644 --- a/assets/html_files/breadcrumbs.html +++ b/assets/html_files/breadcrumbs.html @@ -62,7 +62,7 @@
Breadcrumbs
diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 4bf445bc..5ce5d806 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -209,6 +209,19 @@

Hover Button

+
+

Impossible Toggle Button

+
+ + + +
+
+ + + +
+

Jelly Button

@@ -248,6 +261,19 @@

Mask Hover Button

+
+

Naughty Submit Button

+
+ + + +
+
+ + + +
+

Neon Button

@@ -339,6 +365,19 @@

Thin Button

+
+

Toggle Animated Button

+
+ + + +
+
+ + + +
+

Toggle Button

diff --git a/assets/html_files/cards.html b/assets/html_files/cards.html index ebd4fdb7..8b8a232a 100644 --- a/assets/html_files/cards.html +++ b/assets/html_files/cards.html @@ -62,7 +62,7 @@
Cards
diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html index 0f8be13f..11b82116 100644 --- a/assets/html_files/carousels.html +++ b/assets/html_files/carousels.html @@ -62,7 +62,7 @@
Carousels
diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index a07da054..6bf6f99b 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -62,7 +62,7 @@
Forms
@@ -365,6 +365,19 @@

Torch Effect Login Form

+
+

Yeti Login Form

+
+ + + +
+
+ + + +
+
diff --git a/assets/html_files/navigation-bars.html b/assets/html_files/navigation-bars.html index a5024f33..4cf36e4d 100644 --- a/assets/html_files/navigation-bars.html +++ b/assets/html_files/navigation-bars.html @@ -62,7 +62,7 @@
Navigation Bars
diff --git a/assets/html_files/search-bars.html b/assets/html_files/search-bars.html index 64954844..2e591bd4 100644 --- a/assets/html_files/search-bars.html +++ b/assets/html_files/search-bars.html @@ -62,7 +62,7 @@
Search Bars
diff --git a/style.css b/style.css index 664f49cc..76069744 100644 --- a/style.css +++ b/style.css @@ -23,7 +23,7 @@ } ::-webkit-scrollbar { - width: 10px; + width: 8px; } ::-webkit-scrollbar-track { @@ -344,6 +344,10 @@ nav li:hover { color: #df87ef; } +nav a { + font-weight: bolder; +} + .logo { font-size: 2.3rem; font-weight: 700; @@ -728,6 +732,12 @@ footer p a { } } +@media (min-width: 901px) and (max-width: 990px) { + nav a { + font-size: 1.8rem; + } +} + @media (max-width: 925px) { .comp-section { flex-direction: column; @@ -750,6 +760,26 @@ footer p a { } } +@media (min-width: 851px) and (max-width: 900px) { + nav a { + font-size: 1.8rem; + } + + nav ul { + gap: 1.5rem; + } +} + +@media (min-width: 768px) and (max-width: 851px) { + nav a { + font-size: 1.7rem; + } + + nav ul { + gap: 1rem; + } +} + @media (max-width: 786px) { .comp-section { flex-direction: column; @@ -808,16 +838,16 @@ footer p a { .nav-menu { position: fixed; left: -100%; - top: 5rem; + top: 5.3rem; flex-direction: column; background-color: rgba(5, 5, 5, 0.904); backdrop-filter: blur(6.5px); width: 100%; - border-radius: 10px; text-align: center; transition: 0.3s; box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); height: 100vh; + gap: 50px; } .nav-menu .nav-item.active .nav-link { @@ -841,7 +871,7 @@ footer p a { .nav-menu.active { left: 0; - gap: 10px; + gap: 50px; } .nav-item {