summaryrefslogtreecommitdiff
path: root/isometric
diff options
context:
space:
mode:
authorYuval Adam <_@yuv.al>2025-02-27 10:42:09 +0100
committerYuval Adam <_@yuv.al>2025-02-27 10:42:09 +0100
commitb33c2f06a4524bc846e66bbe3abf6428d1cf2305 (patch)
treead2369b91d3574a795438f9efd557f3a40d6ad4e /isometric
parent82e862474f029cbee369dcc434dc69701fe327e9 (diff)
Astro project structure
Diffstat (limited to 'isometric')
-rw-r--r--isometric/index.html202
1 files changed, 0 insertions, 202 deletions
diff --git a/isometric/index.html b/isometric/index.html
deleted file mode 100644
index 47dfbde..0000000
--- a/isometric/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Isometric Triangles</title>
- <style>
- body,
- html {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- background-color: #000;
- }
-
- .triangle {
- position: absolute;
- width: 0;
- height: 0;
- border-style: solid;
- opacity: 0.7;
- transform-origin: center;
- animation: float 20s infinite ease-in-out;
- }
-
- /* Create isometric triangle using clip-path instead of borders */
- .isometric {
- width: 100px;
- height: 100px;
- background-color: rgba(255, 255, 255, 0.8);
- border: none;
- clip-path: polygon(50% 0%, 100% 75%, 0% 75%);
- transform-style: preserve-3d;
- perspective: 800px;
- }
-
- @keyframes float {
- 0% {
- transform: translateY(0) rotate(0deg) scale(1);
- }
-
- 25% {
- transform: translateY(-20px) rotate(90deg) scale(1.05);
- }
-
- 50% {
- transform: translateY(0) rotate(180deg) scale(1);
- }
-
- 75% {
- transform: translateY(20px) rotate(270deg) scale(0.95);
- }
-
- 100% {
- transform: translateY(0) rotate(360deg) scale(1);
- }
- }
-
- .content {
- position: relative;
- z-index: 10;
- color: white;
- text-align: center;
- font-family: 'Arial', sans-serif;
-
- /* Center vertically and horizontally */
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- }
-
- h1 {
- font-size: 3rem;
- text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
- margin-bottom: 1rem;
- }
- </style>
-</head>
-
-<body>
- <div class="content">
- <h1>Isometric Triangles</h1>
- </div>
-
- <script>
- document.addEventListener('DOMContentLoaded', function () {
- console.log("DOM loaded, creating triangles");
-
- const colors = [
- '#FF0000', '#FF00FF', '#FF00AA', '#AA00FF',
- '#0000FF', '#00AAFF', '#00FFFF', '#00FFAA',
- '#00FF00', '#AAFF00', '#FFFF00', '#FFAA00',
- '#FF6600', '#FF0066', '#FFFFFF', '#AAAAFF'
- ];
-
- const windowWidth = window.innerWidth;
- const windowHeight = window.innerHeight;
- const triangleCount = Math.max(50, Math.floor((windowWidth * windowHeight) / 10000));
-
- console.log(`Creating ${triangleCount} triangles for window size ${windowWidth}x${windowHeight}`);
-
- // Create triangles using DOM elements with isometric perspective
- for (let i = 0; i < triangleCount; i++) {
- createIsometricTriangle();
- }
-
- function createIsometricTriangle() {
- const triangle = document.createElement('div');
- triangle.className = 'triangle isometric';
-
- // Random size between 50 and 150
- const size = 50 + Math.random() * 100;
-
- // Random position
- const left = Math.random() * windowWidth;
- const top = Math.random() * windowHeight;
-
- // Random color
- const color = colors[Math.floor(Math.random() * colors.length)];
-
- // Random rotation for isometric effect
- const rotateX = -30 + Math.random() * 60; // -30 to 30 degrees
- const rotateY = -30 + Math.random() * 60; // -30 to 30 degrees
- const rotateZ = Math.random() * 360; // 0 to 360 degrees
-
- // Random animation duration
- const duration = 10 + Math.random() * 40;
-
- // Random direction
- const direction = Math.random() > 0.5 ? 'normal' : 'reverse';
-
- // Set triangle properties
- triangle.style.left = `${left}px`;
- triangle.style.top = `${top}px`;
- triangle.style.width = `${size}px`;
- triangle.style.height = `${size}px`;
- triangle.style.backgroundColor = color;
- triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
- triangle.style.animationDuration = `${duration}s`;
- triangle.style.animationDirection = direction;
-
- // Add to body
- document.body.appendChild(triangle);
- console.log(`Created isometric triangle at (${left}, ${top}) with size ${size} and color ${color}`);
- }
-
- // Add some triangles when mouse moves
- document.addEventListener('mousemove', function (e) {
- if (Math.random() < 0.05) { // 5% chance to create a triangle on mouse move
- const triangle = document.createElement('div');
- triangle.className = 'triangle isometric';
-
- const size = 50 + Math.random() * 100;
- const color = colors[Math.floor(Math.random() * colors.length)];
-
- // Random rotation for isometric effect
- const rotateX = -30 + Math.random() * 60;
- const rotateY = -30 + Math.random() * 60;
- const rotateZ = Math.random() * 360;
-
- triangle.style.left = `${e.clientX - size / 2}px`;
- triangle.style.top = `${e.clientY - size / 2}px`;
- triangle.style.width = `${size}px`;
- triangle.style.height = `${size}px`;
- triangle.style.backgroundColor = color;
- triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
- triangle.style.animationDuration = `${10 + Math.random() * 40}s`;
- triangle.style.animationDirection = Math.random() > 0.5 ? 'normal' : 'reverse';
-
- document.body.appendChild(triangle);
- }
- });
-
- // Handle window resize
- window.addEventListener('resize', function () {
- // Clear all existing triangles
- const existingTriangles = document.querySelectorAll('.triangle');
- existingTriangles.forEach(triangle => {
- document.body.removeChild(triangle);
- });
-
- // Create new triangles based on new window size
- const newWindowWidth = window.innerWidth;
- const newWindowHeight = window.innerHeight;
- const newTriangleCount = Math.max(50, Math.floor((newWindowWidth * newWindowHeight) / 10000));
-
- for (let i = 0; i < newTriangleCount; i++) {
- createIsometricTriangle();
- }
- });
-
- console.log("Initialization complete");
- });
- </script>
-</body>
-
-</html> \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-25 13:53:40 +0000