A Pen by jadibrahim on CodePen.
Created
July 14, 2022 22:54
-
-
Save jadibrahim/2f4cfb6c46c7194138d77eda15cc8d8f to your computer and use it in GitHub Desktop.
xxLQBQd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <!-- <div class="window"> --> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 396.5 1100" height="600" width="" class="remote"> | |
| <g id="background"> | |
| <path d="M352,0H44A44,44,0,0,0,0,44V1056a44,44,0,0,0,44,44H352a44,44,0,0,0,44-44V44A44,44,0,0,0,352,0ZM110,792a66,66,0,1,1,66-66h0a65.94,65.94,0,0,1-65.88,66Zm0-176a66,66,0,1,1,66-66h0a65.94,65.94,0,0,1-65.88,66Zm0-176a65.94,65.94,0,1,1,.12,0ZM352,726a66,66,0,0,1-132,0V550a66,66,0,0,1,132,0ZM286,440a65.94,65.94,0,1,1,.12,0Z" style="fill:#111" /> | |
| <path d="M396.5,460.5H.5V44.5a44.13,44.13,0,0,1,44-44h308a44.13,44.13,0,0,1,44,44Z" style="fill:#232323" /> | |
| <path d="M285.3,792a65.94,65.94,0,0,0,66-65.88V551c0-35.4-27.6-65.3-63-66.9A66,66,0,0,0,219.37,547c-.05,1-.07,2-.07,3V726a66,66,0,0,0,66,66" style="fill:#111;stroke:#1e1e1e;stroke-miterlimit:10;stroke-width:4px" /> | |
| </g> | |
| <g id="playpause" class="zoom" name="Play"> | |
| <!-- <circle cx="111.5" cy="725.73" r="66" style="fill:#111;fill-opacity:0" /> --> | |
| <circle cx="109.83" cy="726.27" r="66" style="fill:#111;stroke:#1e1e1e;stroke-miterlimit:10;stroke-width:4px" /> | |
| <path d="M118,739.77h4.6a2.44,2.44,0,0,0,2-.7,2.59,2.59,0,0,0,.7-2v-27.7a2.44,2.44,0,0,0-.7-2,3,3,0,0,0-2-.7H118a2.44,2.44,0,0,0-2,.7,2.59,2.59,0,0,0-.7,2v27.7a2.44,2.44,0,0,0,.7,2A2.72,2.72,0,0,0,118,739.77Zm16.2,0h4.6a2.44,2.44,0,0,0,2-.7,2.59,2.59,0,0,0,.7-2v-27.7a2.44,2.44,0,0,0-.7-2,3,3,0,0,0-2-.7h-4.6a2.44,2.44,0,0,0-2,.7,2.59,2.59,0,0,0-.7,2v27.7a2.44,2.44,0,0,0,.7,2,2.75,2.75,0,0,0,2,.7Zm-50.7-.59a4.87,4.87,0,0,0,1.2-.21,3.14,3.14,0,0,0,1.2-.59l20.7-12.2a5.69,5.69,0,0,0,1.6-1.41,2.35,2.35,0,0,0,.5-1.59,2.94,2.94,0,0,0-.5-1.6,3.74,3.74,0,0,0-1.6-1.4L85.8,708.07l-1.2-.6a4.43,4.43,0,0,0-1.2-.2,2.87,2.87,0,0,0-2.1.91,3.57,3.57,0,0,0-.9,2.59v25a3.55,3.55,0,0,0,.9,2.6,3.72,3.72,0,0,0,2.23.81Z" style="fill:#fff" /> | |
| </g> | |
| <g id="vol-up" class="zoom" name="VolumeUp"> | |
| <path d="M286.15,484h0A65.85,65.85,0,0,1,352,549.85V615.7H220.3V549.85A65.85,65.85,0,0,1,286.15,484Z" style="fill:#fff;fill-opacity:0" /> | |
| <path d="M259.5,547.5a3,3,0,0,0,.8,2c.6.5,1.2.8,2,1.4h20.3v19.6a2.25,2.25,0,0,0,.8,2,2.45,2.45,0,0,0,2,.8,3,3,0,0,0,2-.8,9.81,9.81,0,0,0,1.3-2V550.9h19.7c.8-.6,1.4-.9,2-1.4a2.45,2.45,0,0,0,.8-2,3,3,0,0,0-.8-2,1.92,1.92,0,0,0-2-.6H288.7V524.5a9.81,9.81,0,0,0-1.3-2,2.56,2.56,0,0,0-2-.8,2.73,2.73,0,0,0-2.8,2.66V544.9H262.3a2.13,2.13,0,0,0-2,.6A2.8,2.8,0,0,0,259.5,547.5Z" style="fill:#fff" /> | |
| </g> | |
| <g id="vol-down" class="zoom" name="VolumeUp"> | |
| <path d="M219.45,660.3h131.7v65.85A65.85,65.85,0,0,1,285.3,792h0a65.85,65.85,0,0,1-65.85-65.85V660.3Z" style="fill:#fff;fill-opacity:0" /> | |
| <path d="M263.9,729.5h46a2.32,2.32,0,0,0,1.4-.4,2.65,2.65,0,0,0,1-1.1,4.13,4.13,0,0,0,.4-1.5,2.81,2.81,0,0,0-.4-1.5,2.65,2.65,0,0,0-1-1.1,2.32,2.32,0,0,0-1.4-.4h-46a2.32,2.32,0,0,0-1.4.4,2.65,2.65,0,0,0-1,1.1,2.81,2.81,0,0,0-.4,1.5,2.35,2.35,0,0,0,.4,1.5,3.51,3.51,0,0,0,1,1.1A2.32,2.32,0,0,0,263.9,729.5Z" style="fill:#fff" /> | |
| </g> | |
| <g id="mic" class="zoom" name="Microphone"> | |
| <circle cx="110.3" cy="549.85" r="66" style="fill:#1e1e1e;fill-opacity:0" /> | |
| <circle cx="110.3" cy="549.85" r="66" style="fill:#111;stroke:#1e1e1e;stroke-miterlimit:10;stroke-width:4px;" /> | |
| <path d="M92.67,548a17.49,17.49,0,0,0,2.1,8.7,16.44,16.44,0,0,0,5.9,6.1,20.69,20.69,0,0,0,8.8,2.7v5.8h-9.8a1.63,1.63,0,0,0-1.3.59,1.92,1.92,0,0,0-.5,1.41,2.37,2.37,0,0,0,.5,1.4,1.64,1.64,0,0,0,1.3.6H122a1.64,1.64,0,0,0,1.3-.6,2.37,2.37,0,0,0,.5-1.4,2.27,2.27,0,0,0-.5-1.41,1.74,1.74,0,0,0-1.3-.59h-9.3v-6.21a17.85,17.85,0,0,0,8.4-2.79,16.43,16.43,0,0,0,5.6-6.41,21,21,0,0,0,2-9.2v-3.8a1.75,1.75,0,0,0-.4-1.2,2,2,0,0,0-2.8-.4,1.9,1.9,0,0,0-.4.4,1.75,1.75,0,0,0-.4,1.2v4.91a15.83,15.83,0,0,1-1.7,7.4,12.17,12.17,0,0,1-4.9,4.9,14.78,14.78,0,0,1-7.4,1.7,15.83,15.83,0,0,1-7.4-1.7,12.81,12.81,0,0,1-4.9-4.9,14.78,14.78,0,0,1-1.7-7.4v-4.91a1.75,1.75,0,0,0-.4-1.2,1.82,1.82,0,0,0-1.6-.8,2.09,2.09,0,0,0-1.6.8,1.75,1.75,0,0,0-.4,1.2Zm18,8.5a8.12,8.12,0,0,0,4.4-1.2,7.5,7.5,0,0,0,2.9-3.21,10.47,10.47,0,0,0,1-4.7v-16.8a9.91,9.91,0,0,0-1-4.7,8.13,8.13,0,0,0-2.9-3.2,8.67,8.67,0,0,0-8.8,0,7.48,7.48,0,0,0-2.9,3.2,10.5,10.5,0,0,0-1.1,4.7v16.8a9.85,9.85,0,0,0,1.1,4.7,8.15,8.15,0,0,0,2.9,3.21,7.29,7.29,0,0,0,4.4,1.18Z" style="fill:#fff" /> | |
| </g> | |
| <g id="tv" class="zoom" name="TV"> | |
| <circle cx="287.6" cy="370.75" r="66" style="fill:#1e1e1e;fill-opacity:0" /> | |
| <circle cx="286.9" cy="371.85" r="66" style="fill:#111;stroke:#1e1e1e;stroke-miterlimit:10;stroke-width:4px" /> | |
| <path d="M263.45,389.79h48.2a6.24,6.24,0,0,0,4.7-1.6,6,6,0,0,0,1.6-4.6v-27.7a6,6,0,0,0-1.6-4.6,6.67,6.67,0,0,0-4.7-1.6h-48.2a6.24,6.24,0,0,0-4.7,1.6,6,6,0,0,0-1.6,4.6v27.7a6,6,0,0,0,1.6,4.6A6.38,6.38,0,0,0,263.45,389.79Zm.3-3.3a2.12,2.12,0,0,1-2.4-1.8,2,2,0,0,1,0-.6v-28a2.12,2.12,0,0,1,1.8-2.4,2,2,0,0,1,.6,0h47.7a2.12,2.12,0,0,1,2.4,1.8,2,2,0,0,1,0,.6v28a2.12,2.12,0,0,1-1.8,2.4,2,2,0,0,1-.6,0Zm10.7,11.5h25.4a1.83,1.83,0,0,0,1.4-.6,2,2,0,0,0,.6-1.5,1.83,1.83,0,0,0-.6-1.4,2,2,0,0,0-1.4-.6h-25.4a1.83,1.83,0,0,0-1.4.6,2.05,2.05,0,0,0,0,2.9,1.67,1.67,0,0,0,1.4.61Z" style="fill:#fff" /> | |
| </g> | |
| <g id="menu" class="zoom" name="Menu"> | |
| <circle cx="109.83" cy="370.75" r="66" style="fill:#111;fill-opacity:0" width="200" /> | |
| <circle cx="110.63" cy="370.75" r="66" style="fill:#111;stroke:#fff;stroke-miterlimit:10;stroke-width:4px" /> | |
| <path d="M64.7,383.2V359.9h3.9l7.1,16.5h.1l7.1-16.5h3.9v23.3H83.3V367h-.2l-6,13.8H74.3l-6-13.8h-.2v16.2Zm42.9,0H93V359.9h14.6v3.3H96.9v6.6H107v3.1H96.9v7h10.7Zm5.3,0V359.9h3.4l10.9,16.7h.2V359.9h3.7v23.3h-3.4l-10.9-16.8h-.2v16.8Zm37.1-4.3a5.31,5.31,0,0,0,1.4-4v-15h3.9v15.3a9.28,9.28,0,0,1-1.1,4.5,7.71,7.71,0,0,1-3.2,3,10.66,10.66,0,0,1-4.8,1.1,10.25,10.25,0,0,1-4.8-1.1,7.92,7.92,0,0,1-4.3-7.5V359.9H141v15a5.74,5.74,0,0,0,1.4,4,4.84,4.84,0,0,0,3.8,1.4,5.24,5.24,0,0,0,3.8-1.4Z" style="fill:#fff" /> | |
| </g> | |
| </svg> | |
| <!-- </div> --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| console.clear(); | |
| const appleTV = $(".zoom"); | |
| console.log($(appleTV)); | |
| // The item (or items) to press and hold on | |
| let timerID; | |
| let counter = 0, | |
| pressHoldEvent = new CustomEvent("pressHold"), | |
| pressHoldDuration = 20, | |
| pressEvent = ["touchstart", "mousedown"], | |
| stopEvent = ["touchend", "mouseend"]; | |
| appleTV.forEach((i) => { | |
| i.addEventListener(["touchstart", "mousedown"], pressingDown, false); | |
| // i.addEventListener("mousedown", pressingDown, false); | |
| i.addEventListener("mouseup", notPressingDown, false); | |
| i.addEventListener("touchend", notPressingDown, false); | |
| i.addEventListener("pressHold", doSomething, false); | |
| }); | |
| function pressingDown(e) { | |
| // Start the timer | |
| requestAnimationFrame(timer); | |
| // e.preventDefault(); | |
| i.classList.add("clicked"); | |
| console.log(`${e} Not pressing!`); | |
| console.log(`${e.srcElement.id} Pressing!"`); | |
| } | |
| function notPressingDown(e) { | |
| // Stop the timer | |
| i.classList.remove("clicked"); | |
| cancelAnimationFrame(timerID); | |
| counter = 0; | |
| console.log(`${e.srcElement.id} Not pressing!`); | |
| } | |
| // | |
| // Runs at 60fps when you are pressing down | |
| // | |
| function timer(e) { | |
| console.log(`${e} Timer tick!`); | |
| if (counter < pressHoldDuration) { | |
| timerID = requestAnimationFrame(timer); | |
| counter++; | |
| // item.style.setProperty("--scale-value", 1 + counter / 50); | |
| } else { | |
| console.log(`${e.srcElement} Press threshold reached!`); | |
| button.dispatchEvent(pressHoldEvent); | |
| } | |
| } | |
| function doSomething(e) { | |
| cancelAnimationFrame(timerID); | |
| counter = 0; | |
| console.log(`${e} pressHold event fired!`); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue"; | |
| -webkit-user-select: none; | |
| background-color: clear; | |
| cursor: default; | |
| } | |
| svg { | |
| filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.6)); | |
| } | |
| body { | |
| overflow: hidden !important; | |
| /* background-color: clear; */ | |
| } | |
| div { | |
| display: content-box; | |
| align-content: center; | |
| padding-top: 20px; | |
| } | |
| /* .remote { | |
| max-height: 50%; | |
| padding: 0; | |
| } */ | |
| .window { | |
| padding: 0px; | |
| border-radius: 6px; | |
| border: 0.06em solid #6d6d6d; | |
| -webkit-box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.7); | |
| } | |
| .button__clicked { | |
| -webkit-transform: scale(0.9) !important; | |
| -webkit-transition: 0s !important; | |
| transform: scale(0.9) !important; | |
| transition: 0s !important; | |
| } | |
| .clicked { | |
| -webkit-transform: scale(0.9) !important; | |
| -webkit-transition: 0s !important; | |
| transform: scale(0.9) !important; | |
| transition: 0s !important; | |
| } | |
| .zoom { | |
| -webkit-transform: scale(1); | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-transition: 0.2s; | |
| transform: scale(1); | |
| transform-origin: 50% 50%; | |
| transition: 0.2s; | |
| transform-box: fill-box; | |
| } | |
| g.zoom:hover { | |
| -webkit-transform: scale(1.1); | |
| -webkit-transition: 0.3s; | |
| transform: scale(1.1); | |
| transition: 0.3s; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment