/
login-page.html
111 lines (99 loc) · 5.8 KB
/
login-page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Facebook - 登入或註冊</title>
<link rel="icon" href="./image/favicon.png">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./main.js">
</head>
<body>
<!--navbar start-->
<nav>
<img class="logo" src="./image/fb-text-logo.png" width="220px" alt="text-logo">
<table class="navbar-bar">
<tr class="title">
<th style="text-align:left;font-size:14px;">電子郵件或電話</th>
<th style="text-align:left;font-size:14px;">密碼</th>
</tr>
<tr class="input">
<td><input type="text" id="account" style="background-color:rgb(252,255,191);border:0.5px black solid;height:26px;margin-right:10px;"></td>
<td><input type="password" id="password" style="background-color:rgb(252,255,191);border:0.5px black solid;height:26px;margin-right:10px;"></td>
<td><button type="button" onclick="getUserInfo();" style="border:0.3px solid black;color:white;background-color:rgb(80,102,175);display:block;height:25px;width:40px;text-align:center;line-height:20px;font-size:12px;padding:2px;">登入</button></td>
</tr>
</table>
</nav>
<!--navbar end-->
<!--main start-->
<main>
<span class="left-container ">
<img src="./image/connection.png " width="509px " alt="connection ">
</span><span class="right-container " style="padding-top:30px ">
<h1 class="right-title " style="font-size:38px ">註冊</h1>
<p style="font-size:21px ">永遠免費!</p>
<table>
<tr>
<th><input class="personal-info " style="height:42px;width:195px;float:left; " type="text
" placeholder="姓氏 "><input class="personal-info " type="text " style="height:42px;width:195px;float:right " placeholder="名字 "></th></tr>
<tr><th><input class="personal-info " type="text " style="height:42px;width:400px " placeholder="手機號碼或電子郵件 "><th></tr>
<tr><th><input class="personal-info " type="text " style="height:42px;width:400px "placeholder="設定密碼 "><th></tr>
</table>
<p style="font-size:20px;margin-top:26px;margin-bottom:12px; ">生日</p>
<div class="birth-row">
<span class="select-col">
<form style="width:200px;"><span>
<select name="year " class="birth-select ">
<option class="birth-select " value="1993 ">1993</option>
</select>
<select name="month " class="birth-select ">
<option style="font-size:12px " value="03 ">03</option>
</select>
<select name="date " class="birth-select ">
<option value="13 ">13</option>
</select></span>
</form>
</span><span class="note-col">
<span><a href="# " style="font-size:12px;display:inline-block;text-align:left;color:rgb(68,88,149);text-decoration:none;">為什麼需要提供出生日期的<br>資料?</a></span>
</span>
</div>
<tr>
<th style="font-size:19px;margin:5px;float:left;">
<span class="girl"><input type="radio" style="margin:10px;margin-left:5px;background-color:gray;">女性</span>
<span class="boy"><input type="radio" style="margin:10px">男性</span></th>
</tr>
<p style="font-size:12px;color:gray;display:block;width:312px">一旦點擊建立帳號,就代表你同意<a href="#" style="color:rgb(68,88,149);">條款</a>,也確認你已閱讀<a href="#" style="color:rgb(68,88,149);">資料政策</a>,包括
<a href="#" style="color:rgb(68,88,149);">Cookie 的使用</a>。你會收到 Facebook 的簡訊通知,而且可以隨時選擇退出。</p>
<button type="button" style="margin-top:21px;">建立帳號</button>
</span>
</main>
<!--main end-->
<!--footer start-->
<footer>
<p class="first-row">中文(台灣) <a href="#">English (US)</a> <a href="#">Tiếng Việt</a> <a href="#">Bahasa Indonesia</a> <a href="#">ภาษาไทย</a> <a href="#">日本語</a>
<a href="#">Español</a> <a href="#">Português</a> <a href="#">Português(Brasil)</a> <a href="#">Français (France)</a>
<a href="#">Deutsch</a> <a href="#">Italiano</a>
</p>
<hr style="margin:10px;color:light-gray;text-align:left;">
<p class="second-row"><a href="#">註冊</a> <a href="#">登入</a> <a href="#">Messenger</a> <a href="#">Facebook Lite</a> <a href="#">行動版</a>
<a href="#">尋找朋友</a> <a href="#">地標</a> <a href="#">遊戲</a> <a href="#">地點</a>
<a href="#">MarketPlace</a> <a href="#">食譜</a><a href="#">運動</a> <a href="#">欣賞</a> <a href="#">Moments</a>
<a href="#">Instagram</a>
<a href="#">本地</a> <a href="#">關於</a> <a href="#">刊登廣告</a> <a href="#">建立粉絲專頁</a> <a href="#">開發人員</a>
<a href="#">工作機會</a>
<a href="#">隱私政策</a> <a href="#">Cookie</a> <a href="#">Ad Choices</a> <a href="#">使用條款</a> <a href="#">使用說明</a>
</p>
</footer>
<!--footer end-->
</body>
<script>
function getUserInfo() {
let account_element = document.getElementById("account");
let account = account_element.value;
let password_element = document.getElementById("password");
let password = account_element.value;
console.log("帳號:" + account + "\n密碼:" + password);
}
</script>
</html>