Redmind_GPT_API

Runtime error

App Files Files Community

Redmind commited on Sep 13, 2024

Commit

f749ddc

verified ·

1 Parent(s): 6191fdc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +338 -87

templates/index.html CHANGED Viewed

@@ -1,106 +1,357 @@
-<!--
-This is the login page template for the RedMindGPT application.
-It contains a login form where users can enter their username and password to sign in.
-The form includes validation to ensure that both fields are filled out before submission.
-The page also includes styling using CSS and utilizes the AdminLTE and Font Awesome libraries for additional design elements.
--->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
-        /* CSS styles for the login page */
-        .login-box-msg {
-            color: grey;
-            font-size: larger;
             font-weight: bold;
         }
-        .remember-me {
             text-align: center;
         }
     </style>
-    <title>RedMindGPT</title>
-    <!-- AdminLTE CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/css/adminlte.min.css">
-    <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
 <body class="hold-transition login-page" style="background-image: url('static/img/AI.jpg'); background-size: cover;">
-    <div class="login-box">
-        <div class="card">
-            <!-- Logo -->
-            <div style="align-items: center;">
-                <a href="#" style="color: blue;
-                font-size: 30px;
-                font-weight: bold;
-                margin-left: 80px;
-                margin-top: 20px;
-                "><b>RedMindGPT</b></a>
-            </div>
-            <form action='/validate-user' name='loginForm' method="post" onsubmit="return validateForm()">
-                <div class="card-body login-card-body">
-                    <p class="login-box-msg">Sign in</p>
-                    <div class="input-group mb-3">
-                        <input type="text" class="form-control" placeholder="Username" name="username" required>
-                        <div class="input-group-append">
-                            <div class="input-group-text">
-                                <span class="fas fa-user"></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="input-group mb-3">
-                        <input type="password" class="form-control" placeholder="Password" name="password" required>
-                        <div class="input-group-append">
-                            <div class="input-group-text">
-                                <span class="fas fa-lock"></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row" style="align-content: center;">
-                        <div class="col-8">
-                            <div class="icheck-primary">
-                                <input type="checkbox" id="remember">
-                                <label for="remember">
-                                    Remember Me
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row" style="align-content: center;">
-                        <div class="col-4">
-                            <button type="submit" class="btn btn-primary btn-block">Sign In</button>
-                        </div>
-                        <div class="col-4">
-                            <button type="reset" class="btn btn-secondary btn-block">Clear</button>
-                        </div>
-                    </div>
                 </div>
             </form>
         </div>
     </div>
-    <!-- jQuery -->
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <!-- Bootstrap 4 -->
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
-    <!-- AdminLTE App -->
-    <script src="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/js/adminlte.min.js"></script>
-    <script>
-        // JavaScript function to validate the login form
-        function validateForm() {
-            //alert("Validating form");
-            var username = document.forms["loginForm"]["username"].value;
-            var password = document.forms["loginForm"]["password"].value;
-            if (username == "" || password == "") {
-                alert("Username and Password must be filled out");
-                return false;
-            }
-        }
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Sign In/Up Form</title>
+    <!-- Google Font -->
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,800" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <style>
+        * {
+            box-sizing: border-box;
+        }
+        body {
+            background: #f6f5f7;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            font-family: 'Montserrat', sans-serif;
+            height: 100vh;
+            margin: -20px 0 50px;
+        }
+        h1 {
             font-weight: bold;
+            margin: 0;
         }
+        h2 {
             text-align: center;
         }
