- ID de l'analyse :
- 13346087-5bc9-4515-8bf0-0c1ae5829ee3Terminée
- URL soumise :
- https://freefirehydrants.straw.page/
- Fin du rapport :
Liens : 1 trouvé(s)
Liens sortants identifiés à partir de la page
| Lien | texte |
|---|---|
| https://straw.page?ref=logo | Make your own StrawPage! |
Variables JavaScript : 32 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
| Nom | Type |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| p5 | function |
| Konva | object |
| formatPaint | function |
| makeGrid | function |
Messages de journal de console : 0 trouvé(s)
Messages consignés dans la console web
HTML
Le corps HTML de la page en données brutes
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css?family=Karla:400,900|PT+Sans+Narrow|Yantramanav:400,900|Roboto:900,400|Bangers|Krona+One|Nunito:400,900|Frank+Ruhl+Libre:400,900|Oswald:400,900|Source+Serif+Pro|Work+Sans:400,900|Open+Sans|Raleway|Lato|Passion+One|Lateef|Crimson+Text|Baloo+Paaji+2|Jost|Oswald|Montserrat|Lexend+Deca|Bungee+Shade|Rubik|Inter:400,900|Bebas+Neue|Syncopate:400,700|VT323:400,900|Poppins:400,900|Fredoka+One:400,900|Staatliches:400,900|Redacted+Script:400,900|Rubik+Pixels:400,900|Cute+Font:400,900|Kosugi+Maru:400,900|Darumadrop+One:400,900|Kaisei+Decol:400,900|Playfair+Display:400,900|Rubik+Doodle+Shadow:400,900|Shadows+Into+Light:400,900|M+PLUS+1:400,900|Zeyada:400,900|Rock+Salt:400,900|Leckerli+One:400,900|Space+Mono:400,900|Finger+Paint:400,900" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/konva.min.js"></script><link href="https://straw.page/min/?g=els&n=893" rel="stylesheet"><link rel="apple-touch-icon" sizes="180x180" href="https://straw.page/apple-touch-icon.png?v=2"><link rel="icon" type="image/png" sizes="32x32" href="https://straw.page/favicon-32x32.png?v=2"><link rel="icon" type="image/png" sizes="16x16" href="https://straw.page/favicon-16x16.png?v=2"><script defer="" src="https://notebook.straw.page" data-website-id="bd792eef-6083-4583-b5ab-4b54191ba93a"></script><meta property="twitter:title" content="freefirehydrants's strawpage"><meta property="twitter:description" content="freefirehydrants's strawpage"><meta property="og:image" content="https://strawcdn.com/capture/pics/freefirehydrants.straw.page.jpg?v=1394"><meta name="twitter:title" content="freefirehydrants's strawpage"><meta name="twitter:description" content="Made with StrawPage"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://strawcdn.com/capture/pics/freefirehydrants.straw.page.jpg?v=2994"><meta name="straw:user" content="freefirehydrants"><script src="https://cdn.usefathom.com/script.js" data-site="ZXDYIAXN" defer=""></script><style>* { outline: 0; margin: 0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } html { -webkit-text-size-adjust: 100%; } a,a:link,a:visited,.a:hover,.a:focus,a:active{ color: inherit; text-decoration: none; } body { overflow-x: hidden; background: var(--b); --b: #fff; background-size: cover; background-position: center; background-attachment: scroll; --mw: 600; } .first { font-family: 'Yantramanav'; --p: #df001d; --g: 32px; --gs: 2.73438em; --extra: 1; background-size: cover; background-position: center; background-attachment: scroll; overflow-x: hidden; overflow-y: hidden } .content { margin: 0 auto; /* min-height: calc(200vh + calc(1rem * calc(var(--extra) * var(--g)))); */ width: 100%; max-width: calc(1px * var(--mw)); position: relative; font-size:min(16px, 16 * (100vw / var(--mw))); min-height: 100vh; } .element:hover { cursor: auto } .element[data-type=text] * { -webkit-user-drag: auto; -khtml-user-drag: auto; -moz-user-drag: auto; -o-user-drag: auto; user-drag: auto; -khtml-user-select: auto; -o-user-select: auto; -moz-user-select: auto; -webkit-user-select: auto; user-select: auto; } .element { transition: transform 0.3s ease } .content a .element:hover,.element[data-scrollto]:hover { transform: rotate(calc(1deg*var(--r))) scale(calc(var(--s) * 1.05)); cursor: pointer } .content a .element:hover button { cursor: pointer } .element:not([data-type=wordart]) p { -webkit-transform: translate3d(0,0,0) } .branding{position:fixed;bottom:30px;right:30px;display:flex;align-items:center;filter:drop-shadow(0 1px 5px rgba(0,0,0,.4));background:#df001d;z-index: 9999999999999999;transition:all 0.3s ease; transform: none}.branding img{height:40px;width:40px;margin-bottom:0;padding: 2px}.brandingContent{display:none}.brandingContent p{margin:0;font-family:'Yantramanav';color:#fff;font-size:16px;padding:0 8px} .branding:hover { transform: scale(1.1); cursor: pointer } @media(min-width: 5px){ .brandingContent{display:block !important} } .inst { --scaler: 1.2 } .inst.fb { --scaler: 1.15 } .inst .element[data-type=text] .el_content, .inst .element[data-type=icon] .el_content, .inst .element[data-type=button] button { font-size: calc(1em * calc(var(--ts) / var(--scaler))); } .element[data-type=embed] iframe { pointer-events: all } .element[data-type=image]:not([data-link]):not([data-scrollto]),.element[data-type=icon]:not([data-link]):not([data-scrollto]),.element[data-type=shape]:not([data-link]):not([data-scrollto]){ pointer-events: none } .element[data-type=text]:not([data-link]):not([data-scrollable]):not([data-scrollto]){ pointer-events: none } .element[data-type=text]:not([data-link]):not([data-scrollto]) *{ pointer-events: all } .element[data-type=icon][data-link]{ pointer-events: none } .element[data-type=icon][data-link] i{ pointer-events: all } .element[data-type=paint] {pointer-events: none} .element[data-type=paint] g {pointer-events: all} /* GIMMICKS */ .element[data-type=gimmick-canvas] { border: 0.15em solid var(--co); --co: #df001d; --ts: 1; border-radius: 5px; transform: rotate(calc(1deg*var(--r))) } .element[data-type=gimmick-canvas] .innerCanvas { height: 100%; width: 100%; display: flex; flex-direction: column } .element[data-type=gimmick-canvas] .toolbox { margin: 0 0 0 auto; background: #fff; padding: 0.4em 0.6em; color: var(--co); display: inline-flex; font-size: calc(1em * var(--ts)); position: absolute; top: -0em; left: 50%; transform: translate(-50%,-100%); border: 0.15em solid var(--co); border-radius: calc(5px / 2); align-items: center; max-width: 100% } .element[data-type=gimmick-canvas] .toolbox i { padding: 0 0.4em; font-size: 1.1em; } .element[data-type=gimmick-canvas] .picasso { background: #fff; flex: 1; border-radius: calc(5px / 2); overflow: hidden; position: relative } .element[data-type=gimmick-canvas] .picasso canvas { height: 100%; width: 100% } .element[data-type=gimmick-canvas] .sendPicasso { padding: 0em; } .element[data-type=gimmick-canvas] .sendPicasso button { -webkit-appearance: none; appearance: none; background: #fff; color: var(--co); text-align: center; border: 0; border-top: 0.15em solid var(--co); width: 100%; padding: 0.5em 0.2em; font-family: 'Yantramanav'; font-size: 1.1em; border-bottom-left-radius: calc(5px / 2); border-bottom-right-radius: calc(5px / 2); transition: all 0.3s ease } .element[data-type=gimmick-canvas] .sendPicasso button:hover { background: var(--co); color: #fff; cursor: pointer } .element[data-type=gimmick-ama] .askerSend button:hover { background: var(--co); color: #fff; cursor: pointer } .element[data-type=gimmick-ama] .askExtra { position: relative; transition: all 0.3s ease } .element[data-type=gimmick-ama] .askExtra img { height: 1.875em; width: 1.875em; position: absolute; left: calc(50% - 4px); top: 50%; transform: translate(-50%,-50%); object-fit: cover; object-position: center } .element[data-type=gimmick-ama] .askExtra:hover { opacity: 0.5; cursor: pointer } .element[data-type=gimmick-canvas] .canvCol { height: 1.1em; width: 1.1em; border-radius: 50%; margin: 0 0.4em; background: conic-gradient(from 0deg at 50% 50%, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%); } .element[data-type=gimmick-canvas] [type=color] { visibility: hidden; position: absolute; } .canvSizing { display: flex; align-items: center } .element[data-type=gimmick-canvas] [type=range] { border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 5px; width: 3em; background: var(--co); border-radius: 40px; border: 1px solid var(--co); background: 0; margin: 0 0.5rem } .element[data-type=gimmick-canvas] [type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: var(--co); height: 15px; width: 15px; border: 2px solid var(--co); border-radius: 40px } .element[data-type=gimmick-canvas].doneArt,.element[data-type=gimmick-ama].doneArt { pointer-events: none; } .jfr .element, .jfr .element * { pointer-events: all !important } @media(max-width: 385px){ .element[data-type=gimmick-canvas] [type=range]::-webkit-slider-thumb { height: 12px; width: 12px; } } .element[data-type=image] img { width: calc(100% * var(--s)); height: calc(100% * var(--s)); transform: scale(calc(1 / var(--s))) translateZ(0); } @-moz-document url-prefix() { .element[data-type=image] img { min-height: calc(100% * var(--s)); min-width: calc(100% * var(--s)); } } .element[data-type=majorityvote] .innerTalking p:not(.activeTalk){ display: none } .element[data-type=majorityvote] .innerTalking:hover { cursor: pointer } .element.disableTmp { pointer-events: none } .completionCasso { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--co); align-items: center; justify-content: center; opacity: 0; pointer-events: none; display: flex; transition: opacity 0.3s ease } .completionCasso button { -webkit-appearance: none; appearance: none; background: #fff; color: var(--co); border: 1px solid #fff; font-family: 'Yantramanav'; font-size: 1em; padding: 0.3em 0.8em; transition: all 0.3s ease } .completionCasso button:hover { transform: scale(1.1); cursor: pointer } .element[data-type=gimmick-canvas].doneArt .completionCasso { pointer-events: all; opacity: 1; } .element[data-sound] { pointer-events: all !important } .element[data-sound]:hover { cursor: pointer } .element[data-type=spotify]:hover .imgWrap i { transform: translate(-50%,-50%) scale(1.1) } .cursorMode .cursorReal { background-image: var(--cu); height: 32px; width: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; position: fixed; top: 100px; left: 100px; z-index: 999999999999999999999; pointer-events: none; } .cursorMode,.cursorMode * { cursor: none !important } .spotSearch { background: #18181b; max-height: 270px; position: fixed; bottom: -120vh; left: 0; right: 0; max-width: 420px; margin: 0 auto; border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 15px; height: 100%; opacity: 0; transition: bottom 0.3s ease } .spotSearch.bringUp { bottom: 0; opacity: 1; } .spotSearch .closer { background: #000; position: absolute; top: 0; left: 50%; transform: translate(-50%,-100%); color: #fff; height: 30px; width: 40px; border-top-left-radius: 5px; border-top-right-radius: 5px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .spotSearch .closer:hover { opacity: 0.8; cursor: pointer } .innerSpotSearch { overflow-y: scroll; height: 100% } .searchWrap { position: sticky; top: 0px; display: grid; grid-template-columns: auto 1fr; grid-gap: 10px; color: #8d8d8f; background: #27272a; border-radius: 40px; overflow: hidden } .searchWrap input { background: #27272a; width: 100%; font-family: 'Yantramanav'; padding: 8px 8px; border: 0; font-size: 14px; color: #fff } .searchWrap input::placeholder { color: #8d8d8f } .searchWrap i { display: inline-flex; align-items: center; justify-content: center; padding-left: 14px; font-size: 13px; } .spotResults { padding: 20px 0; display: grid; grid-gap: 10px } .spotItem { display: grid; grid-template-columns: auto 1fr auto; grid-gap: 20px; color: #fff; padding: 10px; border-radius: 10px; transition: all 0.3s ease } .spotItem:hover { background: rgba(255,255,255,0.05); cursor: pointer } .spotItem img { height: 30px; width: 30px; object-fit: cover; object-position: center; border-radius: 6px; } .spotMeta { color: #cfcfd3; display: grid; grid-gap: 4px; } .spotMeta h5 { font-size: 13px; color: #fff } .spotMeta p { font-size: 13px; } .spotMeta i { font-size: 12px; padding-right: 4px } .spotActions { display: flex; align-items: center } .spotActions i { padding: 4px; font-size: 13px; } .followingDon { transition: all 0.3s ease } .followingDon:hover { opacity: 0.5; cursor: pointer } .element[data-type=windowsplayer] input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; font-size: 1em } .element[data-type=windowsplayer] input[type=range]::-webkit-slider-runnable-track { width: 100%; height: .25em; background: #9b9a99; border-radius: 6.25em; box-shadow: inset .0625em .0625em #000, inset -.0625em -.0625em #9b9a99; } .element[data-type=windowsplayer] input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: .625em; height: 1em; background: #9b9a99; box-shadow: inset .0625em .0625em #9b9a99, inset -.0625em -.0625em #000, inset .125em .125em #9b9a99, inset -.125em -.125em #000; margin-top: -.375em; position: relative; z-index: 1; } .memeInp { justify-content: flex-end } .ff .element[data-type=image] img { background-color: transparent }</style><title>freefirehydrants's strawpage</title></head><body style="--g: 2.34375; --b: url(https://files.strawcdn.com/straw/bTEruiswaJhusnCpyswt.jfif); background-attachment: fixed;"><div class="first" style="--g: 2.34375;"><div class="content" style="height: 1244px;"><div class="element" data-image="contain" style="--x: 0.02666666666666667; --y: 0.02666666666666667; --w: 16; --h: 4; --r: 0; --s: 1.35;" data-uid="vpdaqedhjy" data-type="image"><img src="https://files.strawcdn.com/straw/pIPzsEUJrTQKTejPKcSj.jpg" draggable="false" loading="lazy"></div><div class="element" style="--ts: 2; --x: 2.453333333333333; --y: 0.49333333333333335; --w: 9; --h: 3; --r: 0; --s: 1;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="AB ">AB </p></div></div><div class="element" style="--ts: 2; --x: 3.506666666666667; --y: 0.48; --w: 9; --h: 3; --r: 0; --s: 0.75;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="OUT">OUT</p></div></div><div class="element" style="--ts: 2; --x: 4.866666666666666; --y: 0.48; --w: 9; --h: 3; --r: 0; --s: 1;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="ME">ME</p></div></div><div class="element" style="--ts: 2; --x: 3.6266666666666665; --y: 1.5066666666666666; --w: 9; --h: 3; --r: 0; --s: 1;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="!!!">!!!</p></div></div><div class="element" data-image="contain" style="--x: 8.96; --y: 3.4133333333333336; --w: 7; --h: 10; --r: 0; --s: 1;" data-uid="wwabixxztv" data-type="image"><img src="https://files.strawcdn.com/straw/KuujKOBMxqbBBswCZhpx.jpg" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 0.7466666666666667; --y: 6.64; --w: 6; --h: 9; --r: 0; --s: 1.35;" data-uid="nrxukgputh" data-type="image"><img src="https://files.strawcdn.com/straw/RSxxtQtbwuHKexsyXfaL.jpg" draggable="false" loading="lazy"></div><div class="element" style="--ts: 2; --x: -0.7733333333333333; --y: 4.333333333333333; --w: 9; --h: 3; --r: 0; --s: 0.75;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="I have many interests !!">I have many interests !!</p></div></div><div class="element" style="--ts: 2; --x: -2.84; --y: 5.013333333333334; --w: 9; --h: 3; --r: 0; --s: 0.75;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="such as:">such as:</p></div></div><div class="element" style="--ts: 2; --x: -1.4933333333333334; --y: 5.906666666666666; --w: 9; --h: 3; --r: 0; --s: 0.7;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="HSR, PJSK, PMMM,">HSR, PJSK, PMMM,</p></div></div><div class="element" style="--ts: 2; --x: -1.0266666666666666; --y: 6.666666666666667; --w: 9; --h: 3; --r: 0; --s: 0.7;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="BSD, MOUTH WASHING,">BSD, MOUTH WASHING,</p></div></div><div class="element" style="--ts: 2; --x: -1.0933333333333333; --y: 7.426666666666667; --w: 9; --h: 3; --r: 0; --s: 0.7;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="WUWA, Splatoon, NGE,">WUWA, Splatoon, NGE,</p></div></div><div class="element" style="--ts: 2; --x: -1.0533333333333332; --y: 8.293333333333333; --w: 9; --h: 3; --r: 0; --s: 0.7;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="FFVII and OHSHC!">FFVII and OHSHC!</p></div></div><div class="element" style="--ts: 2; --x: -0.7733333333333333; --y: 10.386666666666667; --w: 9; --h: 3; --r: 0; --s: 0.7;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="I also really like drawing! And boothill.">I also really like drawing! And boothill.</p></div></div><div class="element" data-image="contain" style="--x: 1.2266666666666666; --y: 12.84; --w: 5; --h: 4; --r: 0; --s: 1;" data-uid="zjzawugqca" data-type="image"><img src="https://files.strawcdn.com/straw/sMsfwcWzrGWlcYmIWNwK.jpg" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 8.866666666666667; --y: 11.2; --w: 7; --h: 5; --r: 0; --s: 1;" data-uid="dehlviptik" data-type="image"><img src="https://files.strawcdn.com/straw/iPmGRsWHcfSXeYCCZrBo.jpg" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 10.293333333333333; --y: 0.04; --w: 4; --h: 6; --r: 0; --s: 1;" data-uid="subwraixqn" data-type="image"><img src="https://files.strawcdn.com/straw/MKiMsHgLTCUXrHswHPXr.webp" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 8.28; --y: 15.906666666666666; --w: 7; --h: 4; --r: 0; --s: 1.15;" data-uid="btrcxzvcqj" data-type="image"><img src="https://files.strawcdn.com/straw/GpLTHSnboWDOVqRUuWlT.jfif" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 12.44; --y: 15.893333333333333; --w: 4; --h: 5; --r: 0; --s: 0.55;" data-uid="szaendrhwr" data-type="image"><img src="https://media.tenor.com/3UdZp2Jb250AAAAi/orange-cat.gif" draggable="false" loading="lazy"></div><div class="element" style="--ts: 2; --x: 7.1466666666666665; --y: 15.986666666666666; --w: 6; --h: 2; --r: 0; --s: 0.7;" data-uid="uzwivqzreo" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="For my partner who wanted to be metioned<3">For my partner who wanted to be metioned<3</p></div></div><div class="element" data-image="contain" style="--x: 5.733333333333333; --y: 17.2; --w: 4; --h: 5; --r: 0; --s: 0.45;" data-uid="yoiraxhlum" data-type="image"><img src="https://media.tenor.com/-cOxGkURzFgAAAAo/dang.png" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 11.106666666666667; --y: 15.586666666666666; --w: 3; --h: 3; --r: 0; --s: 0.6;" data-uid="eazbssqqej" data-type="image"><img src="https://media.tenor.com/PeyFTfTIL1sAAAAo/marie.png" draggable="false" loading="lazy"></div><div class="element" style="--ts: 2; --x: 11.253333333333334; --y: 4.746666666666667; --w: 5; --h: 5; --r: 0; --s: 1;" data-uid="weqxteysts" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="I LOVE CATS!!!">I LOVE CATS!!!</p></div></div><div class="element" data-image="contain" style="--x: 10; --y: 8.6; --w: 5; --h: 2; --r: 0; --s: 1.65;" data-uid="crnidxlpqv" data-type="image"><img src="https://media.tenor.com/a0jeJ9pg0p8AAAAo/deadahead-ca.png" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: -0.5666666666666667; --y: 15.853333333333333; --w: 4; --h: 5; --r: 0; --s: 1.25;" data-uid="nevfyinqwo" data-type="image"><img src="https://media.tenor.com/xs8iOxNCAgkAAAAi/splastanp-yeah.gif" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 3.1733333333333333; --y: 17.56; --w: 4; --h: 3; --r: 0; --s: 1;" data-uid="shqkprwwav" data-type="image"><img src="https://media.tenor.com/NA5JKTk5FfwAAAAd/nice-heart.gif" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 4.1066666666666665; --y: 17.506666666666668; --w: 2; --h: 3; --r: 0; --s: 0.8;" data-uid="ikhjklqpfg" data-type="image"><img src="https://files.strawcdn.com/straw/FGrdUrKtclULVJvtNIYN.jpg" draggable="false" loading="lazy"></div><div class="element" style="--x: 8.906666666666666; --y: 22.72; --w: 6.92; --h: 8.32; --r: 0; --s: 1;" data-uid="sawrfnbthz" data-type="gimmick-canvas"><div class="innerCanvas"><div class="toolbox"><i class="fas fa-undo"></i><div class="canvSizing"><input type="range" min="2" max="12" step="2" value="4"></div><span class="canvCol"></span><input type="color" id="colpick"><label for="colpick" style="visibility: hidden; position:absolute"></label></div><div class="picasso"><canvas width="255" height="267"></canvas><div class="completionCasso"><button type="button">get your own drawings!</button></div></div><div class="sendPicasso"><button type="button">Send anonymously 🎨🤫</button></div></div></div><div class="element" data-image="contain" style="--x: 0.9466666666666667; --y: 21.893333333333334; --w: 7; --h: 4; --r: 0; --s: 1.2;" data-uid="kflapfwbde" data-type="image"><img src="https://files.strawcdn.com/straw/XfEUOLcqQtvyUzfzXvqK.jpg" draggable="false" loading="lazy"></div><div class="element" style="--ts: 2; --x: -1.0266666666666666; --y: 22.186666666666667; --w: 9; --h: 3; --r: 0; --s: 0.7;" data-uid="xyqonhuoyt" data-type="wordart"><div class="wordart" data-genre="two"><p data-content="IDK WHAT ELSE TO ADD SO GOODBYE">IDK WHAT ELSE TO ADD SO GOODBYE</p></div></div><div class="element" data-image="contain" style="--x: 2.1066666666666665; --y: 25.213333333333335; --w: 4; --h: 2; --r: 0; --s: 2;" data-uid="cwusmqsqbb" data-type="image"><img src="https://files.strawcdn.com/straw/ZTbnpxRwiUOvqvvZJZPA.png" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 12.946666666666667; --y: 14.743333333333334; --w: 3; --h: 3.9952380952380957; --r: 0; --s: 0.55;" data-uid="yakolsggqx" data-type="image"><img src="https://media.tenor.com/71Pu7i_rUfYAAAAi/pearl-splatoon.gif" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 9.32; --y: 18.946666666666665; --w: 3; --h: 3; --r: 0; --s: 1;" data-uid="cvokshqkcb" data-type="image"><img src="https://media.tenor.com/-wmW9WpdT1sAAAAd/lucio-picmix-lucio.gif" draggable="false" loading="lazy"></div><div class="element" style="--ts: 2; --x: 11.706666666666667; --y: 19.04; --w: 6; --h: 2; --r: 0; --s: 0.55;" data-uid="uzwivqzreo" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="i barely know who this little fart master is">i barely know who this little fart master is</p></div></div><div class="element" style="--ts: 2; --x: 9.606666666666667; --y: 19.72; --w: 6; --h: 2; --r: 0; --s: 1.1;" data-uid="uzwivqzreo" data-type="wordart"><div class="wordart" data-genre="one"><p data-content="<"><</p></div></div></div><div class="spotSearch"><i class="fas fa-times closer"></i><div class="innerSpotSearch"><div class="searchWrap"><i class="fas fa-search"></i><input type="text" placeholder="Search for a song to recommend!"></div><div class="spotResults"></div></div></div></div><a href="https://straw.page?ref=logo"><div class="branding"><img src="https://straw.page/mid-logo.png"><div class="brandingContent" style="display: none;"><p>Make your own StrawPage!</p></div></div></a><script>const debounce = (func, wait) => { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; }; function formatPaint(){ var maxWindow = parseFloat($(".first").css("--mw")); var currentWindow = $(window).width(); if(currentWindow < maxWindow){ var paintRatio = currentWindow/maxWindow; $(".first svg,#drawing svg").each(function(){ var getOldS = parseFloat(1 - paintRatio); $(this).css("--ns",getOldS); }); } else { $(".first svg,#drawing svg").css("--ns",0); } } function makeGrid(){ var getSize = parseFloat($(".content").outerWidth())/16/16; $(".first").css("--g",getSize); gridSize = parseFloat($(".grid").css("--g"))*16; gridDown = false; gridSelected = false; formatPaint(); } makeGrid(); $(window).on("resize",function(){ makeGrid(); }); $('.spotSearch input').keyup(debounce(function(){ var getVal = $('.spotSearch input').val(); $.ajax({ url:"https://straw.page/power/spotify/search", method:"GET", data: {q: getVal}, success:function(data) { $(".spotResults").empty(); for(var i=0;i<data.length;i++){ $(".spotResults").append(`<div class="spotItem"><img src="${data[i].album_image_url}"><div class="spotMeta" data-sound="${data[i].preview}"><h5>${data[i].name}</h5><p><i class="fab fa-spotify"></i>${data[i].artist_list}</p></div></div>`); } } }); },500)); function calculateEditorHeight(){ var getScroll = $(document).scrollTop(); $(".content").css("height",""); var getHeight = $(".content")[0].scrollHeight; var getWindowHeight = $(window).outerHeight(); /*$(".content").css("min-height",getHeight+((getWindowHeight/100)*75));*/ $(".content").css("height",getHeight+80); $(document).scrollTop(getScroll); } calculateEditorHeight(); $(window).on('load',function(){ calculateEditorHeight(); if (typeof umami !== 'undefined') { ok = umami; if (typeof ok.track == "undefined") { ok.track = function () { } } } }); $(document).on("mousemove touchmove",function(e){ var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY; var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; $(".eyeball span").each(function(){ var standardR = parseFloat($(this).closest(".element").css("--r")); var eye = $(this); var eyeX = (eye.offset().left) + (eye.width() / 2); var eyeY = (eye.offset().top) + (eye.height() / 2); rad = Math.atan2(currentX - eyeX, currentY - eyeY); rot = (rad * (180 / Math.PI) * -1) + 180; rot-=standardR; eye.css({ '-webkit-transform': 'rotate(' + rot + 'deg)', '-moz-transform': 'rotate(' + rot + 'deg)', '-ms-transform': 'rotate(' + rot + 'deg)', 'transform': 'rotate(' + rot + 'deg)' }); }); }); if($(window).width() < 5){ $(".branding").mouseover(function(){$(".brandingContent").show(150)}).mouseleave(function(){$(".brandingContent").hide(150)}); } var findr = ['Instagram','Snapchat','FB']; function containsCheck(target, pattern){ var value = 0; pattern.forEach(function(word){ value = value + target.includes(word); }); return (value === 1) } if(containsCheck(navigator.userAgent, findr)){ $(".first").addClass("inst"); }</script><script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js"></script><script src="https://straw.page/min/?g=drawm&n=88"></script><script>var audioElements = {}; var spotEls = {}; $(document).on("click",".element[data-sound]",function(){ if($(this).data("type") == "spotify"){ $(this).toggleClass("playing"); if($(this).hasClass("playing")){ $(this).find(".imgWrap i").attr("class","fas fa-pause"); } else { $(this).find(".imgWrap i").attr("class","fas fa-play"); } } var soundID = $(this).data("sound"); if (!audioElements[soundID]) { audioElements[soundID] = new Audio(soundID); } var audio = audioElements[soundID]; if (audio.paused) { audio.play(); } else { audio.pause(); } }); let userAgent = navigator.userAgent; if(userAgent.match(/firefox|fxios/i)) { $("body").addClass("ff"); } if($(".element[data-type=blog").length > 0){ $.ajax({ type: "GET", url: "blog/fetch/posts", success: function(data) { if(data.length > 0){ for (item of data) { switch(item['type']){ case "post": $(".element[data-type=blog] .innerBlog").append(`<div class="post"><a href="${item.url}"><div class="innerPost">${item.content}<div class="meta"><p>~ ${item.published}</p></div></div></a></div>`); break; } } } } }); } function isTouchDevice() { return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); } function startMajorityVoteTalk(closestEl = null) { var targetElements = closestEl ? $(closestEl).find(".activeTalk") : $(".activeTalk"); targetElements.each(function() { var talkCtx = this; var getText = $(this).data("talk").trim(); $(this).text(""); $(this).closest(".element").addClass("disableTmp"); for (let i = 0; i < getText.length; i++) { setTimeout(function() { if ($(talkCtx).text().length === i) { $(talkCtx).append(getText[i]); } if (i === getText.length - 1) { $(talkCtx).closest(".element").removeClass("disableTmp"); } }, 20 * i); } }); } $(".element[data-type=majorityvote").each(function(){ $(this).find(".innerTalking p").eq(0).addClass("activeTalk"); startMajorityVoteTalk(); }); if($(".element[data-type=friends").length > 0){ $.ajax({ url:"/get/following", method:"GET", success:function(data) { $(".innerFriendsList").empty(); $(".innerFriendsList").each(function(){ for(var i=0;i<data.sites.length;i++){ $(this).append(`<div class="followingDon" data-site="${data.sites[i].site}"><a href="https://${data.sites[i].site}.straw.page"><div class="innerFollowingDon"><img src="${data.sites[i].pic}" />${data.sites[i].site.length > 7 ? '<div class="marquee" data-fun-text="'+data.sites[i].site+'"></div>' : '<p>'+data.sites[i].site+'</p>'}</div></a></div>`); } }); } }); } $(document).on("click",".innerTalking",function(){ var ctxTalk = $(this).find(".activeTalk"); var ctxScene = $(this).closest(".scene"); var closestEl = $(this).closest(".element"); if($(ctxTalk).next("p").length > 0){ $(ctxTalk).empty(); $(ctxTalk).removeClass("activeTalk"); $(ctxTalk).next("p").addClass("activeTalk"); startMajorityVoteTalk(closestEl); } else { if($(ctxScene).next(".scene").length>0){ $(ctxScene).next(".scene").addClass("active"); $(ctxScene).find(".activeTalk").removeClass("activeTalk"); $(ctxScene).removeClass("active"); $(ctxScene).next(".scene").find(".innerTalking p").eq(0).addClass("activeTalk"); startMajorityVoteTalk(closestEl); } else { $(".activeTalk").removeClass("activeTalk"); $(this).closest(".element").find(".active").removeClass("active"); $(this).closest(".element").find(".scene").eq(0).addClass("active"); $(this).closest(".element").find(".scene.active .innerTalking p").eq(0).addClass("activeTalk"); startMajorityVoteTalk(closestEl); } } }); var amaCtx; $(document).on("click",".spotItem",function(){ $(amaCtx).find("img").remove(); $(amaCtx).find(".askExtra").append(`<img src="${$(this).find("img").attr("src")}">`); $(amaCtx).data("song",$(this).find("h5").text()); $(amaCtx).data("artist",$(this).find("p").text()); $(amaCtx).data("sound",$(this).find(".spotMeta").attr("data-sound")); $(".spotSearch").removeClass("bringUp"); }); $(document).on("click",".askExtra",function(){ amaCtx = $(this).closest(".element"); $(".spotSearch").addClass("bringUp"); }); $(document).on("click",".spotSearch .closer",function(){ $(".spotSearch").removeClass("bringUp"); }); $(document).on("click",".element[data-scrollto]",function(e){ e.stopImmediatePropagation(); var getScrollID = $(this).data("scrollto").trim(); $('html, body').animate({ scrollTop: $(`.element[data-uid=${getScrollID}]`).offset().top }, 400); }); function convertRemToPixels(rem) { return rem * parseFloat(getComputedStyle($(".content")[0]).fontSize); } function calculateH(desiredHeight) { const remInPixels = convertRemToPixels(1); const multiplier = 2.34375; const baseHeight = remInPixels * multiplier; const h = desiredHeight / baseHeight; return h; } $(window).on("load",function(){ $(".element[data-type=blogcontent]").each(function(){ var getBound = $(this)[0].getBoundingClientRect(); var oldH = parseFloat($(this).css("--h")); var oldY = parseFloat($(this).css("--y")); var diffH = calculateH(getBound.height) - oldH; $(".element").not(this).each(function(){ var ctxBound = $(this)[0].getBoundingClientRect(); if (ctxBound.left < getBound.right && ctxBound.right > getBound.left) { var ctxY = parseFloat($(this).css("--y")); if(ctxY >= oldY+oldH){ $(this).css("--y",ctxY+diffH); } } }); }); calculateEditorHeight(); }); $(document).on("click","a",function(){ if($(this).find(".element[data-type=button2]").length > 0){ var getLinkText = $(this).text().trim(); ok.track("clicked: " + getLinkText); } }); function findExtraInfo(uid){ for(var i=0; i<extraInfo.length;i++){ if(extraInfo[i].uid == uid){ return extraInfo[i]; } } return false; } var extraInfo = []; $(document).on("click",".memeControls i.fa-plus",function(){ $(this).closest(".element").find(".memeGallery").fadeIn(100); }); $('.memeGallery input').keyup(function() { var self = this; debounce(function(){ var getVal = $(self).val(); $.ajax({ url: "/search/stickers", method: "POST", data: { query: getVal }, success: function(data) { $(self).closest(".element").find(".memeGallResults").empty(); for(var i=0;i<data.gifs.length;i++){ $(self).closest(".element").find(".memeGallResults").append(`<img src="${data.gifs[i]}">`); } } }); }, 300)(); }); $(document).on("click",".memeControls i.fa-plus,.memeInp i",function(){ $(this).closest(".element").find(".memeGallery").toggleClass("showMemeGallery"); }); $('.element[data-type=memegen]').each(function() { const $element = $(this); const $container = $element.find('.officialMemeContainer'); const uniqueID = 'container-' + Math.random().toString(36).substr(2, 9); $container.attr('id', uniqueID); const stage = new Konva.Stage({ container: uniqueID, width: $container.outerWidth(), height: $container.outerHeight() }); const layer = new Konva.Layer(); stage.add(layer); const bgImageSrc = $(this).data("img");; const bgImage = new Image(); bgImage.crossOrigin = "anonymous"; bgImage.src = bgImageSrc; let backgroundImage; bgImage.onload = function() { const canvasWidth = stage.width(); const canvasHeight = stage.height(); const imgWidth = bgImage.width; const imgHeight = bgImage.height; const scale = Math.max(canvasWidth / imgWidth, canvasHeight / imgHeight); const scaledWidth = imgWidth * scale; const scaledHeight = imgHeight * scale; const x = (canvasWidth - scaledWidth) / 2; const y = (canvasHeight - scaledHeight) / 2; backgroundImage = new Konva.Image({ image: bgImage, x: x, y: y, width: scaledWidth, height: scaledHeight, listening: false, }); layer.add(backgroundImage); layer.moveToBottom(); layer.draw(); }; $element.on('click', '.memeGallResults img', function() { const img = new Image(); img.crossOrigin = "anonymous"; img.src = $(this).attr('src'); $(this).closest(".memeGallery").removeClass("showMemeGallery"); img.onload = function() { const maxSize = 100; let scaleFactor = 1; if (img.width > img.height) { scaleFactor = maxSize / img.width; } else { scaleFactor = maxSize / img.height; } const scaledWidth = img.width * scaleFactor; const scaledHeight = img.height * scaleFactor; const sticker = new Konva.Image({ image: img, x: (stage.width() - scaledWidth) / 2, y: (stage.height() - scaledHeight) / 2, width: scaledWidth, height: scaledHeight, draggable: true, }); layer.add(sticker); layer.draw(); const tr = new Konva.Transformer({ nodes: [sticker], rotateEnabled: true, enabledAnchors: [ 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right', 'top-center', 'bottom-center', ], flipEnabled: true, stroke: 'black', strokeWidth: 2, anchorStroke: 'black', anchorFill: 'black', anchorSize: 6, borderStroke: 'black', borderStrokeWidth: 1, }); layer.add(tr); layer.draw(); const $stickerButtons = $element.find('.stickerButtons'); sticker.on('click', function() { tr.nodes([sticker]); layer.draw(); $stickerButtons.addClass("showMemeGallery"); }); stage.on('click', function(e) { if (e.target === stage) { tr.nodes([]); layer.draw(); $stickerButtons.removeClass("showMemeGallery"); } }); $stickerButtons.find('.fa-trash').on('click', function() { sticker.destroy(); tr.destroy(); layer.draw(); $stickerButtons.removeClass("showMemeGallery"); }); $stickerButtons.addClass("showMemeGallery"); } }); $element.find('.downloadMeme').on('click', function() { const transformers = stage.find('Transformer'); transformers.forEach(tr => tr.hide()); layer.draw(); const dataURL = stage.toDataURL({ pixelRatio: 3 }); transformers.forEach(tr => tr.show()); layer.draw(); const link = document.createElement('a'); link.href = dataURL; link.download = 'meme.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }); $element.find('.resetMeme').on('click', function() { layer.destroyChildren(); layer.add(backgroundImage); layer.draw(); }); $element.find('.changeBackground').on('click', function() { const input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'; input.onchange = function(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = function(e) { const newBgImage = new Image(); newBgImage.src = e.target.result; newBgImage.crossOrigin = "anonymous"; newBgImage.onload = function() { const canvasWidth = stage.width(); const canvasHeight = stage.height(); const imgWidth = newBgImage.width; const imgHeight = newBgImage.height; const scale = Math.max(canvasWidth / imgWidth, canvasHeight / imgHeight); const scaledWidth = imgWidth * scale; const scaledHeight = imgHeight * scale; const x = (canvasWidth - scaledWidth) / 2; const y = (canvasHeight - scaledHeight) / 2; backgroundImage.image(newBgImage); backgroundImage.width(scaledWidth); backgroundImage.height(scaledHeight); backgroundImage.position({ x: x, y: y }); layer.draw(); }; }; reader.readAsDataURL(file); }; input.click(); }); });</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8e25197cacdb71fd',t:'MTczMTU2NzM2NC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><iframe height="1" width="1" style="position: absolute; top: 0px; left: 0px; border: none; visibility: hidden;"></iframe></body></html>