Add 1 files

index.html

@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dr. KKR's EOD Bull Bear Crossover Screener</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Include jsPDF for PDF export -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>
+    <!-- Include SheetJS for Excel export -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+    <!-- Include html2canvas for screenshot export -->
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
     <style>
         :root {
             --primary-color: #2c3e50;
@@ -90,7 +97,7 @@
 
         .sidebar-title {
             font-size: 1.1rem;
-            font-weight: 600;
+            font-weight: 6#ffffff;
             margin-bottom: 1rem;
             color: var(--secondary-color);
             display: flex;
@@ -146,7 +153,7 @@
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
-            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23D4AF37%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23D4AF37%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%201127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
             background-repeat: no-repeat;
             background-position: right 0.7rem top 50%;
             background-size: 0.65rem auto;
@@ -840,7 +847,7 @@
                 
                 <div class="sidebar-divider"></div>
                 
-                <button class="btn btn-secondary btn-lg" style="width: 100%;">
+                <button class="btn btn-secondary btn-lg" style="width: 100%;" id="analyzeBtn">
                     <i class="fas fa-rocket"></i> Analyze Stocks
                 </button>
             </div>
@@ -857,7 +864,7 @@
                     <div class="header-subtitle">Identify potential entry points based on moving average crossovers and price proximity analysis</div>
                     <div class="last-refreshed">Last Refreshed: <span id="lastRefreshed">Loading...</span></div>
                 </div>
-                <button class="refresh-btn">
+                <button class="refresh-btn" id="refreshBtn">
                     <i class="fas fa-sync-alt"></i> Refresh Data
                 </button>
             </div>
@@ -878,7 +885,7 @@
                         <i class="fas fa-list-ul"></i>
                         Selected Stocks Summary
                     </div>
-                    <span class="badge">42 tickers</span>
+                    <span class="badge" id="tickerCount">42 tickers</span>
                 </div>
                 <div class="card-body">
                     <div class="alert alert-warning">
@@ -891,11 +898,11 @@
                     
                     <div class="expandable">
                         <div class="expandable-header">
-                            <span>View Full Ticker List (42 tickers)</span>
+                            <span id="tickerListText">View Full Ticker List (42 tickers)</span>
                             <i class="fas fa-chevron-down"></i>
                         </div>
                         <div class="expandable-content" style="display: none;">
-                            <div class="ticker-list">
+                            <div class="ticker-list" id="tickerListContent">
                                 RELIANCE.NS, TCS.NS, HDFCBANK.NS, INFY.NS, HINDUNILVR.NS, ICICIBANK.NS, ITC.NS, SBIN.NS, 
                                 BHARTIARTL.NS, KOTAKBANK.NS, ASIANPAINT.NS, LT.NS, HDFC.NS, BAJFINANCE.NS, HCLTECH.NS, 
                                 MARUTI.NS, NTPC.NS, ONGC.NS, TECHM.NS, SUNPHARMA.NS, AXISBANK.NS, TITAN.NS, ULTRACEMCO.NS, 
@@ -907,10 +914,10 @@
                     </div>
                     
                     <div class="progress-container">
-                        <div class="progress-bar" style="width: 0%;"></div>
+                        <div class="progress-bar" id="progressBar" style="width: 0%;"></div>
                     </div>
                     
-                    <button class="btn btn-primary">
+                    <button class="btn btn-primary" id="previewBtn">
                         <i class="fas fa-eye"></i> Preview Analysis
                     </button>
                 </div>
@@ -924,7 +931,7 @@
                     </div>
                 </div>
                 <div class="card-body">
-                    <div class="alert alert-danger">
+                    <div class="alert alert-danger" id="resultsAlert">
                         <i class="fas fa-exclamation-triangle"></i>
                         <div class="alert-content">
                             <div class="alert-title">No Results Yet</div>
@@ -933,7 +940,7 @@
                     </div>
                     
                     <div class="table-container">
-                        <table>
+                        <table id="resultsTable">
                             <thead>
                                 <tr>
                                     <th>Ticker</th>
@@ -946,40 +953,14 @@
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr class="bullish">
-                                    <td>RELIANCE.NS</td>
-                                    <td>2,415.75</td>
-                                    <td>2,428.45</td>
-                                    <td>2,402.30</td>
-                                    <td><i class="fas fa-check-circle text-success"></i> 2023-05-15</td>
-                                    <td>-</td>
-                                    <td>1.02%</td>
-                                </tr>
-                                <tr class="bearish">
-                                    <td>INFY.NS</td>
-                                    <td>1,321.20</td>
-                                    <td>1,334.50</td>
-                                    <td>1,315.80</td>
-                                    <td>-</td>
-                                    <td><i class="fas fa-check-circle text-danger"></i> 2023-05-18</td>
-                                    <td>0.84%</td>
-                                </tr>
-                                <tr class="bullish">
-                                    <td>HDFCBANK.NS</td>
-                                    <td>1,645.30</td>
-                                    <td>1,654.25</td>
-                                    <td>1,638.40</td>
-                                    <td><i class="fas fa-check-circle text-success"></i> 2023-05-20</td>
-                                    <td>-</td>
-                                    <td>0.93%</td>
-                                </tr>
+                                <!-- Results will be inserted here by JavaScript -->
                             </tbody>
                         </table>
                     </div>
                 </div>
             </div>
             
-            <div class="card fade-in">
+            <div class="card fade-in" id="resultsSection">
                 <div class="card-header">
                     <div class="card-title">
                         <i class="fas fa-download"></i>
@@ -992,16 +973,16 @@
                         Export your screening results in various formats for further analysis or record keeping.
                     </div>
                     
-                    <button class="btn btn-primary">
+                    <button class="btn btn-primary" id="exportCsvBtn">
                         <i class="fas fa-file-csv"></i> Download as CSV
                     </button>
-                    <button class="btn btn-primary" style="margin-left: 0.5rem;">
+                    <button class="btn btn-primary" id="exportExcelBtn" style="margin-left: 0.5rem;">
                         <i class="fas fa-file-excel"></i> Excel
                     </button>
-                    <button class="btn btn-primary" style="margin-left: 0.5rem;">
+                    <button class="btn btn-primary" id="exportPdfBtn" style="margin-left: 0.5rem;">
                         <i class="fas fa-file-pdf"></i> PDF Report
                     </button>
-                    <button class="btn btn-primary" style="margin-left: 0.5rem;">
+                    <button class="btn btn-primary" id="exportScreenshotBtn" style="margin-left: 0.5rem;">
                         <i class="fas fa-image"></i> Screenshot
                     </button>
                 </div>
@@ -1010,6 +991,63 @@
     </div>
 
     <script>
+        // Initialize jsPDF
+        const { jsPDF } = window.jspdf;
+        
+        // Sample data
+        const sampleData = [
+            { 
+                ticker: "RELIANCE.NS", 
+                close: "2,415.75", 
+                bullishEntry: "2,428.45", 
+                bearishEntry: "2,402.30", 
+                bullishSignal: "2023-05-15", 
+                bearishSignal: null, 
+                proximity: "1.02%",
+                signal: "bullish"
+            },
+            { 
+                ticker: "INFY.NS", 
+                close: "1,321.20", 
+                bullishEntry: "1,334.50", 
+                bearishEntry: "1,315.80", 
+                bullishSignal: null, 
+                bearishSignal: "2023-05-18", 
+                proximity: "0.84%",
+                signal: "bearish"
+            },
+            { 
+                ticker: "HDFCBANK.NS", 
+                close: "1,645.30", 
+                bullishEntry: "1,654.25", 
+                bearishEntry: "1,638.40", 
+                bullishSignal: "2023-05-20", 
+                bearishSignal: null, 
+                proximity: "0.93%",
+                signal: "bullish"
+            },
+            { 
+                ticker: "TCS.NS", 
+                close: "3,245.50", 
+                bullishEntry: "3,260.75", 
+                bearishEntry: "3,230.25", 
+                bullishSignal: "2023-05-10", 
+                bearishSignal: null, 
+                proximity: "1.15%",
+                signal: "bullish"
+            },
+            { 
+                ticker: "BHARTIARTL.NS", 
+                close: "782.15", 
+                bullishEntry: "791.30", 
+                bearishEntry: "774.90", 
+                bullishSignal: null, 
+                bearishSignal: "2023-05-22", 
+                proximity: "0.97%",
+                signal: "bearish"
+            }
+        ];
+
         // Update the last refreshed time
         document.getElementById('lastRefreshed').textContent = new Date().toLocaleString();
         
@@ -1049,19 +1087,19 @@
         });
         
         // Simulate analysis button click
