ezbookredux/index.html at master · uncleericsg/ezbookredux · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
    <link rel="manifest" href="/manifest.json">
    <link rel="mask-icon" href="/mask-icon.svg" color="#111827">
    <meta name="theme-color" content="#121212">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Easy aircon servicing and maintenance booking">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">

    <style>
      @font-face {
        font-family: 'Quicksand';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: local('Quicksand'), url(https://fonts.gstatic.com/s/quicksand/v30/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2) format('woff2');
      }
    </style>
    <script>
      // Suppress message port errors in development
      if (window.location.hostname === 'localhost') {
        const originalError = console.error;
        console.error = (...args) => {
          const errorMessage = args[0]?.toString?.() || '';
          if (
            errorMessage.includes('The message port closed before a response was received') ||
            errorMessage.includes('Unchecked runtime.lastError: The message port closed')
          ) {
            return;
          }
          originalError.apply(console, args);
        };
      }

      window.gm_authFailure = function() {
        console.error('Google Maps authentication failed');
      };
    </script>
    <script>
      // Load Google Maps API dynamically
      function loadGoogleMapsScript() {
        const script = document.createElement('script');
        // Use the Vite replaced variable directly
        script.src = `https://maps.googleapis.com/maps/api/js?key=%VITE_GOOGLE_MAPS_API_KEY%&libraries=places&callback=initMap`;
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
      }

      // Initialize map (required callback)
      window.initMap = function() {
        // Maps API is loaded and ready to use
        console.log('Google Maps API loaded successfully');
        window.isGoogleMapsLoaded = true;
        // Dispatch an event that the CustomerForm can listen for
        window.dispatchEvent(new Event('google-maps-loaded'));
      };

      // Load the script
      loadGoogleMapsScript();
    </script>
    <script async src="https://js.stripe.com/v3/"></script>
    <style>
      :root {
        /* Primary Colors */
        --color-primary: #3B82F6;
        --color-primary-dark: #2563EB;
        --color-primary-light: #60A5FA;

        /* Secondary Colors */
        --color-secondary: #1D4ED8;
        --color-secondary-dark: #1E40AF;
        --color-secondary-light: #3B82F6;

        /* Background Colors */
        --color-bg-primary: #121212;
        --color-bg-secondary: #1E1E1E;
        --color-bg-tertiary: #2D2D2D;

        /* Text Colors */
        --color-text-primary: #F3F4F6;
        --color-text-secondary: #D1D5DB;
        --color-text-tertiary: #9CA3AF;

        /* Border Colors */
        --color-border-primary: #374151;
        --color-border-secondary: #4B5563;

        /* Animation Durations */
        --transition-fast: 150ms;
        --transition-normal: 250ms;
        --transition-slow: 350ms;
      }

      /* Base Styles */
      body {
        margin: 0;
        font-family: 'Quicksand', 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: radial-gradient(circle at center, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
        color: var(--color-text-primary);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      #root {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      /* High Contrast Mode */
      @media (prefers-contrast: high) {
        :root {
          --color-primary: #0066CC;
          --color-secondary: #004C99;
        }
      }

      /* Reduced Motion */
      @media (prefers-reduced-motion: reduce) {
        *:not(.force-animation) {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }
    </style>
    <title>iAircon - Easy Aircon Booking</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script>
      // Hide loading screen when app is ready
      document.addEventListener('DOMContentLoaded', () => {
        const loadingContainer = document.querySelector('.loading-container');
        if (loadingContainer) {
          loadingContainer.style.opacity = '0';
          loadingContainer.style.transition = 'opacity var(--transition-normal) ease-out';
          setTimeout(() => {
            loadingContainer.remove();
          }, 250);
        }
      });
    </script>
  </body>
</html>