ray650128/PcReDiveClanRecordFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

整理css

Browse Source
This commit is contained in:
Raymond Yang 2023-06-29 10:36:01 +08:00
parent 9b65cf9bcc
commit ba08080ee1
8 changed files with 352 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
css/style.css
View File

@ -39,49 +39,7 @@ a:active {
/* 滑鼠點選時 */
h1 {
text-align: center;
font-weight: bold;
font-family: 'Arial Black', system-ui;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
h2 {
text-align: center;
font-weight: bold;
font-family: 'Arial Black', system-ui;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
h3 {
text-align: center;
font-weight: bold;
font-family: 'Arial Black', system-ui;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
h4 {
text-align: center;
font-weight: bold;
font-family: 'Arial Black', system-ui;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
h5 {
text-align: center;
font-weight: bold;
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, label {
font-family: 'Arial', system-ui;
margin-top: 0;
margin-bottom: 0;
@ -89,14 +47,9 @@ h5 {
margin-right: 0;
}
h6 {
.centerText {
text-align: center;
/*font-weight: bold;*/
font-family: 'Arial', system-ui;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
p {
@ -112,7 +65,7 @@ input[type="text"], input[type="number"] {
font-size: 16px;
border-width: 1px;
border-color: #07407d;
background-color: #ffffff;
background-color: #ffffffe0;
color: #000000;
box-sizing: border-box;
border-style: solid;
@ -129,12 +82,12 @@ input[type="date"] {
font-size: 16px;
border-width: 1px;
border-color: #07407d;
background-color: #ffffff;
background-color: #ffffffe0;
color: #000000;
border-style: solid;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(66,66,66,.75);
text-shadow: -50px 0px 0px rgba(66,66,66,.0);
/*box-shadow: 0px 0px 5px rgba(66,66,66,.75);*/
/*text-shadow: -50px 0px 0px rgba(66,66,66,.0);*/
font-family: 'Arial', system-ui
}
@ -176,6 +129,40 @@ button:active {
background: linear-gradient(to bottom, #2c6a99, #0d5da3);
}
.button_red {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 20px;
border: 1px solid #7d0707;
border-radius: 8px;
background: #ff4a4a;
background: -webkit-gradient(linear, left top, left bottom, from(#ff4a4a), to(#a30d0d));
background: -moz-linear-gradient(top, #ff4a4a, #a30d0d);
background: linear-gradient(to bottom, #ff4a4a, #a30d0d);
text-shadow: #591717 1px 1px 1px;
/*font: normal normal bold 15px arial;*/
font-family: 'Arial', system-ui;
color: #ffffff;
text-decoration: none;
}
.button_red:hover,
.button_red:focus {
border: 1px solid #c80b0b;
background: #ff5959;
background: -webkit-gradient(linear, left top, left bottom, from(#ff5959), to(#c41010));
background: -moz-linear-gradient(top, #ff5959, #c41010);
background: linear-gradient(to bottom, #ff5959, #c41010);
color: #ffffff;
text-decoration: none;
}
.button_red:active {
background: #992c2c;
background: -webkit-gradient(linear, left top, left bottom, from(#992c2c), to(#a30d0d));
background: -moz-linear-gradient(top, #992c2c, #a30d0d);
background: linear-gradient(to bottom, #992c2c, #a30d0d);
}
.center {
width: fit-content;
height: 40px;
@ -185,8 +172,3 @@ button:active {
html {
background-image: url("../img/background.jpg");
}
label {
font-family: 'Arial', system-ui;
font-weight: bold;
}

104
edit.html
View File

@ -14,7 +14,7 @@
</head>
<body>
<h1 id="title">新增/修改紀錄</h1>
<h1 class="centerText" id="title">新增/修改紀錄</h1>
<hr />
<h4>填寫方式：掉刀填0，正常出刀填X周-Y王。</h4>
<br />
@ -23,16 +23,16 @@
<form id="record-form">
<table>
<tr>
<td style="width: 15%;">
<h5>第1刀<br />正刀</h5>
<td style="width: 15%">
<h5 class="centerText">第1刀<br />正刀</h5>
</td>
<td style="width: 25%;">
<td style="width: 25%">
<input type="text" id="knife1_boss" placeholder="x周-y王" />
</td>
<td style="width: 20%;">
<h5>第1刀<br />正刀傷害</h5>
<td style="width: 20%">
<h5 class="centerText">第1刀<br />正刀傷害</h5>
</td>
<td style="width: 40%;">
<td style="width: 40%">
<input
type="number"
id="knife1_damage"
@ -41,79 +41,99 @@
</td>
</tr>
<tr>
<td style="width: 15%;">
<h5>第1刀<br />殘刀</h5>
<td style="width: 15%">
<h5 class="centerText">第1刀<br />殘刀</h5>
</td>
<td style="width: 25%;">
<td style="width: 25%">
<input type="text" id="knife1c_boss" placeholder="x周-y王" />
</td>
<td style="width: 20%;">
<h5>第1刀<br />殘刀傷害</h5>
<td style="width: 20%">
<h5 class="centerText">第1刀<br />殘刀傷害</h5>
</td>
<td style="width: 40%;">
<input type="number" id="knife1c_damage" placeholder="ex: 12000000"/>
<td style="width: 40%">
<input
type="number"
id="knife1c_damage"
placeholder="ex: 12000000"
/>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td style="width: 15%;">
<h5>第2刀<br />正刀</h5>
<td style="width: 15%">
<h5 class="centerText">第2刀<br />正刀</h5>
</td>
<td style="width: 25%;">
<td style="width: 25%">
<input type="text" id="knife2_boss" placeholder="x周-y王" />
</td>
<td style="width: 20%;">
<h5>第2刀<br />正刀傷害</h5>
<td style="width: 20%">
<h5 class="centerText">第2刀<br />正刀傷害</h5>
</td>
<td style="width: 40%;">
<input type="number" id="knife2_damage" placeholder="ex: 12000000"/>
<td style="width: 40%">
<input
type="number"
id="knife2_damage"
placeholder="ex: 12000000"
/>
</td>
</tr>
<tr>
<td style="width: 15%;">
<h5>第2刀<br />殘刀</h5>
<td style="width: 15%">
<h5 class="centerText">第2刀<br />殘刀</h5>
</td>
<td style="width: 25%;">
<td style="width: 25%">
<input type="text" id="knife2c_boss" placeholder="x周-y王" />
</td>
<td style="width: 20%;">
<h5>第2刀<br />殘刀傷害</h5>
<td style="width: 20%">
<h5 class="centerText">第2刀<br />殘刀傷害</h5>
</td>
<td style="width: 40%;">
<input type="number" id="knife2c_damage" placeholder="ex: 12000000"/>
<td style="width: 40%">
<input
type="number"
id="knife2c_damage"
placeholder="ex: 12000000"
/>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td style="width: 15%;">
<h5>第3刀<br />正刀</h5>
<td style="width: 15%">
<h5 class="centerText">第3刀<br />正刀</h5>
</td>
<td style="width: 25%;">
<td style="width: 25%">
<input type="text" id="knife3_boss" placeholder="x周-y王" />
</td>
<td style="width: 20%;">
<h5>第3刀<br />正刀傷害</h5>
<td style="width: 20%">
<h5 class="centerText">第3刀<br />正刀傷害</h5>
</td>
<td style="width: 40%;">
<input type="number" id="knife3_damage" placeholder="ex: 12000000"/>
<td style="width: 40%">
<input
type="number"
id="knife3_damage"
placeholder="ex: 12000000"
/>
</td>
</tr>
<tr>
<td style="width: 15%;">
<h5>第3刀<br />殘刀</h5>
<td style="width: 15%">
<h5 class="centerText">第3刀<br />殘刀</h5>
</td>
<td style="width: 25%;">
<td style="width: 25%">
<input type="text" id="knife3c_boss" placeholder="x周-y王" />
</td>
<td style="width: 20%;">
<h5>第3刀<br />殘刀傷害</h5>
<td style="width: 20%">
<h5 class="centerText">第3刀<br />殘刀傷害</h5>
</td>
<td style="width: 40%;">
<input type="number" id="knife3c_damage" placeholder="ex: 12000000"/>
<td style="width: 40%">
<input
type="number"
id="knife3c_damage"
placeholder="ex: 12000000"
/>
</td>
</tr>
</table>

2
index.html
View File

@ -12,7 +12,7 @@
</head>
<body id="body">
<h1>填表系統</h1>
<h1 class="centerText">填表系統</h1>
<hr>
<!--p>
<a href="new.html">我要填表</a>

28
js/index.js
View File

@ -113,21 +113,21 @@ function getDateOfRecords() {
const item = data[i];
if (item.record !== null) {
row_2_data_1.innerHTML = "<h5><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a><h5>";
row_2_data_2.innerHTML = "<h5>" + item.record.record1.boss + "</h5>";
row_2_data_3.innerHTML = "<h5>" + item.record.record2.boss + "</h5>";
row_2_data_4.innerHTML = "<h5>" + item.record.record3.boss + "</h5>";
row_2_data_5.innerHTML = "<h5>" + item.record.record1c.boss + "</h5>";
row_2_data_6.innerHTML = "<h5>" + item.record.record2c.boss + "</h5>";
row_2_data_7.innerHTML = "<h5>" + item.record.record3c.boss + "</h5>";
row_2_data_1.innerHTML = "<h5 class=\"centerText\"><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a></h5>";
row_2_data_2.innerHTML = "<h5 class=\"centerText\">" + item.record.record1.boss + "</h5>";
row_2_data_3.innerHTML = "<h5 class=\"centerText\">" + item.record.record2.boss + "</h5>";
row_2_data_4.innerHTML = "<h5 class=\"centerText\">" + item.record.record3.boss + "</h5>";
row_2_data_5.innerHTML = "<h5 class=\"centerText\">" + item.record.record1c.boss + "</h5>";
row_2_data_6.innerHTML = "<h5 class=\"centerText\">" + item.record.record2c.boss + "</h5>";
row_2_data_7.innerHTML = "<h5 class=\"centerText\">" + item.record.record3c.boss + "</h5>";
} else {
row_2_data_1.innerHTML = "<h5>" + item.member.playerName + "</h5>";
row_2_data_2.innerHTML = "<h5>---</h5>";
row_2_data_3.innerHTML = "<h5>---</h5>";
row_2_data_4.innerHTML = "<h5>---</h5>";
row_2_data_5.innerHTML = "<h5>---</h5>";
row_2_data_6.innerHTML = "<h5>---</h5>";
row_2_data_7.innerHTML = "<h5>---</h5>";
row_2_data_1.innerHTML = "<h5 class=\"centerText\">" + item.member.playerName + "</h5>";
row_2_data_2.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_3.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_4.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_5.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_6.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_7.innerHTML = "<h5 class=\"centerText\">---</h5>";
}
row_2.appendChild(row_2_data_1);

120
member/edit.html
View File

@ -1,61 +1,83 @@
<!DOCTYPE html>
<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<html
lang="zh-TW"
xmlns="http://www.w3.org/1999/html"
xmlns="http://www.w3.org/1999/html"
>
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>修改成員</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<link rel="stylesheet" href="../css/style.css" />
</head>
<body>
<h1>修改成員</h1>
<hr>
<body>
<h1 class="centerText">修改成員</h1>
<hr />
<form id="member-form">
<table>
<tr>
<td style="width: 30%;"><h4>成員名稱</h4></td>
<td style="width: 70%;">
<input type="text" id="nick_name" placeholder="請輸入成員 Discord 名稱" />
</td>
</tr>
<tr>
<td><h4>遊戲角色名稱</h4></td>
<td>
<input type="text" id="player_name" placeholder="請輸入遊戲主角名稱" />
</td>
</tr>
<tr>
<td><h4>遊戲UID</h4></td>
<td>
<input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
</td>
</tr>
<tr>
<td><h4>DC ID</h4></td>
<td>
<input type="text" id="discord_id" placeholder="請輸入 Discord user ID" />
</td>
</tr>
<tr>
<td><h4>是否離開戰隊</h4></td>
<td>
<input type="radio" id="leave_true" name="is_leave" value="true">
<label for="leave_true">是</label>
<input type="radio" id="leave_false" name="is_leave" value="false">
<label for="leave_true">否</label>
</td>
</tr>
</table>
<hr />
<!--p><button type="submit">送出</button></p-->
<p><button id="submit" type="button">送出</button> <button id="delete" type="button">刪除</button></p>
<table>
<tr>
<td style="width: 30%"><h4>成員名稱</h4></td>
<td style="width: 70%">
<input
type="text"
id="nick_name"
placeholder="請輸入成員 Discord 名稱"
/>
</td>
</tr>
<tr>
<td><h4>遊戲角色名稱</h4></td>
<td>
<input
type="text"
id="player_name"
placeholder="請輸入遊戲主角名稱"
/>
</td>
</tr>
<tr>
<td><h4>遊戲UID</h4></td>
<td>
<input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
</td>
</tr>
<tr>
<td><h4>DC ID</h4></td>
<td>
<input
type="text"
id="discord_id"
placeholder="請輸入 Discord user ID"
/>
</td>
</tr>
<tr>
<td><h4>是否離開戰隊</h4></td>
<td>
<input type="radio" id="leave_true" name="is_leave" value="true" />
<label for="leave_true">是</label>
<input
type="radio"
id="leave_false"
name="is_leave"
value="false"
/>
<label for="leave_true">否</label>
</td>
</tr>
</table>
<hr />
<!--p><button type="submit">送出</button></p-->
<p>
<button id="submit" type="button">送出</button>
<button class="button_red" id="delete" type="button">刪除</button>
</p>
</form>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="./js/edit.js"></script>
</body>
</html>
</body>
</html>

2
member/index.html
View File

@ -12,7 +12,7 @@
</head>
<body id="body">
<h1>成員管理</h1>
<h1 class="centerText">成員管理</h1>
<hr>
<h4><a href="./new.html">新增成員</a></h4>
<hr>

106
member/new.html
View File

@ -1,51 +1,65 @@
<!DOCTYPE html>
<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<html
lang="zh-TW"
xmlns="http://www.w3.org/1999/html"
xmlns="http://www.w3.org/1999/html"
>
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>新增成員</title>
<link rel="stylesheet" href="../css/style.css" />
</head>
<title>新增成員</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body id="body">
<h1>新增成員</h1>
<hr>
<form id="member-form">
<table>
<tr>
<td style="width: 30%;"><h4>成員名稱</h4></td>
<td style="width: 70%;">
<input type="text" id="nick_name" placeholder="請輸入成員 Discord 名稱" />
</td>
</tr>
<tr>
<td><h4>遊戲角色名稱</h4></td>
<td>
<input type="text" id="player_name" placeholder="請輸入遊戲主角名稱" />
</td>
</tr>
<tr>
<td><h4>遊戲UID</h4></td>
<td>
<input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
</td>
</tr>
<tr>
<td><h4>DC ID</h4></td>
<td>
<input type="text" id="discord_id" placeholder="請輸入 Discord user ID" />
</td>
</tr>
</table>
<body id="body">
<h1 class="centerText">新增成員</h1>
<hr />
<p><button type="submit">送出</button></p>
</form>
<form id="member-form">
<table>
<tr>
<td style="width: 30%"><h4>成員名稱</h4></td>
<td style="width: 70%">
<input
type="text"
id="nick_name"
placeholder="請輸入成員 Discord 名稱"
/>
</td>
</tr>
<tr>
<td><h4>遊戲角色名稱</h4></td>
<td>
<input
type="text"
id="player_name"
placeholder="請輸入遊戲主角名稱"
/>
</td>
</tr>
<tr>
<td><h4>遊戲UID</h4></td>
<td>
<input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
</td>
</tr>
<tr>
<td><h4>DC ID</h4></td>
<td>
<input
type="text"
id="discord_id"
placeholder="請輸入 Discord user ID"
/>
</td>
</tr>
</table>
<hr />
<p><button type="submit">送出</button></p>
</form>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="./js/new.js"></script>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="./js/new.js"></script>
</body>
</html>

200
new.html
View File

@ -1,104 +1,108 @@
<!DOCTYPE html>
<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<html
lang="zh-TW"
xmlns="http://www.w3.org/1999/html"
xmlns="http://www.w3.org/1999/html"
>
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>新增紀錄</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<title>新增紀錄</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body id="body">
<h1>新增紀錄</h1>
<hr>
<h4>填寫方式：掉刀填0，正常出刀填X周-Y王。傷害依照幹部規定要不要填，如不填可留空</h4>
<hr>
<form id="record-form">
<table>
<tr>
<td>請選擇你的名字</td>
<td>
<select id="member_select"></select>
</td>
</tr>
</table>
<body id="body">
<h1 class="centerText">新增紀錄</h1>
<hr />
<table>
<tr>
<td>第1刀正刀</td>
<td>
<input type="text" id="knife1_boss" placeholder="x周-y王" />
</td>
<td>第1刀正刀傷害</td>
<td>
<input type="text" id="knife1_damage" placeholder="ex: 12000000" />
</td>
</tr>
<tr>
<td>第1刀殘刀</td>
<td>
<input type="text" id="knife1c_boss" placeholder="x周-y王" />
</td>
<td>第1刀殘刀傷害</td>
<td>
<input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
</td>
</tr>
</table>
<h4>
填寫方式：掉刀填0，正常出刀填X周-Y王。傷害依照幹部規定要不要填，如不填可留空
</h4>
<hr />
<table>
<tr>
<td>第2刀正刀</td>
<td>
<input type="text" id="knife2_boss" placeholder="x周-y王" />
</td>
<td>第2刀正刀傷害</td>
<td>
<input type="text" id="knife2_damage" placeholder="ex: 12000000" />
</td>
</tr>
<tr>
<td>第2刀殘刀</td>
<td>
<input type="text" id="knife2c_boss" placeholder="x周-y王" />
</td>
<td>第2刀殘刀傷害</td>
<td>
<input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>第3刀正刀</td>
<td>
<input type="text" id="knife3_boss" placeholder="x周-y王" />
</td>
<td>第3刀正刀傷害</td>
<td>
<input type="text" id="knife3_damage" placeholder="ex: 12000000" />
</td>
</tr>
<tr>
<td>第3刀殘刀</td>
<td>
<input type="text" id="knife3c_boss" placeholder="x周-y王" />
</td>
<td>第3刀殘刀傷害</td>
<td>
<input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
</td>
</tr>
</table>
<hr />
<p><button type="submit">送出</button></p>
</form>
<form id="record-form">
<table>
<tr>
<td>請選擇你的名字</td>
<td>
<select id="member_select"></select>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>第1刀正刀</td>
<td>
<input type="text" id="knife1_boss" placeholder="x周-y王" />
</td>
<td>第1刀正刀傷害</td>
<td>
<input type="text" id="knife1_damage" placeholder="ex: 12000000" />
</td>
</tr>
<tr>
<td>第1刀殘刀</td>
<td>
<input type="text" id="knife1c_boss" placeholder="x周-y王" />
</td>
<td>第1刀殘刀傷害</td>
<td>
<input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>第2刀正刀</td>
<td>
<input type="text" id="knife2_boss" placeholder="x周-y王" />
</td>
<td>第2刀正刀傷害</td>
<td>
<input type="text" id="knife2_damage" placeholder="ex: 12000000" />
</td>
</tr>
<tr>
<td>第2刀殘刀</td>
<td>
<input type="text" id="knife2c_boss" placeholder="x周-y王" />
</td>
<td>第2刀殘刀傷害</td>
<td>
<input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>第3刀正刀</td>
<td>
<input type="text" id="knife3_boss" placeholder="x周-y王" />
</td>
<td>第3刀正刀傷害</td>
<td>
<input type="text" id="knife3_damage" placeholder="ex: 12000000" />
</td>
</tr>
<tr>
<td>第3刀殘刀</td>
<td>
<input type="text" id="knife3c_boss" placeholder="x周-y王" />
</td>
<td>第3刀殘刀傷害</td>
<td>
<input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
</td>
</tr>
</table>
<hr />
<p><button type="submit">送出</button></p>
</form>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="./js/new.js"></script>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="./js/new.js"></script>
</body>
</html>