Hugging Face's logo

Spaces:
Pooley622
/
future-signal-tracker
Running

App Files Community
future-signal-tracker
File size: 9,205 Bytes 
48fddf1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
621509a
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
 
<!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>