npm - mdkcontroller - Versions diffs - 1.4.5 → 1.4.6 - Mend

mdkcontroller 1.4.5 → 1.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/Cores/file/iconlogin.png ADDED Viewed

Binary file

package/Cores/login/index.html CHANGED Viewed

@@ -2,145 +2,243 @@
 <html lang="en">
 <head>
-    <title>Login V1</title>
+    <!-- Design by foolishdeveloper.com -->
+    <title>Glassmorphism login Form Tutorial in html css</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!--===============================================================================================-->
-    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="css/util.css">
-    <link rel="stylesheet" type="text/css" href="css/main.css">
-    <!--===============================================================================================-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../file/iconlogin.png" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
+    <!--Stylesheet-->
+    <style media="screen">
+        *,
+        *:before,
+        *:after {
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: #080710;
+        }
+        .background {
+            width: 430px;
+            height: 520px;
+            position: absolute;
+            transform: translate(-50%, -50%);
+            left: 50%;
+            top: 50%;
+        }
+        .background .shape {
+            height: 200px;
+            width: 200px;
+            position: absolute;
+            border-radius: 50%;
+        }
+        .shape:first-child {
+            background: linear-gradient(#1845ad,
+                    #23a2f6);
+            left: -80px;
+            top: -80px;
+            animation: move 10s linear infinite alternate;
+        }
+        @keyframes move {
+            0% {
+                transform: translateX(0);
+            }
+            50% {
+                transform: translateX(50px) translateY(20px);
+                /* Di chuyển nửa đường */
+            }
+            100% {
+                transform: translateX(100px);
+                /* Di chuyển đến 100px */
+            }
+        }
+        @keyframes move2 {
+            0% {
+                transform: translateX(0);
+            }
+            50% {
+                transform: translateX(-80px) translateY(-30px);
+                /* Di chuyển nửa đường */
+            }
+            100% {
+                transform: translateX(-50px) translateY(-70px);
+                /* Di chuyển đến 100px */
+            }
+        }
+        .shape:last-child {
+            background: linear-gradient(to right,
+                    #ff512f,
+                    #f09819);
+            right: -30px;
+            bottom: -80px;
+            animation: move2 15s linear infinite alternate;
+        }
+        form {
+            height: 520px;
+            width: 400px;
+            background-color: rgba(255, 255, 255, 0.13);
+            position: absolute;
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
+            padding: 50px 35px;
+        }
+        form * {
+            font-family: 'Poppins', sans-serif;
+            color: #ffffff;
+            letter-spacing: 0.5px;
+            outline: none;
+            border: none;
+        }
+        form h3 {
+            font-size: 32px;
+            font-weight: 500;
+            line-height: 42px;
+            text-align: center;
+        }
+        label {
+            display: block;
+            margin-top: 30px;
+            font-size: 16px;
+            font-weight: 500;
+        }
+        input {
+            display: block;
+            height: 50px;
+            width: 100%;
+            background-color: rgba(255, 255, 255, 0.07);
+            border-radius: 3px;
+            padding: 0 10px;
+            margin-top: 8px;
+            font-size: 14px;
+            font-weight: 300;
+        }
+        ::placeholder {
+            color: #e5e5e5;
+        }
+        button {
+            margin-top: 50px;
+            width: 100%;
+            background-color: #ffffff;
+            color: #080710;
+            padding: 15px 0;
+            font-size: 18px;
+            font-weight: 600;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .social {
+            margin-top: 30px;
+            display: flex;
+        }
+        .social div {
+            background: red;
+            width: 150px;
+            border-radius: 3px;
+            padding: 5px 10px 10px 5px;
+            background-color: rgba(255, 255, 255, 0.27);
+            color: #eaf0fb;
+            text-align: center;
+        }
+        .social div:hover {
+            background-color: rgba(255, 255, 255, 0.47);
+        }
+        .social>div:not(:first-child) {
+            margin-left: 20px;
+        }
+        .social i {
+            margin-right: 4px;
+        }
+    </style>
 </head>
 <body>
-<div class="limiter">
-    <div class="container-login100">
-        <div class="wrap-login100">
-            <div class="login100-pic js-tilt" data-tilt>
-                <img src="images/img-01.png" alt="IMG">
-            </div>
-            <form id="formLogin" class="login100-form validate-form" action="../../api/users/login">
-                    <span class="login100-form-title">
-                        Member Login
-                    </span>
-                <div class="wrap-input100 validate-input" data-validate="UserName is required">
-                    <input class="input100" type="text" name="userName" placeholder="UserName">
-                    <span class="focus-input100"></span>
-                    <span class="symbol-input100">
-                            <i class="fa fa-envelope" aria-hidden="true"></i>
-                        </span>
-                </div>
-                <div class="wrap-input100 validate-input" data-validate="Password is required">
-                    <input class="input100" type="password" name="password" placeholder="Password">
-                    <span class="focus-input100"></span>
-                    <span class="symbol-input100">
-                            <i class="fa fa-lock" aria-hidden="true"></i>
-                        </span>
-                </div>
-                <div class="container-login100-form-btn">
-                    <button class="login100-form-btn">
-                        Login
-                    </button>
-                </div>
-                <div class="text-center p-t-12">
-                        <span class="txt1">
-                            Forgot
-                        </span>
-                    <a class="txt2" href="#">
-                        Username / Password?
-                    </a>
-                </div>
-                <div class="text-center p-t-136">
-                    <a class="txt2" href="register.html">
-                        Create your Account
-                        <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
-                    </a>
-                </div>
-            </form>
-        </div>
+    <div class="background">
+        <div class="shape"></div>
+        <div class="shape"></div>
     </div>
-</div>
+    <form id="formLogin" action="/api/users/login">
+        <h3>Login Here</h3>
-<div id="overlay" class="overlay">
-    <div class="overlay_boder">
-        <div class="overlay_box">
-            <div class="overlay_inner">This is a dialog window</div>
+        <label for="username">Username</label>
+        <input type="text" placeholder="Email or Phone" id="username" name="userName">
+        <label for="password">Password</label>
+        <input type="password" placeholder="Password" id="password" name="password">
+        <button>Log In</button>
+        <div class="social">
+            <div><a href="register.html"><i class="fas fa-user-plus"></i> SignUp</a></div>
+            <div><i class="fas fa-user-md"></i>Forgot ?</div>
         </div>
-        <span onclick="closeDialog()"><i class="fa fa-window-close" aria-hidden="true"></i></span>
-    </div>
-</div>
-<!--===============================================================================================-->
-<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
-<!--===============================================================================================-->
-<script src="vendor/bootstrap/js/popper.js"></script>
-<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
-<!--===============================================================================================-->
-<script src="vendor/select2/select2.min.js"></script>
-<!--===============================================================================================-->
-<script src="vendor/tilt/tilt.jquery.min.js"></script>
-<script>
-    $('.js-tilt').tilt({
-        scale: 1.1
-    })
-</script>
-<!--===============================================================================================-->
-<script src="js/main.js"></script>
-<script src="../file/dk.js"></script>
-<script>
-    $('#formLogin').on('submit', function (event) {
-        if (event.result) {
-            const form = event.currentTarget;
-            const formData = new FormData(form);
-            fetch(form.action, {
-                method: "POST",
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(Object.fromEntries(formData.entries()))
-            })
-                .then(response => {
-                    if (response.ok) {
-                        return response.json();
-                    } else {
-                        throw new Error('API request failed');
-                    }
+    </form>
+    <script src="../file/dk.js"></script>
+    <script src="../file/jquery-3.2.1.min.js"></script>
+    <script>
+        $('#formLogin').on('submit', function (event) {
+            if (true) {
+                const form = event.currentTarget;
+                const formData = new FormData(form);
+                debugger;
+                fetch(form.action, {
+                    method: "POST",
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(Object.fromEntries(formData.entries()))
                 })
-                .then(data => {
-                    if (data.success) {
-                        window.location.href = "../../";
-                    } else {
-                        DK.showMessage(data.message, 3);
-                    }
-                })
-                .catch(error => {
-                    DK.showMessage(error, 4);
-                });
-        }
-        return false;
-    });
-</script>
+                    .then(response => {
+                        if (response.ok) {
+                            return response.json();
+                        } else {
+                            throw new Error('API request failed');
+                        }
+                    })
+                    .then(data => {
+                        if (data.success) {
+                            window.location.href = "../../";
+                        } else {
+                            DK.showMessage(data.message, 3);
+                        }
+                    })
+                    .catch(error => {
+                        DK.showMessage(error, 4);
+                    });
+            }
+            return false;
+        });
+    </script>
 </body>
 </html>