Samatributa-InvoiceGenerator/index.html at main · LikhithSP/Samatributa-InvoiceGenerator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="/favicon.webp">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>InvoiceGen - ST Solutions</title>


    <script>
      // Global error handler to catch JS errors
      window.addEventListener('error', function(event) {
        console.error('Global error:', event.error);
        const errorMsg = event.error ? event.error.message : 'Unknown error';
        console.log('Error details:', errorMsg);
      });
    </script>
  </head>
  <body>
    <!-- Add noscript warning -->
    <noscript>
      <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; z-index: 10000; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; text-align: center;">
          <h2 style="color: red;">JavaScript is disabled</h2>
          <p>This application requires JavaScript to function. Please enable JavaScript in your browser settings and reload the page.</p>
      </div>
    </noscript>

    <!-- Initial loading indicator -->
    <div id="initialLoading" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 100000; visibility: visible;">
      <div style="text-align: center;">
        <svg id="invoiceLoader" width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;margin:0 auto 20px;">
          <!-- Invoice body -->
          <rect x="20" y="15" width="50" height="60" rx="8" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/>
          <!-- Invoice top bar -->
          <rect x="28" y="23" width="34" height="7" rx="2" fill="#fff" opacity="0.9">
            <animate attributeName="width" values="34;20;34" dur="1.2s" repeatCount="indefinite"/>
          </rect>
          <!-- Invoice lines -->
          <rect x="28" y="35" width="28" height="4" rx="2" fill="#fff" opacity="0.8">
            <animate attributeName="width" values="28;38;28" dur="1.2s" repeatCount="indefinite"/>
          </rect>
          <rect x="28" y="43" width="22" height="4" rx="2" fill="#fff" opacity="0.7">
            <animate attributeName="width" values="22;32;22" dur="1.2s" repeatCount="indefinite"/>
          </rect>
          <!-- Sliding paper -->
          <rect id="paper" x="25" y="70" width="40" height="18" rx="4" fill="#fff" stroke="#e0e7ef" stroke-width="1.5">
            <animate attributeName="y" values="70;40;70" dur="1.2s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="1;0.7;1" dur="1.2s" repeatCount="indefinite"/>
          </rect>
          <!-- Paper lines -->
          <rect x="32" y="75" width="26" height="3" rx="1.5" fill="#e0e7ef" opacity="0.7">
            <animate attributeName="y" values="75;45;75" dur="1.2s" repeatCount="indefinite"/>
          </rect>
          <rect x="32" y="80" width="18" height="3" rx="1.5" fill="#e0e7ef" opacity="0.5">
            <animate attributeName="y" values="80;50;80" dur="1.2s" repeatCount="indefinite"/>
          </rect>
        </svg>
        <div style="font-family: 'Inter', Arial, sans-serif; font-size: 1.1rem; color: #3b82f6; font-weight: 600; letter-spacing: 1px;">
          <span id="loadingText" style="display:inline-block;">
            <span style="animation: blink 1.2s infinite;">L</span>oading Invoice Generator...
          </span>
        </div>
        <style>
          @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
        </style>
      </div>
    </div>

    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script>
      // Hide loading overlay after app loaded
      window.addEventListener('load', function() {
        setTimeout(function() {
          const initialLoading = document.getElementById('initialLoading');
          if (initialLoading) {
            initialLoading.style.display = 'none';
          }
        }, 1000);
      });
    </script>
  </body>
</html>