Users

opensourcessu · Nov 23, 2021 · d39ee7f · d39ee7f
1 parent 5599249
commit d39ee7f
Show file tree

Hide file tree

Showing 10 changed files with 514 additions and 5 deletions.
diff --git a/drag.html b/drag.html
@@ -104,7 +104,33 @@
     <div class="portlet-header">Photo2</div>
       <div class="portlet-content">
         <div class="photo2" style="width:240px; height:240px; background-color: skyblue;">
-          <p style="font-size:30px;">Photo2</p>
+          <div class="container">
+            <div class="image-upload" id="image-upload">
+
+                <form method="post" enctype="multipart/form-data">
+                    <div class="button">
+                        <label for="chooseFile">
+                            👉 CLICK HERE! 👈
+                        </label>
+                    </div>
+                    <input type="file" id="chooseFile" name="chooseFile" accept="image/*" onchange="loadFile(this)">
+                </form>
+
+                <div class="fileContainer">
+                    <div class="fileInput">
+                        <p>FILE NAME: </p>
+                        <p id="fileName"></p>
+                    </div>
+                    <div class="buttonContainer">
+                        <div class="submitButton" id="submitButton">SUBMIT</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="image-show" id="image-show"></div>
+        </div>
+
+        <script src="photo/photo.js"></script>
         </div>
       </div>
     </div>

diff --git a/photo/photo.css b/photo/photo.css
@@ -0,0 +1,83 @@
+html {
+    height: 100%;
+}
+
+body {
+    font-family: sans-serif;
+    height: 100%;
+    margin: 0;
+}
+
+.container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+}
+
+.image-upload {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.button {
+    display: flex;
+    justify-content: center;
+}
+
+label {
+    cursor: pointer;
+    font-size: 1em;
+}
+
+#chooseFile {
+    visibility: hidden;
+}
+
+.fileContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.fileInput {
+    display: flex;
+    align-items: center;
+    border-bottom: solid 2px black;
+    width: 60%;
+    height: 30px;
+}
+
+#fileName {
+    margin-left: 5px;
+}
+
+.buttonContainer {
+    width: 15%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+    background-color: black;
+    color: white;
+    border-radius: 30px;
+    padding: 10px;
+    font-size: 0.8em;
+
+    cursor: pointer;
+}
+
+.image-show {
+    z-index: -1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.img {
+    position: absolute;
+}
diff --git a/photo/photo.html b/photo/photo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Upload Example</title>
+    <link rel="stylesheet" href="photo.css">
+</head>
+<body>
+    <div class="container">
+        <div class="image-upload" id="image-upload">
+
+            <form method="post" enctype="multipart/form-data">
+                <div class="button">
+                    <label for="chooseFile">
+                        👉 CLICK HERE! 👈
+                    </label>
+                </div>
+                <input type="file" id="chooseFile" name="chooseFile" accept="image/*" onchange="loadFile(this)">
+            </form>
+
+            <div class="fileContainer">
+                <div class="fileInput">
+                    <p>FILE NAME: </p>
+                    <p id="fileName"></p>
+                </div>
+                <div class="buttonContainer">
+                    <div class="submitButton" id="submitButton">SUBMIT</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="image-show" id="image-show"></div>
+    </div>
+
+    <script src="photo.js"></script>
+</body>
+</html>
diff --git a/photo/photo.js b/photo/photo.js
@@ -0,0 +1,32 @@
+var submit = document.getElementById('submitButton');
+submit.onclick = showImage;     //Submit 버튼 클릭시 이미지 보여주기
+
+function showImage() {
+    var newImage = document.getElementById('image-show').lastElementChild;
+    newImage.style.visibility = "visible";
+
+    document.getElementById('image-upload').style.visibility = 'hidden';
+
+    document.getElementById('fileName').textContent = null;     //기존 파일 이름 지우기
+}
+
+
+function loadFile(input) {
+    var file = input.files[0];
+
+    var name = document.getElementById('fileName');
+    name.textContent = file.name;
+
+    var newImage = document.createElement("img");
+    newImage.setAttribute("class", 'img');
+
+    newImage.src = URL.createObjectURL(file);   
+
+    newImage.style.width = "70%";
+    newImage.style.height = "70%";
+    newImage.style.visibility = "hidden";   //버튼을 누르기 전까지는 이미지 숨기기
+    newImage.style.objectFit = "contain";
+
+    var container = document.getElementById('image-show');
+    container.appendChild(newImage);
+};
diff --git a/user/login.css b/user/login.css
@@ -0,0 +1,117 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Noto Sans KR", sans-serif;
+  }
+
+  a {
+    text-decoration: none;
+    color: black;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  .wrap {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  .login {
+    width: 30%;
+    height: 600px;
+    background: white;
+    border-radius: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  h2 {
+    color: tomato;
+    font-size: 2em;
+  }
+  .login_sns {
+    padding: 20px;
+    display: flex;
+  }
+
+  .login_sns li {
+    padding: 0px 15px;
+  }
+
+  .login_sns a {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 50px;
+    background: white;
+    font-size: 20px;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4), -3px -3px 5px rgba(0, 0, 0, 0.1);
+  }
+
+  .login_id {
+    margin-top: 20px;
+    width: 80%;
+  }
+
+  .login_id input {
+    width: 100%;
+    height: 50px;
+    border-radius: 30px;
+    margin-top: 10px;
+    padding: 0px 20px;
+    border: 1px solid lightgray;
+    outline: none;
+  }
+
+  .login_pw {
+    margin-top: 20px;
+    width: 80%;
+  }
+
+  .login_pw input {
+    width: 100%;
+    height: 50px;
+    border-radius: 30px;
+    margin-top: 10px;
+    padding: 0px 20px;
+    border: 1px solid lightgray;
+    outline: none;
+  }
+
+  .login_etc {
+    padding: 10px;
+    width: 80%;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: bold;
+  }
+
+  .submit {
+    margin-top: 50px;
+    width: 80%;
+  }
+  .submit input {
+    width: 100%;
+    height: 50px;
+    border: 0;
+    outline: none;
+    border-radius: 40px;
+    background: linear-gradient(to left, rgb(255, 77, 46), rgb(255, 155, 47));
+    color: white;
+    font-size: 1.2em;
+    letter-spacing: 2px;
+  }
diff --git a/user/login.html b/user/login.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/53a8c415f1.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="./login.css">
+</head>
+<body>
+    <div class="wrap">
+        <div class="login">
+            <h2>Log-in</h2>
+
+            <div class="login_id">
+                <h4>E-mail</h4>
+                <input type="email" name="" id="" placeholder="Email">
+            </div>
+            <div class="login_pw">
+                <h4>Password</h4>
+                <input type="password" name="" id="" placeholder="Password">
+            </div>
+            <div class="login_etc">
+                <div class="checkbox">
+                <input type="checkbox" name="" id=""> Remember Me?
+                </div>
+                <div class="forgot_pw">
+                <a href="">Forgot Password?</a>
+            </div>
+            </div>
+            <div class="submit">
+                <input type="submit" value="submit">
+            </div>
+        </div>
+    </div>
+</body>
+</html>