-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
176 lines (171 loc) · 11 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=320">
<style>
body {
width: 380px;
padding-bottom: 16px;
}
#popup_titlebar {
padding: 2px;
background-color: #63b400;
font-size: 20px;
color: white;
vertical-align: middle;
}
#text {
padding: 4px;
width: 100%;
border: none;
}
#text:focus {
outline: none
}
.gbtn {
margin: 2px;
padding: 2px;
float: right;
width: 96px;
/* gradation */
background: linear-gradient(45deg, #80e800, #5c9f09);
border: none;
border-radius: 4px;
color: white;
font-size: 16px;
}
.gbtn > svg {
max-width: 20%;
}
.gbtn > * {
vertical-align: middle;
}
.gbtn[disabled] {
opacity: 0.5;
}
.rbtn {
margin: 2px;
padding: 2px;
float: right;
width: 96px;
/* gradation */
background: linear-gradient(45deg, #ff0000, #c52400);
border: none;
border-radius: 4px;
color: white;
font-size: 16px;
}
.rbtn > svg {
max-width: 20%;
}
.rbtn > * {
vertical-align: middle;
}
.rbtn[disabled] {
opacity: 0.5;
}
* {
padding: 0;
margin: 0;
font-family: 'NotoSansExtFont', sans-serif;
}
*[data-role="view"] {
display: none;
padding: 4px;
}
svg {
padding: 0;
margin: 0;
}
.headbtn {
display: none;
}
#hosts {
width: 60%;
}
#note_visible{
width: 30%;
}
#setting_button, #add_instance_button {
display: inline !important;
}
</style>
</head>
<body>
<header id="popup_titlebar">
MiShare
<div class="headbtn" style="float: right" id="back_button">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" style=" fill:#ffffff;"><path d="M 12 2.0996094 L 1 12 L 4 12 L 4 21 L 11 21 L 11 15 L 13 15 L 13 21 L 20 21 L 20 12 L 23 12 L 12 2.0996094 z M 12 4.7910156 L 18 10.191406 L 18 11 L 18 19 L 15 19 L 15 13 L 9 13 L 9 19 L 6 19 L 6 10.191406 L 12 4.7910156 z"></path></svg>
</div>
</header>
<div id="view_main" data-role="view">
<div style="display: flex;">
<select id="hosts" data-role="i18n" data-i18nkey="alt_hosts" data-i18nattr="alt"></select>
<select id="note_visible" data-role="i18n" data-i18nkey="alt_visible" data-i18nattr="alt">
<option class="opt_nv" id="nv_public" value="public" data-role="i18n" data-i18nkey="note_visible_public"></option>
<option class="opt_nv" id="nv_home" value="home" data-role="i18n" data-i18nkey="note_visible_home"></option>
<option class="opt_nv" id="nv_followers" value="followers" data-role="i18n" data-i18nkey="note_visible_followers"></option>
</select>
<span id="setting_button">
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 9.6660156 2 L 9.1757812 4.5234375 C 8.3516137 4.8342536 7.5947862 5.2699307 6.9316406 5.8144531 L 4.5078125 4.9785156 L 2.171875 9.0214844 L 4.1132812 10.708984 C 4.0386488 11.16721 4 11.591845 4 12 C 4 12.408768 4.0398071 12.832626 4.1132812 13.291016 L 4.1132812 13.292969 L 2.171875 14.980469 L 4.5078125 19.021484 L 6.9296875 18.1875 C 7.5928951 18.732319 8.3514346 19.165567 9.1757812 19.476562 L 9.6660156 22 L 14.333984 22 L 14.824219 19.476562 C 15.648925 19.165543 16.404903 18.73057 17.068359 18.185547 L 19.492188 19.021484 L 21.826172 14.980469 L 19.886719 13.291016 C 19.961351 12.83279 20 12.408155 20 12 C 20 11.592457 19.96113 11.168374 19.886719 10.710938 L 19.886719 10.708984 L 21.828125 9.0195312 L 19.492188 4.9785156 L 17.070312 5.8125 C 16.407106 5.2676813 15.648565 4.8344327 14.824219 4.5234375 L 14.333984 2 L 9.6660156 2 z M 11.314453 4 L 12.685547 4 L 13.074219 6 L 14.117188 6.3945312 C 14.745852 6.63147 15.310672 6.9567546 15.800781 7.359375 L 16.664062 8.0664062 L 18.585938 7.40625 L 19.271484 8.5917969 L 17.736328 9.9277344 L 17.912109 11.027344 L 17.912109 11.029297 C 17.973258 11.404235 18 11.718768 18 12 C 18 12.281232 17.973259 12.595718 17.912109 12.970703 L 17.734375 14.070312 L 19.269531 15.40625 L 18.583984 16.59375 L 16.664062 15.931641 L 15.798828 16.640625 C 15.308719 17.043245 14.745852 17.36853 14.117188 17.605469 L 14.115234 17.605469 L 13.072266 18 L 12.683594 20 L 11.314453 20 L 10.925781 18 L 9.8828125 17.605469 C 9.2541467 17.36853 8.6893282 17.043245 8.1992188 16.640625 L 7.3359375 15.933594 L 5.4140625 16.59375 L 4.7285156 15.408203 L 6.265625 14.070312 L 6.0878906 12.974609 L 6.0878906 12.972656 C 6.0276183 12.596088 6 12.280673 6 12 C 6 11.718768 6.026742 11.404282 6.0878906 11.029297 L 6.265625 9.9296875 L 4.7285156 8.59375 L 5.4140625 7.40625 L 7.3359375 8.0683594 L 8.1992188 7.359375 C 8.6893282 6.9567546 9.2541467 6.6314701 9.8828125 6.3945312 L 10.925781 6 L 11.314453 4 z M 12 8 C 9.8034768 8 8 9.8034768 8 12 C 8 14.196523 9.8034768 16 12 16 C 14.196523 16 16 14.196523 16 12 C 16 9.8034768 14.196523 8 12 8 z M 12 10 C 13.111477 10 14 10.888523 14 12 C 14 13.111477 13.111477 14 12 14 C 10.888523 14 10 13.111477 10 12 C 10 10.888523 10.888523 10 12 10 z"/></svg>
</span>
<span id="add_instance_button">
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 512 512"><path d="M256,512C114.625,512,0,397.391,0,256C0,114.609,114.625,0,256,0c141.391,0,256,114.609,256,256 C512,397.391,397.391,512,256,512z M256,64C149.969,64,64,149.969,64,256s85.969,192,192,192c106.047,0,192-85.969,192-192 S362.047,64,256,64z M288,384h-64v-96h-96v-64h96v-96h64v96h96v64h-96V384z"/></svg>
</span>
</div>
<textarea id="text" rows="6"></textarea>
<button class="gbtn" id="send_note_button">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 172 172"><g transform=""><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g id="original-icon" fill="#ffffff"><path d="M16.60517,74.046l28.53767,28.53767c2.82367,2.82367 7.32433,3.03867 10.39883,0.50167l76.3465,-62.96633l-62.96633,76.33933c-2.537,3.0745 -2.322,7.58233 0.50167,10.39883l28.53767,28.53767c4.00617,4.00617 10.8145,2.494 12.7495,-2.83083l46.483,-127.83183c2.24317,-6.17767 -3.741,-12.169 -9.91867,-9.91867l-127.839,46.483c-5.32483,1.935 -6.837,8.74333 -2.83083,12.7495z"></path></g><path d="" fill="none"></path></g></g></svg>
<span data-role="i18n" data-i18nkey="button_note"></span>
</button>
<p id="send_error"></p>
</div>
<div id="view_setting" data-role="view">
<p id="setting_note"></p>
<p id="setting_error" style="color:red"></p>
<div>
<label for="setting_api_key" data-role="i18n" data-i18nkey="label_api_key"></label>
<input type="text" id="setting_api_key">
</div>
<div>
<label for="setting_hostname" data-role="i18n" data-i18nkey="label_hostname"></label>
<input type="text" id="setting_hostname">
</div>
<div>
<button class="gbtn" id="setting_save_button">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16" height="16" viewBox="0 0 17.837 17.837" style="enable-background:new 0 0 17.837 17.837;" xml:space="preserve"><g><path style="fill:#ffffff;" d="M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z"/></g></svg>
<span data-role="i18n" data-i18nkey="button_save"></span>
</button>
<button class="rbtn" id="setting_delete_button">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 30 30" style="fill:#ffffff;"><path d="M 13 3 A 1.0001 1.0001 0 0 0 11.986328 4 L 6 4 A 1.0001 1.0001 0 1 0 6 6 L 24 6 A 1.0001 1.0001 0 1 0 24 4 L 18.013672 4 A 1.0001 1.0001 0 0 0 17 3 L 13 3 z M 6 8 L 6 24 C 6 25.105 6.895 26 8 26 L 22 26 C 23.105 26 24 25.105 24 24 L 24 8 L 6 8 z"></path></svg>
<span data-role="i18n" data-i18nkey="button_delete"></span>
</button>
</div>
</div>
<div id="view_add_instance" data-role="view">
<h2 data-role="i18n" data-i18nkey="title_add_instance"></h2>
<p id="ai_note"></p>
<p id="ai_error" style="color:red"></p>
<div>
<label for="ai_api_key" data-role="i18n" data-i18nkey="label_api_key"></label>
<input type="text" id="ai_api_key">
</div>
<div>
<label for="ai_hostname" data-role="i18n" data-i18nkey="label_hostname"></label>
<input type="text" id="ai_hostname">
</div>
<div>
<button class="gbtn" id="ai_add_button">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 17.837 17.837" style="enable-background:new 0 0 17.837 17.837;" xml:space="preserve"><g>
<path style="fill:#ffffff;" d="M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27
c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0
L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z"/></g></svg>
<span data-role="i18n" data-i18nkey="button_add"></span>
</button>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>