From 8f6c5d66a20ab52b55b33462c45dd6bc6ce48b03 Mon Sep 17 00:00:00 2001 From: alonecandies Date: Mon, 25 Nov 2024 15:30:59 +0700 Subject: [PATCH] feat: moveable create meme items --- assets/css/global.css | 1632 ++++++++++++++++++++++++++++++-------- assets/js/create-meme.js | 423 +++++----- assets/js/img-editor.js | 454 +++++++++++ create-meme.html | 447 +++++++---- 4 files changed, 2248 insertions(+), 708 deletions(-) create mode 100644 assets/js/img-editor.js diff --git a/assets/css/global.css b/assets/css/global.css index 43c9986..319a571 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -1,468 +1,1404 @@ @font-face { - font-family: 'CCWildWordsLower'; - src: url('../fonts/CCWildWordsLower-Italic.eot'); - src: local('CCWildWordsLower Italic'), local('CCWildWordsLower-Italic'), - url('../fonts/CCWildWordsLower-Italic.eot?#iefix') format('embedded-opentype'), - url('../fonts/CCWildWordsLower-Italic.woff2') format('woff2'), - url('../fonts/CCWildWordsLower-Italic.woff') format('woff'), - url('../fonts/CCWildWordsLower-Italic.ttf') format('truetype'); - font-weight: normal; - font-style: italic; + font-family: "CCWildWordsLower"; + src: url("../fonts/CCWildWordsLower-Italic.eot"); + src: local("CCWildWordsLower Italic"), local("CCWildWordsLower-Italic"), + url("../fonts/CCWildWordsLower-Italic.eot?#iefix") format("embedded-opentype"), + url("../fonts/CCWildWordsLower-Italic.woff2") format("woff2"), + url("../fonts/CCWildWordsLower-Italic.woff") format("woff"), + url("../fonts/CCWildWordsLower-Italic.ttf") format("truetype"); + font-weight: normal; + font-style: italic; } @font-face { - font-family: 'CCWildWordsLower'; - src: url('../fonts/CCWildWordsLower-Bold.eot'); - src: local('CCWildWordsLower Bold'), local('CCWildWordsLower-Bold'), - url('../fonts/CCWildWordsLower-Bold.eot?#iefix') format('embedded-opentype'), - url('../fonts/CCWildWordsLower-Bold.woff2') format('woff2'), - url('../fonts/CCWildWordsLower-Bold.woff') format('woff'), - url('../fonts/CCWildWordsLower-Bold.ttf') format('truetype'); - font-weight: bold; - font-style: normal; + font-family: "CCWildWordsLower"; + src: url("../fonts/CCWildWordsLower-Bold.eot"); + src: local("CCWildWordsLower Bold"), local("CCWildWordsLower-Bold"), + url("../fonts/CCWildWordsLower-Bold.eot?#iefix") format("embedded-opentype"), + url("../fonts/CCWildWordsLower-Bold.woff2") format("woff2"), + url("../fonts/CCWildWordsLower-Bold.woff") format("woff"), + url("../fonts/CCWildWordsLower-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; } @font-face { - font-family: 'CCWildWordsLower'; - src: url('../fonts/CCWildWordsLower-BoldItalic.eot'); - src: local('CCWildWordsLower Bold Italic'), local('CCWildWordsLower-BoldItalic'), - url('../fonts/CCWildWordsLower-BoldItalic.eot?#iefix') format('embedded-opentype'), - url('../fonts/CCWildWordsLower-BoldItalic.woff2') format('woff2'), - url('../fonts/CCWildWordsLower-BoldItalic.woff') format('woff'), - url('../fonts/CCWildWordsLower-BoldItalic.ttf') format('truetype'); - font-weight: bold; - font-style: italic; + font-family: "CCWildWordsLower"; + src: url("../fonts/CCWildWordsLower-BoldItalic.eot"); + src: local("CCWildWordsLower Bold Italic"), local("CCWildWordsLower-BoldItalic"), + url("../fonts/CCWildWordsLower-BoldItalic.eot?#iefix") format("embedded-opentype"), + url("../fonts/CCWildWordsLower-BoldItalic.woff2") format("woff2"), + url("../fonts/CCWildWordsLower-BoldItalic.woff") format("woff"), + url("../fonts/CCWildWordsLower-BoldItalic.ttf") format("truetype"); + font-weight: bold; + font-style: italic; } @font-face { - font-family: 'CCWildWordsLower'; - src: url('../fonts/CCWildWordsLower-Regular.eot'); - src: local('CCWildWordsLower Regular'), local('CCWildWordsLower-Regular'), - url('../fonts/CCWildWordsLower-Regular.eot?#iefix') format('embedded-opentype'), - url('../fonts/CCWildWordsLower-Regular.woff2') format('woff2'), - url('../fonts/CCWildWordsLower-Regular.woff') format('woff'), - url('../fonts/CCWildWordsLower-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; + font-family: "CCWildWordsLower"; + src: url("../fonts/CCWildWordsLower-Regular.eot"); + src: local("CCWildWordsLower Regular"), local("CCWildWordsLower-Regular"), + url("../fonts/CCWildWordsLower-Regular.eot?#iefix") format("embedded-opentype"), + url("../fonts/CCWildWordsLower-Regular.woff2") format("woff2"), + url("../fonts/CCWildWordsLower-Regular.woff") format("woff"), + url("../fonts/CCWildWordsLower-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } :root { - - /* Colors */ - - --blue-dark: #0A141A; - --yellow: #FED519; - --green: #31AB00; - --blue: #206BFF; - --blue-light: #B8CBF2; - --purple: #AB26FF; - --highlight: #FED519; - --mono-white: #fff; - --mono-disabled-grey: #ccc; - --mono-grey: #707070; - --mono-pureblack: #000; - - /* Fonts */ - - --font-family: 'CCWildWordsLower', Arial, sans-serif; - - --font-icons: 'icons'; - /* --h1-title: 800 4rem/4.8rem "Inter", sans-serif; + /* Colors */ + + --blue-dark: #0a141a; + --yellow: #fed519; + --green: #31ab00; + --blue: #206bff; + --blue-light: #b8cbf2; + --purple: #ab26ff; + --highlight: #fed519; + --mono-white: #fff; + --mono-disabled-grey: #ccc; + --mono-grey: #707070; + --mono-pureblack: #000; + + /* Fonts */ + + --font-family: "CCWildWordsLower", Arial, sans-serif; + + --font-icons: "icons"; + /* --h1-title: 800 4rem/4.8rem "Inter", sans-serif; --h3-title: 700 2.4rem/3.2rem "Inter", sans-serif; --h4-title: 700 1.6rem/2.2rem "Inter", sans-serif; --h5-title: 600 1.4rem/2rem "Inter", sans-serif; --normal-text: 400 1.6rem/2.4rem "Inter", sans-serif; */ - --button-s: italic 700 1.2rem/1.8rem "CCWildWordsLower", sans-serif; - --button-m: italic 700 1.4rem/2rem "CCWildWordsLower", sans-serif; - --button-l: italic 700 1.8rem/2.4rem "CCWildWordsLower", sans-serif; - - /* Grid */ + --button-s: italic 700 1.2rem/1.8rem "CCWildWordsLower", sans-serif; + --button-m: italic 700 1.4rem/2rem "CCWildWordsLower", sans-serif; + --button-l: italic 700 1.8rem/2.4rem "CCWildWordsLower", sans-serif; - --cart-list-grid: 1.4fr 1fr 1fr 1fr; + /* Grid */ + --cart-list-grid: 1.4fr 1fr 1fr 1fr; } -*, :after, :before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; user-select:none; -webkit-user-select:none; } +*, +:after, +:before { + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + user-select: none; + -webkit-user-select: none; +} -html, body { width:100%; height: 100%; } -html { /**/ font-size: 10px; /**/ overflow: hidden; touch-action: manipulation; } -body { overflow:hidden; font-size: 1rem; font-weight: 400; font-family: var(--font-family); color:#1c1b1b; background: var(--blue-dark); } +html, +body { + width: 100%; + height: 100%; +} +html { + /**/ + font-size: 10px; /**/ + overflow: hidden; + touch-action: manipulation; +} +body { + overflow: hidden; + font-size: 1rem; + font-weight: 400; + font-family: var(--font-family); + color: #1c1b1b; + background: var(--blue-dark); +} /* body.blocked-screen { pointer-events: none; } body.blocked-screen button.trigger-blocked-screen { pointer-events:all; } */ -a { color: var(--primary-blue); text-decoration: none; } -strong { font-weight:700; } -p { color: var(--mono-pureblack); font: var(--normal-text); } -ul, li { list-style-type:none; } -h1, h2, h3, h4, h5, h6 { color: var(--mono-white); font-weight: bold; font-family: var(--font-family); } +a { + color: var(--primary-blue); + text-decoration: none; +} +strong { + font-weight: 700; +} +p { + color: var(--mono-pureblack); + font: var(--normal-text); +} +ul, +li { + list-style-type: none; +} +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--mono-white); + font-weight: bold; + font-family: var(--font-family); +} /* *************************************************************************************************** */ /* *************************************************************************************************** */ -.wrapper { width:100%; height: 100%; display: flex; flex-direction: column; position: relative; } +.wrapper { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + position: relative; +} -.home-page .wrapper, -.home-page .header, -.home-page .footer { opacity:0; } +.home-page .wrapper, +.home-page .header, +.home-page .footer { + opacity: 0; +} /* *************************************************************************************************** */ /* *************************************************************************************************** */ -.header { width: 100%; height:10.8rem; position: fixed; top:0; left:0; z-index:100; display: flex; align-items: center; flex-direction: row; justify-content: space-between; gap: 4.8rem; padding: 0; } +.header { + width: 100%; + height: 10.8rem; + position: fixed; + top: 0; + left: 0; + z-index: 100; + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + gap: 4.8rem; + padding: 0; +} .header-left, -.header-right { width:auto; height:100%; display: flex; gap:1.6rem; align-items: center; padding-left:2.4rem; padding-right:2.4rem; } -.header-right { justify-content: end; } +.header-right { + width: auto; + height: 100%; + display: flex; + gap: 1.6rem; + align-items: center; + padding-left: 2.4rem; + padding-right: 2.4rem; +} +.header-right { + justify-content: end; +} -.header-left { padding-right:9rem; gap:0; background: transparent url(../images/layout/logo-background.svg) no-repeat 100% 50% / auto 100%; } +.header-left { + padding-right: 9rem; + gap: 0; + background: transparent url(../images/layout/logo-background.svg) no-repeat 100% 50% / auto 100%; +} -.logo { width:7.2rem; height:7.2rem; margin-top:-.6rem; border-radius:50%; border:.4rem solid var(--blue-dark); box-shadow: .3rem .3rem 0 var(--mono-white); overflow:hidden; } -.logo img { width:100%; height:100%; } +.logo { + width: 7.2rem; + height: 7.2rem; + margin-top: -0.6rem; + border-radius: 50%; + border: 0.4rem solid var(--blue-dark); + box-shadow: 0.3rem 0.3rem 0 var(--mono-white); + overflow: hidden; +} +.logo img { + width: 100%; + height: 100%; +} -.slap-message { display:none; padding-left:2.4rem; color: var(--yellow); font: italic bold 2.1rem/2.4rem var(--font-family); text-transform: uppercase; text-shadow: -.4vh -.4vh 0 rgba(10,20,26,.9), .4vh -.4vh 0 rgba(10,20,26,.9), .4vh .4vh 0 rgba(10,20,26,.9), .4vh .4vh 0 rgba(10,20,26,.9), .4vh .4vh 0 rgba(10,20,26,.9), .4vh .4vh 0 rgba(10,20,26,.9), .4vh .4vh 0 rgba(10,20,26,.9), .4vh .4vh 0 rgba(10,20,26,.9), .4vh .4vh 0 rgba(10,20,26,.9), -.4vh .4vh 0 rgba(10,20,26,.9), -.4vh .4vh 0 rgba(10,20,26,.9), -.4vh .4vh 0 rgba(10,20,26,.9), -.4vh .4vh 0 rgba(10,20,26,.9), 0 -.4vh 0 rgba(10,20,26,.9), 0 .4vh 0 rgba(10,20,26,.9), -.2vh -.2vh 0 rgba(10,20,26,.9), .2vh -.2vh 0 rgba(10,20,26,.9), .2vh .2vh 0 rgba(10,20,26,.9), -.2vh .2vh 0 rgba(10,20,26,.9), 0 -.2vh 0 rgba(10,20,26,.9), 0 .2vh 0 rgba(10,20,26,.9), 0 0 0 rgba(10,20,26,.9), .6vh 0vh 0 rgba(255,255,255,.9), .6vh .3vh 0 rgba(255,255,255,.9), .6vh .6vh 0 rgba(255,255,255,.9); } +.slap-message { + display: none; + padding-left: 2.4rem; + color: var(--yellow); + font: italic bold 2.1rem/2.4rem var(--font-family); + text-transform: uppercase; + text-shadow: -0.4vh -0.4vh 0 rgba(10, 20, 26, 0.9), 0.4vh -0.4vh 0 rgba(10, 20, 26, 0.9), + 0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), 0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), + 0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), 0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), + 0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), 0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), + 0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), -0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), + -0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), -0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), + -0.4vh 0.4vh 0 rgba(10, 20, 26, 0.9), 0 -0.4vh 0 rgba(10, 20, 26, 0.9), + 0 0.4vh 0 rgba(10, 20, 26, 0.9), -0.2vh -0.2vh 0 rgba(10, 20, 26, 0.9), + 0.2vh -0.2vh 0 rgba(10, 20, 26, 0.9), 0.2vh 0.2vh 0 rgba(10, 20, 26, 0.9), + -0.2vh 0.2vh 0 rgba(10, 20, 26, 0.9), 0 -0.2vh 0 rgba(10, 20, 26, 0.9), + 0 0.2vh 0 rgba(10, 20, 26, 0.9), 0 0 0 rgba(10, 20, 26, 0.9), + 0.6vh 0vh 0 rgba(255, 255, 255, 0.9), 0.6vh 0.3vh 0 rgba(255, 255, 255, 0.9), + 0.6vh 0.6vh 0 rgba(255, 255, 255, 0.9); +} .chain-address, -.main-menu { width:auto; display: flex; gap:1.6rem; align-items: center; padding:1.2rem 1.4rem; border-radius: 9.6rem; background-color: rgba(10,20,26,.9); } +.main-menu { + width: auto; + display: flex; + gap: 1.6rem; + align-items: center; + padding: 1.2rem 1.4rem; + border-radius: 9.6rem; + background-color: rgba(10, 20, 26, 0.9); +} -.chain-address { gap:1.6rem; padding-right:2.4rem; } -.chain-address img { width:4.8rem; height: 4.8rem; border-radius: 50%; } -.chain-address span { color:var(--mono-white); font: bold 1.4rem/2rem var(--font-family); } +.chain-address { + gap: 1.6rem; + padding-right: 2.4rem; +} +.chain-address img { + width: 4.8rem; + height: 4.8rem; + border-radius: 50%; +} +.chain-address span { + color: var(--mono-white); + font: bold 1.4rem/2rem var(--font-family); +} -.button.menu-btn { display:none; width:5.6rem; height:5.6rem; position:fixed; top:1rem; right:1.2rem; padding:1rem!important; z-index:1000; overflow:visible; border: 4px solid rgba(10,20,26,1); border-radius: 50%; cursor:pointer; } -.menu-btn svg { width:100%; height:100%; } -.menu-btn path { fill:var(--blue-yellow); transition: .5s fill ease-in-out; } -.menu-btn.active path { fill:var(--yellow); } +.button.menu-btn { + display: none; + width: 5.6rem; + height: 5.6rem; + position: fixed; + top: 1rem; + right: 1.2rem; + padding: 1rem !important; + z-index: 1000; + overflow: visible; + border: 4px solid rgba(10, 20, 26, 1); + border-radius: 50%; + cursor: pointer; +} +.menu-btn svg { + width: 100%; + height: 100%; +} +.menu-btn path { + fill: var(--blue-yellow); + transition: 0.5s fill ease-in-out; +} +.menu-btn.active path { + fill: var(--yellow); +} /* *************************************************************************************************** */ /* *************************************************************************************************** */ -.footer { width: 100%; height:7.2rem; position: fixed; bottom:0; left:0; z-index:90; display: flex; align-items: center; justify-content: end; /*justify-content: space-between;*/ gap: 4.8rem; } +.footer { + width: 100%; + height: 7.2rem; + position: fixed; + bottom: 0; + left: 0; + z-index: 90; + display: flex; + align-items: center; + justify-content: end; /*justify-content: space-between;*/ + gap: 4.8rem; +} -.follow-us { width:auto; height:7.2rem; display: flex; gap:2.4rem; align-items: center; justify-content: end; padding-left:8.8rem; padding-right:2.4rem; background: transparent url(../images/layout/follow-background.svg) no-repeat 0% 50% / auto 100%; } -.follow-icons { width:auto; height:100%; display: flex; gap:1.2rem; align-items: center; justify-content: center; } +.follow-us { + width: auto; + height: 7.2rem; + display: flex; + gap: 2.4rem; + align-items: center; + justify-content: end; + padding-left: 8.8rem; + padding-right: 2.4rem; + background: transparent url(../images/layout/follow-background.svg) no-repeat 0% 50% / auto 100%; +} +.follow-icons { + width: auto; + height: 100%; + display: flex; + gap: 1.2rem; + align-items: center; + justify-content: center; +} -.follow-icon { width:4.4rem; height:4.4rem; } -.follow-icon svg { width:100%; height: 100%; overflow: visible; transition: transform .3s ease-in-out , scale .3s ease-in-out;} +.follow-icon { + width: 4.4rem; + height: 4.4rem; +} +.follow-icon svg { + width: 100%; + height: 100%; + overflow: visible; + transition: transform 0.3s ease-in-out, scale 0.3s ease-in-out; +} /* .follow-icon:hover svg { scale:1.05; } */ -.follow-icon:hover svg { transform: scale3d(1.05,1.05,1.05); } -.follow-icon path { transition: fill .3s ease-in-out, transform .3s ease-in-out, scale .3s ease-in-out; } -.follow-icon .white { fill: var(--mono-white); } -.follow-icon .black { fill: var(--mono-pureblack); } -.follow-icon .primary-color { fill: var(--yellow); } +.follow-icon:hover svg { + transform: scale3d(1.05, 1.05, 1.05); +} +.follow-icon path { + transition: fill 0.3s ease-in-out, transform 0.3s ease-in-out, scale 0.3s ease-in-out; +} +.follow-icon .white { + fill: var(--mono-white); +} +.follow-icon .black { + fill: var(--mono-pureblack); +} +.follow-icon .primary-color { + fill: var(--yellow); +} -.follow-icon:hover .white { fill: var(--yellow); } -.follow-icon:hover .primary-color { fill: var(--mono-white); } +.follow-icon:hover .white { + fill: var(--yellow); +} +.follow-icon:hover .primary-color { + fill: var(--mono-white); +} -.follow-us strong { color:var(--yellow); font: bold 1.8rem/2.2rem var(--font-family); text-transform: uppercase; transition: color .3s ease-in-out; } -.follow-us:hover strong { color:var(--mono-white); } +.follow-us strong { + color: var(--yellow); + font: bold 1.8rem/2.2rem var(--font-family); + text-transform: uppercase; + transition: color 0.3s ease-in-out; +} +.follow-us:hover strong { + color: var(--mono-white); +} /* *************************************************************************************************** */ /* *************************************************************************************************** */ -.slap-section { width:100%; height:100%; position:relative; } +.slap-section { + width: 100%; + height: 100%; + position: relative; +} .slap-background, -.slap-backgrounds { width:100%; height: 100%; position:relative; background: transparent no-repeat 50% 50% / auto 120%; } -.slap-background { position:absolute; top:0; left:0; } +.slap-backgrounds { + width: 100%; + height: 100%; + position: relative; + background: transparent no-repeat 50% 50% / auto 120%; +} +.slap-background { + position: absolute; + top: 0; + left: 0; +} -.slap-backgrounds { background-image: url(../images/slap-section/0.jpg), url(../images/slap-section/0.png?v=1); } -.slap-backgrounds .slap-background { opacity:0; transition: opacity .2s ease-in-out; } -.slap-background-1 { background-image: url(../images/slap-section/1.jpg), url(../images/slap-section/1.png?v=1); } -.slap-background-2 { background-image: url(../images/slap-section/2.jpg), url(../images/slap-section/2.png?v=1); } -.slap-background-3 { background-image: url(../images/slap-section/3.jpg), url(../images/slap-section/3.png?v=1); } -.slap-background-4 { background-image: url(../images/slap-section/4.jpg), url(../images/slap-section/4.png?v=1); } +.slap-backgrounds { + background-image: url(../images/slap-section/0.jpg), url(../images/slap-section/0.png?v=1); +} +.slap-backgrounds .slap-background { + opacity: 0; + transition: opacity 0.2s ease-in-out; +} +.slap-background-1 { + background-image: url(../images/slap-section/1.jpg), url(../images/slap-section/1.png?v=1); +} +.slap-background-2 { + background-image: url(../images/slap-section/2.jpg), url(../images/slap-section/2.png?v=1); +} +.slap-background-3 { + background-image: url(../images/slap-section/3.jpg), url(../images/slap-section/3.png?v=1); +} +.slap-background-4 { + background-image: url(../images/slap-section/4.jpg), url(../images/slap-section/4.png?v=1); +} /* *************************************************************************************************** */ -.slap-leaderboard { width:100%; max-width:44rem; height:6.4rem; position: absolute; left:2.4rem; bottom: 1.6rem; z-index:91; border-radius: 5.6rem; background-color: rgba(10,20,26,.9); transition: height .3s ease-in-out; } -.slap-leaderboard.active { height:auto; border-radius: 2.4rem; } +.slap-leaderboard { + width: 100%; + max-width: 44rem; + height: 6.4rem; + position: absolute; + left: 2.4rem; + bottom: 1.6rem; + z-index: 91; + border-radius: 5.6rem; + background-color: rgba(10, 20, 26, 0.9); + transition: height 0.3s ease-in-out; +} +.slap-leaderboard.active { + height: auto; + border-radius: 2.4rem; +} -.sl-header { width:100%; padding: 2rem 2.4rem; display:flex; align-items: center; gap:1.6rem; cursor: pointer; } -.sl-header h3 { width: 100%; fill: 1; display:flex; align-items: center; gap:2.4rem; justify-content: space-between; color: var(--mono-white); text-transform: uppercase; font: bold 2.1rem/2.6rem var(--font-family); } -.sl-header h3 strong { color: var(--yellow); text-align: right; } +.sl-header { + width: 100%; + padding: 2rem 2.4rem; + display: flex; + align-items: center; + gap: 1.6rem; + cursor: pointer; +} +.sl-header h3 { + width: 100%; + fill: 1; + display: flex; + align-items: center; + gap: 2.4rem; + justify-content: space-between; + color: var(--mono-white); + text-transform: uppercase; + font: bold 2.1rem/2.6rem var(--font-family); +} +.sl-header h3 strong { + color: var(--yellow); + text-align: right; +} .sl-header h3 span, -.sl-header h3 i { color: var(--mono-white); transition: color .3s ease-in-out; } -.active .sl-header h3 span { color: var(--yellow)!important; } +.sl-header h3 i { + color: var(--mono-white); + transition: color 0.3s ease-in-out; +} +.active .sl-header h3 span { + color: var(--yellow) !important; +} -.icon-arrow-bottom { width:2.4rem; height: 2.4rem; position: relative; } -.icon-arrow-bottom svg { width:100%; height: 100%; transform-origin: 50% 50%; transition: transform .3s ease-in-out; } -.icon-arrow-bottom svg path { fill: var(--mono-white); transform-origin: 50% 50%; transition: transform .3s ease-in-out, fill .3s ease-in-out; } -.active .icon-arrow-bottom svg path { fill: var(--yellow)!important; transform: rotate3d(1,0,0,180deg); } +.icon-arrow-bottom { + width: 2.4rem; + height: 2.4rem; + position: relative; +} +.icon-arrow-bottom svg { + width: 100%; + height: 100%; + transform-origin: 50% 50%; + transition: transform 0.3s ease-in-out; +} +.icon-arrow-bottom svg path { + fill: var(--mono-white); + transform-origin: 50% 50%; + transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out; +} +.active .icon-arrow-bottom svg path { + fill: var(--yellow) !important; + transform: rotate3d(1, 0, 0, 180deg); +} -.sl-body { padding: 0 2.4rem; transition: padding .3s ease-in-out; } -.active .sl-body { padding:1.2rem 2.4rem 2.4rem; } +.sl-body { + padding: 0 2.4rem; + transition: padding 0.3s ease-in-out; +} +.active .sl-body { + padding: 1.2rem 2.4rem 2.4rem; +} -.sl-body h4 { height: 0; opacity: 0; margin-bottom: 1.6rem; color: var(--mono-white); text-transform: uppercase; font: italic bold 1.8rem/2.4rem var(--font-family); overflow:hidden; transition: height .3s ease-in-out, opacity .3s ease-in-out; } -.sl-body ul { width: 100%; height: 0; opacity: 0; display: flex; gap:.2rem; flex-direction: column; overflow:hidden; transition: height .3s ease-in-out, opacity .3s ease-in-out; } +.sl-body h4 { + height: 0; + opacity: 0; + margin-bottom: 1.6rem; + color: var(--mono-white); + text-transform: uppercase; + font: italic bold 1.8rem/2.4rem var(--font-family); + overflow: hidden; + transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out; +} +.sl-body ul { + width: 100%; + height: 0; + opacity: 0; + display: flex; + gap: 0.2rem; + flex-direction: column; + overflow: hidden; + transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out; +} .active .sl-body h4, -.active .sl-body ul { height: auto; opacity:1; } +.active .sl-body ul { + height: auto; + opacity: 1; +} -.sl-body li { width: 100%; min-height: 6.4rem; padding:.8rem 1.2rem; border-radius: .64rem; display:flex; gap:1.6rem; align-items: center; justify-content: flex-start; color: var(--mono-white); text-transform: uppercase; font: italic bold 1.6rem/2rem var(--font-family); } -.sl-body li.pepe { color: var(--green); } -.sl-body li.andy { color: var(--blue-light); } -.sl-body li.brett { color: var(--blue); } -.sl-body li.wolf { color: var(--purple); } -.sl-body li:nth-child(2n) { background-color: rgba(255,255,255,.05); } -.sl-body li span { text-align: right; } -.sl-body li span:first-of-type { width: 5.6rem; } -.sl-body li strong { width:100%; } +.sl-body li { + width: 100%; + min-height: 6.4rem; + padding: 0.8rem 1.2rem; + border-radius: 0.64rem; + display: flex; + gap: 1.6rem; + align-items: center; + justify-content: flex-start; + color: var(--mono-white); + text-transform: uppercase; + font: italic bold 1.6rem/2rem var(--font-family); +} +.sl-body li.pepe { + color: var(--green); +} +.sl-body li.andy { + color: var(--blue-light); +} +.sl-body li.brett { + color: var(--blue); +} +.sl-body li.wolf { + color: var(--purple); +} +.sl-body li:nth-child(2n) { + background-color: rgba(255, 255, 255, 0.05); +} +.sl-body li span { + text-align: right; +} +.sl-body li span:first-of-type { + width: 5.6rem; +} +.sl-body li strong { + width: 100%; +} -.sl-body img { width:4.8rem; height: 4.8rem; border-radius: 50%; } +.sl-body img { + width: 4.8rem; + height: 4.8rem; + border-radius: 50%; +} /* *************************************************************************************************** */ -.slap-actions { width:100%; height:100%; position: absolute; top:0; left: 0; z-index:89; } -.slap-button { outline: none; width:36vh; height: 55vh; position:absolute; left:50%; bottom:0; transform: translate(-50%, 0); /*background: rgba(10,20,26,.3);*/ border:none; background: transparent; cursor: pointer; } +.slap-actions { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 89; +} +.slap-button { + outline: none; + width: 36vh; + height: 55vh; + position: absolute; + left: 50%; + bottom: 0; + transform: translate(-50%, 0); /*background: rgba(10,20,26,.3);*/ + border: none; + background: transparent; + cursor: pointer; +} -.slap-button#slap-button-1 { height: 52vh!important; margin-left:-65vh; } -.slap-button#slap-button-2 { height: 58vh!important; margin-left:-29vh; } -.slap-button#slap-button-3 { margin-left:18vh; } -.slap-button#slap-button-4 { margin-left:60vh; } +.slap-button#slap-button-1 { + height: 52vh !important; + margin-left: -65vh; +} +.slap-button#slap-button-2 { + height: 58vh !important; + margin-left: -29vh; +} +.slap-button#slap-button-3 { + margin-left: 18vh; +} +.slap-button#slap-button-4 { + margin-left: 60vh; +} /* *************************************************************************************************** */ -.slap-counter { width:auto; position:absolute; bottom: 3.2rem; left:50%; transform: translate(-50%,0); text-align: center; display: flex; flex-direction: column; gap:-1rem; } +.slap-counter { + width: auto; + position: absolute; + bottom: 3.2rem; + left: 50%; + transform: translate(-50%, 0); + text-align: center; + display: flex; + flex-direction: column; + gap: -1rem; +} -.sc-title, .sc-subtitle, .sc-no { font: italic bold var(--font-family); text-transform: uppercase; text-shadow: -.6vh -.6vh 0 rgba(10,20,26,.9), .6vh -.6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), -.6vh .6vh 0 rgba(10,20,26,.9), -.6vh .6vh 0 rgba(10,20,26,.9), -.6vh .6vh 0 rgba(10,20,26,.9), -.6vh .6vh 0 rgba(10,20,26,.9), 0 -.6vh 0 rgba(10,20,26,.9), 0 .6vh 0 rgba(10,20,26,.9), -.3vh -.3vh 0 rgba(10,20,26,.9), .3vh -.3vh 0 rgba(10,20,26,.9), .3vh .3vh 0 rgba(10,20,26,.9), -.3vh .3vh 0 rgba(10,20,26,.9), 0 -.3vh 0 rgba(10,20,26,.9), 0 .3vh 0 rgba(10,20,26,.9), 0 0 0 rgba(10,20,26,.9), .9vh 0vh 0 rgba(255,255,255,.9), .8vh .4vh 0 rgba(255,255,255,.9), .8vh .8vh 0 rgba(255,255,255,.9); /*-webkit-text-stroke: .8rem rgba(10,20,26,.9); text-shadow: -.6rem -.6rem 0 rgba(10,20,26,.9), .6rem -.6rem 0 rgba(10,20,26,.9), -.6rem .6rem 0 rgba(10,20,26,.9), .6rem .6rem 0 rgba(10,20,26,.9), 0 .6rem 0 rgba(10,20,26,.9), .6rem 0 0 rgba(10,20,26,.9), 0 -.6rem 0 rgba(10,20,26,.9), -.6rem 0 0 rgba(10,20,26,.9);*/ } +.sc-title, +.sc-subtitle, +.sc-no { + font: italic bold var(--font-family); + text-transform: uppercase; + text-shadow: -0.6vh -0.6vh 0 rgba(10, 20, 26, 0.9), 0.6vh -0.6vh 0 rgba(10, 20, 26, 0.9), + 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), -0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + -0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), -0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + -0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), 0 -0.6vh 0 rgba(10, 20, 26, 0.9), + 0 0.6vh 0 rgba(10, 20, 26, 0.9), -0.3vh -0.3vh 0 rgba(10, 20, 26, 0.9), + 0.3vh -0.3vh 0 rgba(10, 20, 26, 0.9), 0.3vh 0.3vh 0 rgba(10, 20, 26, 0.9), + -0.3vh 0.3vh 0 rgba(10, 20, 26, 0.9), 0 -0.3vh 0 rgba(10, 20, 26, 0.9), + 0 0.3vh 0 rgba(10, 20, 26, 0.9), 0 0 0 rgba(10, 20, 26, 0.9), + 0.9vh 0vh 0 rgba(255, 255, 255, 0.9), 0.8vh 0.4vh 0 rgba(255, 255, 255, 0.9), + 0.8vh 0.8vh 0 rgba(255, 255, 255, 0.9); /*-webkit-text-stroke: .8rem rgba(10,20,26,.9); text-shadow: -.6rem -.6rem 0 rgba(10,20,26,.9), .6rem -.6rem 0 rgba(10,20,26,.9), -.6rem .6rem 0 rgba(10,20,26,.9), .6rem .6rem 0 rgba(10,20,26,.9), 0 .6rem 0 rgba(10,20,26,.9), .6rem 0 0 rgba(10,20,26,.9), 0 -.6rem 0 rgba(10,20,26,.9), -.6rem 0 0 rgba(10,20,26,.9);*/ +} -.sc-title { font-size: 9.6vh; line-height: 9.6vh; color: var(--yellow); } -.sc-subtitle { margin-top:-1vh; margin-left:-1vh; font-size: 6.4vh; line-height: 6.4vh; color: var(--mono-white); } -.sc-no { margin-top:-1.5vh; margin-left:-2.5vh; font-size: 10.8vh; line-height: 10.8vh; color: var(--yellow); } +.sc-title { + font-size: 9.6vh; + line-height: 9.6vh; + color: var(--yellow); +} +.sc-subtitle { + margin-top: -1vh; + margin-left: -1vh; + font-size: 6.4vh; + line-height: 6.4vh; + color: var(--mono-white); +} +.sc-no { + margin-top: -1.5vh; + margin-left: -2.5vh; + font-size: 10.8vh; + line-height: 10.8vh; + color: var(--yellow); +} -.mobile-portrait { display:none; width:100%; height: 100%; position:absolute; bottom: 0; left:0; transform: translate(0, 0); text-align: center; flex-direction: column; gap:-1rem; align-items: center; justify-content: center; } +.mobile-portrait { + display: none; + width: 100%; + height: 100%; + position: absolute; + bottom: 0; + left: 0; + transform: translate(0, 0); + text-align: center; + flex-direction: column; + gap: -1rem; + align-items: center; + justify-content: center; +} /* *************************************************************************************************** */ /* .pfp-creator-section *************************************************************************************************** */ -.pfp-creator-section { opacity: 0; width:100%; height:100%; padding:10rem 6.4rem; position:relative; z-index: 1; display: flex; align-items: center; justify-content: center; background: transparent url(../images/create-pfp/last-supper-background.jpg) no-repeat 50% 50% / auto 120%; } +.pfp-creator-section { + opacity: 0; + width: 100%; + height: 100%; + padding: 10rem 6.4rem; + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + background: transparent url(../images/create-pfp/last-supper-background.jpg) no-repeat 50% 50% / + auto 120%; +} -.background-txt { width:100%; position:absolute; left:0; bottom:-3.2rem; z-index:0; overflow:hidden; } -.background-txt-wrapper { width:654rem; } -.background-txt span { opacity: .05; color: var(--yellow); font: bold 32rem/32rem var(--font-family); text-transform: uppercase; } -.background-txt span:nth-child(2n) { -webkit-text-stroke: .8rem var(--yellow); -webkit-text-fill-color: transparent; } +.background-txt { + width: 100%; + position: absolute; + left: 0; + bottom: -3.2rem; + z-index: 0; + overflow: hidden; + padding-top: 50px; +} +.background-txt-wrapper { + width: 654rem; +} +.background-txt span { + opacity: 0.05; + color: var(--yellow); + font: bold 32rem/32rem var(--font-family); + text-transform: uppercase; +} +.background-txt span:nth-child(2n) { + -webkit-text-stroke: 0.8rem var(--yellow); + -webkit-text-fill-color: transparent; +} -.upload-section { width:auto; display:flex; flex-direction: column; gap:3.2rem; position:relative; z-index: 1; } -.upload-section-wrapper { display:flex; gap:6.4rem; align-items: center; justify-content: center; } +.upload-section { + width: auto; + display: flex; + flex-direction: column; + gap: 3.2rem; + position: relative; + z-index: 1; +} +.upload-section-wrapper { + display: flex; + gap: 6.4rem; + align-items: center; + justify-content: center; +} -.upload-section .main-title { margin-bottom: 1.6rem; color: var(--yellow); font: bold 5.6rem/6.4rem var(--font-family); text-align: center; text-transform: uppercase; text-shadow: -.6vh -.6vh 0 rgba(10,20,26,.9), .6vh -.6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), .6vh .6vh 0 rgba(10,20,26,.9), -.6vh .6vh 0 rgba(10,20,26,.9), -.6vh .6vh 0 rgba(10,20,26,.9), -.6vh .6vh 0 rgba(10,20,26,.9), -.6vh .6vh 0 rgba(10,20,26,.9), 0 -.6vh 0 rgba(10,20,26,.9), 0 .6vh 0 rgba(10,20,26,.9), -.3vh -.3vh 0 rgba(10,20,26,.9), .3vh -.3vh 0 rgba(10,20,26,.9), .3vh .3vh 0 rgba(10,20,26,.9), -.3vh .3vh 0 rgba(10,20,26,.9), 0 -.3vh 0 rgba(10,20,26,.9), 0 .3vh 0 rgba(10,20,26,.9), 0 0 0 rgba(10,20,26,.9), .9vh 0vh 0 rgba(255,255,255,.9), .8vh .4vh 0 rgba(255,255,255,.9), .8vh .8vh 0 rgba(255,255,255,.9); } +.upload-section .main-title { + margin-bottom: 1.6rem; + color: var(--yellow); + font: bold 5.6rem/6.4rem var(--font-family); + text-align: center; + text-transform: uppercase; + text-shadow: -0.6vh -0.6vh 0 rgba(10, 20, 26, 0.9), 0.6vh -0.6vh 0 rgba(10, 20, 26, 0.9), + 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + 0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), -0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + -0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), -0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), + -0.6vh 0.6vh 0 rgba(10, 20, 26, 0.9), 0 -0.6vh 0 rgba(10, 20, 26, 0.9), + 0 0.6vh 0 rgba(10, 20, 26, 0.9), -0.3vh -0.3vh 0 rgba(10, 20, 26, 0.9), + 0.3vh -0.3vh 0 rgba(10, 20, 26, 0.9), 0.3vh 0.3vh 0 rgba(10, 20, 26, 0.9), + -0.3vh 0.3vh 0 rgba(10, 20, 26, 0.9), 0 -0.3vh 0 rgba(10, 20, 26, 0.9), + 0 0.3vh 0 rgba(10, 20, 26, 0.9), 0 0 0 rgba(10, 20, 26, 0.9), + 0.9vh 0vh 0 rgba(255, 255, 255, 0.9), 0.8vh 0.4vh 0 rgba(255, 255, 255, 0.9), + 0.8vh 0.8vh 0 rgba(255, 255, 255, 0.9); +} -.upload-section-image { width:36rem; height: 36rem; margin-bottom: .8rem; display:flex; align-items: center; justify-content: center; position: relative; border-radius: 1.6rem; border:1.2rem solid var(--yellow); box-shadow:.8rem .8rem 0 var(--mono-white); background: transparent url(../images/create-pfp/upload-image.png) no-repeat 50% 50% / auto 100%; overflow: hidden; } -.upload-section-image input[type="file"] { width: 100%; height: 100%; position: absolute; bottom:0; left:0; opacity: 0; cursor: pointer; } -.upload-section-image .user-image { width:100%; height: 100%; opacity: 0; } -.view-user-image .upload-section-image .user-image { opacity: 1; object-fit: cover; } -#pfp-image { height: 100%;} +.upload-section-image { + width: 36rem; + height: 36rem; + margin-bottom: 0.8rem; + display: flex; + align-items: center; + justify-content: center; + position: relative; + border-radius: 1.6rem; + border: 1.2rem solid var(--yellow); + box-shadow: 0.8rem 0.8rem 0 var(--mono-white); + background: transparent url(../images/create-pfp/upload-image.png) no-repeat 50% 50% / auto 100%; + overflow: hidden; +} +.upload-section-image input[type="file"] { + width: 100%; + height: 100%; + position: absolute; + bottom: 0; + left: 0; + opacity: 0; + cursor: pointer; +} +.upload-section-image .user-image { + width: 100%; + height: 100%; + opacity: 0; +} +.view-user-image .upload-section-image .user-image { + opacity: 1; + object-fit: cover; +} +#pfp-image { + height: 100%; +} -.upload-section-elements { width:100%; height: 100%; position:absolute; top:0; left:0; } -.upload-section-elements img { height: auto; position:absolute; opacity: 0; } +.upload-section-elements { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.upload-section-elements img { + height: auto; + position: absolute; + opacity: 0; +} -.upload-section-elements .item-head-front, +.upload-section-elements .item-head-front, .upload-section-elements .item-head-side, .upload-section-elements .item-head-side-more, -.upload-section-elements .item-head-turned { width: 28rem; top:1.6rem; left:50%; transform: translate(-50%,0); } -.upload-section-elements .item-crown { width:22rem; left:50%; top:.8rem; transform: translate(-50%,0); } -.upload-section-elements .item-red-candle { width:90%; left:50%; bottom:-2rem; transform: translate(-50%,0); } -.upload-section-elements .item-green-candle { width:90%; left:50%; bottom:-1.6rem; transform: translate(-50%,0); } +.upload-section-elements .item-head-turned { + width: 28rem; + top: 1.6rem; + left: 50%; + transform: translate(-50%, 0); +} +.upload-section-elements .item-crown { + width: 22rem; + left: 50%; + top: 0.8rem; + transform: translate(-50%, 0); +} +.upload-section-elements .item-red-candle { + width: 90%; + left: 50%; + bottom: -2rem; + transform: translate(-50%, 0); +} +.upload-section-elements .item-green-candle { + width: 90%; + left: 50%; + bottom: -1.6rem; + transform: translate(-50%, 0); +} -.upload-section-image .button { position: absolute; bottom:4.8rem; left:50%; transform: translate(-50%,0); } +.upload-section-image .button { + position: absolute; + bottom: 4.8rem; + left: 50%; + transform: translate(-50%, 0); +} -.upload-elements { width:auto; display:none; flex-direction: column; gap:4.8rem; } -.view-upload-elements .upload-elements { display:flex; } +.upload-elements { + width: auto; + display: none; + flex-direction: column; + gap: 4.8rem; +} +.view-upload-elements .upload-elements { + display: flex; +} -.upload-elements nav { width:100%; display: grid; grid-template-columns: repeat(4, 10.8rem); gap:3.2rem 2.4rem; } +.upload-elements nav { + width: 100%; + display: grid; + grid-template-columns: repeat(4, 10.8rem); + gap: 3.2rem 2.4rem; +} -.ue-button { width:auto; border:none; background: none; cursor: pointer; /*justify-self: flex-start;*/ text-align: center; } +.ue-button { + width: auto; + border: none; + background: none; + cursor: pointer; /*justify-self: flex-start;*/ + text-align: center; +} -.ue-button span { width: 9.6rem; height: 9.6rem; margin:0 auto 1.2rem; position: relative; display: flex; align-items: center; justify-content: center; border:.4rem solid #2A495B; background-color: rgba(10,20,26,.7); border-radius: 50%; transition: background-color .3s ease-in-out, border-color .3s ease-in-out; } -.ue-button:hover span { border-color: var(--mono-white); } +.ue-button span { + width: 9.6rem; + height: 9.6rem; + margin: 0 auto 1.2rem; + position: relative; + display: flex; + align-items: center; + justify-content: center; + border: 0.4rem solid #2a495b; + background-color: rgba(10, 20, 26, 0.7); + border-radius: 50%; + transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; +} +.ue-button:hover span { + border-color: var(--mono-white); +} .ue-button:active span, -.ue-button.active span { background-color: rgba(10,20,26,1); border-color: var(--yellow); } +.ue-button.active span { + background-color: rgba(10, 20, 26, 1); + border-color: var(--yellow); +} -.upload-elements .ue-button span img { width: 100%; height: auto; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); } +.upload-elements .ue-button span img { + width: 100%; + height: auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} -.ue-button strong { width: 100%; max-width: 10.8rem; display: block; font: bold 1.4rem/2rem var(--font-family); color:#9FB2BD; transition: color .3s ease-in-out; } -.ue-button:hover strong { color:#fff; } +.ue-button strong { + width: 100%; + max-width: 10.8rem; + display: block; + font: bold 1.4rem/2rem var(--font-family); + color: #9fb2bd; + transition: color 0.3s ease-in-out; +} +.ue-button:hover strong { + color: #fff; +} .ue-button:active strong, -.ue-button.active strong { color: var(--yellow); } +.ue-button.active strong { + color: var(--yellow); +} -.upload-elements-buttons { width:100%; /*width:36rem;*/ display: flex; align-items: center; justify-content: center; gap:2.4rem; } -.view-upload-elements .upload-elements-buttons { justify-content: space-between; } +.upload-elements-buttons { + width: 100%; /*width:36rem;*/ + display: flex; + align-items: center; + justify-content: center; + gap: 2.4rem; +} +.view-upload-elements .upload-elements-buttons { + justify-content: space-between; +} -.upload-btn { position:relative; } -.upload-btn input[type="file"] { width: 100%; height: 100%; position: absolute; bottom:0; left:0; opacity: 0; cursor: pointer; } -.upload-btn:active .button { background: var(--mono-white)!important; border-color: var(--yellow)!important; } +.upload-btn { + position: relative; +} +.upload-btn input[type="file"] { + width: 100%; + height: 100%; + position: absolute; + bottom: 0; + left: 0; + opacity: 0; + cursor: pointer; +} +.upload-btn:active .button { + background: var(--mono-white) !important; + border-color: var(--yellow) !important; +} -.upload-elements-buttons .export-button { display:none; } -.view-upload-elements .upload-elements-buttons .export-button { display:flex; } +.upload-elements-buttons .export-button { + display: none; +} +.view-upload-elements .upload-elements-buttons .export-button { + display: flex; +} /* *************************************************************************************************** */ /* buttons *************************************************************************************************** */ -.button { width:auto; height:4.8rem; margin:0; display:flex; align-items: center; justify-content: center; border-radius: 250rem; position:relative; padding: 1.6rem 2.4rem; color: var(--blue-dark); background: var(--yellow); border:.3rem solid transparent; cursor:pointer; box-shadow:none; outline:0; overflow:hidden; font: var(--button-m); text-decoration:none; white-space:nowrap; transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } -button.button { line-height:inherit!important; } -.button.button-disabled { pointer-events: none; background-color: var(--mono-disabled-grey, #ccc); pointer-events: none!important; } +.button { + width: auto; + height: 4.8rem; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + border-radius: 250rem; + position: relative; + padding: 1.6rem 2.4rem; + color: var(--blue-dark); + background: var(--yellow); + border: 0.3rem solid transparent; + cursor: pointer; + box-shadow: none; + outline: 0; + overflow: hidden; + font: var(--button-m); + text-decoration: none; + white-space: nowrap; + transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out, + border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; +} +button.button { + line-height: inherit !important; +} +.button.button-disabled { + pointer-events: none; + background-color: var(--mono-disabled-grey, #ccc); + pointer-events: none !important; +} -.button:active { background: var(--mono-white)!important; border-color: var(--yellow)!important; } -.button.active { background: var(--blue-dark)!important; color: var(--yellow)!important; border-color: var(--yellow)!important; } +.button:active { + background: var(--mono-white) !important; + border-color: var(--yellow) !important; +} +.button.active { + background: var(--blue-dark) !important; + color: var(--yellow) !important; + border-color: var(--yellow) !important; +} -.button-m { height:4.8rem; padding: 1.6rem 2.4rem; } -.button-l { height:5.6rem; padding: 1.6rem 2.4rem; } +.button-m { + height: 4.8rem; + padding: 1.6rem 2.4rem; +} +.button-l { + height: 5.6rem; + padding: 1.6rem 2.4rem; +} -.button-style { border-width: .4rem; border-color: var(--blue-dark); box-shadow:.3rem .3rem 0 var(--mono-white); } -.button-style:active { border-color: var(--blue-dark); box-shadow:.3rem .3rem 0 var(--blue-dark); } +.button-style { + border-width: 0.4rem; + border-color: var(--blue-dark); + box-shadow: 0.3rem 0.3rem 0 var(--mono-white); +} +.button-style:active { + border-color: var(--blue-dark); + box-shadow: 0.3rem 0.3rem 0 var(--blue-dark); +} /* *************************************************************************************************** */ /* *************************************************************************************************** */ -html, body { font-size:10px; } - - - -@media only screen and (max-width: 4000px) and (orientation:landscape) { - html, body { font-size:12px; } -} - -@media only screen and (max-width: 1920px) and (orientation:landscape) { - html, body { font-size:10px; } -} - -@media only screen and (max-width: 1280px) and (orientation:landscape) { - html, body { font-size:9px; } -} - -@media screen and (max-width: 1024px) and (orientation:landscape) { - html, body { font-size:8px; } -} - -@media screen and (max-width: 960px) and (orientation:landscape) { - html, body { font-size:8px; } - .slap-counter { bottom:9.6rem; } - .slap-background, .slap-backgrounds { background-size: auto 140%; background-position: 50% 35%; } - - .slap-button#slap-button-1 { margin-left: -70vh; } - .slap-button#slap-button-2 { margin-left: -33vh; } - .slap-button#slap-button-4 { margin-left: 65vh; } - - .header-right { padding-left: 0; padding-right: 10rem; } - .main-menu { opacity:0; visibility: hidden; width:100%; height: 100%; position:fixed; top:0; left:0; z-index:90; flex-direction: column; gap:2.4rem; justify-content: center; border-radius: 0; } - .button.menu-btn { display:flex; width:6.4rem; height:6.4rem; top:2rem; right:2rem; } - - .pfp-creator-section { padding: 8rem 3.2rem; } - .background-txt-wrapper { width:328rem; } - .background-txt { bottom:-2.4rem; } - .background-txt span { font-size: 16rem; line-height: 16rem; } - .background-txt span:nth-child(2n) { -webkit-text-stroke: .4rem var(--yellow); } - .upload-section .main-title { font-size: 3.2rem; line-height: 3.8rem; } - .upload-section { width:100%; gap:2.4rem; } - .upload-section .main-title { margin-bottom: 1.6rem; } - .upload-section-wrapper { gap: 4.8rem; } - .upload-section-image { width: 24rem; height: 24rem; } - .upload-elements nav { width:auto; gap: 2.4rem; grid-template-columns: repeat(4, 1fr); } - .ue-button span { width: 8.8rem; height: 8.8rem; margin-bottom:0; } - .upload-section-elements .item-head-front, - .upload-section-elements .item-head-side, - .upload-section-elements .item-head-side-more, - .upload-section-elements .item-head-turned { width: 16.8rem; top: 1.2rem; } - .upload-section-elements .item-crown { width: 12rem; } - .view-upload-elements .upload-elements-buttons { justify-content: center; } - .ue-button strong { display:none; } - -} - -@media screen and (max-width: 667px) and (orientation:landscape) { - html, body { font-size:7px; } -} - -@media (orientation:portrait) { - html, body { font-size:10px; } - .slap-counter { bottom:10.8rem; } - - .header-right { padding-left: 0; padding-right: 10rem; } - .main-menu { opacity:0; visibility: hidden; width:100%; height: 100%; position:fixed; top:0; left:0; z-index:90; flex-direction: column; gap:2.4rem; justify-content: center; border-radius: 0; } - .button.menu-btn { display:flex; width:6.4rem; height:6.4rem; top:2rem; right:2rem; } - - .pfp-creator-section { background-size: auto 100%; } - .upload-section-wrapper { flex-direction: column; } - .view-upload-elements .upload-elements-buttons { justify-content: center; } - -} - -@media screen and (max-width: 820px) and (orientation:portrait) { - - html, body { font-size:9px; } - - .slap-leaderboard { width: auto; max-width: 100%; right:2.4rem; bottom: 9rem; } - .footer { flex-direction: column; } - .follow-us { width:100%; background-color: var(--blue-dark); justify-content: space-between; padding-left: 2rem; padding-right: 2rem; } - .slap-counter { bottom:16.8rem; visibility: hidden; } - .slap-actions { visibility: hidden; } - .slap-backgrounds { opacity:.1; } - .chain-address { padding-right: 1.4rem; } - /* .chain-address span { display:none; } */ - - .mobile-portrait { display:flex; } - .sc-title { font-size: 4.8vh; line-height: 4.8vh; } - .sc-subtitle { margin-top:-.4vh; font-size: 3.2vh; line-height: 3.2vh; } - .sc-no { margin-top:-.4vh; font-size: 5.6vh; line-height: 5.6vh; } - - .upload-section .main-title { font-size: 4.8rem; line-height: 5.6rem; } - .background-txt-wrapper { width:430rem; } - .background-txt { bottom:4.8rem; } - .background-txt span { font-size: 21rem; line-height: 21rem; } - .background-txt span:nth-child(2n) { -webkit-text-stroke: .6rem var(--yellow); } - .upload-section-wrapper { gap:4.8rem; } - .upload-section-image { width: 32rem; height: 32rem; } - .upload-elements nav { gap:2.4rem; } - .ue-button strong { display:none; } - .ue-button span { margin: 0 auto; } - .upload-section-elements .item-head-front, - .upload-section-elements .item-head-side, - .upload-section-elements .item-head-side-more, - .upload-section-elements .item-head-turned { width: 22.8rem; top: 1.6rem; } - .upload-section-elements .item-crown { width: 17rem; } -} - -@media screen and (max-width: 480px) and (orientation:portrait) { - - html, body { font-size:9px; } - - .header { height: 8rem; gap:.0; } - .header-left { padding-left: 1.2rem; padding-right: 6.4rem; } - .header-right { padding-left: 0; padding-right: 8rem; } - .header .logo { width: 5.6rem; height: 5.6rem; } - - .sl-header h3 { font-size:1.8rem; line-height: 2.6rem; } - - .chain-address img { width: 4rem; height: 4rem; } - - .chain-address { padding: 1rem 1.6rem 1rem 1rem; } - - .button.menu-btn { width:5.6rem; height:5.6rem; top:1rem; right:1.2rem; } - - .pfp-creator-section { padding: 8rem 3.2rem; } - .background-txt-wrapper { width:328rem; } - .background-txt { bottom:4.8rem; } - .background-txt span { font-size: 16rem; line-height: 16rem; } - .background-txt span:nth-child(2n) { -webkit-text-stroke: .4rem var(--yellow); } - .upload-section .main-title { font-size: 3.2rem; line-height: 3.8rem; } - .upload-section { width:100%; gap:2.4rem; } - .upload-section .main-title { margin-bottom: 1.6rem; } - .upload-section-wrapper { gap: 3.2rem; } - .upload-section-image { width: 24rem; height: 24rem; } - .upload-elements nav { width:auto; gap: 1.6rem; grid-template-columns: repeat(4, 1fr); } - .ue-button span { width: 7.2rem; height: 7.2rem; } - .upload-section-elements .item-head-front, - .upload-section-elements .item-head-side, - .upload-section-elements .item-head-side-more, - .upload-section-elements .item-head-turned { width: 16.8rem; top: 1.2rem; } - .upload-section-elements .item-crown { width: 12rem; } - -} - -@media screen and (max-width: 380px) and (orientation:portrait) { - html, body { font-size:8px; } +html, +body { + font-size: 10px; +} + +@media only screen and (max-width: 4000px) and (orientation: landscape) { + html, + body { + font-size: 12px; + } +} + +@media only screen and (max-width: 1920px) and (orientation: landscape) { + html, + body { + font-size: 10px; + } +} + +@media only screen and (max-width: 1280px) and (orientation: landscape) { + html, + body { + font-size: 9px; + } +} + +@media screen and (max-width: 1024px) and (orientation: landscape) { + html, + body { + font-size: 8px; + } +} + +@media screen and (max-width: 960px) and (orientation: landscape) { + html, + body { + font-size: 8px; + } + .slap-counter { + bottom: 9.6rem; + } + .slap-background, + .slap-backgrounds { + background-size: auto 140%; + background-position: 50% 35%; + } + + .slap-button#slap-button-1 { + margin-left: -70vh; + } + .slap-button#slap-button-2 { + margin-left: -33vh; + } + .slap-button#slap-button-4 { + margin-left: 65vh; + } + + .header-right { + padding-left: 0; + padding-right: 10rem; + } + .main-menu { + opacity: 0; + visibility: hidden; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 90; + flex-direction: column; + gap: 2.4rem; + justify-content: center; + border-radius: 0; + } + .button.menu-btn { + display: flex; + width: 6.4rem; + height: 6.4rem; + top: 2rem; + right: 2rem; + } + + .pfp-creator-section { + padding: 8rem 3.2rem; + } + .background-txt-wrapper { + width: 328rem; + } + .background-txt { + bottom: -2.4rem; + } + .background-txt span { + font-size: 16rem; + line-height: 16rem; + } + .background-txt span:nth-child(2n) { + -webkit-text-stroke: 0.4rem var(--yellow); + } + .upload-section .main-title { + font-size: 3.2rem; + line-height: 3.8rem; + } + .upload-section { + width: 100%; + gap: 2.4rem; + } + .upload-section .main-title { + margin-bottom: 1.6rem; + } + .upload-section-wrapper { + gap: 4.8rem; + } + .upload-section-image { + width: 24rem; + height: 24rem; + } + .upload-elements nav { + width: auto; + gap: 2.4rem; + grid-template-columns: repeat(4, 1fr); + } + .ue-button span { + width: 8.8rem; + height: 8.8rem; + margin-bottom: 0; + } + .upload-section-elements .item-head-front, + .upload-section-elements .item-head-side, + .upload-section-elements .item-head-side-more, + .upload-section-elements .item-head-turned { + width: 16.8rem; + top: 1.2rem; + } + .upload-section-elements .item-crown { + width: 12rem; + } + .view-upload-elements .upload-elements-buttons { + justify-content: center; + } + .ue-button strong { + display: none; + } +} + +@media screen and (max-width: 667px) and (orientation: landscape) { + html, + body { + font-size: 7px; + } +} + +@media (orientation: portrait) { + html, + body { + font-size: 10px; + } + .slap-counter { + bottom: 10.8rem; + } + + .header-right { + padding-left: 0; + padding-right: 10rem; + } + .main-menu { + opacity: 0; + visibility: hidden; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 90; + flex-direction: column; + gap: 2.4rem; + justify-content: center; + border-radius: 0; + } + .button.menu-btn { + display: flex; + width: 6.4rem; + height: 6.4rem; + top: 2rem; + right: 2rem; + } + + .pfp-creator-section { + background-size: auto 100%; + } + .upload-section-wrapper { + flex-direction: column; + } + .view-upload-elements .upload-elements-buttons { + justify-content: center; + } +} + +@media screen and (max-width: 820px) and (orientation: portrait) { + html, + body { + font-size: 9px; + } + + .slap-leaderboard { + width: auto; + max-width: 100%; + right: 2.4rem; + bottom: 9rem; + } + .footer { + flex-direction: column; + } + .follow-us { + width: 100%; + background-color: var(--blue-dark); + justify-content: space-between; + padding-left: 2rem; + padding-right: 2rem; + } + .slap-counter { + bottom: 16.8rem; + visibility: hidden; + } + .slap-actions { + visibility: hidden; + } + .slap-backgrounds { + opacity: 0.1; + } + .chain-address { + padding-right: 1.4rem; + } + /* .chain-address span { display:none; } */ + + .mobile-portrait { + display: flex; + } + .sc-title { + font-size: 4.8vh; + line-height: 4.8vh; + } + .sc-subtitle { + margin-top: -0.4vh; + font-size: 3.2vh; + line-height: 3.2vh; + } + .sc-no { + margin-top: -0.4vh; + font-size: 5.6vh; + line-height: 5.6vh; + } + + .upload-section .main-title { + font-size: 4.8rem; + line-height: 5.6rem; + } + .background-txt-wrapper { + width: 430rem; + } + .background-txt { + bottom: 4.8rem; + } + .background-txt span { + font-size: 21rem; + line-height: 21rem; + } + .background-txt span:nth-child(2n) { + -webkit-text-stroke: 0.6rem var(--yellow); + } + .upload-section-wrapper { + gap: 4.8rem; + } + .upload-section-image { + width: 32rem; + height: 32rem; + } + .upload-elements nav { + gap: 2.4rem; + } + .ue-button strong { + display: none; + } + .ue-button span { + margin: 0 auto; + } + .upload-section-elements .item-head-front, + .upload-section-elements .item-head-side, + .upload-section-elements .item-head-side-more, + .upload-section-elements .item-head-turned { + width: 22.8rem; + top: 1.6rem; + } + .upload-section-elements .item-crown { + width: 17rem; + } } +@media screen and (max-width: 480px) and (orientation: portrait) { + html, + body { + font-size: 9px; + } + + .header { + height: 8rem; + gap: 0; + } + .header-left { + padding-left: 1.2rem; + padding-right: 6.4rem; + } + .header-right { + padding-left: 0; + padding-right: 8rem; + } + .header .logo { + width: 5.6rem; + height: 5.6rem; + } + + .sl-header h3 { + font-size: 1.8rem; + line-height: 2.6rem; + } + + .chain-address img { + width: 4rem; + height: 4rem; + } + + .chain-address { + padding: 1rem 1.6rem 1rem 1rem; + } + + .button.menu-btn { + width: 5.6rem; + height: 5.6rem; + top: 1rem; + right: 1.2rem; + } + + .pfp-creator-section { + padding: 8rem 3.2rem; + } + .background-txt-wrapper { + width: 328rem; + } + .background-txt { + bottom: 4.8rem; + } + .background-txt span { + font-size: 16rem; + line-height: 16rem; + } + .background-txt span:nth-child(2n) { + -webkit-text-stroke: 0.4rem var(--yellow); + } + .upload-section .main-title { + font-size: 3.2rem; + line-height: 3.8rem; + } + .upload-section { + width: 100%; + gap: 2.4rem; + } + .upload-section .main-title { + margin-bottom: 1.6rem; + } + .upload-section-wrapper { + gap: 3.2rem; + } + .upload-section-image { + width: 24rem; + height: 24rem; + } + .upload-elements nav { + width: auto; + gap: 1.6rem; + grid-template-columns: repeat(4, 1fr); + } + .ue-button span { + width: 7.2rem; + height: 7.2rem; + } + .upload-section-elements .item-head-front, + .upload-section-elements .item-head-side, + .upload-section-elements .item-head-side-more, + .upload-section-elements .item-head-turned { + width: 16.8rem; + top: 1.2rem; + } + .upload-section-elements .item-crown { + width: 12rem; + } +} + +@media screen and (max-width: 380px) and (orientation: portrait) { + html, + body { + font-size: 8px; + } +} + +/* *************************************************************************************************** */ /* *************************************************************************************************** */ -/* *************************************************************************************************** */ \ No newline at end of file diff --git a/assets/js/create-meme.js b/assets/js/create-meme.js index aabd4db..b67438f 100644 --- a/assets/js/create-meme.js +++ b/assets/js/create-meme.js @@ -1,246 +1,271 @@ const mainTitle = new SplitText(".main-title", { type: "words" }); const bgTxt = new SplitText(".background-txt span", { type: "words" }); -gsap.set(".item-head-front, .item-head-side, .item-head-side-more, .item-head-turned, .item-crown, .item-red-candle, .item-green-candle", { autoAlpha: 0, scale: .98, transformOrigin: '50% 50%' }) +gsap.set( + ".item-head-front, .item-head-side, .item-head-side-more, .item-head-turned, .item-crown, .item-red-candle, .item-green-candle", + { autoAlpha: 0, scale: 0.98, transformOrigin: "50% 50%" } +); /* ***************************************************************** */ -const introPFP = gsap.timeline({ }); +const introPFP = gsap.timeline({}); -introPFP - .to(".pfp-creator-section", { - duration: .1, - autoAlpha: 1, - ease: "power1.out" - }) - .from(mainTitle.words, { - duration: .5, - stagger: { - each: 0.05, - from: "left", - grid: "auto" - }, - autoAlpha: 0, - y: "4.4vh", - ease: "power1.out" - }, ">+.2") - .from(".upload-section-image", { - duration: .5, - autoAlpha: 0, - scale: 0.98, - y: "2.4vh", - ease: "power1.out" - }, ">-.3") - .from(".upload-elements-buttons", { - duration: .5, - autoAlpha: 0, - y: "2.4vh", - ease: "power1.out" - }, ">-.3"); +introPFP + .to(".pfp-creator-section", { + duration: 0.1, + autoAlpha: 1, + ease: "power1.out", + }) + .from( + mainTitle.words, + { + duration: 0.5, + stagger: { + each: 0.05, + from: "left", + grid: "auto", + }, + autoAlpha: 0, + y: "4.4vh", + ease: "power1.out", + }, + ">+.2" + ) + .from( + ".upload-section-image", + { + duration: 0.5, + autoAlpha: 0, + scale: 0.98, + y: "2.4vh", + ease: "power1.out", + }, + ">-.3" + ) + .from( + ".upload-elements-buttons", + { + duration: 0.5, + autoAlpha: 0, + y: "2.4vh", + ease: "power1.out", + }, + ">-.3" + ); /* ***************************************************************** */ const bgTxtPFP = gsap.timeline({ repeat: -1 }); bgTxtPFP - .from(bgTxt.words, { - duration: .5, - stagger: 0.1, - autoAlpha: 0, - ease: "power1.out" - }) - .fromTo(".background-txt-wrapper", { - x: "100vw" - }, { - duration: 50, - xPercent: -100, - ease: "none" - }, ">-.5") - .to(bgTxt.words, { - duration: .5, - stagger: { - each: 0.1, - from: 'end' - }, - autoAlpha: 0, - ease: "power1.out" - }, ">-.5"); + .from(bgTxt.words, { + duration: 0.5, + stagger: 0.1, + autoAlpha: 0, + ease: "power1.out", + }) + .fromTo( + ".background-txt-wrapper", + { + x: "100vw", + }, + { + duration: 50, + xPercent: -100, + ease: "none", + }, + ">-.5" + ) + .to( + bgTxt.words, + { + duration: 0.5, + stagger: { + each: 0.1, + from: "end", + }, + autoAlpha: 0, + ease: "power1.out", + }, + ">-.5" + ); /* ***************************************************************** */ /* start --- after upload image this have to be deleted */ - -$('.upload-section-image, #pfp-upload-btn').on("click", function (e) { - $("body").addClass("view-user-image"); - $("body").addClass("view-upload-elements"); - $("body").addClass("view-upload-elements-buttons"); +$(".upload-section-image, #pfp-upload-btn").on("click", function (e) { + $("body").addClass("view-user-image"); + $("body").addClass("view-upload-elements"); + $("body").addClass("view-upload-elements-buttons"); }); /* end --- after upload image this have to be deleted */ /* ***************************************************************** */ -$('.ue-button').on("click", function (e) { - if (!$(this).hasClass("active")) { - $(this).addClass("active"); - } else { - $(this).removeClass("active"); - } +$(".ue-button").on("click", function (e) { + if (!$(this).hasClass("active")) { + $(this).addClass("active"); + } else { + $(this).removeClass("active"); + } }); -$('.trigger-cesar-head-front').on("click", function (e) { - if (!$(this).hasClass("active")) { - gsap.to('.item-head-front', { - duration: .5, - autoAlpha: 0, - scale: .98, - ease: "power1.out" - }); - } else { - gsap.to('.item-head-front', { - duration: .5, - autoAlpha: 1, - scale: 1, - ease: "power1.out" - }); - } +$(".trigger-cesar-head-front").on("click", function (e) { + if (!$(this).hasClass("active")) { + gsap.to(".item-head-front", { + duration: 0.5, + autoAlpha: 0, + scale: 0.98, + ease: "power1.out", + }); + } else { + gsap.to(".item-head-front", { + duration: 0.5, + autoAlpha: 1, + scale: 1, + ease: "power1.out", + }); + } }); -$('.trigger-cesar-head-side').on("click", function (e) { - if (!$(this).hasClass("active")) { - gsap.to('.item-head-side', { - duration: .5, - autoAlpha: 0, - scale: .98, - ease: "power1.out" - }); - } else { - gsap.to('.item-head-side', { - duration: .5, - autoAlpha: 1, - scale: 1, - ease: "power1.out" - }); - } +$(".trigger-cesar-head-side").on("click", function (e) { + if (!$(this).hasClass("active")) { + gsap.to(".item-head-side", { + duration: 0.5, + autoAlpha: 0, + scale: 0.98, + ease: "power1.out", + }); + } else { + gsap.to(".item-head-side", { + duration: 0.5, + autoAlpha: 1, + scale: 1, + ease: "power1.out", + }); + } }); -$('.trigger-cesar-head-side-more').on("click", function (e) { - if (!$(this).hasClass("active")) { - gsap.to('.item-head-side-more', { - duration: .5, - autoAlpha: 0, - scale: .98, - ease: "power1.out" - }); - } else { - gsap.to('.item-head-side-more', { - duration: .5, - autoAlpha: 1, - scale: 1, - ease: "power1.out" - }); - } +$(".trigger-cesar-head-side-more").on("click", function (e) { + if (!$(this).hasClass("active")) { + gsap.to(".item-head-side-more", { + duration: 0.5, + autoAlpha: 0, + scale: 0.98, + ease: "power1.out", + }); + } else { + gsap.to(".item-head-side-more", { + duration: 0.5, + autoAlpha: 1, + scale: 1, + ease: "power1.out", + }); + } }); -$('.trigger-cesar-head-turned').on("click", function (e) { - if (!$(this).hasClass("active")) { - gsap.to('.item-head-turned', { - duration: .5, - autoAlpha: 0, - scale: .98, - ease: "power1.out" - }); - } else { - gsap.to('.item-head-turned', { - duration: .5, - autoAlpha: 1, - scale: 1, - ease: "power1.out" - }); - } +$(".trigger-cesar-head-turned").on("click", function (e) { + if (!$(this).hasClass("active")) { + gsap.to(".item-head-turned", { + duration: 0.5, + autoAlpha: 0, + scale: 0.98, + ease: "power1.out", + }); + } else { + gsap.to(".item-head-turned", { + duration: 0.5, + autoAlpha: 1, + scale: 1, + ease: "power1.out", + }); + } }); -$('.trigger-crown').on("click", function (e) { - if (!$(this).hasClass("active")) { - gsap.to('.item-crown', { - duration: .5, - autoAlpha: 0, - scale: .98, - ease: "power1.out" - }); - } else { - gsap.to('.item-crown', { - duration: .5, - autoAlpha: 1, - scale: 1, - ease: "power1.out" - }); - } +$(".trigger-crown").on("click", function (e) { + if (!$(this).hasClass("active")) { + gsap.to(".item-crown", { + duration: 0.5, + autoAlpha: 0, + scale: 0.98, + ease: "power1.out", + }); + } else { + gsap.to(".item-crown", { + duration: 0.5, + autoAlpha: 1, + scale: 1, + ease: "power1.out", + }); + } }); -$('.trigger-red-candle').on("click", function (e) { - if (!$(this).hasClass("active")) { - gsap.to('.item-red-candle', { - duration: .5, - autoAlpha: 0, - scale: .98, - ease: "power1.out" - }); - } else { - gsap.to('.item-red-candle', { - duration: .5, - autoAlpha: 1, - scale: 1, - ease: "power1.out" - }); - } +$(".trigger-red-candle").on("click", function (e) { + if (!$(this).hasClass("active")) { + gsap.to(".item-red-candle", { + duration: 0.5, + autoAlpha: 0, + scale: 0.98, + ease: "power1.out", + }); + } else { + gsap.to(".item-red-candle", { + duration: 0.5, + autoAlpha: 1, + scale: 1, + ease: "power1.out", + }); + } }); -$('.trigger-green-candle').on("click", function (e) { - if (!$(this).hasClass("active")) { - gsap.to('.item-green-candle', { - duration: .5, - autoAlpha: 0, - scale: .98, - ease: "power1.out" - }); - } else { - gsap.to('.item-green-candle', { - duration: .5, - autoAlpha: 1, - scale: 1, - ease: "power1.out" - }); - } +$(".trigger-green-candle").on("click", function (e) { + if (!$(this).hasClass("active")) { + gsap.to(".item-green-candle", { + duration: 0.5, + autoAlpha: 0, + scale: 0.98, + ease: "power1.out", + }); + } else { + gsap.to(".item-green-candle", { + duration: 0.5, + autoAlpha: 1, + scale: 1, + ease: "power1.out", + }); + } }); /* ***************************************************************** */ /* handle logic to upload & export pfp */ -$('#pfp-input').on('change', (event) => { - const file = event.target.files[0]; - - if (file) { - const reader = new FileReader(); - reader.onload = (e) => { - $('#pfp-preview').attr('src', e.target.result); - }; - reader.readAsDataURL(file); - } +$("#pfp-input").on("change", (event) => { + const file = event.target.files[0]; + + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + $("#pfp-preview").attr("src", e.target.result); + }; + reader.readAsDataURL(file); + } }); // using lib html2canvas to export image -$('#export-pfp-btn').on('click', function() { - const elementToCapture = document.getElementById('pfp-image'); // Change this selector to the element you want to capture - - html2canvas(elementToCapture, {scale: 4}).then(canvas => { - // Export the canvas as an image - const link = document.createElement('a'); - link.href = canvas.toDataURL('image/png'); - link.download = 'pfp-image.png'; - link.click(); - }).catch(error => { - console.error('Error capturing the element:', error); +$("#export-pfp-btn").on("click", function () { + const elementToCapture = document.getElementById("pfp-image"); // Change this selector to the element you want to capture + + html2canvas(elementToCapture, { scale: 4 }) + .then((canvas) => { + // Export the canvas as an image + const link = document.createElement("a"); + link.href = canvas.toDataURL("image/png"); + link.download = "pfp-image.png"; + link.click(); + }) + .catch((error) => { + console.error("Error capturing the element:", error); }); -}); \ No newline at end of file +}); diff --git a/assets/js/img-editor.js b/assets/js/img-editor.js new file mode 100644 index 0000000..f88852e --- /dev/null +++ b/assets/js/img-editor.js @@ -0,0 +1,454 @@ +const redCandle = document.querySelector(".item-red-candle"); +const moveableRedCandle = new Moveable(document.body, { + target: redCandle, + container: document.body, + className: "red-candle-control", + draggable: true, + resizable: true, + scalable: true, + rotatable: true, + warpable: true, + pinchable: true, + origin: true, + keepRatio: true, + edge: false, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 0, +}); + +document.addEventListener("click", (event) => { + const isOutsideClick = + !redCandle.contains(event.target) && // Click is outside the target + !event.target.closest(".red-candle-control"); // Click is outside Moveable's control box + + if (isOutsideClick) { + document.querySelector(".red-candle-control").style.display = "none"; + } else { + document.querySelector(".red-candle-control").style.display = "block"; + } +}); + +/* draggable */ +moveableRedCandle.on("drag", ({ target, left, top }) => { + target.style.left = `${left}px`; + target.style.top = `${top}px`; + document.querySelector(".red-candle-control").style.display = "block"; +}); + +/* resizable */ +moveableRedCandle.on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => { + delta[0] && (target.style.width = `${width}px`); + delta[1] && (target.style.height = `${height}px`); +}); + +/* scalable */ +moveableRedCandle.on("scale", ({ target, scale, dist, delta, transform, clientX, clientY }) => { + target.style.transform = transform; +}); + +/* rotatable */ +moveableRedCandle.on( + "rotate", + ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => { + target.style.transform = transform; + } +); + +/* warpable */ +this.matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; +moveableRedCandle.on("warp", ({ target, clientX, clientY, delta, dist, multiply, transform }) => { + this.matrix = multiply(this.matrix, delta); + target.style.transform = `matrix3d(${this.matrix.join(",")})`; +}); + +const greenCandle = document.querySelector(".item-green-candle"); +const moveableGreenCandle = new Moveable(document.body, { + target: greenCandle, + container: document.body, + className: "green-candle-control", + draggable: true, + resizable: true, + scalable: true, + rotatable: true, + warpable: true, + pinchable: true, + origin: true, + keepRatio: true, + edge: false, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 0, +}); + +document.addEventListener("click", (event) => { + const isOutsideClick = + !greenCandle.contains(event.target) && // Click is outside the target + !event.target.closest(".green-candle-control"); // Click is outside Moveable's control box + + if (isOutsideClick) { + document.querySelector(".green-candle-control").style.display = "none"; + } else { + document.querySelector(".green-candle-control").style.display = "block"; + } +}); + +/* draggable */ +moveableGreenCandle.on("drag", ({ target, left, top }) => { + target.style.left = `${left}px`; + target.style.top = `${top}px`; + document.querySelector(".green-candle-control").style.display = "block"; +}); + +/* resizable */ +moveableGreenCandle.on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => { + delta[0] && (target.style.width = `${width}px`); + delta[1] && (target.style.height = `${height}px`); +}); + +/* scalable */ +moveableGreenCandle.on("scale", ({ target, scale, dist, delta, transform, clientX, clientY }) => { + target.style.transform = transform; +}); + +/* rotatable */ +moveableGreenCandle.on( + "rotate", + ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => { + target.style.transform = transform; + } +); + +/* warpable */ +this.matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; +moveableGreenCandle.on("warp", ({ target, clientX, clientY, delta, dist, multiply, transform }) => { + this.matrix = multiply(this.matrix, delta); + target.style.transform = `matrix3d(${this.matrix.join(",")})`; +}); + +const headFront = document.querySelector(".item-head-front"); +const moveableHeadFront = new Moveable(document.body, { + target: headFront, + container: document.body, + className: "head-front-control", + draggable: true, + resizable: true, + scalable: true, + rotatable: true, + warpable: true, + pinchable: true, + origin: true, + keepRatio: true, + edge: false, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 0, +}); + +document.addEventListener("click", (event) => { + const isOutsideClick = + !redCandle.contains(event.target) && // Click is outside the target + !event.target.closest(".head-front-control"); // Click is outside Moveable's control box + + if (isOutsideClick) { + document.querySelector(".head-front-control").style.display = "none"; + } else { + document.querySelector(".head-front-control").style.display = "block"; + } +}); + +/* draggable */ +moveableHeadFront.on("drag", ({ target, left, top }) => { + target.style.left = `${left}px`; + target.style.top = `${top}px`; + document.querySelector(".head-front-control").style.display = "block"; +}); + +/* resizable */ +moveableHeadFront.on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => { + delta[0] && (target.style.width = `${width}px`); + delta[1] && (target.style.height = `${height}px`); +}); + +/* scalable */ +moveableHeadFront.on("scale", ({ target, scale, dist, delta, transform, clientX, clientY }) => { + target.style.transform = transform; +}); + +/* rotatable */ +moveableHeadFront.on( + "rotate", + ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => { + target.style.transform = transform; + } +); + +/* warpable */ +this.matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; +moveableHeadFront.on("warp", ({ target, clientX, clientY, delta, dist, multiply, transform }) => { + this.matrix = multiply(this.matrix, delta); + target.style.transform = `matrix3d(${this.matrix.join(",")})`; +}); + +const headSide = document.querySelector(".item-head-side"); +const moveableHeadSide = new Moveable(document.body, { + target: headSide, + container: document.body, + className: "head-side-control", + draggable: true, + resizable: true, + scalable: true, + rotatable: true, + warpable: true, + pinchable: true, + origin: true, + keepRatio: true, + edge: false, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 0, +}); + +document.addEventListener("click", (event) => { + const isOutsideClick = + !redCandle.contains(event.target) && // Click is outside the target + !event.target.closest(".head-side-control"); // Click is outside Moveable's control box + + if (isOutsideClick) { + document.querySelector(".head-side-control").style.display = "none"; + } else { + document.querySelector(".head-side-control").style.display = "block"; + } +}); + +/* draggable */ +moveableHeadSide.on("drag", ({ target, left, top }) => { + target.style.left = `${left}px`; + target.style.top = `${top}px`; + document.querySelector(".head-side-control").style.display = "block"; +}); + +/* resizable */ +moveableHeadSide.on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => { + delta[0] && (target.style.width = `${width}px`); + delta[1] && (target.style.height = `${height}px`); +}); + +/* scalable */ +moveableHeadSide.on("scale", ({ target, scale, dist, delta, transform, clientX, clientY }) => { + target.style.transform = transform; +}); + +/* rotatable */ +moveableHeadSide.on( + "rotate", + ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => { + target.style.transform = transform; + } +); + +/* warpable */ +this.matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; +moveableHeadSide.on("warp", ({ target, clientX, clientY, delta, dist, multiply, transform }) => { + this.matrix = multiply(this.matrix, delta); + target.style.transform = `matrix3d(${this.matrix.join(",")})`; +}); + +const headSideMore = document.querySelector(".item-head-side-more"); +const moveableHeadSideMore = new Moveable(document.body, { + target: headSideMore, + container: document.body, + className: "head-side-more-control", + draggable: true, + resizable: true, + scalable: true, + rotatable: true, + warpable: true, + pinchable: true, + origin: true, + keepRatio: true, + edge: false, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 0, +}); + +document.addEventListener("click", (event) => { + const isOutsideClick = + !redCandle.contains(event.target) && // Click is outside the target + !event.target.closest(".head-side-more-control"); // Click is outside Moveable's control box + + if (isOutsideClick) { + document.querySelector(".head-side-more-control").style.display = "none"; + } else { + document.querySelector(".head-side-more-control").style.display = "block"; + } +}); + +/* draggable */ +moveableHeadSideMore.on("drag", ({ target, left, top }) => { + target.style.left = `${left}px`; + target.style.top = `${top}px`; + document.querySelector(".head-side-more-control").style.display = "block"; +}); + +/* resizable */ +moveableHeadSideMore.on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => { + delta[0] && (target.style.width = `${width}px`); + delta[1] && (target.style.height = `${height}px`); +}); + +/* scalable */ +moveableHeadSideMore.on("scale", ({ target, scale, dist, delta, transform, clientX, clientY }) => { + target.style.transform = transform; +}); + +/* rotatable */ +moveableHeadSideMore.on( + "rotate", + ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => { + target.style.transform = transform; + } +); + +/* warpable */ +this.matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; +moveableHeadSideMore.on( + "warp", + ({ target, clientX, clientY, delta, dist, multiply, transform }) => { + this.matrix = multiply(this.matrix, delta); + target.style.transform = `matrix3d(${this.matrix.join(",")})`; + } +); + +const headTurned = document.querySelector(".item-head-turned"); +const moveableHeadTurned = new Moveable(document.body, { + target: headTurned, + container: document.body, + className: "head-turned-control", + draggable: true, + resizable: true, + scalable: true, + rotatable: true, + warpable: true, + pinchable: true, + origin: true, + keepRatio: true, + edge: false, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 0, +}); + +document.addEventListener("click", (event) => { + const isOutsideClick = + !redCandle.contains(event.target) && // Click is outside the target + !event.target.closest(".head-turned-control"); // Click is outside Moveable's control box + + if (isOutsideClick) { + document.querySelector(".head-turned-control").style.display = "none"; + } else { + document.querySelector(".head-turned-control").style.display = "block"; + } +}); + +/* draggable */ +moveableHeadTurned.on("drag", ({ target, left, top }) => { + target.style.left = `${left}px`; + target.style.top = `${top}px`; + document.querySelector(".head-turned-control").style.display = "block"; +}); + +/* resizable */ +moveableHeadTurned.on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => { + delta[0] && (target.style.width = `${width}px`); + delta[1] && (target.style.height = `${height}px`); +}); + +/* scalable */ +moveableHeadTurned.on("scale", ({ target, scale, dist, delta, transform, clientX, clientY }) => { + target.style.transform = transform; +}); + +/* rotatable */ +moveableHeadTurned.on( + "rotate", + ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => { + target.style.transform = transform; + } +); + +/* warpable */ +this.matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; +moveableHeadTurned.on("warp", ({ target, clientX, clientY, delta, dist, multiply, transform }) => { + this.matrix = multiply(this.matrix, delta); + target.style.transform = `matrix3d(${this.matrix.join(",")})`; +}); + +const crown = document.querySelector(".item-crown"); +const moveableCrown = new Moveable(document.body, { + target: document.querySelector(".item-crown"), + container: document.body, + className: "crown-control", + draggable: true, + resizable: true, + scalable: true, + rotatable: true, + warpable: true, + pinchable: true, + origin: true, + keepRatio: true, + edge: false, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 0, +}); + +document.addEventListener("click", (event) => { + const isOutsideClick = + !redCandle.contains(event.target) && // Click is outside the target + !event.target.closest(".crown-control"); // Click is outside Moveable's control box + + if (isOutsideClick) { + document.querySelector(".crown-control").style.display = "none"; + } else { + document.querySelector(".crown-control").style.display = "block"; + } +}); + +/* draggable */ +moveableCrown.on("drag", ({ target, left, top }) => { + target.style.left = `${left}px`; + target.style.top = `${top}px`; + document.querySelector(".crown-control").style.display = "block"; +}); + +/* resizable */ +moveableCrown.on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => { + delta[0] && (target.style.width = `${width}px`); + delta[1] && (target.style.height = `${height}px`); +}); + +/* scalable */ +moveableCrown.on("scale", ({ target, scale, dist, delta, transform, clientX, clientY }) => { + target.style.transform = transform; +}); + +/* rotatable */ +moveableCrown.on("rotate", ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => { + target.style.transform = transform; +}); + +/* warpable */ +this.matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; +moveableCrown.on("warp", ({ target, clientX, clientY, delta, dist, multiply, transform }) => { + this.matrix = multiply(this.matrix, delta); + target.style.transform = `matrix3d(${this.matrix.join(",")})`; +}); diff --git a/create-meme.html b/create-meme.html index 52c62cb..4fccbba 100644 --- a/create-meme.html +++ b/create-meme.html @@ -1,185 +1,310 @@  - + - + - - $Cesar | Create Meme - - - - + $Cesar | Create Meme - - - - - - + + + - - + + + + + + +
+
+
+
+ $Cesar$Cesar$Cesar$Cesar$Cesar +
+
-
- -
-
- $Cesar$Cesar$Cesar$Cesar$Cesar -
-
- -
-

Customize your Meme

-
-
- -
- -
- - - - - - - -
-
-
-
- -
-
-
-
- - -
- -
-
- -
- +
+

Customize your Meme

+
+
+ +
+ +
+ + + + + + + +
+
+
+
+ +
+
+
+
+ + +
+ +
+
+
-
-

-
-
- - - 0x769d9E183d0B73278A42ed4818BC5c4bF50700Ad - - - - - - - - - - - - - - - -
+
+

+
+
+ + + 0x769d9E183d0B73278A42ed4818BC5c4bF50700Ad + + + + + + + + + + + + + + + +
- - - + + + - + - - + + +