add alert , Modify HTML

bongminkim
Commit fa3b3d3665d93b76e9a2709bba97cd3f8d732ff5 fa3b3d36 1 parent d9b33c47
Showing 2 changed files with 95 additions and 13 deletions
public/assets/css/tooplate-style.css
views/upload.html
--- a/public/assets/css/tooplate-style.css
View file @fa3b3d3
+++ b/public/assets/css/tooplate-style.css
View file @fa3b3d3
@@ -21,6 +21,53 @@ html, body {
   height: 100%;
 }
+input.button {
+  width: 150px;
+  height: 80px;
+  border-radius: 20px;
+  font-weight: 600;
+  border-color: transparent;
+  font-size: 25px;
+  background: lightgreen;
+  color: #fff;
+ cursor: pointer;
+}
+input.upload {
+  width: 170px;
+  height: 20px;
+  border-radius: 3px;
+  font-weight: 100;
+  border-color: transparent;
+  font-size: 10px;
+  background: lightgreen;
+  color: black;
+ cursor: pointer;
+}
+
+.filebox label {
+  display: inline-block;
+  padding: .5em .75em;
+  color: #999;
+  font-size: inherit;
+  line-height: normal;
+  vertical-align: middle;
+   background-color: #fdfdfd;
+   cursor: pointer;
+   border: 2px solid;
+   border-radius: .25em;
+    }
+.filebox input[type="file"]
+ { /* 파일 필드 숨기기 */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip:rect(0,0,0,0);
+  border: 0;
+}
+
--- a/views/upload.html
View file @fa3b3d3
+++ b/views/upload.html
View file @fa3b3d3
@@ -2,6 +2,13 @@
 <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">
@@ -11,6 +18,7 @@
 <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">
@@ -29,6 +37,7 @@
 <body>
+
 <!-- PRE LOADER -->
 <div class="preloader">
      <div class="spinner">
@@ -67,13 +76,29 @@
                </div>
-
+<div>
                <ul class="actions">
              <form action="/uploads" method="post" enctype="multipart/form-data">
-               <input type="file" name="userfile" class="upload" value="업로드"></input>
              <input type="submit" value="완료" class= "button">
-             <!--<li><a href="#" class="button">More</a></li>-->
+           </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>
@@ -85,19 +110,23 @@
         <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 2017 Kang Jun Hu </p>
+                    <p class="white-color"> Opensource software programming 2018 RETURN</p>
                     <div class="wow fadeInUp" data-wow-delay="1s">
                          <ul class="social-icon">
-                              <li><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" class="fa fa-facebook"></a></li>
+                              <a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='
-                              <li><a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'
+                                 +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>
+                                &nbsp;&nbsp; <!--스페이스바 두 개 ^^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" class="fa fa-twitter"></a></li>
+                               'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter">
-                              <li><a href="#" class="fa fa-instagram"></a></li>
+                               <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>
-                              <li><a href="#" class="fa fa-behance"></a></li>
+                               &nbsp;&nbsp;  <!--스페이스바 두 개 ^^7-->
-                              <li><a href="#" class="fa fa-github"></a></li>
+                              <a href="#" onclick="javascript:window.open('https://plus.google.com/share?url='
-                              <br>
+                              +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>
-                              <div align="center" class="g-plus" data-action="share" data-height="35" data-href="http://localhost:8080/home"></div>
+
                          </ul>
                     </div>
           </div>
@@ -114,6 +143,12 @@
 <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>