-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
182 lines (150 loc) · 4.72 KB
/
index.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
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="shortcut icon" href="icon.svg">
<title>DevOpen图片外链工具</title>
<!-- 全部主题文件 -->
<link rel="stylesheet" href="./CSS/style.css">
<link rel="style" href="./CSS/style-upload.css">
<link rel="style" href="./CSS/style-captcha.css">
<style>
/*上传文件部分*/
.file-label {
display: inline-block;
position: relative;
cursor: pointer;
line-height: 1;
}
.file-input {
visibility: hidden;
position: absolute;
}
.file-box {
width: 100px;
height: 100px;
border: 2px dashed #999;
display: flex;
justify-content: center;
align-items: center;
}
.upload-icon {
font-size: 40px;
}
#overlay {
/* 设定遮罩层样式 */
display: none;
position: fixed;
z-index: 999;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .5);
}
#dialog {
/* 设定弹出窗口样式 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
<!-- 字体真棒的Script引入 -->
<script defer src="https://use.fontawesome.com/releases/v6.4.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v6.4.0/js/v4-shims.js"></script>
</head>
<body>
<div>
<!-- 标题 -->
<h1>
<i class="fa-brands fa-magento"></i> DevOpen图片外链工具
</h1>
<!--<input type="file" id="fileInput" type="file" accept="image/*">-->
<!-- 上传文件筐定义 -->
<label for="fileInput" class="file-label" aria-label="上传文件">
<div class="file-box">
<span class="upload-icon">
<i class="fa-solid fa-folder-plus" style="color: #5c98ff;"></i>
</span>
</div>
</label>
<input type="file" id="fileInput" class="file-input" onchange="return checkFile(event)" />
<!-- 检查文件类型是否是图片类型 -->
<script src="./JS/check-file.js"></script>
<p></p>
<!-- 展示用户选择的文件 -->
<div id="selectedFile"></div>
<script src="./JS/show-file.js"></script>
<p></p>
<!-- 真人验证浮动窗口标签 -->
<div id="overlay">
<div id="dialog">
<h2>
<i class="fa-solid fa-user-shield"></i>
等一下，你是真人吗？
</h2>
<p>图片生成可能较慢，请耐心等待一会...</p>
<img src="" alt="验证码" id="captcha-img">
<p></p>
<input type="text" id="captcha-input">
<p></p>
<button id="confirm-btn">
<i class="fa-solid fa-universal-access"></i>
我是人类
</button>
</div>
</div>
<!-- 按钮元素 -->
<div style="text-align: center;" id="specific-button">
<button onclick="showOverlay()">上传文件</button>
</div>
<!-- 真人验证 -->
<script src="./JS/upload-captcha.js"></script>
</div>
<p></p>
<!-- 复制链接 -->
<div>
<p id="imageLink"></p>
<p id="uuid"></p>
<div>
<button class="copy" onclick="copyToClipboard()">复制链接</button>
</div>
</div>
<p></p>
<!-- 公告部分 -->
<div>
<h2 style="text-align: center;">
<i class="fa-brands fa-hornbill"></i>
公告
</h2>
<p>
- 2023年5月6日 服务器初始化，所有提交内容清空！
</p>
</div>
<p style="text-align: center;">
<strong>Copyright © 2023 DevOpen All Right Reserves.</strong><br />
</p>
<p style="text-align: center;">
<a href="http://github.com" target="_self" style="color: rgb(0, 176, 240); text-decoration: underline;"><span
style="color: rgb(0, 176, 240);">代码仓库</span></a> | <a href="https://fb-bot.starlight.work/"
target="_self" style="color: rgb(0, 176, 240); text-decoration: underline;"><span
style="color: rgb(0, 176, 240);">Fanbook机器人工具</span></a> | <a href="https://fanbook.mobi/Vm3SRFeJ"
target="_self" style="color: rgb(0, 176, 240); text-decoration: underline;"><span
style="color: rgb(0, 176, 240);">官方服务器</span></a>
</p>
<p style="text-align: center;">
<span style="font-family: 微软雅黑, "Microsoft YaHei"; font-size: 10px;">开源不代表开放，仅供调试使用。</span><br/>
</p>
<!-- 上传文件代码 -->
<script src="./JS/upload-file.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
</body>
</html>