Merge branch 'main' of https://github.com/sunrabbit123/Github-Rangkin…

…-for-GSM into feature/#12
sunrabbit123 · Jul 28, 2021 · 1991879 · 1991879
2 parents 712e19e + e31f522
commit 1991879
Show file tree

Hide file tree

Showing 9 changed files with 230 additions and 201 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/src/static/img/check.png b/src/static/img/check.png
diff --git a/src/static/img/people.png b/src/static/img/people.png
diff --git a/src/static/index.html b/src/static/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <title>GRIG</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="public_style.css">
+</head>
+
+<body>
+    <div id="wrap">
+        <div class="container">
+            <div class="form-container">
+                <div class="auth-form">
+                    <div class="form-title font-color">
+                        <h2>GRIG</h2>
+                        <p class="font-color">Github Rank in GSM</p>
+                    </div>
+                    <form class="form" action="#">
+                        <div class="status">
+                            <p class="valid-time font-color">유효시간 5:00</p>
+                            <p class="send gray-color">인증메일이 전송되었습니다.</p>
+                        </div>
+                        <input class="form-input" placeholder="이메일을 입력하세요" type="email">
+                        <button class="valid-btn btn">인증하기</button>
+                    </form>
+                </div>
+            </div>
+
+            <div class="contents">
+                <div class="contents-title">
+                    <h2>Github 계정 하나로 즐겨보세요</h2>
+                    <p class="gray-color">Github 계정 하나만 있다면,<br>GSM 이라면 즐길 수 있습니다.</p>
+                </div>
+
+                <div class="content-picture">
+                    <img class="picture" src="./img/people.png" alt="그림">
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/src/static/index.js b/src/static/index.js
@@ -0,0 +1,31 @@
+const validTime = document.querySelector('.valid-time');
+const validBtn = document.querySelector('.valid-btn');
+const formInput = document.querySelector('.form-input');
+const sendMessage = document.querySelector('.send');
+
+let disabled = true
+let timer;
+let loop;
+
+function Timer() {
+    validTime.innerText = `${Math.floor(timer / 60)}분 ${timer % 60}초`;
+    timer -= 1;
+    if (timer < 0) {
+        validTime.style.display = "none"
+        sendMessage.style.display = "none";
+        clearInterval(loop);
+    }
+}
+
+validBtn.addEventListener("click", e => {
+    e.preventDefault();
+
+    validTime.style.display = "block";
+    sendMessage.style.display = "block";
+
+    timer = 60 * 5;
+    if (loop) clearInterval(loop);
+
+    Timer();
+    loop = setInterval(Timer, 1000);
+});
diff --git a/src/static/public_style.css b/src/static/public_style.css
@@ -0,0 +1,25 @@
+* {margin: 0; padding: 0; box-sizing: border-box;}
+
+#wrap {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+}
+
+.font-color {
+    color: #DB7770;
+}
+
+.gray-color {
+    color: #C4C4C4;
+}
+
+.btn {
+    cursor: pointer;
+    outline: none;
+    border: none;
+    color: #fff;
+    background-color: #DB7770;
+    border-radius: 5px;
+}
diff --git a/src/static/style.css b/src/static/style.css
@@ -0,0 +1,70 @@
+.container {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+}
+
+.form-container {
+    width: 30rem;
+    height: 30rem;
+    border: 1px solid #DB7770;
+    border-radius: 10px;
+}
+
+.auth-form {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 15% 10% 20% 10%;
+    flex-direction: column;
+}
+
+.form-title > h2 {
+    font-size: 2rem;
+    text-align: center;
+}
+
+.form {
+    width: 100%;
+    margin-top: auto;
+}
+
+.status {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+}
+
+.status > p {
+    display: none;
+}
+
+.form > input {
+    background: none;
+    border: 0.3px solid #DB7770;
+    width: 100%;
+    padding: 15px 20px;
+    border-radius: 5px;
+    outline: none;
+    font-size: 1rem;
+}
+
+.form > button {
+    padding: 15px;
+    float: right;
+    margin-top: 6%;
+}
+
+.contents {
+    width: 30rem;
+    height: 30rem;
+    display: flex;
+    flex-direction: column;
+    justify-content:space-between;
+}
+
+.contents-title > h2 {
+    padding: .8rem 0;
+
+}