首页 发现 帮助
注册 登录
lee
/
subline
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Fix style on the verify email page.

Lee Morgan 5 年之前
父节点
6be8e4bf90
当前提交
439ee58b9e
共有 7 个文件被更改，包括 251 次插入 和 776 次删除
分列视图 显示文件统计
  1. 51 1
      views/passwordResetPages/password.ejs
  2. 0 92
      views/passwordResetPages/password2.ejs
  3. 0 240
      views/passwordResetPages/passwordReset.css
  4. 50 0
      views/passwordResetPages/style.css
  5. 95 0
      views/verifyPage/style.css
  6. 0 372
      views/verifyPage/verify.css
  7. 55 71
      views/verifyPage/verify.ejs

+ 51 - 1
views/passwordResetPages/password.ejs
查看文件 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
-<html>
 
+<html lang="en">
 
     <head>
 
         <meta charset="utf-8">
 
         <meta content="width=device-width, initial-scale=1" name="viewport"/>
 
@@ -9,6 +9,8 @@
 
         <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet">
 
     </head>
 
     <body>
 
+        <% include ../shared/banner.ejs %>
 
+        
         <form action="/reset" method="post">
 
             <h1>RESET PASSWORD:</h1>
 
 
@@ -24,5 +26,53 @@
 
 
             <a href="/login">CANCEL</a>
 
         </form>
 
+
 
+        <script>
 
+            let locals = <%- JSON.stringify(locals) %>
 
+
 
+            if(locals.banner !== undefined){
 
+                let bannerElem = document.getElementById("banner");
 
+                bannerElem.children[0].style.background = locals.banner.color;
 
+                bannerElem.children[1].innerText = locals.banner.message;
 
+                bannerElem.style.display = "flex";
 
+
 
+                switch(locals.banner.type){
 
+                    case "error":
 
+                        bannerElem.children[0].innerHTML = `
 
+                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                <circle cx="12" cy="12" r="10"></circle>
 
+                                <line x1="15" y1="9" x2="9" y2="15"></line>
 
+                                <line x1="9" y1="9" x2="15" y2="15"></line>
 
+                            </svg>
 
+                        `;
 
+                        break;
 
+                    case "success":
 
+                        bannerElem.children[0].innerHTML = `
 
+                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                <circle cx="12" cy="12" r="10"></circle>
 
+                                <line x1="12" y1="8" x2="12" y2="12"></line>
 
+                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
 
+                            </svg>
 
+                        `;
 
+                        break;
 
+                    default: 
+                        bannerElem.children[0].innerHTML = `
 
+                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
 
+                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
 
+                            </svg>
 
+                        `;
 
+                }
 
+
 
+                let timer = setTimeout(()=>{
 
+                    bannerElem.style.display = "none"
 
+                }, 7000);
 
+
 
+                bannerElem.children[2].onclick = ()=>{
 
+                    bannerElem.style.display = "none";
 
+                    clearTimeout(timer);
 
+                }
 
+            }
 
+        </script>
 
     </body>
 
 </html>

+ 0 - 92
views/passwordResetPages/password2.ejs
查看文件 

@@ -1,92 +0,0 @@
 
-<!DOCTYPE html>
 
-<html>
 
-    <head>
 
-        <meta charset="utf-8">
 
-        <meta content="width=device-width, initial-scale=1" name="viewport"/>
 
-        <title>The Subline</title>
 
-        <link rel="icon" type="img/png" href="/shared/images/logo.png">
 
-        <link rel="stylesheet" href="/shared/shared.css">
 
-        <link rel="stylesheet" href="/passwordResetPages/passwordReset.css">
 
-        <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet"> 
-    </head>
 
-    <body>
 
-        <div class="header">
 
-            <a class="headerStart" href="/" >
 
-                <img src="/shared/images/logo.png" alt="Subline">
 
-                <div class='headerLogo'>THE SUBLINE</div>
 
-            </a>
 
-        
-            <div class="headerEnd">
 
