Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LangPal - Language Practice 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> | |
| /* Custom CSS for calendar dots */ | |
| .calendar-day { | |
| position: relative; | |
| } | |
| .calendar-day.practiced::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 2px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background-color: #3b82f6; | |
| } | |
| /* Animation for conversation bubbles */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .conversation-bubble { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 5px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- App Container --> | |
| <div class="max-w-md mx-auto bg-white min-h-screen flex flex-col overflow-hidden"> | |
| <!-- Screen 1: Home --> | |
| <div id="home-screen" class="flex-1 flex flex-col"> | |
| <!-- Header --> | |
| <div class="p-4 flex justify-between items-start"> | |
| <div> | |
| <h1 class="text-2xl font-bold">Hi, LP</h1> | |
| <p class="text-gray-500">How's your day?</p> | |
| </div> | |
| <div class="flex items-center bg-blue-100 rounded-full px-3 py-1"> | |
| <i class="fas fa-fire text-orange-500 mr-2"></i> | |
| <span class="font-semibold">7</span> | |
| <span class="text-gray-600 ml-1">/30</span> | |
| </div> | |
| </div> | |
| <!-- Calendar --> | |
| <div class="p-4 bg-white rounded-lg shadow mx-4 mt-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="font-semibold">November 2023</h2> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="p-1 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1 text-center"> | |
| <div class="text-gray-400 text-sm font-medium py-1">S</div> | |
| <div class="text-gray-400 text-sm font-medium py-1">M</div> | |
| <div class="text-gray-400 text-sm font-medium py-1">T</div> | |
| <div class="text-gray-400 text-sm font-medium py-1">W</div> | |
| <div class="text-gray-400 text-sm font-medium py-1">T</div> | |
| <div class="text-gray-400 text-sm font-medium py-1">F</div> | |
| <div class="text-gray-400 text-sm font-medium py-1">S</div> | |
| <!-- Calendar days --> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2 practiced">1</div> | |
| <div class="calendar-day py-2 practiced">2</div> | |
| <div class="calendar-day py-2 practiced">3</div> | |
| <div class="calendar-day py-2">4</div> | |
| <div class="calendar-day py-2 practiced">5</div> | |
| <div class="calendar-day py-2">6</div> | |
| <div class="calendar-day py-2 practiced">7</div> | |
| <div class="calendar-day py-2">8</div> | |
| <div class="calendar-day py-2">9</div> | |
| <div class="calendar-day py-2 practiced">10</div> | |
| <div class="calendar-day py-2 practiced">11</div> | |
| <div class="calendar-day py-2">12</div> | |
| <div class="calendar-day py-2">13</div> | |
| <div class="calendar-day py-2 practiced">14</div> | |
| <div class="calendar-day py-2">15</div> | |
| <div class="calendar-day py-2">16</div> | |
| <div class="calendar-day py-2">17</div> | |
| <div class="calendar-day py-2 practiced">18</div> | |
| <div class="calendar-day py-2">19</div> | |
| <div class="calendar-day py-2">20</div> | |
| <div class="calendar-day py-2">21</div> | |
| <div class="calendar-day py-2">22</div> | |
| <div class="calendar-day py-2">23</div> | |
| <div class="calendar-day py-2">24</div> | |
| <div class="calendar-day py-2">25</div> | |
| <div class="calendar-day py-2">26</div> | |
| <div class="calendar-day py-2">27</div> | |
| <div class="calendar-day py-2">28</div> | |
| <div class="calendar-day py-2">29</div> | |
| <div class="calendar-day py-2">30</div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| <div class="calendar-day py-2"></div> | |
| </div> | |
| </div> | |
| <!-- Daily Challenge --> | |
| <div class="p-4 mt-4 mx-4 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow text-white"> | |
| <h3 class="font-bold text-lg mb-2">Daily Challenge</h3> | |
| <p class="mb-4">Complete a 5-minute conversation practice</p> | |
| <button class="bg-white text-blue-600 font-semibold px-4 py-2 rounded-full"> | |
| Start Now | |
| </button> | |
| </div> | |
| <!-- Progress Stats --> | |
| <div class="p-4 mt-4 mx-4 bg-white rounded-lg shadow"> | |
| <h3 class="font-bold text-lg mb-2">Your Progress</h3> | |
| <div class="flex justify-between text-center"> | |
| <div> | |
| <div class="text-2xl font-bold text-blue-600">12</div> | |
| <div class="text-gray-500 text-sm">Conversations</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-blue-600">87%</div> | |
| <div class="text-gray-500 text-sm">Accuracy</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-blue-600">5:32</div> | |
| <div class="text-gray-500 text-sm">Avg. time</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Screen 2: Conversations --> | |
| <div id="conversations-screen" class="flex-1 flex flex-col hidden"> | |
| <!-- Header --> | |
| <div class="p-4 border-b"> | |
| <h1 class="text-2xl font-bold">Conversations</h1> | |
| <div class="flex mt-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full mr-2 text-sm">All</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full mr-2 text-sm">Travel</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full mr-2 text-sm">Business</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Social</button> | |
| </div> | |
| </div> | |
| <!-- Conversation List --> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4 border-b flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-utensils text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">At the Restaurant</h3> | |
| <p class="text-gray-500 text-sm">Ordering food and drinks</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b flex items-center"> | |
| <div class="bg-green-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-hotel text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">Hotel Check-in</h3> | |
| <p class="text-gray-500 text-sm">Checking into a hotel</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b flex items-center"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-briefcase text-purple-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">Job Interview</h3> | |
| <p class="text-gray-500 text-sm">Common interview questions</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b flex items-center"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-shopping-bag text-yellow-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">Shopping</h3> | |
| <p class="text-gray-500 text-sm">Asking about prices and sizes</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b flex items-center"> | |
| <div class="bg-red-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-plane text-red-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">Airport</h3> | |
| <p class="text-gray-500 text-sm">Checking in and boarding</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Practice Modal --> | |
| <div id="practice-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg w-full mx-4 max-h-[80vh] overflow-hidden"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h2 class="font-bold text-lg">At the Restaurant</h2> | |
| <button onclick="hideModal('practice-modal')" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold mb-2">Choose your role:</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <button class="flex-1 bg-blue-100 text-blue-600 py-2 rounded-lg font-medium"> | |
| Customer | |
| </button> | |
| <button class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-lg font-medium"> | |
| Waiter | |
| </button> | |
| </div> | |
| <h3 class="font-semibold mb-2">Display mode:</h3> | |
| <div class="flex space-x-4"> | |
| <button class="flex-1 bg-blue-100 text-blue-600 py-2 rounded-lg font-medium"> | |
| Full Script | |
| </button> | |
| <button class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-lg font-medium"> | |
| Line by Line | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t"> | |
| <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold"> | |
| Start Practice | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Conversation Practice Screen --> | |
| <div id="conversation-practice" class="fixed inset-0 bg-white flex flex-col hidden"> | |
| <!-- Header --> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <button onclick="hideModal('conversation-practice')" class="text-blue-600"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="font-bold">At the Restaurant</h2> | |
| <div class="w-6"></div> <!-- Spacer --> | |
| </div> | |
| <!-- Conversation Display --> | |
| <div class="flex-1 p-4 overflow-y-auto"> | |
| <div class="mb-6"> | |
| <div class="text-center text-gray-500 text-sm mb-2">You are: <span class="font-semibold text-blue-600">Customer</span></div> | |
| <div class="flex justify-end mb-2"> | |
| <button class="text-blue-600 text-sm font-medium"> | |
| <i class="fas fa-microphone mr-1"></i> Record | |
| </button> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Conversation bubbles --> | |
| <div class="conversation-bubble bg-blue-100 p-3 rounded-lg max-w-[80%] ml-auto"> | |
| <div class="font-semibold text-blue-800 mb-1">You (Customer)</div> | |
| <p>I'd like to book a table for two, please.</p> | |
| </div> | |
| <div class="conversation-bubble bg-gray-200 p-3 rounded-lg max-w-[80%]"> | |
| <div class="font-semibold text-gray-700 mb-1">Waiter</div> | |
| <p>Certainly. What time would you like to book for?</p> | |
| </div> | |
| <div class="conversation-bubble bg-blue-100 p-3 rounded-lg max-w-[80%] ml-auto"> | |
| <div class="font-semibold text-blue-800 mb-1">You (Customer)</div> | |
| <p>7:30 pm would be perfect.</p> | |
| </div> | |
| <div class="conversation-bubble bg-gray-200 p-3 rounded-lg max-w-[80%]"> | |
| <div class="font-semibold text-gray-700 mb-1">Waiter</div> | |
| <p>And would you prefer indoor or outdoor seating?</p> | |
| </div> | |
| <div class="conversation-bubble bg-blue-100 p-3 rounded-lg max-w-[80%] ml-auto"> | |
| <div class="font-semibold text-blue-800 mb-1">You (Customer)</div> | |
| <p>Outdoor seating would be lovely, if possible.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="p-4 border-t flex justify-between"> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-volume-up text-xl"></i> | |
| </button> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <button class="bg-blue-600 text-white p-3 rounded-full"> | |
| <i class="fas fa-microphone text-xl"></i> | |
| </button> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-arrow-right text-xl"></i> | |
| </button> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-cog text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Screen 3: Listening Practice --> | |
| <div id="listening-screen" class="flex-1 flex flex-col hidden"> | |
| <!-- Header --> | |
| <div class="p-4 border-b"> | |
| <h1 class="text-2xl font-bold">Listening Practice</h1> | |
| <div class="flex mt-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full mr-2 text-sm">All</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full mr-2 text-sm">Beginner</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full mr-2 text-sm">Intermediate</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Advanced</button> | |
| </div> | |
| </div> | |
| <!-- Listening Exercises --> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4 border-b"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-headphones text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">Coffee Shop Conversation</h3> | |
| <p class="text-gray-500 text-sm">Ordering coffee and snacks</p> | |
| <div class="flex mt-2"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs mr-2">Beginner</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">2:45</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-3 space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm"> | |
| <i class="fas fa-play mr-1"></i> Listen | |
| </button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm"> | |
| <i class="fas fa-pencil-alt mr-1"></i> Dictation | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-headphones text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">Job Interview</h3> | |
| <p class="text-gray-500 text-sm">Common questions and answers</p> | |
| <div class="flex mt-2"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs mr-2">Intermediate</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">4:12</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-3 space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm"> | |
| <i class="fas fa-play mr-1"></i> Listen | |
| </button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm"> | |
| <i class="fas fa-pencil-alt mr-1"></i> Dictation | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-headphones text-purple-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">News Report</h3> | |
| <p class="text-gray-500 text-sm">Daily news highlights</p> | |
| <div class="flex mt-2"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs mr-2">Advanced</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">3:28</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-3 space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm"> | |
| <i class="fas fa-play mr-1"></i> Listen | |
| </button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm"> | |
| <i class="fas fa-pencil-alt mr-1"></i> Dictation | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-headphones text-yellow-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">Airport Announcement</h3> | |
| <p class="text-gray-500 text-sm">Flight information</p> | |
| <div class="flex mt-2"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs mr-2">Beginner</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">1:56</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-3 space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm"> | |
| <i class="fas fa-play mr-1"></i> Listen | |
| </button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm"> | |
| <i class="fas fa-pencil-alt mr-1"></i> Dictation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dictation Modal --> | |
| <div id="dictation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg w-full mx-4 max-h-[80vh] overflow-hidden"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h2 class="font-bold text-lg">Dictation Practice</h2> | |
| <button onclick="hideModal('dictation-modal')" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 overflow-y-auto" style="max-height: 60vh;"> | |
| <div class="mb-4"> | |
| <div class="flex justify-center mb-4"> | |
| <button class="bg-blue-600 text-white p-3 rounded-full"> | |
| <i class="fas fa-play text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="text-center text-gray-500 mb-2"> | |
| Listen to the audio and type what you hear | |
| </div> | |
| <div class="text-center text-sm text-gray-400"> | |
| Segment 1/5 • 0:12 - 0:24 | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <textarea class="w-full p-3 border rounded-lg h-32" placeholder="Type what you hear here..."></textarea> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg"> | |
| <i class="fas fa-arrow-left mr-2"></i> Previous | |
| </button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg"> | |
| Check Answer | |
| </button> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg"> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Screen 4: Settings --> | |
| <div id="settings-screen" class="flex-1 flex flex-col hidden"> | |
| <!-- Header --> | |
| <div class="p-4 border-b"> | |
| <h1 class="text-2xl font-bold">Settings</h1> | |
| </div> | |
| <!-- Settings List --> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4 border-b"> | |
| <h2 class="font-semibold text-gray-500 mb-2">ACCOUNT</h2> | |
| <div class="flex items-center py-2"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">User Profile</h3> | |
| <p class="text-gray-500 text-sm">Update your personal information</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center py-2"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-bell text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Notifications</h3> | |
| <p class="text-gray-500 text-sm">Manage notification preferences</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b"> | |
| <h2 class="font-semibold text-gray-500 mb-2">APP SETTINGS</h2> | |
| <div class="flex items-center py-2"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-language text-purple-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Language</h3> | |
| <p class="text-gray-500 text-sm">English (US)</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center py-2"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-moon text-yellow-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Dark Mode</h3> | |
| <p class="text-gray-500 text-sm">Off</p> | |
| </div> | |
| <div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="flex items-center py-2"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-volume-up text-red-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Speech Speed</h3> | |
| <p class="text-gray-500 text-sm">Normal</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b"> | |
| <h2 class="font-semibold text-gray-500 mb-2">SUPPORT</h2> | |
| <div class="flex items-center py-2"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-question-circle text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Help Center</h3> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center py-2"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-envelope text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Contact Us</h3> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center py-2"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-star text-purple-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Rate the App</h3> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <button class="w-full py-3 border border-gray-300 rounded-lg font-medium text-gray-700"> | |
| Sign Out | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <div class="border-t flex justify-around items-center py-2 bg-white"> | |
| <button onclick="showScreen('home-screen')" class="flex flex-col items-center p-2 text-blue-600"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </button> | |
| <button onclick="showScreen('conversations-screen')" class="flex flex-col items-center p-2 text-gray-500"> | |
| <i class="fas fa-comments text-xl"></i> | |
| <span class="text-xs mt-1">Conversations</span> | |
| </button> | |
| <button onclick="showScreen('listening-screen')" class="flex flex-col items-center p-2 text-gray-500"> | |
| <i class="fas fa-headphones text-xl"></i> | |
| <span class="text-xs mt-1">Listening</span> | |
| </button> | |
| <button onclick="showScreen('settings-screen')" class="flex flex-col items-center p-2 text-gray-500"> | |
| <i class="fas fa-cog text-xl"></i> | |
| <span class="text-xs mt-1">Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Function to show a specific screen and hide others | |
| function showScreen(screenId) { | |
| // Hide all screens | |
| document.querySelectorAll('[id$="-screen"]').forEach(screen => { | |
| screen.classList.add('hidden'); | |
| }); | |
| // Show the selected screen | |
| document.getElementById(screenId).classList.remove('hidden'); | |
| // Update bottom navigation active state | |
| const navButtons = document.querySelectorAll('[onclick^="showScreen"]'); | |
| navButtons.forEach(button => { | |
| if (button.getAttribute('onclick').includes(screenId)) { | |
| button.classList.remove('text-gray-500'); | |
| button.classList.add('text-blue-600'); | |
| } else { | |
| button.classList.remove('text-blue-600'); | |
| button.classList.add('text-gray-500'); | |
| } | |
| }); | |
| // Special case for conversation practice modal | |
| if (screenId === 'conversations-screen') { | |
| // Add click handlers to conversation items | |
| document.querySelectorAll('#conversations-screen .border-b.flex.items-center').forEach(item => { | |
| item.addEventListener('click', function() { | |
| document.getElementById('practice-modal').classList.remove('hidden'); | |
| }); | |
| }); | |
| } | |
| } | |
| // Function to show a modal | |
| function showModal(modalId) { | |
| document.getElementById(modalId).classList.remove('hidden'); | |
| } | |
| // Function to hide a modal | |
| function hideModal(modalId) { | |
| document.getElementById(modalId).classList.add('hidden'); | |
| } | |
| // Initialize the app with home screen visible | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showScreen('home-screen'); | |
| // Add event listeners for practice modal buttons | |
| document.querySelector('#practice-modal button.bg-blue-600').addEventListener('click', function() { | |
| hideModal('practice-modal'); | |
| document.getElementById('conversation-practice').classList.remove('hidden'); | |
| }); | |
| // Add event listeners for dictation buttons | |
| document.querySelectorAll('#listening-screen button.bg-blue-100').forEach(button => { | |
| button.addEventListener('click', function() { | |
| showModal('dictation-modal'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=kubodimo0/langpal-practice" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |