Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

App Files Community
mgbam commited on
Commit
96fc47a
·
verified ·
1 Parent(s): d5b9420

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +34 -12
templates/index.html CHANGED
@@ -3,39 +3,61 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CryptoSentinel Pro</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
8
  <script src="https://unpkg.com/[email protected]"></script>
9
  <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
10
  <style>
11
- .card { border-left-width: 4px; border-left-style: solid; margin-bottom: 1.5rem; }
 
 
 
 
 
 
 
 
 
12
  .impact-low { border-left-color: var(--pico-color-cyan-500); }
13
  .impact-medium { border-left-color: var(--pico-color-amber-500); }
14
  .impact-high { border-left-color: var(--pico-color-red-600); }
15
- .sentiment-positive { color: var(--pico-color-green-400); }
16
- .sentiment-negative { color: var(--pico-color-red-400); }
17
  .sentiment-neutral { color: var(--pico-color-gray-400); }
18
- blockquote { font-style: italic; }
 
 
 
19
  </style>
20
  </head>
21
  <body hx-ext="sse">
22
  <main class="container">
23
  <header style="text-align: center;">
24
- <h1>🤖 CryptoSentinel Pro</h1>
25
- <p>AI-Powered Market Intelligence</p>
26
  </header>
27
 
 
 
 
 
 
 
 
 
 
 
28
  <div class="grid">
29
- <!-- Left Column: Manual Analysis & Prices -->
30
  <section>
31
  <article>
32
  <header><strong>Market Snapshot</strong></header>
33
- <div id="prices" hx-get="/api/prices" hx-trigger="load, every 30s" hx-swap="innerHTML">
34
  <p aria-busy="true">Fetching prices...</p>
35
  </div>
36
  </article>
37
  <article>
38
- <header><strong>Manual Analysis</strong></header>
39
  <form hx-post="/api/sentiment" hx-target="#analysis-status" hx-on::after-request="this.reset()">
40
  <textarea name="text" placeholder="Paste news headline or tweet here..." required></textarea>
41
  <button type="submit">Run Deep Analysis</button>
@@ -47,10 +69,10 @@
47
  </article>
48
  </section>
49
 
50
- <!-- Right Column: Automated News Feed -->
51
  <section>
52
  <article>
53
- <header><strong>Automated Market Intelligence Feed</strong></header>
54
  <div id="news-feed" hx-sse="connect:/api/news/stream" hx-swap="afterbegin">
55
  <p aria-busy="true">Initializing live news feed...</p>
56
  </div>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CryptoSentinel Co-Pilot</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
8
  <script src="https://unpkg.com/[email protected]"></script>
9
  <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
10
  <style>
11
+ body { font-family: sans-serif; }
12
+ main.container { max-width: 1200px; margin: 2rem auto; }
13
+ .card {
14
+ border-left-width: 5px;
15
+ border-left-style: solid;
16
+ margin-bottom: 1.5rem;
17
+ padding: 1.25rem;
18
+ background-color: var(--pico-card-background-color);
19
+ border-radius: var(--pico-border-radius);
20
+ }
21
  .impact-low { border-left-color: var(--pico-color-cyan-500); }
22
  .impact-medium { border-left-color: var(--pico-color-amber-500); }
23
  .impact-high { border-left-color: var(--pico-color-red-600); }
24
+ .sentiment-positive { color: var(--pico-color-green-400); font-weight: bold; }
25
+ .sentiment-negative { color: var(--pico-color-red-400); font-weight: bold; }
26
  .sentiment-neutral { color: var(--pico-color-gray-400); }
27
+ blockquote { font-style: italic; margin-bottom: 1rem; border-left: none; padding: 0; }
28
+ blockquote a { color: var(--pico-primary-inverse); text-decoration: none; }
29
+ blockquote a:hover { text-decoration: underline; }
30
+ header { margin-bottom: 2rem; }
31
  </style>
32
  </head>
33
  <body hx-ext="sse">
34
  <main class="container">
35
  <header style="text-align: center;">
36
+ <h1>🤖 CryptoSentinel Co-Pilot</h1>
37
+ <p>Your AI-Powered Market Analyst</p>
38
  </header>
39
 
40
+ <!-- The Daily Briefing -->
41
+ <article
42
+ id="daily-briefing"
43
+ hx-get="/api/briefing"
44
+ hx-trigger="load, every 5m"
45
+ hx-swap="innerHTML">
46
+ <h3 aria-busy="true">Sentinel is generating the Daily Briefing...</h3>
47
+ </article>
48
+
49
+ <!-- Main Content Grid -->
50
  <div class="grid">
51
+ <!-- Left Column -->
52
  <section>
53
  <article>
54
  <header><strong>Market Snapshot</strong></header>
55
+ <div id="prices" hx-get="/api/prices" hx-trigger="load, every 60s" hx-swap="innerHTML">
56
  <p aria-busy="true">Fetching prices...</p>
57
  </div>
58
  </article>
59
  <article>
60
+ <header><strong>On-Demand Analysis</strong></header>
61
  <form hx-post="/api/sentiment" hx-target="#analysis-status" hx-on::after-request="this.reset()">
62
  <textarea name="text" placeholder="Paste news headline or tweet here..." required></textarea>
63
  <button type="submit">Run Deep Analysis</button>
 
69
  </article>
70
  </section>
71
 
72
+ <!-- Right Column -->
73
  <section>
74
  <article>
75
+ <header><strong>Live Intelligence Ticker</strong></header>
76
  <div id="news-feed" hx-sse="connect:/api/news/stream" hx-swap="afterbegin">
77
  <p aria-busy="true">Initializing live news feed...</p>
78
  </div>