- 제출된 URL:
- https://geckosmakemedelusional.straw.page/
- 보고서 완료:
링크 · 1개 결과
페이지에서 식별된 외부 링크
| 링크 | 텍스트 |
|---|---|
| https://straw.page?ref=logo | Make your own StrawPage! |
JavaScript 변수 · 32개 결과
페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
| 이름 | 유형 |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| p5 | function |
| Konva | object |
| formatPaint | function |
| makeGrid | function |
콘솔 로그 메시지 · 0개 결과
웹 콘솔에 기록된 메시지
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=2434" 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="771956cc-9dea-41b5-9433-82ec29ce1620"></script><meta property="twitter:title" content="geckosmakemedelusional's strawpage"><meta property="twitter:description" content="geckosmakemedelusional's strawpage"><meta property="og:image" content="https://strawcdn.com/capture/pics/geckosmakemedelusional.straw.page.jpg?v=4523"><meta name="twitter:title" content="geckosmakemedelusional'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/geckosmakemedelusional.straw.page.jpg?v=4411"><meta name="straw:user" content="geckosmakemedelusional"><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>geckosmakemedelusional's strawpage</title></head><body style="--g: 2.34375; --b: #f7e8f7; background-attachment: fixed;"><div class="first" style="--g: 2.34375;"><div class="content" style="height: 975px;"><div class="element" style="--ts: 1; --x: 0.8502213541666667; --y: 3.2666666666666666; --w: 5.7; --h: 1; --r: 0; --s: 1; --co: #444444; --f: Yantramanav;" data-uid="laozakwykv" data-type="text"><div class="el_content"><p><strong>JUST A LIL GUY IN A BIG WORLD!!!</strong></p></div></div><div class="element" data-image="contain" style="--x: -1.3537776692708334; --y: 3.118222249348958; --w: 9.8404443359375; --h: 6.535111083984375; --r: 360; --s: 1;" data-uid="iqesfdirvu" data-type="image"><img src="https://files.strawcdn.com/straw/LmixJZMCTzgxzniKxvpe.png" draggable="false" loading="lazy"></div><div class="element" style="--ts: 1; --x: 8.0786669921875; --y: 2.6666666666666665; --w: 6.6; --h: 1.45; --r: 0; --s: 1; --co: rgba(0,0,0,0); --f: Yantramanav; --bos: 0.06; --boc: #030202; --ta: left; --px: 0.5; --bc: rgba(0,0,0,0);" data-uid="uivelvpguf" data-type="text"><div class="el_content"><p><span style="color:#c85b90;">likes: SPLATOON (in caps), Gunpla, FFXIV, DND uh uh my splatoon oc!! i feel so normal towards splatoon!! TRUST PLEASE!!!!</span></p></div></div><div class="element" style="--ts: 1; --x: 0.8502213541666667; --y: 8.8; --w: 5.7; --h: 1; --r: 0; --s: 1; --co: #444444; --f: Yantramanav;" data-uid="jizyvgvvaq" data-type="text"><div class="el_content"><p>i love her so much shes my creature guy</p></div></div><div class="element" style="--x: 7.8586653645833335; --y: 6.72; --w: 7.5; --h: 2; --r: 0; --s: 1; --co: #d788ca;" data-uid="cyarnkvair" 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="--x: 1.4720003255208334; --y: 10.853333333333333; --w: 13.8613330078125; --h: 13.013333333333334; --r: 0; --s: 1; --co: #a25e5e;" data-uid="bczoncrzkv" 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="515" height="443"></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; --x: 0.4755550130208333; --y: 0.7066666666666667; --w: 13.071111653645833; --h: 1; --r: 0; --s: 1; --co: #444444; --f: Yantramanav;" data-fun-markoui="normal" data-fun-text="NEWS FLASH!!! IM GOING TO PISS ON THE MOON" data-uid="axmoogzcpw" data-type="text"><div class="el_content"><p>NEWS FLASH!!! IM GOING TO PISS ON THE MOON</p></div></div><div class="element" style="--ts: 2.6; --f: Passion One; --co: #ffffff; --x: 0.3333333333333333; --y: 1.9866666666666666; --w: 7; --h: 1; --r: 0; --s: 1; --bc: rgba(0,0,0,0);" data-uid="rfdxxoxdmd" data-type="text"><div class="el_content"><p><span style="color:#c66053;">WELCOME!!!!</span></p></div></div><div class="element" data-image="contain" style="--x: 7.28; --y: 4.906666666666666; --w: 2.026666666666667; --h: 1.5466666666666666; --r: 0; --s: 1;" data-uid="nxmhixiflg" data-type="image"><img src="https://files.strawcdn.com/straw/WKUdLYpuluiGhNjhlifB.png" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 14.04177734375; --y: 4.962222086588541; --w: 1.6764453125; --h: 1.6039998372395834; --r: 28; --s: 1;" data-uid="owpsjofqdv" data-type="image"><img src="https://files.strawcdn.com/straw/ZsQvMhvtnAQmSDmwdYTn.png" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 13.706666666666667; --y: 1.3733333333333333; --w: 2.1066666666666665; --h: 1.6933333333333334; --r: 0; --s: 1;" data-uid="sbuatansih" data-type="image"><img src="https://files.strawcdn.com/straw/nMNShSXOZOzSLWEjsBzE.png" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 9.391111653645833; --y: 9.037333170572916; --w: 3.3813330078125; --h: 1.7066666666666668; --r: 341; --s: 1;" data-uid="igpmjnoojr" data-type="image"><img src="https://files.strawcdn.com/straw/CAHNuJmfinCywYSoQpxH.png" draggable="false" loading="lazy"></div><div class="element" data-image="contain" style="--x: 11.28; --y: 9.146666666666667; --w: 2.1066666666666665; --h: 1.68; --r: 0; --s: 1;" data-type="image"><img src="https://files.strawcdn.com/straw/zVTVllUpqQZmhuCTQSCo.webp" draggable="false" loading="lazy"></div><div class="element" style="--y: 0; --x: -17.14666666666667;" data-type="paint"><svg style="--ns: 0;"><g></g></svg></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:'8ea462025d5e8b37',t:'MTczMjkwMjAyNy4wMDAwMDA='};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>