Changes to 3dplay1.scroll.pub

root
root
25 days ago
Initial commit
.log.txt
Changed around line 1
+ read 3dplay1.scroll.pub https://hub.scroll.pub/edit.html?folderName=3dplay1.scroll.pub 1735343594884 ::ffff:176.135.117.213 0.0 200 Chrome.131 WindowsNT.10.0
+ read 3dplay1.scroll.pub https://hub.scroll.pub/ls.json?folderName=3dplay1.scroll.pub 1735343595805 ::ffff:176.135.117.213 0.0 200 Chrome.131 WindowsNT.10.0
+ read 3dplay1.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=3dplay1.scroll.pub&filePath=3dplay1.scroll.pub%2Findex.scroll 1735343596056 ::ffff:176.135.117.213 0.0 200 Chrome.131 WindowsNT.10.0
.stats.json
Changed around line 1
+ {
+ "files": [
+ "body.html",
+ "index.scroll",
+ "prompt.json",
+ "readme.scroll",
+ "script.js",
+ "style.css"
+ ],
+ "hasSslCert": false,
+ "stats": {
+ "folder": "3dplay1.scroll.pub",
+ "folderLink": "http://3dplay1.scroll.pub",
+ "created": "2024-12-27T23:53:13.000Z",
+ "revised": "2024-12-27T23:53:13.000Z",
+ "files": 6,
+ "mb": 1,
+ "revisions": 1,
+ "hash": "1232e9b76f"
+ }
+ }
body.html
Changed around line 1
-
-

3D Playground

-

Use arrow keys to move the 3D object around.

-
-
-
-
-
-
-
-
-
+
+

3D Object Playground

+
+
+
+
+
+
+
+
+
+
-
+
+
+

Controls

