1<!DOCTYPE html> 2<html lang="es" class="scroll-smooth"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 8 <!-- ================= Primary SEO ================= --> 9 <title>Centro de ayuda y guÃas de uso | Castellano.ai</title> 10 <meta name="description" content="GuÃas paso a paso para sacar partido a Castellano.ai: elegir variante del español, activar voseo y lenguaje inclusivo, transcrear entre ES-ES y ES-MX, revisar documentos y gestionar tu suscripción."> 11 <meta name="keywords" content="ayuda castellano.ai, guÃa corrector español, tutorial transcreación, control de cambios Word, soporte"> 12 <meta name="author" content="Castellano.ai"> 13 <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large"> 14 <meta name="theme-color" content="#667eea"> 15 16 <link rel="canonical" href="https://castellano.ai/centro-ayuda.html"> 17 <link rel="alternate" hreflang="es" href="https://castellano.ai/centro-ayuda.html"> 18 <link rel="alternate" hreflang="x-default" href="https://castellano.ai/centro-ayuda.html"> 19 20 <!-- ================= Open Graph ================= --> 21 <meta property="og:type" content="article"> 22 <meta property="og:site_name" content="Castellano.ai"> 23 <meta property="og:locale" content="es_ES"> 24 <meta property="og:url" content="https://castellano.ai/centro-ayuda.html"> 25 <meta property="og:title" content="Centro de ayuda y guÃas de uso | Castellano.ai"> 26 <meta property="og:description" content="GuÃas paso a paso para sacar partido a Castellano.ai: elegir variante del español, activar voseo y lenguaje inclusivo, transcrear entre ES-ES y ES-MX, revisar documentos y gestionar tu suscripción."> 27 <meta property="og:image" content="https://castellano.ai/img/jpeg.jpg"> 28 <meta property="og:image:alt" content="Castellano.ai"> 29 30 <!-- ================= Twitter / X ================= --> 31 <meta name="twitter:card" content="summary_large_image"> 32 <meta name="twitter:title" content="Centro de ayuda y guÃas de uso | Castellano.ai"> 33 <meta name="twitter:description" content="GuÃas paso a paso para sacar partido a Castellano.ai: elegir variante del español, activar voseo y lenguaje inclusivo, transcrear entre ES-ES y ES-MX, revisar documentos y gestionar tu suscripción."> 34 <meta name="twitter:image" content="https://castellano.ai/img/jpeg.jpg"> 35 36 <!-- ================= Icons ================= --> 37 <link rel="icon" href="/img/favicon.png" type="image/png"> 38 <link rel="apple-touch-icon" href="/img/favicon.png"> 39 <link rel="shortcut icon" href="/img/favicon.ico"> 40 41 <!-- ================= Performance ================= --> 42 <link rel="preconnect" href="https://fonts.googleapis.com"> 43 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 44 <link rel="dns-prefetch" href="https://cdn.tailwindcss.com"> 45 <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com"> 46 47 <!-- ================= Structured data ================= --> 48
48<script type="application/ld+json"> 49 { 50 "@context": "https://schema.org", 51 "@graph": [ 52 { 53 "@type": "WebPage", 54 "@id": "https://castellano.ai/centro-ayuda.html#webpage", 55 "url": "https://castellano.ai/centro-ayuda.html", 56 "name": "Centro de ayuda y guÃas de uso | Castellano.ai", 57 "description": "GuÃas paso a paso para sacar partido a Castellano.ai: elegir variante del español, activar voseo y lenguaje inclusivo, transcrear entre ES-ES y ES-MX, revisar documentos y gestionar tu suscripción.", 58 "inLanguage": "es", 59 "isPartOf": { "@id": "https://castellano.ai/#website" }, 60 "publisher": { "@id": "https://castellano.ai/#organization" } 61 }, 62 { 63 "@type": "BreadcrumbList", 64 "@id": "https://castellano.ai/centro-ayuda.html#breadcrumb", 65 "itemListElement": [ 66 { "@type": "ListItem", "position": 1, "name": "Inicio", "item": "https://castellano.ai/" }, 67 { "@type": "ListItem", "position": 2, "name": "Centro de ayuda", "item": "https://castellano.ai/centro-ayuda.html" } 68 ] 69 } 70 ] 71 } 72 </script>
72 73 74
74<script src="https://cdn.tailwindcss.com"></script>
74 75 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 76 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> 77 <style> 78 * { 79 font-family: 'Inter', sans-serif; 80 } 81 82 .gradient-text { 83 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 84 -webkit-background-clip: text; 85 -webkit-text-fill-color: transparent; 86 background-clip: text; 87 } 88 89 .gradient-bg { 90 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 91 } 92 93 .glass { 94 background: rgba(255, 255, 255, 0.1); 95 backdrop-filter: blur(10px); 96 border: 1px solid rgba(255, 255, 255, 0.2); 97 } 98 99 .dark .glass { 100 background: rgba(0, 0, 0, 0.2); 101 border: 1px solid rgba(255, 255, 255, 0.1); 102 } 103 104 .text-gradient-shine { 105 background: linear-gradient(120deg, #667eea 0%, #764ba2 40%, #f64f59 60%, #667eea 100%); 106 background-size: 200% 100%; 107 -webkit-background-clip: text; 108 -webkit-text-fill-color: transparent; 109 animation: gradient-shift 3s ease-in-out infinite; 110 } 111 112 @keyframes gradient-shift { 113 0% { background-position: 0% 50%; } 114 50% { background-position: 100% 50%; } 115 100% { background-position: 0% 50%; } 116 } 117 118 .hover-lift { 119 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 120 } 121 122 .hover-lift:hover { 123 transform: translateY(-2px); 124 } 125 126 .blob { 127 position: absolute; 128 filter: blur(100px); 129 opacity: 0.4; 130 } 131 132 .help-category-card { 133 background: rgba(255, 255, 255, 0.8); 134 border: 1px solid rgba(0, 0, 0, 0.1); 135 border-radius: 1rem; 136 padding: 1.5rem; 137 transition: all 0.3s ease; 138 position: relative; 139 overflow: hidden; 140 cursor: pointer; 141 } 142 143 .dark .help-category-card { 144 background: rgba(0, 0, 0, 0.4); 145 border: 1px solid rgba(255, 255, 255, 0.2); 146 } 147 148 .help-category-card::before { 149 content: ''; 150 position: absolute; 151 top: 0; 152 left: 0; 153 right: 0; 154 bottom: 0; 155 background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); 156 transform: translateX(-100%); 157 transition: transform 0.6s; 158 } 159 160 .help-category-card:hover::before { 161 transform: translateX(100%); 162 } 163 164 .help-category-card:hover { 165 transform: translateY(-4px); 166 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 167 } 168 169 .help-article { 170 background: rgba(255, 255, 255, 0.6); 171 border: 1px solid rgba(0, 0, 0, 0.1); 172 border-radius: 0.75rem; 173 padding: 1rem; 174 margin-bottom: 0.75rem; 175 transition: all 0.3s ease; 176 cursor: pointer; 177 } 178 179 .dark .help-article { 180 background: rgba(0, 0, 0, 0.3); 181 border: 1px solid rgba(255, 255, 255, 0.1); 182 } 183 184 .help-article:hover { 185 background: rgba(255, 255, 255, 0.9); 186 transform: translateY(-2px); 187 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 188 } 189 190 .dark .help-article:hover { 191 background: rgba(0, 0, 0, 0.5); 192 } 193 194 .quick-actions-grid { 195 display: grid; 196 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 197 gap: 1rem; 198 margin: 2rem 0; 199 } 200 201 .quick-action-card { 202 background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); 203 border: 2px solid #cbd5e1; 204 border-radius: 0.75rem; 205 padding: 1.5rem; 206 text-align: center; 207 transition: all 0.3s ease; 208 cursor: pointer; 209 } 210 211 .dark .quick-action-card { 212 background: linear-gradient(135deg, #374151 0%, #1f2937 100%); 213 border-color: #4b5563; 214 } 215 216 .quick-action-card:hover { 217 transform: translateY(-4px); 218 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 219 } 220 221 .tutorial-badge { 222 display: inline-block; 223 padding: 0.25rem 0.75rem; 224 border-radius: 9999px; 225 font-size: 0.75rem; 226 font-weight: 600; 227 margin-bottom: 0.5rem; 228 } 229 230 .video-placeholder { 231 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 232 border-radius: 0.75rem; 233 padding: 3rem 1rem; 234 text-align: center; 235 color: white; 236 position: relative; 237 overflow: hidden; 238 cursor: pointer; 239 transition: all 0.3s ease; 240 } 241 242 .video-placeholder:hover { 243 transform: scale(1.02); 244 } 245 246 .search-highlight { 247 background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); 248 padding: 0.125rem 0.25rem; 249 border-radius: 0.25rem; 250 font-weight: 600; 251 } 252 253 .dark .search-highlight { 254 background: linear-gradient(135deg, #92400e 0%, #d97706 100%); 255 color: white; 256 } 257 258 .breadcrumb { 259 display: flex; 260 align-items: center; 261 margin-bottom: 1rem; 262 font-size: 0.875rem; 263 color: #6b7280; 264 } 265 266 .breadcrumb a { 267 color: #667eea; 268 text-decoration: none; 269 transition: color 0.3s ease; 270 } 271 272 .breadcrumb a:hover { 273 color: #764ba2; 274 text-decoration: underline; 275 } 276 277 .rating-stars { 278 color: #fbbf24; 279 margin: 0.5rem 0; 280 } 281 282 .help-stats { 283 display: grid; 284 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 285 gap: 1rem; 286 margin: 2rem 0; 287 } 288 289 .stat-item { 290 text-align: center; 291 padding: 1rem; 292 background: rgba(255, 255, 255, 0.5); 293 border-radius: 0.75rem; 294 border: 1px solid rgba(0, 0, 0, 0.1); 295 } 296 297 .dark .stat-item { 298 background: rgba(0, 0, 0, 0.3); 299 border: 1px solid rgba(255, 255, 255, 0.1); 300 } 301 302 .progress-bar { 303 background: #e5e7eb; 304 border-radius: 9999px; 305 height: 0.5rem; 306 overflow: hidden; 307 margin: 0.5rem 0; 308 } 309 310 .dark .progress-bar { 311 background: #374151; 312 } 313 314 .progress-fill { 315 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 316 height: 100%; 317 border-radius: 9999px; 318 transition: width 1s ease; 319 } 320 321 .notification-banner { 322 background: linear-gradient(135deg, #10b981 0%, #059669 100%); 323 color: white; 324 padding: 1rem; 325 border-radius: 0.75rem; 326 margin-bottom: 2rem; 327 position: relative; 328 } 329 330 .article-content { 331 max-height: 0; 332 overflow: hidden; 333 transition: max-height 0.3s ease; 334 } 335 336 .article-content.expanded { 337 max-height: 1000px; 338 } 339 </style> 340</head> 341 342<body class="bg-gray-50 dark:bg-gray-900 transition-all duration-300 min-h-screen">
343 <!-- Animated Background --> 344 <div class="fixed inset-0 overflow-hidden pointer-events-none"> 345 <div class="blob w-96 h-96 bg-purple-400 -top-48 -left-48 animate-pulse"></div> 346 <div class="blob w-96 h-96 bg-pink-400 -bottom-48 -right-48 animate-pulse" style="animation-delay: 2s;"></div> 347 <div class="blob w-96 h-96 bg-blue-400 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse" style="animation-delay: 4s;"></div> 348 </div> 349 350 <!-- Header --> 351 <header class="glass sticky top-0 z-50 border-b border-gray-200 dark:border-gray-700"> 352 <nav class="container mx-auto px-4 py-4"> 353 <div class="flex justify-between items-center"> 354 <div class="flex items-center space-x-3 group cursor-pointer"> 355 <a href="/" class="flex items-center space-x-3"> 356 <div class="relative"> 357 <i class="fas fa-feather-alt text-3xl text-purple-600 transform group-hover:rotate-12 transition-transform"></i> 358 <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-pulse"></div> 359 </div> 360 <h1 class="text-3xl font-black text-gradient-shine">Castellano.ai</h1> 361 </a> 362 </div> 363 <div class="flex items-center space-x-4"> 364 <button id="themeToggle" class="p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-all hover-lift"> 365 <i class="fas fa-moon text-xl dark:hidden"></i> 366 <i class="fas fa-sun hidden dark:block text-xl text-yellow-400"></i> 367 </button> 368 <a href="/" class="px-6 py-3 gradient-bg text-white font-semibold rounded-xl hover:shadow-lg transform transition-all hover:scale-105"> 369 <i class="fas fa-home mr-2"></i>Inicio 370 </a> 371 </div> 372 </div> 373 </nav> 374 </header> 375 376 <!-- Main Content --> 377 <main class="container mx-auto px-4 py-8 relative z-10"> 378 <!-- Breadcrumb --> 379 <div class="breadcrumb dark:text-gray-400"> 380 <a href="/">Inicio</a> 381 <i class="fas fa-chevron-right mx-2"></i> 382 <span>Centro de Ayuda</span> 383 </div> 384 385 <!-- Hero Section --> 386 <section class="text-center mb-12"> 387 <div class="max-w-4xl mx-auto"> 388 <!-- Notification Banner --> 389 <div class="notification-banner"> 390 <div class="flex items-center justify-center space-x-3"> 391 <i class="fas fa-bullhorn text-2xl"></i> 392 <div> 393 <p class="font-semibold">¡Nuevo! GuÃas interactivas disponibles</p> 394 <p class="text-sm opacity-90">Aprende a usar todas las funciones paso a paso</p> 395 </div> 396 </div> 397 </div> 398 399 <h2 class="text-4xl md:text-5xl font-black mb-6 dark:text-white leading-tight"> 400 <i class="fas fa-life-ring text-purple-600 mr-4"></i> 401 Centro de <span class="text-gradient-shine">Ayuda</span> 402 </h2> 403 <p class="text-xl text-gray-600 dark:text-gray-300 mb-8"> 404 GuÃas completas, tutoriales y recursos para aprovechar al máximo Castellano.ai 405 </p> 406 407 <!-- Search Bar --> 408 <div class="max-w-2xl mx-auto mb-8"> 409 <div class="relative"> 410 <input type="text" id="helpSearchInput" placeholder="¿Qué necesitas aprender hoy?" 411 class="w-full px-6 py-4 text-lg rounded-2xl border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 dark:text-white focus:outline-none focus:ring-4 focus:ring-purple-500/30 focus:border-purple-500 transition-all shadow-lg"> 412 <i class="fas fa-search absolute right-6 top-1/2 transform -translate-y-1/2 text-gray-400 text-xl"></i> 413 </div> 414 <div id="helpSearchResults" class="mt-4 text-sm"></div> 415 </div> 416 417 <!-- Quick Stats --> 418 <div class="help-stats"> 419 <div class="stat-item hover-lift"> 420 <i class="fas fa-book-open text-3xl text-blue-600 mb-2"></i> 421 <h3 class="text-2xl font-bold dark:text-white">200+</h3> 422 <p class="text-gray-600 dark:text-gray-400">ArtÃculos de ayuda</p> 423 </div> 424 <div class="stat-item hover-lift"> 425 <i class="fas fa-video text-3xl text-red-600 mb-2"></i> 426 <h3 class="text-2xl font-bold dark:text-white">50+</h3> 427 <p class="text-gray-600 dark:text-gray-400">Tutoriales en video</p> 428 </div> 429 <div class="stat-item hover-lift"> 430 <i class="fas fa-download text-3xl text-green-600 mb-2"></i> 431 <h3 class="text-2xl font-bold dark:text-white">25+</h3> 432 <p class="text-gray-600 dark:text-gray-400">GuÃas descargables</p> 433 </div> 434 <div class="stat-item hover-lift"> 435 <i class="fas fa-clock text-3xl text-purple-600 mb-2"></i> 436 <h3 class="text-2xl font-bold dark:text-white">5 min</h3> 437 <p class="text-gray-600 dark:text-gray-400">Tiempo promedio</p> 438 </div> 439 </div> 440 </div> 441 </section> 442 443 <!-- Quick Actions --> 444 <section class="max-w-6xl mx-auto mb-12"> 445 <h3 class="text-2xl font-bold mb-6 dark:text-white text-center"> 446 <i class="fas fa-rocket text-purple-600 mr-3"></i> 447 Acciones Rápidas 448 </h3> 449 <div class="quick-actions-grid"> 450 <div class="quick-action-card" onclick="showQuickStart()"> 451 <i class="fas fa-play-circle text-4xl text-green-600 mb-3"></i> 452 <h4 class="font-bold dark:text-white mb-2">GuÃa de Inicio Rápido</h4> 453 <p class="text-sm text-gray-600 dark:text-gray-400">Aprende lo básico en 5 minutos</p> 454 </div> 455 <div class="quick-action-card" onclick="showTutorials()"> 456 <i class="fas fa-video text-4xl text-blue-600 mb-3"></i> 457 <h4 class="font-bold dark:text-white mb-2">Tutoriales en Video</h4> 458 <p class="text-sm text-gray-600 dark:text-gray-400">Demostraciones paso a paso</p> 459 </div> 460 <div class="quick-action-card" onclick="showTroubleshooting()"> 461 <i class="fas fa-tools text-4xl text-orange-600 mb-3"></i> 462 <h4 class="font-bold dark:text-white mb-2">Solución de Problemas</h4> 463 <p class="text-sm text-gray-600 dark:text-gray-400">Resuelve issues comunes</p> 464 </div> 465 <div class="quick-action-card" onclick="contactSupport()"> 466 <i class="fas fa-headset text-4xl text-purple-600 mb-3"></i> 467 <h4 class="font-bold dark:text-white mb-2">Contactar Soporte</h4> 468 <p class="text-sm text-gray-600 dark:text-gray-400">Habla con nuestro equipo</p> 469 </div> 470 </div> 471 </section> 472 473 <!-- Help Categories --> 474 <section class="max-w-6xl mx-auto mb-12"> 475 <h3 class="text-2xl font-bold mb-8 dark:text-white"> 476 <i class="fas fa-th-large text-purple-600 mr-3"></i> 477 Explorar por CategorÃas 478 </h3> 479 480 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> 481 <!-- Getting Started --> 482 <div class="help-category-card" onclick="toggleCategory('getting-started')"> 483 <div class="flex items-start space-x-3"> 484 <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg"> 485 <i class="fas fa-rocket text-green-600 dark:text-green-400 text-2xl"></i> 486 </div> 487 <div class="flex-1"> 488 <h4 class="font-bold text-lg dark:text-white mb-2">Primeros Pasos</h4> 489 <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Todo lo que necesitas para comenzar</p>
490 <span class="text-xs bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 px-2 py-1 rounded-full">15 artÃculos</span> 491 </div> 492 </div> 493 <div id="getting-started-content" class="article-content mt-4"> 494 <div class="help-article" onclick="openArticle('crear-cuenta')"> 495 <div class="flex justify-between items-start"> 496 <div> 497 <h5 class="font-semibold dark:text-white">Cómo crear tu cuenta</h5> 498 <p class="text-xs text-gray-500 dark:text-gray-400">3 min ⢠Principiante</p> 499 </div> 500 <div class="rating-stars"> 501 <i class="fas fa-star"></i> 502 <i class="fas fa-star"></i> 503 <i class="fas fa-star"></i> 504 <i class="fas fa-star"></i> 505 <i class="fas fa-star"></i> 506 </div> 507 </div> 508 </div> 509 <div class="help-article" onclick="openArticle('primer-analisis')"> 510 <div class="flex justify-between items-start"> 511 <div> 512 <h5 class="font-semibold dark:text-white">Tu primer análisis de texto</h5> 513 <p class="text-xs text-gray-500 dark:text-gray-400">5 min ⢠Principiante</p> 514 </div> 515 <div class="rating-stars"> 516 <i class="fas fa-star"></i> 517 <i class="fas fa-star"></i> 518 <i class="fas fa-star"></i> 519 <i class="fas fa-star"></i> 520 <i class="far fa-star"></i> 521 </div> 522 </div> 523 </div> 524 <div class="help-article" onclick="openArticle('configurar-pais')"> 525 <div class="flex justify-between items-start"> 526 <div> 527 <h5 class="font-semibold dark:text-white">Configurar tu paÃs y región</h5> 528 <p class="text-xs text-gray-500 dark:text-gray-400">2 min ⢠Principiante</p> 529 </div> 530 <div class="rating-stars"> 531 <i class="fas fa-star"></i> 532 <i class="fas fa-star"></i> 533 <i class="fas fa-star"></i> 534 <i class="fas fa-star"></i> 535 <i class="fas fa-star"></i> 536 </div> 537 </div> 538 </div> 539 </div> 540 </div> 541 542 <!-- Features --> 543 <div class="help-category-card" onclick="toggleCategory('features')"> 544 <div class="flex items-start space-x-3"> 545 <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-lg"> 546 <i class="fas fa-magic text-blue-600 dark:text-blue-400 text-2xl"></i> 547 </div> 548 <div class="flex-1"> 549 <h4 class="font-bold text-lg dark:text-white mb-2">Funcionalidades</h4> 550 <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Domina todas las herramientas</p> 551 <span class="text-xs bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-2 py-1 rounded-full">25 artÃculos</span> 552 </div> 553 </div>
554 <div id="features-content" class="article-content mt-4"> 555 <div class="help-article" onclick="openArticle('correccion-avanzada')"> 556 <div class="flex justify-between items-start"> 557 <div> 558 <h5 class="font-semibold dark:text-white">Corrección avanzada de gramática</h5> 559 <p class="text-xs text-gray-500 dark:text-gray-400">8 min ⢠Intermedio</p> 560 </div> 561 <div class="tutorial-badge bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"> 562 <i class="fas fa-video mr-1"></i> Video 563 </div> 564 </div> 565 </div> 566 <div class="help-article" onclick="openArticle('mejora-estilo')"> 567 <div class="flex justify-between items-start"> 568 <div> 569 <h5 class="font-semibold dark:text-white">Mejora de estilo y claridad</h5> 570 <p class="text-xs text-gray-500 dark:text-gray-400">6 min ⢠Intermedio</p> 571 </div> 572 <div class="tutorial-badge bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"> 573 <i class="fas fa-crown mr-1"></i> Premium 574 </div> 575 </div> 576 </div> 577 <div class="help-article" onclick="openArticle('traduccion')"> 578 <div class="flex justify-between items-start"> 579 <div> 580 <h5 class="font-semibold dark:text-white">Función de traducción</h5> 581 <p class="text-xs text-gray-500 dark:text-gray-400">7 min ⢠Intermedio</p> 582 </div> 583 <div class="tutorial-badge bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> 584 <i class="fas fa-language mr-1"></i> Nuevo 585 </div> 586 </div> 587 </div> 588 </div> 589 </div> 590 591 <!-- Premium --> 592 <div class="help-category-card" onclick="toggleCategory('premium')"> 593 <div class="flex items-start space-x-3"> 594 <div class="bg-yellow-100 dark:bg-yellow-900 p-3 rounded-lg"> 595 <i class="fas fa-crown text-yellow-600 dark:text-yellow-400 text-2xl"></i> 596 </div> 597 <div class="flex-1"> 598 <h4 class="font-bold text-lg dark:text-white mb-2">Premium</h4> 599 <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Sácale el máximo provecho</p> 600 <span class="text-xs bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded-full">12 artÃculos</span> 601 </div> 602 </div> 603 <div id="premium-content" class="article-content mt-4"> 604 <div class="help-article" onclick="openArticle('actualizar-premium')"> 605 <div class="flex justify-between items-start"> 606 <div> 607 <h5 class="font-semibold dark:text-white">Cómo actualizar a Premium</h5> 608 <p class="text-xs text-gray-500 dark:text-gray-400">4 min ⢠Principiante</p> 609 </div> 610 <div class="rating-stars"> 611 <i class="fas fa-star"></i> 612 <i class="fas fa-star"></i> 613 <i class="fas fa-star"></i> 614 <i class="fas fa-star"></i> 615 <i class="fas fa-star"></i> 616 </div> 617 </div> 618 </div> 619 <div class="help-article" onclick="openArticle('gestionar-historial')"> 620 <div class="flex justify-between items-start"> 621 <div> 622 <h5 class="font-semibold dark:text-white">Gestionar tu historial</h5> 623 <p class="text-xs text-gray-500 dark:text-gray-400">5 min ⢠Intermedio</p> 624 </div> 625 <div class="tutorial-badge bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"> 626 <i class="fas fa-download mr-1"></i> PDF 627 </div> 628 </div> 629 </div> 630 <div class="help-article" onclick="openArticle('cancelar-suscripcion')"> 631 <div class="flex justify-between items-start"> 632 <div> 633 <h5 class="font-semibold dark:text-white">Cancelar suscripción</h5> 634 <p class="text-xs text-gray-500 dark:text-gray-400">3 min ⢠Principiante</p> 635 </div> 636 <div class="rating-stars"> 637 <i class="fas fa-star"></i> 638 <i class="fas fa-star"></i> 639 <i class="fas fa-star"></i> 640 <i class="fas fa-star"></i> 641 <i class="far fa-star"></i> 642 </div> 643 </div> 644 </div> 645 </div> 646 </div> 647 648 <!-- Account --> 649 <div class="help-category-card" onclick="toggleCategory('account')"> 650 <div class="flex items-start space-x-3">
651 <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-lg"> 652 <i class="fas fa-user-cog text-purple-600 dark:text-purple-400 text-2xl"></i> 653 </div> 654 <div class="flex-1"> 655 <h4 class="font-bold text-lg dark:text-white mb-2">Cuenta y Configuración</h4> 656 <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Personaliza tu experiencia</p> 657 <span class="text-xs bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 px-2 py-1 rounded-full">18 artÃculos</span> 658 </div> 659 </div> 660 <div id="account-content" class="article-content mt-4"> 661 <div class="help-article" onclick="openArticle('cambiar-password')"> 662 <div class="flex justify-between items-start"> 663 <div> 664 <h5 class="font-semibold dark:text-white">Cambiar contraseña</h5> 665 <p class="text-xs text-gray-500 dark:text-gray-400">2 min ⢠Principiante</p> 666 </div> 667 <div class="rating-stars"> 668 <i class="fas fa-star"></i> 669 <i class="fas fa-star"></i> 670 <i class="fas fa-star"></i> 671 <i class="fas fa-star"></i> 672 <i class="fas fa-star"></i> 673 </div> 674 </div> 675 </div> 676 <div class="help-article" onclick="openArticle('configurar-notificaciones')"> 677 <div class="flex justify-between items-start"> 678 <div> 679 <h5 class="font-semibold dark:text-white">Configurar notificaciones</h5> 680 <p class="text-xs text-gray-500 dark:text-gray-400">4 min ⢠Intermedio</p> 681 </div> 682 <div class="tutorial-badge bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"> 683 <i class="fas fa-images mr-1"></i> Capturas 684 </div> 685 </div> 686 </div> 687 <div class="help-article" onclick="openArticle('eliminar-cuenta')"> 688 <div class="flex justify-between items-start"> 689 <div> 690 <h5 class="font-semibold dark:text-white">Eliminar cuenta</h5> 691 <p class="text-xs text-gray-500 dark:text-gray-400">3 min ⢠Avanzado</p> 692 </div> 693 <div class="rating-stars"> 694 <i class="fas fa-star"></i> 695 <i class="fas fa-star"></i> 696 <i class="fas fa-star"></i> 697 <i class="far fa-star"></i> 698 <i class="far fa-star"></i> 699 </div> 700 </div> 701 </div> 702 </div> 703 </div> 704 705 <!-- Troubleshooting --> 706 <div class="help-category-card" onclick="toggleCategory('troubleshooting')"> 707 <div class="flex items-start space-x-3"> 708 <div class="bg-red-100 dark:bg-red-900 p-3 rounded-lg"> 709 <i class="fas fa-tools text-red-600 dark:text-red-400 text-2xl"></i> 710 </div> 711 <div class="flex-1"> 712 <h4 class="font-bold text-lg dark:text-white mb-2">Solución de Problemas</h4> 713 <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Resuelve issues técnicos</p>
714 <span class="text-xs bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-200 px-2 py-1 rounded-full">20 artÃculos</span> 715 </div> 716 </div> 717 <div id="troubleshooting-content" class="article-content mt-4"> 718 <div class="help-article" onclick="openArticle('problemas-carga')"> 719 <div class="flex justify-between items-start"> 720 <div> 721 <h5 class="font-semibold dark:text-white">La página no carga correctamente</h5> 722 <p class="text-xs text-gray-500 dark:text-gray-400">5 min ⢠Intermedio</p> 723 </div> 724 <div class="tutorial-badge bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"> 725 <i class="fas fa-exclamation-triangle mr-1"></i> Común 726 </div> 727 </div> 728 </div> 729 <div class="help-article" onclick="openArticle('analisis-lento')"> 730 <div class="flex justify-between items-start"> 731 <div> 732 <h5 class="font-semibold dark:text-white">El análisis tarda mucho tiempo</h5> 733 <p class="text-xs text-gray-500 dark:text-gray-400">4 min ⢠Intermedio</p> 734 </div> 735 <div class="rating-stars"> 736 <i class="fas fa-star"></i> 737 <i class="fas fa-star"></i> 738 <i class="fas fa-star"></i> 739 <i class="fas fa-star"></i> 740 <i class="far fa-star"></i> 741 </div> 742 </div> 743 </div> 744 <div class="help-article" onclick="openArticle('problemas-pago')"> 745 <div class="flex justify-between items-start"> 746 <div> 747 <h5 class="font-semibold dark:text-white">Problemas con pagos</h5> 748 <p class="text-xs text-gray-500 dark:text-gray-400">6 min ⢠Avanzado</p> 749 </div> 750 <div class="tutorial-badge bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"> 751 <i class="fas fa-headset mr-1"></i> Soporte 752 </div> 753 </div> 754 </div> 755 </div> 756 </div> 757 758 <!-- API & Integrations --> 759 <div class="help-category-card" onclick="toggleCategory('api')"> 760 <div class="flex items-start space-x-3"> 761 <div class="bg-indigo-100 dark:bg-indigo-900 p-3 rounded-lg"> 762 <i class="fas fa-code text-indigo-600 dark:text-indigo-400 text-2xl"></i> 763 </div> 764 <div class="flex-1"> 765 <h4 class="font-bold text-lg dark:text-white mb-2">API e Integraciones</h4> 766 <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Para desarrolladores</p> 767 <span class="text-xs bg-indigo-100 dark:bg-indigo-800 text-indigo-800 dark:text-indigo-200 px-2 py-1 rounded-full">10 artÃculos</span> 768 </div> 769 </div> 770 <div id="api-content" class="article-content mt-4"> 771 <div class="help-article" onclick="openArticle('api-docs')"> 772 <div class="flex justify-between items-start"> 773 <div> 774 <h5 class="font-semibold dark:text-white">Documentación de la API</h5> 775 <p class="text-xs text-gray-500 dark:text-gray-400">15 min ⢠Avanzado</p> 776 </div> 777 <div class="tutorial-badge bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200"> 778 <i class="fas fa-code mr-1"></i> Código 779 </div> 780 </div> 781 </div> 782 <div class="help-article" onclick="openArticle('wordpress-plugin')"> 783 <div class="flex justify-between items-start"> 784 <div> 785 <h5 class="font-semibold dark:text-white">Plugin para WordPress</h5> 786 <p class="text-xs text-gray-500 dark:text-gray-400">8 min ⢠Intermedio</p> 787 </div> 788 <div class="tutorial-badge bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> 789 <i class="fas fa-download mr-1"></i> Descarga 790 </div> 791 </div> 792 </div> 793 <div class="help-article" onclick="openArticle('rate-limits')"> 794 <div class="flex justify-between items-start"> 795 <div> 796 <h5 class="font-semibold dark:text-white">LÃmites de velocidad</h5> 797 <p class="text-xs text-gray-500 dark:text-gray-400">5 min ⢠Avanzado</p> 798 </div> 799 <div class="rating-stars"> 800 <i class="fas fa-star"></i> 801 <i class="fas fa-star"></i> 802 <i class="fas fa-star"></i> 803 <i class="fas fa-star"></i> 804 <i class="fas fa-star"></i> 805 </div> 806 </div> 807 </div> 808 </div> 809 </div> 810 </div> 811 </section> 812 813 <!-- Popular Tutorials --> 814 <section class="max-w-6xl mx-auto mb-12"> 815 <h3 class="text-2xl font-bold mb-8 dark:text-white"> 816 <i class="fas fa-fire text-orange-500 mr-3"></i> 817 Tutoriales Más Populares 818 </h3> 819 820 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> 821 <div class="video-placeholder" onclick="playTutorial('intro')"> 822 <i class="fas fa-play-circle text-6xl mb-4 opacity-80"></i> 823 <h4 class="text-xl font-bold mb-2">Introducción a Castellano.ai</h4> 824 <p class="text-sm opacity-90">Descubre todas las funciones en 10 minutos</p> 825 <div class="absolute top-4 right-4">
826 <span class="bg-white bg-opacity-20 px-2 py-1 rounded text-xs">10:32</span> 827 </div> 828 </div> 829 830 <div class="video-placeholder" onclick="playTutorial('premium')"> 831 <i class="fas fa-play-circle text-6xl mb-4 opacity-80"></i> 832 <h4 class="text-xl font-bold mb-2">Funciones Premium</h4> 833 <p class="text-sm opacity-90">Aprovecha al máximo tu suscripción</p> 834 <div class="absolute top-4 right-4"> 835 <span class="bg-white bg-opacity-20 px-2 py-1 rounded text-xs">8:45</span> 836 </div> 837 </div> 838 839 <div class="video-placeholder" onclick="playTutorial('writing-tips')"> 840 <i class="fas fa-play-circle text-6xl mb-4 opacity-80"></i> 841 <h4 class="text-xl font-bold mb-2">Consejos de Escritura</h4> 842 <p class="text-sm opacity-90">Mejora tu estilo con IA</p> 843 <div class="absolute top-4 right-4"> 844 <span class="bg-white bg-opacity-20 px-2 py-1 rounded text-xs">12:15</span> 845 </div> 846 </div> 847 </div> 848 </section> 849 850 <!-- Downloads Section --> 851 <section class="max-w-4xl mx-auto mb-12"> 852 <div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8"> 853 <h3 class="text-2xl font-bold mb-6 dark:text-white text-center"> 854 <i class="fas fa-download text-green-600 mr-3"></i> 855 Recursos Descargables 856 </h3> 857 858 <div class="grid md:grid-cols-2 gap-6"> 859 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 hover-lift"> 860 <div class="flex items-start space-x-4"> 861 <div class="bg-red-100 dark:bg-red-900 p-3 rounded-lg"> 862 <i class="fas fa-file-pdf text-red-600 dark:text-red-400 text-2xl"></i> 863 </div> 864 <div class="flex-1"> 865 <h4 class="font-bold dark:text-white mb-2">GuÃa Completa de Usuario</h4> 866 <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Manual completo con capturas de pantalla</p> 867 <div class="flex items-center justify-between"> 868 <span class="text-xs text-gray-500">PDF ⢠2.5 MB</span> 869 <button class="text-purple-600 hover:underline font-semibold">Descargar</button> 870 </div> 871 </div> 872 </div> 873 </div> 874 875 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 hover-lift"> 876 <div class="flex items-start space-x-4"> 877 <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-lg"> 878 <i class="fas fa-file-word text-blue-600 dark:text-blue-400 text-2xl"></i> 879 </div> 880 <div class="flex-1"> 881 <h4 class="font-bold dark:text-white mb-2">Plantillas de Escritura</h4> 882 <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Documentos optimizados para análisis</p> 883 <div class="flex items-center justify-between"> 884 <span class="text-xs text-gray-500">DOCX ⢠1.2 MB</span> 885 <button class="text-purple-600 hover:underline font-semibold">Descargar</button> 886 </div> 887 </div> 888 </div> 889 </div> 890 891 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 hover-lift"> 892 <div class="flex items-start space-x-4"> 893 <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg"> 894 <i class="fas fa-keyboard text-green-600 dark:text-green-400 text-2xl"></i> 895 </div> 896 <div class="flex-1"> 897 <h4 class="font-bold dark:text-white mb-2">Atajos de Teclado</h4> 898 <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">GuÃa de referencia rápida</p> 899 <div class="flex items-center justify-between">
900 <span class="text-xs text-gray-500">PDF ⢠0.8 MB</span> 901 <button class="text-purple-600 hover:underline font-semibold">Descargar</button> 902 </div> 903 </div> 904 </div> 905 </div> 906 907 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 hover-lift"> 908 <div class="flex items-start space-x-4"> 909 <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-lg"> 910 <i class="fas fa-chalkboard-teacher text-purple-600 dark:text-purple-400 text-2xl"></i> 911 </div> 912 <div class="flex-1"> 913 <h4 class="font-bold dark:text-white mb-2">GuÃa para Educadores</h4> 914 <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Uso en el aula y mejores prácticas</p> 915 <div class="flex items-center justify-between"> 916 <span class="text-xs text-gray-500">PDF ⢠1.8 MB</span> 917 <button class="text-purple-600 hover:underline font-semibold">Descargar</button> 918 </div> 919 </div> 920 </div> 921 </div> 922 </div> 923 </div> 924 </section> 925 926 <!-- Contact Support --> 927 <section class="max-w-4xl mx-auto"> 928 <div class="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-900 dark:to-indigo-900 rounded-2xl p-8"> 929 <div class="text-center mb-8"> 930 <h3 class="text-3xl font-bold mb-4 dark:text-white"> 931 <i class="fas fa-headset text-purple-600 mr-3"></i> 932 ¿Necesitas Más Ayuda? 933 </h3> 934 <p class="text-lg text-gray-600 dark:text-gray-300"> 935 Nuestro equipo de soporte está listo para asistirte 936 </p> 937 </div> 938 939 <div class="grid md:grid-cols-3 gap-6 mb-8"> 940 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 text-center hover-lift"> 941 <i class="fas fa-envelope text-3xl text-blue-600 mb-4"></i> 942 <h4 class="font-bold dark:text-white mb-2">Email</h4> 943 <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Respuesta en 24 horas</p> 944 <a href="mailto:[email protected]" class="text-blue-600 hover:underline font-semibold"> 945 [email protected] 946 </a> 947 </div> 948 949 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 text-center hover-lift"> 950 <i class="fas fa-comments text-3xl text-green-600 mb-4"></i> 951 <h4 class="font-bold dark:text-white mb-2">Chat en Vivo</h4> 952 <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Lun-Vie 9:00-18:00</p> 953 <button class="text-green-600 hover:underline font-semibold"> 954 Iniciar Chat 955 </button> 956 </div> 957 958 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 text-center hover-lift"> 959 <i class="fas fa-question-circle text-3xl text-purple-600 mb-4"></i> 960 <h4 class="font-bold dark:text-white mb-2">FAQ</h4> 961 <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Respuestas inmediatas</p> 962 <a href="faq.html" class="text-purple-600 hover:underline font-semibold"> 963 Ver FAQ 964 </a> 965 </div> 966 </div> 967 968 <!-- Progress Tracking --> 969 <div class="bg-white dark:bg-gray-800 rounded-xl p-6"> 970 <h4 class="font-bold dark:text-white mb-4 text-center">Tu Progreso de Aprendizaje</h4> 971 <div class="space-y-3"> 972 <div> 973 <div class="flex justify-between text-sm mb-1">
974 <span class="dark:text-white">Primeros Pasos</span> 975 <span class="text-gray-600 dark:text-gray-400">100%</span> 976 </div> 977 <div class="progress-bar"> 978 <div class="progress-fill" style="width: 100%"></div> 979 </div> 980 </div> 981 <div> 982 <div class="flex justify-between text-sm mb-1"> 983 <span class="dark:text-white">Funcionalidades</span> 984 <span class="text-gray-600 dark:text-gray-400">75%</span> 985 </div> 986 <div class="progress-bar"> 987 <div class="progress-fill" style="width: 75%"></div> 988 </div> 989 </div> 990 <div> 991 <div class="flex justify-between text-sm mb-1"> 992 <span class="dark:text-white">Premium</span> 993 <span class="text-gray-600 dark:text-gray-400">50%</span> 994 </div> 995 <div class="progress-bar"> 996 <div class="progress-fill" style="width: 50%"></div> 997 </div> 998 </div> 999 </div> 1000 </div> 1001 </div> 1002 </section> 1003 </main> 1004 1005 <!-- Footer --> 1006 <footer class="bg-gray-100 dark:bg-gray-800 mt-20 py-12"> 1007 <div class="container mx-auto px-4"> 1008 <div class="grid md:grid-cols-4 gap-8"> 1009 <div> 1010 <h4 class="font-bold text-lg mb-4 dark:text-white">Castellano.ai</h4> 1011 <p class="text-gray-600 dark:text-gray-400">Tu asistente de escritura inteligente en español.</p> 1012 </div> 1013 <div> 1014 <h5 class="font-semibold mb-3 dark:text-white">Producto</h5> 1015 <ul class="space-y-2 text-gray-600 dark:text-gray-400"> 1016 <li><a href="/" class="hover:text-purple-600 transition-colors">CaracterÃsticas</a></li> 1017 <li><a href="/" class="hover:text-purple-600 transition-colors">Precios</a></li> 1018 <li><a href="/" class="hover:text-purple-600 transition-colors">API</a></li> 1019 </ul> 1020 </div> 1021 <div> 1022 <h5 class="font-semibold mb-3 dark:text-white">Soporte</h5> 1023 <ul class="space-y-2 text-gray-600 dark:text-gray-400"> 1024 <li><a href="centro-ayuda.html" class="hover:text-purple-600 transition-colors">Centro de ayuda</a></li> 1025 <li><a href="faq.html" class="hover:text-purple-600 transition-colors">FAQ</a></li> 1026 <li><a href="#" class="hover:text-purple-600 transition-colors">Contacto</a></li> 1027 </ul> 1028 </div> 1029 <div> 1030 <h5 class="font-semibold mb-3 dark:text-white">Legal</h5> 1031 <ul class="space-y-2 text-gray-600 dark:text-gray-400"> 1032 <li><a href="privacy-policy.html" class="hover:text-purple-600 transition-colors">Privacidad</a></li> 1033 <li><a href="terminos-condiciones.html" class="hover:text-purple-600 transition-colors">Términos</a></li> 1034 <li><a href="politicas-uso.html" class="hover:text-purple-600 transition-colors">PolÃticas</a></li> 1035 </ul> 1036 </div> 1037 </div> 1038 <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-gray-600 dark:text-gray-400"> 1039 <p>© 2025 Castellano.ai. Todos los derechos reservados.</p> 1040 </div> 1041 </div> 1042 </footer> 1043 1044
1044<script> 1045 // Dark Mode Toggle 1046 const themeToggle = document.getElementById('themeToggle'); 1047 const html = document.documentElement; 1048 1049 themeToggle.addEventListener('click', () => { 1050 html.classList.toggle('dark'); 1051 localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); 1052 }); 1053 1054 // Initialize theme 1055 if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { 1056 html.classList.add('dark'); 1057 } 1058 1059 // Category Toggle Functionality 1060 function toggleCategory(categoryId) { 1061 const content = document.getElementById(categoryId + '-content'); 1062 content.classList.toggle('expanded'); 1063 } 1064 1065 // Quick Actions 1066 function showQuickStart() { 1067 alert('GuÃa de Inicio Rápido:\n\n1. Crea tu cuenta gratuita\n2. Escribe o pega tu texto\n3. Selecciona tu paÃs\n4. Haz clic en "Corregir Texto"\n5. Revisa las sugerencias\n\n¡Listo para comenzar!'); 1068 } 1069 1070 function showTutorials() { 1071 // Scroll to tutorials section 1072 document.querySelector('section:has(.video-placeholder)').scrollIntoView({ 1073 behavior: 'smooth', 1074 block: 'start' 1075 }); 1076 } 1077 1078 function showTroubleshooting() { 1079 toggleCategory('troubleshooting'); 1080 document.getElementById('troubleshooting-content').scrollIntoView({ 1081 behavior: 'smooth', 1082 block: 'center' 1083 }); 1084 } 1085 1086 function contactSupport() { 1087 window.location.href = 'mailto:[email protected]?subject=Solicitud de Ayuda&body=Hola, necesito ayuda con:'; 1088 } 1089 1090 // Video Tutorial Functions 1091 function playTutorial(type) { 1092 const tutorials = { 1093 'intro': 'Tutorial de introducción a Castellano.ai', 1094 'premium': 'Funciones Premium explicadas', 1095 'writing-tips': 'Consejos para mejorar tu escritura' 1096 }; 1097 1098 alert(`Reproduciendo: ${tutorials[type]}\n\nEn la versión completa, aquà se abrirÃa el reproductor de video.`); 1099 } 1100 1101 // Article Functions 1102 function openArticle(articleId) { 1103 const articles = { 1104 'crear-cuenta': 'ArtÃculo: Cómo crear tu cuenta en Castellano.ai', 1105 'primer-analisis': 'ArtÃculo: Realizando tu primer análisis de texto', 1106 'configurar-pais': 'ArtÃculo: Configuración de paÃs y región', 1107 'correccion-avanzada': 'ArtÃculo: Usando la corrección avanzada de gramática', 1108 'mejora-estilo': 'ArtÃculo: Mejorando el estilo y claridad de tu texto', 1109 'traduccion': 'ArtÃculo: Cómo usar la función de traducción', 1110 // Add more articles as needed 1111 }; 1112 1113 alert(`${articles[articleId] || 'ArtÃculo no encontrado'}\n\nEn la versión completa, aquà se abrirÃa el artÃculo completo con guÃas paso a paso, capturas de pantalla y ejemplos.`); 1114 } 1115 1116 // Search Functionality 1117 const helpSearchInput = document.getElementById('helpSearchInput'); 1118 const helpSearchResults = document.getElementById('helpSearchResults'); 1119 1120 helpSearchInput.addEventListener('input', (e) => { 1121 const searchTerm = e.target.value.toLowerCase().trim(); 1122 1123 if (searchTerm === '') { 1124 helpSearchResults.textContent = ''; 1125 return; 1126 } 1127 1128 // Simple search simulation 1129 const searchResults = [ 1130 'Cómo crear tu cuenta', 1131 'Primer análisis de texto', 1132 'Configurar paÃs y región', 1133 'Corrección avanzada', 1134 'Mejora de estilo', 1135 'Función de traducción', 1136 'Actualizar a Premium', 1137 'Problemas de carga', 1138 'Documentación API' 1139 ]; 1140 1141 const matches = searchResults.filter(result => 1142 result.toLowerCase().includes(searchTerm) 1143 ); 1144 1145 if (matches.length > 0) { 1146 helpSearchResults.innerHTML = ` 1147 <div class="text-green-600 dark:text-green-400"> 1148 Se encontraron ${matches.length} resultado${matches.length !== 1 ? 's' : ''} para "${searchTerm}": 1149 <ul class="mt-2 space-y-1"> 1150 ${matches.map(match => `<li class="hover:underline cursor-pointer">⢠${match}</li>`).join('')} 1151 </ul> 1152 </div> 1153 `; 1154 } else { 1155 helpSearchResults.innerHTML = ` 1156 <div class="text-red-600 dark:text-red-400"> 1157 No se encontraron resultados para "${searchTerm}". 1158 <button onclick="contactSupport()" class="underline">Contacta nuestro soporte</button> 1159 </div> 1160 `; 1161 } 1162 }); 1163 1164 // Animate progress bars on scroll 1165 const observerOptions = { 1166 threshold: 0.5, 1167 rootMargin: '0px 0px -50px 0px' 1168 }; 1169 1170 const observer = new IntersectionObserver((entries) => {
1171 entries.forEach(entry => { 1172 if (entry.isIntersecting) { 1173 const progressBars = entry.target.querySelectorAll('.progress-fill'); 1174 progressBars.forEach(bar => { 1175 const width = bar.style.width; 1176 bar.style.width = '0%'; 1177 setTimeout(() => { 1178 bar.style.width = width; 1179 }, 200); 1180 }); 1181 } 1182 }); 1183 }, observerOptions); 1184 1185 // Observe progress sections 1186 document.querySelectorAll('.progress-bar').forEach(section => { 1187 observer.observe(section.closest('.bg-white, .bg-gray-800')); 1188 }); 1189 1190 // Download button functionality 1191 document.querySelectorAll('button').forEach(button => { 1192 if (button.textContent.includes('Descargar')) { 1193 button.addEventListener('click', (e) => { 1194 e.stopPropagation(); 1195 alert('Iniciando descarga...\n\nEn la versión completa, aquà se descargarÃa el archivo PDF/DOCX correspondiente.'); 1196 }); 1197 } 1198 }); 1199 1200 // Animate cards on scroll 1201 const cardObserver = new IntersectionObserver((entries) => { 1202 entries.forEach(entry => { 1203 if (entry.isIntersecting) { 1204 entry.target.style.opacity = '1'; 1205 entry.target.style.transform = 'translateY(0)'; 1206 } 1207 }); 1208 }, { threshold: 0.1 }); 1209 1210 document.querySelectorAll('.help-category-card, .quick-action-card').forEach(card => { 1211 card.style.opacity = '0'; 1212 card.style.transform = 'translateY(20px)'; 1213 card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; 1214 cardObserver.observe(card); 1215 }); 1216 1217 // Enhanced interactivity for help articles 1218 document.querySelectorAll('.help-article').forEach(article => { 1219 article.addEventListener('click', (e) => { 1220 e.stopPropagation(); 1221 1222 // Add visual feedback 1223 article.style.transform = 'scale(0.98)'; 1224 setTimeout(() => { 1225 article.style.transform = 'translateY(-2px)'; 1226 }, 100); 1227 1228 // Then call the open article function 1229 const articleId = article.onclick?.toString().match(/openArticle\('([^']+)'\)/)?.[1]; 1230 if (articleId) { 1231 openArticle(articleId); 1232 } 1233 }); 1234 }); 1235 </script>
1235 1236</body> 1237 1238</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.