React/index.html at master · RafiulPaceProjects/React · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- SEO and Social Meta Tags -->
    <title>Maps Explorer - Interactive Mapping Platform</title>
    <meta name="description" content="A modern React application for interactive mapping with search capabilities, multiple map layers, and responsive design." />
    <meta name="keywords" content="maps, leaflet, react, interactive, search, navigation, responsive" />
    <meta name="author" content="Maps Explorer" />

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Maps Explorer - Interactive Mapping Platform" />
    <meta property="og:description" content="Explore interactive maps with advanced search, multiple layers, and responsive design." />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/og-image.png" />

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Maps Explorer" />
    <meta name="twitter:description" content="Interactive mapping platform with React and Leaflet" />

    <!-- Favicon and App Icons -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

    <!-- Preconnect to external domains for performance -->
    <link rel="preconnect" href="https://tile.openstreetmap.org" />
    <link rel="preconnect" href="https://server.arcgisonline.com" />
    <link rel="preconnect" href="https://cdn.tailwindcss.com" />

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
          crossorigin=""/>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Tailwind CSS Configuration -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              'brand-blue': '#3b82f6',
              'brand-blue-dark': '#2563eb',
            },
            fontFamily: {
              'sans': ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
            },
            animation: {
              'fade-in': 'fadeIn 0.3s ease-out',
              'slide-in': 'slideIn 0.3s ease-out',
            },
            keyframes: {
              fadeIn: {
                '0%': { opacity: '0', transform: 'translateY(10px)' },
                '100%': { opacity: '1', transform: 'translateY(0)' },
              },
              slideIn: {
                '0%': { transform: 'translateX(-100%)' },
                '100%': { transform: 'translateX(0)' },
              },
            },
          },
        },
      }
    </script>

    <!-- Performance and Security -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="theme-color" content="#3b82f6" />

    <!-- Accessibility -->
    <meta name="color-scheme" content="light" />

    <!-- Preload critical resources -->
    <link rel="modulepreload" href="/src/main.jsx" />
  </head>
  <body>
    <!-- Root element with fallback content for JavaScript-disabled users -->
    <div id="root">
      <div style="
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background-color: #f8fafc;
        color: #374151;
      ">
        <div>
          <div style="
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            border-radius: 12px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
          ">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="white">
              <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
            </svg>
          </div>
          <h1 style="font-size: 24px; font-weight: 600; margin-bottom: 8px;">
            Maps Explorer
          </h1>
          <p style="margin-bottom: 16px; color: #6b7280;">
            Loading interactive mapping platform...
          </p>
          <p style="font-size: 14px; color: #9ca3af;">
            Please enable JavaScript to use this application.
          </p>
        </div>
      </div>
    </div>

    <!-- Main application script -->
    <script type="module" src="/src/main.jsx"></script>

    <!-- Service Worker Registration (optional) -->
    <script>
      // Register service worker for PWA capabilities (if needed in the future)
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          // navigator.serviceWorker.register('/sw.js')
          //   .then(registration => console.log('SW registered'))
          //   .catch(registrationError => console.log('SW registration failed'));
        });
      }
    </script>
  </body>
</html>