Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

App Files Community
mgbam commited on
Commit
462ee31
·
verified ·
1 Parent(s): 74169d6

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +29 -45
templates/index.html CHANGED
@@ -3,78 +3,62 @@
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>
64
  <small id="analysis-status"></small>
65
  </form>
66
- <div id="manual-results" hx-sse="connect:/api/sentiment/stream" hx-swap="afterbegin">
67
- <!-- Manual analysis results appear here -->
68
- </div>
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>
79
  </article>
80
  </section>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sentinel Protocol</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
+ :root { --pico-font-family: 'Inter', sans-serif; }
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
13
+ body { background-color: #0d1117; }
14
+ main.container { max-width: 1400px; }
15
+ .card { border: 1px solid #30363d; border-left-width: 5px; margin-bottom: 2rem; }
16
+ .impact-low { border-left-color: #388bfd; }
17
+ .impact-medium { border-left-color: #d29922; }
18
+ .impact-high { border-left-color: #f85149; }
19
+ .sentiment-positive { color: #3fb950; }
20
+ .sentiment-negative { color: #f85149; }
21
+ blockquote a { color: var(--pico-color-zinc-200); text-decoration: none; font-weight: bold; font-size: 1.1em; }
 
 
 
 
 
 
 
22
  blockquote a:hover { text-decoration: underline; }
23
+ article header { font-weight: bold; border-bottom: 1px solid #30363d; padding-bottom: 0.5rem; margin-bottom: 1rem; }
24
+ #daily-briefing { background-color: #161b22; padding: 2rem; border-radius: var(--pico-border-radius); border: 1px solid #30363d;}
25
  </style>
26
  </head>
27
  <body hx-ext="sse">
28
  <main class="container">
29
+ <header style="text-align: center; margin-bottom: 3rem;">
30
+ <h1><img src="https://img.icons8.com/nolan/64/bot.png" style="vertical-align: middle; margin-right: 10px;">The Sentinel Protocol</h1>
31
+ <p>Autonomous AI Market Analysis</p>
32
  </header>
33
 
 
34
  <article
35
  id="daily-briefing"
36
  hx-get="/api/briefing"
37
  hx-trigger="load, every 5m"
38
  hx-swap="innerHTML">
39
+ <h3 aria-busy="true">Sentinel is synthesizing the Daily Briefing...</h3>
40
  </article>
41
 
42
+ <div class="grid" style="margin-top: 2rem;">
43
+ <aside>
 
 
44
  <article>
45
+ <header>Market Snapshot</header>
46
+ <div id="prices" hx-get="/api/prices" hx-trigger="load, every 60s"></div>
 
 
47
  </article>
48
  <article>
49
+ <header>On-Demand Ticker Analysis</header>
50
+ <form hx-post="/api/sentiment" hx-target="#analysis-status">
51
+ <textarea name="text" placeholder="Paste single news headline..." required></textarea>
52
+ <button type="submit">Initiate Analysis Protocol</button>
53
  <small id="analysis-status"></small>
54
  </form>
 
 
 
55
  </article>
56
+ </aside>
 
 
57
  <section>
58
  <article>
59
+ <header>Live Intelligence Feed (Event-Correlated)</header>
60
  <div id="news-feed" hx-sse="connect:/api/news/stream" hx-swap="afterbegin">
61
+ <p aria-busy="true">Establishing secure connection to intelligence network...</p>
62
  </div>
63
  </article>
64
  </section>