Add dashboard layout and refactor some codes

danivideda · Nov 28, 2020 · 5b75c2c · 5b75c2c
1 parent b8bf509
commit 5b75c2c
Show file tree

Hide file tree

Showing 11 changed files with 268 additions and 98 deletions.
diff --git a/public/img/teacher.png b/public/img/teacher.png
diff --git a/public/js/app.js b/public/js/app.js
@@ -19384,8 +19384,8 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! D:\MyProjects\laravel\sqola\resources\js\app.js */"./resources/js/app.js");
-module.exports = __webpack_require__(/*! D:\MyProjects\laravel\sqola\resources\css\app.css */"./resources/css/app.css");
+__webpack_require__(/*! C:\Data\College\SEMESTER 5\Object Oriented Software Engineering\sqola\resources\js\app.js */"./resources/js/app.js");
+module.exports = __webpack_require__(/*! C:\Data\College\SEMESTER 5\Object Oriented Software Engineering\sqola\resources\css\app.css */"./resources/css/app.css");
 
 
 /***/ })

diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -1,16 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
+@extends('layouts.web')
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sqola | E-Learning Platform</title>
+@section('title')
+Log In
+@endsection
 
-    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-</head>
-
-<body class="bg-gradient-to-r from-pink-300 to-purple-400">
-    <section class="pt-12 pb-16 md:pt-8 px-8 h-screen" id="login">
+@section('content')
+<div class="bg-gradient-to-r from-pink-300 to-purple-400 h-full">
+    <section class="pt-12 pb-16 md:pt-8 px-8 h-full" id="login">
         <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center px-10">
             <div class="w-full xl:w-7/12 py-6 overflow-y-hidden">
                 <img class="w-5/6 lg:mr-0" src="http://www.pngall.com/wp-content/uploads/5/Learning-PNG-Free-Download.png">
@@ -19,7 +15,7 @@
                 <div class="bg-blue-500 px-4 py-8">
                     <a class="text-black font-extrabold text-center text-3xl inline mx-9" href="/login"> LOGIN </a>
                     <p class="text-black font-extrabold text-center text-3xl inline mx-9 "> | </p>
-                    <a class="text-gray-600 font-extrabold text-center text-3xl inline mx-9" href="/signup"> SIGN UP </a>
+                    <a class="text-gray-600 font-extrabold text-center text-3xl inline mx-9" href="/register"> SIGN UP </a>
                 </div>
                 <div class="bg-white py-16 px-20">
                     <form action="" method="post">
@@ -51,13 +47,12 @@ class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('password') border-red-
                             <button type="submit" class="bg-pink-600 text-white px-4 py-3 rounded font-medium w-full">Login</button>
                         </div>
                         <div>
-                            <p class="pt-12 text-gray-500">Have a skill to become a teacher? Come <span class="underline text-black">join us</span></p>
+                            <p class="pt-12 text-gray-500">Have a skill to become a teacher? Come <a href="teacher/register" class="underline text-black">join us</a></p>
                         </div>
                     </form>
                 </div>
             </div>
         </div>	
     </section>
-</body>
-
-</html>
+</div>
+@endsection
diff --git a/resources/views/auth/signup.blade.php → resources/views/auth/register.blade.php b/resources/views/auth/signup.blade.php → resources/views/auth/register.blade.php
@@ -1,16 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
+@extends('layouts.web')
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sqola | E-Learning Platform</title>
+@section('title')
+Register
+@endsection
 
-    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-</head>
-
-<body class="bg-gradient-to-r from-pink-300 to-purple-400">
-    <section class="pt-12 pb-16 md:pt-8 px-8 h-screen" id="login">
+@section('content')
+<div class="bg-gradient-to-r from-pink-300 to-purple-400 h-full">
+    <section class="pt-12 pb-16 md:pt-8 px-8 h-full" id="login">
         <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center px-10">
             <div class="w-full xl:w-7/12 py-6 overflow-y-hidden">
                 <img class="w-5/6 lg:mr-0" src="http://www.pngall.com/wp-content/uploads/5/Learning-PNG-Free-Download.png">
@@ -21,7 +17,7 @@
                     <p class="text-black font-extrabold text-center text-3xl inline mx-9 "> | </p>
                     <a class="text-blck font-extrabold text-center text-3xl inline mx-9" href="/signup"> SIGN UP </a>
                 </div>
-                <div class="bg-white py-8 px-20">
+                <div class="bg-white py-16 px-20">
                     <form action="" method="post">
                         @csrf
                         <div class="mb-4">
