Monorepo for Tangled
appview/pages: standalone punchcard-playground html
Lewis: May this revision serve well! <lewis@tangled.org>
+309
+309
appview/pages/punchcard-playground.html
+309
appview/pages/punchcard-playground.html
···
1
+
<!doctype html>
2
+
<html lang="en" class="dark:bg-gray-900">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6
+
<title>Punchcard Playground, on Tangled</title>
7
+
<meta name="description" content="Write and preview a punchcard effect for your Tangled profile." />
8
+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHN0eWxlPjpyb290e2NvbG9yOiMwMDB9QG1lZGlhKHByZWZlcnMtY29sb3Itc2NoZW1lOmRhcmspezpyb290e2NvbG9yOiNmZmZ9fTwvc3R5bGU+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjEuMDk3MSAzMC44NjZDMjAuMDU2NiAzMC44NTc1IDE5LjI2MjggMzAuNTU0MiAxOC40MDE2IDMwLjAyNjlDMTcuMTY2OCAyOS4zNzUzIDE2LjIyMzcgMjguMjgwOCAxNS41NDk3IDI3LjA3MzlDMTQuNDc4OSAyOC40MDY1IDEzLjA0NzYgMjkuMjE1IDExLjQ0NTMgMjkuNjcxOEMxMC43NjMgMjkuODcwNSA5LjU2ODA5IDMwLjA3MjEgNy41ODczNyAyOS4zNTIzQzQuNzMyNzcgMjguMzkwNSAyLjY1MzQyIDI1LjQxMTQgMi44ODk3MyAyMi4zNzU4QzIuODQ2NSAyMS4xMTc1IDMuMzAzOTEgMTkuODgyNSAzLjk1MjI3IDE4LjgyMDhDMi4yMjI2NCAxNy44ODk3IDAuODEyMjUxIDE2LjMyNjYgMC4yNzIxNDkgMTQuNDA5OEMtMC4wNTYwNzI4IDEzLjM2MDQgLTAuMDQyMjcxMiAxMi4yMjk5IDAuMDc4NzYyNCAxMS4xNTEyQzAuNTEyMjE1IDguNjA0MjkgMi40MTY5NiA2LjM4OTU2IDQuODY5MTIgNS41OTI5NEM1Ljg0NzkgMy4zNTU3NCA3Ljk4Mzc4IDEuNjg3NDMgMTAuNDAzNyAxLjM0Nzc4QzEyLjAxMDQgMS4xMjMzOCAxMy42NzM1IDEuNDYwNzUgMTUuMDc5MiAyLjI3OTc5QzE3LjEyNzIgMC4wMDE1ODU3MiAyMC42OTUyIC0wLjY3MTY5NyAyMy40MTk1IDAuNzI3NzkzQzI1LjQ5NzggMS43MjMyMiAyNi45ODM5IDMuODAwMDMgMjcuMzQ0NyA2LjA2NDcxQzI5LjMyMjIgNi44NTkyOCAzMC45ODc3IDguNDc5NzEgMzEuNjQxMyAxMC41MzY4QzMyLjA3ODQgMTEuODEwNCAzMi4wOTI5IDEzLjIxMzIgMzEuODA5OCAxNC41MjA5QzMxLjMwNDEgMTYuNTYxNSAyOS44Njc5IDE4LjI5ODcgMjguMDA5IDE5LjI0ODJDMjguMDEzNSAxOS42MTEzIDI5LjIwMzcgMjIuMjI5NiAyOS4wMDQ3IDI0LjIwNTZDMjguOTYxMiAyNi42NzYgMjcuMzk5IDI5LjAxNzIgMjUuMjMyNSAzMC4xNTQ0QzIzLjk2ODMgMzAuODk0NSAyMi40NzAyIDMwLjg4MDUgMjEuMDk3MSAzMC44NjZaTTE1LjE3MzMgMjMuNzU1QzE2LjkyNTYgMjMuNTU5MyAxOC4wNzQzIDIyLjAyNjkgMTguOTY2NSAyMC42NDY5QzE5LjM4ODMgMjAuMDE4MiAxOS43MTA1IDE5LjMxNDYgMjAuMDMwNiAxOC42NDU0QzIwLjQ0NTggMTkuMDI3IDIwLjc5NzUgMTkuNzQ2MSAyMS40NTQxIDE5LjkxNzNDMjIuMTQ1NyAyMC4xMzMzIDIyLjk1NjYgMTkuOTU3OSAyMy4zOCAxOS4zMjc3QzI0LjE5MDIgMTcuODExOCAyMy43OTA4IDE1Ljk4MjcgMjMuMzE5IDE0LjQxMTlDMjMuMDI4NCAxMy41MDk3IDIyLjY0NzIgMTIuNTg0MSAyMS45MjE4IDExLjk0NDZDMjIuMDc2NSAxMC44NSAyMS40Mjk5IDkuNzM4MzQgMjAuNTEwNiA5LjE2NTQyQzE5LjcyNzIgOS43OTE5OCAxOC41MzUyIDkuNzg4MjEgMTcuNzc5NCA5LjExNzk1QzE2LjMzMDkgMTAuNTk5NyAxNS4wMDM0IDEwLjU1MDUgMTMuNzIxMiA5LjM3NjE4QzEzLjQzMzEgOS4xMTIyNiAxMi44ODMyIDEwLjk4NzEgMTAuOTUzNSA5LjkyNTA2QzkuODQ0ODggMTAuODU2NyA4Ljk4NTI2IDExLjc1MyA4LjIyMzU2IDEzLjA0MzVDNy40ODM0MiAxNC40MzQ3IDYuNzA4MjkgMTUuNjcwMyA2LjY0MTUxIDE3LjE4MTFDNi42MDk0IDE4LjA2NDEgNy4yOTczMSAxOC45ODkyIDguMjI5NDIgMTguOTE3NEM5LjE2MTA1IDE5LjAwMDkgOS43OTUyIDE4LjA4MTMgMTAuNTAwNiAxNy42OTkzQzEwLjYwNTggMTguOTMxNiAxMC43MjQzIDIwLjI1NTYgMTEuMTM5NSAyMS40NTg3QzExLjYxNjEgMjMuMDE1NSAxMy4yOTQ3IDI0LjAwNSAxNC44ODM1IDIzLjc3ODRDMTQuOTk1OSAyMy43Njk2IDE1LjE3MzMgMjMuNzU1IDE1LjE3MzMgMjMuNzU1Wk0xNi4wODI4IDE5LjEwNjJDMTUuMjMwNiAxOC41ODIzIDE1LjY0MDcgMTcuNDQ1MiAxNS42MDY2IDE2LjYxOTNDMTUuNjkxNCAxNS42MjI3IDE1Ljc1OTQgMTQuNTc1IDE2LjIwNjEgMTMuNjY3QzE2LjY3ODggMTMuMDE5NyAxNy44MzE4IDEzLjI2OTQgMTcuODgyNyAxNC4wOTk5QzE3Ljg0ODggMTQuOTM1MyAxNy40NjY0IDE1Ljc2NyAxNy41MTIxIDE2LjYzM0MxNy40MTI5IDE3LjM1NjEgMTcuNTgzOSAxOC4xNjg0IDE3LjI2NSAxOC44MjkzQzE3LjAwMzMgMTkuMTk1IDE2LjQ3MDMgMTkuMzAxMyAxNi4wODI4IDE5LjEwNjJaTTEyLjM2MDYgMTguNjMwMkMxMS41NTc4IDE4LjE5MzMgMTEuODEyOSAxNy4wOTQxIDExLjY4NyAxNi4zMjk4QzExLjc5MTQgMTUuNDQ1IDExLjcwNDUgMTQuMzIyNiAxMi40NDMxIDEzLjcwMjFDMTMuMTY1MyAxMy4xOTY5IDE0LjE0ODUgMTQuMDYyMSAxMy44MDY5IDE0Ljg1NjRDMTMuNDQyNiAxNS44NjAyIDEzLjY4MTQgMTYuOTU3IDEzLjY4OTEgMTcuOTc0OEMxMy41NTEyIDE4LjU3NTIgMTIuOTExIDE4Ljg5NCAxMi4zNjA2IDE4LjYzMDJaIi8+PC9zdmc+" />
9
+
<link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
10
+
<link rel="stylesheet" href="/static/tw.css" type="text/css" />
11
+
<style>
12
+
@media (min-width: 768px) {
13
+
#editor-pane { height: 100%; }
14
+
}
15
+
#editor { flex: 1 1 auto; min-height: 240px; resize: vertical; }
16
+
#console { flex: 0 0 auto; min-height: 96px; resize: vertical; }
17
+
</style>
18
+
</head>
19
+
<body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
20
+
<header class="w-full shadow-sm dark:text-white bg-white dark:bg-gray-800 pt-[env(safe-area-inset-top)]" style="z-index: 20;">
21
+
<nav class="mx-auto space-x-4 px-6 py-2">
22
+
<div class="flex justify-between p-0 items-center">
23
+
<div id="left-items">
24
+
<a href="https://tangled.org" target="_blank" rel="noopener noreferrer" class="text-2xl no-underline hover:no-underline flex items-center gap-2">
25
+
<span class="flex items-center gap-2">
26
+
<svg class="h-8" viewBox="0 0 118 31" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
27
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.6118 9.75728C79.2832 9.75733 79.8454 9.87208 80.2983 10.101C80.7513 10.3249 81.1161 10.6064 81.3921 10.9448C81.6732 11.278 81.8895 11.6064 82.0405 11.9292H82.1655V9.91353H85.4702V22.0307C85.4702 23.0305 85.2201 23.8668 84.7202 24.5385C84.2203 25.2154 83.5273 25.7251 82.6421 26.0688C81.762 26.4125 80.7488 26.5844 79.603 26.5844C78.5252 26.5844 77.6012 26.4385 76.8306 26.1469C76.065 25.8553 75.4555 25.462 75.0024 24.9672C74.5495 24.4726 74.2551 23.9237 74.1196 23.3198L77.1978 22.9057C77.2915 23.1243 77.4401 23.3303 77.6431 23.5229C77.8461 23.7206 78.1147 23.8824 78.4478 24.0073C78.7861 24.1321 79.1973 24.1947 79.6812 24.1948C80.4049 24.1948 81.0016 24.0227 81.4702 23.6792C81.9441 23.3355 82.1811 22.7701 82.1812 21.9838V19.7885H82.0405C81.8947 20.1217 81.6758 20.4371 81.3843 20.7338C81.0927 21.0306 80.7174 21.273 80.2593 21.4604C79.8012 21.6477 79.2546 21.7416 78.6196 21.7417C77.7188 21.7417 76.8981 21.5332 76.1587 21.1167C75.4244 20.6948 74.8383 20.0514 74.4009 19.187C73.9686 18.3172 73.7524 17.2181 73.7524 15.8901C73.7524 14.5308 73.9738 13.3952 74.4165 12.4838C74.8592 11.5726 75.4479 10.89 76.1821 10.437C76.9216 9.98403 77.7318 9.75728 78.6118 9.75728ZM79.6733 12.4057C79.1269 12.4058 78.6663 12.5544 78.2915 12.851C77.9166 13.1426 77.6326 13.5491 77.4399 14.0698C77.2472 14.5906 77.1509 15.1922 77.1509 15.8745C77.1509 16.5671 77.2472 17.1662 77.4399 17.6713C77.6378 18.1712 77.9218 18.5594 78.2915 18.8354C78.6663 19.106 79.1269 19.2416 79.6733 19.2417C80.2096 19.2417 80.663 19.1087 81.0327 18.8432C81.4076 18.5724 81.6942 18.1868 81.8921 17.687C82.0952 17.1818 82.1968 16.5776 82.1968 15.8745C82.1968 15.1714 82.0978 14.5619 81.8999 14.0463C81.702 13.5256 81.4155 13.1218 81.0405 12.8354C80.6656 12.5491 80.2096 12.4057 79.6733 12.4057Z" />
28
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M98.7397 9.75728C99.531 9.75733 100.268 9.88506 100.95 10.1401C101.637 10.39 102.236 10.7679 102.747 11.2729C103.262 11.778 103.663 12.4137 103.95 13.1792C104.236 13.9395 104.379 14.8303 104.379 15.851V16.7651H96.2085V16.7729C96.2085 17.3666 96.3179 17.8797 96.5366 18.312C96.7606 18.7441 97.0758 19.0776 97.4819 19.312C97.888 19.5461 98.3694 19.6635 98.9263 19.6635C99.2959 19.6635 99.6347 19.6113 99.9419 19.5073C100.249 19.4032 100.512 19.2467 100.731 19.0385C100.95 18.8303 101.116 18.5749 101.231 18.2729L104.309 18.476C104.153 19.2155 103.832 19.8615 103.348 20.4135C102.869 20.9603 102.249 21.3876 101.489 21.6948C100.734 21.9967 99.8609 22.1479 98.8716 22.1479C97.6376 22.1478 96.5754 21.8977 95.6851 21.3979C94.7998 20.8928 94.1173 20.179 93.6382 19.2573C93.159 18.3302 92.9194 17.2338 92.9194 15.9682C92.9194 14.7339 93.159 13.6505 93.6382 12.7182C94.1173 11.7861 94.792 11.0593 95.6616 10.5385C96.5365 10.0179 97.5629 9.75728 98.7397 9.75728ZM98.7935 12.2417C98.2886 12.2417 97.8411 12.3591 97.4507 12.5932C97.0654 12.8223 96.7632 13.1324 96.5444 13.5229C96.3427 13.8784 96.2325 14.2718 96.2124 14.7026H101.247C101.247 14.2235 101.142 13.7989 100.934 13.4292C100.726 13.0595 100.437 12.7702 100.067 12.562C99.7024 12.3486 99.2776 12.2417 98.7935 12.2417Z" />
29
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.187 9.75728C54.8536 9.7573 55.4918 9.83543 56.1011 9.99165C56.7155 10.1479 57.26 10.3902 57.7339 10.7182C58.2128 11.0462 58.5897 11.4685 58.8657 11.9838C59.1417 12.4942 59.2798 13.1063 59.2798 13.8198V21.9135H56.1245V20.2495H56.0308C55.8381 20.6244 55.5802 20.9552 55.2573 21.2417C54.9345 21.5229 54.5463 21.7443 54.0933 21.9057C53.6402 22.0619 53.1166 22.1401 52.5229 22.1401C51.7574 22.1401 51.075 22.0072 50.4761 21.7417C49.8772 21.4709 49.4031 21.0723 49.0542 20.5463C48.7105 20.0152 48.5386 19.3535 48.5386 18.562C48.5386 17.8954 48.661 17.3354 48.9058 16.8823C49.1505 16.4292 49.4839 16.0646 49.9058 15.7885C50.3276 15.5125 50.8068 15.3041 51.3433 15.1635C51.8849 15.0229 52.4527 14.9239 53.0464 14.8667C53.7442 14.7937 54.3069 14.726 54.7339 14.6635C55.1608 14.5958 55.4709 14.4968 55.6636 14.3667C55.8561 14.2365 55.9526 14.0436 55.9526 13.7885V13.7417C55.9526 13.247 55.7963 12.864 55.4839 12.5932C55.1767 12.3224 54.7389 12.187 54.1714 12.187C53.5726 12.187 53.0958 12.3199 52.7417 12.5854C52.3876 12.8458 52.1532 13.174 52.0386 13.5698L48.9604 13.3198C49.1167 12.5907 49.424 11.9603 49.8823 11.4292C50.3406 10.8928 50.9319 10.4812 51.6558 10.1948C52.3848 9.90318 53.2288 9.75728 54.187 9.75728ZM55.9761 16.351C55.872 16.4187 55.7285 16.4813 55.5464 16.5385C55.3694 16.5906 55.1687 16.6401 54.9448 16.687C54.721 16.7286 54.4968 16.7677 54.2729 16.8042C54.0491 16.8354 53.8458 16.8641 53.6636 16.8901C53.273 16.9474 52.9318 17.0386 52.6401 17.1635C52.3485 17.2885 52.1219 17.4578 51.9604 17.6713C51.799 17.8797 51.7183 18.1401 51.7183 18.4526C51.7183 18.9056 51.8824 19.2521 52.2104 19.4917C52.5437 19.7259 52.9658 19.8432 53.4761 19.8432C53.9655 19.8432 54.398 19.7468 54.7729 19.5542C55.1479 19.3563 55.4423 19.0906 55.6558 18.7573C55.8693 18.424 55.9761 18.0463 55.9761 17.6245V16.351Z" />
30
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M117.127 21.9135H113.846V19.9917H113.706C113.549 20.3249 113.328 20.6558 113.042 20.9838C112.76 21.3067 112.393 21.575 111.94 21.7885C111.492 22.0021 110.945 22.1088 110.299 22.1088C109.388 22.1088 108.562 21.8744 107.823 21.4057C107.088 20.9318 106.505 20.2364 106.073 19.3198C105.646 18.398 105.432 17.2676 105.432 15.9292C105.432 14.5542 105.654 13.4109 106.096 12.4995C106.539 11.5829 107.128 10.8979 107.862 10.4448C108.601 9.98651 109.411 9.75728 110.292 9.75728C110.963 9.75729 111.523 9.87189 111.971 10.101C112.424 10.325 112.789 10.6063 113.065 10.9448C113.346 11.2781 113.56 11.6063 113.706 11.9292H113.807V5.91451H117.127V21.9135ZM111.354 12.4057C110.807 12.4057 110.346 12.5542 109.971 12.851C109.596 13.1479 109.312 13.5594 109.12 14.0854C108.927 14.6114 108.831 15.2209 108.831 15.9135C108.831 16.6114 108.927 17.2287 109.12 17.7651C109.318 18.2963 109.601 18.713 109.971 19.0151C110.346 19.3119 110.807 19.4604 111.354 19.4604C111.89 19.4604 112.344 19.3145 112.713 19.0229C113.088 18.726 113.375 18.3119 113.573 17.7807C113.776 17.2495 113.877 16.627 113.877 15.9135C113.877 15.2 113.778 14.5802 113.581 14.0542C113.383 13.5282 113.096 13.1218 112.721 12.8354C112.346 12.549 111.89 12.4057 111.354 12.4057Z" />
31
+
<path d="M45.353 9.91353H47.6108V12.4135H45.353V18.226C45.353 18.5332 45.3999 18.7729 45.4937 18.9448C45.5874 19.1114 45.7177 19.2286 45.8843 19.2963C46.0561 19.364 46.2541 19.3979 46.478 19.3979C46.6342 19.3979 46.7906 19.3849 46.9468 19.3588C47.103 19.3276 47.2228 19.3042 47.3062 19.2885L47.8296 21.7651C47.6629 21.8172 47.4285 21.8771 47.1265 21.9448C46.8244 22.0177 46.4571 22.062 46.0249 22.0776C45.2229 22.1088 44.5196 22.002 43.9155 21.7573C43.3167 21.5125 42.8504 21.1322 42.5171 20.6167C42.1838 20.1011 42.0197 19.4499 42.0249 18.6635V12.4135H40.3843V9.91353H42.0249V7.03951H45.353V9.91353Z" />
32
+
<path d="M90.7808 18.3198C90.786 18.6999 90.8537 18.9761 90.9839 19.1479C91.1193 19.3145 91.3486 19.3979 91.6714 19.3979C91.838 19.3927 91.9683 19.3823 92.062 19.3667C92.1557 19.351 92.2339 19.3302 92.2964 19.3042L92.8276 21.726C92.6558 21.7781 92.4448 21.8328 92.1948 21.8901C91.9501 21.9422 91.6192 21.976 91.2026 21.9917C89.9268 22.0385 88.9839 21.7988 88.3745 21.2729C87.7652 20.7417 87.4579 19.9056 87.4526 18.7651V5.91451H90.7808V18.3198Z" />
33
+
<path d="M68.1138 9.75728C68.947 9.75728 69.6737 9.93962 70.2935 10.3042C70.9132 10.6687 71.395 11.1897 71.7388 11.8667C72.0825 12.5385 72.2544 13.3407 72.2544 14.2729V21.9135H68.9263V14.8667C68.9315 14.1324 68.744 13.5593 68.3638 13.1479C67.9836 12.7313 67.46 12.5229 66.7935 12.5229C66.3456 12.5229 65.9497 12.6193 65.606 12.812C65.2675 13.0047 65.0018 13.286 64.8091 13.6557C64.6216 14.0203 64.5252 14.4605 64.52 14.976V21.9135H61.1919V9.91353H64.3638V12.0307H64.5044C64.77 11.3329 65.2154 10.7807 65.8403 10.3745C66.4653 9.96305 67.2232 9.75728 68.1138 9.75728Z" />
34
+
<path d="M21.0971 30.866C20.0566 30.8575 19.2628 30.5542 18.4016 30.0269C17.1668 29.3753 16.2237 28.2808 15.5497 27.0739C14.4789 28.4065 13.0476 29.215 11.4453 29.6718C10.763 29.8705 9.56809 30.0721 7.58737 29.3523C4.73277 28.3905 2.65342 25.4114 2.88973 22.3758C2.8465 21.1175 3.30391 19.8825 3.95227 18.8208C2.22264 17.8897 0.812251 16.3266 0.272149 14.4098C-0.0560728 13.3604 -0.0422712 12.2299 0.0787624 11.1512C0.512215 8.60429 2.41696 6.38956 4.86912 5.59294C5.8479 3.35574 7.98378 1.68743 10.4037 1.34778C12.0104 1.12338 13.6735 1.46075 15.0792 2.27979C17.1272 0.00158572 20.6952 -0.671697 23.4195 0.727793C25.4978 1.72322 26.9839 3.80003 27.3447 6.06471C29.3222 6.85928 30.9877 8.47971 31.6413 10.5368C32.0784 11.8104 32.0929 13.2132 31.8098 14.5209C31.3041 16.5615 29.8679 18.2987 28.009 19.2482C28.0135 19.6113 29.2037 22.2296 29.0047 24.2056C28.9612 26.676 27.399 29.0172 25.2325 30.1544C23.9683 30.8945 22.4702 30.8805 21.0971 30.866ZM15.1733 23.755C16.9256 23.5593 18.0743 22.0269 18.9665 20.6469C19.3883 20.0182 19.7105 19.3146 20.0306 18.6454C20.4458 19.027 20.7975 19.7461 21.4541 19.9173C22.1457 20.1333 22.9566 19.9579 23.38 19.3277C24.1902 17.8118 23.7908 15.9827 23.319 14.4119C23.0284 13.5097 22.6472 12.5841 21.9218 11.9446C22.0765 10.85 21.4299 9.73834 20.5106 9.16542C19.7272 9.79198 18.5352 9.78821 17.7794 9.11795C16.3309 10.5997 15.0034 10.5505 13.7212 9.37618C13.4331 9.11226 12.8832 10.9871 10.9535 9.92506C9.84488 10.8567 8.98526 11.753 8.22356 13.0435C7.48342 14.4347 6.70829 15.6703 6.64151 17.1811C6.6094 18.0641 7.29731 18.9892 8.22942 18.9174C9.16105 19.0009 9.7952 18.0813 10.5006 17.6993C10.6058 18.9316 10.7243 20.2556 11.1395 21.4587C11.6161 23.0155 13.2947 24.005 14.8835 23.7784C14.9959 23.7696 15.1733 23.755 15.1733 23.755ZM16.0828 19.1062C15.2306 18.5823 15.6407 17.4452 15.6066 16.6193C15.6914 15.6227 15.7594 14.575 16.2061 13.667C16.6788 13.0197 17.8318 13.2694 17.8827 14.0999C17.8488 14.9353 17.4664 15.767 17.5121 16.633C17.4129 17.3561 17.5839 18.1684 17.265 18.8293C17.0033 19.195 16.4703 19.3013 16.0828 19.1062ZM12.3606 18.6302C11.5578 18.1933 11.8129 17.0941 11.687 16.3298C11.7914 15.445 11.7045 14.3226 12.4431 13.7021C13.1653 13.1969 14.1485 14.0621 13.8069 14.8564C13.4426 15.8602 13.6814 16.957 13.6891 17.9748C13.5512 18.5752 12.911 18.894 12.3606 18.6302Z" />
35
+
</svg>
36
+
<span class="font-normal not-italic text-xs rounded bg-gray-100 dark:bg-gray-700 px-1">alpha</span>
37
+
</span>
38
+
</a>
39
+
</div>
40
+
</div>
41
+
</nav>
42
+
</header>
43
+
44
+
<div class="flex-grow">
45
+
<div class="max-w-screen-lg mx-auto flex flex-col gap-4 px-2 md:px-0">
46
+
<main>
47
+
<section class="bg-white dark:bg-gray-800 px-2 py-6 md:p-6 rounded w-full dark:text-white shadow-sm">
48
+
<div class="grid grid-cols-1 md:grid-cols-11 gap-4">
49
+
<div class="md:col-span-3 order-2 md:order-1">
50
+
<div class="flex flex-col gap-4">
51
+
<div id="crop" class="mx-auto overflow-hidden" style="width: 232px; height: 480px;">
52
+
<iframe
53
+
id="stage"
54
+
title="punchcard preview"
55
+
sandbox="allow-scripts"
56
+
scrolling="no"
57
+
style="width: 820px; height: 480px; border: 0; background: transparent;"
58
+
></iframe>
59
+
</div>
60
+
<p class="text-center text-xs text-gray-400 dark:text-gray-500">live preview</p>
61
+
</div>
62
+
</div>
63
+
64
+
<div class="md:col-span-8 order-1 md:order-2">
65
+
<div id="editor-pane" class="flex flex-col gap-3">
66
+
<div class="flex flex-wrap items-center gap-2">
67
+
<button id="run" class="btn-create">Run</button>
68
+
<button id="reset" class="btn">Reset</button>
69
+
<span class="ml-auto text-xs text-gray-500 dark:text-gray-400 font-mono">⌘/Ctrl + Enter</span>
70
+
</div>
71
+
<textarea
72
+
id="editor"
73
+
spellcheck="false"
74
+
autocomplete="off"
75
+
autocapitalize="off"
76
+
placeholder="Write your effect here and hit Run. There's some context & a guide below."
77
+
class="w-full font-mono text-sm"
78
+
></textarea>
79
+
<div class="flex items-center gap-2">
80
+
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Console</p>
81
+
<button id="clear" class="ml-auto text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">clear</button>
82
+
</div>
83
+
<div id="console" class="font-mono text-xs bg-gray-900 text-gray-100 rounded p-3 h-28 overflow-auto whitespace-pre-wrap border border-gray-200 dark:border-gray-700"></div>
84
+
</div>
85
+
</div>
86
+
</div>
87
+
</section>
88
+
89
+
<section class="bg-white dark:bg-gray-800 px-2 py-6 md:p-6 rounded w-full dark:text-white shadow-sm mt-4">
90
+
<div class="prose dark:prose-invert max-w-none">
91
+
<h2>How it works</h2>
92
+
<p>
93
+
An effect is a little JavaScript file that runs whenever someone opens your profile. It ideally visually affects your punchcard, shown as an example above (the grid of dots on top left), and does whatever you like with them. It must be plain browser JavaScript with no imports/libraries, build step (like TypeScript needs), etc, no nothing. Gotta be plain 'n simple!
94
+
</p>
95
+
<p>Here are some details about the layout of the punchcard:</p>
96
+
<ul>
97
+
<li>You get this grid with <code>document.querySelector("[data-punchcard]")</code>.</li>
98
+
<li>Each direct child is a cell, and the dot you actually want to poke at is that cell's <code>firstElementChild</code>.</li>
99
+
<li>To change a dot, set its inline style: <code>dot.style.backgroundColor</code>, <code>dot.style.transform = "scale(2)"</code>, just as some examples.</li>
100
+
<li>There are 28 columns on a narrow screen and 14 on a wide one. Get the count with <code>const cols = matchMedia("(min-width: 768px)").matches ? 14 : 28</code>, and then dot <code>i</code> is at column <code>i % cols</code>, row <code>Math.floor(i / cols)</code>.</li>
101
+
<li>If someone's browser has <code>matchMedia("(prefers-reduced-motion: reduce)").matches</code> set, don't animate, be respectful to user wishes.</li>
102
+
</ul>
103
+
104
+
<p>
105
+
If you're not a programmer, no problem, you can also copy the prompt below into whichever LLM you like, say what you want on the last line, and paste what it spits back out at you back into the editor up top.
106
+
</p>
107
+
<pre style="white-space: pre-wrap; overflow-wrap: anywhere;"><code>I'm making a visual effect for the "punchcard" on Tangled, a dev platform. The punchcard is a grid of small circular dots, like a GitHub contribution graph. I want you to write the animation.
108
+
109
+
Write *one* self-contained vanilla JavaScript ES module.
110
+
111
+
There's a real one running on a live profile that you can read for reference: https://tangled.org/tangled.org/core/blob/master/appview/pages/profile-fx/orrery.js . If you can open it, treat it as a reference. If you can't, the notes below tell you everything you need:
112
+
113
+
How the grid works:
114
+
- Get it with: document.querySelector("[data-punchcard]")
115
+
- Its direct children are cell wrappers. Each wrapper's firstElementChild is the dot <div> you animate.
116
+
- There's one dot per day of the current year, so 365 of them, or 366 in a leap year. Read the actual count off the elements you select rather than hardcoding it.
117
+
- Animate a dot by setting its inline style, for example dot.style.backgroundColor and dot.style.transform = "scale(2)".
118
+
- The grid is 28 columns on narrow screens and 14 on wide ones: const cols = matchMedia("(min-width: 768px)").matches ? 14 : 28. The dot at index i is at column i % cols, row Math.floor(i / cols).
119
+
120
+
Rules:
121
+
- If matchMedia("(prefers-reduced-motion: reduce)").matches, do not animate.
122
+
- One file, vanilla JS only. Absolutely no imports, no libraries, and no build step.
123
+
124
+
Make it: <DESCRIBE YOUR IDEA HERE, such as "a slow aurora of greens and blues", "dots that chase my mouse", "rain falling down the grid"></code></pre>
125
+
126
+
<h2>Submitting it</h2>
127
+
<ol>
128
+
<li>Have a Tangled account.</li>
129
+
<li>Clone/fork the <a href="https://tangled.org/tangled.org/core">Tangled core repository</a>.</li>
130
+
<li>Add your file at <code>appview/pages/profile-fx/<your-username>.js</code>.</li>
131
+
<li> Get your DID, so that you can add one line to <code>profileScripts</code> in <code>appview/state/profile.go</code>: <code>"<your-did>": "/static/profile-fx/<your-username>.js"</code>.</li>
132
+
<li>Open a PR to Tangled core repository. It will be reviewed thoroughly by us, since it'll run in any arbitrary browser!</li>
133
+
<li>Once merged and deployed, your punchcard will run your effect for everyone who views your profile. Ta da!</li>
134
+
</ol>
135
+
</div>
136
+
</section>
137
+
</main>
138
+
</div>
139
+
</div>
140
+
141
+
<footer class="mt-12 pb-[env(safe-area-inset-bottom)]">
142
+
<footer class="w-full px-6 py-4 bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700">
143
+
<div class="max-w-screen-lg mx-auto flex flex-wrap justify-center items-center gap-x-4 gap-y-2 text-sm text-gray-500 dark:text-gray-400">
144
+
<div class="flex items-center justify-center gap-x-2 order-last sm:order-first w-full sm:w-auto">
145
+
<a href="https://tangled.org" class="no-underline hover:no-underline flex items-center">
146
+
<svg class="size-5 text-gray-500 dark:text-gray-400" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
147
+
<path d="M21.0971 30.866C20.0566 30.8575 19.2628 30.5542 18.4016 30.0269C17.1668 29.3753 16.2237 28.2808 15.5497 27.0739C14.4789 28.4065 13.0476 29.215 11.4453 29.6718C10.763 29.8705 9.56809 30.0721 7.58737 29.3523C4.73277 28.3905 2.65342 25.4114 2.88973 22.3758C2.8465 21.1175 3.30391 19.8825 3.95227 18.8208C2.22264 17.8897 0.812251 16.3266 0.272149 14.4098C-0.0560728 13.3604 -0.0422712 12.2299 0.0787624 11.1512C0.512215 8.60429 2.41696 6.38956 4.86912 5.59294C5.8479 3.35574 7.98378 1.68743 10.4037 1.34778C12.0104 1.12338 13.6735 1.46075 15.0792 2.27979C17.1272 0.00158572 20.6952 -0.671697 23.4195 0.727793C25.4978 1.72322 26.9839 3.80003 27.3447 6.06471C29.3222 6.85928 30.9877 8.47971 31.6413 10.5368C32.0784 11.8104 32.0929 13.2132 31.8098 14.5209C31.3041 16.5615 29.8679 18.2987 28.009 19.2482C28.0135 19.6113 29.2037 22.2296 29.0047 24.2056C28.9612 26.676 27.399 29.0172 25.2325 30.1544C23.9683 30.8945 22.4702 30.8805 21.0971 30.866ZM15.1733 23.755C16.9256 23.5593 18.0743 22.0269 18.9665 20.6469C19.3883 20.0182 19.7105 19.3146 20.0306 18.6454C20.4458 19.027 20.7975 19.7461 21.4541 19.9173C22.1457 20.1333 22.9566 19.9579 23.38 19.3277C24.1902 17.8118 23.7908 15.9827 23.319 14.4119C23.0284 13.5097 22.6472 12.5841 21.9218 11.9446C22.0765 10.85 21.4299 9.73834 20.5106 9.16542C19.7272 9.79198 18.5352 9.78821 17.7794 9.11795C16.3309 10.5997 15.0034 10.5505 13.7212 9.37618C13.4331 9.11226 12.8832 10.9871 10.9535 9.92506C9.84488 10.8567 8.98526 11.753 8.22356 13.0435C7.48342 14.4347 6.70829 15.6703 6.64151 17.1811C6.6094 18.0641 7.29731 18.9892 8.22942 18.9174C9.16105 19.0009 9.7952 18.0813 10.5006 17.6993C10.6058 18.9316 10.7243 20.2556 11.1395 21.4587C11.6161 23.0155 13.2947 24.005 14.8835 23.7784C14.9959 23.7696 15.1733 23.755 15.1733 23.755ZM16.0828 19.1062C15.2306 18.5823 15.6407 17.4452 15.6066 16.6193C15.6914 15.6227 15.7594 14.575 16.2061 13.667C16.6788 13.0197 17.8318 13.2694 17.8827 14.0999C17.8488 14.9353 17.4664 15.767 17.5121 16.633C17.4129 17.3561 17.5839 18.1684 17.265 18.8293C17.0033 19.195 16.4703 19.3013 16.0828 19.1062ZM12.3606 18.6302C11.5578 18.1933 11.8129 17.0941 11.687 16.3298C11.7914 15.445 11.7045 14.3226 12.4431 13.7021C13.1653 13.1969 14.1485 14.0621 13.8069 14.8564C13.4426 15.8602 13.6814 16.957 13.6891 17.9748C13.5512 18.5752 12.911 18.894 12.3606 18.6302Z" />
148
+
</svg>
149
+
</a>
150
+
<span>© 2026 Tangled Labs Oy.</span>
151
+
</div>
152
+
<a href="https://blog.tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Blog</a>
153
+
<a href="https://docs.tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Docs</a>
154
+
<a href="https://tangled.org/tangled.org/core" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Source</a>
155
+
<a href="https://tangled.org/brand" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Brand</a>
156
+
<a href="https://chat.tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline" target="_blank" rel="noopener noreferrer">Discord</a>
157
+
<a href="https://bsky.app/profile/tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline" target="_blank" rel="noopener noreferrer">Bluesky</a>
158
+
<a href="https://x.com/tangled_org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline" target="_blank" rel="noopener noreferrer">Twitter (X)</a>
159
+
<a href="https://tangled.org/terms" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Terms</a>
160
+
<a href="https://tangled.org/privacy" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Privacy</a>
161
+
</div>
162
+
</footer>
163
+
</footer>
164
+
165
+
<script>
166
+
const editor = document.getElementById("editor");
167
+
const stage = document.getElementById("stage");
168
+
const crop = document.getElementById("crop");
169
+
const consoleEl = document.getElementById("console");
170
+
171
+
const pad2 = (n) => String(n).padStart(2, "0");
172
+
const daysInYear = (y) => ((y % 4 === 0 && y % 100 !== 0) || y % 400 === 0 ? 366 : 365);
173
+
174
+
const prng = (i) => {
175
+
let x = (i * 2654435761) >>> 0;
176
+
x ^= x >>> 15;
177
+
x = (x * 2246822519) >>> 0;
178
+
x ^= x >>> 13;
179
+
return (x >>> 0) / 4294967295;
180
+
};
181
+
const dummyCount = (i) => (prng(i) < 0.4 ? 0 : Math.floor(Math.pow(prng(i + 777), 2) * 13));
182
+
183
+
const nowMs = Date.now();
184
+
const year = new Date().getFullYear();
185
+
const punches = Array.from({ length: daysInYear(year) }, (_, i) => {
186
+
const date = new Date(year, 0, 1 + i);
187
+
const future = date.getTime() > nowMs;
188
+
const count = future ? 0 : dummyCount(i);
189
+
const theme = future
190
+
? "border border-gray-200 dark:border-gray-700 size-[4px]"
191
+
: count < 1
192
+
? "bg-gray-200 dark:bg-gray-700 size-[4px]"
193
+
: count < 2
194
+
? "bg-green-200 dark:bg-green-900 size-[5px]"
195
+
: count < 4
196
+
? "bg-green-300 dark:bg-green-800 size-[5px]"
197
+
: count < 8
198
+
? "bg-green-400 dark:bg-green-700 size-[6px]"
199
+
: "bg-green-500 dark:bg-green-600 size-[7px]";
200
+
const iso = `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
201
+
return { theme, count, iso };
202
+
});
203
+
const total = punches.reduce((a, p) => a + p.count, 0);
204
+
205
+
const buildCells = () =>
206
+
punches
207
+
.map(
208
+
(p) =>
209
+
'<div class="w-full h-full flex justify-center items-center">' +
210
+
'<div class="aspect-square rounded-full transition-all duration-300 ' +
211
+
p.theme +
212
+
' max-w-full max-h-full" title="' +
213
+
p.iso +
214
+
": " +
215
+
p.count +
216
+
' commits"></div></div>',
217
+
)
218
+
.join("");
219
+
220
+
const BOOTSTRAP = `(() => {
221
+
const send = (level, parts) => {
222
+
const text = parts.map((p) => { try { return typeof p === "string" ? p : JSON.stringify(p); } catch (_) { return String(p); } }).join(" ");
223
+
parent.postMessage({ source: "pc-sandbox", kind: "log", level, text }, "*");
224
+
};
225
+
["log", "info", "warn", "error"].forEach((k) => {
226
+
const orig = console[k] ? console[k].bind(console) : () => {};
227
+
console[k] = (...a) => { send(k, a); orig(...a); };
228
+
});
229
+
window.addEventListener("error", (e) => send("error", [e.message || (e.error && String(e.error)) || "Script error"]));
230
+
window.addEventListener("unhandledrejection", (e) => send("error", ["Unhandled rejection: " + ((e.reason && e.reason.message) || e.reason)]));
231
+
const reportHeight = () => parent.postMessage({ source: "pc-sandbox", kind: "height", value: document.body.scrollHeight }, "*");
232
+
window.addEventListener("load", reportHeight);
233
+
requestAnimationFrame(reportHeight);
234
+
})();`;
235
+
236
+
const buildDoc = (code) => {
237
+
const safe = code.replace(/<\/(script)/gi, "<\\/$1");
238
+
return [
239
+
'<!doctype html><html lang="en"><head><meta charset="utf-8">',
240
+
'<meta name="viewport" content="width=device-width, initial-scale=1">',
241
+
'<link rel="stylesheet" href="/static/tw.css">',
242
+
"<style>html,body{margin:0;background:transparent}body{width:232px}</style>",
243
+
"</head><body>",
244
+
"<div>",
245
+
'<p class="px-2 pb-4 flex gap-2 items-baseline text-base font-medium dark:text-white">Punchcard',
246
+
'<span class="font-mono font-normal text-sm text-gray-500 dark:text-gray-400 ">',
247
+
total.toLocaleString("en-US"),
248
+
" commits</span></p>",
249
+
'<div data-punchcard class="grid grid-cols-28 md:grid-cols-14 gap-y-3 w-full h-full">',
250
+
buildCells(),
251
+
"</div></div>",
252
+
"<script>",
253
+
BOOTSTRAP,
254
+
"<\/script>",
255
+
'<script type="module">',
256
+
safe,
257
+
"<\/script>",
258
+
"</body></html>",
259
+
].join("");
260
+
};
261
+
262
+
const run = () => {
263
+
consoleEl.textContent = "";
264
+
stage.srcdoc = buildDoc(editor.value);
265
+
};
266
+
267
+
const appendConsole = (level, text) => {
268
+
const line = document.createElement("div");
269
+
line.className =
270
+
level === "error"
271
+
? "text-red-400"
272
+
: level === "warn"
273
+
? "text-yellow-400"
274
+
: "text-gray-300";
275
+
line.textContent = (level === "log" ? "" : "[" + level + "] ") + text;
276
+
consoleEl.appendChild(line);
277
+
consoleEl.scrollTop = consoleEl.scrollHeight;
278
+
};
279
+
280
+
window.addEventListener("message", (e) => {
281
+
const d = e.data;
282
+
if (!d || d.source !== "pc-sandbox") return;
283
+
if (d.kind === "height") {
284
+
const h = Math.max(200, d.value) + "px";
285
+
stage.style.height = h;
286
+
crop.style.height = h;
287
+
} else if (d.kind === "log") {
288
+
appendConsole(d.level, d.text);
289
+
}
290
+
});
291
+
292
+
document.getElementById("run").addEventListener("click", run);
293
+
document.getElementById("reset").addEventListener("click", () => {
294
+
editor.value = "";
295
+
run();
296
+
});
297
+
document.getElementById("clear").addEventListener("click", () => (consoleEl.textContent = ""));
298
+
299
+
editor.addEventListener("keydown", (e) => {
300
+
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
301
+
e.preventDefault();
302
+
run();
303
+
}
304
+
});
305
+
306
+
run();
307
+
</script>
308
+
</body>
309
+
</html>