-        document.querySelector('.btn-secondary').addEventListener('click', function() {
-            const progressBar = document.querySelector('.progress-bar');
+        document.getElementById('analyzeBtn').addEventListener('click', function() {
+            const progressBar = document.getElementById('progressBar');
             let width = 0;
             
             // Hide the warning alert
-            document.querySelector('.alert-danger').style.display = 'none';
+            document.getElementById('resultsAlert').style.display = 'none';
             
             // Show progress bar animation
             progressBar.parentElement.style.display = 'block';
             progressBar.style.width = '0%';
             
             // Reset table to empty
-            document.querySelector('table tbody').innerHTML = '<tr><td colspan="7" style="text-align: center;">Analyzing stocks...</td></tr>';
+            document.querySelector('#resultsTable tbody').innerHTML = '<tr><td colspan="7" style="text-align: center;">Analyzing stocks...</td></tr>';
             
             const progressInterval = setInterval(function() {
                 if (width >= 100) {
@@ -1077,61 +1115,7 @@
         
         // Function to show sample results
         function showResults() {
-            // Create some sample data
-            const sampleData = [
-                { 
-                    ticker: "RELIANCE.NS", 
-                    close: "2,415.75", 
-                    bullishEntry: "2,428.45", 
-                    bearishEntry: "2,402.30", 
-                    bullishSignal: "2023-05-15", 
-                    bearishSignal: null, 
-                    proximity: "1.02%",
-                    signal: "bullish"
-                },
-                { 
-                    ticker: "INFY.NS", 
-                    close: "1,321.20", 
-                    bullishEntry: "1,334.50", 
-                    bearishEntry: "1,315.80", 
-                    bullishSignal: null, 
-                    bearishSignal: "2023-05-18", 
-                    proximity: "0.84%",
-                    signal: "bearish"
-                },
-                { 
-                    ticker: "HDFCBANK.NS", 
-                    close: "1,645.30", 
-                    bullishEntry: "1,654.25", 
-                    bearishEntry: "1,638.40", 
-                    bullishSignal: "2023-05-20", 
-                    bearishSignal: null, 
-                    proximity: "0.93%",
-                    signal: "bullish"
-                },
-                { 
-                    ticker: "TCS.NS", 
-                    close: "3,245.50", 
-                    bullishEntry: "3,260.75", 
-                    bearishEntry: "3,230.25", 
-                    bullishSignal: "2023-05-10", 
-                    bearishSignal: null, 
-                    proximity: "1.15%",
-                    signal: "bullish"
-                },
-                { 
-                    ticker: "BHARTIARTL.NS", 
-                    close: "782.15", 
-                    bullishEntry: "791.30", 
-                    bearishEntry: "774.90", 
-                    bullishSignal: null, 
-                    bearishSignal: "2023-05-22", 
-                    proximity: "0.97%",
-                    signal: "bearish"
-                }
-            ];
-            
-            const tableBody = document.querySelector('table tbody');
+            const tableBody = document.querySelector('#resultsTable tbody');
             tableBody.innerHTML = '';
             
             sampleData.forEach(stock => {
@@ -1152,7 +1136,7 @@
             });
             
             // Show success message
-            const alertDiv = document.querySelector('.alert-danger');
+            const alertDiv = document.getElementById('resultsAlert');
             alertDiv.className = 'alert alert-success';
             alertDiv.style.display = 'flex';
             alertDiv.innerHTML = `
@@ -1164,9 +1148,140 @@
             `;
             
             // Auto-scroll to results
-            document.querySelector('.card:nth-child(3)').scrollIntoView({ behavior: 'smooth' });
+            document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
         }
         
+        // Export to CSV
+        document.getElementById('exportCsvBtn').addEventListener('click', function() {
+            // Prepare CSV content
+            let csvContent = "Ticker,Last Close,Bullish Entry,Bearish Entry,Bullish Signal,Bearish Signal,Proximity\n";
+            
+            sampleData.forEach(stock => {
+                csvContent += `${stock.ticker},${stock.close.replace(',', '')},${stock.bullishEntry.replace(',', '')},${stock.bearishEntry.replace(',', '')},`;
+                csvContent += `${stock.bullishSignal || ''},${stock.bearishSignal || ''},${stock.proximity}\n`;
+            });
+            
+            // Create download link
+            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `bull_bear_crossover_${new Date().toISOString().slice(0,10)}.csv`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        });
+        
+        // Export to Excel
+        document.getElementById('exportExcelBtn').addEventListener('click', function() {
+            // Convert data to worksheet
+            const headers = [
+                "Ticker", "Last Close", "Bullish Entry", "Bearish Entry", 
+                "Bullish Signal", "Bearish Signal", "Proximity"
+            ];
+            
+            const excelData = sampleData.map(stock => [
+                stock.ticker,
+                stock.close.replace(',', ''),
+                stock.bullishEntry.replace(',', ''),
+                stock.bearishEntry.replace(',', ''),
+                stock.bullishSignal || '',
+                stock.bearishSignal || '',
+                stock.proximity
+            ]);
+            
+            // Create workbook
+            const wb = XLSX.utils.book_new();
+            const ws = XLSX.utils.aoa_to_sheet([headers, ...excelData]);
+            XLSX.utils.book_append_sheet(wb, ws, "BullBearAnalysis");
+            
+            // Export to file
+            XLSX.writeFile(wb, `bull_bear_crossover_${new Date().toISOString().slice(0,10)}.xlsx`);
+        });
+        
+        // Export to PDF
+        document.getElementById('exportPdfBtn').addEventListener('click', function() {
+            // Create new PDF
+            const doc = new jsPDF();
+            
+            // Add title
+            doc.setFontSize(18);
+            doc.setTextColor(44, 62, 80);
+            doc.text('Bull Bear Crossover Analysis', 105, 15, null, null, 'center');
+            
+            doc.setFontSize(12);
+            doc.setTextColor(100, 100, 100);
+            doc.text(`Generated on: ${new Date().toLocaleString()}`, 105, 22, null, null, 'center');
+            
+            // Add table
+            const headers = [
+                {title: "Ticker", dataKey: "ticker"},
+                {title: "Last Close", dataKey: "close"}, 
+                {title: "Bullish Entry", dataKey: "bullishEntry"},
+                {title: "Bearish Entry", dataKey: "bearishEntry"},
+                {title: "Bullish Signal", dataKey: "bullishSignal"},
+                {title: "Bearish Signal", dataKey: "bearishSignal"},
+                {title: "Proximity", dataKey: "proximity"}
+            ];
+            
+            // Prepare data (replace null with empty string)
+            const pdfData = sampleData.map(stock => ({
+                ...stock,
+                bullishSignal: stock.bullishSignal || '-',
+                bearishSignal: stock.bearishSignal || '-'
+            }));
+            
+            doc.autoTable({
+                head: [headers.map(h => h.title)],
+                body: pdfData.map(row => [
+                    row.ticker,
+                    row.close,
+                    row.bullishEntry,
+                    row.bearishEntry,
+                    row.bullishSignal,
+                    row.bearishSignal,
+                    row.proximity
+                ]),
+                margin: { top: 30 },
+                styles: {
+                    fontSize: 9,
+                    cellPadding: 4,
+                    overflow: 'linebreak'
+                },
+                headStyles: {
+                    fillColor: [44, 62, 80]
+                },
+                didDrawPage: function (data) {
+                    // Footer
+                    doc.setFontSize(10);
+                    doc.setTextColor(150);
+                    doc.text('Page ' + data.pageCount, data.settings.margin.left, doc.internal.pageSize.height - 10);
+                }
+            });
+            
+            // Save the PDF
+            doc.save(`bull_bear_crossover_${new Date().toISOString().slice(0,10)}.pdf`);
+        });
+        
+        // Export Screenshot
+        document.getElementById('exportScreenshotBtn').addEventListener('click', function() {
+            // Take screenshot of the results table
+            const element = document.getElementById('resultsTable');
+            
+            html2canvas(element, {
+                scale: 2,
+                logging: false,
+                useCORS: true,
+                allowTaint: true
+            }).then(canvas => {
+                // Convert canvas to image and download
+                const link = document.createElement('a');
+                link.download = `bull_bear_screenshot_${new Date().toISOString().slice(0,10)}.png`;
+                link.href = canvas.toDataURL('image/png');
+                link.click();
+            });
+        });
+        
         // Highlight rows on hover
         document.addEventListener('mouseover', function(e) {
             if (e.target.tagName === 'TD' || e.target.tagName === 'TH') {
@@ -1211,5 +1326,5 @@
             });
         });
     </script>
-<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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</body>
 </html>