-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.html
79 lines (71 loc) · 2.77 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#app {
padding: 40px;
width: 300px;
}
button {
cursor: pointer;
}
#origin {
padding: 5px 10px;
height: 40px;
font-size: 1.2em;
width: 75%;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
}
#translate {
cursor: pointer;
padding: 5px 10px;
height: 40px;
width: 22%;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
}
#result {
font-size: 18px;
}
#result:before {
content: '结果: ';
display: inline-block;
margin-right: 10px;
}
.error-text {
font-size: .9em; color: hsl(0, 96%, 60%); font-style: italic;
}
.buttons button {
padding: 3px 10px;
margin-right: 10px;
}
.buttons .github {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: sub;
}
</style>
</head>
<body>
<div id="app" class="popup-content">
<div>
<input type="text" id="origin" autofocus placeholder="输入原文">
<input type="button" id="translate" value="翻 译">
</div>
<p id="result"></p>
<div class="buttons">
<button id="copy">复制结果</button>
<button id="view">查看原文</button>
<a class="github" title="github" href="https://github.com/lovetingyuan/translation-extension" rel="noopener noreferrer" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.074 511.074"><path d="M255.509 2.523C114.124 2.795-.271 117.629 0 259.014c.229 119.575 83.206 223.063 199.871 249.28 5.752 1.272 11.446-2.359 12.719-8.111.167-.755.252-1.526.252-2.3v-58.027c0-5.891-4.776-10.667-10.667-10.667h-21.333c-26.624 0-44.8-25.237-60.736-47.509l-4.907-6.784a161.81 161.81 0 0120.523 13.611 72.381 72.381 0 0043.797 19.2c16.081 2.238 30.931-8.983 33.169-25.064.313-2.249.364-4.526.153-6.787v-7.445a10.667 10.667 0 00-7.744-10.261c-59.179-16.747-98.923-61.077-98.923-110.293a101.165 101.165 0 0130.4-70.635 10.668 10.668 0 002.027-11.904 59.733 59.733 0 013.136-54.379 104.992 104.992 0 0139.104 27.477 10.666 10.666 0 0011.84 3.136 185.321 185.321 0 01125.717 0 10.667 10.667 0 0011.776-3.136 104.975 104.975 0 0139.083-27.499 59.733 59.733 0 013.136 54.379 10.666 10.666 0 002.027 11.904 101.16 101.16 0 0130.421 70.656c0 51.669-44.139 97.941-107.371 112.512-5.741 1.32-9.326 7.044-8.006 12.785.208.904.532 1.776.966 2.596a91.6 91.6 0 017.744 42.773v79.36c0 5.891 4.776 10.667 10.667 10.667a10.888 10.888 0 002.304-.256c137.945-30.999 224.642-167.955 193.643-305.899C478.572 85.729 375.084 2.753 255.509 2.523z" fill="#455a64"/></svg>
</a>
</div>
</div>
<script src="scripts/popup.js"></script>
</body>
</html>