design ui page

parent 59700cdd
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",
},
];
...@@ -5,11 +5,25 @@ import { AuthGuard } from "./shared/guards"; ...@@ -5,11 +5,25 @@ import { AuthGuard } from "./shared/guards";
import { HomeComponent } from "./home/home.component"; import { HomeComponent } from "./home/home.component";
import { TopicComponent } from "./topic/topic.component"; import { TopicComponent } from "./topic/topic.component";
import { CreateTopicComponent } from "./create-topic/create-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 = [ const routes: Routes = [
{ // {
// path: "",
// component: HomeComponent,
// canActivate: [AuthGuard],
// },
{
path: "", path: "",
component: HomeComponent, component: HomeComponent
canActivate: [AuthGuard], },
{
path: "login",
component: LoginComponent
},
{
path: "register",
component: RegisterComponent
}, },
{ {
path: "topic", path: "topic",
......
<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"> <div class="wrapper-app">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
......
.wrapper-app { .wrapper-app {
} }
\ No newline at end of file
...@@ -14,6 +14,8 @@ import { HomeComponent } from './home/home.component'; ...@@ -14,6 +14,8 @@ import { HomeComponent } from './home/home.component';
import { AuthService } from './shared/services'; import { AuthService } from './shared/services';
import { TopicComponent } from './topic/topic.component'; import { TopicComponent } from './topic/topic.component';
import { CreateTopicComponent } from './create-topic/create-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) { export function appInitializerFactory(authService: AuthService) {
return () => authService.checkTheUserOnTheFirstLoad(); return () => authService.checkTheUserOnTheFirstLoad();
...@@ -21,7 +23,7 @@ export function appInitializerFactory(authService: AuthService) { ...@@ -21,7 +23,7 @@ export function appInitializerFactory(authService: AuthService) {
@NgModule({ @NgModule({
imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule], imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule],
declarations: [AppComponent, HeaderComponent, HomeComponent, TopicComponent, CreateTopicComponent], declarations: [AppComponent, HeaderComponent, HomeComponent, TopicComponent, CreateTopicComponent, LoginComponent, RegisterComponent],
providers: [ providers: [
{ {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
......
@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
<header> <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"> <mat-toolbar color="primary">
<a routerLink="/" class="logo"></a> <a routerLink="/" class="logo"></a>
<span class="example-spacer"></span> <span class="example-spacer"></span>
...@@ -15,4 +31,4 @@ ...@@ -15,4 +31,4 @@
</mat-menu> </mat-menu>
</div> </div>
</mat-toolbar> </mat-toolbar>
</header> </header> -->
@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 { header {
width: 100%;
.logo {
background-image: url("../../assets/Logo.png");
width: 100%; width: 100%;
.logo { height: 70%;
background-image: url('../../assets/logo.png'); background-size: contain;
width: 50px; background-repeat: no-repeat;
height: 50px; }
background-size: contain; .example-spacer {
background-repeat: no-repeat; flex: 1 1 auto;
} }
.example-spacer { .button-item {
flex: 1 1 auto; background-color: Transparent;
} background-repeat: no-repeat;
.links { border: none;
color: white; cursor: pointer;
font-family: 'Helvetica Neue', sans-serif; overflow: hidden;
font-size: 15px; outline: none;
font-weight: initial; padding-left: 20px;
letter-spacing: -1px; padding-right: 20px;
line-height: 1; padding-top: 10px;
text-align: center; padding-bottom: 10px;
padding: 15px; margin-right: 30px;
&.side { font-size: 20px;
padding: 0 14px; color: white;
} letter-spacing: 1px;
} border-radius: 10px;
.mat-toolbar { font-weight: bold;
background: black; }
} .button-item:hover {
.mat-icon { background-color: #ebebf5;
vertical-align: middle; color: #2c2c2c;
margin: 0 5px; }
} .mat-toolbar {
a { display: flex;
cursor: pointer; background: #2c2c2c;
} justify-content: center;
} align-items: center;
min-height: 8vh;
\ No newline at end of file }
.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;
}
}
<p> <div class="content-topic-page">
home <div class="row">
</p> <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>
@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;
}
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from "@angular/core";
import { data } from "data";
import { catagory } from "data";
@Component({ @Component({
selector: 'app-home', selector: "app-home",
templateUrl: './home.component.html', templateUrl: "./home.component.html",
styleUrls: ['./home.component.scss'] styleUrls: ["./home.component.scss"],
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
datas = data;
constructor() { } catagorys = catagory;
constructor() {}
ngOnInit() { ngOnInit() {
console.log(this.datas);
} }
} }
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();
});
});
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 {
}
}
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();
});
});
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 {
}
}
@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/assets/logo.png

5.85 KB | W: | H:

mean/src/assets/logo.png

18.3 KB | W: | H:

mean/src/assets/logo.png
mean/src/assets/logo.png
mean/src/assets/logo.png
mean/src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -2,30 +2,31 @@ ...@@ -2,30 +2,31 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Mean</title> <title>Film Review</title>
<base href="/" /> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link <link
rel="prefetch" rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
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
/> />
<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 <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" rel="stylesheet"
/> />
<style>
body {
background-image: url("assets/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
* {
color: white;
}
</style>
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment