Spaces:
Running
Running
| <html><head><base href="https://websim.ai/polyglotsuperpowers" /><title>Polyglot Superpowers - Universal Translation Hub</title><style> | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f0f8ff; | |
| } | |
| h1, h2 { | |
| color: #2c3e50; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 2.5em; | |
| margin-bottom: 20px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .container { | |
| background-color: #ffffff; | |
| border-radius: 15px; | |
| padding: 30px; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| textarea, select { | |
| width: 100%; | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| border: 1px solid #bdc3c7; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| } | |
| button { | |
| background-color: #3498db; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| transition: background-color 0.3s, transform 0.1s; | |
| } | |
| button:hover { | |
| background-color: #2980b9; | |
| transform: scale(1.05); | |
| } | |
| #output { | |
| margin-top: 20px; | |
| padding: 20px; | |
| background-color: #f9f9f9; | |
| border-left: 5px solid #3498db; | |
| border-radius: 5px; | |
| font-style: italic; | |
| } | |
| .footer { | |
| margin-top: 30px; | |
| text-align: center; | |
| font-size: 0.9em; | |
| color: #7f8c8d; | |
| } | |
| #inputText, #outputText { | |
| min-height: 100px; | |
| } | |
| .language-icon { | |
| font-size: 24px; | |
| margin-right: 10px; | |
| } | |
| </style></head><body> | |
| <div class="container"> | |
| <h1><span class="language-icon">🌍</span>Polyglot Superpowers</h1> | |
| <p>Welcome to Polyglot Superpowers, your ultimate translation hub! Break down language barriers and communicate across cultures with our advanced AI-powered translation system. Simply input your text, select your languages, and watch as we transform your words into any language in the world!</p> | |
| <h2>Enter Your Text:</h2> | |
| <textarea id="inputText" placeholder="Type or paste your text here..."></textarea> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 20px;"> | |
| <div style="width: 48%;"> | |
| <h2>From Language:</h2> | |
| <select id="fromLang"> | |
| <option value="auto">Auto-detect</option> | |
| <option value="en">English</option> | |
| <option value="es">Spanish</option> | |
| <option value="fr">French</option> | |
| <option value="de">German</option> | |
| <option value="it">Italian</option> | |
| <option value="ja">Japanese</option> | |
| <option value="ko">Korean</option> | |
| <option value="zh">Chinese</option> | |
| <option value="ru">Russian</option> | |
| <option value="ar">Arabic</option> | |
| </select> | |
| </div> | |
| <div style="width: 48%;"> | |
| <h2>To Language:</h2> | |
| <select id="toLang"> | |
| <option value="en">English</option> | |
| <option value="es">Spanish</option> | |
| <option value="fr">French</option> | |
| <option value="de">German</option> | |
| <option value="it">Italian</option> | |
| <option value="ja">Japanese</option> | |
| <option value="ko">Korean</option> | |
| <option value="zh">Chinese</option> | |
| <option value="ru">Russian</option> | |
| <option value="ar">Arabic</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button onclick="translateText()">Translate</button> | |
| <h2>Translation:</h2> | |
| <textarea id="outputText" readonly></textarea> | |
| <h2>Why Choose Polyglot Superpowers?</h2> | |
| <ul> | |
| <li>Instant translation between 100+ languages</li> | |
| <li>Advanced AI for context-aware translations</li> | |
| <li>Preserve tone and idioms across languages</li> | |
| <li>Learn pronunciations with our audio feature</li> | |
| <li>Available on web and mobile for on-the-go translations</li> | |
| </ul> | |
| </div> | |
| <div class="footer"> | |
| <p>© 2023 Polyglot Superpowers | <a href="https://websim.ai/polyglotsuperpowers/about">About</a> | <a href="https://websim.ai/polyglotsuperpowers/contact">Contact</a></p> | |
| </div> | |
| <script> | |
| function translateText() { | |
| const inputText = document.getElementById('inputText').value; | |
| const fromLang = document.getElementById('fromLang').value; | |
| const toLang = document.getElementById('toLang').value; | |
| const outputText = document.getElementById('outputText'); | |
| if (!inputText) { | |
| outputText.value = "Please enter some text to translate."; | |
| return; | |
| } | |
| // Simulating translation process | |
| outputText.value = "Translating..."; | |
| setTimeout(() => { | |
| let translation = simulateTranslation(inputText, fromLang, toLang); | |
| outputText.value = translation; | |
| }, 1500); | |
| } | |
| function simulateTranslation(text, from, to) { | |
| // This is a mock translation function | |
| // In a real-world scenario, this would call an actual translation API | |
| const translations = { | |
| "en": { | |
| "es": "Hola Mundo", | |
| "fr": "Bonjour le Monde", | |
| "de": "Hallo Welt", | |
| "it": "Ciao Mondo", | |
| "ja": "こんにちは世界", | |
| "ko": "안녕하세요 세계", | |
| "zh": "你好世界", | |
| "ru": "Привет, мир", | |
| "ar": "مرحبا بالعالم" | |
| } | |
| }; | |
| if (from === "auto") { | |
| // Simulating language detection | |
| from = "en"; | |
| } | |
| if (from === "en" && translations["en"][to]) { | |
| return translations["en"][to]; | |
| } else { | |
| // If we don't have a pre-defined translation, return a message | |
| return `Translation from ${from} to ${to}: ${text}\n(This is a simulated translation)`; | |
| } | |
| } | |
| </script> | |
| </body></html> |