-                <a id="helpLink" class="headerHide" href="/help">HELP</a>
 
-
 
-                <a id="privacyPolicyLink" class="headerHide" href="/privacy">PRIVACY POLICY</a>
 
-
 
-                <a id="termsLink" class="headerHide" href="/terms">TERMS AND CONDITIONS</a>
 
-            </div>
 
-        </div>
 
-
 
-        <% include ../shared/banner.ejs %>
 
-
 
-        <h1 class="title">Reset Password</h1>
 
-
 
-        <form class="form" action="/reset" method="post">
 
-            <input name="password" type="password" class="formInput" placeholder="password">
 
-
 
-            <input name="confirmPassword" type="password" class="formInput" placeholder="confirm password">
 
-
 
-            <input name="code" type="hidden" value="<%=code%>">
 
-
 
-            <input name="id" type="hidden" value="<%=id%>">
 
-
 
-            <input class="button" type="submit" value="RESET PASSWORD">
 
-        </form>
 
-
 
-        <script>
 
-            let locals = <%- JSON.stringify(locals) %>
 
-
 
-            if(locals.banner !== undefined){
 
-                let bannerElem = document.getElementById("banner");
 
-                bannerElem.children[0].style.background = locals.banner.color;
 
-                bannerElem.children[1].innerText = locals.banner.message;
 
-                bannerElem.style.display = "flex";
 
-
 
-                switch(locals.banner.type){
 
-                    case "error":
 
-                        bannerElem.children[0].innerHTML = `
 
-                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
-                                <circle cx="12" cy="12" r="10"></circle>
 
-                                <line x1="15" y1="9" x2="9" y2="15"></line>
 
-                                <line x1="9" y1="9" x2="15" y2="15"></line>
 
-                            </svg>
 
-                        `;
 
-                        break;
 
-                    case "success":
 
-                        bannerElem.children[0].innerHTML = `
 
-                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
-                                <circle cx="12" cy="12" r="10"></circle>
 
-                                <line x1="12" y1="8" x2="12" y2="12"></line>
 
-                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
 
-                            </svg>
 
-                        `;
 
-                        break;
 
-                    default: 
-                        bannerElem.children[0].innerHTML = `
 
-                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
-                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
 
-                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
 
-                            </svg>
 
-                        `;
 
-                }
 
-
 
-                let timer = setTimeout(()=>{
 
-                    bannerElem.style.display = "none"
 
-                }, 7000);
 
-
 
-                bannerElem.children[2].onclick = ()=>{
 
-                    bannerElem.style.display = "none";
 
-                    clearTimeout(timer);
 
-                }
 
-            }
 
-        </script>
 
-    </body>
 
-</html>

+ 0 - 240
views/passwordResetPages/passwordReset.css
查看文件 

@@ -1,240 +0,0 @@
 
-*{margin:0;padding:0;}
 
-
 
-body{
 
-    align-items: center;
 
-}
 
-
 
-.header{
 
-    display: flex;
 
-    justify-content: space-between;
 
-    background: #001b2d;
 
-    width: 100%;
 
-    height: 75px;
 
-}
 
-
 
-    .headerStart{
 
-        display: flex;
 
-        align-items:center;
 
-        text-decoration: none;
 
-        margin-left: 25px;
 
-        width: 275px;
 
-    }
 
-
 
-        .headerStart img{
 
-            max-height: 75%;
 
-        }
 
-
 
-        .headerLogo{
 
-            color: white;
 
-            font-size: 25px;
 
-            margin-left: 10px;
 
-        }
 
-
 
-        .mobileHomeButton{
 
-            display: none;
 
-        }
 
-
 
-    .headerEnd{
 
-        display: flex;
 
-        align-items: center;
 
-        justify-content: flex-end;
 
-        margin-right: 25px;
 
-        
-    }
 
-
 
-        .headerEnd > *{
 
-            margin-left: 20px;
 
-        }
 
-
 
