<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>trans action sarina ~ in MOTION!</title>
</head>
<style>
button:hover {
background: #eee;
}
button {
background: "d6d7d2";
border: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
font-size: 1.2rem;
width: 3rem;
}
body {
display: flex;
flex-direction: column;
margin: 0;
height: 100vh;
align-items: center;
}
div {
display: flex;
gap: 0;
margin: 0.5rem;
box-shadow: 0 8px 8px -4px rgba(0,0,0,.379);
border-radius: 10rem;
width: min-content;
border: 2px black solid
}
img {
object-fit: contain;
overflow: hidden;
width: 100%
}
</style>
<body>
<div>
<button onclick="b.value=Math.max(0,Number(b.value)-1);setImg();" style="border-radius: 10rem 0 0 10rem;">◀</button>
<input type="text" id="b" value="0" oninput="setImg();" style="border: none; border-radius: 0; text-align: center; width: max(4rem, 15vw); font-size: 1.8rem; line-height: 2.5rem;"/>
<button onclick="b.value=Math.min(i.length-1,Number(b.value)+1);setImg();" style="border-radius: 0 10rem 10rem 0;">▶</button>
</div>
<img id="c"/>
<script type="text/javascript">
const i = ["6a2852120c101e2a84e0058a862e1380a29b6638b76027f1b366e8f07de24498i0", "4dd799436dbda3b7c382b3f52ca3f38457c7a5ad83d17f7a9891320f8a77ee91i0", "14a0b38b81f5b9c457d1f8d4ef34e714139854883cf708248eeaf3f45af517d3i0", "777aba3549c36dcf0eeb4d1617d0531ddebd451f3ae36c82735933b212227e63i0", "5feee3d6708c9c434c1b1c3fa14e954b27ddf684a2c24a8443a3e8f54961690di0", "2e35053b4de89e7adb2bf05421d476d367b674f6a0783cb166be8f8181b1c1f1i0", "7c7b61922868a13bad451193a24f0e417238d75084e505a591dbbc6cc5c4d034i0", "55ad847f0011e71d88f5fd74537c01b9cbbf5aad917f54a41b73fe7ea47c9161i0", "54bb420a19b158b89abbecdf8e938da32e0dbbe96fa810095a826458a0b37980i0", "ef3dbffab551ec7ffe8d14b34dc28ccb306b72571b980c6fcf7beff24ade3593i0", "c2b2db0b37b85ed4de024234c6cb02869e4ec27e01932d837027a5ead38ddf13i0", "0a7653b115202ff3cbeae030a1e3fd98824173ddc07d6d62c37db274a8b2520ai0", "fac6ed8fae6bef84738d1de3d9171a15065feb2d3a84a3bc0c5aeabadef59d9di0", "5f8473e20913c42fb14790e69fd3d264f075fc6f056871723b89178399e26be2i0", "ba4c1ed288ade70320f54db5f8252db6fde821595cc3da35ea39f03ff3e4d2dci0", "a7f0d762e4fdc13b766271000a0a3033e828534b593eb30710f86d7ca17842dbi0", "7e61a015de77fb917ce791821fd2fb163190e30b789321a0617a4ccfca810125i0", "6e687a1c6a74e2b502a4b9a5cd0c96a21e228b80f9f24a4f7e1c8a89425ad0a3i0", "a1607a089c827b03b5a7b4b0fbc1499bfc28076dfbf384c1ed51602f0bd5c67ei0", "b3f382e553d6fa3703140c0482a47a98dd617030117a29e7d252f3ddfbb768dbi0", "e0dbb3ff061cc87d5fc8e7e9affda9afa32aa12b1dd5fcffe15fa8807c379806i0", "7d7ff1cfc4f52c111b0929e8ab50b59d512dd590ce95ef1005c9bcda539a04e6i0", "1237df5003bd46fc4457db47a2ea1aff204720fb4ef42f5b3b4efd1bfa325afci0", "a5f47a892b20f0e5021b9d0657657fba65bda0aefa8b79b2ebc655553903900ei0", "a429f2d43357daf8e7b0d156a35295d640c235f74f31cd48b93c3f3ad9f6bb63i0", "9cf1b18982f48e97b6d533b6fb7280825c5f008fef325bd3dbd6648c151c6112i0", "4e1366839b755eac7d9cbf5b50007ffcafc257da212af29821b2bd5717c72aeai0", "e9574d0b139e950c7f70cfc846000e4bd6dde23dd9c1142422b4240cd468e3b7i0", "8eda838aa431fb66249a6e518b38f221c1764bbb340c2a859b55489fb95c51a4i0", "d28a4e08d8dc7a915b864a0a14d2d7d14dd11c05373da222230c8691676df2afi0", "7ba8d3546d400f6f9b3e1615a66c73197c29e673b488b3f396de09864d26642fi0", "a8dcb13c8d1d5b5490dfe6a6ac003abce3e5aa5393cff5eb461f9d6cad254291i0", "e3be8f9d588010c60b4c653b47a097d5012aaa87098ecedb0305e039f14447c8i0", "b8cc4ed65b065d9c133eb1079f697e26298ab3601a1550528b9834d495d5ce80i0", "d13f5d5b22cd1cab1de640b4086f82a048e5503b052ed762925a86d9b89399c4i0", "8277c8d0caa8b1554ce48debee4900c241b4a40c027f142649d9c1bad4b2e173i0", "1a38bf79973a998f5badb0132a8942fc60bd6a29de522a5b039c6fa68e3ddd81i0", "64a3928f7a634cc48d9c799246949fc92a54deedd70e6bb725c3426321b9d5fci0", "3b1726ac3d35ce236cbec9c68fc3678534b74dd2baea43f62d0185be8758aa02i0", "d6a52e65aa694dfcfc385bdd2a3e8f0eac833b8e26e03414dd741abe9777c2a4i0", "045c4037fb09a9ede9201524881c7b1a970a48385caf49024453b532c7414c2fi0", "a369742ec39f8f4ecf823cbeb3a717c8881ca7e68013eaac438df9b8a190d388i0", "298beb4ed9f65b650666ac32c5538eaf98a16394653fe03ae85bde4ff39ab400i0", "6027aee0e1d53f9f3f98d8af60789c1972cd40134ac7d6b1a6f5d0e0121a1211i0", "c1235d347b07319bb38a2fe59528bfccfe95130a209329464aeff8371ed0a974i0", "c366e6d1dd39cdfa2a998481e2297c0cbf37eb996b8291bf58d4bb3cf70a31cdi0", "e7fb24f5294db3e892a4cc93288143d6aea93d050e2c0923bd31e206304a9fbfi0", "4f74743b8abc73a76cb2f1c68e942657781ebf9ad4f97ccc834030f01a4f3c0di0", "2cb300741094d205df738d55a56d6c475fba3efa68cc701b174e0e73da9381f9i0", "fcc49746566e5aa897a84999e6789eb3ec1eac3c42a20dd6ccbbd74c8dee0e21i0", "4c5e2ccca93c669a0d6083307484a597fa0bf0e037983f75bd6f3004abd1d9b5i0", "0eb9fe837d0a7a9ed2afdc9be4bb66c807ee2197c101b08c1b21060e8857749bi0", "e8844158328c33eb2cf5663f9c62898bbc1137ddcc8f69219513c34a8bcaf27ci0", "3d70bf8923d4b9d55279073f643d89146f7f6cdac1fc98fe50f59d3afe544df7i0", "9dd029b66d9a7ecd53e7bd5434d4a55ecc929eb2d4c21c61757e22a8a90a7aa1i0", "5aea82624a7f77df88c770725d57053801921a318aace0f72d011f69bef731edi0", "c2654cab4048a39ac6fac5f0ed1a7e4e7dd9ad920e8c36c32a85b1712c794aaci0", "47d6e0a75f3b405dbd257cd83d52ef342de343126174c9dce68af8bf6df5c607i0", "7b66c4f646f07d21a986916884cc7e3248f28228e71758ff19a02ed0e04d0b1ei0", "b87c0ae0d9781fb91a0c9a5fbd23b8887f8605f17f1e0164562940929844a056i0", "b4c1d9b583f13ba2599a0aa8aec5872b02c895a363822100ab035b275fa6efefi0", "3a47611fb007afa6ef78b48789d54ead8680c626b631e110d4547cbd1cc70224i0", "747d2af860b7399cd575f9f682cec5c5fbef2be904347c8d8cc8cbe3a6c15e70i0", "86945e1a571200ec6d129405e926c45bd0ef2a2639eaa1037953e2eb135368f2i0", "902f8e5c334d813fdb90753b38f40372dab93d92006148b89fb40050b6863f83i0", "1b7723267c1c06d8cea7e877d0b6b7f5c66182b38ff4423b1c4d491bec8df9ebi0", "bfc3d2e00fd64192c6272975811be19196b44b501caff315120424643b9a7ef6i0", "f03a336b23c42d808a603587a983179d862242edbe2b83fd7971130db3d22162i0", "c26f27e8787e0bcb97b9866fb8f9da1aeffd2f05f312dc5438a247de3c015961i0", "fa256ee1f75012da54c32e228b61b6ecbc1e622764ff4c7303cd81a984cbcdd0i0", "288801216598ab45ce1dd0898017812214f52b13460ebb90298a2b4e5c0df947i0", "f92e632c5c4bd5240a432cbe13413686d0b43ee93815a3535f20359fee59597ci0", "0d35c0742a89a49ab6c2f8e679ccc66904ed9347ea5bf5005b5e977e4aff5745i0", "9212fc200a708edd9e2f286e7f881f3c5efe371afc28b92a4c94cacc61005c03i0", "18706a75fd937be21b26faac94febd11470212a53cf34284df6812a54b84137ei0", "49adf3e49b1bc0a68b449141751d6ae9e942d8248bc0c04987479e6cfc5690f4i0", "f298756216d20754289813200b341cf6d9f624458187da07556864b0694465e8i0", "fe34dd52430cc05d174382cf682ee9dd6cebfd90dacffae0604f3a86976f2b89i0", "f6f0ffa6e3a5425eed237e5b53de6934a068d822fa56f16b0e80b086815db0dbi0", "be5604c6386bf3b4f45cdcff3d1a0ba05bc91bf500b87220e80f22ca9ecc186fi0", "5f304069ec498d3024231b8b6074b05d656da33e3b3ac8869265013c2c4fe56ci0", "1d4286e65562f5b221b6bb0dd162249740ba64c0fc474867d586245eab6896d2i0", "a02a899a73965fd5c3abbc5838642c934144ab136f9d8d0a056a743d4a59becci0", "e8b765f97590804836b84749468a36844cef3574a2308120604ad40c84c7f025i0", "1cfff5ae25eed414408c9b8b74f97a65c49334a28fbcc9130de25cec64d1e1f5i0", "29632243ff22be88ff6073e6f01cdaee53a501a04d5a49bb17f3ab5f2a1154b2i0", "62134cbd16288f3df89f9316f123ea8d0fad696f120e5aa138144145ea601ce0i0", "a7371b4277e48df5a6c6957c9f962968eeeeb57d31afa7de2ce597cd770d5ccci0"];
const b = document.querySelector('#b');
setImg();
function setImg() {
let x = parseFloat(b.value);
if (isNaN(x) || x < 0 || x >= i.length || x % 1 != 0) return;
document.querySelector('#c').src = `https://www.ord.io/api/content/${i[x]}`
}
</script>
</body>
</html>