Hugging Face's logo

Spaces:
Rickesh
/
stock-analysis
Running

App Files Community
Rickesh commited on
Commit
be36f95
·
verified ·
1 Parent(s): bef2fbc

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +762 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Stock Analysis
3
- emoji: 🐨
4
- colorFrom: indigo
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: stock-analysis
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,762 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Indian Stock Analyzer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
12
+ }
13
+ .stock-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .chart-container {
18
+ height: 300px;
19
+ position: relative;
20
+ }
21
+ .pulse {
22
+ animation: pulse 2s infinite;
23
+ }
24
+ @keyframes pulse {
25
+ 0% {
26
+ transform: scale(0.95);
27
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
28
+ }
29
+ 70% {
30
+ transform: scale(1);
31
+ box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
32
+ }
33
+ 100% {
34
+ transform: scale(0.95);
35
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
36
+ }
37
+ }
38
+ #stockInput {
39
+ min-height: 100px;
40
+ }
41
+ .blink {
42
+ animation: blink 1s step-start infinite;
43
+ }
44
+ @keyframes blink {
45
+ 50% { opacity: 0; }
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50">
50
+ <!-- Header -->
51
+ <header class="gradient-bg text-white">
52
+ <div class="container mx-auto px-4 py-8">
53
+ <div class="flex justify-between items-center">
54
+ <div>
55
+ <h1 class="text-3xl font-bold">Indian Stock Analyzer</h1>
56
+ <p class="mt-2 opacity-90">Real-time analysis of Indian stocks</p>
57
+ </div>
58
+ <div class="flex items-center space-x-4">
59
+ <div id="lastUpdated" class="text-sm bg-white/20 px-3 py-1 rounded-full hidden">
60
+ <i class="fas fa-clock mr-1"></i> <span>Updated: <span id="updateTime">Just now</span></span>
61
+ </div>
62
+ <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
63
+ <i class="fas fa-user mr-2"></i>Login
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </header>
69
+
70
+ <!-- Main Content -->
71
+ <main class="container mx-auto px-4 py-8">
72
+ <!-- Input Section -->
73
+ <section class="mb-12">
74
+ <div class="bg-white rounded-xl shadow-lg p-6">
75
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Analyze Your Stocks</h2>
76
+ <div class="flex flex-col md:flex-row gap-4">
77
+ <div class="flex-1">
78
+ <label for="stockInput" class="block text-sm font-medium text-gray-700 mb-2">Enter Stock Symbols (one per line or comma separated)</label>
79
+ <div class="flex flex-col">
80
+ <textarea id="stockInput" placeholder="Enter stock symbols, one per line or comma separated
81
+ e.g.
82
+ RELIANCE.NS
83
+ TCS.NS
84
+ HDFCBANK.NS
85
+
86
+ or
87
+
88
+ RELIANCE.NS, TCS.NS, HDFCBANK.NS"
89
+ class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
90
+ <div class="flex items-center mt-2">
91
+ <button id="analyzeBtn" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition flex items-center justify-center">
92
+ <i class="fas fa-chart-line mr-2"></i> Analyze
93
+ </button>
94
+ <div id="apiStatus" class="ml-4 flex items-center text-sm hidden">
95
+ <span class="w-2 h-2 rounded-full mr-2 bg-green-500"></span>
96
+ <span>API Connected</span>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ <p class="mt-2 text-sm text-gray-500">Use NSE symbols with .NS suffix (e.g., RELIANCE.NS)</p>
101
+ </div>
102
+ <div class="md:w-64">
103
+ <label for="timeFrame" class="block text-sm font-medium text-gray-700 mb-2">Time Frame</label>
104
+ <select id="timeFrame" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
105
+ <option value="TIME_SERIES_INTRADAY">Today</option>
106
+ <option value="TIME_SERIES_DAILY" selected>Daily</option>
107
+ <option value="TIME_SERIES_WEEKLY">Weekly</option>
108
+ <option value="TIME_SERIES_MONTHLY">Monthly</option>
109
+ </select>
110
+ <div class="mt-4">
111
+ <label class="inline-flex items-center">
112
+ <input type="checkbox" id="autoRefresh" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50">
113
+ <span class="ml-2 text-sm text-gray-700">Auto-refresh (30s)</span>
114
+ </label>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Results Section (Initially hidden) -->
122
+ <section id="resultsSection" class="hidden">
123
+ <div class="flex justify-between items-center mb-6">
124
+ <h2 class="text-2xl font-semibold text-gray-800">Analysis Results</h2>
125
+ <div class="flex space-x-2">
126
+ <button id="exportBtn" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition flex items-center">
127
+ <i class="fas fa-file-export mr-2"></i> Export
128
+ </button>
129
+ <button id="refreshBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center">
130
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
131
+ </button>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Summary Cards -->
136
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
137
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-center stock-card transition">
138
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
139
+ <i class="fas fa-rupee-sign text-indigo-600 text-xl"></i>
140
+ </div>
141
+ <div>
142
+ <p class="text-sm text-gray-500">Total Value</p>
143
+ <h3 class="text-2xl font-bold text-gray-800" id="totalValue">Loading...</h3>
144
+ </div>
145
+ </div>
146
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-center stock-card transition">
147
+ <div class="bg-green-100 p-3 rounded-full mr-4">
148
+ <i class="fas fa-arrow-up text-green-600 text-xl"></i>
149
+ </div>
150
+ <div>
151
+ <p class="text-sm text-gray-500">Best Performer</p>
152
+ <h3 class="text-2xl font-bold text-gray-800" id="bestPerformer">Loading...</h3>
153
+ </div>
154
+ </div>
155
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-center stock-card transition">
156
+ <div class="bg-red-100 p-3 rounded-full mr-4">
157
+ <i class="fas fa-arrow-down text-red-600 text-xl"></i>
158
+ </div>
159
+ <div>
160
+ <p class="text-sm text-gray-500">Worst Performer</p>
161
+ <h3 class="text-2xl font-bold text-gray-800" id="worstPerformer">Loading...</h3>
162
+ </div>
163
+ </div>
164
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-center stock-card transition">
165
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
166
+ <i class="fas fa-percentage text-blue-600 text-xl"></i>
167
+ </div>
168
+ <div>
169
+ <p class="text-sm text-gray-500">Avg Return</p>
170
+ <h3 class="text-2xl font-bold text-gray-800" id="avgReturn">Loading...</h3>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Stock Performance Chart -->
176
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
177
+ <div class="flex justify-between items-center mb-4">
178
+ <h3 class="text-lg font-semibold text-gray-800">Performance Comparison</h3>
179
+ <div class="flex space-x-2">
180
+ <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-lg">1D</button>
181
+ <button class="px-3 py-1 text-sm bg-indigo-600 text-white rounded-lg">1W</button>
182
+ <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-lg">1M</button>
183
+ </div>
184
+ </div>
185
+ <div class="chart-container">
186
+ <canvas id="performanceChart"></canvas>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Individual Stock Cards -->
191
+ <div id="stockCardsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
192
+ <!-- Stock cards will be dynamically inserted here -->
193
+ </div>
194
+ </section>
195
+
196
+ <!-- Loading State (Initially hidden) -->
197
+ <section id="loadingSection" class="hidden">
198
+ <div class="bg-white rounded-xl shadow-lg p-12 text-center">
199
+ <div class="inline-block p-6 bg-indigo-100 rounded-full mb-6 pulse">
200
+ <i class="fas fa-chart-pie text-indigo-600 text-4xl"></i>
201
+ </div>
202
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Fetching Stock Data</h3>
203
+ <p class="text-gray-500 mb-6">Connecting to market data sources...</p>
204
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
205
+ <div id="progressBar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
206
+ </div>
207
+ <p id="fetchingSymbol" class="text-sm text-gray-500 mt-4"></p>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- Error State (Initially hidden) -->
212
+ <section id="errorSection" class="hidden">
213
+ <div class="bg-red-50 border-l-4 border-red-400 p-4 rounded-lg">
214
+ <div class="flex">
215
+ <div class="flex-shrink-0">
216
+ <i class="fas fa-exclamation-circle h-5 w-5 text-red-400"></i>
217
+ </div>
218
+ <div class="ml-3">
219
+ <h3 class="text-sm font-medium text-red-800" id="errorTitle">Error</h3>
220
+ <div class="mt-2 text-sm text-red-700" id="errorMessage">
221
+ <p>There was an error fetching stock data. Please try again.</p>
222
+ </div>
223
+ <div class="mt-4">
224
+ <button id="retryBtn" class="bg-red-100 text-red-800 px-3 py-1 rounded-md text-sm font-medium hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
225
+ Retry
226
+ </button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </section>
232
+ </main>
233
+
234
+ <!-- Footer -->
235
+ <footer class="bg-gray-800 text-white py-8">
236
+ <div class="container mx-auto px-4">
237
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
238
+ <div>
239
+ <h3 class="text-lg font-semibold mb-4">Indian Stock Analyzer</h3>
240
+ <p class="text-gray-400">Real-time analysis of Indian stocks using market data.</p>
241
+ </div>
242
+ <div>
243
+ <h3 class="text-lg font-semibold mb-4">Popular Stocks</h3>
244
+ <ul class="space-y-2">
245
+ <li><a href="#" class="text-gray-400 hover:text-white transition">RELIANCE.NS</a></li>
246
+ <li><a href="#" class="text-gray-400 hover:text-white transition">TCS.NS</a></li>
247
+ <li><a href="#" class="text-gray-400 hover:text-white transition">HDFCBANK.NS</a></li>
248
+ <li><a href="#" class="text-gray-400 hover:text-white transition">INFY.NS</a></li>
249
+ </ul>
250
+ </div>
251
+ <div>
252
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
253
+ <ul class="space-y-2">
254
+ <li><a href="#" class="text-gray-400 hover:text-white transition">NSE India</a></li>
255
+ <li><a href="#" class="text-gray-400 hover:text-white transition">BSE India</a></li>
256
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Market News</a></li>
257
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API Docs</a></li>
258
+ </ul>
259
+ </div>
260
+ <div>
261
+ <h3 class="text-lg font-semibold mb-4">Connect With Us</h3>
262
+ <div class="flex space-x-4 mb-4">
263
+ <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-indigo-600 transition"><i class="fab fa-twitter"></i></a>
264
+ <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-indigo-600 transition"><i class="fab fa-linkedin-in"></i></a>
265
+ <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-indigo-600 transition"><i class="fab fa-facebook-f"></i></a>
266
+ </div>
267
+ <p class="text-gray-400">Data provided by Alpha Vantage</p>
268
+ </div>
269
+ </div>
270
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
271
+ <p>© 2023 Indian Stock Analyzer. All rights reserved.</p>
272
+ </div>
273
+ </div>
274
+ </footer>
275
+
276
+ <!-- Chart.js -->
277
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
278
+
279
+ <script>
280
+ // API Configuration
281
+ const API_KEY = 'YOUR_ALPHA_VANTAGE_API_KEY'; // Replace with your Alpha Vantage API key
282
+ const BASE_URL = 'https://www.alphavantage.co/query';
283
+
284
+ // DOM Elements
285
+ const analyzeBtn = document.getElementById('analyzeBtn');
286
+ const stockInput = document.getElementById('stockInput');
287
+ const resultsSection = document.getElementById('resultsSection');
288
+ const loadingSection = document.getElementById('loadingSection');
289
+ const errorSection = document.getElementById('errorSection');
290
+ const stockCardsContainer = document.getElementById('stockCardsContainer');
291
+ const progressBar = document.getElementById('progressBar');
292
+ const totalValue = document.getElementById('totalValue');
293
+ const bestPerformer = document.getElementById('bestPerformer');
294
+ const worstPerformer = document.getElementById('worstPerformer');
295
+ const avgReturn = document.getElementById('avgReturn');
296
+ const exportBtn = document.getElementById('exportBtn');
297
+ const refreshBtn = document.getElementById('refreshBtn');
298
+ const retryBtn = document.getElementById('retryBtn');
299
+ const timeFrame = document.getElementById('timeFrame');
300
+ const autoRefresh = document.getElementById('autoRefresh');
301
+ const lastUpdated = document.getElementById('lastUpdated');
302
+ const updateTime = document.getElementById('updateTime');
303
+ const apiStatus = document.getElementById('apiStatus');
304
+ const fetchingSymbol = document.getElementById('fetchingSymbol');
305
+ const errorTitle = document.getElementById('errorTitle');
306
+ const errorMessage = document.getElementById('errorMessage');
307
+
308
+ // Initialize chart
309
+ let performanceChart;
310
+ let autoRefreshInterval;
311
+ let currentStocks = [];
312
+
313
+ // Event Listeners
314
+ analyzeBtn.addEventListener('click', analyzeStocks);
315
+ exportBtn.addEventListener('click', exportData);
316
+ refreshBtn.addEventListener('click', analyzeStocks);
317
+ retryBtn.addEventListener('click', analyzeStocks);
318
+ autoRefresh.addEventListener('change', toggleAutoRefresh);
319
+
320
+ // Toggle auto-refresh
321
+ function toggleAutoRefresh() {
322
+ if (autoRefresh.checked) {
323
+ autoRefreshInterval = setInterval(analyzeStocks, 30000); // 30 seconds
324
+ } else {
325
+ clearInterval(autoRefreshInterval);
326
+ }
327
+ }
328
+
329
+ // Format date
330
+ function formatDate(date) {
331
+ const options = {
332
+ year: 'numeric',
333
+ month: 'short',
334
+ day: 'numeric',
335
+ hour: '2-digit',
336
+ minute: '2-digit',
337
+ second: '2-digit'
338
+ };
339
+ return new Date(date).toLocaleString('en-IN', options);
340
+ }
341
+
342
+ // Show last updated time
343
+ function showLastUpdated() {
344
+ lastUpdated.classList.remove('hidden');
345
+ updateTime.textContent = formatDate(new Date());
346
+ }
347
+
348
+ // Show API status
349
+ function showApiStatus(connected) {
350
+ apiStatus.classList.remove('hidden');
351
+ const dot = apiStatus.querySelector('.w-2');
352
+ const text = apiStatus.querySelector('span:last-child');
353
+
354
+ if (connected) {
355
+ dot.classList.remove('bg-red-500');
356
+ dot.classList.add('bg-green-500');
357
+ text.textContent = 'API Connected';
358
+ } else {
359
+ dot.classList.remove('bg-green-500');
360
+ dot.classList.add('bg-red-500');
361
+ text.textContent = 'API Disconnected';
362
+ }
363
+ }
364
+
365
+ // Analyze Stocks Function
366
+ async function analyzeStocks() {
367
+ const inputValue = stockInput.value.trim();
368
+ if (!inputValue) {
369
+ showError('Input Error', 'Please enter at least one stock symbol');
370
+ return;
371
+ }
372
+
373
+ // Show loading state
374
+ loadingSection.classList.remove('hidden');
375
+ resultsSection.classList.add('hidden');
376
+ errorSection.classList.add('hidden');
377
+
378
+ // Process input - accept both comma separated and one per line
379
+ let symbols = [];
380
+ if (inputValue.includes(',')) {
381
+ symbols = inputValue.split(',').map(s => s.trim().toUpperCase());
382
+ } else {
383
+ symbols = inputValue.split('\n').map(s => s.trim().toUpperCase()).filter(s => s.length > 0);
384
+ }
385
+
386
+ // Remove duplicates
387
+ symbols = [...new Set(symbols)];
388
+
389
+ // Check if symbols have .NS suffix (NSE)
390
+ symbols = symbols.map(symbol => {
391
+ if (!symbol.endsWith('.NS') && !symbol.endsWith('.BO')) {
392
+ return symbol + '.NS'; // Default to NSE if no exchange specified
393
+ }
394
+ return symbol;
395
+ });
396
+
397
+ try {
398
+ // Show API status
399
+ showApiStatus(true);
400
+
401
+ // Fetch data for each symbol
402
+ const stocks = [];
403
+ let progress = 0;
404
+
405
+ for (const symbol of symbols) {
406
+ fetchingSymbol.textContent = `Fetching data for ${symbol}...`;
407
+ progress += 100 / symbols.length;
408
+ progressBar.style.width = `${progress}%`;
409
+
410
+ const stockData = await fetchStockData(symbol);
411
+ if (stockData) {
412
+ stocks.push(stockData);
413
+ }
414
+ }
415
+
416
+ if (stocks.length === 0) {
417
+ throw new Error('No valid stock data received');
418
+ }
419
+
420
+ currentStocks = stocks;
421
+
422
+ // Hide loading and show results
423
+ loadingSection.classList.add('hidden');
424
+ resultsSection.classList.remove('hidden');
425
+
426
+ // Update summary
427
+ updateSummary(stocks);
428
+
429
+ // Render stock cards
430
+ renderStockCards(stocks);
431
+
432
+ // Render performance chart
433
+ renderPerformanceChart(stocks);
434
+
435
+ // Show last updated time
436
+ showLastUpdated();
437
+
438
+ } catch (error) {
439
+ console.error('Error fetching stock data:', error);
440
+ showError('API Error', error.message || 'Failed to fetch stock data. Please try again.');
441
+ showApiStatus(false);
442
+ }
443
+ }
444
+
445
+ // Fetch Stock Data from Alpha Vantage
446
+ async function fetchStockData(symbol) {
447
+ try {
448
+ const functionType = timeFrame.value;
449
+ let url = `${BASE_URL}?function=${functionType}&symbol=${symbol}&apikey=${API_KEY}`;
450
+
451
+ if (functionType === 'TIME_SERIES_INTRADAY') {
452
+ url += '&interval=5min';
453
+ }
454
+
455
+ const response = await fetch(url);
456
+ const data = await response.json();
457
+
458
+ if (data['Error Message']) {
459
+ throw new Error(data['Error Message']);
460
+ }
461
+
462
+ if (data['Note']) {
463
+ throw new Error('API rate limit exceeded. Please wait a minute and try again.');
464
+ }
465
+
466
+ // Parse the data based on the function type
467
+ let timeSeries, metaData;
468
+
469
+ if (functionType === 'TIME_SERIES_INTRADAY') {
470
+ timeSeries = data['Time Series (5min)'];
471
+ metaData = data['Meta Data'];
472
+ } else if (functionType === 'TIME_SERIES_DAILY') {
473
+ timeSeries = data['Time Series (Daily)'];
474
+ metaData = data['Meta Data'];
475
+ } else if (functionType === 'TIME_SERIES_WEEKLY') {
476
+ timeSeries = data['Weekly Time Series'];
477
+ metaData = data['Meta Data'];
478
+ } else if (functionType === 'TIME_SERIES_MONTHLY') {
479
+ timeSeries = data['Monthly Time Series'];
480
+ metaData = data['Meta Data'];
481
+ }
482
+
483
+ if (!timeSeries || !metaData) {
484
+ throw new Error('Invalid data format received from API');
485
+ }
486
+
487
+ // Get the latest data point
488
+ const dates = Object.keys(timeSeries).sort((a, b) => new Date(b) - new Date(a));
489
+ const latestDate = dates[0];
490
+ const latestData = timeSeries[latestDate];
491
+
492
+ // Get previous close date
493
+ const prevDate = dates[1];
494
+ const prevData = timeSeries[prevDate];
495
+
496
+ // Calculate percentage change
497
+ const latestClose = parseFloat(latestData['4. close']);
498
+ const prevClose = parseFloat(prevData['4. close']);
499
+ const changePercent = ((latestClose - prevClose) / prevClose) * 100;
500
+
501
+ // Get last 7 data points for chart
502
+ const chartData = [];
503
+ const chartLabels = [];
504
+
505
+ for (let i = 0; i < Math.min(7, dates.length); i++) {
506
+ const date = dates[i];
507
+ const dataPoint = timeSeries[date];
508
+ chartData.push(parseFloat(dataPoint['4. close']));
509
+ chartLabels.push(new Date(date).toLocaleDateString('en-IN', { month: 'short', day: 'numeric' }));
510
+ }
511
+
512
+ // Reverse to show chronological order
513
+ chartData.reverse();
514
+ chartLabels.reverse();
515
+
516
+ return {
517
+ symbol: symbol,
518
+ name: metaData['2. Symbol'].replace('.NS', ''),
519
+ price: latestClose,
520
+ change: changePercent.toFixed(2),
521
+ open: parseFloat(latestData['1. open']),
522
+ high: parseFloat(latestData['2. high']),
523
+ low: parseFloat(latestData['3. low']),
524
+ volume: formatVolume(parseInt(latestData['5. volume'])),
525
+ chartData: chartData,
526
+ chartLabels: chartLabels,
527
+ lastUpdated: metaData['3. Last Refreshed']
528
+ };
529
+
530
+ } catch (error) {
531
+ console.error(`Error fetching data for ${symbol}:`, error);
532
+ return null;
533
+ }
534
+ }
535
+
536
+ // Format volume for display
537
+ function formatVolume(volume) {
538
+ if (volume >= 10000000) {
539
+ return (volume / 10000000).toFixed(1) + 'Cr';
540
+ } else if (volume >= 100000) {
541
+ return (volume / 100000).toFixed(1) + 'L';
542
+ } else if (volume >= 1000) {
543
+ return (volume / 1000).toFixed(1) + 'K';
544
+ }
545
+ return volume.toString();
546
+ }
547
+
548
+ // Show Error Function
549
+ function showError(title, message) {
550
+ errorTitle.textContent = title;
551
+ errorMessage.innerHTML = `<p>${message}</p>`;
552
+
553
+ loadingSection.classList.add('hidden');
554
+ resultsSection.classList.add('hidden');
555
+ errorSection.classList.remove('hidden');
556
+ }
557
+
558
+ // Update Summary Function
559
+ function updateSummary(stocks) {
560
+ // Calculate total value (sample calculation)
561
+ const total = stocks.reduce((sum, stock) => sum + stock.price * 1000, 0);
562
+ totalValue.textContent = `₹${(total / 1000).toFixed(2)}K`;
563
+
564
+ // Find best and worst performers
565
+ const sortedByPerformance = [...stocks].sort((a, b) => b.change - a.change);
566
+ bestPerformer.textContent = `${sortedByPerformance[0].symbol} (+${sortedByPerformance[0].change}%)`;
567
+ worstPerformer.textContent = `${sortedByPerformance[sortedByPerformance.length - 1].symbol} (${sortedByPerformance[sortedByPerformance.length - 1].change}%)`;
568
+
569
+ // Calculate average return
570
+ const avg = stocks.reduce((sum, stock) => sum + parseFloat(stock.change), 0) / stocks.length;
571
+ avgReturn.textContent = `${avg >= 0 ? '+' : ''}${avg.toFixed(2)}%`;
572
+ }
573
+
574
+ // Render Stock Cards Function
575
+ function renderStockCards(stocks) {
576
+ stockCardsContainer.innerHTML = '';
577
+
578
+ stocks.forEach(stock => {
579
+ const card = document.createElement('div');
580
+ card.className = 'bg-white rounded-xl shadow-md p-6 stock-card transition';
581
+ card.innerHTML = `
582
+ <div class="flex justify-between items-start mb-4">
583
+ <div>
584
+ <h3 class="text-xl font-bold text-gray-800">${stock.name}</h3>
585
+ <p class="text-gray-500">${stock.symbol}</p>
586
+ </div>
587
+ <span class="px-3 py-1 rounded-full text-sm font-medium ${stock.change >= 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
588
+ ${stock.change >= 0 ? '+' : ''}${stock.change}%
589
+ </span>
590
+ </div>
591
+ <div class="mb-4">
592
+ <p class="text-2xl font-bold text-gray-800 mb-1">₹${stock.price.toFixed(2)}</p>
593
+ <div class="flex justify-between text-sm text-gray-500">
594
+ <span>Open: ₹${stock.open.toFixed(2)}</span>
595
+ <span>High: ₹${stock.high.toFixed(2)}</span>
596
+ </div>
597
+ <div class="flex justify-between text-sm text-gray-500 mt-1">
598
+ <span>Low: ₹${stock.low.toFixed(2)}</span>
599
+ <span>Vol: ${stock.volume}</span>
600
+ </div>
601
+ </div>
602
+ <div class="h-24 mb-4">
603
+ <canvas class="stock-mini-chart" data-symbol="${stock.symbol}"></canvas>
604
+ </div>
605
+ <div class="text-xs text-gray-500 text-right">
606
+ Updated: ${stock.lastUpdated}
607
+ </div>
608
+ <div class="mt-4 pt-4 border-t border-gray-100">
609
+ <button class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
610
+ View Detailed Analysis
611
+ </button>
612
+ </div>
613
+ `;
614
+ stockCardsContainer.appendChild(card);
615
+ });
616
+
617
+ // Render mini charts for each stock
618
+ setTimeout(() => {
619
+ stocks.forEach(stock => {
620
+ const canvas = document.querySelector(`.stock-mini-chart[data-symbol="${stock.symbol}"]`);
621
+ if (canvas) {
622
+ renderMiniChart(canvas, stock.chartData, stock.chartLabels, stock.change >= 0 ? '#10B981' : '#EF4444');
623
+ }
624
+ });
625
+ }, 100);
626
+ }
627
+
628
+ // Render Mini Chart Function
629
+ function renderMiniChart(canvas, data, labels, color) {
630
+ new Chart(canvas, {
631
+ type: 'line',
632
+ data: {
633
+ labels: labels,
634
+ datasets: [{
635
+ data: data,
636
+ borderColor: color,
637
+ borderWidth: 2,
638
+ tension: 0.3,
639
+ fill: false,
640
+ pointRadius: 0
641
+ }]
642
+ },
643
+ options: {
644
+ responsive: true,
645
+ maintainAspectRatio: false,
646
+ plugins: {
647
+ legend: {
648
+ display: false
649
+ }
650
+ },
651
+ scales: {
652
+ x: {
653
+ display: false
654
+ },
655
+ y: {
656
+ display: false
657
+ }
658
+ }
659
+ }
660
+ });
661
+ }
662
+
663
+ // Render Performance Chart Function
664
+ function renderPerformanceChart(stocks) {
665
+ const ctx = document.getElementById('performanceChart').getContext('2d');
666
+
667
+ if (performanceChart) {
668
+ performanceChart.destroy();
669
+ }
670
+
671
+ // Prepare data for chart
672
+ const colors = ['#4F46E5', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];
673
+
674
+ const datasets = stocks.map((stock, index) => ({
675
+ label: stock.symbol,
676
+ data: stock.chartData,
677
+ borderColor: colors[index % colors.length],
678
+ backgroundColor: colors[index % colors.length] + '20',
679
+ borderWidth: 2,
680
+ tension: 0.3,
681
+ fill: true
682
+ }));
683
+
684
+ performanceChart = new Chart(ctx, {
685
+ type: 'line',
686
+ data: {
687
+ labels: stocks[0].chartLabels, // Use first stock's labels
688
+ datasets: datasets
689
+ },
690
+ options: {
691
+ responsive: true,
692
+ maintainAspectRatio: false,
693
+ plugins: {
694
+ legend: {
695
+ position: 'top',
696
+ },
697
+ tooltip: {
698
+ mode: 'index',
699
+ intersect: false,
700
+ callbacks: {
701
+ label: function(context) {
702
+ return context.dataset.label + ': ₹' + context.parsed.y.toFixed(2);
703
+ }
704
+ }
705
+ }
706
+ },
707
+ scales: {
708
+ y: {
709
+ beginAtZero: false,
710
+ grid: {
711
+ drawBorder: false
712
+ },
713
+ ticks: {
714
+ callback: function(value) {
715
+ return '₹' + value.toFixed(2);
716
+ }
717
+ }
718
+ },
719
+ x: {
720
+ grid: {
721
+ display: false
722
+ }
723
+ }
724
+ }
725
+ }
726
+ });
727
+ }
728
+
729
+ // Export Data Function
730
+ function exportData() {
731
+ if (currentStocks.length === 0) {
732
+ alert('No data to export');
733
+ return;
734
+ }
735
+
736
+ // Create CSV content
737
+ let csvContent = "Symbol,Name,Price,Change(%),Open,High,Low,Volume\n";
738
+
739
+ currentStocks.forEach(stock => {
740
+ csvContent += `${stock.symbol},${stock.name},${stock.price},${stock.change},${stock.open},${stock.high},${stock.low},${stock.volume}\n`;
741
+ });
742
+
743
+ // Create download link
744
+ const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
745
+ const url = URL.createObjectURL(blob);
746
+ const link = document.createElement('a');
747
+ link.setAttribute('href', url);
748
+ link.setAttribute('download', `stock_data_${new Date().toISOString().slice(0,10)}.csv`);
749
+ link.style.visibility = 'hidden';
750
+ document.body.appendChild(link);
751
+ link.click();
752
+ document.body.removeChild(link);
753
+ }
754
+
755
+ // Initialize with sample data on first load
756
+ document.addEventListener('DOMContentLoaded', () => {
757
+ stockInput.value = 'RELIANCE.NS\nTCS.NS\nHDFCBANK.NS';
758
+ showApiStatus(false);
759
+ });
760
+ </script>
761
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Rickesh/stock-analysis" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
762
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ get real data from google or online and determine for stock symbol I put