-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.html
65 lines (65 loc) · 2.08 KB
/
popup.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
<html>
<head>
<link rel="stylesheet" href="./styles.css" />
<script src="./popup.js" defer></script>
</head>
<body class="h-[422px]">
<div
class="p-6 pb-5 border-b border-light-grey border-solid flex items-center gap-4 w-[640px]"
>
<div class="rounded-[10px] p-3 border border-solid border-light-grey">
<img src="./assets/icon.png" alt="" width="24" height="24" />
</div>
<div class="flex flex-col gap-1">
<h1 class="text-strong-black font-semibold text-[18px]">
Flowstate AI
</h1>
<p class="text-greyish text-sm font-normal">
Your AI coach to stay focused in this digital age.
</p>
</div>
</div>
<form
class="px-6 pt-5 pb-8 mb-0 border-b border-solid border-light-grey flex flex-col gap-1.5"
>
<label for="goal" class="text-dark-grey text-sm font-medium">
What Is Your Goal From Watching Youtube?
</label>
<div class="relative" id="inputContainer">
<textarea
id="goal"
name="goal"
class="rounded-lg border border-solid border-light-grey w-full p-4 font-medium text-base h-[154px] disabled:bg-[#F2F2F2] disabled:text-[#BDBDBD]"
placeholder="e.g Learn about software engineering"
></textarea>
<button
id="editButton"
type="button"
class="absolute top-3.5 right-3.5 invisible"
aria-label="edit text area text"
>
<img src="./assets/editIcon.svg" alt="" />
</button>
</div>
</form>
<div class="flex items-center justify-between p-6">
<div
role="switch"
id="switch"
class="flex gap-2.5 items-center"
tabindex="0"
>
<span class="text-dark-grey text-sm font-medium">Remove Shorts</span>
<span class="switch">
<span></span>
</span>
</div>
<button
id="saveButton"
class="rounded-lg h-11 w-[74px] font-semibold text-base text-white bg-purple disabled:opacity-80"
>
Save
</button>
</div>
</body>
</html>