- 扫描 ID：
- 5365011c-8f85-4d52-9fde-7978a25e4209已完成
- 提交的 URL：
- https://toxichope.straw.page/
- 报告完成时间：
链接 · 找到 2 个
从页面中识别出的传出链接
| 链接 | 文本 |
|---|---|
| https://forms.gle/pgrpDhzwKLQt9xff9 | Click here to visit the form |
| https://straw.page?ref=logo | Make your own StrawPage! |
JavaScript 变量 · 找到 34 个
在页面窗口对象上加载的全局 JavaScript 变量是在函数外部声明的变量，可以从当前范围内的代码中的任何位置访问
| 名称 | 类型 |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| p5 | function |
| Konva | object |
| Sentry | object |
| __SENTRY__ | object |
控制台日志消息 · 找到 0 条
记录到 Web 控制台的消息
HTML
页面的原始 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&n=4174" rel="stylesheet"><script src="https://browser.sentry-cdn.com/8.21.0/bundle.tracing.min.js" integrity="sha384-//RQ1zXc6iJ6QHJksXaHhbj0ly+827NXFWoVrF5RkjwrZVXFKmBXBzU2RATT55TY" crossorigin="anonymous"></script><script src="https://browser.sentry-cdn.com/8.21.0/captureconsole.min.js" integrity="sha384-Q8WC6Si2q4O38qq4ogxCHWJsvgNhCYmxoGPqm1X7dgK6olO0FYnI0oHEWXdPQNnm" crossorigin="anonymous"></script><script> Sentry.init({ dsn: "https://d1e5104d49664616b994770e88886bc5@o4504827788722176.ingest.us.sentry.io/4504827820769280", integrations: [Sentry.captureConsoleIntegration( { levels: ["warn","error"] } )], });</script><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="c72de46a-83fd-4c39-a1b4-f422a0f69a9d"></script><meta property="twitter:title" content="toxichope's strawpage"><meta property="twitter:description" content="toxichope's strawpage"><meta property="og:image" content="https://strawcdn.com/capture/pics/toxichope.straw.page.jpg?v=7076"><meta name="twitter:title" content="toxichope'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/toxichope.straw.page.jpg?v=8815"><meta name="straw:user" content="toxichope"><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>toxichope's strawpage</title></head><body style="--g: 2.34375; --b: #fff4e0; background-attachment: fixed; --mw: 600;"><div class="first" style="--g: 2.34375;"><div class="content" style="height: 2673px;"><div class="element" style="--x: -0.04; --y: 6.56; --w: 16.173333333333332; --h: 19.013333333333332; --r: 0; --s: 1; --bl: 0;" data-uid="tmyddjelrq" data-image="contain" data-type="image"><img src="https://files.strawcdn.com/straw/VhgvhihRZUWiIokbnUTW.png" draggable="false" loading="lazy"></div><div class="element" style="--ts: 1.5; --x: 0.037083333333333336; --y: 2.22625; --w: 16; --h: 2; --r: 0; --s: 1; --f: Yantramanav; --ta: center;" data-uid="tubyptdxyn" data-type="text"><div class="el_content"><p>Friday, November 13</p></div></div><div class="container" data-type="container"><div class="element" style="--ts: 1.1; --x: 14.4533; --y: 0.653333; --w: 1; --h: 1; --r: 0; --s: 1;" data-uid="ukjumgwzmi" data-type="icon"><div class="el_content"><i class="fas fa-battery-half"></i></div></div><div class="element" style="--ts: 1.1; --x: 13.4799; --y: 0.63999; --w: 1; --h: 1; --r: 0; --s: 1;" data-uid="cxlgdzrwff" data-type="icon"><div class="el_content"><i class="fas fa-wifi"></i></div></div></div><div class="element" style="--ts: 6; --f: Bebas Neue; --x: 1.3483333333333334; --y: 3.7316666666666665; --w: 13.35; --h: 3.45; --r: 0; --s: 1.2;" data-uid="hxuebqjxne" data-type="text"><div class="el_content"><p><strong>12:00</strong></p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 0.013333333333333334; --y: 7.593333333333334; --w: 16; --h: 1; --r: 0; --s: 1;" data-uid="icwgvdyapa" data-type="text"><div class="el_content"><p>Hey welcome to my page</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 1.0533333333333337; --y: 9; --w: 9; --h: 9; --r: 0; --s: 1;" data-uid="mtotfzwukh" data-type="text"><div class="el_content"><p></p></div></div><div class="element" style="--x: 1; --y: 9; --w: 14; --h: 0.06666666666666667; --r: 0; --s: 1;" data-uid="wkawdcxnob" data-type="shape"><div class="innerShape"><svg width="1200pt" height="1200pt" version="1.1" viewBox="109.19999694824219,121.19999694824219,970.7999877929688,970.7999877929688" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="--ns: 0;"><path xmlns="http://www.w3.org/2000/svg" d="m109.2 121.2h970.8v970.8h-970.8z"></path></svg></div></div><div class="element" style="--x: 1.0370833333333334; --y: 12.986666666666666; --w: 14; --h: 0.06666666666666667; --r: 0; --s: 1;" data-uid="wkawdcxnob" data-type="shape"><div class="innerShape"><svg width="1200pt" height="1200pt" version="1.1" viewBox="109.19999694824219,121.19999694824219,970.7999877929688,970.7999877929688" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="--ns: 0;"><path xmlns="http://www.w3.org/2000/svg" d="m109.2 121.2h970.8v970.8h-970.8z"></path></svg></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 0.037083333333333336; --y: 11.226666666666667; --w: 16; --h: 1; --r: 0; --s: 1;" data-uid="fqrrdxlgll" data-type="text"><div class="el_content"><p>following</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 1; --y: 11.226666666666667; --w: 3; --h: 1; --r: 0; --s: 1; --ta: center;" data-uid="sklmjxqujk" data-type="text"><div class="el_content"><p>Followers</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 13.479583333333334; --y: 11.219999999999999; --w: 1; --h: 1; --r: 0; --s: 1; --ta: left;" data-uid="pdjpahamem" data-type="text"><div class="el_content"><p>Likes</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 1; --y: 9.850000000000003; --w: 3; --h: 1; --r: 0; --s: 1;" data-uid="cguexksvwb" data-type="text"><div class="el_content"><p>67K</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 0.037083333333333336; --y: 9.84; --w: 16; --h: 1; --r: 0; --s: 1;" data-uid="uhldcgxalt" data-type="text"><div class="el_content"><p>264</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 12.979583333333334; --y: 9.866666666666667; --w: 2; --h: 1; --r: 0; --s: 1;" data-uid="auualytdfm" data-type="text"><div class="el_content"><p>253.7k</p></div></div><div class="element" style="--x: 5.006666666666666; --y: 10; --w: 0.02666666666666667; --h: 2; --r: 0; --s: 1;" data-uid="xztutpjwje" data-type="shape"><div class="innerShape"><svg width="1200pt" height="1200pt" version="1.1" viewBox="109.19999694824219,121.19999694824219,970.7999877929688,970.7999877929688" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="--ns: 0;"><path xmlns="http://www.w3.org/2000/svg" d="m109.2 121.2h970.8v970.8h-970.8z"></path></svg></div></div><div class="element" style="--x: 11.006666666666668; --y: 9.986666666666666; --w: 0.02666666666666667; --h: 2; --r: 0; --s: 1;" data-uid="xztutpjwje" data-type="shape"><div class="innerShape"><svg width="1200pt" height="1200pt" version="1.1" viewBox="109.19999694824219,121.19999694824219,970.7999877929688,970.7999877929688" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="--ns: 0;"><path xmlns="http://www.w3.org/2000/svg" d="m109.2 121.2h970.8v970.8h-970.8z"></path></svg></div></div><div class="element" style="--x: 1; --y: 22; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="wyakynzolb" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview122/v4/21/86/b2/2186b2b3-c7cb-6f43-00bb-d22c0488f3a8/mzaf_3193338623914682253.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/e2/61/f8/e261f8c1-73db-9a7a-c89e-1068f19970e0/16UMGIM67863.rgb.jpg/200x200bb.jpg"></div><h5>Die For You</h5><p><i class="fab fa-spotify"></i>The Weeknd</p></div></div><div class="element" style="--x: 4; --y: 22; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="thgajydadm" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview126/v4/e3/ca/15/e3ca15e0-ee9a-48f1-17d0-d4454a777ac6/mzaf_15398420154067783025.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/7d/63/39/7d6339c5-6ce7-7cf6-5f5b-6f3f3f478817/08UMGIM10308.rgb.jpg/200x200bb.jpg"></div><h5>Lollipop (feat. Static Major)</h5><p><i class="fab fa-spotify"></i>Lil Wayne</p></div></div><div class="element" style="--x: 7; --y: 22; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="pwvzlmcwpp" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview115/v4/50/e9/d7/50e9d798-3a42-f722-3844-95f3751891e9/mzaf_88495725395079396.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/8b/bf/10/8bbf10dc-5dcb-9b81-6ec2-83341286ff72/00602498646717.rgb.jpg/200x200bb.jpg"></div><h5>Mockingbird</h5><p><i class="fab fa-spotify"></i>Eminem</p></div></div><div class="element" style="--x: 10; --y: 22; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="chqvjpdhdw" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview125/v4/3f/cb/c7/3fcbc7cc-0606-7f6e-7fc3-793318cfd1ed/mzaf_16081918663584534594.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/53/a7/7f/53a77fab-c54c-a57b-8130-248fc12d0c80/093624948995.jpg/200x200bb.jpg"></div><h5>In the End</h5><p><i class="fab fa-spotify"></i>LINKIN PARK</p></div></div><div class="element" style="--x: 13; --y: 22; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="eogjbsdspn" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview112/v4/0f/98/18/0f981820-6e59-e57b-579d-39bb5418f50e/mzaf_10253644091974291244.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music/dc/f0/93/mzi.stzaqjgi.jpg/200x200bb.jpg"></div><h5>Stereo Hearts (feat. Adam Levine)</h5><p><i class="fab fa-spotify"></i>Gym Class Heroes</p></div></div><div class="element" style="--x: 1; --y: 25; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="yunlarzdcv" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview221/v4/df/05/e7/df05e74c-c4a1-b6ca-61b0-e2c36df3ebfd/mzaf_9714719170473697657.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music221/v4/d0/ef/b6/d0efb685-73be-fdee-58c9-be655f4cd4fd/24UMGIM51924.rgb.jpg/200x200bb.jpg"></div><h5>Not Like Us</h5><p><i class="fab fa-spotify"></i>Kendrick Lamar</p></div></div><div class="element" style="--x: 4; --y: 25; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="psqkvgmydq" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview116/v4/45/d7/48/45d7481e-8ecb-2156-6de7-fbf9f03d3cfd/mzaf_15555494921995384938.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music126/v4/c2/4c/36/c24c3631-08b8-b576-345a-259b395f8dbd/5054197591464.jpg/200x200bb.jpg"></div><h5>Eyes Closed</h5><p><i class="fab fa-spotify"></i>Ed Sheeran</p></div></div><div class="element" style="--x: 7; --y: 25; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="vgomuywfit" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview126/v4/f3/c1/6d/f3c16d12-c1d4-395d-bbca-b842ce246404/mzaf_15933521505128764720.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music125/v4/c7/d2/78/c7d2787f-5975-9263-fe47-eeebee3c892f/00602537542703.rgb.jpg/200x200bb.jpg"></div><h5>The Monster (feat. Rihanna)</h5><p><i class="fab fa-spotify"></i>Eminem</p></div></div><div class="element" style="--x: 10; --y: 25; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="kfsdjgecsn" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview125/v4/fe/60/e0/fe60e0fe-a89f-1988-56d4-e5451210a742/mzaf_13614870639145642471.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/1f/8b/b0/1f8bb023-f4cd-d4e1-7251-957c6bf2e942/10UMGIM14533.rgb.jpg/200x200bb.jpg"></div><h5>Love the Way You Lie (feat. Rihanna)</h5><p><i class="fab fa-spotify"></i>Eminem</p></div></div><div class="element" style="--x: 13; --y: 25; --w: 2; --h: 2; --r: 0; --s: 1;" data-uid="jnzicngnae" data-sound="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview125/v4/90/0a/91/900a9135-297e-fef8-e7e9-fdeb7b67d6c9/mzaf_14990387018929997499.plus.aac.p.m4a" data-type="spotify"><div class="innerSpotify"><div class="imgWrap"><i class="fas fa-play"></i><img src="https://is1-ssl.mzstatic.com/image/thumb/Music125/v4/c9/29/74/c92974ce-2bdd-4b86-a261-01adc901bb65/mzi.cmambura.jpg/200x200bb.jpg"></div><h5>Say My Name</h5><p><i class="fab fa-spotify"></i>Destiny's Child</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 1; --y: 14; --w: 14; --h: 1; --r: 0; --s: 1; --ta: center;" data-uid="yslztlrdnp" data-fun-markoui="opposite" data-fun-text="About me" data-type="text"><div class="el_content"><p>About me</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 4; --y: 15; --w: 8; --h: 2; --r: 0; --s: 1;" data-uid="wslerpdvvp" data-type="text"><div class="el_content"><p>hey, im hope. single mother of 3 boys</p></div></div><div class="element" style="--ts: 1.2; --f: Bebas Neue; --x: 6; --y: 17; --w: 4; --h: 1; --r: 0; --s: 1;" data-uid="hzjetxrahe" data-type="text"><div class="el_content"><p>My interests</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 4; --y: 17.973333333333333; --w: 8; --h: 1; --r: 0; --s: 1;" data-uid="dtaokpatcz" data-type="text"><div class="el_content"><p>Movies/tv shows | Music <br> travelling | cooking</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 0; --y: 28; --w: 16; --h: 1; --r: 0; --s: 1;" data-uid="nibdpbyeon" data-fun-markoui="normal" data-fun-text="Top Music Picks" data-type="text"><div class="el_content"><p>Top Music Picks</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 1; --y: 30; --w: 7; --h: 1; --r: 0; --s: 1;" data-uid="qzacpwexjh" data-type="text"><div class="el_content"><p>Fill out an NSFW survey </p></div></div><div class="element" style="--ts: 0.9; --x: 7; --y: 30; --w: 1; --h: 1; --r: 0; --s: 1;" data-uid="pqvtcxejud" data-fun-coolblink="true" data-type="icon"><div class="el_content"><i class="fas fa-arrow-down"></i></div></div><a href="https://forms.gle/pgrpDhzwKLQt9xff9" target="_blank"><div class="element" style="--ts: 1; --h: 1.32; --f: Bebas Neue; --x: 1; --y: 31; --w: 7; --r: 0; --s: 1;" data-uid="tbouvqwmnv" data-link="https://forms.gle/pgrpDhzwKLQt9xff9" data-type="button2"><button><i class="fas fa-link"></i><span>Click here to visit the form</span></button></div></a><div class="element" data-image="contain" style="--x: 9; --y: 30; --w: 6; --h: 2; --r: 0; --s: 1;" data-uid="hkjgazeqrq" data-type="image"><img src="https://media4.giphy.com/media/BLLVLetSfovbdQ7Jif/giphy.gif?cid=446e6413hvoo6dv9ztl5a2qf9l9styed48ut7h8my3xxqj88&rid=giphy.gif&ct=s" draggable="false" loading="lazy"></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 6; --y: 35.13333333333333; --w: 9; --h: 2; --r: 0; --s: 1;" data-uid="yhwvwbkrkg" data-type="text"><div class="el_content"><p>Spain, Portugal, Germany, England, France, Denmark, Netherlands, Austria, Belgium, Italy & More</p></div></div><div class="element" style="--ts: 1.1; --f: Bebas Neue; --x: 6; --y: 34; --w: 9; --h: 1; --r: 0; --s: 1;" data-uid="exzszeretn" data-type="text"><div class="el_content"><p>countries I've been to</p></div></div><div class="element" data-image="contain" style="--x: 1; --y: 34; --w: 5; --h: 4; --r: 0;" data-uid="lcfpxalsel" data-type="image"><img src="https://files.strawcdn.com/straw/OoGLWqrHZUfRNsdecDFa.png" draggable="false" loading="lazy"></div><div class="element" style="--x: 1; --y: 45.68; --w: 7.5; --h: 3; --r: 0; --s: 1;" data-uid="pgqywmojdo" data-type="gimmick-ama"><div class="innerUhh"><div class="asker"><input type="text" placeholder="Ask me something!" maxlength="288"><div class="askExtra"><i class="fab fa-spotify"></i></div></div><div class="askerSend"><button type="button">Send anonymously ✍️🤫</button></div></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 9.999999999999998; --y: 45.68; --w: 5; --h: 2; --r: 0; --s: 1;" data-uid="lwrbgpplvm" data-type="text"><div class="el_content"><p>These questions will only be for me</p></div></div><div class="element" style="--ts: 1.1; --x: 8.999999999999998; --y: 45.68; --w: 1; --h: 2; --r: 0; --s: 1;" data-uid="fsxwfoirmz" data-fun-coolblink="true" data-type="icon"><div class="el_content"><i class="fas fa-arrow-left"></i></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 1; --y: 44.68; --w: 7.453333333333333; --h: 1; --r: 0; --s: 1;" data-uid="pamxinggur" data-type="text"><div class="el_content"><p>Ask me Anything</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 10.999999999999998; --y: 47.68; --w: 3; --h: 1; --r: 0; --s: 1;" data-uid="osguzyaqge" data-type="text"><div class="el_content"><p>nsfw </p></div></div><div class="element" style="--ts: 0.9; --x: 12.999999999999998; --y: 47.68; --w: 1; --h: 1; --r: 0; --s: 1;" data-uid="yddlykphtl" data-fun-coolblink="true" data-type="icon"><div class="el_content"><i class="fas fa-check"></i></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 7; --y: 49.68; --w: 8; --h: 1; --r: 0; --s: 1;" data-uid="msgkrxshoi" data-type="text"><div class="el_content"><p>ask Us Anything</p></div></div><div class="element" style="--x: 7.506666666666668; --y: 50.653333333333336; --w: 7.5; --h: 2; --r: 0; --s: 1;" data-uid="deatwmknkp" data-type="gimmick-ama"><div class="innerUhh"><div class="asker"><input type="text" placeholder="Ask us something!" maxlength="288"><div class="askExtra"><i class="fab fa-spotify"></i></div></div><div class="askerSend"><button type="button">Send anonymously ✍️🤫</button></div></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 1; --y: 50.68; --w: 5; --h: 2; --r: 0; --s: 1;" data-uid="idckvnvlcr" data-type="text"><div class="el_content"><p>These questions are for us as a family</p></div></div><div class="element" style="--ts: 1.5; --f: Bebas Neue; --x: 1.9999999999999998; --y: 52.68; --w: 3; --h: 1; --r: 0; --s: 1;" data-uid="ansvqusyhw" data-type="text"><div class="el_content"><p>sfw only</p></div></div><div class="element" style="--ts: 0.8; --x: 4.25; --y: 52.68; --w: 1; --h: 1; --r: 0; --s: 1;" data-uid="rymtlcbrir" data-fun-coolblink="true" data-type="icon"><div class="el_content"><i class="fas fa-exclamation"></i></div></div><div class="element" style="--ts: 1; --x: 6; --y: 50.68; --w: 1; --h: 2; --r: 0; --s: 1;" data-uid="bbfzwhgtsi" data-fun-coolblink="true" data-type="icon"><div class="el_content"><i class="fas fa-arrow-right"></i></div></div><div class="element" style="--x: 1; --y: 59.4; --w: 14; --h: 6; --r: 0; --s: 1;" data-uid="kexpeipzzk" 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="521" height="180"></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" style="--ts: 1.5; --f: Bebas Neue; --x: 0; --y: 66.40000000000026; --w: 16; --h: 1; --r: 0; --s: 1;" data-uid="uqxacbiikf" data-fun-markoui="normal" data-fun-text="Challenge your inner picasso" data-type="text"><div class="el_content"><p>Challenge your inner picasso</p></div></div><div class="element" style="--x: 6.999999999999998; --y: 68.40000000000043; --w: 2; --h: 0.95; --r: 0; --s: 0.55; --eyel: rgba(0,0,0,0);" data-uid="aqlcmfpgpp" data-type="eyes"><div class="eyeball"><span></span></div><div class="eyeball"><span></span></div></div><div class="element" data-image="contain" style="--x: -7.1466666666666665; --y: -2.12; --w: 26.85333333333333; --h: 14.386666666666667; --r: 0; --s: 1;" data-uid="jwwhuvuxvw" data-type="image"><img src="https://files.strawcdn.com/straw/OVCsCxKPiHdFkqvxNwBH.png" draggable="false" loading="lazy"></div><div class="element" style="--ts: 1.3; --f: Bebas Neue; --x: 1.2266666666666666; --y: 39.026666666666664; --w: 6; --h: 5; --r: 0; --s: 1;" data-uid="gjjusnnigo" data-type="text"><div class="el_content"><p>Add your discord username in the ama to actually get an answer</p></div></div><div class="element" data-image="contain" style="--x: 8.386666666666667; --y: 39.413333333333334; --w: 6.973333333333334; --h: 4.266666666666667; --r: 0; --s: 1;" data-uid="dvjprgwkjd" data-type="image"><img src="https://files.strawcdn.com/straw/rpYpqQSjLTDJfZDQjjey.png" draggable="false" loading="lazy"></div><div class="element" style="--ts: 0.8; --x: 7; --y: 41; --w: 1; --h: 1; --r: 0; --s: 1;" data-uid="sqfnulgxls" data-fun-coolblink="true" data-type="icon"><div class="el_content"><i class="fas fa-arrow-right"></i></div></div><div class="element" style="--x: 1.9999999999999998; --y: 54.78666666666666; --w: 12; --h: 3; --r: 0; --s: 1;" data-uid="cdwjxwbaea" data-type="gimmick-ama"><div class="innerUhh"><div class="asker"><input type="text" placeholder="Suggest a song to listen to" maxlength="288"><div class="askExtra"><i class="fab fa-spotify"></i></div></div><div class="askerSend"><button type="button">Send anonymously ✍️🤫</button></div></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>$(document).on("click",".element[data-type=gimmick-ama] button",function(){ var parentCanv = $(this).closest(".element"); var question = $(parentCanv).find("input").val(); var prompt = $(parentCanv).find(".asker input").attr("placeholder"); var music = {}; if(question.length < 1){ return; } if($(parentCanv).find(".askExtra img").length > 0){ music.album = $(parentCanv).find(".askExtra img").attr("src"); music.song = $(parentCanv).data("song"); music.artist = $(parentCanv).data("artist"); music.sound = $(parentCanv).data("sound"); } $(parentCanv).addClass("doneArt"); $.ajax({ type: "POST", url: "/gimmicks/ama", data: { q: question, p: prompt, m: music }, success: function(response) { try { ok.track("sent ama!"); } catch(e){ } $(parentCanv).find(".askerSend button").text("Sent! 😎"); } }); });</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:'8d5224848b3b3845',t:'MTcyOTM1NTMyMS4wMDAwMDA='};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>