future-signal-tracker / index.html
Pooley622's picture
Signal v1.0
48fddf1 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signal - Future Tracker</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
#vanta-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.15;
}
.gradient-text {
background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.signal-card {
backdrop-filter: blur(10px);
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.signal-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}
.input-glow:focus {
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.5);
}
</style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen">
<div id="vanta-bg"></div>
<!-- Navigation -->
<nav class="border-b border-slate-800 py-4 px-6 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="activity" class="text-indigo-500"></i>
<span class="text-xl font-bold">Signal</span>
</div>
<div class="flex space-x-6">
<a href="#" class="hover:text-indigo-400 transition">Dashboard</a>
<a href="#" class="hover:text-indigo-400 transition">Research</a>
<a href="#" class="hover:text-indigo-400 transition">Settings</a>
</div>
</nav>
<!-- Hero Section -->
<section class="container mx-auto px-6 py-16 text-center">
<h1 class="text-5xl font-bold mb-4">
<span class="gradient-text">Detecting the Future</span> in the Noise of Today
</h1>
<p class="text-xl text-slate-400 max-w-2xl mx-auto mb-8">
Track emerging scientific and technological signals across patents, research papers, and news.
</p>
<div class="flex justify-center space-x-4">
<button class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-lg font-medium transition">
<i data-feather="plus" class="inline mr-2"></i> Add Watchword
</button>
<button class="bg-slate-800 hover:bg-slate-700 border border-slate-700 px-6 py-3 rounded-lg font-medium transition">
<i data-feather="book" class="inline mr-2"></i> View Research
</button>
</div>
</section>
<!-- Dashboard Grid -->
<section class="container mx-auto px-6 pb-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Patent Signals Card -->
<div class="signal-card rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="p-3 bg-indigo-900/50 rounded-lg mr-4">
<i data-feather="file-text" class="text-indigo-400"></i>
</div>
<h3 class="text-lg font-semibold">Patent Signals</h3>
</div>
<p class="text-slate-400 mb-4">Recent patents related to gravity manipulation and breakthrough physics.</p>
<div class="space-y-3">
<div class="flex items-start">
<div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
<p class="text-sm">"Quantum Gravity Control Device" - US Patent #2023/0154321</p>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
<p class="text-sm">"Inertial Mass Reduction System" - US Patent #2023/0187654</p>
</div>
</div>
</div>
<!-- Research Signals Card -->
<div class="signal-card rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="p-3 bg-purple-900/50 rounded-lg mr-4">
<i data-feather="book-open" class="text-purple-400"></i>
</div>
<h3 class="text-lg font-semibold">Research Signals</h3>
</div>
<p class="text-slate-400 mb-4">Emerging papers on arXiv about breakthrough physics concepts.</p>
<div class="space-y-3">
<div class="flex items-start">
<div class="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3"></div>
<p class="text-sm">"Experimental Results of Room-Temperature Superconductivity" - arXiv:2306.12345</p>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3"></div>
<p class="text-sm">"Negative Mass in Condensed Matter Systems" - arXiv:2307.05432</p>
</div>
</div>
</div>
<!-- News Signals Card -->
<div class="signal-card rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="p-3 bg-rose-900/50 rounded-lg mr-4">
<i data-feather="alert-circle" class="text-rose-400"></i>
</div>
<h3 class="text-lg font-semibold">News Signals</h3>
</div>
<p class="text-slate-400 mb-4">Media coverage of unusual scientific developments.</p>
<div class="space-y-3">
<div class="flex items-start">
<div class="w-2 h-2 bg-rose-500 rounded-full mt-2 mr-3"></div>
<p class="text-sm">"DARPA Awards $10M for Anti-Gravity Research" - The Verge</p>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-rose-500 rounded-full mt-2 mr-3"></div>
<p class="text-sm">"Mysterious Energy Readings Detected at CERN" - Scientific American</p>
</div>
</div>
</div>
<!-- Watchwords Input -->
<div class="signal-card rounded-xl p-6 md:col-span-2 lg:col-span-1">
<h3 class="text-lg font-semibold mb-4">Add Watchword</h3>
<div class="flex">
<input type="text" placeholder="e.g. 'quantum gravity'" class="input-glow bg-slate-800 border border-slate-700 rounded-l-lg px-4 py-2 w-full focus:outline-none">
<button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg transition">
<i data-feather="plus"></i>
</button>
</div>
<div class="mt-4">
<h4 class="text-sm font-medium text-slate-400 mb-2">Active Watchwords</h4>
<div class="flex flex-wrap gap-2">
<span class="bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-full text-sm flex items-center">
<span class="w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
gravity control
</span>
<span class="bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-full text-sm flex items-center">
<span class="w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
room temp superconductor
</span>
<span class="bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-full text-sm flex items-center">
<span class="w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
inertial mass reduction
</span>
</div>
</div>
</div>
<!-- Signal Graph -->
<div class="signal-card rounded-xl p-6 md:col-span-2">
<h3 class="text-lg font-semibold mb-4">Signal Strength Timeline</h3>
<div class="h-64 bg-slate-800/50 rounded-lg border border-slate-700 flex items-center justify-center">
<p class="text-slate-500">Signal visualization will appear here</p>
</div>
</div>
</section>
<footer class="border-t border-slate-800 py-6 px-6 text-center text-slate-500 text-sm">
<p>Signal Tracker v1.0 - Detecting the future in the noise of today</p>
</footer>
<script>
feather.replace();
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x6366f1,
backgroundColor: 0x0f172a
});
</script>
</body>
</html>