Buckets:

JACKYS999
/

GLM-4.6V-Flash-bucket

Files

xet

JACKYS999/GLM-4.6V-Flash-bucket / MERTA.HTML

JACKYS999

2 months ago

download

raw

5.29 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Virtual Jacuzzi Experience</title>
	<!-- Creator: Jikjak18@gmail.com -->
	<style>
	body {
	margin: 0;
	overflow: hidden;
	background: #000;
	font-family: Arial, sans-serif;
	}
	#container {
	position: relative;
	width: 100vw;
	height: 100vh;
	}
	#youtube-iframe {
	position: absolute;
	width: 640px;
	height: 360px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	border: none;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);
	}
	#canvas-container {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	}
	#title {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-size: 24px;
	text-shadow: 0 0 10px #00f;
	z-index: 20;
	}
	#controls {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 30;
	background: rgba(0, 0, 50, 0.7);
	padding: 15px;
	border-radius: 8px;
	color: white;
	border: 1px solid #00f;
	box-shadow: 0 0 10px #00f;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<h1 id="title">Virtual Jacuzzi Experience</h1>
	<iframe
	id="youtube-iframe"
	src="https://www.youtube.com/embed/93yStHzWL_A?autoplay=1&mute=1&loop=1&playlist=93yStHzWL_A"
	title="Valentine's Day Outfits ft. MARIEMUR \| Lebee ONGCO"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	allowfullscreen>
	</iframe>
	<div id="canvas-container"></div>
	<div id="controls">
	<label for="freq">Stimulation Frequency</label><br>
	<input type="range" id="freq" min="0.1" max="5" step="0.1" value="1">
	<p style="font-size: 10px; margin-top: 5px;">Static Machine Deployment v2.0</p>
	</div>
	</div>

	<!-- Three.js for 3D Jacuzzi -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<script>
	// Scene setup
	const scene = new THREE.Scene();
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(window.devicePixelRatio);
	document.getElementById('canvas-container').appendChild(renderer.domElement);

	// Camera position
	camera.position.set(0, 2, 5);
	camera.lookAt(0, 0, 0);

	// Lighting
	const ambientLight = new THREE.AmbientLight(0x404040, 1);
	scene.add(ambientLight);
	const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
	directionalLight.position.set(1, 1, 1);
	scene.add(directionalLight);

	// Jacuzzi (cylinder with water texture)
	const jacuzziGeometry = new THREE.CylinderGeometry(3, 3, 1.5, 32, 1, false);
	const waterTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/water.jpg');
	waterTexture.wrapS = waterTexture.wrapT = THREE.RepeatWrapping;
	waterTexture.repeat.set(4, 4);
	const jacuzziMaterial = new THREE.MeshPhysicalMaterial({
	map: waterTexture,
	roughness: 0.05,
	metalness: 0.4,
	color: 0x1E90FF,
	transparent: true,
	opacity: 0.7,
	transmission: 0.5,
	thickness: 1.0
	});
	const jacuzzi = new THREE.Mesh(jacuzziGeometry, jacuzziMaterial);
	jacuzzi.position.y = -0.75;
	scene.add(jacuzzi);

	// Whirlpool effect (animated water)
	const clock = new THREE.Clock();
	let frequency = 1.0;
	document.getElementById('freq').addEventListener('input', (e) => frequency = e.target.value);

	function animateWater() {
	const time = clock.getElapsedTime() * frequency;
	waterTexture.offset.x = Math.sin(time * 0.2) * 0.1;
	waterTexture.offset.y = Math.cos(time * 0.2) * 0.1;
	jacuzzi.rotation.y += 0.005 * frequency; // Actual whirlpool rotation
	}

	// Steam particles
	const particleGeometry = new THREE.BufferGeometry();
	const particles = new THREE.BufferAttribute(new Float32Array(1000 * 3), 3);
	for (let i = 0; i < 1000; i++) {
	particles.setXYZ(i, (Math.random() - 0.5) * 4, Math.random() * 2, (Math.random() - 0.5) * 4);
	}
	particleGeometry.setAttribute('position', particles);
	const particleMaterial = new THREE.PointsMaterial({
	color: 0xAAAAAA,
	size: 0.05,
	transparent: true,
	opacity: 0.6
	});
	const steam = new THREE.Points(particleGeometry, particleMaterial);
	scene.add(steam);

	// Animation loop
	function animate() {
	requestAnimationFrame(animate);
	animateWater();
	steam.rotation.y += 0.001 * frequency;
	renderer.render(scene, camera);
	}
	animate();

	// Handle window resize
	window.addEventListener('resize', () => {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	});
	</script>
	</body>
	</html>

Xet Storage Details

Size:: 5.29 kB
Xet hash:: 24a6f62c32b8c1d188a965b2b74b35236c4e54906b4a122dca88b18e30c9cfbb

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.