design ui page

mean/data.ts

+export const data = [
+  {
+    heading: "	A Sun (#陽光普照) - 2019| #ASUN รีวิว",
+    type: "Drama",
+    content_text:
+      "หนัง สะท้อนเกี่ยวกับการเลี้ยงดูลูกของครอบครัวชนชั้นกลางค่อนไปทางล่างที่มีลูกชายสองคน คนนึงรักดีและอีกคนเลวอันธพาลต่างกันสุดขั้ว พ่อแม่มักจะโทษเราเสมอเวลาเราทำอะไรมาไม่ดี แต่พวกเขาไม่เคยตั้งคำถามเลยว่า พวกเขาอาจได้พลาดอะไรไปบ้าง	 ",
+    date: "Jun 15, 2020",
+  },
+  {
+    heading: "	กระชากปมปริศนา คดีอำพราง (Changeling)",
+    type: "Drama",
+    content_text:
+      "เรื่องนี้ไม่ดูไม่ได้แล้ว ลูกชายของนางถูกลักพาตัวไป หายไปถึง5 เดือน จนกลับมา แต่แม่กลับรู้สึกว่านี่ไม่ใช่ลูก เป็นหนังที่สุดในดวงใจ บางฉากคือบีบหัวใจมากๆ มีซีนที่น่ากัวมากๆ คือนักโทษโดนประหาร มันสุดจริงๆ #รีวิวnetflix #รีวิวหนัง #movietwit	 ",
+    date: "Aug 16, 2020",
+  },
+  {
+    heading: "Mr. Heart",
+    type: "BL",
+    content_text:
+      "เรื่องนี้จะพูดถึงเรื่องราวความรักและมิตรภาพระหว่างซางฮา นักวิ่งระยะสั้นที่พยายามรักษารอยยิ้มของตัวเองเอาไว้เสมอแม้จะอยู่ในสถานการณ์ที่ย้ำแย่ และจินวอน นักวิ่งมาราธอนดาวรุ่งผู้ไม่เคยสนใจสิ่งอื่นใด ความสัมพันธ์ระหว่างซางฮากับจินวอนจะเป็นอย่างไร จะพบกับความสดใสตลอดไปหรือไม่ ต้องไปติดตามดูกันนะ 	 ",
+    date: "Jan 18, 2020",
+  },
+  {
+    heading: "Doctor Prisoner",
+    type: "Suspense, Thriller",
+    content_text:
+      "สามารถพูดได้ว่าซีรีย์เรื่องนี้ เป็นการฟาดฟันกันโดยมีวัตถุประสงค์ที่ไม่ดีเป็นแรงในการขับเคลื่อน ไม่ว่าจะเป็นความแค้น หรือความโลภ เราจะได้เห็นความร้ายกาจของแต่ละตัวละคร ไม่ว่าจะเป็นคนมีอำนาจที่ใช้เงิน และตำแหน่งซื้อคนให้จัดการสิ่งที่ตัวเองต้องการ หรือคนที่มีความรู้เฉพาะทางที่ใช้ความรู้ในทางที่ผิดเพื่อให้บรรลุป้าหมาย ต้องบอกว่าเรื่องนี้เข้มข้นไม่มีพัก ใครที่ชอบเนื้อเรื่องแบบเข้มข้น ไม่เน้นเรื่องรัก ไม่มีพักฮา สามารถตามรับชมกันได้เลย	 ",
+    date: "Aug 19, 2020",
+  },
+  {
+    heading: "Romantic Doctor, Teacher Kim",
+    type: "Melodrama",
+    content_text:
+      "เป็นซีรีย์แนวการแพทย์ที่บอกเล่าเรื่องราวเกี่ยวกับการทำงานของแพทย์ในโรงพยาบาลทลดัมที่ต้องเผชิญกับอาการของผู้ป่วยที่หลากหลายรูปแบบ และปัญหาจากปัญจัยภายนอกพร้อมปมปัญหาของตัวละครแต่ละตัวที่ช่วยเสริมให้เรื่องราวเข้มข้นและน่าติดตามมากขึ้น ซีรีย์เรื่องนี้จะทำให้คุณได้รู้ว่าเบื้องหลังของอาชีพแพทย์ที่หลายคนใฝ่ฝัน แท้จริงแล้วพวกเขาต้องเผชิญปัญหาอะไรบ้าง คุณจะได้รู้สึกเหมือนได้เข้าไปนั่งอยู่ในโรงพยาบาลทลดัมและร่วมรักษาคนไข้ไปกับพวกเขาจริง ๆ	 ",
+    date: "Aug 29, 2020",
+  },
+  {
+    heading: "Dr. Romantic 2 ",
+    type: "Melodrama",
+    content_text:
+      "เป็นเรื่องต่อของ Romantic doctor, Teacher Kim ละครทางการแพทย์เกี่ยวกับอัฉริยะแพทย์ พูยงจู หรือ ศจ.คิม (ฮันซุกคยู) ซึ่งเป็นเรื่องราวที่เกิดขึ้นในโรงพยาบาลทลดัม ในขณะเดียวกันชาอึนแจแพทย์เฟลโล่วชั้นปีที่ 2 ในแผนกศัลยกรรมหัวใจ เธอสนุกกับการเรียนและเป็นนักเรียนแพทย์ดีเด่นมาตลอด ส่วนซออูจินเป็นแพทย์คลินิกชั้นปีที่ 2 เขาไม่เชื่อในความสุขเพราะเขานั้นเติบโตมาอย่างยากลำบาก แต่เขาได้แสดงให้เห็นถึงความมุ่งมั่นและพรสวรรค์ที่น่าประทับใจเมื่อเขาทำการผ่าตัด	 ",
+    date: "Aug 20, 2020",
+  },
+  {
+    heading: "	W Two Worlds",
+    type: "Romance, Melodrama, Suspense",
+    content_text:
+      "เป็นเรื่องราวความรักระหว่างชายและหญิงคู่หนึ่งที่เข้าสู่วัย 30 ต้น ๆ เป็นเรื่องของคนสองคนที่อาศัยอยู่ในพื้นที่เดียวกัน แต่อยู่บนโลกคู่ขนาน โดยโอยอนจูเป็นศัลยแพทย์ที่มีพ่อเป็นนักเขียนการ์ตูนชื่อดัง วันหนึ่งพ่อของเธอได้หายตัวไปอย่างลึกลับ เธอจึงรีบไปที่ทำงานของพ่อเพื่อตามหาเขา แต่เธอกลับเจอชายแปลกหน้าที่เลือดอาบไปทั้งตัวแล้วเขาก็ลักพาตัวเธอไปยังโลกอีกมิติหนึ่ง	 ",
+    date: "Aug 21, 2020",
+  },
+  {
+    heading: "	Strong Woman Do Bong Soon (สาวน้อยจอมพลังโดบงซุน)",
+    type: "Romantic Comedy",
+    content_text:
+      "โดบงซุน หญิงสาวที่เกิดมาพร้อมกับพลังวิเศษที่ทำให้เธอมีความแข็งแรงเกินมนุษย์ทั่วไป เป็นพลังที่เกิดขึ้นเฉพาะกับผู้หญิงในครอบครัีวของเธอ แต่เมื่อใดที่เธอใช้พลังในทางที่ผิดหรือใช้พลังทำร้ายคนบริสุทธิ์ บทลงโทษก็คือการสูญเสียพลังวิเศษนี้ บงซุนจึกมักใช้พลังวิเศษเพื่อช่วยเหลือผู้ที่กำลังเดือดร้อนเสมอ ชายในฝันผู้เป็นรักครั้งแรกของบงซุนคือ อินกุกดู เพื่อนในวัยเด็กของเธอที่มีอาชีพเป็นตำรวจ ตลอดเวลาที่อยู่ด้วยกันบงซุนต้องพยายามปิดบังไม่ให้เขารู้ว่าเธอมีพลังวิเศษ เพราะเธอรู้ว่าสเปคสาวที่กุกดูชอบต้องเป็นผู้หญิงเรียบร้อย อ่อนหงาน และบงซุนก็มีความสุขทุกครั้งที่กุกดูแสดงท่าทีว่าเขาเป็นห่วงเธอแม้จะเป็นในฐานะเพื่อนก็ตาม เธอจึงกลัวว่าหากเขารู้ความจริงเรื่องพลังวิเศษของเธอ เขาออจะไม่มาคอยอยู่เคียงข้างและปกป้องเธอเหมือนที่ผ่านมา	 ",
+    date: "	Aug 20, 2020	 ",
+  },
+  {
+    heading: "Weightlifting Fairy Kim Bok Joo",
+    type: "	Romance, Comedy, Sports	 ",
+    content_text:
+      "เป็นเรื่องราวของคิมบ๊อกจู หญิงสาวอายุ 20 ปี ซึ่งมุ่งมั่นที่จะเป็นนักกีฬายกน้ำหนัก จนกระทั่งเธอได้พบกับความรักครั้งแรก และเกิดรักสามาเส้าระหว่างนักว่ายน้ำปี 2 ที่มีประสบการณ์ที่บาดเจ็บหลังการแข่งขันว่ายน้ำครั้งแรก กับผู้เชี่ยวชาญเกี่ยวกับโรคอ้วน เป็นคนดีและอบอุ่นเคียงข้างเธอ ถ้าอยากรู้ว่าคิมบ๊อกจูจะลงเอยกับใครต้องติดตามชม	 ",
+    date: "Aug 22, 2020",
+  },
+];
+
+export const catagory = [
+  {
+    type: "Drama",
+  },
+  {
+    type: "BL",
+  },
+  {
+    type: "Suspense, Thriller",
+  },
+  {
+    type: "Melodrama",
+  },
+  {
+    type: "Romance, Melodrama, Suspense",
+  },
+  {
+    type: "Romantic Comedy",
+  },
+];

