File size: 8,039 Bytes
3b5fa40 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice - Accentify</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<section class="text-center mb-12">
<h1 class="text-4xl font-bold text-gray-800 mb-4">Accent Practice Module</h1>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Improve your pronunciation with guided exercises and real-time feedback.</p>
</section>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
<div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
<div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="mic" class="text-blue-600"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Phrase Practice</h3>
<p class="text-gray-600 mb-4">Practice common phrases with instant feedback on pronunciation.</p>
<a href="#phrase-practice" class="text-blue-600 font-medium inline-flex items-center">
Start Practicing <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
</a>
</div>
<div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
<div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="book-open" class="text-purple-600"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Conversation Scenarios</h3>
<p class="text-gray-600 mb-4">Practice real-world conversations in your target accent.</p>
<a href="#conversation" class="text-purple-600 font-medium inline-flex items-center">
Try Conversations <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
</a>
</div>
<div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="bar-chart-2" class="text-green-600"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Progress Tracking</h3>
<p class="text-gray-600 mb-4">Track your improvement over time with detailed analytics.</p>
<a href="#progress" class="text-green-600 font-medium inline-flex items-center">
View Progress <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
</a>
</div>
</div>
<section id="phrase-practice" class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto mb-12">
<h2 class="text-2xl font-semibold mb-6">Phrase Practice</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-medium mb-4">Current Phrase</h3>
<div class="bg-gray-50 rounded-lg p-6 mb-4">
<p id="current-phrase" class="text-xl font-medium mb-4">"How are you doing today?"</p>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
<div id="practice-volume-meter" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<button id="practice-start-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-medium flex items-center justify-center gap-2">
<i data-feather="mic"></i> Record Your Pronunciation
</button>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-4">Feedback</h3>
<div class="bg-gray-50 rounded-lg p-6">
<div class="flex items-center justify-between mb-4">
<span class="font-medium">Accuracy Score:</span>
<span id="accuracy-score" class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">-</span>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Target Accent</label>
<select id="practice-accent" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="american_general">American (General)</option>
<option value="british_rp">British (RP)</option>
<option value="australian_general">Australian (General)</option>
<option value="indian_general">Indian (General)</option>
</select>
</div>
<button id="play-model-btn" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 px-6 rounded-lg font-medium flex items-center justify-center gap-2 mb-2">
<i data-feather="volume-2"></i> Play Model Pronunciation
</button>
<button id="play-your-recording-btn" disabled class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 px-6 rounded-lg font-medium flex items-center justify-center gap-2">
<i data-feather="headphones"></i> Play Your Recording
</button>
</div>
</div>
</div>
</section>
<section id="progress" class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto">
<h2 class="text-2xl font-semibold mb-6">Your Progress</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-medium mb-4">Accuracy Over Time</h3>
<div class="bg-gray-50 rounded-lg p-6 h-64 flex items-center justify-center">
<p class="text-gray-500">Progress chart will appear here</p>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-4">Recent Exercises</h3>
<div class="space-y-4">
<div class="flex items-center justify-between bg-gray-50 p-4 rounded-lg">
<div>
<p class="font-medium">"Nice to meet you"</p>
<p class="text-sm text-gray-500">British RP • 2 days ago</p>
</div>
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">85%</span>
</div>
<div class="flex items-center justify-between bg-gray-50 p-4 rounded-lg">
<div>
<p class="font-medium">"Where is the station?"</p>
<p class="text-sm text-gray-500">American • 5 days ago</p>
</div>
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">72%</span>
</div>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html> |