-        .headerEnd a{
 
-            color: rgb(255, 99, 107);
 
-        }
 
-
 
-        h1 {
 
-            text-align: center;
 
-            padding-bottom: 13px;
 
-        }
 
-        
-        h3 {
 
-            text-align: center;
 
-            font-weight: 500;
 
-            font-size: 20px;
 
-        }
 
-        
-        button{
 
-            outline: 0;
 
-        }
 
-        
-        button::-moz-focus-inner{
 
-            border: 0;
 
-        }
 
-        
-        .link{
 
-            cursor: pointer;
 
-            color: gray;
 
-            text-decoration: underline;
 
-            text-align: center;
 
-            font-size: 20px;
 
-        }
 
-        
-            .link:hover {
 
-                color: #ff636b;
 
-                text-decoration: underline;
 
-                cursor: pointer;
 
-            }
 
-        
-        .button{
 
-            background: rgb(0, 27, 45);
 
-            border: none;
 
-            text-decoration: none;
 
-            padding: 10px 25px;
 
-            color: rgb(255, 99, 107);
 
-            cursor: pointer;
 
-            text-align: center;
 
-            font-size: 15px;
 
-            min-width: 100px;
 
-            margin: 5px;
 
-            max-height: 52px;
 
-        }
 
-        
-            .button:hover{
 
-                background: rgb(179, 191, 209);
 
-            }
 
-        
-            .button:active{
 
-                background: rgb(240, 252, 255);
 
-            }
 
-        
-        .dangerButton{
 
-            display: initial;
 
-            background: rgb(255, 99, 107);
 
-            border: none;
 
-            text-decoration: none;
 
-            padding: 10px 25px;
 
-            color: black;
 
-            cursor: pointer;
 
-            text-align: center;
 
-            font-size: 15px;
 
-            min-width: 100px;
 
-            margin: 5px;
 
-            max-height: 52px;
 
-        }
 
-        
-            .dangerButton:hover{
 
-                background: rgb(255, 129, 137);
 
-            }
 
-        
-            .dangerButton:active{
 
-                background: rgb(240, 252, 255);
 
-            }
 
-        
-        .linkButton{
 
-            background: none;
 
-            border: none;
 
-            text-decoration: underline;
 
-            color: white;
 
-            cursor: pointer;
 
-            margin: 5px;
 
-            font-size: 15px;
 
-        }
 
-        
-        .public-buttons {
 
-            position: inherit;
 
-            align-self: center;
 
-            margin-right: 39px;
 
-        }
 
-        
-        .buttonDisabled{
 
-            background: gray;
 
-            text-decoration: none;
 
-            border-radius: 10px;
 
-            padding: 10px 5px;
 
-            color: rgb(0, 27, 45);
 
-            cursor: default;
 
-            font-size: 25px;
 
-            text-align: center;
 
-        }
 
-        
-        .line-break{
 
-            border: 1px solid rgb(255, 99, 107);
 
-            margin: 30px 0;
 
-        }
 
-        
-        @media screen and (max-width: 1400px){
 
-            .button{
 
-                font-size: 15px;
 
-            }
 
-        
-            .header{
 
-                height: 30px;
 
-            }
 
-        
-                .headerStart{
 
-                    margin-left: 10px;
 
-                }
 
-        
-                .headerEnd{
 
-                    font-size: 8px;
 
-                }
 
-        
-                .headerLogo{
 
-                    white-space: nowrap;
 
-                    font-size: 10px;
 
-                }
 
-        
-            .truncateLong{
 
-                max-width: 100px;
 
-                white-space: nowrap;
 
-                overflow: hidden;
 
-                text-overflow: ellipsis;
 
-            }
 
-        
-            .mobileHide{
 
-                display: none !important;
 
-            }
 
-        
-            .headerStart{
 
-                width: 0;
 
-            }
 
-        }
 
-
 
-.title{
 
-    margin-top: 30px;
 
-    font-size: 40px;
 
-}
 
-
 