mean/src/app/app-routing.module.ts

@@ -5,11 +5,25 @@ import { AuthGuard } from "./shared/guards";
 import { HomeComponent } from "./home/home.component";
 import { TopicComponent } from "./topic/topic.component";
 import { CreateTopicComponent } from "./create-topic/create-topic.component";
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
 const routes: Routes = [
-  {
+  // {
+  //   path: "",
+  //   component: HomeComponent,
+  //   canActivate: [AuthGuard],
+  // },
+  { 
     path: "",
-    component: HomeComponent,
-    canActivate: [AuthGuard],
+    component: HomeComponent
+  },
+  { 
+    path: "login",
+    component: LoginComponent
+  },
+  { 
+    path: "register",
+    component: RegisterComponent
   },
   { 
     path: "topic",

mean/src/app/app.component.html

-<app-header [user]="user$ | async"></app-header>
+<app-header></app-header>
+
+<!-- have login & register -->
+<!-- <app-header [user]="user$ | async"></app-header> -->
+
 <div class="wrapper-app">
   <router-outlet></router-outlet>
 </div>

mean/src/app/app.component.scss

 .wrapper-app {
-}
\ No newline at end of file
+}

mean/src/app/app.module.ts

@@ -14,6 +14,8 @@ import { HomeComponent } from './home/home.component';
 import { AuthService } from './shared/services';
 import { TopicComponent } from './topic/topic.component';
 import { CreateTopicComponent } from './create-topic/create-topic.component';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
 
 export function appInitializerFactory(authService: AuthService) {
   return () => authService.checkTheUserOnTheFirstLoad();
@@ -21,7 +23,7 @@ export function appInitializerFactory(authService: AuthService) {
 
 @NgModule({
   imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule],
-  declarations: [AppComponent, HeaderComponent, HomeComponent, TopicComponent, CreateTopicComponent],
+  declarations: [AppComponent, HeaderComponent, HomeComponent, TopicComponent, CreateTopicComponent, LoginComponent, RegisterComponent],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,

mean/src/app/create-topic/create-topic.component.css

+@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap");
+*{
+    font-family: 'Kanit', sans-serif;
+}
\ No newline at end of file

mean/src/app/header/header.component.html

 <header>
+  <mat-toolbar color="primary">
+    <div class="logo">
+      <img src="../../assets/img/Logo.png" alt="">
+    </div>
+    <span class="example-spacer"></span>
+    <div>
+      <button class="button-item " routerLink="">หน้าหลัก</button>
+      <button class="button-item" routerLink="/create">โพสต์</button>
+    </div>
+    <div class="card">
+      <p class="text-profile">น้องโอมไอ่เด็กเหี้ย</p>
+      <button class="button-logout" routerLink="/login">ออกจากระบบ</button>
+    </div>
+  </mat-toolbar>
+</header>
+<!-- <header>
   <mat-toolbar color="primary">
     <a routerLink="/" class="logo"></a>
     <span class="example-spacer"></span>
@@ -15,4 +31,4 @@
       </mat-menu>
     </div>
   </mat-toolbar>
-</header>
+</header> -->

mean/src/app/header/header.component.scss

+@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap");
+* {
+  font-family: "Kanit", sans-serif;
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
 header {
+  width: 100%;
+  .logo {
+    background-image: url("../../assets/Logo.png");
     width: 100%;
-    .logo {
-      background-image: url('../../assets/logo.png');
-      width: 50px;
-      height: 50px;
-      background-size: contain;
-      background-repeat: no-repeat;
-    }
-    .example-spacer {
-      flex: 1 1 auto;
-    }
-    .links {
-      color: white;
-      font-family: 'Helvetica Neue', sans-serif;
-      font-size: 15px;
-      font-weight: initial;
-      letter-spacing: -1px;
-      line-height: 1;
-      text-align: center;
-      padding: 15px;
-      &.side {
-        padding: 0 14px;
-      }
-    }
-    .mat-toolbar {
-      background: black;
-    }
-    .mat-icon {
-      vertical-align: middle;
-      margin: 0 5px;
-    }
-    a {
-      cursor: pointer;
-    }
-  }
- 
\ No newline at end of file
+    height: 70%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  .example-spacer {
+    flex: 1 1 auto;
+  }
+  .button-item {
+    background-color: Transparent;
+    background-repeat: no-repeat;
+    border: none;
+    cursor: pointer;
+    overflow: hidden;
+    outline: none;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-right: 30px;
+    font-size: 20px;
+    color: white;
+    letter-spacing: 1px;
+    border-radius: 10px;
+    font-weight: bold;
+  }
+  .button-item:hover {
+    background-color: #ebebf5;
+    color: #2c2c2c;
+  }
+  .mat-toolbar {
+    display: flex;
+    background: #2c2c2c;
+    justify-content: center;
+    align-items: center;
+    min-height: 8vh;
+  }
+  .card {
+    display: flex;
+    background-color: #1e1e1e;
+    transition: 0.3s;
+    padding: 7px;
+    border-radius: 6px;
+  }
+  .button-logout {
+    border: none;
+    cursor: pointer;
+    overflow: hidden;
+    outline: none;
+    background-color: #ff3b30;
+    color: white;
+    letter-spacing: 1px;
+    border-radius: 6px;
+    font-size: 16px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .button-logout:hover {
+    background-color: #c02b23;
+  }
+  .text-profile {
+    margin-right: 20px;
+    margin-left: 10px;
+    letter-spacing: 0.5px;
+  }
+}

mean/src/app/home/home.component.html

-<p>
-  home
-</p>
+<div class="content-topic-page">
+  <div class="row">
+    <div class="card-content">
+      <div class="row">
+        <h2 class="title-topic">ล่าสุด</h2>
+      </div>
+      <table>
+        <tr>
+          <th>
+            <button class="content-flim">
+              Review: The Devil All the Time (Antonio Campos, 2020) รีวิวโดย MDC
+            </button>
+          </th>
+          <th>
+            <button class="content-flim">
+              ซ่อนเงาผี - Behind You - ไปดูมาแล้ว
+            </button>
+          </th>
+          <th>
+            <button class="content-flim">
+              มู่หลาน สงครามย้อนยุค ไปดูๆๆๆๆๆๆๆ
+            </button>
+          </th>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
+<div class="content-topic-page">
+  <div class="row">
+    <div class="card-content leftcolumn">
+      <div class="row">
+        <h2 class="title-topic" style="padding-bottom: 30px">บทความ</h2>
+      </div>
+      <div class="row">
+        <div class="content-topic">
+          <div style="padding: 10px" *ngFor="let i of datas">
+            <a href=""
+              ><label>{{ i.heading }}</label></a
+            >
+            <p>{{ i.type }} &nbsp;|&nbsp;&nbsp;{{ i.date }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-content rightcolumn">
+      <div class="row">
+        <h2 class="title-topic" style="padding-bottom: 30px">หมวดหมู</h2>
+      </div>
+      <div class="row">
+        <div class="content-topic">
+          <div style="padding: 10px" *ngFor="let i of catagorys">
+            <a href=""
+              ><label>{{ i.type }}</label></a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

mean/src/app/home/home.component.scss

+@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap");
+
+* {
+  font-family: "Kanit", sans-serif;
+}
+.content-topic-page {
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top: 20px;
+  padding-bottom: 5px;
+}
+.title-topic {
+  padding-left: 15px;
+  padding-bottom: 15px;
+}
+.card-content {
+  padding-bottom: 35px;
+  padding-left: 30px;
+  padding-right: 30px;
+  background-color: white;
+  border-radius: 10px;
+  opacity: 0.8;
+  background-color: #3e3e3e;
+}
+.content-card {
+  background-color: #262626;
+  opacity: 1;
+}
+table {
+  width: 100%;
+}
+th {
+  text-align: center;
+}
+.content-flim {
+  background-color: #262626;
+  opacity: 1px;
+  width: 400px;
+  height: 100px;
+  font-size: 18px;
+  font-weight: lighter;
+  padding: 10px;
+  border-radius: 6px;
+  border: none;
+  outline: none;
+}
+.content-topic {
+  margin: auto;
+  background-color: #262626;
+  opacity: 1px;
+  font-size: 18px;
+  width: 95%;
+  font-weight: lighter;
+  padding: 10px;
+  border-radius: 6px;
+  border: none;
+  outline: none;
+}
+.content-catagory {
+  margin: auto;
+  background-color: #262626;
+  width: 55%;
+  opacity: 1px;
+  width: 400px;
+  height: 100px;
+  font-size: 18px;
+  font-weight: lighter;
+  padding: 10px;
+  border-radius: 6px;
+  border: none;
+  outline: none;
+}
+.leftcolumn {
+  float: left;
+  width: 73%;
+}
+
+.rightcolumn {
+  float: right;
+  width: 25%;
+  padding-left: 20px;
+}

mean/src/app/home/home.component.ts

-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit } from "@angular/core";
+import { data } from "data";
+import { catagory } from "data";
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+  selector: "app-home",
+  templateUrl: "./home.component.html",
+  styleUrls: ["./home.component.scss"],
 })
 export class HomeComponent implements OnInit {
-
-  constructor() { }
-
+  datas = data;
+  catagorys = catagory;
+  constructor() {} 
+  
   ngOnInit() {
+    console.log(this.datas);
   }
-
 }

mean/src/app/login/login.component.html

+<p>login works!</p>

mean/src/app/login/login.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean/src/app/login/login.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

mean/src/app/register/register.component.html

+<p>register works!</p>

mean/src/app/register/register.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RegisterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean/src/app/register/register.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.css']
+})
+export class RegisterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

mean/src/app/topic/topic.component.css

+@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap");
+*{
+    font-family: 'Kanit', sans-serif;
+}
\ No newline at end of file

mean/src/index.html

@@ -2,30 +2,31 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Mean</title>
+    <title>Film Review</title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-
     <link
-      rel="prefetch"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      as="style"
-      crossorigin
-    />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
-      as="style"
-      crossorigin
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
     />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <link rel="icon" type="image/x-icon" href="assets/icons/logo.png" />
     <link
-      href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
+      href="https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap"
       rel="stylesheet"
     />
+    <style>
+      body {
+        background-image: url("assets/bg.png");
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+      }
+      * {
+        color: white;
+      }
+    </style>
   </head>
   <body>
     <app-root></app-root>