Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Clases de Chino - Guiones TikTok</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| background-color: black; | |
| } | |
| canvas { | |
| display: block; | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| <script> | |
| const slides = [ | |
| `Hola, soy Lofty, tu profesor de chino. | |
| Hoy aprenderás tus tres primeras palabras en chino. | |
| 1️⃣ Hola → 你好 (Nǐ hǎo) | |
| 2️⃣ Gracias → 谢谢 (Xièxiè) | |
| 3️⃣ Adiós → 再见 (Zàijiàn) | |
| ¡Repítelas conmigo y comenta cuál fue tu favorita!`, | |
| `¿Sabías que la pronunciación del chino es muy diferente del español? | |
| Hoy te enseño un truco para sonar como un nativo. | |
| 🗣 La clave está en los tonos: | |
| 📌 妈 (Mā) → "mamá" (tono plano) | |
| 📌 马 (Mǎ) → "caballo" (tono bajando y subiendo) | |
| Si te equivocas en el tono... ¡podrías llamar a tu mamá "caballo"! 🐴😂 | |
| 🎯 Aprende más conmigo y sorprende a todos hablando chino.`, | |
| `Contemos juntos del 1 al 5 en chino. ¡Es súper fácil! | |
| 1️⃣ 一 (Yī) - Uno | |
| 2️⃣ 二 (Èr) - Dos | |
| 3️⃣ 三 (Sān) - Tres | |
| 4️⃣ 四 (Sì) - Cuatro | |
| 5️⃣ 五 (Wǔ) - Cinco | |
| 📢 Tip: Los números en chino son muy fáciles de aprender porque siguen un patrón lógico. | |
| 👉 Dale like si te gustó y comenta qué número te pareció más difícil.`, | |
| `¿Te atreves a intentar este trabalenguas en chino? 😏 | |
| Dilo conmigo lentamente: | |
| **四是四，十是十，十四是十四，四十是四十。** | |
| Traducción: "Cuatro es cuatro, diez es diez, catorce es catorce, cuarenta es cuarenta." | |
| 🎤 ¡A ver si puedes decirlo rápido sin equivocarte! 😆 | |
| 💬 Comenta si lograste hacerlo o si quieres más trabalenguas.` | |
| ]; | |
| const canvas = document.getElementById("canvas"); | |
| const ctx = canvas.getContext("2d"); | |
| let currentSlide = 0; | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| drawSlide(); | |
| } | |
| function drawSlide() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = "white"; | |
| ctx.textAlign = "center"; | |
| let text = slides[currentSlide].split("\n"); | |
| let fontSize = Math.min(canvas.width / 15, canvas.height / text.length); | |
| ctx.font = `${fontSize}px Arial`; | |
| let startY = (canvas.height - (text.length * fontSize * 1.2)) / 2; | |
| text.forEach((line, index) => { | |
| ctx.fillText(line.trim(), canvas.width / 2, startY + index * fontSize * 1.2); | |
| }); | |
| } | |
| function nextSlide() { | |
| currentSlide = (currentSlide + 1) % slides.length; | |
| drawSlide(); | |
| } | |
| window.addEventListener("resize", resizeCanvas); | |
| canvas.addEventListener("click", nextSlide); | |
| resizeCanvas(); | |
| </script> | |
| </body> | |
| </html> |