https://freefirehydrants.straw.page/

Scan ID:
13346087-5bc9-4515-8bf0-0c1ae5829ee3Finished
Submitted URL:
https://freefirehydrants.straw.page/
Report Finished:
LinkText
https://straw.page?ref=logoMake your own StrawPage!

JavaScript Variables · 32 found

NameType
0object
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
$function
jQueryfunction
p5function
Konvaobject
formatPaintfunction
makeGridfunction

Console log messages · 0 found

HTML

<!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&amp;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&lt;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="<">&lt;</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&amp;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>