Hugging Face's logo

Spaces:
vikash-univest
/
testing2
Running

App Files Community
vikash-univest commited on
Commit
e196f41
·
verified ·
1 Parent(s): 30b2571

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +806 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Testing2
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: gray
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: testing2
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
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,806 @@
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 Market Technical Analyzer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/luxon@2.0.2"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.1"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ .indicator-active {
15
+ background-color: #3b82f6;
16
+ color: white;
17
+ }
18
+ .stock-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
21
+ }
22
+ .chart-container {
23
+ height: 500px;
24
+ }
25
+ .tooltip {
26
+ position: relative;
27
+ display: inline-block;
28
+ }
29
+ .tooltip .tooltiptext {
30
+ visibility: hidden;
31
+ width: 200px;
32
+ background-color: #333;
33
+ color: #fff;
34
+ text-align: center;
35
+ border-radius: 6px;
36
+ padding: 5px;
37
+ position: absolute;
38
+ z-index: 1;
39
+ bottom: 125%;
40
+ left: 50%;
41
+ margin-left: -100px;
42
+ opacity: 0;
43
+ transition: opacity 0.3s;
44
+ }
45
+ .tooltip:hover .tooltiptext {
46
+ visibility: visible;
47
+ opacity: 1;
48
+ }
49
+ @keyframes pulse {
50
+ 0% { opacity: 0.6; }
51
+ 50% { opacity: 1; }
52
+ 100% { opacity: 0.6; }
53
+ }
54
+ .loading {
55
+ animation: pulse 1.5s infinite;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-100">
60
+ <div class="container mx-auto px-4 py-8">
61
+ <!-- Header -->
62
+ <header class="mb-8">
63
+ <div class="flex justify-between items-center">
64
+ <div>
65
+ <h1 class="text-3xl font-bold text-blue-800">Indian Stock Analyzer</h1>
66
+ <p class="text-gray-600">Advanced technical analysis for NSE & BSE stocks</p>
67
+ </div>
68
+ <div class="flex items-center space-x-4">
69
+ <div class="relative">
70
+ <input type="text" placeholder="Search stocks..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
71
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
72
+ </div>
73
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
74
+ <i class="fas fa-user-circle mr-2"></i>
75
+ Login
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </header>
80
+
81
+ <!-- Main Dashboard -->
82
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
83
+ <!-- Left Sidebar -->
84
+ <div class="lg:col-span-1 space-y-6">
85
+ <!-- Market Overview -->
86
+ <div class="bg-white rounded-xl shadow-md p-4">
87
+ <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center">
88
+ <i class="fas fa-chart-line mr-2 text-blue-600"></i>
89
+ Market Overview
90
+ </h2>
91
+ <div class="space-y-3">
92
+ <div class="flex justify-between items-center">
93
+ <span class="text-gray-600">Nifty 50</span>
94
+ <span class="font-medium">19,425.35 <span class="text-green-500 text-sm">+0.87%</span></span>
95
+ </div>
96
+ <div class="flex justify-between items-center">
97
+ <span class="text-gray-600">Sensex</span>
98
+ <span class="font-medium">64,718.56 <span class="text-green-500 text-sm">+0.92%</span></span>
99
+ </div>
100
+ <div class="flex justify-between items-center">
101
+ <span class="text-gray-600">Nifty Bank</span>
102
+ <span class="font-medium">43,876.21 <span class="text-red-500 text-sm">-0.34%</span></span>
103
+ </div>
104
+ <div class="flex justify-between items-center">
105
+ <span class="text-gray-600">Nifty IT</span>
106
+ <span class="font-medium">33,456.78 <span class="text-green-500 text-sm">+2.15%</span></span>
107
+ </div>
108
+ </div>
109
+ <div class="mt-4 pt-3 border-t border-gray-200">
110
+ <div class="flex justify-between items-center">
111
+ <span class="text-gray-600">Advancers</span>
112
+ <span class="font-medium text-green-600">1,245</span>
113
+ </div>
114
+ <div class="flex justify-between items-center">
115
+ <span class="text-gray-600">Decliners</span>
116
+ <span class="font-medium text-red-600">756</span>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Watchlist -->
122
+ <div class="bg-white rounded-xl shadow-md p-4">
123
+ <div class="flex justify-between items-center mb-4">
124
+ <h2 class="text-lg font-semibold text-gray-800 flex items-center">
125
+ <i class="fas fa-star mr-2 text-yellow-500"></i>
126
+ My Watchlist
127
+ </h2>
128
+ <button class="text-blue-600 hover:text-blue-800">
129
+ <i class="fas fa-plus"></i>
130
+ </button>
131
+ </div>
132
+ <div class="space-y-3">
133
+ <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded cursor-pointer">
134
+ <div>
135
+ <span class="font-medium">RELIANCE</span>
136
+ <span class="block text-xs text-gray-500">NSE</span>
137
+ </div>
138
+ <div class="text-right">
139
+ <span class="font-medium">2,456.75</span>
140
+ <span class="block text-xs text-green-500">+1.25%</span>
141
+ </div>
142
+ </div>
143
+ <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded cursor-pointer">
144
+ <div>
145
+ <span class="font-medium">TCS</span>
146
+ <span class="block text-xs text-gray-500">NSE</span>
147
+ </div>
148
+ <div class="text-right">
149
+ <span class="font-medium">3,567.20</span>
150
+ <span class="block text-xs text-red-500">-0.75%</span>
151
+ </div>
152
+ </div>
153
+ <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded cursor-pointer">
154
+ <div>
155
+ <span class="font-medium">HDFCBANK</span>
156
+ <span class="block text-xs text-gray-500">NSE</span>
157
+ </div>
158
+ <div class="text-right">
159
+ <span class="font-medium">1,678.90</span>
160
+ <span class="block text-xs text-green-500">+0.45%</span>
161
+ </div>
162
+ </div>
163
+ <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded cursor-pointer">
164
+ <div>
165
+ <span class="font-medium">INFY</span>
166
+ <span class="block text-xs text-gray-500">NSE</span>
167
+ </div>
168
+ <div class="text-right">
169
+ <span class="font-medium">1,456.30</span>
170
+ <span class="block text-xs text-green-500">+1.85%</span>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Technical Indicators -->
177
+ <div class="bg-white rounded-xl shadow-md p-4">
178
+ <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center">
179
+ <i class="fas fa-wave-square mr-2 text-blue-600"></i>
180
+ Technical Indicators
181
+ </h2>
182
+ <div class="grid grid-cols-2 gap-2">
183
+ <button id="rsi-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50">
184
+ RSI (14)
185
+ </button>
186
+ <button id="macd-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50">
187
+ MACD
188
+ </button>
189
+ <button id="sma-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50">
190
+ SMA (50)
191
+ </button>
192
+ <button id="ema-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50">
193
+ EMA (20)
194
+ </button>
195
+ <button id="bollinger-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50">
196
+ Bollinger
197
+ </button>
198
+ <button id="stochastic-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50">
199
+ Stochastic
200
+ </button>
201
+ </div>
202
+ <div class="mt-4 pt-3 border-t border-gray-200">
203
+ <h3 class="text-sm font-medium mb-2 text-gray-700">Indicator Settings</h3>
204
+ <div id="indicator-settings" class="space-y-3">
205
+ <!-- Dynamic settings will appear here -->
206
+ <p class="text-gray-500 text-sm">Select an indicator to configure</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Main Chart Area -->
213
+ <div class="lg:col-span-3 space-y-6">
214
+ <!-- Stock Selector and Timeframe -->
215
+ <div class="bg-white rounded-xl shadow-md p-4">
216
+ <div class="flex flex-wrap justify-between items-center gap-4">
217
+ <div class="flex items-center space-x-4">
218
+ <div>
219
+ <h2 class="text-xl font-bold text-gray-800">RELIANCE</h2>
220
+ <p class="text-gray-600 text-sm">NSE: RELIANCE | BSE: 500325</p>
221
+ </div>
222
+ <span class="text-2xl font-bold">₹2,456.75</span>
223
+ <span class="text-green-500 font-medium">+1.25% (+₹30.50)</span>
224
+ </div>
225
+ <div class="flex space-x-2">
226
+ <button class="timeframe-btn bg-blue-600 text-white px-3 py-1 rounded" data-value="1d">1D</button>
227
+ <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="1w">1W</button>
228
+ <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="1m">1M</button>
229
+ <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="3m">3M</button>
230
+ <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="6m">6M</button>
231
+ <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="1y">1Y</button>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Chart Container -->
237
+ <div class="bg-white rounded-xl shadow-md p-4">
238
+ <div class="flex justify-between items-center mb-4">
239
+ <div class="flex space-x-2">
240
+ <button class="chart-type-btn bg-blue-600 text-white px-3 py-1 rounded" data-type="candlestick">Candlestick</button>
241
+ <button class="chart-type-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-type="line">Line</button>
242
+ <button class="chart-type-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-type="ohlc">OHLC</button>
243
+ </div>
244
+ <div class="flex space-x-2">
245
+ <button class="bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50 tooltip">
246
+ <i class="fas fa-ruler"></i>
247
+ <span class="tooltiptext">Drawing Tools</span>
248
+ </button>
249
+ <button class="bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50 tooltip">
250
+ <i class="fas fa-compress"></i>
251
+ <span class="tooltiptext">Zoom Out</span>
252
+ </button>
253
+ <button class="bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50 tooltip">
254
+ <i class="fas fa-cog"></i>
255
+ <span class="tooltiptext">Settings</span>
256
+ </button>
257
+ </div>
258
+ </div>
259
+ <div class="chart-container relative">
260
+ <canvas id="stockChart"></canvas>
261
+ <div id="chart-loading" class="absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center hidden">
262
+ <div class="text-center">
263
+ <i class="fas fa-spinner fa-spin text-blue-600 text-4xl mb-2"></i>
264
+ <p class="text-gray-700">Loading chart data...</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Technical Analysis Summary -->
271
+ <div class="bg-white rounded-xl shadow-md p-4">
272
+ <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center">
273
+ <i class="fas fa-chart-pie mr-2 text-blue-600"></i>
274
+ Technical Analysis Summary
275
+ </h2>
276
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
277
+ <div class="bg-blue-50 p-4 rounded-lg">
278
+ <h3 class="font-medium text-blue-800 mb-2">Momentum Indicators</h3>
279
+ <div class="space-y-2">
280
+ <div class="flex justify-between">
281
+ <span class="text-gray-600">RSI (14):</span>
282
+ <span class="font-medium">62.45 <span class="text-green-500">(Neutral)</span></span>
283
+ </div>
284
+ <div class="flex justify-between">
285
+ <span class="text-gray-600">Stochastic %K:</span>
286
+ <span class="font-medium">78.32 <span class="text-yellow-500">(Overbought)</span></span>
287
+ </div>
288
+ <div class="flex justify-between">
289
+ <span class="text-gray-600">MACD:</span>
290
+ <span class="font-medium">12.45 <span class="text-green-500">(Bullish)</span></span>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ <div class="bg-green-50 p-4 rounded-lg">
295
+ <h3 class="font-medium text-green-800 mb-2">Trend Indicators</h3>
296
+ <div class="space-y-2">
297
+ <div class="flex justify-between">
298
+ <span class="text-gray-600">EMA (20):</span>
299
+ <span class="font-medium">2,412.30 <span class="text-green-500">(Price above)</span></span>
300
+ </div>
301
+ <div class="flex justify-between">
302
+ <span class="text-gray-600">SMA (50):</span>
303
+ <span class="font-medium">2,378.65 <span class="text-green-500">(Price above)</span></span>
304
+ </div>
305
+ <div class="flex justify-between">
306
+ <span class="text-gray-600">ADX (14):</span>
307
+ <span class="font-medium">28.76 <span class="text-green-500">(Strong Trend)</span></span>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ <div class="bg-purple-50 p-4 rounded-lg">
312
+ <h3 class="font-medium text-purple-800 mb-2">Volatility Indicators</h3>
313
+ <div class="space-y-2">
314
+ <div class="flex justify-between">
315
+ <span class="text-gray-600">Bollinger Bands:</span>
316
+ <span class="font-medium">Near Upper Band <span class="text-yellow-500">(High Volatility)</span></span>
317
+ </div>
318
+ <div class="flex justify-between">
319
+ <span class="text-gray-600">ATR (14):</span>
320
+ <span class="font-medium">45.67 <span class="text-green-500">(High Volatility)</span></span>
321
+ </div>
322
+ <div class="flex justify-between">
323
+ <span class="text-gray-600">Average Volume:</span>
324
+ <span class="font-medium">4.5M <span class="text-green-500">(Above Avg)</span></span>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <div class="mt-4 pt-4 border-t border-gray-200">
330
+ <h3 class="font-medium text-gray-800 mb-2">Recommendation</h3>
331
+ <div class="bg-yellow-50 p-4 rounded-lg flex items-start">
332
+ <div class="mr-4 mt-1">
333
+ <i class="fas fa-exclamation-triangle text-yellow-600 text-2xl"></i>
334
+ </div>
335
+ <div>
336
+ <h4 class="font-medium text-yellow-800">Caution Advised</h4>
337
+ <p class="text-gray-700">The stock is showing overbought conditions on short-term indicators (RSI > 70, Stochastic > 80) while maintaining a strong uptrend. Consider waiting for a pullback to key support levels (2,400-2,420) before entering new positions. Existing holders can maintain stop-loss at 2,380.</p>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Stock Recommendations -->
344
+ <div class="bg-white rounded-xl shadow-md p-4">
345
+ <div class="flex justify-between items-center mb-4">
346
+ <h2 class="text-lg font-semibold text-gray-800 flex items-center">
347
+ <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
348
+ Today's Top Picks
349
+ </h2>
350
+ <div class="flex space-x-2">
351
+ <button class="bg-blue-600 text-white px-3 py-1 rounded text-sm">Strong Buy</button>
352
+ <button class="bg-green-600 text-white px-3 py-1 rounded text-sm">Buy</button>
353
+ <button class="bg-gray-300 text-gray-800 px-3 py-1 rounded text-sm">Neutral</button>
354
+ </div>
355
+ </div>
356
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
357
+ <!-- Stock Card 1 -->
358
+ <div class="stock-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-300 cursor-pointer hover:border-blue-300">
359
+ <div class="flex justify-between items-start mb-2">
360
+ <div>
361
+ <h3 class="font-bold text-lg">TATASTEEL</h3>
362
+ <p class="text-gray-600 text-sm">NSE: TATASTEEL</p>
363
+ </div>
364
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Strong Buy</span>
365
+ </div>
366
+ <div class="flex justify-between items-center mb-3">
367
+ <span class="text-2xl font-bold">₹128.75</span>
368
+ <span class="text-green-500 font-medium">+3.45%</span>
369
+ </div>
370
+ <div class="text-sm space-y-1">
371
+ <div class="flex justify-between">
372
+ <span class="text-gray-500">RSI:</span>
373
+ <span class="font-medium">42.1 (Oversold)</span>
374
+ </div>
375
+ <div class="flex justify-between">
376
+ <span class="text-gray-500">Support:</span>
377
+ <span class="font-medium">₹124.50</span>
378
+ </div>
379
+ <div class="flex justify-between">
380
+ <span class="text-gray-500">Target:</span>
381
+ <span class="font-medium text-green-600">₹138.00</span>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Stock Card 2 -->
387
+ <div class="stock-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-300 cursor-pointer hover:border-blue-300">
388
+ <div class="flex justify-between items-start mb-2">
389
+ <div>
390
+ <h3 class="font-bold text-lg">ITC</h3>
391
+ <p class="text-gray-600 text-sm">NSE: ITC</p>
392
+ </div>
393
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Buy</span>
394
+ </div>
395
+ <div class="flex justify-between items-center mb-3">
396
+ <span class="text-2xl font-bold">₹456.30</span>
397
+ <span class="text-green-500 font-medium">+1.85%</span>
398
+ </div>
399
+ <div class="text-sm space-y-1">
400
+ <div class="flex justify-between">
401
+ <span class="text-gray-500">RSI:</span>
402
+ <span class="font-medium">58.3 (Neutral)</span>
403
+ </div>
404
+ <div class="flex justify-between">
405
+ <span class="text-gray-500">Support:</span>
406
+ <span class="font-medium">₹445.00</span>
407
+ </div>
408
+ <div class="flex justify-between">
409
+ <span class="text-gray-500">Target:</span>
410
+ <span class="font-medium text-green-600">₹475.00</span>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- Stock Card 3 -->
416
+ <div class="stock-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-300 cursor-pointer hover:border-blue-300">
417
+ <div class="flex justify-between items-start mb-2">
418
+ <div>
419
+ <h3 class="font-bold text-lg">BHARTIARTL</h3>
420
+ <p class="text-gray-600 text-sm">NSE: BHARTIARTL</p>
421
+ </div>
422
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Strong Buy</span>
423
+ </div>
424
+ <div class="flex justify-between items-center mb-3">
425
+ <span class="text-2xl font-bold">₹876.45</span>
426
+ <span class="text-green-500 font-medium">+2.75%</span>
427
+ </div>
428
+ <div class="text-sm space-y-1">
429
+ <div class="flex justify-between">
430
+ <span class="text-gray-500">RSI:</span>
431
+ <span class="font-medium">65.2 (Neutral)</span>
432
+ </div>
433
+ <div class="flex justify-between">
434
+ <span class="text-gray-500">Support:</span>
435
+ <span class="font-medium">₹855.00</span>
436
+ </div>
437
+ <div class="flex justify-between">
438
+ <span class="text-gray-500">Target:</span>
439
+ <span class="font-medium text-green-600">₹925.00</span>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Footer -->
449
+ <footer class="mt-12 pt-8 border-t border-gray-200">
450
+ <div class="flex flex-col md:flex-row justify-between items-center">
451
+ <div class="mb-4 md:mb-0">
452
+ <h3 class="text-lg font-semibold text-gray-800">Indian Stock Analyzer</h3>
453
+ <p class="text-gray-600">Advanced technical analysis tools for Indian markets</p>
454
+ </div>
455
+ <div class="flex space-x-6">
456
+ <a href="#" class="text-gray-600 hover:text-blue-600">Terms</a>
457
+ <a href="#" class="text-gray-600 hover:text-blue-600">Privacy</a>
458
+ <a href="#" class="text-gray-600 hover:text-blue-600">Disclaimer</a>
459
+ <a href="#" class="text-gray-600 hover:text-blue-600">Contact</a>
460
+ </div>
461
+ </div>
462
+ <div class="mt-6 text-center text-gray-500 text-sm">
463
+ <p>Data provided by NSE and BSE. Delayed by 15 minutes. © 2023 Indian Stock Analyzer. All rights reserved.</p>
464
+ </div>
465
+ </footer>
466
+ </div>
467
+
468
+ <script>
469
+ // Sample stock data (in a real app, this would come from an API)
470
+ const stockData = {
471
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
472
+ datasets: [{
473
+ label: 'RELIANCE',
474
+ data: [
475
+ {x: 'Jan', o: 2100, h: 2150, l: 2080, c: 2140},
476
+ {x: 'Feb', o: 2140, h: 2200, l: 2120, c: 2180},
477
+ {x: 'Mar', o: 2180, h: 2250, l: 2160, c: 2220},
478
+ {x: 'Apr', o: 2220, h: 2280, l: 2200, c: 2260},
479
+ {x: 'May', o: 2260, h: 2350, l: 2240, c: 2320},
480
+ {x: 'Jun', o: 2320, h: 2400, l: 2300, c: 2380},
481
+ {x: 'Jul', o: 2380, h: 2450, l: 2360, c: 2420},
482
+ {x: 'Aug', o: 2420, h: 2500, l: 2400, c: 2480},
483
+ {x: 'Sep', o: 2480, h: 2550, l: 2460, c: 2520},
484
+ {x: 'Oct', o: 2520, h: 2600, l: 2500, c: 2580}
485
+ ],
486
+ color: {
487
+ up: '#10b981',
488
+ down: '#ef4444',
489
+ unchanged: '#9ca3af',
490
+ }
491
+ }]
492
+ };
493
+
494
+ // Technical indicators data
495
+ const indicators = {
496
+ rsi: [45, 50, 55, 60, 65, 70, 65, 60, 55, 50],
497
+ macd: {
498
+ macd: [12, 14, 16, 18, 20, 18, 16, 14, 12, 10],
499
+ signal: [10, 12, 14, 16, 18, 16, 14, 12, 10, 8],
500
+ histogram: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
501
+ },
502
+ sma: [2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500],
503
+ ema: [2080, 2130, 2180, 2230, 2280, 2330, 2380, 2430, 2480, 2530],
504
+ bollinger: {
505
+ upper: [2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650],
506
+ lower: [2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450]
507
+ },
508
+ stochastic: {
509
+ k: [30, 40, 50, 60, 70, 80, 70, 60, 50, 40],
510
+ d: [25, 35, 45, 55, 65, 75, 65, 55, 45, 35]
511
+ }
512
+ };
513
+
514
+ // Initialize chart
515
+ const ctx = document.getElementById('stockChart').getContext('2d');
516
+ let stockChart = new Chart(ctx, {
517
+ type: 'candlestick',
518
+ data: {
519
+ labels: stockData.labels,
520
+ datasets: [{
521
+ label: 'RELIANCE',
522
+ data: stockData.datasets[0].data,
523
+ color: stockData.datasets[0].color
524
+ }]
525
+ },
526
+ options: {
527
+ responsive: true,
528
+ maintainAspectRatio: false,
529
+ scales: {
530
+ x: {
531
+ grid: {
532
+ display: false
533
+ }
534
+ },
535
+ y: {
536
+ grid: {
537
+ color: '#e5e7eb'
538
+ }
539
+ }
540
+ },
541
+ plugins: {
542
+ legend: {
543
+ display: false
544
+ },
545
+ zoom: {
546
+ zoom: {
547
+ wheel: {
548
+ enabled: true,
549
+ },
550
+ pinch: {
551
+ enabled: true
552
+ },
553
+ mode: 'xy',
554
+ },
555
+ pan: {
556
+ enabled: true,
557
+ mode: 'xy',
558
+ }
559
+ }
560
+ }
561
+ }
562
+ });
563
+
564
+ // Timeframe buttons
565
+ document.querySelectorAll('.timeframe-btn').forEach(btn => {
566
+ btn.addEventListener('click', function() {
567
+ // Show loading
568
+ document.getElementById('chart-loading').classList.remove('hidden');
569
+
570
+ // Update active button
571
+ document.querySelectorAll('.timeframe-btn').forEach(b => {
572
+ b.classList.remove('bg-blue-600', 'text-white');
573
+ b.classList.add('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50');
574
+ });
575
+ this.classList.add('bg-blue-600', 'text-white');
576
+ this.classList.remove('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50');
577
+
578
+ // Simulate API call with timeout
579
+ setTimeout(() => {
580
+ // Update chart with new data based on timeframe
581
+ const timeframe = this.dataset.value;
582
+ let newData = [];
583
+
584
+ // In a real app, this would be an API call to get data for the selected timeframe
585
+ if (timeframe === '1d') {
586
+ // Generate intraday data
587
+ newData = generateIntradayData();
588
+ } else {
589
+ // For other timeframes, we'll just modify our sample data
590
+ newData = [...stockData.datasets[0].data];
591
+ if (timeframe === '1w') {
592
+ newData = newData.slice(-5); // Last 5 data points
593
+ } else if (timeframe === '1m') {
594
+ newData = newData.slice(-10); // All data points
595
+ } else if (timeframe === '3m') {
596
+ // Generate more data points for 3 months
597
+ newData = generateThreeMonthsData();
598
+ } else if (timeframe === '6m') {
599
+ // Generate more data points for 6 months
600
+ newData = generateSixMonthsData();
601
+ } else if (timeframe === '1y') {
602
+ // Generate more data points for 1 year
603
+ newData = generateOneYearData();
604
+ }
605
+ }
606
+
607
+ // Update chart
608
+ stockChart.data.datasets[0].data = newData;
609
+ stockChart.update();
610
+
611
+ // Hide loading
612
+ document.getElementById('chart-loading').classList.add('hidden');
613
+ }, 800);
614
+ });
615
+ });
616
+
617
+ // Chart type buttons
618
+ document.querySelectorAll('.chart-type-btn').forEach(btn => {
619
+ btn.addEventListener('click', function() {
620
+ // Update active button
621
+ document.querySelectorAll('.chart-type-btn').forEach(b => {
622
+ b.classList.remove('bg-blue-600', 'text-white');
623
+ b.classList.add('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50');
624
+ });
625
+ this.classList.add('bg-blue-600', 'text-white');
626
+ this.classList.remove('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50');
627
+
628
+ // Change chart type
629
+ stockChart.config.type = this.dataset.type;
630
+ stockChart.update();
631
+ });
632
+ });
633
+
634
+ // Indicator buttons
635
+ document.querySelectorAll('.indicator-btn').forEach(btn => {
636
+ btn.addEventListener('click', function() {
637
+ // Toggle active state
638
+ this.classList.toggle('indicator-active');
639
+
640
+ const indicatorId = this.id.replace('-btn', '');
641
+ const indicatorSettings = document.getElementById('indicator-settings');
642
+
643
+ if (this.classList.contains('indicator-active')) {
644
+ // Add indicator to chart
645
+ addIndicatorToChart(indicatorId);
646
+
647
+ // Show settings for this indicator
648
+ indicatorSettings.innerHTML = `
649
+ <h4 class="font-medium text-gray-800">${indicatorId.toUpperCase()} Settings</h4>
650
+ <div class="mt-2">
651
+ <label class="block text-sm text-gray-600 mb-1">Period</label>
652
+ <input type="number" value="14" class="w-full px-3 py-2 border border-gray-300 rounded">
653
+ </div>
654
+ <div class="mt-2">
655
+ <label class="block text-sm text-gray-600 mb-1">Color</label>
656
+ <input type="color" value="#3b82f6" class="w-full h-10">
657
+ </div>
658
+ <button class="mt-3 w-full bg-blue-600 text-white py-2 rounded text-sm">Apply</button>
659
+ `;
660
+ } else {
661
+ // Remove indicator from chart
662
+ removeIndicatorFromChart(indicatorId);
663
+
664
+ // Reset settings panel
665
+ indicatorSettings.innerHTML = '<p class="text-gray-500 text-sm">Select an indicator to configure</p>';
666
+ }
667
+ });
668
+ });
669
+
670
+ // Functions to add/remove indicators
671
+ function addIndicatorToChart(indicatorId) {
672
+ // In a real app, this would add the indicator to the chart
673
+ console.log(`Adding ${indicatorId} indicator to chart`);
674
+
675
+ // For demo purposes, we'll just log it
676
+ if (indicatorId === 'rsi') {
677
+ // Add RSI to a separate chart (in a real app, this would be a sub-chart)
678
+ console.log('RSI values:', indicators.rsi);
679
+ } else if (indicatorId === 'macd') {
680
+ console.log('MACD values:', indicators.macd);
681
+ }
682
+ }
683
+
684
+ function removeIndicatorFromChart(indicatorId) {
685
+ // In a real app, this would remove the indicator from the chart
686
+ console.log(`Removing ${indicatorId} indicator from chart`);
687
+ }
688
+
689
+ // Data generation functions for different timeframes
690
+ function generateIntradayData() {
691
+ // Generate sample intraday data (1 minute intervals for 1 day)
692
+ const data = [];
693
+ const basePrice = 2450;
694
+
695
+ for (let i = 0; i < 390; i++) { // 390 minutes = 6.5 hours (NSE trading hours)
696
+ const time = new Date();
697
+ time.setHours(9, 15 + i, 0, 0); // Market opens at 9:15
698
+
699
+ const minute = i % 60;
700
+ const hour = Math.floor(i / 60) + 9;
701
+
702
+ // Simulate price movement with some randomness
703
+ const open = i === 0 ? basePrice : data[i-1].c;
704
+ const change = (Math.random() - 0.5) * 10;
705
+ const close = open + change;
706
+ const high = Math.max(open, close) + Math.random() * 5;
707
+ const low = Math.min(open, close) - Math.random() * 5;
708
+
709
+ data.push({
710
+ x: `${hour}:${minute < 10 ? '0' + minute : minute}`,
711
+ o: open,
712
+ h: high,
713
+ l: low,
714
+ c: close
715
+ });
716
+ }
717
+
718
+ return data;
719
+ }
720
+
721
+ function generateThreeMonthsData() {
722
+ // Generate more detailed data for 3 months
723
+ const data = [];
724
+ const basePrice = 2100;
725
+
726
+ for (let i = 0; i < 60; i++) { // 60 days ~ 3 months
727
+ const open = i === 0 ? basePrice : data[i-1].c;
728
+ const change = (Math.random() - 0.4) * 30; // Slight upward bias
729
+ const close = open + change;
730
+ const high = Math.max(open, close) + Math.random() * 20;
731
+ const low = Math.min(open, close) - Math.random() * 20;
732
+
733
+ const date = new Date();
734
+ date.setDate(date.getDate() - (60 - i));
735
+
736
+ data.push({
737
+ x: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
738
+ o: open,
739
+ h: high,
740
+ l: low,
741
+ c: close
742
+ });
743
+ }
744
+
745
+ return data;
746
+ }
747
+
748
+ function generateSixMonthsData() {
749
+ // Generate more detailed data for 6 months
750
+ const data = [];
751
+ const basePrice = 2000;
752
+
753
+ for (let i = 0; i < 120; i++) { // 120 days ~ 6 months
754
+ const open = i === 0 ? basePrice : data[i-1].c;
755
+ const change = (Math.random() - 0.3) * 25; // Slight upward bias
756
+ const close = open + change;
757
+ const high = Math.max(open, close) + Math.random() * 15;
758
+ const low = Math.min(open, close) - Math.random() * 15;
759
+
760
+ const date = new Date();
761
+ date.setDate(date.getDate() - (120 - i));
762
+
763
+ data.push({
764
+ x: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
765
+ o: open,
766
+ h: high,
767
+ l: low,
768
+ c: close
769
+ });
770
+ }
771
+
772
+ return data;
773
+ }
774
+
775
+ function generateOneYearData() {
776
+ // Generate more detailed data for 1 year
777
+ const data = [];
778
+ const basePrice = 1800;
779
+
780
+ for (let i = 0; i < 240; i++) { // 240 days ~ 1 year
781
+ const open = i === 0 ? basePrice : data[i-1].c;
782
+ const change = (Math.random() - 0.2) * 20; // Slight upward bias
783
+ const close = open + change;
784
+ const high = Math.max(open, close) + Math.random() * 10;
785
+ const low = Math.min(open, close) - Math.random() * 10;
786
+
787
+ const date = new Date();
788
+ date.setDate(date.getDate() - (240 - i));
789
+
790
+ data.push({
791
+ x: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
792
+ o: open,
793
+ h: high,
794
+ l: low,
795
+ c: close
796
+ });
797
+ }
798
+
799
+ return data;
800
+ }
801
+
802
+ // Initialize with 1 month data
803
+ document.querySelector('.timeframe-btn[data-value="1m"]').click();
804
+ </script>
805
+ <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=vikash-univest/testing2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
806
+ </html>