Spaces:

Holycanolies123
/

G

Running

App Files Files Community

Holycanolies123 commited on Jun 8, 2025

Commit

000628d

verified ·

1 Parent(s): b91f121

Update index.html

Browse files

Files changed (1) hide show

index.html +308 -19

index.html CHANGED Viewed

@@ -1,19 +1,308 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Omni-Ruler: The God Simulation</title>
+    <style>
+        /* Basic Reset & Body Styling */
+        body {
+            margin: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #1a1a2e;
+            color: #e0e0e0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow: hidden;
+        }
+        /* Main Application Container */
+        .god-app-container {
+            display: grid;
+            grid-template-columns: 3fr 1fr;
+            grid-template-rows: 1fr auto;
+            gap: 20px;
+            width: 95vw;
+            height: 90vh;
+            max-width: 1600px;
+            max-height: 900px;
+            background-color: #2a2a4a;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+            padding: 20px;
+            box-sizing: border-box;
+            border: 1px solid #4a4a7a;
+        }
+        /* 3D World Viewport */
+        .world-viewport {
+            grid-column: 1 / 2;
+            grid-row: 1 / 2;
+            background: linear-gradient(to bottom, #3f51b5, #2196f3, #03a9f4);
+            border-radius: 10px;
+            overflow: hidden;
+            position: relative;
+            border: 2px solid #6a6a9a;
+            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 191, 255, 0.4);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            /* Removed placeholder text styling as actual 3D will be rendered */
+            font-size: 1.8em;
+            font-weight: bold;
+            text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
+            perspective: 1000px; /* Added for 3D effect */
+        }
+        /* Canvas styling to fill the viewport */
+        #three-canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+        /* God Panel */
+        .god-panel {
+            grid-column: 2 / 3;
+            grid-row: 1 / 2;
+            background-color: #3a3a5a;
+            border-radius: 10px;
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            overflow-y: auto;
+            border: 1px solid #5a5a8a;
+        }
+        .god-panel h2 {
+            color: #90ee90;
+            margin-top: 0;
+            margin-bottom: 10px;
+            text-align: center;
+            font-size: 1.4em;
+        }
+        .god-panel button {
+            background-color: #6a5acd;
+            color: white;
+            border: none;
+            padding: 12px 15px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1em;
+            transition: background-color 0.3s ease, transform 0.1s ease;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+        .god-panel button:hover {
+            background-color: #7b68ee;
+            transform: translateY(-2px);
+        }
+        .god-panel button:active {
+            background-color: #5a4acb;
+            transform: translateY(0);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        .god-panel .control-group {
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px dashed #5a5a8a;
+        }
+        .god-panel .control-group:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        /* AI Status & Event Log */
+        .ai-status-log {
+            grid-column: 1 / 3;
+            grid-row: 2 / 3;
+            background-color: #3a3a5a;
+            border-radius: 10px;
+            padding: 15px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            border: 1px solid #5a5a8a;
+            min-height: 150px;
+        }
+        .ai-status-log h3 {
+            color: #add8e6;
+            margin-top: 0;
+            margin-bottom: 10px;
+            font-size: 1.2em;
+            text-align: center;
+        }
+        .ai-status-log .section {
+            background-color: #2a2a4a;
+            border-radius: 8px;
+            padding: 10px;
+            overflow-y: auto;
+            border: 1px solid #4a4a7a;
+        }
+        .ai-status-log ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .ai-status-log li {
+            padding: 5px 0;
+            border-bottom: 1px dotted #4a4a7a;
+            font-size: 0.9em;
+        }
+        .ai-status-log li:last-child {
+            border-bottom: none;
+        }
+        .ai-status-log .status-item span:first-child {
+            color: #90ee90;
+            font-weight: bold;
+        }
+        .ai-status-log .event-item {
+            color: #e0e0e0;
+        }
+        .ai-status-log .event-item.bless {
+            color: #90ee90;
+        }
+        .ai-status-log .event-item.smite {
+            color: #ff6347;
+        }
+        .ai-status-log .event-item.observe {
+            color: #ffd700;
+        }
+        /* Scrollbar Styling */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #2a2a4a;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #5a5a8a;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #6a6a9a;
+        }
+    </style>
+</head>
+<body>
+    <div class="god-app-container">
+        <div class="world-viewport">
+            <!-- Three.js will render into this canvas -->
+            <canvas id="three-canvas"></canvas>
+        </div>
+        <div class="god-panel">
+            <h2>Divine Interventions</h2>
+            <div class="control-group">
+                <button>Bless Population</button>
+                <button>Smite a Region</button>
+                <button>Grant Knowledge</button>
+            </div>
+            <div class="control-group">
+                <button>Observe Individual (AI)</button>
+                <button>Influence Weather</button>
+                <button>Trigger Event (Random)</button>
+            </div>
+            <div class="control-group">
+                <button>Advance Time (Day/Night)</button>
+                <button>Reset World</button>
+            </div>
+            <p style="font-size: 0.8em; text-align: center; color: #b0b0b0;">
+                (JavaScript would handle interaction and AI simulation)
+            </p>
+        </div>
+        <div class="ai-status-log">
+            <div class="section">
+                <h3>AI Population Status</h3>
+                <ul id="ai-status-list">
+                    <li class="status-item"><span>Villager A:</span> Content, Building</li>
+                    <li class="status-item"><span>Farmer B:</span> Working, Harvesting</li>
+                    <li class="status-item"><span>Trader C:</span> Traveling, Bartering</li>
+                    <li class="status-item"><span>Guard D:</span> Patrolling, Vigilant</li>
+                    <li class="status-item"><span>Scholar E:</span> Studying, Researching</li>
+                    <li class="status-item"><span>Child F:</span> Playing, Learning</li>
+                </ul>
+            </div>
+            <div class="section">
+                <h3>World Event Log</h3>
+                <ul id="event-log-list">
+                    <li class="event-item">[08:00] Sun rises over the plains.</li>
+                    <li class="event-item bless">[08:15] A gentle rain blesses the crops.</li>
+                    <li class="event-item">[09:00] Villager A begins constructing a new home.</li>
+                    <li class="event-item smite">[10:30] A minor tremor shakes the mountains.</li>
+                    <li class="event-item observe">[11:00] Trader C successfully completes a trade.</li>
+                    <li class="event-item">[12:00] Population count: 124 souls.</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <!-- Include Three.js library -->
+    <script type="module">
+        import * as THREE from 'https://unpkg.com/three@0.165.0/build/three.module.js';
+        // Get the canvas element
+        const canvas = document.getElementById('three-canvas');
+        // Scene, Camera, Renderer setup
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
+        renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+        renderer.setClearColor(0x000000, 0); // Transparent background to show CSS gradient
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            const width = canvas.clientWidth;
+            const height = canvas.clientHeight;
+            renderer.setSize(width, height);
+            camera.aspect = width / height;
+            camera.updateProjectionMatrix();
+        });
+        // Add a simple 3D object (e.g., a cube)
+        const geometry = new THREE.BoxGeometry(1, 1, 1);
+        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
+        const cube = new THREE.Mesh(geometry, material);
+        scene.add(cube);
+        // Position the camera
+        camera.position.z = 5;
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            cube.rotation.x += 0.01;
+            cube.rotation.y += 0.01;
+            renderer.render(scene, camera);
+        }
+        animate();
+    </script>
+</body>
+</html>