-.form{
 
-    border: none;
 
-    background: none;
 
-}
 
-
 
-    .formInput{
 
-       font-size: 30px;
 
-       margin-bottom: 15px;
 
-       text-align: center; 
-    }
 
-
 
-    .button{
 
-        font-size: 25px;
 
-        padding: 5px;
 
-    }
 
-
 
-.text{
 
-    font-size: 20px;
 
-    text-align: center;
 
-}
 
-
 
-@media screen and (max-width: 600px){
 
-    .form{
 
-        max-width: 90vw;
 
-        padding: 0;
 
-    }
 
-
 
-        .email{
 
-            font-size: 25px;
 
-        }
 
-
 
-        .button{
 
-            font-size: 20px;
 
-        }
 
-}

+ 50 - 0
views/passwordResetPages/style.css
查看文件 

@@ -70,4 +70,54 @@ input[type=submit]{
 
     
         a:active{
 
             background: rgb(240, 252, 255);
 
+        }
 
+
 
+#bannerContainer{
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    width: 100%;
 
+    position: absolute;
 
+    margin-top: 15px;
 
+    pointer-events: none;
 
+    z-index: 100;
 
+}
 
+
 
+    .banner{
 
+        display: flex;
 
+        width: 75%;
 
+        height: 65px;
 
+        margin: 10px auto;
 
+        box-shadow: 0 0 10px black;
 
+        border: 2px solid black;
 
+        background: white;
 
+    }
 
+
 
+        .banner > div{
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 25%;
 
+            color: white;
 
+        }
 
+
 
+        .banner > p{
 
+            display: flex;
 
+            align-items: center;
 
+            font-size: 20px;
 
+            font-weight: bold;
 
+            width: 75%;
 
+            padding-left: 10px;
 
+        }
 
+
 
+        .banner > button{
 
+            background: none;
 
+            border: none;
 
+            height: 20px;
 
+            position: relative;
 
+            top: -10px;
 
+            right: -10px;
 
+            cursor: pointer;
 
+            color: white;
 
+            pointer-events: all;
 
         }

+ 95 - 0
views/verifyPage/style.css
查看文件 

@@ -0,0 +1,95 @@
 
+*{margin:0;padding:0;font-family:'Saira',sans-serif;}
 
+
 
+body{
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    background: rgb(201, 201, 201);
 
+    height: 100vh;
 
+}
 
+
 
+form{
 
+    display: flex;
 
+    flex-direction: column;
 
+    background: white;
 
+    border: 1px solid black;
 
+    padding: 25px;
 
+    max-width: 500px;
 
+}
 
+
 
+    form > *{
 
+        margin: 15px;
 
+    }
 
+
 
+input[type=submit]{
 
+    background: rgb(0, 27, 45);
 
+    border: none;
 
+    text-decoration: none;
 
+    padding: 10px 25px;
 
+    color: white;
 
+    cursor: pointer;
 
+    text-align: center;
 
+    font-size: 15px;
 
+    min-width: 100px;
 
+    margin: 5px;
 
+    max-height: 52px;
 
+}
 
+
 
+    input[type=submit]:hover{
 
+        background: rgb(179, 191, 209);
 
+        color:black;
 
+    }
 
+
 
+    input[type=submit]:active{
 
+        background: rgb(240, 252, 255);
 
+    }
 
+
 
+#bannerContainer{
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    width: 100%;
 
+    position: absolute;
 
+    margin-top: 15px;
 
+    pointer-events: none;
 
+    z-index: 100;
 
+}
 
+
 
+    .banner{
 
+        display: flex;
 
+        width: 75%;
 
+        height: 65px;
 
+        margin: 10px auto;
 
+        box-shadow: 0 0 10px black;
 
+        border: 2px solid black;
 
+        background: white;
 
+    }
 
+
 
+        .banner > div{
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 25%;
 
+            color: white;
 
+        }
 
+
 
