PyExplorer/index.html at main · albertoivo/PyExplorer · 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!doctype html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover" />

  <!-- SEO Meta Tags Otimizadas -->
  <title>PyExplorer - Aprenda Python Jogando! | Curso Grátis de Programação para Crianças 🐍</title>
  <meta name="description"
    content="Aprenda Python de forma divertida! PyExplorer é um jogo educativo GRATUITO para crianças e iniciantes aprenderem programação. Resolva desafios, ganhe estrelas e domine Python passo a passo. Funciona offline!" />
  <meta name="keywords"
    content="aprender python, curso python grátis, python para crianças, python para iniciantes, programação para crianças, jogo de programação, aprender a programar, curso de programação, tutorial python, python online, python gratuito, coding for kids, programar jogando, exercícios python, lógica de programação" />
  <meta name="author" content="PyExplorer" />
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
  <meta name="googlebot" content="index, follow" />
  <meta name="google-site-verification" content="g84BssOqRSKNSYv8e3WTNaAJ0YD1XHZMAN8grc5QSFQ" />
  <meta name="google-site-verification" content="auOZCdtHq9mb7idjx-airLoyzR0xZ3DiUAOeq1XT_ns" />

  <!-- Open Graph / Facebook / WhatsApp -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="PyExplorer" />
  <meta property="og:title" content="PyExplorer - Aprenda Python Jogando! 🐍" />
  <meta property="og:description"
    content="Jogo educativo GRATUITO para crianças e iniciantes aprenderem Python! Resolva desafios, ganhe estrelas e aprenda a programar de forma divertida." />
  <meta property="og:image" content="https://pyexplorer.com.br/og-image.jpg" />
  <meta property="og:image:width" content="1024" />
  <meta property="og:image:height" content="1024" />
  <meta property="og:image:alt" content="PyExplorer - Aprenda Python Jogando" />
  <meta property="og:locale" content="pt_BR" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="PyExplorer - Aprenda Python Jogando! 🐍" />
  <meta name="twitter:description"
    content="Jogo educativo GRATUITO para aprender Python! Perfeito para crianças e iniciantes." />
  <meta name="twitter:image" content="https://pyexplorer.com.br/og-image.jpg" />
  <meta name="twitter:image:alt" content="PyExplorer - Aprenda Python Jogando" />

  <!-- Schema.org JSON-LD para Google -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "PyExplorer",
    "alternateName": "PyExplorer - Aprenda Python Jogando",
    "description": "Jogo educativo gratuito para crianças e iniciantes aprenderem programação Python de forma divertida, com desafios interativos e sistema de recompensas.",
          "@id": "https://pyexplorer.com.br#course",
          "url": "https://pyexplorer.com.br",
    "applicationCategory": "EducationalApplication",
    "operatingSystem": "Web Browser",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "BRL"
    },
    "audience": {
      "@type": "EducationalAudience",
      "educationalRole": "student",
      "audienceType": "Crianças e Iniciantes"
    },
    "educationalLevel": "Iniciante",
    "learningResourceType": "Interactive Game",
    "teaches": ["Python", "Programação", "Lógica de Programação", "Coding"],
    "inLanguage": "pt-BR",
    "isAccessibleForFree": true,
    "keywords": "python, programação, crianças, educação, jogo educativo, aprender python, curso grátis"
  }
  </script>

  <!-- Schema.org - Educational Course -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Course",
    "name": "Curso de Python para Crianças - PyExplorer",
    "description": "Aprenda Python jogando! Curso interativo e gratuito de programação para crianças de 8 a 15 anos.",
    "provider": {
      "@type": "Organization",
      "name": "PyExplorer"
    },
    "educationalLevel": "Iniciante",
    "inLanguage": "pt-BR",
    "isAccessibleForFree": true,
    "teaches": ["Python", "Programação", "Lógica", "Algoritmos"]
  }
  </script>

  <!-- PWA Meta Tags -->
  <meta name="theme-color" content="#0f0f1a" />
  <meta name="background-color" content="#0f0f1a" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="PyExplorer" />
  <meta name="application-name" content="PyExplorer" />
  <meta name="msapplication-TileColor" content="#0f0f1a" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="format-detection" content="telephone=no" />

  <!-- Icons -->
  <link rel="icon" type="image/svg+xml" href="/icons/icon.svg" />
  <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="mask-icon" href="/icons/icon.svg" color="#00ff88" />

  <!-- Preconnect for performance -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="preconnect" href="https://cdn.jsdelivr.net" />

  <!-- Firebase preconnects - breaks critical request chain -->
  <link rel="preconnect" href="https://pyexplorer-cd32d.firebaseapp.com" />
  <link rel="preconnect" href="https://identitytoolkit.googleapis.com" />
  <link rel="preconnect" href="https://securetoken.googleapis.com" />
  <link rel="preconnect" href="https://www.googleapis.com" />

  <!-- DNS Prefetch para recursos externos -->
  <link rel="dns-prefetch" href="https://firestore.googleapis.com" />
  <link rel="dns-prefetch" href="https://apis.google.com" />

  <!-- Splash screens para iOS -->
  <link rel="apple-touch-startup-image" href="/icons/icon-512x512.png" />

  <!-- Fonte otimizada com preload para melhor FCP -->
  <link rel="preload"
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&family=Cinzel:wght@700&family=Great+Vibes&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap"
    as="style" />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&family=Cinzel:wght@700&family=Great+Vibes&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap"
    rel="stylesheet" media="print" onload="this.media='all'" />
  <noscript>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&family=Cinzel:wght@700&family=Great+Vibes&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap"
      rel="stylesheet" />
  </noscript>

  <style>
    /* Loading screen crítico inline */
    #loading-screen {
      position: fixed;
      inset: 0;
      background: linear-gradient(135deg, #0f0f1a 0%, #1e1e2e 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      transition: opacity 0.3s ease;
    }

    #loading-screen .spinner {
      width: 60px;
      height: 60px;
      border: 3px solid rgba(255, 255, 255, 0.1);
      border-top-color: #00ff88;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    #loading-screen .logo {
      font-size: 3rem;
      margin-bottom: 1rem;
      animation: bounce 1s ease infinite;
    }

    #loading-screen p {
      color: #a0aec0;
      margin-top: 1rem;
      font-size: 0.9rem;
    }

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

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }
  </style>
</head>

<body>
  <!-- Loading screen antes do React carregar -->
  <div id="loading-screen">
    <div class="logo">🐍</div>
    <div class="spinner"></div>
    <p>Carregando PyExplorer...</p>
  </div>

  <div id="root" style="min-height: 100vh"></div>
  <script type="module" src="/src/main.tsx"></script>

  <script>
    // Fallback: Remove loading screen se demorar muito (caso o React não monte)
    window.addEventListener('load', function () {
      // O main.tsx deve remover a tela antes disso, mas deixamos como segurança
      setTimeout(function () {
        var loadingScreen = document.getElementById('loading-screen');
        if (loadingScreen && !window.reactMounted) {
          // Apenas remove se o React não tiver sinalizado que montou
          // Se o React falhar totalmente, removemos para mostrar erro (se houver) ou apenas liberar a tela
          loadingScreen.style.opacity = '0';
          setTimeout(function () {
            loadingScreen.remove();
          }, 300);
        }
      }, 3000);
    });
  </script>

  <!-- Noscript fallback -->
  <noscript>
    <div
      style="padding: 2rem; text-align: center; background: #1a1a2e; color: white; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;">
      <h1>🐍 PyExplorer</h1>
      <p>Por favor, habilite o JavaScript para jogar PyExplorer.</p>
    </div>
  </noscript>
</body>

</html>