update main page, register page

controllers/authController.go

@@ -7,7 +7,6 @@ import (
 
 	"github.com/SowinskiBraeden/BugBeGone/database"
 	"github.com/SowinskiBraeden/BugBeGone/models"
-	"github.com/SowinskiBraeden/gfbmb/messageBox"
 	"github.com/gofiber/fiber/v2"
 	"go.mongodb.org/mongo-driver/bson"
 	"go.mongodb.org/mongo-driver/bson/primitive"
@@ -31,7 +30,7 @@ func Register(c *fiber.Ctx) error {
 	if email == "" {
 		cancel()
 		return c.Status(fiber.StatusBadRequest).Render("register", fiber.Map{
-			"errorMsg": messageBox.NewWarningBox("Missing Email"),
+			"errorMsg": "Missing Email",
 			"username": username,
 			"email":    email,
 		})
@@ -39,7 +38,7 @@ func Register(c *fiber.Ctx) error {
 	if password == "" {
 		cancel()
 		return c.Status(fiber.StatusBadRequest).Render("register", fiber.Map{
-			"errorMsg": messageBox.NewWarningBox("Please enter your password"),
+			"errorMsg": "Please enter your password",
 			"username": username,
 			"email":    email,
 		})
@@ -47,7 +46,7 @@ func Register(c *fiber.Ctx) error {
 	if username == "" {
 		cancel()
 		return c.Status(fiber.StatusBadRequest).Render("register", fiber.Map{
-			"errorMsg": messageBox.NewWarningBox("Missing Username"),
+			"errorMsg": "Missing Username",
 			"username": username,
 			"email":    email,
 		})
@@ -63,7 +62,7 @@ func Register(c *fiber.Ctx) error {
 	if err != nil {
 		cancel()
 		return c.Status(fiber.StatusInternalServerError).Render("register", fiber.Map{
-			"errorMsg": messageBox.NewWarningBox("Failed to search database"),
+			"errorMsg": "Failed to search database",
 			"username": username,
 			"email":    email,
 		})
@@ -71,7 +70,7 @@ func Register(c *fiber.Ctx) error {
 	if count > 0 {
 		cancel()
 		return c.Status(fiber.StatusInternalServerError).Render("register", fiber.Map{
-			"errorMsg": messageBox.NewWarningBox("An account already exists with that email or username"),
+			"errorMsg": "An account already exists with that email or username",
 			"username": username,
 			"email":    email,
 		})
@@ -81,7 +80,7 @@ func Register(c *fiber.Ctx) error {
 	if user.CheckPasswordStrength(password) {
 		cancel()
 		return c.Status(fiber.StatusBadRequest).Render("register", fiber.Map{
-			"errorMsg": messageBox.NewWarningBox("Your password must contain at least 1 lowercase, 1 uppercase & 1 special character"),
+			"errorMsg": "Your password must contain at least 1 lowercase, 1 uppercase & 1 special character",
 			"username": username,
 			"email":    email,
 		})

controllers/viewsController.go

@@ -12,7 +12,7 @@ func MainPage(c *fiber.Ctx) error {
 
 func RegisterPage(c *fiber.Ctx) error {
 	return c.Render("register", fiber.Map{
-		"errorMsg": messageBox.EmptyMessageBox(),
+		"errorMsg": "",
 	})
 }
 

public/styles/register.css

@@ -1,3 +1,10 @@
+:root{
+  --mount-meadow: #1bbc9c;
+  --white-smoke: #f0f0f0;
+  --night-rider: #343434;
+  --black: #191b17;
+  --transition: all 0.5s ease-in-out;
+}
 * {
   margin: 0;
   padding: 0;
@@ -13,6 +20,62 @@ body {
   font-weight: 100;
   text-align: center;
 }
+#signup:hover {
+  cursor: pointer;
+}
+.container2{
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+.navbar{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+}
+.brand-and-toggler{
+  font-size: 1.65rem;
+  padding: 0.8rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navbar-brand{
+  font-weight: 500;
+  color: var(--night-rider);
+  text-decoration: none;
+}
+.navbar-brand span{
+  color: var(--mount-meadow);
+}
+.navbar-toggler{
+  border: none;
+  color: var(--mount-meadow);
+}
+.navbar-nav{
+  margin: 0.2rem 0 0.6rem 0;
+}
+.nav-item{
+  padding: 0.6rem 0;
+  list-style: none;
+}
+.nav-link{
+  text-transform: uppercase;
+  font-size: 0.95rem;
+  letter-spacing: 1.5px;
+  font-weight: 400;
+  opacity: 0.65;
+  transition: var(--transition);
+  text-decoration: none;
+}
+.nav-link:hover{
+  color: var(--mount-meadow)!important;
+}
+.navbar-collapse{
+  display: none;
+}
 .container {
   background: #B7BED8;
   color: #6A79A6;
@@ -20,6 +83,10 @@ body {
   padding: 0em 2em;
   margin: 6em auto;
   box-shadow: 0 50px 50px rgba(0,0,0,0.2);
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform: translate(-50%, -25%);
 }
 .container .navigation {
   text-align: left;
@@ -190,3 +257,50 @@ body {
     transform: translateY(0);
  }
 }
+
+@media screen and (min-width: 992px){
+  .navbar{
+      background: transparent;
+      margin-top: 1.4rem;
+  }
+  .navbar .container2{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+  }
+  .navbar-brand{
+      color: var(--white-smoke);
+      font-size: 2rem;
+  }
+  .navbar-toggler{
+      display: none;
+  }
+  .navbar-collapse{
+      display: block!important;
+  }
+  .navbar-nav{
+      display: flex;
+      margin: 0;
+  }
+  .nav-item{
+      margin-left: 1.8rem;
+  }
+  .nav-link{
+      color: var(--white-smoke);
+  }
+
+  /* navbar change */
+  .cng-navbar{
+      -webkit-box-shadow: 0 2px 5px 0 rgba(207, 205, 207, 0.3);
+      -moz-box-shadow: 0 2px 5px 0 rgba(207, 205, 207, 0.3);
+      box-shadow: 0 2px 5px 0 rgba(207, 205, 207, 0.3);
+      margin-top: 0;
+      background: #fff;
+  }
+  .cng-navbar .navbar-brand{
+      color: var(--night-rider);
+  }
+  .cng-navbar .nav-link{
+      color: var(--night-rider);
+  }
+}

public/styles/style.css

@@ -568,9 +568,6 @@ section{
    .pricing .row{
        grid-template-columns: repeat(3, 1fr);
    }
-   .testimonial-item p{
-       width: 60%;
-   }
    .contact .row{
        column-gap: 4rem;
    }

views/index.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="static/resources/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.css">
     <link rel="stylesheet" href="static/resources/animate.css-main/animate.css">
     <link rel="stylesheet" href="static/styles/style.css">
+    <script src="https://kit.fontawesome.com/ccff26c93b.js" crossorigin="anonymous"></script>
   </head>
   <body>
     
@@ -59,12 +60,12 @@
       </nav>
 
       <div class="hero-div center container">
-        <h1>we make your website stand out</h1>
+        <h1>BugBeGone, Bug Tracking Software</h1>
-        <p class="animate__animated animate__fadeInUp animate__slow">The best way to connect people with your brand.</p>
+        <p class="animate__animated animate__fadeInUp animate__slow">The best way to track, and solve bugs as a team.</p>
 
         <div class="hero-btns animate__animated animate__fadeInUp animate__slow">
-          <button type="button" class="btn-trans">learn more</button>
+          <a href="https://discord.gg/9ZdkyRmxCH"><button type="button" class="btn-trans">Join our Discord</button></a>
-          <button type="button" class="btn-white">meet our people</button>
+          <a href="#team"><button type="button" class="btn-white">Meet our people</button></a>
         </div>
       </div>
     </header>
@@ -82,11 +83,20 @@
           </div>
 
           <div class="detail-item wow animate__animated animate__fadeInUp animate__s">
-            <span><i class="fab fa-html5"></i></span>
+            <span><i class="fas fa-reply"></i></span>
             <h2>Quick Responce</h2>
             <div class="line"></div>
             <p class="text">Our staff works quick to respond to your questoins over email or in our Discord!</p>
           </div>
+
+          <a href="https://discord.gg/9ZdkyRmxCH">
+            <div class="detail-item wow animate__animated animate__fadeInRight animate__s">
+              <span><i class="fa-brands fa-discord"></i></span>
+              <h2>Join Our Discord</h2>
+              <div class="line"></div>
+              <p class="text">For quick communication between staff and other users, join our Discord!</p>
+            </div>
+          </a>
         </div>
       </div>
     </section>
@@ -139,9 +149,6 @@
             <div class="team-img">
               <img src="static/images/McDazzled.png" alt="team-ceo">
               <div class="team-icons">
-                <a href="#" class="center">
-                  <i class="fab fa-facebook-f"></i>
-                </a>
                 <a href="https://twitter.com/BraedenSowinski" class="center">
                   <i class="fab fa-twitter"></i>
                 </a>

views/register.html

@@ -8,6 +8,44 @@
   <script src="https://kit.fontawesome.com/ccff26c93b.js" crossorigin="anonymous"></script>
 </head>
 <body>
+  <nav class="navbar">
+    <div class="container2">
+      <div class="brand-and-toggler">
+        <a href="/" class="navbar-brand">
+          BugBeGone
+        </a>
+        <button type="button" class="navbar-toggler" id="navbar-toggler">
+          <i class="fas fa-bars"></i>
+        </button>
+      </div>
+
+      <div class="navbar-collapse">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a href="/#info" class="nav-link">info</a>
+          </li>
+          <li class="nav-item">
+            <a href="/#feature" class="nav-link">feature</a>
+          </li>
+          <li class="nav-item">
+            <a href="/#team" class="nav-link">team</a>
+          </li>
+          <li class="nav-item">
+            <a href="/#pricing" class="nav-link">pricing</a>
+          </li>
+          <li class="nav-item">
+            <a href="/#contact" class="nav-link">contact</a>
+          </li>
+          <li class="nav-item">
+            <a href="/register" class="nav-link">sign up</a>
+          </li>
+          <li class="nav-item">
+            <a href="/login" class="nav-link">login</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
   <div class="container">
     <div class="navigation">
       <ol>
@@ -17,7 +55,7 @@
         <li><a href="#"   data-ref="viewpswd">Password</a></li>
       </ol>
     </div>
-    <form id="sign-form" class="sign-form" action="">
+    <form id="sign-form" class="sign-form" action="/register" method="POST">
       <ol class="questions">
         <li>
           <span><label for="name">Hi, What is your First Name?</label></span>
@@ -42,11 +80,11 @@
           <span id="show-pwd" class="view"></span>
         </li>
         <li><p style="margin-top: 45px;font-size: 32pt;float:right">
-          <a href="#" style="color:white;text-decoration:none" id="signup">sign up</a></p>
+          <a ref="javascript:{}" onclick="document.getElementById('sign-form').submit();" style="color:white;text-decoration:none" id="signup">sign up</a></p>
         </li>
       </ol>
       <div id="next-page" alt="Kiwi standing on oval"></div>
-      <div class="error-message">{{ unescape .errorMsg }}</div>
+      <div class="error-message">{{ .errorMsg }}</div>
     </form>
   <h1 id="wf" style="opacity:0;width: 600px; margin-top:1.1em;display:none; margin-bottom:1em">Thank you</h1>
 </body>