+        .banner > p{
 
+            display: flex;
 
+            align-items: center;
 
+            font-size: 20px;
 
+            font-weight: bold;
 
+            width: 75%;
 
+            padding-left: 10px;
 
+        }
 
+
 
+        .banner > button{
 
+            background: none;
 
+            border: none;
 
+            height: 20px;
 
+            position: relative;
 
+            top: -10px;
 
+            right: -10px;
 
+            cursor: pointer;
 
+            color: white;
 
+            pointer-events: all;
 
+        }

+ 0 - 372
views/verifyPage/verify.css
查看文件 

@@ -1,372 +0,0 @@
 
-*{margin:0;padding:0;}
 
-
 
-body{
 
-    align-items: center;
 
-}
 
-
 
-#bannerContainer{
 
-    display: flex;
 
-    flex-direction: column;
 
-    align-items: center;
 
-    width: 100%;
 
-    position: absolute;
 
-    margin-top: 15px;
 
-    pointer-events: none;
 
-    z-index: 100;
 
-}
 
-
 
-    .banner{
 
-        display: flex;
 
-        width: 75%;
 
-        height: 65px;
 
-        margin: 10px auto;
 
-        box-shadow: 0 0 10px black;
 
-        border: 2px solid black;
 
-        background: white;
 
-    }
 
-
 
-        .banner > div{
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            width: 25%;
 
-            color: white;
 
-        }
 
-
 
-        .banner > p{
 
-            display: flex;
 
-            align-items: center;
 
-            font-size: 20px;
 
-            font-weight: bold;
 
-            width: 75%;
 
-            padding-left: 10px;
 
-        }
 
-
 
-        .banner > button{
 
-            background: none;
 
-            border: none;
 
-            height: 20px;
 
-            position: relative;
 
-            top: -10px;
 
-            right: -10px;
 
-            cursor: pointer;
 
-            color: white;
 
-            pointer-events: all;
 
-        }
 
-
 
-.header{
 
-    display: flex;
 
-    justify-content: space-between;
 
-    background: #001b2d;
 
-    width: 100%;
 
-    height: 75px;
 
-}
 
-
 
-    .headerStart{
 
-        display: flex;
 
-        align-items:center;
 
-        text-decoration: none;
 
-        margin-left: 25px;
 
-        width: 275px;
 
-    }
 
-
 
-        .headerStart img{
 
-            max-height: 75%;
 
-        }
 
-
 
-        .headerLogo{
 
-            color: white;
 
-            font-size: 25px;
 
-            margin-left: 10px;
 
-        }
 
-
 
-        .mobileHomeButton{
 
-            display: none;
 
-        }
 
-
 
-    .headerEnd{
 
-        display: flex;
 
-        align-items: center;
 
-        justify-content: flex-end;
 
-        margin-right: 25px;
 
-        
-    }
 
-
 
-        .headerEnd > *{
 
-            margin-left: 20px;
 
-        }
 
-
 
-        .headerEnd a{
 
-            color: rgb(255, 99, 107);
 
-        }
 
-
 
-#loaderContainer{
 
-    justify-content: center;
 
-    align-items: center;
 
-    width: 100vw;
 
-    height: 100vh;
 
-    background: rgba(0, 27, 45, 0.5);
 
-    z-index: 2;
 
-    position: fixed;
 
-}
 
-
 
-.loader{
 
-    margin-bottom: 200px;
 
-    margin-right: 100px;
 
-}
 
-
 
-.loader .outer{
 
-    border: 10px solid rgba(255, 255, 255, 0);
 
-    border-top: 10px solid rgba(255, 99, 107, 0.8);
 
-    border-bottom: 10px solid rgba(255, 99, 107, 0.8);
 
-    border-radius: 50%;
 
-    height: 80px;
 
-    width: 80px;
 
-    animation: spin1 2s infinite;
 
-    position: absolute;
 
-}
 
-
 
