/
popup.html
145 lines (143 loc) · 3.9 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
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
144
<!doctype html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Single Speak - How to Submit</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 300;
color: #222;
width: 360px;
padding: 1rem;
}
h1 {
font-size: 1.25em;
font-weight: 300;
}
label, input {
display: block;
width: 100%;
font-size: 1rem;
}
label {
margin-bottom: 1rem;
}
input {
box-sizing: border-box;
padding: 0.5rem;
}
input.phrase-pair-submit {
background: #ffe000;
color: #000;
font-weight: 700;
border-radius: 5px;
border: none;
transition: all 300ms ease-in-out;
}
input.phrase-pair-submit:hover {
background: #efefef;
cursor: pointer;
}
.tabs-container {
list-style: none;
margin: 0;
padding: 0 0 6px;
border-bottom: 1px solid #484848;
}
.tab-content {
display: none;
}
.tab-content[data-tab-status="active"] {
display: block;
}
.tab {
color: #484848;
display: inline-block;
margin: 2px 10px 2px 0;
text-decoration: underline;
cursor: pointer;
}
.tab:hover {
color: #ccc;
transition: color 300ms ease-in-out;
}
.tab[data-tab-status="active"] {
color: #484848;
cursor: auto;
font-weight: 700;
text-decoration: none;
}
th, td {
border-bottom: 1px solid black;
padding: 3px;
text-align: left;
}
td {
font-size: 12px;
}
.phrase-pairs-list-table td span {
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
.phrase-pairs-list-table td span:hover {
color: #ccc;
transition: all 300ms ease-in-out;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
</head>
<body>
<h1><img src="icon.png" alt="Single Speak logo" /><br /> Single Speak</h1>
<ul class="js-tabs-container tabs-container">
<li class="js-tab tab" data-tab-target="phrase-pairs-list" data-tab-status="active">
Manage phrase pairs
</li>
<li class="js-tab tab" data-tab-target="phrase-pairs-form">
Add a phrase pair
</li>
</ul>
<section class="js-tab-content tab-content" data-tab="phrase-pairs-list" data-tab-status="active">
<h2>All phrase pairs:</h2>
<table class="phrase-pairs-list-table">
<thead>
<tr>
<th>Euphemism</th>
<th>Replacememt</th>
<th>Action</th>
</tr>
</thead>
<tbody class="js-phrase-pairs-list-table-body">
</tbody>
</table>
</section>
<section class="js-tab-content tab-content" data-tab="phrase-pairs-form">
<h2>Add a phrase pair to swap:</h2>
<form class="js-phrase-pair-form">
<p>
<label for="cut">
Euphemism (i.e. <em>alt-right</em>):
<input class="js-cut-field" name="cut" type="text" required />
</label>
<label for="paste">
Replacement (i.e. <em>white supremacist right</em>):
<input class="js-paste-field" name="paste" type="text" required />
</label>
</p>
<p><input class="phrase-pair-submit" type="submit" value="Add new pair" /></p>
</form>
</section>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>