import React, { useState } from 'react'; import { View, Text, StyleSheet, I18nManager, Button } from 'react-native'; import './i18n'; import { useTranslation } from 'react-i18next'; import SpinWheel from './components/SpinWheel'; import FakeForm from './components/FakeForm'; import Lesson from './components/Lesson'; export default function App() { const [spun, setSpun] = useState(false); const { t, i18n } = useTranslation(); return ( <View style={styles.container}> <Text style={styles.title}>🎯 {t('appTitle')}</Text> <Text style={styles.subtitle}>{t('appSubtitle')}</Text> <SpinWheel onFinish={() => setSpun(true)} /> {spun && ( <> <FakeForm /> <Lesson /> </> )} <View style={styles.langButtons}> <Button title="🇺🇸 English" onPress={() => i18n.changeLanguage('en')} /> <Button title="🇪🇸 Español" onPress={() => i18n.changeLanguage('es')} /> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, justifyContent: 'center', backgroundColor: '#f8f8ff' }, title: { fontSize: 28, fontWeight: 'bold', textAlign: 'center', marginBottom: 10 }, subtitle: { fontSize: 18, textAlign: 'center', marginBottom: 20 }, langButtons: { flexDirection: 'row', justifyContent: 'space-around', marginTop: 30 } }); - Initial Deployment
09196f0
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Spin Wheel App</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .wheel-container { | |
| position: relative; | |
| width: 300px; | |
| height: 300px; | |
| margin: 0 auto; | |
| } | |
| .wheel { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99); | |
| transform: rotate(0deg); | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); | |
| border: 8px solid #fff; | |
| } | |
| .wheel-section { | |
| position: absolute; | |
| width: 50%; | |
| height: 50%; | |
| transform-origin: bottom right; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| color: white; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); | |
| } | |
| .wheel-pointer { | |
| position: absolute; | |
| top: -20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 0; | |
| height: 0; | |
| border-left: 20px solid transparent; | |
| border-right: 20px solid transparent; | |
| border-top: 40px solid #ef4444; | |
| z-index: 10; | |
| } | |
| .spin-btn { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| cursor: pointer; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | |
| z-index: 20; | |
| border: none; | |
| outline: none; | |
| } | |
| .form-input { | |
| transition: all 0.3s; | |
| } | |
| .form-input:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| @media (max-width: 640px) { | |
| .wheel-container { | |
| width: 250px; | |
| height: 250px; | |
| } | |
| .wheel-section { | |
| font-size: 0.8rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex items-center justify-center p-4"> | |
| <div class="max-w-md w-full bg-white rounded-xl shadow-lg p-6"> | |
| <h1 class="text-3xl font-bold text-center mb-2">🎯 Spin to Win</h1> | |
| <p class="text-lg text-gray-600 text-center mb-6">Spin the wheel to get your prize!</p> | |
| <div class="wheel-container mb-8"> | |
| <div class="wheel-pointer"></div> | |
| <div class="wheel" id="wheel"> | |
| <!-- Wheel sections will be added by JavaScript --> | |
| </div> | |
| <button class="spin-btn" id="spinBtn"> | |
| <i class="fas fa-sync-alt text-xl text-blue-500"></i> | |
| </button> | |
| </div> | |
| <div id="contentArea" class="hidden"> | |
| <div class="fade-in mb-6"> | |
| <h2 class="text-xl font-semibold mb-4">Claim Your Prize</h2> | |
| <form class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" class="form-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" class="form-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200">Submit</button> | |
| </form> | |
| </div> | |
| <div class="fade-in bg-blue-50 p-4 rounded-lg"> | |
| <h3 class="text-lg font-medium text-blue-800 mb-2">Today's Lesson</h3> | |
| <p class="text-blue-700">Congratulations! You've won a special discount. Remember that persistence is key to success. Keep spinning and keep winning!</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-around mt-8"> | |
| <button id="langEn" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition duration-200 flex items-center"> | |
| <span class="mr-2">🇺🇸</span> English | |
| </button> | |
| <button id="langEs" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition duration-200 flex items-center"> | |
| <span class="mr-2">🇪🇸</span> Español | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |