Add login form to the splash screen

toladata · May 23, 2017 · 616d9d5 · 616d9d5
1 parent 86f489a
commit 616d9d5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/static/css/splash.css b/static/css/splash.css
@@ -177,12 +177,7 @@ nav ul li a:active
     margin-top: 12px;
     padding: 20px;
 }
-p
-{
-    color:#fff;
-    font-size: 18px;
-
-}
+
 .splash_main
 {
     margin-top: 20px;
@@ -212,4 +207,10 @@ p
 .intro_button
 {
     padding-bottom: 12px;
-}
+}
+
+/*login*/
+.login-button
+{
+    margin-top: 10px;
+}
diff --git a/templates/splash.html b/templates/splash.html
@@ -12,6 +12,7 @@
   <!--  splash screen css files -->
   <link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet" type="text/css">
   <link href="{{ STATIC_URL }}css/splash.css" rel="stylesheet" type="text/css">
+  <link href="{{ STATIC_URL }}css/login.css" rel="stylesheet" type="text/css">
   <link href="{{ STATIC_URL }}css/fontawesome-4.2.0.min.css" rel="stylesheet" type="text/css">
   <!-- splash screen js files -->
 
@@ -76,6 +77,45 @@ <h5 class="font10">Login with a TolaData Account</h5>
     </nav>
 
   </header>
+  <div class="container col-md-12">
+  <div class="col-md-3"></div>
+  <div class="login-main col-md-6 col-sm-6">
+    <div class="login-details">
+          <h2 class="font4 login-title"> <strong>Welcome to TolaWork...</strong> </h2>
+          <div class="login-top col-md-offset-3">
+          Login via
+          <div class="social-buttons ">
+              <a type="button" href="{% url 'social:begin' 'google-oauth2' %}" class="btn btn-info col-md-offset-1"><i class="fa fa-google"></i> Google</a>
+              </div>
+              <h4 class="col-md-offset 2">OR</h4>
+              <p>Login with Tola Account</p><br/>
+          </div>
+          <div> 
+            <form class="form" role="form" method="post" action="{% url 'django.contrib.auth.views.login' %}">
+                                  {% csrf_token %}
+                <div class="login-body col-md-6 col-md-offset-3">
+                    <div id="input_detail">
+                      <input class="form-control" type="text" name="username" placeholder="Username"> 
+                    </div>
+
+                    <div id="input_detail" >
+                      <input class="form-control" type="password" name="password" placeholder="Password"> 
+                    </div>
+                    <div class="row login-button">
+                      <div class="col-md-6 ">
+                         <button type="submit" class="btn  btn-info btn-lg form-control">Log In</button>
+                      </div>   
+                    </div>
+                </div>
+            </form>
+          </div>
+        <br>
+        <div class="col-md-8 col-md-offset-2">
+          <p>New Member? <a href="{% url 'register' %}">Register with TolaWork</a></p>
+        </div>
+      </div>
+  </div>
+</div>
 
 </body>