@@ -76,13 +72,12 @@ class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('password_confirmation'
                             <button type="submit" class="bg-pink-600 text-white px-4 py-3 rounded font-medium w-full">Sign Up</button>
                         </div>
                         <div>
-                            <p class="pt-12 text-gray-500">Have a skill to become a teacher? Come <span class="underline text-black">join us</span></p>
+                            <p class="pt-12 text-gray-500">Have a skill to become a teacher? Come <a href="/teacher/register" class="underline text-black">join us</a></p>
                         </div>
                     </form>
                 </div>
             </div>
         </div>	
     </section>
-</body>
-
-</html>
+</div>
+@endsection
diff --git a/resources/views/landing.blade.php b/resources/views/landing.blade.php
@@ -1,15 +1,15 @@
-@extends('layouts.app')
+@extends('layouts.web')
 
 @section('content')
 
 {{-- Home --}}
 <section class="pt-8 pb-16 bg-pink-200 md:pt-8 px-8" id="home">
     <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center px-10">
     <div class="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden">
-        <h1 class="my-4 text-3xl md:text-5xl text-black font-bold leading-tight text-center md:text-left">Get Free Education</h1>
+        <h1 class="my-4 text-3xl md:text-5xl  font-bold leading-tight text-center md:text-left">Get Free Education</h1>
         <p class="text-base md:text-2xl mb-8 text-center md:text-left">Get Free educational and high quality education system to help you advance in your study at highschool period.</p>
         <button class="p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-700">
-            <a href="#" >Sign Up Now</a>
+            <a href="/register" >Sign Up Now</a>
         </button>
     </div>
 
@@ -26,37 +26,37 @@
             <p class="text-center text-white mx-auto py-56 font-bold text-4xl" style="writing-mode: vertical-rl; margin-left: auto; margin-right: auto;"> Categories </p>
         </div>
         <div class="bg-yellow-100 hover:bg-yellow-200" style="grid-area: 1 / 2 / 2 / 3; padding: 120px 0px;">
-            <p class="text-black font-extrabold text-center italic text-2xl"> FISIKA </p>
+            <p class=" font-extrabold text-center italic text-2xl"> FISIKA </p>
         </div>
         <div class="bg-red-100 hover:bg-red-200" style="grid-area: 1 / 3 / 2 / 4; padding: 120px 0px;">
-            <p class="text-black font-extrabold text-center italic text-2xl"> MATEMATIKA </p>
+            <p class=" font-extrabold text-center italic text-2xl"> MATEMATIKA </p>
         </div>
         <div class="bg-blue-100 hover:bg-blue-200" style="grid-area: 1 / 4 / 2 / 5; padding: 120px 0px;">
-            <p class="text-black font-extrabold text-center italic text-2xl"> KIMIA </p>
+            <p class=" font-extrabold text-center italic text-2xl"> KIMIA </p>
         </div>
         <div class="bg-green-100 hover:bg-green-200" style="grid-area: 2 / 2 / 3 / 3; padding: 120px 0px;">
-            <p class="text-black font-extrabold text-center italic text-2xl"> BIOLOGI </p>
+            <p class=" font-extrabold text-center italic text-2xl"> BIOLOGI </p>
         </div>
         <div class="bg-pink-100 hover:bg-pink-200" style="grid-area: 2 / 3 / 3 / 4; padding: 120px 0px;">
-            <p class="text-black font-extrabold text-center italic text-2xl"> BAHASA INDONESIA </p>
+            <p class=" font-extrabold text-center italic text-2xl"> BAHASA INDONESIA </p>
         </div>
         <div class="bg-purple-100 hover:bg-purple-200" style="grid-area: 2 / 4 / 3 / 5; padding: 120px 0px;">
-            <p class="text-black font-extrabold text-center italic text-2xl"> BAHASA INGGRIS </p>
+            <p class=" font-extrabold text-center italic text-2xl"> BAHASA INGGRIS </p>
         </div>
     </div>	
 </section>
 
 {{-- Testimonial --}}
 <section class="pt-12 pb-16 bg-white md:pt-8 px-8" id="testimonial">
     <div class="container mx-auto items-center">
-        <h1 class="my-4 px-11 text-3xl md:text-5xl text-black font-bold leading-tight text-center md:text-left"> Testimony </h1>
+        <h1 class="my-4 px-11 text-3xl md:text-5xl  font-bold leading-tight text-center md:text-left"> Testimony </h1>
     </div>
     <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center px-10">
     <div class="w-full xl:w-2/5 py-6 overflow-y-hidden">
         <img class="w-4/6 lg:mr-0" src="https://teamrrq.com/assets/member/Kq6Q6_for%20web%20-%20lemon.png">
     </div>
     <div class="flex flex-col w-full xl:w-3/5 justify-center lg:items-start overflow-y-hidden">
-        <h1 class="my-4 text-3xl md:text-5xl text-black font-bold leading-tight text-center md:text-left text-yellow-500">Ikhsan Lemon</h1>
+        <h1 class="my-4 text-3xl md:text-5xl  font-bold leading-tight text-center md:text-left text-yellow-500">Ikhsan Lemon</h1>
         <p class="text-base md:text-2xl mb-8 text-center md:text-left">Belajar materi vektor di <span style="text-decoration: underline; text-decoration-color: cornflowerblue; text-decoration-style:solid">Sqola</span> sangat mengasyikkan. Di tengah kesibukan tourney, aku masih sempat mengejar materi Fisika. Terimakasih <span style="text-decoration: underline; text-decoration-color: cornflowerblue; text-decoration-style:solid">Sqola</span>!</p>
         <p class="text-base md:text-base mb-8 text-center md:text-left">SMAN Rembang Rawa Quo - Kelas 10</p>
     </div>

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -4,61 +4,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sqola | E-Learning Platform</title>
+    <title>Sqola | E-Learning Platform - @yield('title')</title>
 
     <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-</head>
-
-<body class="bg-white">
 
-    {{-- Navigasi --}}
-    <nav class="py-6 bg-white border-b-4 border-gray-300">
-        <div class="container mx-auto flex justify-between">
-        <ul class="flex items-center">
-            <li>
-                <a href="/"> 
-                    <img src="{{asset('img/logo.PNG')}}" alt="Sqola" style="height: 45px;" class="mx-8">
-                </a>
-            </li>
-            <li>
-                <a href="#home" class="p-3 text-gray-300 hover:text-black hover:underline"> Home </a>
-            </li>
-            <li>
-                <a href="#categories" class="p-3 text-gray-300 hover:text-black hover:underline"> Categories </a>
-            </li>
-            <li>
-                <a href="#testimonial" class="p-3 text-gray-300 hover:text-black hover:underline"> Testimonial </a>
-            </li>
-            <li>
-                <a href="#contact" class="p-3 text-gray-300 hover:text-black hover:underline"> Contact Us </a>
-            </li>
-        </ul>
+    <script src="https://kit.fontawesome.com/495306a581.js" crossorigin="anonymous"></script>
+</head>
 
-        <ul class="flex items-center">
-            @auth
-                <li>
-                    <a href="/" class="p-3 mx-1 text-blue-500 font-bold hover:text-blue-700"> Teacher Name </a>
-                </li>
-                <li>
-                    <form action="/" method="post" class="inline p-3 text-white bg-blue-500 rounded hover:bg-blue-700">
-                        @csrf
-                        <button type="submit">Logout</button>
-                    </form>
-                </li>
-            @endauth
-            @guest
-                <li>
-                <a href="/" class="p-3 mx-1 text-blue-500 font-bold hover:text-blue-700"> Become a Teacher </a>
-                </li>
-                <li>
-                    <a href="/" class="p-3 text-white bg-blue-500 rounded hover:bg-blue-700"> Login / Signup </a>
-                </li>
-            @endguest
-        </ul>
-        </div>
-    </nav>
+<body class="bg-white h-full text-gray-800">
 
-    @yield('content')
+    @yield('layout')
 </body>
 
 </html>
diff --git a/resources/views/layouts/dashboard.blade.php b/resources/views/layouts/dashboard.blade.php
@@ -0,0 +1,121 @@
+@extends('layouts.app')
+
+@section('title')
+    @yield('title')
+@endsection
+
+@section('layout')
+<div class="w-full flex">
+    <!-- Sidebar -->
+    <div class="w-2/12 h-screen flex flex-col items-center py-12 sticky left-0">
+        <a href="/" class="px-3 mb-12"> 
+            <img src="{{asset('img/logo.PNG')}}" alt="Sqola" style="height: 45px;" class="mx-8">
+        </a>
+        <a href="/" class="mx-3 px-10 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-700 mb-10"> Join a Course </a>
+        <a href="/" class="my-2 py-2 w-full border-r-4 border-blue-500 font-medium">
+            <div class="mx-auto w-max">
+                <i class="fas fa-book-reader mr-2"></i>
+                <span class="text-black">My Course</span>
+            </div>
+        </a>
+        <a href="/" class="my-2 py-2 w-full text-gray-400 hover:text-gray-800 hover:bg-gray-100 font-medium">
+            <div class="mx-auto w-max">
+                <i class="fas fa-th-large mr-2"></i>
+                <span>Categories</span>
+            </div>
+        </a>
+    </div>
+
+    <div class="w-7/12 flex flex-col items-center py-12 px-20 bg-gray-200">
+        @yield('content')
+    </div>
+
+    <div class="w-3/12 flex flex-col items-center py-12">
+        <h1 class="font-bold text-xl uppercase text-center mb-16">Nama User</h1>
+
+        <!-- Courses in Progress -->
+        <div class="w-full mb-10">
+            <h1 class="text-lg font-semibold mb-4 px-8">Progress</h1>
+
+            <!-- Courses List -->
+            <div class="grid auto-rows-fr">
+                <a href="#" class="py-2 px-8 grid grid-cols-6 items-center h-max hover:bg-gray-100">
+                    <div class="bg-blue-100 flex justify-center items-center rounded-lg col-span-1" style="height: 45px; width: 45px;">
+                        <i class="fas fa-pencil-alt text-blue-500"></i>
+                    </div>
+                    <div class="flex flex-col justify-center h-full col-span-3 mx-2">
+                        <p class="font-semibold">Reaksi Redoks</p>
+                        <p class="text-sm font-light text-gray-400">Kimia</p>
+                    </div>
+                    <div class="flex flex-col justify-center col-span-2">
+                        <p class="text-sm font-light text-gray-400">x% to complete</p>
+                        <div class="relative inline-block w-full bg-blue-100 h-2 rounded-xl">
+                            <div class="absolute inline-block bg-blue-500 h-2 rounded-xl" style="width: 75%"></div>
+                        </div>
+                    </div>
+                </a>
+
+                <a href="#" class="py-2 px-8 grid grid-cols-6 items-center h-max hover:bg-gray-100">
+                    <div class="bg-red-100 flex justify-center items-center rounded-lg col-span-1" style="height: 45px; width: 45px;">
+                        <i class="fas fa-pencil-alt text-red-500"></i>
+                    </div>
+                    <div class="flex flex-col justify-center h-full col-span-3 mx-2">
+                        <p class="font-semibold">Persamaan Linear Kuadrat</p>
+                        <p class="text-sm font-light text-gray-400">Matematika</p>
+                    </div>
+                    <div class="flex flex-col justify-center col-span-2">
+                        <p class="text-sm font-light text-gray-400">x% to complete</p>
+                        <div class="relative inline-block w-full bg-red-100 h-2 rounded-xl">
+                            <div class="absolute inline-block bg-red-500 h-2 rounded-xl" style="width: 25%"></div>
+                        </div>
+                    </div>
+                </a>
+
+                <a href="#" class="py-2 px-8 grid grid-cols-6 items-center h-max hover:bg-gray-100">
+                    <div class="bg-green-100 flex justify-center items-center rounded-lg col-span-1" style="height: 45px; width: 45px;">
+                        <i class="fas fa-pencil-alt text-green-500"></i>
+                    </div>
+                    <div class="flex flex-col justify-center h-full col-span-3 mx-2">
+                        <p class="font-semibold">Sistem Reproduksi</p>
+                        <p class="text-sm font-light text-gray-400">Biologi</p>
+                    </div>
+                    <div class="flex flex-col justify-center col-span-2">
+                        <p class="text-sm font-light text-gray-400">x% to complete</p>
+                        <div class="relative inline-block w-full bg-green-100 h-2 rounded-xl">
+                            <div class="absolute inline-block bg-green-500 h-2 rounded-xl" style="width: 50%"></div>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+
+        <!-- Last Question -->
+        <div class="w-full mb-10">
+            <h1 class="text-lg font-semibold mb-4 px-8">Last Question</h1>
+
+            <!-- Questions List -->
+            <div class="grid auto-rows-fr">
+                <a href="#" class="py-2 px-8 grid grid-cols-6 items-center h-max hover:bg-gray-100">
+                    <div class="bg-blue-100 flex justify-center items-center rounded-lg col-span-1" style="height: 45px; width: 45px;">
+                        <i class="fas fa-pencil-alt text-blue-500"></i>
+                    </div>
+                    <div class="flex flex-col justify-center h-full col-span-5 ml-2">
+                        <p class="font-semibold">Teori Atom</p>
+                        <p class="text-sm font-light text-gray-400">27 Oct 2020, Tuesday</p>
+                    </div>
+                </a>
+
+                <a href="#" class="py-2 px-8 grid grid-cols-6 items-center h-max hover:bg-gray-100">
+                    <div class="bg-yellow-100 flex justify-center items-center rounded-lg col-span-1" style="height: 45px; width: 45px;">
+                        <i class="fas fa-pencil-alt text-yellow-500"></i>
+                    </div>
+                    <div class="flex flex-col justify-center h-full col-span-5 ml-2">
+                        <p class="font-semibold">GLBB</p>
+                        <p class="text-sm font-light text-gray-400">27 Oct 2020, Tuesday</p>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection