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

    <!-- Apply dark/light mode before React renders to prevent FOUC -->
    <script>
      try {
        var s = JSON.parse(localStorage.getItem('mode-storage') || '{}');
        if (!s.state || s.state.mode === 'dark') document.documentElement.classList.add('dark');
      } catch (e) { document.documentElement.classList.add('dark'); }
    </script>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />

    <!-- Note: Google Fonts removed for performance - using system fonts -->
    <!-- Note: Syncfusion CDN preconnect removed - using bundled CSS instead -->

    <!-- Primary Meta Tags -->
    <title>Syncfusion Theme Studio - Create Custom React Admin Portal Themes</title>
    <meta name="title" content="Syncfusion Theme Studio - Create Custom React Admin Portal Themes" />
    <meta name="description" content="Design and customize beautiful React admin portal themes with Syncfusion Theme Studio. Create custom color schemes, typography, and component styles with live preview and export options." />
    <meta name="keywords" content="Syncfusion, Theme Studio, React, Admin Portal, Theme Customization, UI Components, Design System, Color Schemes, Typography, Tailwind CSS" />
    <meta name="author" content="Syncfusion Theme Studio" />
    <meta name="robots" content="index, follow" />
    <meta name="theme-color" content="#3B82F6" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://syncfusion-theme-studio.com/" />
    <meta property="og:title" content="Syncfusion Theme Studio - Create Custom React Admin Portal Themes" />
    <meta property="og:description" content="Design and customize beautiful React admin portal themes with Syncfusion Theme Studio. Create custom color schemes, typography, and component styles with live preview and export options." />
    <meta property="og:image" content="/screenshots/desktop.png" />
    <meta property="og:site_name" content="Syncfusion Theme Studio" />
    <meta property="og:locale" content="en_US" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://syncfusion-theme-studio.com/" />
    <meta name="twitter:title" content="Syncfusion Theme Studio - Create Custom React Admin Portal Themes" />
    <meta name="twitter:description" content="Design and customize beautiful React admin portal themes with Syncfusion Theme Studio. Create custom color schemes, typography, and component styles with live preview and export options." />
    <meta name="twitter:image" content="/screenshots/desktop.png" />

    <!-- Additional SEO -->
    <link rel="canonical" href="https://syncfusion-theme-studio.com/" />

    <!-- Critical CSS inline for faster FCP (First Contentful Paint) -->
    <style>
      /* Critical CSS for initial render - prevents layout shift */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
        font-size: 1rem;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      body {
        margin: 0;
        background-color: #fff;
        color: #111827;
      }

      .dark body {
        background-color: #111827;
        color: #f9fafb;
      }

      /* Loading state for root element - shows spinner while JS loads */
      #root {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #root:empty::after {
        content: '';
        width: 40px;
        height: 40px;
        border: 3px solid #d1d5db;
        border-top-color: #006976;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      .dark #root:empty::after {
        border-color: #374151;
        border-top-color: #2dd4bf;
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }

      /* Font display swap for performance */
      @font-face {
        font-family: 'System';
        src: local('ui-sans-serif'), local('system-ui'), local('sans-serif');
        font-display: swap;
      }
    </style>

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "Syncfusion Theme Studio",
      "description": "Design and customize beautiful React admin portal themes with live preview and export options.",
      "url": "https://syncfusion-theme-studio.com/",
      "applicationCategory": "DesignApplication",
      "operatingSystem": "Web Browser",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "featureList": [
        "Custom color schemes",
        "Typography customization",
        "Component styling",
        "Live preview",
        "Theme export",
        "Dark mode support"
      ]
    }
    </script>
  </head>
  <body>
    <!-- Noscript fallback for accessibility -->
    <noscript>
      <div style="padding: 2rem; text-align: center;">
        <h1>JavaScript Required</h1>
        <p>Please enable JavaScript to use this application.</p>
      </div>
    </noscript>

    <div id="root"></div>

    <!-- Main app script -->
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>