+        p {
+            font-size: 14px;
+            font-weight: 100;
+            line-height: 20px;
+            letter-spacing: 0.5px;
+            margin: 20px 0 30px;
+        }
+        span {
+            font-size: 12px;
+        }
+        a {
+            color: #333;
+            font-size: 14px;
+            text-decoration: none;
+            margin: 15px 0;
+        }
+        button {
+            border-radius: 20px;
+            border: 1px solid #1c6bae;
+            background-color: #1c6bae;
+            color: #FFFFFF;
+            font-size: 12px;
+            font-weight: bold;
+            padding: 12px 45px;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+            transition: transform 80ms ease-in;
+        }
+        button:active {
+            transform: scale(0.95);
+        }
+        button:focus {
+            outline: none;
+        }
+        button.ghost {
+            background-color: transparent;
+            border-color: #FFFFFF;
+        }
+        form {
+            background-color: #FFFFFF;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding: 0 50px;
+            height: 100%;
+            text-align: center;
+        }
+        input {
+            background-color: #eee;
+            border: none;
+            padding: 12px 15px;
+            margin: 8px 0;
+            width: 100%;
+        }
+        .container {
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0 14px 28px rgba(0,0,0,0.25),
+                        0 10px 10px rgba(0,0,0,0.22);
+            position: relative;
+            overflow: hidden;
+            width: 668px;
+            max-width: 100%;
+            min-height: 480px;
+        }
+        .form-container {
+            position: absolute;
+            top: 0;
+            height: 100%;
+            transition: all 0.6s ease-in-out;
+        }
+        .sign-in-container {
+            left: 0;
+            width: 50%;
+            z-index: 2;
+        }
+        .container.right-panel-active .sign-in-container {
+            transform: translateX(100%);
+        }
+        .sign-up-container {
+            left: 0;
+            width: 50%;
+            opacity: 0;
+            z-index: 1;
+        }
+        .container.right-panel-active .sign-up-container {
+            transform: translateX(100%);
+            opacity: 1;
+            z-index: 5;
+            animation: show 0.6s;
+        }
+        @keyframes show {
+            0%, 49.99% {
+                opacity: 0;
+                z-index: 1;
+            }
+            50%, 100% {
+                opacity: 1;
+                z-index: 5;
+            }
+        }
+        .overlay-container {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 50%;
+            height: 100%;
+            overflow: hidden;
+            transition: transform 0.6s ease-in-out;
+            z-index: 100;
+        }
+        .container.right-panel-active .overlay-container {
+            transform: translateX(-100%);
+        }
+        .overlay {
+            background: #FF416C;
+            background: -webkit-linear-gradient(to right,#1c6bae, #1c6bae);
+            background: linear-gradient(to right, #1c6bae, #1c6bae);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: 0 0;
+            color: #FFFFFF;
+            position: relative;
+            left: -100%;
+            height: 100%;
+            width: 200%;
+            transform: translateX(0);
+            transition: transform 0.6s ease-in-out;
+        }
+        .container.right-panel-active .overlay {
+            transform: translateX(50%);
+        }
+        .overlay-panel {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding: 0 40px;
+            text-align: center;
+            top: 0;
+            height: 100%;
+            width: 50%;
+            transform: translateX(0);
+            transition: transform 0.6s ease-in-out;
+        }
+        .overlay-left {
+            transform: translateX(-20%);
+        }
+        .container.right-panel-active .overlay-left {
+            transform: translateX(0);
+        }
+        .overlay-right {
+            right: 0;
+            transform: translateX(0);
+        }
+        .container.right-panel-active .overlay-right {
+            transform: translateX(20%);
+        }
+        .social-container {
+            margin: 20px 0;
+        }
+        .social-container a {
+            border: 1px solid #DDDDDD;
+            border-radius: 50%;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 5px;
+            height: 40px;
+            width: 40px;
+        }
+        /* Styling the logo inside a circle */
+.logo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px; /* Add spacing between logo and text */
+}
+.logo {
+    border-radius: 50%; /* Make the image circular */
+    background-color: white; /* White background for the circle */
+    padding: 20px; /* Adjust the padding to create the circle effect */
+    width: 200px; /* Adjust size as needed */
+    height: 200px; /* Adjust size as needed */
+    object-fit: contain; /* Keep the image aspect ratio */
+}
+        footer {
+            background-color: #222;
+            color: #fff;
+            font-size: 14px;
+            bottom: 0;
+            position: fixed;
+            left: 0;
+            right: 0;
+            text-align: center;
+            z-index: 999;
+        }
+        footer p {
+            margin: 10px 0;
+        }
+        footer i {
+            color: red;
+        }
+        footer a {
+            color: #3c97bf;
+            text-decoration: none;
+        }
     </style>
 </head>
 <body class="hold-transition login-page" style="background-image: url('static/img/AI.jpg'); background-size: cover;">
+    <!-- <h2>Weekly Coding Challenge #1: Sign in/up Form</h2> -->
+    <form action='/validate-user' name='loginForm' method="post" onsubmit="return validateForm()">
+    <div class="container" id="container">
+        <div class="form-container sign-up-container">
+                <h1>Create Account</h1>
+                <div class="social-container">
+                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
+                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
+                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                 </div>
+                <span>or use your email for registration</span>
+                <input type="text" placeholder="Name" />
+                <input type="password" placeholder="Password" />
+                <button>Sign Up</button>
             </form>
         </div>
+        <div class="form-container sign-in-container">
+                <h1>Sign in</h1>
+                <div class="social-container">
+                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
+                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
+                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
+                </div>
+                <span>or use your account</span>
+                <input type="text" name="username" placeholder="Username" />
+             <input type="password" name="password" placeholder="Password" />
+                <a href="#">Forgot your password?</a>
+                <button type="submit">Sign In</button>
+            </form>
+        </div>
+        <div class="overlay-container">
+            <div class="overlay">
+                <div class="overlay-panel overlay-left">
+                    <h1>Welcome Back!</h1>
+                    <p>To keep connected with us please login with your personal info</p>
+                    <button type="submit" class="ghost" id="signIn">Sign In</button>
+                </div>
+                <div class="overlay-panel overlay-right">
+    <div class="logo-container">
+        <img src="/static/img/redmindlogo3.jpg" alt="Logo" class="logo">
     </div>
+    <h1>RedMindGPT</h1>
+    <p> Start Journey With Us</p>
+    <button class="ghost" id="signUp">Sign Up</button>
+</div>
+            </div>
+        </div>
+    </div>
+    <footer>
+        <p>
+            Created with <i class="fa fa-heart"></i> by RedMind Technologies</p>
+        </footer>
+               <!-- jQuery -->
+   </form>
+   <script>
+   function validateForm() {
+    //alert("Validating form");
+    var username = document.forms["loginForm"]["username"].value;
+    var password = document.forms["loginForm"]["password"].value;
+    if (username == "" || password == "") {
+        alert("Username and Password must be filled out");
+        return false;
+    }
+}
+</script>
 </body>
+</html>