Spaces:
Running
Running
| <html><head><base href="https://websim.ai" /> | |
| <title>Data Hub - Explore the Digital Universe</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Roboto+Mono&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #0a192f; | |
| color: #8892b0; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| background-color: rgba(10, 25, 47, 0.9); | |
| padding: 20px 0; | |
| text-align: center; | |
| border-bottom: 2px solid #1d4ed8; | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: 2.5em; | |
| color: #64ffda; | |
| text-shadow: 0 0 10px rgba(100, 255, 218, 0.3); | |
| font-weight: 700; | |
| } | |
| .dashboard { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 25px; | |
| margin-top: 30px; | |
| } | |
| .card { | |
| background-color: #112240; | |
| border-radius: 8px; | |
| box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| border: 1px solid #233554; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 30px -15px rgba(2, 12, 27, 0.7); | |
| border-color: #64ffda; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, #64ffda, #1d4ed8); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.3s ease; | |
| } | |
| .card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .card-image { | |
| width: 100%; | |
| height: 150px; | |
| object-fit: cover; | |
| border-bottom: 1px solid #233554; | |
| } | |
| .card-content { | |
| padding: 20px; | |
| } | |
| .card-title { | |
| font-size: 1.2em; | |
| margin: 0 0 15px 0; | |
| color: #ccd6f6; | |
| font-weight: 700; | |
| } | |
| .card-link { | |
| display: inline-block; | |
| background-color: #1d4ed8; | |
| color: #ccd6f6; | |
| padding: 10px 20px; | |
| border-radius: 4px; | |
| text-decoration: none; | |
| font-size: 0.9em; | |
| font-weight: 400; | |
| transition: all 0.3s ease; | |
| border: none; | |
| cursor: pointer; | |
| font-family: 'Roboto Mono', monospace; | |
| } | |
| .card-link:hover { | |
| background-color: #2563eb; | |
| color: #64ffda; | |
| box-shadow: 0 5px 15px rgba(29, 78, 216, 0.4); | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(100, 255, 218, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(100, 255, 218, 0); } | |
| } | |
| .card:hover .card-link { | |
| animation: pulse 1.5s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Data Hub: Navigate the Digital Cosmos</h1> | |
| </header> | |
| <div class="container"> | |
| <div class="dashboard"> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/neural-network-viz.jpg" alt="Visualization of a complex neural network with glowing nodes and connections" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Neural Network Navigator</h2> | |
| <a href="https://websim.ai/data/neural-network-navigator" class="card-link">Explore Neurons</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/quantum-data-stream.jpg" alt="Abstract visualization of quantum data streams with particle effects" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Quantum Data Streams</h2> | |
| <a href="https://websim.ai/data/quantum-data-streams" class="card-link">Quantum Dive</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/blockchain-explorer.jpg" alt="3D representation of a blockchain with glowing transaction paths" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Blockchain Explorer</h2> | |
| <a href="https://websim.ai/data/blockchain-explorer" class="card-link">Trace Blocks</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/biometric-data-hub.jpg" alt="Holographic display of various biometric data points around a human silhouette" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Biometric Data Hub</h2> | |
| <a href="https://websim.ai/data/biometric-data-hub" class="card-link">Analyze Vitals</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/global-climate-model.jpg" alt="Interactive 3D globe showing climate data and weather patterns" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Global Climate Modeler</h2> | |
| <a href="https://websim.ai/data/global-climate-modeler" class="card-link">Forecast Earth</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/genetic-sequence-analyzer.jpg" alt="DNA helix with highlighted gene sequences and data readouts" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Genetic Sequence Analyzer</h2> | |
| <a href="https://websim.ai/data/genetic-sequence-analyzer" class="card-link">Decode DNA</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/social-network-graph.jpg" alt="Complex web of interconnected nodes representing social network connections" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Social Network Grapher</h2> | |
| <a href="https://websim.ai/data/social-network-grapher" class="card-link">Map Connections</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/market-sentiment-analyzer.jpg" alt="Real-time stock market data with sentiment indicators and trend lines" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Market Sentiment Analyzer</h2> | |
| <a href="https://websim.ai/data/market-sentiment-analyzer" class="card-link">Gauge Markets</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/urban-traffic-flow.jpg" alt="City map with real-time traffic flow data and predictive models" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Urban Traffic Flow Simulator</h2> | |
| <a href="https://websim.ai/data/urban-traffic-flow-simulator" class="card-link">Optimize Routes</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/particle-collision-data.jpg" alt="Visualization of particle collision data from a hadron collider experiment" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Particle Collision Analyzer</h2> | |
| <a href="https://websim.ai/data/particle-collision-analyzer" class="card-link">Smash Atoms</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/deep-space-signals.jpg" alt="Spectral analysis of deep space signals with potential alien transmission patterns" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Deep Space Signal Decoder</h2> | |
| <a href="https://websim.ai/data/deep-space-signal-decoder" class="card-link">Contact ET</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/pandemic-spread-model.jpg" alt="Global map showing the spread and containment of pandemic data" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Pandemic Spread Modeler</h2> | |
| <a href="https://websim.ai/data/pandemic-spread-modeler" class="card-link">Predict Outbreaks</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/quantum-encryption.jpg" alt="Abstract representation of quantum encryption with entangled particles" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Quantum Encryption Suite</h2> | |
| <a href="https://websim.ai/data/quantum-encryption-suite" class="card-link">Secure Qubits</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/ai-ethics-simulator.jpg" alt="Ethical dilemma scenarios presented to AI with decision trees" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">AI Ethics Simulator</h2> | |
| <a href="https://websim.ai/data/ai-ethics-simulator" class="card-link">Test Morality</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/ecosystem-balance.jpg" alt="Complex ecosystem data visualization showing interconnected species and environmental factors" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Ecosystem Balance Analyzer</h2> | |
| <a href="https://websim.ai/data/ecosystem-balance-analyzer" class="card-link">Model Nature</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/dark-web-mapper.jpg" alt="Visualization of dark web connections and data flows with anonymized nodes" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Dark Web Mapper</h2> | |
| <a href="https://websim.ai/data/dark-web-mapper" class="card-link">Unveil Shadows</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/consciousness-quantifier.jpg" alt="Brain activity data correlated with consciousness metrics and theories" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Consciousness Quantifier</h2> | |
| <a href="https://websim.ai/data/consciousness-quantifier" class="card-link">Measure Minds</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/quantum-financial-modeling.jpg" alt="Quantum computer simulating complex financial models and market predictions" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Quantum Financial Modeler</h2> | |
| <a href="https://websim.ai/data/quantum-financial-modeler" class="card-link">Predict Markets</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/multiverse-simulator.jpg" alt="Multiple universe timelines branching and converging based on quantum events" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Multiverse Simulator</h2> | |
| <a href="https://websim.ai/data/multiverse-simulator" class="card-link">Explore Realities</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://websim.ai/images/data/nanobot-swarm-controller.jpg" alt="Microscopic view of nanobot swarms with real-time control data" class="card-image" width="250" height="150"> | |
| <div class="card-content"> | |
| <h2 class="card-title">Nanobot Swarm Controller</h2> | |
| <a href="https://websim.ai/data/nanobot-swarm-controller" class="card-link">Command Micros</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body></html> |