Changes to handtrack.scroll.pub

root
root
24 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
+
+
+
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://handtrack.scroll.pub
+ metaTags
+ editButton /edit.html
+ title 3D Hand Mouse Tracker
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "730b58bb-c2a6-40a7-b68e-287c14ca9b67",
+ "object": "chat.completion",
+ "created": 1735431800,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nhandtrack.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://handtrack.scroll.pub\nmetaTags\neditButton /edit.html\ntitle 3D Hand Mouse Tracker\nstyle.css\nbody.html\nscript.js\n---body.html---\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n---style.css---\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background: radial-gradient(circle, #1a1a1a, #000);\n min-height: 100vh;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.hand-container {\n perspective: 1000px;\n transform-style: preserve-3d;\n}\n\n.hand {\n position: relative;\n width: 200px;\n height: 300px;\n transform-style: preserve-3d;\n transform: rotateX(60deg) rotateZ(-30deg);\n transition: transform 0.1s ease-out;\n}\n\n.finger {\n position: absolute;\n width: 20px;\n height: 100px;\n background: #ffcc99;\n border-radius: 10px;\n transform-origin: bottom center;\n box-shadow: 0 0 10px rgba(0,0,0,0.3);\n}\n\n.thumb {\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%) rotateZ(-45deg);\n}\n\n.index {\n left: 60%;\n top: 50%;\n transform: translate(-50%, -50%) rotateZ(-15deg);\n}\n\n.middle {\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.ring {\n left: 40%;\n top: 50%;\n transform: translate(-50%, -50%) rotateZ(15deg);\n}\n\n.pinky {\n left: 30%;\n top: 50%;\n transform: translate(-50%, -50%) rotateZ(30deg);\n}\n\n.palm {\n position: absolute;\n width: 120px;\n height: 120px;\n background: #ffcc99;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 20px rgba(0,0,0,0.3);\n}\n\n.cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n background: #fff;\n border-radius: 50%;\n pointer-events: none;\n box-shadow: 0 0 20px rgba(255,255,255,0.8);\n}\n\n@media (max-width: 768px) {\n .hand {\n transform: rotateX(60deg) rotateZ(-30deg) scale(0.7);\n }\n}\n---script.js---\nconst hand = document.querySelector('.hand');\nconst cursor = document.querySelector('.cursor');\n\ndocument.addEventListener('mousemove', (e) => {\n const x = e.clientX - window.innerWidth / 2;\n const y = e.clientY - window.innerHeight / 2;\n \n const angleX = (y / window.innerHeight) * 60;\n const angleY = -(x / window.innerWidth) * 60;\n \n hand.style.transform = `rotateX(${60 - angleX}deg) rotateY(${angleY}deg) rotateZ(-30deg)`;\n \n cursor.style.left = `${e.clientX}px`;\n cursor.style.top = `${e.clientY}px`;\n});\n\ndocument.addEventListener('touchmove', (e) => {\n const touch = e.touches[0];\n const x = touch.clientX - window.innerWidth / 2;\n const y = touch.clientY - window.innerHeight / 2;\n \n const angleX = (y / window.innerHeight) * 60;\n const angleY = -(x / window.innerWidth) * 60;\n \n hand.style.transform = `rotateX(${60 - angleX}deg) rotateY(${angleY}deg) rotateZ(-30deg)`;\n \n cursor.style.left = `${touch.clientX}px`;\n cursor.style.top = `${touch.clientY}px`;\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 244,
+ "completion_tokens": 1034,
+ "total_tokens": 1278,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 244
+ },
+ "system_fingerprint": "fp_f1afce2943"
+ }
readme.scroll
Changed around line 1
+ # handtrack.scroll.pub
+ Website generated by DeepSeek from prompt: 3D hand that tracks and points the mouse position
script.js
Changed around line 1
+ const hand = document.querySelector('.hand');
+ const cursor = document.querySelector('.cursor');
+
+ document.addEventListener('mousemove', (e) => {
+ const x = e.clientX - window.innerWidth / 2;
+ const y = e.clientY - window.innerHeight / 2;
+
+ const angleX = (y / window.innerHeight) * 60;
+ const angleY = -(x / window.innerWidth) * 60;
+
+ hand.style.transform = `rotateX(${60 - angleX}deg) rotateY(${angleY}deg) rotateZ(-30deg)`;
+
+ cursor.style.left = `${e.clientX}px`;
+ cursor.style.top = `${e.clientY}px`;
+ });
+
+ document.addEventListener('touchmove', (e) => {
+ const touch = e.touches[0];
+ const x = touch.clientX - window.innerWidth / 2;
+ const y = touch.clientY - window.innerHeight / 2;
+
+ const angleX = (y / window.innerHeight) * 60;
+ const angleY = -(x / window.innerWidth) * 60;
+
+ hand.style.transform = `rotateX(${60 - angleX}deg) rotateY(${angleY}deg) rotateZ(-30deg)`;
+
+ cursor.style.left = `${touch.clientX}px`;
+ cursor.style.top = `${touch.clientY}px`;
+ });
style.css
Changed around line 1
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ background: radial-gradient(circle, #1a1a1a, #000);
+ min-height: 100vh;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .hand-container {
+ perspective: 1000px;
+ transform-style: preserve-3d;
+ }
+
+ .hand {
+ position: relative;
+ width: 200px;
+ height: 300px;
+ transform-style: preserve-3d;
+ transform: rotateX(60deg) rotateZ(-30deg);
+ transition: transform 0.1s ease-out;
+ }
+
+ .finger {
+ position: absolute;
+ width: 20px;
+ height: 100px;
+ background: #ffcc99;
+ border-radius: 10px;
+ transform-origin: bottom center;
+ box-shadow: 0 0 10px rgba(0,0,0,0.3);
+ }
+
+ .thumb {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotateZ(-45deg);
+ }
+
+ .index {
+ left: 60%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotateZ(-15deg);
+ }
+
+ .middle {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .ring {
+ left: 40%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotateZ(15deg);
+ }
+
+ .pinky {
+ left: 30%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotateZ(30deg);
+ }
+
+ .palm {
+ position: absolute;
+ width: 120px;
+ height: 120px;
+ background: #ffcc99;
+ border-radius: 50%;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ box-shadow: 0 0 20px rgba(0,0,0,0.3);
+ }
+
+ .cursor {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background: #fff;
+ border-radius: 50%;
+ pointer-events: none;
+ box-shadow: 0 0 20px rgba(255,255,255,0.8);
+ }
+
+ @media (max-width: 768px) {
+ .hand {
+ transform: rotateX(60deg) rotateZ(-30deg) scale(0.7);
+ }
+ }