forked from bingxueling/ArtOnWeb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
configuration.html
262 lines (257 loc) · 9.51 KB
/
configuration.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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<title>配置工具-ArtOnWeb</title>
<!-- 定义样式 -->
<style type="text/css">
/*全局属性*/
body, html {
height:100%;
font-size: 100%;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
background: #FFFFFF;
}
.title {
color: #3F3F3F;
font-size: 1.25rem;
letter-spacing: 0.125rem;
line-height: 1.5;
margin: 0.5rem 0 0.5rem 0;
padding: 0;
}
.content {
color: #3F3F3F;
font-size: 1rem;
line-height: 1.5;
margin: 0.5rem 0 0.5rem 0;
padding: 0;
}
.content:nth-child(3) {
margin-top: 1.5rem;
}
.description {
color: #7F7F7F;
font-size: 0.75rem;
letter-spacing: 0.125rem;
line-height: 1.5;
margin: 0.5rem 0 0.5rem 0;
padding: 0;
}
.step {
width: 65%;
min-width: 40rem;
margin: 1rem;
padding: 1rem;
border: 1px solid #BFBFBF;
border-radius: 0.5rem;
}
input {
width: 20rem;
height: 2.5rem;
font-size: 1rem;
background-color: #FFFFFF;
border: 1px solid #E5E5E5;
border-radius: 0.25rem;
margin-left: 1rem;
padding: 0.5rem;
box-sizing: border-box;
}
#profile-bg {
width: 5rem;
}
.drop-zone {
width: 26rem;
height: 14rem;
border: 4px dashed #BFBFBF;
overflow:auto;
border-radius: 0.25rem;
background-color: rgba(191,191,191,0.1);
padding: 0.5rem;
margin-top: 1.5rem;
}
.file-list {
margin: 0;
}
.file-list li {
margin: 0.5rem;
}
.file-list li img {
width:6rem;
margin-right: 1rem;
}
#profile-button {
min-width: 15rem;
height: auto;
color: #FFFFFF;
font-size: 1rem;
padding: 0.5rem 3rem;
background-color: #5A00FF;
border-radius: 0.25rem;
border-width: 0;
}
#profile-button:hover {
background-color: #4700CC;
}
#message {
position: fixed;
bottom: 0.8rem;
right: 1.6rem;
text-align: center;
}
#message .title {
font-size: 1rem;
color: WHITE;
margin: 0;
}
#message .description {
margin: 0;
font-size: 0.75rem;
color: WHITE;
text-decoration:none;
}
#job {
display: block;
width: 100%;
padding: 0.5rem;
color: WHITE;
text-decoration:none;
background-color: #0099FF;
margin-bottom: 1rem;
border-radius: 0.5rem;
}
#job:hover {
background-color: #007ACC;
}
#job p {
color: inherit;
}
#qa {
width: 100%;
padding: 0.5rem;
background-color: #5A00FF;
border-radius: 0.5rem;
}
#qa img {
width: 172px;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<form id="main">
<div id="step-1" class="step">
<h2 class="title">第1步：配置个人信息</h2>
<p class="description">只填写需要的信息即可</p>
<p class="content">我的名字<input id="profile-name" name="profile-name" type="text" placeholder="设计小超人"/></p>
<p class="content">我的电话<input id="profile-phone" name="profile-phone" type="text" placeholder="666-8888-8888"></p>
<p class="content">个人标签<input id="profile-tag" name="profile-tag" type="text" placeholder="#就是帅;#就是美;#切图嗖嗖快"><span class="description">（标签之间用英文;隔开）</span></p>
<p class="content">信息区背景色<input id="profile-bg" name="profile-bg" type="color" value="#1E2025"></p>
</div>
<div id="step-2" class="step">
<h2 class="title">第2步：拷贝作品到源码里的myworks文件夹中</h2>
<p class="description">提前删除作品样图哦，支持png,jpge,gif</p>
</div>
<div id="step-3" class="step">
<h2 class="title">第3步：将myworks中的作品拖入下方虚线框中</h2>
<p class="description">获取作品信息，生成作品数据库</p>
<div class="drop-zone">
<ol class="file-list"></ol>
</div>
</div>
<div id="step-4" class="step">
<h2 class="title">第4步：帮我内推</h2>
<p class="description">如果有适合的职位，AOW开发者会联系你哦</p>
<p class="content">联系方式<input id="recommend-contact" name="recommend-contact" type="text" placeholder="电话、微信、邮箱等"></p>
<p class="content">工作城市<input id="recommend-city" name="recommend-city" type="text" placeholder="北京？上海？深圳？"></p>
</div>
<div id="step-5" class="step">
<h2 class="title">第5步：生成data.js配置文件，也拷贝到myworks文件夹中</h2>
<p class="description">文件名必须为"data.js"</p>
<button id="profile-button" type="button">生成配置文件</button>
</div>
<div id="step-final" class="step">
<h2 class="title">完成！用浏览器打开index.html预览吧</h2>
<p class="description">部署AOW可以使用WuliHub、GitHub等免费服务</p>
</div>
</form>
<div id="message">
<a id="job" href="https://mp.weixin.qq.com/s/xnGx_oSX0qijUh5kj2qHwQ" target="_blank">
<p class="title">朋友团队招人</p>
<p class="description">小米、京东、快手、阿里</p>
</a>
<div id="qa">
<p class="description">遇到问题? 微信扫一下反馈</p>
<img src="skin/qrcode_UIDesignScience.jpg"/>
</div>
</div>
<!-- 引用库 -->
<script type="text/javascript" charset="UTF-8" src="js/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lib/FileSaver.min.js"></script>
<!-- 核心逻辑 -->
<script type="text/javascript" charset="UTF-8">
$(function() {
//需要保存的文本内容
var dataGallery="";
//定义图片拖拽区功能
$(".drop-zone").on("drop", function (event) {
console.log("drop");
event.preventDefault();
event.stopPropagation();
$(this).css({"border":"", "background-color":""});
var dataTransfer = event.originalEvent.dataTransfer;
console.log(dataTransfer);
if(dataTransfer && dataTransfer.files.length) {
$.each(dataTransfer.files, function(i, file) {
if (file.type.match('image.*')) {
var imgSrc = "myworks/" + file.name;
$(".file-list").append($("<li>").append($("<img/>").attr("src", imgSrc)).append(file.name));
var image = new Image();
image.onload=function(){
console.log("第" + i + "image.width" + image.width);
console.log("第" + i + "image.height" + image.height);
dataGallery += `{src:"myworks/${file.name}",w:${image.width},h:${image.height}},`;
image = null;
};
image.src = imgSrc;
}
});
}
});
$(".drop-zone").on("dragover", function (event) {
console.log("dragover");
event.preventDefault();
event.stopPropagation();
$(this).css({"border":"4px dashed #5A00FF", "background-color":"rgba(90,0,255,0.2)"});
});
$(".drop-zone").on("dragleave", function (event) {
console.log("dragleave");
event.preventDefault();
event.stopPropagation();
$(this).css({"border":"", "background-color":""});
});
//绑定按钮点击
$("#profile-button").on("click", function(){
var name = $("#profile-name").val();
var phone = $("#profile-phone").val();
var tagArray = $("#profile-tag").val().split(";"), tag;
if (tagArray.length > 0) {
tag = '"' + tagArray[0] + '"';
for (var i = 1; i < tagArray.length; i++) {
tag += ',"' + tagArray[i] + '"';
};
};
var bg = $('#profile-bg').val();
var recommendContact = $('#recommend-contact').val();
var recommendCity = $('#recommend-city').val();
var jsData = `var myData={designer:{name:'${name}',phone:'${phone}',tag:[${tag}],bg:'${bg}'},recommend:{contact:'${recommendContact}',city:'${recommendCity}'},gallery:[${dataGallery}]}`;
console.log(jsData);
var jsFile = new File([jsData], "data.js", {type: "text/plain;charset=utf-8"});
saveAs(jsFile);
});
});
</script>
</body>
</html>