---
# System prepended metadata

title: Web Programming Fake Webpage

---

# Web Programming Fake Webpage

Original:
![](https://i.imgur.com/9Nb9mpl.jpg)

Fake:
![](https://i.imgur.com/p59Vc1f.jpg)

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;">&nbsp;</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:right">
                        本系統採用NID驗證&nbsp;&nbsp;<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";
}
```
:::