-.loader .mid{
 
-    border: 10px solid rgba(255, 255, 255, 0);
 
-    border-right: 10px solid rgba(0, 27, 45, 0.8);
 
-    border-left: 10px solid rgba(0, 27, 45, 0.8);
 
-    border-radius: 50%;
 
-    height: 60px;
 
-    width: 60px;
 
-    margin: 10px 0 0 10px;
 
-    animation: spin2 2s infinite;
 
-    position: absolute;
 
-}
 
-
 
-.loader .inner{
 
-    border: 10px solid rgba(255, 255, 255, 0);
 
-    border-top: 10px solid rgba(179, 191, 209, 0.8);
 
-    border-bottom: 10px solid rgba(179, 191, 209, 0.8);
 
-    border-radius: 50%;
 
-    height: 40px;
 
-    width: 40px;
 
-    margin: 20px 0 0 20px;
 
-    animation: spin3 2s infinite;
 
-    position: absolute;
 
-}
 
-
 
-.loader img{
 
-    margin: 10px 0 0 10px;
 
-    height: 70px;
 
-    width: 80px;
 
-    position: absolute;
 
-    z-index: -1;
 
-    animation: imgSpin 3s linear infinite;
 
-}
 
-
 
-@keyframes spin1{
 
-    0% { transform: rotate(0deg); }
 
-    100% { transform: rotate(360deg); }
 
-}
 
-
 
-@keyframes spin2{
 
-    0% { transform: rotate(0deg); }
 
-    100% { transform: rotate(720deg); }
 
-}
 
-
 
-@keyframes spin3{
 
-    0% { transform: rotate(0deg); }
 
-    100% { transform: rotate(1080deg); }
 
-}
 
-
 
-@keyframes imgSpin{
 
-    0% { 
-        transform: rotateY(0deg);
 
-    }
 
-
 
-    100% { 
-        transform: rotateY(360deg);
 
-    }
 
-}
 
-
 
-h1 {
 
-    text-align: center;
 
-    padding-bottom: 13px;
 
-}
 
-
 
-h3 {
 
-    text-align: center;
 
-    font-weight: 500;
 
-    font-size: 20px;
 
-}
 
-
 
-button{
 
-    outline: 0;
 
-}
 
-
 
-button::-moz-focus-inner{
 
-    border: 0;
 
-}
 
-
 
-.link{
 
-    cursor: pointer;
 
-    color: gray;
 
-    text-decoration: underline;
 
-    text-align: center;
 
-    font-size: 20px;
 
-}
 
-
 
-    .link:hover {
 
-        color: #ff636b;
 
-        text-decoration: underline;
 
-        cursor: pointer;
 
-    }
 
-
 
-.button{
 
-    background: rgb(0, 27, 45);
 
-    border: none;
 
-    text-decoration: none;
 
-    padding: 10px 25px;
 
-    color: rgb(255, 99, 107);
 
-    cursor: pointer;
 
-    text-align: center;
 
-    font-size: 15px;
 
-    min-width: 100px;
 
-    margin: 5px;
 
-    max-height: 52px;
 
-}
 
-
 
-    .button:hover{
 
-        background: rgb(179, 191, 209);
 
-    }
 
-
 
-    .button:active{
 
-        background: rgb(240, 252, 255);
 
-    }
 
-
 
-.dangerButton{
 
-    display: initial;
 
-    background: rgb(255, 99, 107);
 
-    border: none;
 
-    text-decoration: none;
 
-    padding: 10px 25px;
 
-    color: black;
 
-    cursor: pointer;
 
-    text-align: center;
 
-    font-size: 15px;
 
-    min-width: 100px;
 
-    margin: 5px;
 
-    max-height: 52px;
 
-}
 
-
 
-    .dangerButton:hover{
 
-        background: rgb(255, 129, 137);
 
-    }
 
-
 
-    .dangerButton:active{
 
-        background: rgb(240, 252, 255);
 
-    }
 
-
 
-.linkButton{
 
-    background: none;
 
-    border: none;
 
-    text-decoration: underline;
 
-    color: white;
 
-    cursor: pointer;
 
-    margin: 5px;
 
-    font-size: 15px;
 
-}
 
