4.1: Một số màn hình chính
4.1.1. Màn hình chính
<body>
<div class = "col-md-12">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home">LOL QUESTION</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class= "active"> <a routerLink="/login" routerLinkActive="active">Đăng Nhập</a></li>
<li><a routerLink="/answer" routerLinkActive="active">Câu hỏi</a></li>
<li><a routerLink="/story" routerLinkActive="active">Truyền Thuyết</a></li>
</ul>
</div>
</div>
</nav>
</div>
<h1>BẢNG XẾP HẠNG </h1>
<h3>Top 10 người chơi cao điểm nhất</h3>
<table class="table table-striped">
<td > Vị Trí</td>
<td >Tên nhân vật </td>
<td >Số điểm</td>
<td >Rank</td>
<td>Danh Hiệu</td>
<tr>
<td class="info" >1</td>
<td class="info" >Trùm Cuối </td>
<td class="info" >3800</td>
<td class="info" >Thách Đấu</td>
<td class="info"> Huyền Thoại</td>
</tr>
<tr>
<td class="success"> 2</td>
<td class="success">Trùm Fake </td>
<td class="success">3790</td>
<td class="success">Thách Đấu</td>
<td class="success">Thần Thánh</td>
</tr>
<tr>
<td class="danger"> 3</td>
<td class="danger">Trùm Phụ </td>
<td class="danger">3770</td>
<td class="danger">Thách Đấu</td>
<td class="danger">Thần Thánh</td>
</tr>
<tr>
<td > 4</td>
<td >Trùm Lậu </td>
<td >3700</td>
<td >Thách Đấu</td>
<td></td>
</tr>
<tr>
<td > 5</td>
<td >Trùm Giỡn </td>
<td >3690</td>
<td >Thách Đấu</td>
<td></td>
</tr>
<tr>
<td > 6</td>
<td >Trùm Đầu </td>
<td >3670</td>
<td >Thách Đấu</td>
<td></td>
</tr>
<tr>
<td > 7</td>
<td >Trùm Khăn </td>
<td >3660</td>
<td >Thách Đấu</td>
<td></td>
</tr>
<tr>
<td > 8</td>
<td >Trùm Mũ</td>
<td >3500</td>
<td >Thách Đấu</td>
<td></td>
</tr>
<tr>
<td >9 </td>
<td >Trùm Nón</td>
<td >3480</td>
<td >Thách Đấu</td>
<td></td>
</tr>
<tr>
<td > 10</td>
<td >Trùm Kín</td>
<td >3450</td>
<td >Thách Đấu</td>
<td></td>
</tr>
</table>
</body>
4.1.2. Màn hình đăng nhập
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{title}}</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<div class = "col-md-12">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home">LOL QUESTION</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class= "active"> <a routerLink="/login" routerLinkActive="active">Đăng Nhập</a></li>
<li><a routerLink="/answer" routerLinkActive="active">Câu hỏi</a></li>
<li><a routerLink="/story" routerLinkActive="active">Truyền Thuyết</a></li>
</ul>
</div>
</div>
</nav>
</div>
<form class="form-horizontal">
<h2 class="form-signin-heading">Đăng nhập</h2>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Mật Khẩu</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword3" placeholder="Mật Khẩu">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<div class="checkbox">
<label>
<input type="checkbox"> Nhớ tài khoản
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button type="submit" class="btn btn-lg btn-primary" >Đăng nhập</button>
<button type="submit" class="btn btn-lg btn-primary ">Tạo tài khoản mới</button>
</div>
</div>
</form>
</body>
</html>
4.1.3. Màn hình trả lời câu hỏi
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{title}}</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
padding: 50px 0px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="home">LOL QUESTION</a></li>
</ul>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <a routerLink="/login" routerLinkActive="active">Đăng Nhập</a></li>
<li class="active"><a routerLink="/answer" routerLinkActive="active">Câu hỏi</a></li>
<li><a routerLink="/story" routerLinkActive="active">Truyền Thuyết</a></li>
</ul>
</div>
</div>
</nav>
<h1 class="text-center">CÁC CÂU HỎI VỀ TƯỚNG</h1>
<div class="row">
<div class="col-md-12">
<h4>
Chọn câu trả lời đúng!
</h4>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6" id="score">
<h3>
Điểm: {{score}}
</h3>
</div>
</div>
<h3>Câu hỏi:{{questions[x].question}}:</h3>
<div class="col-md-12">
<button type="button" #vl1 value={{questions[x].ans_A}} (click)="checkAns(vl1.value)" id="ans_1">{{questions[x].ans_A}}</button>
<h4>{{C1}}</h4>
</div>
<div class="col-md-12">
<button type="button" #vl2 value={{questions[x].ans_B}} (click)="checkAns(vl2.value)" id="ans_2">{{questions[x].ans_B}}</button>
<h4>{{C2}}</h4>
</div>
<div class="col-md-12">
<button type="button" #vl3 value={{questions[x].ans_C}} (click)="checkAns(vl3.value)" id="ans_3">{{questions[x].ans_C}}</button>
<h4>{{C3}}</h4>
</div>
<div *ngIf="nextLess">
<p>Bạn được số điểm : {{score}}</p>
</div>
</div>
</body>
</html>
4.1.4. Màn hình truyền thuyết các vị tướng
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{title}}</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<router-outlet></router-outlet>
</body>
</html>