-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpopup.html
More file actions
80 lines (80 loc) · 7.81 KB
/
popup.html
File metadata and controls
80 lines (80 loc) · 7.81 KB
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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Escape Hatch</title>
<style>
:root{
--bg:#f6f8fb;
--card:#ffffff;
--accent:#2563eb;
--muted:#64748b;
--danger:#ef4444;
}
html,body{height:100%;}
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
background: var(--bg);
padding:12px;
margin:0;
width:260px;
box-sizing:border-box;
}
.card{
background:var(--card);
border-radius:10px;
padding:12px;
box-shadow:0 6px 18px rgba(16,24,40,0.08);
}
label{display:flex;align-items:center;gap:10px;font-weight:600}
input[type="checkbox"]{width:18px;height:18px}
button{
display:inline-block;
background:var(--accent);
color:#fff;
border:0;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
font-weight:600;
box-shadow:0 6px 12px rgba(37,99,235,0.12);
}
.icon-btn{display:inline-flex;gap:8px;align-items:center}
.icon-btn svg{display:block}
.primary-btn{background:var(--accent)}
.secondary-btn{background:transparent;color:var(--accent);border:1px solid rgba(37,99,235,0.12);box-shadow:none;padding:8px 10px}
button:hover{transform:translateY(-1px)}
.small{color:var(--muted);font-size:12px;margin-top:8px}
.muted-link{color:var(--accent);text-decoration:none;font-weight:600}
.muted-link:hover{text-decoration:underline}
</style>
</head>
<body>
<div class="card">
<label><input type="checkbox" id="enabled"/> Enable replacements</label>
<div style="margin-top:10px">
<button id="apply" class="primary-btn icon-btn" aria-label="Apply defaults">
<!-- download/restore icon -->
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 3v10" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 8.5L12 12l3.5-3.5" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="btn-label">Apply defaults</span>
</button>
</div>
<div style="margin-top:10px">
<button id="openOptions" class="secondary-btn icon-btn" aria-label="Open options">
<!-- user-supplied gear SVG (fills use currentColor to inherit accent) -->
<svg width="16" height="16" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="color:var(--accent)">
<path fill="currentColor" transform="scale(2 2)" d="M232.925 58.5139L265.904 58.5375C288.25 58.5871 289.866 56.9654 294.64 78.3743L299.636 101.395C311.592 104.915 323.48 109.939 334.217 116.276C340.559 111.749 346.722 106.845 352.968 102.173C367.475 91.3195 370.663 90.5339 382.709 102.591L407.764 127.575C412.533 132.291 419.971 137.936 416.815 145.701C414.721 150.852 399.184 171.064 394.525 177.149C400.635 188.469 405.228 200.496 408.966 212.781C415.566 213.717 422.14 214.808 428.714 215.909C450.353 219.534 451.741 219.58 451.764 240.246L451.769 270.629C451.755 287.125 448.99 289.495 433.928 291.991L419.885 294.206C416.354 294.737 412.74 295.157 409.286 296.073L408.966 296.161C404.792 311.015 399.953 319.019 393.349 332.003C397.589 337.89 402.129 343.733 406.585 349.456C420.123 366.847 421.969 367.818 403.755 385.005L381.823 406.16C370.951 416.804 368.255 417.142 355.409 407.674C350.464 404.03 339.256 395.298 334.09 392.906L333.74 392.747C327.79 394.814 322.641 399.313 316.99 402.171C312.296 404.544 303.337 407.397 299.636 409.845C293.151 423.831 297.359 446.305 280.31 449.247L248.404 449.264C228.484 449.26 222.79 452.816 217.873 430.123L215.006 417.495C211.887 403.284 213.09 408.473 198.699 402.488C191.8 399.619 184.618 396.418 178.121 392.747C172.293 396.818 166.324 400.693 160.455 404.707C152.951 409.841 144.585 418.079 135.345 410.972C129.884 406.771 125.212 401.106 120.287 396.25L105.621 381.712C91.3024 367.451 92.0213 365.192 104.257 349.14L117.399 332.003C111.728 321.629 105.008 307.793 103.088 296.161C94.3952 294.887 77.3144 292.673 69.0937 290.106C57.1256 286.369 59.4945 273.814 59.494 264.042L59.3593 235.442C59.248 221.358 65.5477 220.391 77.3175 217.596C85.5373 215.645 94.5651 212.361 103.088 212.781C106.187 199.467 112.186 187.325 118.755 175.44C113.931 169.585 109.264 163.611 104.573 157.65C91.1256 140.559 92.6879 138.863 106.548 125.078L119.361 112.26C124.093 107.509 130.044 100.407 135.259 96.5585C145.182 89.2343 156.117 100.749 163.716 106.12C168.501 109.501 173.539 112.625 178.121 116.276C189.043 110.076 201.257 104.653 213.404 101.395C214.128 95.6325 215.772 89.7189 216.913 84.0084C219.095 73.081 218.806 60.1502 232.925 58.5139ZM247.399 86.0128C246.647 86.0637 245.593 85.9968 245 86.4839C241.699 95.0608 242.503 111.064 238.265 118.958C234.515 125.943 226.229 126.449 219.389 128.258C210.22 130.682 200.759 135.072 192.617 139.885C187.133 143.126 181.014 149.206 174.025 146.416C167.948 143.99 149.562 129.826 144.037 125.528C138.046 130.817 132.842 137.07 127.105 142.643C131.181 147.258 145.88 166.456 148.455 171.475C151.685 177.772 146.611 183.234 143.287 188.254C137.522 196.96 133.288 207.333 130.506 217.328C126.229 232.689 128.887 235.29 110.569 238.656C103.705 239.917 93.7051 241.394 87.1334 243.343C86.9438 250.36 86.8345 259.069 87.1334 266.021C92.4751 265.713 98.8804 267.642 104.192 268.561C126.284 272.383 124.457 269.574 130.463 291.063C132.868 299.668 136.489 308.118 140.846 315.91C150.453 333.09 154.001 329.797 141.33 346.318C136.48 352.641 131.398 359.08 127.105 365.79C132.805 371.177 138.481 376.59 144.037 382.126C150.701 377.681 167.782 365.849 174.875 363.042C181.335 360.487 185.985 365.159 191.338 368.111C200.157 372.975 209.142 377.063 218.926 379.596C225.93 381.409 233.116 381.834 237.381 388.5C241.742 395.316 243.553 421.255 248.868 422.661C251.809 423.439 259.902 423.213 263.186 423.007C269.588 421.186 270.173 394.943 275.733 387.889C279.408 383.226 286.006 382.431 291.369 380.968C301.16 378.298 310.103 374.354 318.853 369.25C337.643 358.291 335.675 359.704 351.655 370.995C356.864 374.675 362.505 378.047 367.404 382.126C372.354 376.391 378.327 371.057 383.803 365.79L372.57 350.539C360.369 334.169 359.177 335.281 370.163 316.583C375.42 307.635 379.549 298.197 382.355 288.189C387.375 270.282 388.97 271.713 406.635 268.947L424.245 266.021C424.257 258.468 424.389 250.894 424.245 243.343C417.514 242.011 410.675 241.097 403.893 240.058C385.947 237.311 386.499 237.267 382.243 220.923C379.386 209.948 375.206 199.068 369.545 189.246C366.838 184.551 362.831 179.799 364.144 173.96C365.355 168.57 381.173 148.387 385.605 142.643C379.306 136.866 373.644 130.42 367.404 124.579C363.029 128.741 343.989 143.64 339.641 145.609C332.476 148.854 326.285 142.62 320.539 139.438C313.115 135.327 305.027 131.528 296.888 129.072C288.365 126.499 276.827 126.552 273.133 116.768C270.114 108.773 269.623 95.2182 267.129 86.0128L247.399 86.0128Z"/>
<path fill="currentColor" transform="scale(2 2)" d="M251.832 176.258C295.253 175.626 331.415 207.174 333.67 251C335.837 293.096 302.687 329.982 260.562 332.003C197.618 337.595 152.287 259.531 194.07 207.261C210.111 187.195 227.219 179.009 251.832 176.258ZM251.832 204.242C223.63 207.539 202.647 231.334 206.194 260.372C209.407 286.676 234.118 306.678 260.562 303.999C304.688 299.883 322.242 244.194 287.897 216.035C279.127 208.844 263.268 202.342 251.832 204.242Z"/>
</svg>
<span>Options</span>
</button>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>