upload.html
6.31 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<style type = "text/css">
#wrapper{
width:221px;
margin : 0 auto;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="1">
<meta name="keywords" content="1">
<meta name="author" content="1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Age Detection</title>
<link rel = "stylesheet" href="http://localhost:8080/assets/css/upload.css">
<link rel="stylesheet" href="http://localhost:8080/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost:8080/assets/css/animate.css">
<link rel="stylesheet" href="http://localhost:8080/assets/css/magnific-popup.css">
<link rel="stylesheet" href="http://localhost:8080/assets/css/font-awesome.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="http://localhost:8080/assets/css/tooplate-style.css">
<!-- 이 태그를 head 태그에 배치하거나 닫는 body 태그 바로 앞에 배치하세요. -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'ko'}
</script>
</head>
<body>
<!-- PRE LOADER -->
<div class="preloader">
<div class="spinner">
<span class="spinner-rotate"></span>
</div>
</div>
<!-- HOME SECTION -->
<section id="home" class="parallax-section">
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-7 col-sm-12">
<div class="home-thumb">
<h1 class="wow fadeInUp" data-wow-delay="0.4s">Age Dectection</h1>
<p class="wow fadeInUp white-color" data-wow-delay="0.6s">나이를 측정하러 오신 걸 환영합니다. <br/>당신은 사진을 업로드하여 사진에 있는 사람의 나이를 측정할 수 있습니다. <br/>
이 페이지는 Microsoft Face cognitive API를 사용하였으며 <br/>관심이 있으시면 <a href="https://docs.microsoft.com/en-us/azure/cognitive-services/face/overview">Face API</a>링크를 참고하여 주십시오.</p>
<a href="#service" class="wow fadeInUp smoothScroll btn btn-default section-btn" data-wow-delay="1s">Let's Go</a>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICE SECTION -->
<section id="service" class="parallax-section">
<div class="container">
<div class="row">
<div class="wow fadeInUp section-title" data-wow-delay="0.2s">
<!-- SECTION TITLE -->
<h2>자, 이제 나이를 측정하고 싶은 사람의 사진을 <br/>업로드 해주세요!</h2>
</div>
<div>
<ul class="actions">
<form action="/uploads" method="post" enctype="multipart/form-data">
<input type="submit" value="완료" class= "button">
</form>
<br>
</ul>
</div>
<div id="wrapper">
<div class = "filebox">
<br>
<br>
<br>
<ul class="actions">
<form action="/uploads" method="post" enctype="multipart/form-data">
<label for="userfile">업로드</label>
<input type="file" id="userfile" class="upload" value="업로드"></input>
</form>
</ul>
</div>
</div>
</section>
<!-- FOOTER SECTION -->
<footer>
<div class="container">
<div class="row">
<div class="wow fadeInUp col-md-12 col-sm-12" data-wow-delay="0.8s">
<p class="white-color"> Opensource software programming 2018 RETURN</p>
<div class="wow fadeInUp" data-wow-delay="1s">
<ul class="social-icon">
<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='
+encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog',
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank"
alt="Share on Facebook"><img src="http://ojsfile.ohmynews.com/PHT_IMG_FILE/2018/0930/IE002399659_PHT.jpg" width="45px" height="45px"></a>
<!--스페이스바 두 개 ^^7-->
<a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'
+encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog',
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter">
<img src="https://upload.wikimedia.org/wikipedia/ko/thumb/9/9e/%ED%8A%B8%EC%9C%84%ED%84%B0_%EB%A1%9C%EA%B3%A0_%282012%29.svg/1200px-%ED%8A%B8%EC%9C%84%ED%84%B0_%EB%A1%9C%EA%B3%A0_%282012%29.svg.png" width="45px" height="45px"></a>
<!--스페이스바 두 개 ^^7-->
<a href="#" onclick="javascript:window.open('https://plus.google.com/share?url='
+encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes, scrollbars=yes,height=300,width=600');return false;"
target="_blank" alt="Share on Google+"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Logo_google%2B_2015.png" width="45px" height="45px"></a>
</ul>
</div>
</div>
</div>
</footer>
<!-- SCRIPTS -->
<script src="http://localhost:8080/assets/js/jquery.js"></script>
<script src="http://localhost:8080/assets/js/bootstrap.min.js"></script>
<script src="http://localhost:8080/assets/js/jquery.parallax.js"></script>
<script src="http://localhost:8080/assets/js/smoothscroll.js"></script>
<script src="http://localhost:8080/assets/js/jquery.magnific-popup.min.js"></script>
<script src="http://localhost:8080/assets/js/magnific-popup-options.js"></script>
<script src="http://localhost:8080/assets/js/wow.min.js"></script>
<script src="http://localhost:8080/assets/js/custom.js"></script>
<script>
document.getElementById('userfile').onchange = function(){
alert(this.value+' Upload Ok!');
}
</script>
</body>
</script>
</html>