-
Notifications
You must be signed in to change notification settings - Fork 0
/
trial.html
143 lines (124 loc) · 5.96 KB
/
trial.html
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
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Tutor App</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
font-family: 'Inter', sans-serif;
}
.checklist ul {
list-style: none;
padding: 0;
}
.checklist li {
margin-bottom: 10px;
}
.checklist input[type="checkbox"] {
margin-right: 10px;
}
.checklist label {
cursor: pointer;
}
</style>
</head>
<body class="bg-gray-100">
<div class="max-w-md mx-auto">
<!-- Header with tabs -->
<div class="flex justify-between bg-white p-4 rounded-t-lg shadow">
<div class="font-semibold text-gray-800">Roleplay</div>
<!-- <div class="font-semibold text-gray-400">Free Talk</div> -->
</div>
<!-- Cards container -->
<div class="grid grid-cols-2 gap-2 bg-white p-4 shadow">
<!-- Over a phone call -->
<div class="flex flex-col items-center p-2">
<img src="https://placehold.co/50x50"
alt="Emoji of a woman waving hand, indicating meeting a new friend" class="mb-1">
<span class="text-xs text-center">Over a phone call</span>
<!-- <span class="text-xs bg-green-200 text-green-800 px-2 py-1 rounded-full mt-1">FREE</span> -->
</div>
<!-- Restaurant scene -->
<div class="flex flex-col items-center p-2">
<img src="https://placehold.co/50x50"
alt="Illustration of a taco, representing a scenario at a Taco Truck" class="mb-1">
<span class="text-xs text-center">At a restaurant</span>
</div>
<!-- At a Nike store -->
<div class="flex flex-col items-center p-2">
<img src="https://placehold.co/50x50" alt="Image of a sneaker, symbolizing a situation at a Nike store"
class="mb-1">
<span class="text-xs text-center">At a Nike store</span>
</div>
<!-- At a coffee shop -->
<div class="flex flex-col items-center p-2">
<img src="https://placehold.co/50x50"
alt="Picture of a coffee cup, indicating a setting at a coffee shop" class="mb-1">
<span class="text-xs text-center">At a coffee shop</span>
</div>
<!-- First day of class -->
<div class="flex flex-col items-center p-2">
<img src="https://placehold.co/50x50"
alt="Icon of a male student, denoting the First day of class scenario" class="mb-1">
<span class="text-xs text-center">First day of class</span>
</div>
<!-- Birthday at a Spanish restaurant -->
<div class="flex flex-col items-center p-2">
<img src="https://placehold.co/50x50"
alt="Icon of a paella dish, depicting a Birthday at a Spanish restaurant" class="mb-1">
<span class="text-xs text-center">Birthday at a Spanish restaurant</span>
<!-- <span class="text-xs bg-red-200 text-red-800 px-2 py-1 rounded-full mt-1">1</span> -->
</div>
</div>
<!-- Bottom Navigation
<div class="flex justify-between bg-white p-4 rounded-b-lg mt-2 shadow">
<i class="fas fa-home fa-lg text-gray-800"></i>
<i class="fas fa-book-open fa-lg text-gray-400"></i>
<i class="fas fa-save fa-lg text-gray-400"></i>
<i class="fas fa-trophy fa-lg text-gray-400"></i>
<i class="fas fa-user fa-lg text-gray-400"></i>
</div> -->
</div>
<!-- Right Side Content -->
<div class="max-w-md mx-auto mt-8">
<div class="bg-white p-4 rounded-lg shadow">
<h2 class="font-semibold text-lg text-gray-800">Over a phone call</h2>
<div class="mt-4">
<h3 class="text-sm font-semibold text-gray-800">Scenario</h3>
<p class="text-sm text-gray-600 mt-1">You are calling your friend in Chennai, curious about their
well-being, work life, and upcoming weekend getaway plans.</p>
</div>
<div class="mt-4 checklist">
<h3 class="text-sm font-semibold text-gray-800">Objectives</h3>
<ul class="list-disc list-inside text-sm text-gray-600 mt-1" id="checklistItems">
<li><input type="checkbox" id="item1"><label for="item1">Ask how is your friend doing</label></li>
<li><input type="checkbox" id="item2"><label for="item2">Ask how is work pressure</label></li>
<li><input type="checkbox" id="item3"><label for="item3">Ask about his holiday plans for the
weekend</label></li>
</ul>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const checklist = document.getElementById('checklistItems');
checklist.addEventListener('change', (event) => {
if (event.target.tagName === 'INPUT' && event.target.type === 'checkbox') {
const label = event.target.nextElementSibling;
if (event.target.checked) {
label.style.textDecoration = 'line-through';
label.style.color = '#999';
} else {
label.style.textDecoration = 'none';
label.style.color = '#000';
}
}
});
});
</script>
</body>
</html>