Spaces:

dydact
/

eyeofsauronos

Running

App Files Files Community

dydact commited on Oct 3, 2025

Commit

d12b663

verified ·

1 Parent(s): 2a0bcfd

begin by cloning palantir.com fully, we will then modify it to suit my needs with a styling guidance document for you.

Browse files

Files changed (3) hide show

README.md +8 -5
index.html +225 -18
styling-guide.html +162 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Eyeofsauronos
-emoji: ⚡
-colorFrom: purple
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: EyeOfSauronOS 🧙‍♂️
+colorFrom: green
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,226 @@
-<!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>EyeOfSauronOS | Enterprise Intelligence Platform</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        .hero-gradient {
+            background: radial-gradient(ellipse at center, rgba(13,20,33,0.8) 0%, rgba(13,20,33,1) 70%);
+        }
+        .globe-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .nav-link-hover:hover {
+            color: #3b82f6;
+            transition: all 0.3s ease;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 font-sans">
+    <!-- Vanta.js Globe Background -->
+    <div id="globe-container" class="globe-container"></div>
+    <!-- Navigation -->
+    <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
+        <div class="flex items-center">
+            <i data-feather="eye" class="w-8 h-8 text-blue-500 mr-2"></i>
+            <span class="text-xl font-bold">EyeOfSauronOS</span>
+        </div>
+        <div class="hidden md:flex space-x-8">
+            <a href="#" class="nav-link-hover">Products</a>
+            <a href="#" class="nav-link-hover">Solutions</a>
+            <a href="#" class="nav-link-hover">Developers</a>
+            <a href="#" class="nav-link-hover">Company</a>
+            <a href="#" class="nav-link-hover">Resources</a>
+        </div>
+        <div class="flex items-center space-x-4">
+            <a href="#" class="nav-link-hover hidden md:block">Contact</a>
+            <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md">Get Demo</button>
+            <button class="md:hidden">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="hero-gradient min-h-screen flex items-center relative overflow-hidden">
+        <div class="container mx-auto px-6 py-20 z-10">
+            <div class="max-w-3xl">
+                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
+                    See All. <span class="text-blue-400">Know All.</span>
+                </h1>
+                <p class="text-xl md:text-2xl text-gray-300 mb-10">
+                    The most powerful enterprise intelligence platform that illuminates your darkest data.
+                </p>
+                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <button class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-md text-lg">
+                        Request Demo
+                    </button>
+                    <button class="bg-gray-800 hover:bg-gray-700 px-8 py-4 rounded-md text-lg border border-gray-700">
+                        Explore Features
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Logo Cloud -->
+    <section class="bg-gray-800 py-12">
+        <div class="container mx-auto px-6">
+            <p class="text-center text-gray-400 mb-8">TRUSTED BY ENTERPRISES ACROSS THE GLOBE</p>
+            <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
+                <div class="opacity-70 hover:opacity-100 transition-opacity">Fortune 500</div>
+                <div class="opacity-70 hover:opacity-100 transition-opacity">Three Rings</div>
+                <div class="opacity-70 hover:opacity-100 transition-opacity">Minas Tirith</div>
+                <div class="opacity-70 hover:opacity-100 transition-opacity">Isengard Inc</div>
+                <div class="opacity-70 hover:opacity-100 transition-opacity">Rivendell Labs</div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-20 bg-gray-900">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Unprecedented Insight</h2>
+                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
+                    Our platform transforms raw data into strategic foresight with proprietary dark magic algorithms.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="feature-card bg-gray-800 p-8 rounded-lg">
+                    <div class="w-14 h-14 bg-blue-900 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="search" class="w-6 h-6 text-blue-400"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Omniscient Vision</h3>
+                    <p class="text-gray-400">
+                        Track every movement across your enterprise in real-time with our all-seeing surveillance.
+                    </p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="feature-card bg-gray-800 p-8 rounded-lg">
+                    <div class="w-14 h-14 bg-purple-900 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="cpu" class="w-6 h-6 text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Dark Intelligence</h3>
+                    <p class="text-gray-400">
+                        Our AI models predict threats before they emerge by analyzing the whispers of the shadows.
+                    </p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="feature-card bg-gray-800 p-8 rounded-lg">
+                    <div class="w-14 h-14 bg-red-900 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="shield" class="w-6 h-6 text-red-400"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Unbreakable Will</h3>
+                    <p class="text-gray-400">
+                        Enterprise-grade security that even the Fellowship couldn't penetrate. One does not simply hack our systems.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 bg-gradient-to-r from-gray-800 to-gray-900">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to wield the ultimate power of knowledge?</h2>
+            <p class="text-xl text-gray-400 max-w-3xl mx-auto mb-10">
+                Join the dark side of data intelligence. We have cookies (and unparalleled surveillance capabilities).
+            </p>
+            <button class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-md text-lg font-medium">
+                Contact Our Nazgûl Sales Team
+            </button>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 border-t border-gray-800 py-12">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Product</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Company</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">API Reference</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#"><i data-feather="twitter" class="text-gray-400 hover:text-blue-400"></i></a>
+                        <a href="#"><i data-feather="linkedin" class="text-gray-400 hover:text-blue-700"></i></a>
+                        <a href="#"><i data-feather="github" class="text-gray-400 hover:text-white"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center mb-4 md:mb-0">
+                    <i data-feather="eye" class="w-6 h-6 text-blue-500 mr-2"></i>
+                    <span class="font-bold">EyeOfSauronOS</span>
+                </div>
+                <div class="text-gray-400 text-sm">
+                    © 2023 Dark Tower Technologies. All rights reserved. One platform to rule them all.
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Vanta.js
+        VANTA.GLOBE({
+            el: "#globe-container",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0x0d1421,
+            size: 1.00
+        });
+        // Initialize Feather Icons
+        feather.replace();
+    </script>
+</body>
 </html>

styling-guide.html ADDED Viewed

	@@ -0,0 +1,162 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EyeOfSauronOS Styling Guide</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .color-swatch {
+            width: 120px;
+            height: 120px;
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            padding: 8px;
+            margin: 8px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .typo-example {
+            border-left: 4px solid #3b82f6;
+            padding-left: 12px;
+            margin: 16px 0;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-900">
+    <div class="container mx-auto px-6 py-12">
+        <h1 class="text-4xl font-bold mb-2">EyeOfSauronOS Design System</h1>
+        <p class="text-xl text-gray-600 mb-12">The comprehensive styling guide for building consistent Mordor-approved interfaces</p>
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 border-b pb-2">Color Palette</h2>
+            <div class="flex flex-wrap">
+                <div class="color-swatch" style="background-color: #0d1421;">
+                    <span class="text-white">Dark Void</span>
+                    <span class="text-gray-300 text-sm">#0d1421</span>
+                </div>
+                <div class="color-swatch" style="background-color: #1e293b;">
+                    <span class="text-white">Shadow Realm</span>
+                    <span class="text-gray-300 text-sm">#1e293b</span>
+                </div>
+                <div class="color-swatch" style="background-color: #3b82f6;">
+                    <span class="text-white">Eye Blue</span>
+                    <span class="text-white text-sm">#3b82f6</span>
+                </div>
+                <div class="color-swatch" style="background-color: #10b981;">
+                    <span class="text-white">Orc Green</span>
+                    <span class="text-white text-sm">#10b981</span>
+                </div>
+                <div class="color-swatch" style="background-color: #f59e0b;">
+                    <span class="text-white">Ring Gold</span>
+                    <span class="text-white text-sm">#f59e0b</span>
+                </div>
+            </div>
+        </section>
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 border-b pb-2">Typography</h2>
+            <div class="typo-example">
+                <h3 class="text-sm font-semibold text-gray-500 mb-1">HEADING 1</h3>
+                <h1 class="text-5xl font-bold mb-4">Omniscient Surveillance</h1>
+            </div>
+            <div class="typo-example">
+                <h3 class="text-sm font-semibold text-gray-500 mb-1">HEADING 2</h3>
+                <h2 class="text-3xl font-bold mb-4">Dark Intelligence Reports</h2>
+            </div>
+            <div class="typo-example">
+                <h3 class="text-sm font-semibold text-gray-500 mb-1">HEADING 3</h3>
+                <h3 class="text-xl font-bold mb-4">Nazgûl Team Members</h3>
+            </div>
+            <div class="typo-example">
+                <h3 class="text-sm font-semibold text-gray-500 mb-1">BODY TEXT</h3>
+                <p class="text-base mb-4">Our platform provides unparalleled insight into all enterprise activities. With real-time monitoring and predictive analytics, we help you maintain absolute control over your domain. The Eye sees all.</p>
+            </div>
+            <div class="typo-example">
+                <h3 class="text-sm font-semibold text-gray-500 mb-1">CAPTION TEXT</h3>
+                <p class="text-sm text-gray-500 mb-4">Data last collected at the Cracks of Doom on 10/25/2023</p>
+            </div>
+        </section>
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 border-b pb-2">UI Components</h2>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Buttons</h3>
+                    <div class="space-y-4">
+                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md">Primary Action</button>
+                        <button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-md border border-gray-700">Secondary</button>
+                        <button class="text-blue-500 hover:text-blue-400 px-6 py-3 rounded-md border border-blue-500 hover:border-blue-400">Tertiary</button>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Cards</h3>
+                    <div class="bg-gray-800 p-6 rounded-lg">
+                        <div class="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center mb-4">
+                            <i data-feather="eye" class="w-5 h-5 text-blue-400"></i>
+                        </div>
+                        <h4 class="text-lg font-bold mb-2">All-Seeing Module</h4>
+                        <p class="text-gray-400 text-sm">Track movements across all nine realms with our patented dark vision technology.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 border-b pb-2">Iconography</h2>
+            <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-6">
+                <div class="flex flex-col items-center">
+                    <i data-feather="eye" class="w-8 h-8 text-blue-500 mb-2"></i>
+                    <span class="text-xs text-gray-600">eye</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <i data-feather="search" class="w-8 h-8 text-blue-500 mb-2"></i>
+                    <span class="text-xs text-gray-600">search</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <i data-feather="shield" class="w-8 h-8 text-blue-500 mb-2"></i>
+                    <span class="text-xs text-gray-600">shield</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <i data-feather="cpu" class="w-8 h-8 text-blue-500 mb-2"></i>
+                    <span class="text-xs text-gray-600">cpu</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <i data-feather="globe" class="w-8 h-8 text-blue-500 mb-2"></i>
+                    <span class="text-xs text-gray-600">globe</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <i data-feather="users" class="w-8 h-8 text-blue-500 mb-2"></i>
+                    <span class="text-xs text-gray-600">users</span>
+                </div>
+            </div>
+        </section>
+        <section>
+            <h2 class="text-2xl font-bold mb-6 border-b pb-2">Motion Principles</h2>
+            <div class="bg-gray-100 p-6 rounded-lg">
+                <h3 class="text-lg font-semibold mb-4">Interaction Guidelines</h3>
+                <ul class="list-disc pl-5 space-y-2 text-gray-700">
+                    <li>Hover effects should be subtle but noticeable (scale 105%, slight elevation)</li>
+                    <li>Transitions should last 300ms with ease-in-out timing</li>
+                    <li>Modal appearances should have a slight fade and upward movement</li>
+                    <li>Important alerts should pulse gently to attract the Eye's attention</li>
+                </ul>
+            </div>
+        </section>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>