-
 
-.public-buttons {
 
-    position: inherit;
 
-    align-self: center;
 
-    margin-right: 39px;
 
-}
 
-
 
-.buttonDisabled{
 
-    background: gray;
 
-    text-decoration: none;
 
-    border-radius: 10px;
 
-    padding: 10px 5px;
 
-    color: rgb(0, 27, 45);
 
-    cursor: default;
 
-    font-size: 25px;
 
-    text-align: center;
 
-}
 
-
 
-.line-break{
 
-    border: 1px solid rgb(255, 99, 107);
 
-    margin: 30px 0;
 
-}
 
-
 
-@media screen and (max-width: 1400px){
 
-    .button{
 
-        font-size: 15px;
 
-    }
 
-
 
-    .header{
 
-        height: 30px;
 
-    }
 
-
 
-        .headerStart{
 
-            margin-left: 10px;
 
-        }
 
-
 
-        .headerEnd{
 
-            font-size: 8px;
 
-        }
 
-
 
-        .headerLogo{
 
-            white-space: nowrap;
 
-            font-size: 10px;
 
-        }
 
-
 
-    .truncateLong{
 
-        max-width: 100px;
 
-        white-space: nowrap;
 
-        overflow: hidden;
 
-        text-overflow: ellipsis;
 
-    }
 
-
 
-    .mobileHide{
 
-        display: none !important;
 
-    }
 
-
 
-    .headerStart{
 
-        width: 0;
 
-    }
 
-}
 
-
 
-.title{
 
-    margin-top: 25px;
 
-    font-size: 40px;
 
-}
 
-
 
-.text{
 
-    font-size: 25px;
 
-    text-align: center;
 
-}
 
-
 
-.form{
 
-    border: none;
 
-    background: none;
 
-    width: 325px;
 
-    padding: 0;
 
-}
 
-
 
-    .email{
 
-        font-size: 30px;
 
-        margin-bottom: 15px;
 
-        text-align: center;
 
-    }
 
-
 
-    .button{
 
-        font-size: 25px;
 
-        padding: 5px;
 
-    }
 
-
 
-@media all and (max-width: 1400px){
 
-    .title{
 
-        font-size: 25px;
 
-        padding: 5px;
 
-    }
 
-
 
-    .text{
 
-        padding: 5px;
 
-    }
 
-}

+ 55 - 71
views/verifyPage/verify.ejs
查看文件 

@@ -5,86 +5,70 @@
 
         <meta content="width=device-width, initial-scale=1" name="viewport"/>
 
         <title>The Subline</title>
 
         <link rel="icon" type="img/png" href="/shared/images/logo.png">
 
-        <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet"> 
-        <link rel="stylesheet" href="/shared/shared.css">
 
-        <link rel="stylesheet" href="/verifyPage/verify.css">
 
+        <link rel="stylesheet" href="/verifyPage/style.css">
 
+        <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet">
 
     </head>
 
     <body>
 
-        <div class="header">
 
-            <a class="headerStart" href="/" >
 
-                <img src="/shared/images/logo.png" alt="Subline">
 
-                <div class='headerLogo'>THE SUBLINE</div>
 
-            </a>
 
-        
-            <div class="headerEnd">
 
-                <a id="helpLink" class="headerHide" href="/help">HELP</a>
 
-        
-                <a id="privacyPolicyLink" class="headerHide" href="/privacy">PRIVACY POLICY</a>
 
-        
-                <a id="termsLink" class="headerHide" href="/terms">TERMS AND CONDITIONS</a>        
-            </div>
 
-        </div>
 
-
 
         <% include ../shared/banner.ejs %>
 
+        
+        <form action="/verify/resend" method="post">
 
+            <h3>An email has been sent to <%=email%>. Use the link in the email to verify your account.</h3>
 
 
-        <h1 class="title">An email has been sent to <%=email%>.  Use the link in the email to verify your account.</h1>
 
