-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
127 lines (127 loc) · 3.79 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Popup</title>
<style>
button:hover {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
opacity: 0.8;
}
button:active {
opacity: 1;
}
#resetButton:hover {
text-decoration: underline;
box-shadow: none;
}
</style>
</head>
<body style="padding: 10px; font-family: sans-serif; width: 300px">
<div
style="
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
"
>
<div id="larry" style="text-align: center; margin-right: 10px">
<svg
width="28"
height="23"
viewBox="0 0 28 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24.924 5.76014C24.9408 6.00384 24.9408 6.24752 24.9408 6.49346C24.9408 13.9872 19.236 22.6297 8.80443 22.6297V22.6253C5.72294 22.6297 2.70544 21.7471 0.111328 20.0828C0.559402 20.1368 1.00972 20.1636 1.46117 20.1648C4.01486 20.167 6.49555 19.3101 8.50459 17.7324C6.0778 17.6863 3.94973 16.1041 3.20629 13.794C4.05641 13.958 4.93235 13.9243 5.76673 13.6963C3.12096 13.1618 1.21748 10.8372 1.21748 8.13752C1.21748 8.11281 1.21748 8.08923 1.21748 8.06566C2.00583 8.50475 2.88849 8.74843 3.79138 8.77538C1.29946 7.10998 0.531328 3.79491 2.03615 1.20303C4.9155 4.74608 9.16379 6.89998 13.7243 7.12796C13.2672 5.15822 13.8916 3.09416 15.365 1.7095C17.6492 -0.437664 21.2416 -0.327612 23.3887 1.95544C24.6589 1.70501 25.8763 1.23897 26.9902 0.578645C26.5669 1.89143 25.6807 3.00656 24.4971 3.71517C25.6212 3.58265 26.7196 3.2817 27.7539 2.82239C26.9925 3.96335 26.0335 4.95719 24.924 5.76014Z"
fill="#1D9BF0"
/>
</svg>
</div>
<h1 style="text-align: center">Bring back Larry</h1>
</div>
<p style="margin-top: 18px; color: #999">
<span style="color: #000; font-weight: bold">Or</span>
replace Larry with your own image.
</p>
<input
type="text"
id="imageUrlInput"
placeholder="Enter image URL or SVG"
style="
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
width: 100%;
box-sizing: border-box;
font-size: 14px;
color: #666;
"
/>
<span
style="
display: block;
color: #676565;
font-weight: 400;
font-size: 8px;
margin-top: 5px;
text-align: center;
"
>
For best results, use a square image with a transparent background (e.g.
28x28px)
</span>
<div
style="
display: flex;
align-items: center;
flex-direction: row;
margin: 10px auto;
"
>
<button
id="applyButton"
style="
background: linear-gradient(to right, #1d9bf0, #1d9bf0 50%, #fff 50%);
background-size: 200% 100%;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease-in-out;
width: 50%;
outline: none;
"
>
Apply
</button>
<!-- make a reset button -->
<button
id="resetButton"
style="
margin-left: 10px;
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
outline: none;
background: none;
color: #ff0067;
"
>
reset
</button>
</div>
<p
style="margin-top: 20px; font-size: 12px; color: #999; text-align: center"
>
made with ❤️ by
<a href="https://candle.fi?utm_source=chrome-extension" target="_blank"
>Candle</a
>
</p>
<script src="popup.js"></script>
</body>
</html>