Website??

{"name":"OldSchoolWebsite","description":"Create a fun and interactive website with draggable windows and icon-based applications for a dynamic and kid-friendly user experience.","photo":null,"view_count":5,"fork_count":0,"expires_at":null,"created_at":"2024-04-12T16:15:48.571518Z","updated_at":"2024-04-12T16:15:48.571520Z","user_id":28,"status":"PUBLIC","parent_id":962,"id":1141,"user":{"photo":null,"email":null,"recess_id":"","created_at":"2023-12-21T15:44:32.712231Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"oldj","id":28,"password_hash":null,"updated_at":"2023-12-21T15:44:32.712233Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// let turtleSpeedX = 2; // \n// let turtleSpeedY = 2; //\nlet turtleTrail = [];\n\nlet lastDirectionAdjustmentTime = 0;\nconst directionAdjustmentCooldown = 200; // Cooldown period in milliseconds\n\nlet consecutiveAdjustments = 0;\nconst adjustmentThreshold = 3; // Number of attempts before choosing a random direction\n\n\ndocument.getElementById('codeAppMenu').addEventListener('click', function () {\n document.getElementById('codeWindow').style.display = 'flex';\n});\n\ndocument.getElementById('learnAppMenu').addEventListener('click', function () {\n document.getElementById('learnWindow').style.display = 'flex';\n});\n\ndocument.getElementById('exploreAppMenu').addEventListener('click', function () {\n document.getElementById('exploreWindow').style.display = 'flex';\n});\n\ndocument.getElementById('playAppMenu').addEventListener('click', function () {\n document.getElementById('playWindow').style.display = 'flex';\n});\n\n\ndocument.getElementById('resetButton').addEventListener('click', function () {\n // Reset the turtle's position to the center of the canvas\n turtle.x = turtleCanvas.width / 2;\n turtle.y = turtleCanvas.height / 2;\n turtle.angle = 90; // Reset angle if needed\n\n // Clear the turtle trail\n turtleTrail = [];\n\n // Redraw the scene to reflect the reset state\n drawScene();\n});\n\nmakeDraggable(document.getElementById(\"playWindow\"));\n\ndocument.getElementById('speedSlider').addEventListener('input', adjustSpeed);\ndocument.getElementById('turnDirectionDropdown').addEventListener('change', updateTurnDirection);\ndocument.getElementById('exploreExpandBtn').addEventListener('click', toggleExploreWindow);\n\nfunction makeDraggable(elem) {\n var pos1 = 0,\n pos2 = 0,\n pos3 = 0,\n pos4 = 0;\n var edgeBoundary = 30; // Distance from edge to enable dragging\n\n elem.onmousedown = function (e) {\n // Check if the target is a select element or within one, and if so, return early to avoid dragging\n if (e.target.tagName === \"SELECT\" || e.target.closest('select')) {\n return;\n }\n\n function dragMouseDown(e) {\n e = e || window.event;\n e.preventDefault();\n // Calculate edge boundaries\n var leftEdge = elem.offsetLeft + edgeBoundary;\n var rightEdge = elem.offsetLeft + elem.offsetWidth - edgeBoundary;\n var topEdge = elem.offsetTop + edgeBoundary;\n var bottomEdge = elem.offsetTop + elem.offsetHeight - edgeBoundary;\n\n // Check if within draggable area (edges + titlebar)\n if ((e.clientX < leftEdge || e.clientX > rightEdge || e.clientY < topEdge || e.clientY > bottomEdge) ||\n e.target.classList.contains('window-titlebar')) {\n // get the mouse cursor position at startup\n pos3 = e.clientX;\n pos4 = e.clientY;\n document.onmouseup = closeDragElement;\n // call a function whenever the cursor moves\n document.onmousemove = elementDrag;\n }\n }\n\n function elementDrag(e) {\n e = e || window.event;\n e.preventDefault();\n // calculate the new cursor position\n pos1 = pos3 - e.clientX;\n pos2 = pos4 - e.clientY;\n pos3 = e.clientX;\n pos4 = e.clientY;\n // set the element's new position\n elem.style.top = (elem.offsetTop - pos2) + \"px\";\n elem.style.left = (elem.offsetLeft - pos1) + \"px\";\n }\n\n function closeDragElement() {\n // stop moving when mouse button is released\n document.onmouseup = null;\n document.onmousemove = null;\n }\n\n elem.onmousedown = function (e) {\n // Check if the target is the slider, and if so, return early to avoid dragging\n if (e.target.type === \"range\") {\n return;\n }\n dragMouseDown(e);\n };\n }\n}\n\n\n// Apply the draggable functionality to the windows\nmakeDraggable(document.getElementById(\"codeWindow\"));\nmakeDraggable(document.getElementById(\"learnWindow\"));\nmakeDraggable(document.getElementById(\"exploreWindow\"));\n\nfunction closeWindow(windowId) {\n document.getElementById(windowId).style.display = 'none';\n}\n\n// document.getElementById('codeApp').addEventListener('click', function () {\n// document.getElementById('codeWindow').style.display = 'flex'; // Changed from 'block' to 'flex' to match the CSS for .draggable-window\n// });\n\n// document.getElementById('learnApp').addEventListener('click', function () {\n// document.getElementById('learnWindow').style.display = 'flex';\n// });\n\n// document.getElementById('exploreApp').addEventListener('click', function () {\n// document.getElementById('exploreWindow').style.display = 'flex';\n// });\n\nfunction runCode() {\n const direction = document.getElementById('directionDropdown').value;\n turtle.turnDirection = document.getElementById('turnDirectionDropdown').value;\n alert('Turtle will move ' + direction + ' and turn ' + turtle.turnDirection + ' on edge hit.');\n // Future implementation will include moving the turtle based on selected direction and turn direction.\n}\n\nfunction adjustSpeed() {\n const speed = document.getElementById('speedSlider').value;\n turtleSpeedX = 0.2 * parseInt(speed);\n turtleSpeedY = 0.2 * parseInt(speed);\n // The turtle's speed is updated in real time as you adjust the slider.\n}\n\n//this is turtle in background\nfunction moveTurtle() {\n const turtle = document.getElementById('turtleIcon');\n let screenWidth = window.innerWidth;\n let screenHeight = window.innerHeight;\n\n // Get current position\n let currentX = turtle.offsetLeft;\n let currentY = turtle.offsetTop;\n\n // Update position based on speed and direction\n let newX = currentX + turtleSpeedX;\n let newY = currentY + turtleSpeedY;\n\n // Check for bounce on the horizontal edges\n if (newX <= 0 || newX + turtle.offsetWidth >= screenWidth) {\n turtleSpeedX *= -1; // Reverse direction\n }\n\n // Check for bounce on the vertical edges\n if (newY <= 0 || newY + turtle.offsetHeight >= screenHeight) {\n turtleSpeedY *= -1; // Reverse direction\n }\n\n // Apply the updated position\n turtle.style.left = (currentX + turtleSpeedX) + 'px';\n turtle.style.top = (currentY + turtleSpeedY) + 'px';\n}\n\n//setInterval(moveTurtle, 16); // Move the turtle every 2 seconds\n\nlet turtleCanvas = document.getElementById('turtleCanvas');\nlet ctx = turtleCanvas.getContext('2d');\nlet turtle = { x: 140, y: 90, angle: 90, turnDirection: 'right' };\n\nfunction drawTurtle() {\n // Clear the canvas before redrawing\n //ctx.clearRect(0, 0, turtleCanvas.width, turtleCanvas.height);\n\n // Draw each trail dot\n turtleTrail.forEach((trailDot, index) => {\n const age = Date.now() - trailDot.time;\n if (age < 3000) { // Fade out after 3 seconds\n ctx.beginPath();\n ctx.arc(trailDot.x, trailDot.y, 2, 0, 2 * Math.PI);\n ctx.fillStyle = `rgba(0, 100, 0, ${1 - age / 3000})`; // Fade effect\n ctx.fill();\n } else {\n // Remove old dots from the trail\n turtleTrail.splice(index, 1);\n }\n });\n\n // Draw the turtle itself\n ctx.beginPath();\n ctx.arc(turtle.x, turtle.y, 6, 0, 2 * Math.PI); // Increase the size for visibility\n ctx.fillStyle = 'green'; // Use a color that stands out\n ctx.fill();\n}\n\nfunction drawScene() {\n // Clear the canvas before redrawing everything\n ctx.clearRect(0, 0, turtleCanvas.width, turtleCanvas.height);\n\n // Draw the rocks\n rocks.forEach(rock => {\n ctx.beginPath();\n ctx.rect(rock.x, rock.y, rock.width, rock.height);\n ctx.fillStyle = '#8B4513'; // Change the rocks to brown\n ctx.fill();\n });\n\n // Draw the turtle trail\n turtleTrail.forEach((trailDot, index) => {\n const age = Date.now() - trailDot.time;\n if (age < 3000) { // Fade out after 3 seconds\n ctx.beginPath();\n ctx.arc(trailDot.x, trailDot.y, 2, 0, 2 * Math.PI);\n ctx.fillStyle = `rgba(0, 100, 0, ${1 - age / 3000})`; // Fade effect\n ctx.fill();\n } else {\n // Remove old dots from the trail\n turtleTrail.splice(index, 1);\n }\n });\n\n // Draw the turtle\n drawTurtle();\n\n // Add any other drawing functions here if necessary\n}\n\nfunction updateTurnDirection() {\n turtle.turnDirection = document.getElementById('turnDirectionDropdown').value;\n // The turtle's turn direction is updated in real time as you change the dropdown selection.\n}\n\nfunction updateTurtlePosition() {\n const speed = 0.2 * parseInt(document.getElementById('speedSlider').value);\n let steps = speed > 5 ? Math.ceil(speed / 0.2) : 1; // Determine how many steps to take based on speed\n\n for (let i = 0; i < steps; i++) {\n let proposedX = turtle.x + Math.cos(turtle.angle * Math.PI / 180) * speed;\n let proposedY = turtle.y + Math.sin(turtle.angle * Math.PI / 180) * speed;\n\n // Check for collision with canvas boundaries or rocks\n if (proposedX < 15 || proposedX > turtleCanvas.width - 15 || proposedY < 15 || proposedY > turtleCanvas.height - 15 || checkCollisionWithRocks(proposedX, proposedY)) {\n let currentTime = Date.now();\n if (currentTime - lastDirectionAdjustmentTime > 250) { // Add a cooldown period before changing direction again\n lastDirectionAdjustmentTime = currentTime;\n adjustTurtleDirectionBasedOnDropdown(); // Adjust direction based on dropdown menu\n }\n } else {\n // Update turtle's position if no collision\n turtle.x = proposedX;\n turtle.y = proposedY;\n }\n }\n\n // Add to the trail if the distance from the last dot is greater than a threshold\n const trailSpacing = 15; // The minimum distance between trail dots\n if (turtleTrail.length === 0 || calculateDistance(turtleTrail[turtleTrail.length - 1], { x: turtle.x, y: turtle.y }) > trailSpacing) {\n turtleTrail.push({ x: turtle.x, y: turtle.y, time: Date.now() });\n }\n\n drawScene(); // Redraw the scene with the turtle's new position\n}\n\nfunction adjustTurtleDirectionBasedOnDropdown() {\n const edgeBehavior = document.getElementById('turnDirectionDropdown').value.toUpperCase();\n switch (edgeBehavior) {\n case 'LEFT':\n turtle.angle = (turtle.angle + 270) % 360;\n break;\n case 'RIGHT':\n turtle.angle = (turtle.angle + 90) % 360;\n break;\n case 'AROUND':\n default:\n turtle.angle = (turtle.angle + 180) % 360;\n }\n}\n\nfunction calculateDistance(point1, point2) {\n return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));\n}\n\nfunction isHeadOnCollision(proposedX, proposedY) {\n // Assuming a simple case where the canvas edges are the primary obstacles\n if (proposedX <= 0 || proposedX >= turtleCanvas.width) {\n // If moving horizontally, check if the turtle is facing directly left or right\n return Math.abs(Math.sin(turtle.angle * Math.PI / 180)) < 0.1;\n } else if (proposedY <= 0 || proposedY >= turtleCanvas.height) {\n // If moving vertically, check if the turtle is facing directly up or down\n return Math.abs(Math.cos(turtle.angle * Math.PI / 180)) < 0.1;\n }\n return false; // Default to false if not near canvas edges\n}\n\n// function adjustTurtleDirection() {\n// let currentTime = Date.now();\n// if (currentTime - lastDirectionAdjustmentTime < directionAdjustmentCooldown) {\n// return; // Skip this direction adjustment due to cooldown\n// }\n\n// // Determine if the turtle is facing a boundary head-on\n// let headOnCollision = isHeadOnCollision(turtle.x + Math.cos(turtle.angle * Math.PI / 180) * 10, turtle.y + Math.sin(turtle.angle * Math.PI / 180) * 10);\n\n// if (headOnCollision) {\n// // Adjust direction based on the turtle's \"turn right\" logic\n// turtle.angle += 90;\n// } else {\n// // Check if the turtle is in a corner\n// if (isInCorner(turtle.x, turtle.y)) {\n// // Directly adjust the turtle's angle based on its corner\n// if (turtle.x < 10 && turtle.y > turtleCanvas.height - 10) {\n// // Bottom left corner\n// turtle.angle = 0; // Move upwards\n// } else if (turtle.x > turtleCanvas.width - 10 && turtle.y > turtleCanvas.height - 10) {\n// // Bottom right corner\n// turtle.angle = 90; // Move left\n// } // Add more conditions here for other corners if necessary\n// }\n// }\n\n// turtle.angle %= 360; // Normalize the angle\n// lastDirectionAdjustmentTime = currentTime;\n// }\n\nfunction isInCorner(x, y) {\n const threshold = 10; // Distance from the corner to be considered \"in the corner\"\n let inLeftCorner = x <= threshold;\n let inRightCorner = x >= turtleCanvas.width - threshold;\n let inTopCorner = y <= threshold;\n let inBottomCorner = y >= turtleCanvas.height - threshold;\n\n // Check if the turtle is in any of the corners\n return (inLeftCorner || inRightCorner) && (inTopCorner || inBottomCorner);\n}\n\n\n\n\nsetInterval(updateTurtlePosition, 1000 / 60);\n\n// Define rocks\nlet rocks = [\n { x: 50, y: 50, width: 60, height: 30, dragOffsetX: 0, dragOffsetY: 0, isDragging: false },\n { x: 180, y: 100, width: 30, height: 60, dragOffsetX: 0, dragOffsetY: 0, isDragging: false }\n];\n\n// Function to check if a point is inside a rectangle\nfunction isInsideRect(pointX, pointY, rect) {\n return pointX > rect.x && pointX < rect.x + rect.width && pointY > rect.y && pointY < rect.y + rect.height;\n}\n\nfunction checkCollisionWithRocks(proposedX, proposedY) {\n let radius = 6; // Assuming this is the radius of your turtle\n for (let rock of rocks) {\n let closestX = clamp(proposedX, rock.x, rock.x + rock.width);\n let closestY = clamp(proposedY, rock.y, rock.y + rock.height);\n\n // Calculate the distance between the turtle's center and the closest point on the rock\n let distanceX = proposedX - closestX;\n let distanceY = proposedY - closestY;\n\n let distanceSquared = (distanceX * distanceX) + (distanceY * distanceY);\n if (distanceSquared < (radius * radius)) {\n return true; // Collision detected\n }\n }\n return false; // No collision\n}\n\nfunction clamp(value, min, max) {\n return Math.max(min, Math.min(max, value));\n}\n\nfunction driftRocks() {\n rocks.forEach(rock => {\n // Check if the rock needs a new direction or it's the first move\n const currentTime = Date.now();\n if (!rock.nextDirectionTime || currentTime >= rock.nextDirectionTime) {\n // Assign a new direction\n rock.driftX = (Math.random() - 0.5) * 0.5; // Smaller drift speed\n rock.driftY = (Math.random() - 0.5) * 0.5; // Smaller drift speed\n rock.nextDirectionTime = currentTime + 3000; // Change direction every 3 seconds\n }\n\n // Update rock's position\n rock.x += rock.driftX;\n rock.y += rock.driftY;\n\n // Keep the rock within the canvas boundaries\n rock.x = clamp(rock.x, 0, turtleCanvas.width - rock.width);\n rock.y = clamp(rock.y, 0, turtleCanvas.height - rock.height);\n });\n\n drawScene();\n}\n\n// Add this line in your existing animation loop or setInterval() where you update the scene\nsetInterval(driftRocks, 50); // Call driftRocks() every 50 milliseconds for smoother drifting\n\n// Mouse event listeners for the canvas\nturtleCanvas.addEventListener('mousedown', function (e) {\n const rect = turtleCanvas.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n\n rocks.forEach(rock => {\n if (isInsideRect(mouseX, mouseY, rock)) {\n rock.isDragging = true;\n rock.dragOffsetX = mouseX - rock.x;\n rock.dragOffsetY = mouseY - rock.y;\n }\n });\n});\n\nturtleCanvas.addEventListener('mousemove', function (e) {\n const rect = turtleCanvas.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n\n rocks.forEach(rock => {\n if (rock.isDragging) {\n rock.x = mouseX - rock.dragOffsetX;\n rock.y = mouseY - rock.dragOffsetY;\n drawScene(); // Redraw the scene with updated rock positions\n }\n });\n});\n\nturtleCanvas.addEventListener('mouseup', function () {\n rocks.forEach(rock => {\n rock.isDragging = false;\n });\n});\n\nfunction animate() {\n requestAnimationFrame(animate);\n drawScene();\n}\n\nanimate();\n\nfunction toggleExploreWindow() {\n const exploreWindow = document.getElementById('exploreWindow');\n const exploreIframe = document.getElementById('exploreIframe');\n const exploreBtn = document.getElementById('exploreExpandBtn');\n const placeholder = document.getElementById('exploreWindowPlaceholder');\n const expandBtn = document.querySelector('#exploreWindow .expand-btn');\n\n if (!exploreWindow.classList.contains('expanded')) {\n exploreWindow.classList.add('expanded');\n exploreWindow.classList.remove('small');\n exploreIframe.style.display = 'block';\n exploreIframe.src = 'https://www.jippity.pro/projects';\n placeholder.style.display = 'none';\n exploreBtn.style.display = 'none';\n expandBtn.style.display = 'block';\n exploreWindow.style.zIndex = '2000'; // Increase z-index when expanded\n } else {\n exploreWindow.classList.add('small');\n exploreWindow.classList.remove('expanded');\n exploreIframe.style.display = 'none';\n placeholder.style.display = 'block';\n exploreBtn.style.display = 'block';\n expandBtn.style.display = 'none';\n exploreWindow.style.zIndex = '1000'; // Reset z-index when small\n }\n}\n\ndocument.querySelector('#exploreWindow .expand-btn').addEventListener('click', toggleExploreWindow);","style.css":"/* Add CSS code for the draggable windows with thick borders and rounded edges */\n\n\n\n\n\n\nbody {\n cursor: url('custom-cursor.png'), auto;\n background-color: #E6E6FA;\n /* Lavender, a light purple color */\n /* font-family: 'Comic Sans MS', cursive, sans-serif;*/\n font-family: 'Victor Mono', monospace;\n font-weight: bold;\n\n\n /* Fallback to sans-serif if Chicago is not available */\n\n}\n\n.app-icon {\n cursor: pointer;\n}\n\n.top-menu-bar {\n background-color: #000080;\n /* Dark blue, similar to Mac OS 9 */\n color: white;\n padding: 5px 0;\n position: fixed;\n width: 100%;\n top: 0;\n left: 0;\n text-align: left;\n}\n\n.top-menu-bar ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\n.top-menu-bar ul li {\n float: left;\n display: block;\n padding: 10px 15px;\n cursor: pointer;\n}\n\n.top-menu-bar ul li:hover {\n background-color: #333;\n /* Slightly darker shade on hover */\n}\n\n\n#codeWindow {\n top: 10%;\n left: 10%;\n background-color: #5a5a77;\n /* Darker gray */\n color: white;\n /* Make text color white */\n\n}\n\n#learnWindow {\n top: 30%;\n left: 80%;\n transform: translate(-50%, -50%);\n /* Center the window exactly at the middle */\n}\n\n#exploreExpandBtn {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n white-space: nowrap;\n}\n\n#exploreWindow {\n top: 80%;\n left: 80%;\n width: 200px;\n /* Adjusted width */\n height: 150px;\n /* Adjusted height */\n transform: translate(-50%, -50%);\n display: flex;\n justify-content: center;\n /* Center content horizontally */\n align-items: center;\n /* Center content vertically */\n}\n\n#exploreWindow.small {\n width: 200px;\n /* Initial small width */\n height: 150px;\n /* Initial small height */\n transition: width 0.5s ease-in-out, height 0.5s ease-in-out;\n /* Smooth transition for size change */\n}\n\n#exploreWindow.expanded {\n width: 60%;\n /* Adjusted width for expanded state */\n height: 60%;\n /* Adjusted height for expanded state */\n transition: width 0.5s ease-in-out, height 0.5s ease-in-out;\n /* Smooth transition for size change */\n}\n\n#exploreWindow.small .expand-btn {\n display: none;\n}\n\n#exploreWindow.expanded .expand-btn {\n display: block;\n left: 30px;\n /* Adjust if necessary */\n}\n\n\n\n#exploreWindow.small .window-titlebar {\n padding-left: 30px;\n /* Adjust the padding to keep the 'Explore' text close to the red button */\n}\n\n#exploreWindow.expanded .window-titlebar {\n padding-left: 60px;\n /* Increase padding to make space for the yellow button when expanded */\n}\n\n#exploreWindow .window-titlebar {\n margin: 0;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: auto;\n padding: 0 15px;\n height: 30px;\n padding-left: 60px;\n /* Increased padding on the left to move 'Explore' text to the right */\n}\n\n#playWindow {\n top: 45%;\n left: 30%;\n background-color: #E6E6FA;\n}\n\nselect {\n position: relative;\n z-index: 2000;\n font-family: 'Victor Mono', monospace;\n font-size: 16px;\n /* Increase font size for chunkiness */\n padding: 10px;\n /* Add more padding for a thicker appearance */\n background-color: #FFC0CB;\n /* Soft pink for a retro vibe */\n border: 2px solid #000;\n /* Solid black border */\n border-radius: 10px;\n /* Rounded corners */\n cursor: pointer;\n /* Change cursor to pointer to indicate it's clickable */\n}\n\nbutton {\n font-family: 'Victor Mono', monospace;\n font-size: 16px;\n /* Increase font size for chunkiness */\n padding: 10px 20px;\n /* Add more padding for a thicker appearance */\n background-color: #00CED1;\n /* DarkTurquoise for a playful look */\n border: none;\n /* Remove default border */\n border-radius: 10px;\n /* Rounded corners */\n cursor: pointer;\n /* Change cursor to pointer to indicate it's clickable */\n color: white;\n /* White text color */\n box-shadow: 0 4px #999;\n /* Add a shadow for depth */\n}\n\nbutton:hover {\n background-color: #008B8B;\n /* DarkCyan for hover effect */\n}\n\nbutton:active {\n background-color: #008B8B;\n /* DarkCyan for active state */\n box-shadow: 0 2px #666;\n /* Adjust shadow for pressed effect */\n transform: translateY(2px);\n /* Slight movement down */\n}\n\n/* Style the slider itself */\ninput[type=\"range\"] {\n -webkit-appearance: none;\n /* Override default CSS styles */\n appearance: none;\n width: 100%;\n /* Full-width */\n height: 10px;\n /* Specified height */\n background: #ddd;\n /* Light grey background */\n outline: none;\n /* Remove outline */\n opacity: 0.7;\n /* Set transparency (optional) */\n transition: opacity .2s;\n /* Short transition for mouse-over effect */\n border-radius: 5px;\n /* Rounded borders for a softer look */\n}\n\n/* Style the slider track for WebKit browsers */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n width: 100%;\n height: 10px;\n /* Adjust if necessary to fit the thumb */\n background: #000080;\n /* Dark blue background */\n border-radius: 5px;\n}\n\n/* Style the slider track for Mozilla Firefox */\ninput[type=\"range\"]::-moz-range-track {\n width: 100%;\n height: 10px;\n /* Adjust if necessary to fit the thumb */\n background: #000080;\n /* Dark blue background */\n border-radius: 5px;\n}\n\n/* Style the slider thumb for WebKit browsers */\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n /* Override default CSS styles */\n appearance: none;\n width: 25px;\n /* Width of the thumb */\n height: 25px;\n /* Height of the thumb, making it square */\n background: #FFFF00;\n /* Yellow background */\n cursor: pointer;\n /* Cursor changes to a pointer when hovering over the thumb */\n border: 3px solid #000;\n /* Add a solid border */\n margin-top: -7.5px;\n /* Adjust margin to center the thumb vertically */\n border-radius: 3px;\n /* Slightly round the corners for a retro look */\n}\n\n/* Style the slider thumb for Mozilla Firefox */\ninput[type=\"range\"]::-moz-range-thumb {\n width: 25px;\n /* Width of the thumb */\n height: 25px;\n /* Height of the thumb, making it square */\n background: #FFFF00;\n /* Yellow background */\n cursor: pointer;\n /* Cursor changes to a pointer when hovering over the thumb */\n border: 3px solid #000;\n /* Add a solid border */\n border-radius: 3px;\n /* Slightly round the corners for a retro look */\n}\n\n\n.draggable-window {\n border: 3px solid #000;\n background-color: #D9D9F3;\n border-radius: 5px;\n padding: 15px;\n position: absolute;\n width: 300px;\n height: 200px;\n box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n z-index: 1000;\n /* Ensures windows are on top */\n}\n\n\n.window-titlebar {\n background-color: #000080;\n color: white;\n padding: 5px 10px;\n cursor: move;\n font-family: 'Victor Mono', monospace;\n font-size: 18px;\n border-radius: 3px 3px 0 0;\n margin: -15px -15px 10px -15px;\n position: relative;\n display: flex;\n justify-content: start;\n padding-left: 30px;\n /* Adjusted for placing elements */\n align-items: center;\n font-weight: bold;\n}\n\n.close-btn {\n width: 16px;\n height: 16px;\n background-color: red;\n border-radius: 50%;\n color: white;\n text-align: center;\n line-height: 16px;\n cursor: pointer;\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n}\n\n.reset-button-container {\n position: absolute;\n bottom: 10px;\n left: 15px;\n /* Position the left edge of the container at the center */\n transform: translateX(0);\n /* Shift the container left by half its width to center it */\n}\n\n#resetButton {\n font-family: 'Victor Mono', monospace;\n font-size: 16px;\n padding: 10px 20px;\n background-color: #00CED1;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n color: white;\n box-shadow: 0 4px #999;\n}\n\n#speedSlider {\n margin-bottom: 20px;\n /* Add 40px of space below the slider */\n}\n\n#learnWindow .youtube-link {\n display: inline-block;\n background-color: #EE0000;\n /* YouTube Red */\n color: white;\n padding: 10px 15px;\n text-decoration: none;\n border-radius: 5px;\n font-size: 18px;\n margin-top: 10px;\n}\n\n#learnWindow .youtube-link:hover {\n background-color: #CC0000;\n /* Darker YouTube Red */\n}\n\n.expand-btn {\n width: 20px;\n height: 20px;\n background-color: yellow;\n border-radius: 50%;\n position: absolute;\n top: 5px;\n left: 30px;\n /* Adjust based on your layout */\n cursor: pointer;\n}\n\n#exploreWindow.expanded #exploreWindowPlaceholder,\n#exploreWindow.small #exploreIframe {\n display: none;\n}\n\n#exploreWindow.expanded #exploreIframe {\n display: block;\n width: 100%;\n height: 100%;\n}","index.html":"\n\n\n\n \n \n \n \n Website??\n\n\n\n\n\n \n\n

\n Code\n

\n Turtle speed:\n \n
\n When hitting an obstacle:\n \n
\n

\n \n

Learn

New to coding? No problem.

\n Check out our YouTube playlist for beginners.\n

Explore\n

\n More projects on Jippity \n \n \n

\n \n

\n $\"Play\"$ \n

\n Play\n

\n \n $\"Turtle\"$ \n\n\n"},"chat_history":[],"assets":[{"project_id":1141,"creator":null,"cloudinary_id":"xktbj68seggkjao84j4e","deleted":false,"id":3172,"created_at":"2024-04-12T16:15:48.582156Z","name":"uglyTurtle","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[{"title":"Interactive User Interface with Visual Feedback","instruction":"Create an interactive user interface with visual feedback for user actions to make the website engaging and enjoyable for kids.","created_at":"2024-03-29T16:02:50.473489","project_id":1141,"complete":false,"step_number":2,"updated_at":"2024-04-12T16:15:48.576163","id":5878},{"title":"Customizable Content for Creative Play","instruction":"Allow kids to customize the content within the draggable windows for creative and imaginative play.","created_at":"2024-03-29T16:02:50.473531","project_id":1141,"complete":false,"step_number":3,"updated_at":"2024-04-12T16:15:48.576242","id":5879},{"title":"Smooth Animations for Playful Interactions","instruction":"Incorporate smooth animations for the draggable windows and interactive elements to create a playful and dynamic user experience.","created_at":"2024-03-29T16:02:50.473573","project_id":1141,"complete":false,"step_number":4,"updated_at":"2024-04-12T16:15:48.576290","id":5880},{"title":"Responsive Design for Various Devices","instruction":"Ensure the website and draggable windows are responsive for various screen sizes to provide a seamless experience for kids on different devices.","created_at":"2024-03-29T16:02:50.473614","project_id":1141,"complete":false,"step_number":5,"updated_at":"2024-04-12T16:15:48.576333","id":5881},{"title":"Kid-Friendly Visual and Interactive Feedback","instruction":"Provide kid-friendly and visually appealing feedback to users when interacting with the draggable windows and icons, enhancing the overall user experience.","created_at":"2024-03-29T16:02:50.473655","project_id":1141,"complete":false,"step_number":6,"updated_at":"2024-04-12T16:15:48.576377","id":5882},{"title":"Accessibility Features for Inclusive Play","instruction":"Implement accessibility features to ensure the draggable windows are usable for all kids, including those with different abilities.","created_at":"2024-03-29T16:02:50.473695","project_id":1141,"complete":false,"step_number":7,"updated_at":"2024-04-12T16:15:48.576419","id":5883},{"title":"Clickable Kid-Friendly Icons","instruction":"Add clickable icons representing different applications or sections with a fun and kid-friendly design.","created_at":"2024-03-29T16:02:50.473382","project_id":1141,"complete":true,"step_number":0,"updated_at":"2024-04-12T16:15:48.576480","id":5884},{"title":"Draggable Windows with Friendly Borders","instruction":"Implement draggable windows with thick borders and rounded edges for opening and interacting with the applications or sections, designed with a simple and kid-friendly look.","created_at":"2024-03-29T16:02:50.473446","project_id":1141,"complete":true,"step_number":1,"updated_at":"2024-04-12T16:15:48.576531","id":5885}]}