-
 
-        <p class="text">If you did not recieve an email or need to change your email address, enter it below and click submit.</p>
 
+            <h3>If you didnt recieve an email or need to change your email address, enter it below and click submit.</h3>
 
 
-        <form class="form" action="/verify/resend" method="post">
 
-            <input class="email" name="email" type="email" required>
 
+            <input name="email" type="email" placeholder="EMAIL" required>
 
 
             <input name="id" type="hidden" value="<%=id%>">
 
 
-            <input class="button" type="submit" value="SUBMIT">
 
+            <input type="submit" value="SUBMIT">
 
         </form>
 
-    </body>
 
-    
-    <script>
 
-        let locals = <%- JSON.stringify(locals) %>
 
-
 
-        if(locals.banner !== undefined){
 
-            let bannerElem = document.getElementById("banner");
 
-            bannerElem.children[0].style.background = locals.banner.color;
 
-            bannerElem.children[1].innerText = locals.banner.message;
 
-            bannerElem.style.display = "flex";
 
 
-            switch(banner.type){
 
-                case "error":
 
-                    bannerElem.children[0].innerHTML = `
 
-                        <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
-                            <circle cx="12" cy="12" r="10"></circle>
 
-                            <line x1="15" y1="9" x2="9" y2="15"></line>
 
-                            <line x1="9" y1="9" x2="15" y2="15"></line>
 
-                        </svg>
 
-                    `;
 
-                    break;
 
-                case "success":
 
-                    bannerElem.children[0].innerHTML = `
 
-                        <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
-                            <circle cx="12" cy="12" r="10"></circle>
 
-                            <line x1="12" y1="8" x2="12" y2="12"></line>
 
-                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
 
-                        </svg>
 
-                    `;
 
-                    break;
 
-                default: 
-                    bannerElem.children[0].innerHTML = `
 
-                        <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
-                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
 
-                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
 
-                        </svg>
 
-                    `;
 
-            }
 
-
 
-            let timer = setTimeout(()=>{
 
-                bannerElem.style.display = "none"
 
-            }, 7000);
 
-
 
-            bannerElem.children[2].onclick = ()=>{
 
-                bannerElem.style.display = "none";
 
-                clearTimeout(timer);
 
+        <script>
 
+            let locals = <%- JSON.stringify(locals) %>
 
+    
+            if(locals.banner !== undefined){
 
+                let bannerElem = document.getElementById("banner");
 
+                bannerElem.children[0].style.background = locals.banner.color;
 
+                bannerElem.children[1].innerText = locals.banner.message;
 
+                bannerElem.style.display = "flex";
 
+    
+                switch(banner.type){
 
+                    case "error":
 
+                        bannerElem.children[0].innerHTML = `
 
+                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                <circle cx="12" cy="12" r="10"></circle>
 
+                                <line x1="15" y1="9" x2="9" y2="15"></line>
 
+                                <line x1="9" y1="9" x2="15" y2="15"></line>
 
+                            </svg>
 
+                        `;
 
+                        break;
 
+                    case "success":
 
+                        bannerElem.children[0].innerHTML = `
 
+                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                <circle cx="12" cy="12" r="10"></circle>
 
+                                <line x1="12" y1="8" x2="12" y2="12"></line>
 
+                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
 
+                            </svg>
 
+                        `;
 
+                        break;
 
+                    default: 
+                        bannerElem.children[0].innerHTML = `
 
+                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
 
+                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
 
+                            </svg>
 
+                        `;
 
+                }
 
+    
+                let timer = setTimeout(()=>{
 
+                    bannerElem.style.display = "none"
 
+                }, 7000);
 
+    
+                bannerElem.children[2].onclick = ()=>{
 
+                    bannerElem.style.display = "none";
 
+                    clearTimeout(timer);
 
+                }
 
             }
 
-        }
 
-    </script>
 
+        </script>
 
+    </body>
 
 </html>