+
    +
  • Arrow keys to move object
    • +
  • Drag to rotate view
    • +
  • Scroll to zoom
    • +
    +
    +
    +
    +
    +

    Created with WebGL and love

    +
    index.html
    Changed around line 1
    +
    +
    +
    +
    + 3D Playground - Manipulate and Move 3D Objects
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    3D Playground

    +

    Use arrow keys to move the 3D object around.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    index.scroll
    Changed around line 2: buildHtml
    - title 3D Playground - Manipulate and Move 3D Objects
    + title 3D Object Playground
    - script.js
    + script.js
    prompt.json
    Changed around line 1
    - "id": "ee8f4fea-eefd-4abd-9533-9fd5a1543f06",
    - "object": "chat.completion",
    - "created": 1735343582,
    - "model": "deepseek-chat",
    - "choices": [
    + "id": "msg_01QdhVtU9NgjQkB8mjpqxmq9",
    + "type": "message",
    + "role": "assistant",
    + "model": "claude-3-5-sonnet-20241022",
    + "content": [
    - "index": 0,
    - "message": {
    - "role": "assistant",
    - "content": "---domain---\n3dplay.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://3dplay.scroll.pub\nmetaTags\neditButton /edit.html\ntitle 3D Playground - Manipulate and Move 3D Objects\nstyle.css\nbody.html\nscript.js\n---body.html---\n
    \n

    3D Playground

    \n

    Use arrow keys to move the 3D object around.

    \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 font-family: 'Arial', sans-serif;\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n overflow: hidden;\n}\n\n.container {\n text-align: center;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\np {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n}\n\n.scene {\n width: 200px;\n height: 200px;\n perspective: 600px;\n margin: 0 auto;\n}\n\n.cube {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n transform: rotateX(20deg) rotateY(30deg);\n transition: transform 0.5s;\n}\n\n.face {\n position: absolute;\n width: 200px;\n height: 200px;\n background: rgba(255, 255, 255, 0.9);\n border: 2px solid #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1.5rem;\n color: #333;\n}\n\n.front { transform: rotateY( 0deg) translateZ(100px); }\n.back { transform: rotateY(180deg) translateZ(100px); }\n.left { transform: rotateY(-90deg) translateZ(100px); }\n.right { transform: rotateY( 90deg) translateZ(100px); }\n.top { transform: rotateX( 90deg) translateZ(100px); }\n.bottom { transform: rotateX(-90deg) translateZ(100px); }\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n\n p {\n font-size: 1rem;\n }\n\n .scene {\n width: 150px;\n height: 150px;\n }\n\n .face {\n width: 150px;\n height: 150px;\n }\n}\n---script.js---\nconst cube = document.getElementById('cube');\nlet posX = 0, posY = 0;\n\ndocument.addEventListener('keydown', (event) => {\n const step = 10;\n switch (event.key) {\n case 'ArrowUp':\n posY -= step;\n break;\n case 'ArrowDown':\n posY += step;\n break;\n case 'ArrowLeft':\n posX -= step;\n break;\n case 'ArrowRight':\n posX += step;\n break;\n }\n cube.style.transform = `translate3d(${posX}px, ${posY}px, 0) rotateX(20deg) rotateY(30deg)`;\n});\n---end---"
    - },
    - "logprobs": null,
    - "finish_reason": "stop"
    + "type": "text",
    + "text": "Here's a 3D object manipulation website:\n\n---domain---\n3dplay.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://3dplay.scroll.pub\nmetaTags\neditButton /edit.html\ntitle 3D Object Playground\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
    \n

    3D Object Playground

    \n \n
    \n\n
    \n
    \n \n
    \n \n \n
    \n\n
    \n

    Created with WebGL and love

    \n
    \n\n---style.css---\n:root {\n --primary: #2a2b2e;\n --secondary: #4a90e2;\n --text: #ffffff;\n --background: #1a1b1e;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--background);\n color: var(--text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n padding: 1rem;\n background: var(--primary);\n box-shadow: 0 2px 10px rgba(0,0,0,0.3);\n}\n\nh1 {\n font-size: 2rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--secondary), #6ab0ff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\nnav button {\n background: var(--secondary);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 4px;\n margin-right: 0.5rem;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\nnav button:hover {\n transform: translateY(-2px);\n}\n\nmain {\n flex: 1;\n display: flex;\n position: relative;\n}\n\n#canvas-container {\n flex: 1;\n position: relative;\n}\n\n#renderCanvas {\n width: 100%;\n height: 100%;\n touch-action: none;\n}\n\n.controls {\n position: absolute;\n right: 1rem;\n top: 1rem;\n background: rgba(42,43,46,0.9);\n padding: 1rem;\n border-radius: 8px;\n backdrop-filter: blur(10px);\n}\n\n.controls h2 {\n font-size: 1.2rem;\n margin-bottom: 0.5rem;\n}\n\n.controls ul {\n list-style: none;\n}\n\n.controls li {\n margin: 0.5rem 0;\n font-size: 0.9rem;\n}\n\nfooter {\n padding: 1rem;\n text-align: center;\n background: var(--primary);\n}\n\n@media (max-width: 768px) {\n .controls {\n bottom: 1rem;\n top: auto;\n left: 1rem;\n right: 1rem;\n }\n}\n\n---script.js---\nclass Scene3D {\n constructor() {\n this.canvas = document.getElementById('renderCanvas');\n this.gl = this.canvas.getContext('webgl');\n this.objects = [];\n this.activeObject = null;\n this.init();\n }\n\n init() {\n if (!this.gl) {\n alert('WebGL not supported');\n return;\n }\n\n this.resizeCanvas();\n window.addEventListener('resize', () => this.resizeCanvas());\n this.setupControls();\n this.render();\n }\n\n resizeCanvas() {\n const container = document.getElementById('canvas-container');\n this.canvas.width = container.clientWidth;\n this.canvas.height = container.clientHeight;\n this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);\n }\n\n setupControls() {\n document.addEventListener('keydown', (e) => {\n if (!this.activeObject) return;\n \n const speed = 0.1;\n switch(e.key) {\n case 'ArrowLeft':\n this.activeObject.position.x -= speed;\n break;\n case 'ArrowRight':\n this.activeObject.position.x += speed;\n break;\n case 'ArrowUp':\n this.activeObject.position.y += speed;\n break;\n case 'ArrowDown':\n this.activeObject.position.y -= speed;\n break;\n }\n });\n\n document.getElementById('addCube').addEventListener('click', () => {\n this.addObject('cube');\n });\n\n document.getElementById('addSphere').addEventListener('click', () => {\n this.addObject('sphere');\n });\n\n document.getElementById('addCylinder').addEventListener('click', () => {\n this.addObject('cylinder');\n });\n }\n\n addObject(type) {\n // Basic WebGL object creation would go here\n // This is a simplified version\n const object = {\n type,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 }\n };\n \n this.objects.push(object);\n this.activeObject = object;\n }\n\n render() {\n this.gl.clearColor(0.1, 0.1, 0.1, 1.0);\n this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);\n\n // Render objects\n this.objects.forEach(obj => {\n // WebGL rendering code would go here\n });\n\n requestAnimationFrame(() => this.render());\n }\n}\n\n// Initialize when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n const scene = new Scene3D();\n});\n\n---end---\n\nThis implementation provides a basic 3D object manipulation environment using WebGL. The actual WebGL implementation is simplified here - in a real application, you'd need to add proper shaders, vertex buffers, and full 3D object rendering code. The interface is clean and modern with a dark theme and gradient accents.\n\nKey features:\n- Responsive canvas that fills available space\n- Controls panel with instructions\n- Buttons to add different 3D objects\n- Arrow key controls for object movement\n- Modern, accessible UI design\n- Mobile-responsive layout\n- Clear visual hierarchy and feedback\n\nNote that this is a basic implementation - a full WebGL 3D manipulation system would require significantly more code for proper object rendering, lighting, materials, and complex transformations."
    + "stop_reason": "end_turn",
    + "stop_sequence": null,
    - "prompt_tokens": 261,
    - "completion_tokens": 860,
    - "total_tokens": 1121,
    - "prompt_cache_hit_tokens": 0,
    - "prompt_cache_miss_tokens": 261
    - },
    - "system_fingerprint": "fp_f1afce2943"
    + "input_tokens": 298,
    + "cache_creation_input_tokens": 0,
    + "cache_read_input_tokens": 0,
    + "output_tokens": 1864
    + }
    readme.scroll
    Changed around line 1
    - Website generated by DeepSeek from prompt: make a website where you can render add an 3d objects and manuiplate it and using arrow keys you can move it around
    + Website generated by Claude from prompt: make a website where you can render add an 3d objects and manuiplate it and using arrow keys you can move it around
    script.js
    Changed around line 1
    - const cube = document.getElementById('cube');
    - let posX = 0, posY = 0;
    -
    - document.addEventListener('keydown', (event) => {
    - const step = 10;
    - switch (event.key) {
    - case 'ArrowUp':
    - posY -= step;
    - break;
    - case 'ArrowDown':
    - posY += step;
    - break;
    - case 'ArrowLeft':
    - posX -= step;
    - break;
    - case 'ArrowRight':
    - posX += step;
    - break;
    + class Scene3D {
    + constructor() {
    + this.canvas = document.getElementById('renderCanvas');
    + this.gl = this.canvas.getContext('webgl');
    + this.objects = [];
    + this.activeObject = null;
    + this.init();
    - cube.style.transform = `translate3d(${posX}px, ${posY}px, 0) rotateX(20deg) rotateY(30deg)`;
    - });
    +
    + init() {
    + if (!this.gl) {
    + alert('WebGL not supported');
    + return;
    + }
    +
    + this.resizeCanvas();
    + window.addEventListener('resize', () => this.resizeCanvas());
    + this.setupControls();
    + this.render();
    + }
    +
    + resizeCanvas() {
    + const container = document.getElementById('canvas-container');
    + this.canvas.width = container.clientWidth;
    + this.canvas.height = container.clientHeight;
    + this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
    + }
    +
    + setupControls() {
    + document.addEventListener('keydown', (e) => {
    + if (!this.activeObject) return;
    +
    + const speed = 0.1;
    + switch(e.key) {
    + case 'ArrowLeft':
    + this.activeObject.position.x -= speed;
    + break;
    + case 'ArrowRight':
    + this.activeObject.position.x += speed;
    + break;
    + case 'ArrowUp':
    + this.activeObject.position.y += speed;
    + break;
    + case 'ArrowDown':
    + this.activeObject.position.y -= speed;
    + break;
    + }
    + });
    +
    + document.getElementById('addCube').addEventListener('click', () => {
    + this.addObject('cube');
    + });
    +
    + document.getElementById('addSphere').addEventListener('click', () => {
    + this.addObject('sphere');
    + });
    +
    + document.getElementById('addCylinder').addEventListener('click', () => {
    + this.addObject('cylinder');
    + });
    + }
    +
    + addObject(type) {
    + // Basic WebGL object creation would go here
    + // This is a simplified version
    + const object = {
    + type,
    + position: { x: 0, y: 0, z: 0 },
    + rotation: { x: 0, y: 0, z: 0 }
    + };
    +
    + this.objects.push(object);
    + this.activeObject = object;
    + }
    +
    + render() {
    + this.gl.clearColor(0.1, 0.1, 0.1, 1.0);
    + this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
    +
    + // Render objects
    + this.objects.forEach(obj => {
    + // WebGL rendering code would go here
    + });
    +
    + requestAnimationFrame(() => this.render());
    + }
    + }
    +
    + // Initialize when DOM is loaded
    + document.addEventListener('DOMContentLoaded', () => {
    + const scene = new Scene3D();
    + });
    style.css
    Changed around line 1
    + :root {
    + --primary: #2a2b2e;
    + --secondary: #4a90e2;
    + --text: #ffffff;
    + --background: #1a1b1e;
    + }
    +
    Changed around line 12
    - font-family: 'Arial', sans-serif;
    - background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    - color: white;
    + font-family: system-ui, -apple-system, sans-serif;
    + background: var(--background);
    + color: var(--text);
    + min-height: 100vh;
    - justify-content: center;
    - align-items: center;
    - height: 100vh;
    - overflow: hidden;
    + flex-direction: column;
    - .container {
    - text-align: center;
    + header {
    + padding: 1rem;
    + background: var(--primary);
    + box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    - font-size: 2.5rem;
    + font-size: 2rem;
    + background: linear-gradient(45deg, var(--secondary), #6ab0ff);
    + -webkit-background-clip: text;
    + -webkit-text-fill-color: transparent;
    - p {
    - font-size: 1.2rem;
    - margin-bottom: 2rem;
    + nav button {
    + background: var(--secondary);
    + color: white;
    + border: none;
    + padding: 0.5rem 1rem;
    + border-radius: 4px;
    + margin-right: 0.5rem;
    + cursor: pointer;
    + transition: transform 0.2s;
    - .scene {
    - width: 200px;
    - height: 200px;
    - perspective: 600px;
    - margin: 0 auto;
    + nav button:hover {
    + transform: translateY(-2px);
    + }
    +
    + main {
    + flex: 1;
    + display: flex;
    + position: relative;
    + }
    +
    + #canvas-container {
    + flex: 1;
    + position: relative;
    - .cube {
    + #renderCanvas {
    - position: relative;
    - transform-style: preserve-3d;
    - transform: rotateX(20deg) rotateY(30deg);
    - transition: transform 0.5s;
    + touch-action: none;
    - .face {
    + .controls {
    - width: 200px;
    - height: 200px;
    - background: rgba(255, 255, 255, 0.9);
    - border: 2px solid #fff;
    - display: flex;
    - justify-content: center;
    - align-items: center;
    - font-size: 1.5rem;
    - color: #333;
    + right: 1rem;
    + top: 1rem;
    + background: rgba(42,43,46,0.9);
    + padding: 1rem;
    + border-radius: 8px;
    + backdrop-filter: blur(10px);
    - .front { transform: rotateY( 0deg) translateZ(100px); }
    - .back { transform: rotateY(180deg) translateZ(100px); }
    - .left { transform: rotateY(-90deg) translateZ(100px); }
    - .right { transform: rotateY( 90deg) translateZ(100px); }
    - .top { transform: rotateX( 90deg) translateZ(100px); }
    - .bottom { transform: rotateX(-90deg) translateZ(100px); }
    + .controls h2 {
    + font-size: 1.2rem;
    + margin-bottom: 0.5rem;
    + }
    - @media (max-width: 600px) {
    - h1 {
    - font-size: 2rem;
    - }
    + .controls ul {
    + list-style: none;
    + }
    - p {
    - font-size: 1rem;
    - }
    + .controls li {
    + margin: 0.5rem 0;
    + font-size: 0.9rem;
    + }
    - .scene {
    - width: 150px;
    - height: 150px;
    - }
    + footer {
    + padding: 1rem;
    + text-align: center;
    + background: var(--primary);
    + }
    - .face {
    - width: 150px;
    - height: 150px;
    + @media (max-width: 768px) {
    + .controls {
    + bottom: 1rem;
    + top: auto;
    + left: 1rem;
    + right: 1rem;
    - }
    + }
    root
    root
    25 days ago
    Initial commit
    body.html
    Changed around line 1
    +
    +

    3D Playground

    +

    Use arrow keys to move the 3D object around.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    index.scroll
    Changed around line 1
    + buildHtml
    + baseUrl https://3dplay.scroll.pub
    + metaTags
    + editButton /edit.html
    + title 3D Playground - Manipulate and Move 3D Objects
    + style.css
    + body.html
    + script.js
    prompt.json
    Changed around line 1
    + {
    + "id": "ee8f4fea-eefd-4abd-9533-9fd5a1543f06",
    + "object": "chat.completion",
    + "created": 1735343582,
    + "model": "deepseek-chat",
    + "choices": [
    + {
    + "index": 0,
    + "message": {
    + "role": "assistant",
    + "content": "---domain---\n3dplay.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://3dplay.scroll.pub\nmetaTags\neditButton /edit.html\ntitle 3D Playground - Manipulate and Move 3D Objects\nstyle.css\nbody.html\nscript.js\n---body.html---\n
    \n

    3D Playground

    \n

    Use arrow keys to move the 3D object around.

    \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 font-family: 'Arial', sans-serif;\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n overflow: hidden;\n}\n\n.container {\n text-align: center;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\np {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n}\n\n.scene {\n width: 200px;\n height: 200px;\n perspective: 600px;\n margin: 0 auto;\n}\n\n.cube {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n transform: rotateX(20deg) rotateY(30deg);\n transition: transform 0.5s;\n}\n\n.face {\n position: absolute;\n width: 200px;\n height: 200px;\n background: rgba(255, 255, 255, 0.9);\n border: 2px solid #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1.5rem;\n color: #333;\n}\n\n.front { transform: rotateY( 0deg) translateZ(100px); }\n.back { transform: rotateY(180deg) translateZ(100px); }\n.left { transform: rotateY(-90deg) translateZ(100px); }\n.right { transform: rotateY( 90deg) translateZ(100px); }\n.top { transform: rotateX( 90deg) translateZ(100px); }\n.bottom { transform: rotateX(-90deg) translateZ(100px); }\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n\n p {\n font-size: 1rem;\n }\n\n .scene {\n width: 150px;\n height: 150px;\n }\n\n .face {\n width: 150px;\n height: 150px;\n }\n}\n---script.js---\nconst cube = document.getElementById('cube');\nlet posX = 0, posY = 0;\n\ndocument.addEventListener('keydown', (event) => {\n const step = 10;\n switch (event.key) {\n case 'ArrowUp':\n posY -= step;\n break;\n case 'ArrowDown':\n posY += step;\n break;\n case 'ArrowLeft':\n posX -= step;\n break;\n case 'ArrowRight':\n posX += step;\n break;\n }\n cube.style.transform = `translate3d(${posX}px, ${posY}px, 0) rotateX(20deg) rotateY(30deg)`;\n});\n---end---"
    + },
    + "logprobs": null,
    + "finish_reason": "stop"
    + }
    + ],
    + "usage": {
    + "prompt_tokens": 261,
    + "completion_tokens": 860,
    + "total_tokens": 1121,
    + "prompt_cache_hit_tokens": 0,
    + "prompt_cache_miss_tokens": 261
    + },
    + "system_fingerprint": "fp_f1afce2943"
    + }
    readme.scroll
    Changed around line 1
    + # 3dplay1.scroll.pub
    + Website generated by DeepSeek from prompt: make a website where you can render add an 3d objects and manuiplate it and using arrow keys you can move it around
    script.js
    Changed around line 1
    + const cube = document.getElementById('cube');
    + let posX = 0, posY = 0;
    +
    + document.addEventListener('keydown', (event) => {
    + const step = 10;
    + switch (event.key) {
    + case 'ArrowUp':
    + posY -= step;
    + break;
    + case 'ArrowDown':
    + posY += step;
    + break;
    + case 'ArrowLeft':
    + posX -= step;
    + break;
    + case 'ArrowRight':
    + posX += step;
    + break;
    + }
    + cube.style.transform = `translate3d(${posX}px, ${posY}px, 0) rotateX(20deg) rotateY(30deg)`;
    + });
    style.css
    Changed around line 1
    + * {
    + margin: 0;
    + padding: 0;
    + box-sizing: border-box;
    + }
    +
    + body {
    + font-family: 'Arial', sans-serif;
    + background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    + color: white;
    + display: flex;
    + justify-content: center;
    + align-items: center;
    + height: 100vh;
    + overflow: hidden;
    + }
    +
    + .container {
    + text-align: center;
    + }
    +
    + h1 {
    + font-size: 2.5rem;
    + margin-bottom: 1rem;
    + }
    +
    + p {
    + font-size: 1.2rem;
    + margin-bottom: 2rem;
    + }
    +
    + .scene {
    + width: 200px;
    + height: 200px;
    + perspective: 600px;
    + margin: 0 auto;
    + }
    +
    + .cube {
    + width: 100%;
    + height: 100%;
    + position: relative;
    + transform-style: preserve-3d;
    + transform: rotateX(20deg) rotateY(30deg);
    + transition: transform 0.5s;
    + }
    +
    + .face {
    + position: absolute;
    + width: 200px;
    + height: 200px;
    + background: rgba(255, 255, 255, 0.9);
    + border: 2px solid #fff;
    + display: flex;
    + justify-content: center;
    + align-items: center;
    + font-size: 1.5rem;
    + color: #333;
    + }
    +
    + .front { transform: rotateY( 0deg) translateZ(100px); }
    + .back { transform: rotateY(180deg) translateZ(100px); }
    + .left { transform: rotateY(-90deg) translateZ(100px); }
    + .right { transform: rotateY( 90deg) translateZ(100px); }
    + .top { transform: rotateX( 90deg) translateZ(100px); }
    + .bottom { transform: rotateX(-90deg) translateZ(100px); }
    +
    + @media (max-width: 600px) {
    + h1 {
    + font-size: 2rem;
    + }
    +
    + p {
    + font-size: 1rem;
    + }
    +
    + .scene {
    + width: 150px;
    + height: 150px;
    + }
    +
    + .face {
    + width: 150px;
    + height: 150px;
    + }
    + }