# Web Programming Fake Webpage
Original:
Fake:
Difference:
1. The font of the input and the login button
Can't find the style in the original css
2. The original one is blurier than the fake one
:::spoiler HTML
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逢甲大學OAuth服務登入</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="height:100%;font-family: 'Microsoft JhengHei';color:#666">
<div class="dialog">
<table style="width:100%">
<tbody>
<tr>
<td colspan="2">
<h4 class="dialog-title">逢甲大學 NID 登入</h4>
</td>
</tr>
<tr>
<td style="padding-bottom: 2px;">
<input type="text" class="form-control" placeholder="NID">
</td>
<td rowspan="2" style="text-align: center; vertical-align: middle;">
<input type="submit" value="登入" class="btn btn-default" style="width: 5em; height: 5em" onclick="rickroll()">
</td>
</tr>
<tr>
<td>
<input type="password" class="form-control" placeholder="Password">
</td>
</tr>
<tr>
<td style="padding:5px;">
<span style="color:red;font-size:medium;"> </span>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right">
本系統採用NID驗證 <img src="nid.gif" width="50px;"><br>
<a onclick="rickroll()" target="_blank">NID authentication</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="background">
<div class="background-image"></div>
</div>
<script src="direct.js"></script>
</body>
</html>
```
:::
:::spoiler CSS
```css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h4{
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
}
a {
color: #337ab7;
text-decoration: none;
background-color: transparent;
cursor: pointer;
}
a:focus, a:hover {
color: #23527c;
text-decoration: underline;
}
a:active, a:hover {
outline: 0;
}
a:-webkit-any-link {
cursor: pointer;
}
div {
display: block;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
margin: 0;
display: block;
background-color: #fff;
}
table {
background-color: transparent;
border-spacing: 0;
border-collapse: collapse;
text-indent: initial;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td, th {
padding: 0;
}
td {
display: table-cell;
vertical-align: inherit;
}
img {
vertical-align: middle;
overflow-clip-margin: content-box;
overflow: clip;
border: 0;
}
button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
.btn {
border-radius: 3px;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
user-select: none;
background-image: none;
border: 1px solid transparent;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
input {
writing-mode: horizontal-tb !important;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
appearance: auto;
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
}
.dialog {
margin: -115px 0px 0px -180px;
left: 50%;
top: 40%;
width: 360px;
height: 230px;
position: absolute;
background-color: white;
z-index: 10000;
border-radius: 3px;
padding: 20px 30px 20px 30px;
box-shadow: 0 2px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .1);
}
input[type="password" i] {
-webkit-text-security: disc !important;
}
.dialog-title {
font-weight: bold;
line-height: 1.5em;
color: #777;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-sizing: border-box;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.background {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
background-color: black;
border-radius: 0%;
}
.background-image {
background-image: url('fengchia.jpeg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 110%;
height: 110%;
top: -5%;
left: -5%;
position: absolute;
opacity: .6;
filter: blur(10px);
}
```
:::
:::spoiler JS
```js
function rickroll(){
window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
}
```
:::
Sign in with Wallet
Connect another wallet