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

調整樣式

Browse Source
This commit is contained in:
Raymond Yang 2023-06-28 09:56:48 +08:00
parent c2641714c3
commit c14e4cd1c3
4 changed files with 269 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
css/style.css
View File

@ -6,10 +6,14 @@ table {
} }
th, td { th, td {
padding: 10px 20px; padding: 5px 5px;
border: 1px solid #000; border: 1px solid #000;
} }
hr {
border: 1px solid #2c6a99;
}
a:link { a:link {
color: #000000; color: #000000;
} }
@ -23,13 +27,13 @@ a:visited {
/* 已訪問超連結 */ /* 已訪問超連結 */
a:hover { a:hover {
color: #1aff00; color: #1070c4;
} }
/* 滑鼠移動到超連結上 */ /* 滑鼠移動到超連結上 */
a:active { a:active {
color: #396035; color: #0d5da3;
} }
/* 滑鼠點選時 */ /* 滑鼠點選時 */
@ -37,19 +41,31 @@ a:active {
h1 { h1 {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-family: 'Arial Black', system-ui font-family: 'Arial Black', system-ui;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
} }
h2 { h2 {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-family: 'Arial Black', system-ui font-family: 'Arial Black', system-ui;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
} }
h3 { h3 {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-family: 'Arial Black', system-ui font-family: 'Arial Black', system-ui;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
} }
h4 { h4 {
@ -62,40 +78,98 @@ h4 {
margin-right: 0; margin-right: 0;
} }
h5 {
text-align: center;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
p { p {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-family: 'Arial', system-ui font-family: 'Arial', system-ui
} }
.center { input[type="text"], input[type="number"] {
margin-left: auto; width: 100%;
margin-right: auto; max-width: 100%;
font-weight: bold; padding: 10px;
font-family: 'Arial', system-ui font-size: 16px;
border-width: 1px;
border-color: #07407d;
background-color: #ffffff;
color: #000000;
box-sizing: border-box;
border-style: solid;
border-radius: 5px;
} }
input[type="text"] { input[type="text"], input[type="number"] {
width: 100%; outline:none;
outline: #1aff00;
}
input[type="number"] {
width: 100%;
outline: #1aff00;
} }
input[type="date"] { input[type="date"] {
width: 50%; padding: 5px;
height: 30px; font-size: 16px;
font-size: medium; border-width: 1px;
font-weight: bold; border-color: #07407d;
font-family: 'Arial', system-ui background-color: #ffffff;
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);
} }
button { input[type="date"] {
width: 40%; outline:none;
}
/*button {
width: auto;
height: 30px; height: 30px;
font-weight: bold; font-weight: bold;
font-family: 'Arial', system-ui font-family: 'Arial', system-ui
}*/
button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 20px;
border: 1px solid #07407d;
border-radius: 8px;
background: #4ab1ff;
background: -webkit-gradient(linear, left top, left bottom, from(#4ab1ff), to(#0d5da3));
background: -moz-linear-gradient(top, #4ab1ff, #0d5da3);
background: linear-gradient(to bottom, #4ab1ff, #0d5da3);
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 15px arial;
color: #ffffff;
text-decoration: none;
}
button:hover,
button:focus {
border: 1px solid #0b66c8;
background: #59d4ff;
background: -webkit-gradient(linear, left top, left bottom, from(#59d4ff), to(#1070c4));
background: -moz-linear-gradient(top, #59d4ff, #1070c4);
background: linear-gradient(to bottom, #59d4ff, #1070c4);
color: #ffffff;
text-decoration: none;
}
button:active {
background: #2c6a99;
background: -webkit-gradient(linear, left top, left bottom, from(#2c6a99), to(#0d5da3));
background: -moz-linear-gradient(top, #2c6a99, #0d5da3);
background: linear-gradient(to bottom, #2c6a99, #0d5da3);
}
.center {
width: fit-content;
height: 40px;
margin: 0 auto;
} }

216
edit.html
View File

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

2
index.html
View File

@ -17,9 +17,11 @@
<!--p> <!--p>
<a href="new.html">我要填表</a> <a href="new.html">我要填表</a>
</p--> </p-->
<div class="center">
<label for="queryDate">日期篩選：</label> <label for="queryDate">日期篩選：</label>
<input type="date" id="queryDate"> <input type="date" id="queryDate">
<button onclick="getDate()">設定日期</button> <button onclick="getDate()">設定日期</button>
</div>
<hr> <hr>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

66
js/index.js
View File

@ -16,19 +16,19 @@ document.getElementById("body").appendChild(table);
// Creating and adding data to first row of the table // Creating and adding data to first row of the table
let row_1 = document.createElement("tr"); let row_1 = document.createElement("tr");
let heading_1 = document.createElement("th"); let heading_1 = document.createElement("th");
heading_1.innerHTML = "成員名稱"; heading_1.innerHTML = "<h4>成員名稱</h4>";
let heading_2 = document.createElement("th"); let heading_2 = document.createElement("th");
heading_2.innerHTML = "1<br>正刀"; heading_2.innerHTML = "<h4>1<br>正刀</h4>";
let heading_3 = document.createElement("th"); let heading_3 = document.createElement("th");
heading_3.innerHTML = "1<br>殘刀"; heading_3.innerHTML = "<h4>2<br>正刀</h4>";
let heading_4 = document.createElement("th"); let heading_4 = document.createElement("th");
heading_4.innerHTML = "2<br>正刀"; heading_4.innerHTML = "<h4>3<br>正刀</h4>";
let heading_5 = document.createElement("th"); let heading_5 = document.createElement("th");
heading_5.innerHTML = "2<br>殘刀"; heading_5.innerHTML = "<h4>1<br>殘刀</h4>";
let heading_6 = document.createElement("th"); let heading_6 = document.createElement("th");
heading_6.innerHTML = "3<br>正刀"; heading_6.innerHTML = "<h4>2<br>殘刀</h4>";
let heading_7 = document.createElement("th"); let heading_7 = document.createElement("th");
heading_7.innerHTML = "3<br>殘刀"; heading_7.innerHTML = "<h4>3<br>殘刀</h4>";
row_1.appendChild(heading_1); row_1.appendChild(heading_1);
row_1.appendChild(heading_2); row_1.appendChild(heading_2);
@ -62,21 +62,21 @@ axios.get("https://pcredive.ray650128.com/backend/api/record", {
const item = data[i]; const item = data[i];
if (item.record !== null) { if (item.record !== null) {
row_2_data_1.innerHTML = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>"; row_2_data_1.innerHTML = "<h5><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a><h5>";
row_2_data_2.innerHTML = item.record.record1.boss; row_2_data_2.innerHTML = "<h5>" + item.record.record1.boss + "</h5>";
row_2_data_3.innerHTML = item.record.record1c.boss; row_2_data_3.innerHTML = "<h5>" + item.record.record2.boss + "</h5>";
row_2_data_4.innerHTML = item.record.record2.boss; row_2_data_4.innerHTML = "<h5>" + item.record.record3.boss + "</h5>";
row_2_data_5.innerHTML = item.record.record2c.boss; row_2_data_5.innerHTML = "<h5>" + item.record.record1c.boss + "</h5>";
row_2_data_6.innerHTML = item.record.record3.boss; row_2_data_6.innerHTML = "<h5>" + item.record.record2c.boss + "</h5>";
row_2_data_7.innerHTML = item.record.record3c.boss; row_2_data_7.innerHTML = "<h5>" + item.record.record3c.boss + "</h5>";
} else { } else {
row_2_data_1.innerHTML = item.member.playerName; row_2_data_1.innerHTML = item.member.playerName;
row_2_data_2.innerHTML = ""; row_2_data_2.innerHTML = "<h5>---</h5>";
row_2_data_3.innerHTML = ""; row_2_data_3.innerHTML = "<h5>---</h5>";
row_2_data_4.innerHTML = ""; row_2_data_4.innerHTML = "<h5>---</h5>";
row_2_data_5.innerHTML = ""; row_2_data_5.innerHTML = "<h5>---</h5>";
row_2_data_6.innerHTML = ""; row_2_data_6.innerHTML = "<h5>---</h5>";
row_2_data_7.innerHTML = ""; row_2_data_7.innerHTML = "<h5>---</h5>";
} }
row_2.appendChild(row_2_data_1); row_2.appendChild(row_2_data_1);
@ -125,21 +125,21 @@ function getDate() {
const item = data[i]; const item = data[i];
if (item.record !== null) { if (item.record !== null) {
row_2_data_1.innerHTML = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>"; row_2_data_1.innerHTML = "<h5><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a><h5>";
row_2_data_2.innerHTML = item.record.record1.boss; row_2_data_2.innerHTML = "<h5>" + item.record.record1.boss + "</h5>";
row_2_data_3.innerHTML = item.record.record1c.boss; row_2_data_3.innerHTML = "<h5>" + item.record.record2.boss + "</h5>";
row_2_data_4.innerHTML = item.record.record2.boss; row_2_data_4.innerHTML = "<h5>" + item.record.record3.boss + "</h5>";
row_2_data_5.innerHTML = item.record.record2c.boss; row_2_data_5.innerHTML = "<h5>" + item.record.record1c.boss + "</h5>";
row_2_data_6.innerHTML = item.record.record3.boss; row_2_data_6.innerHTML = "<h5>" + item.record.record2c.boss + "</h5>";
row_2_data_7.innerHTML = item.record.record3c.boss; row_2_data_7.innerHTML = "<h5>" + item.record.record3c.boss + "</h5>";
} else { } else {
row_2_data_1.innerHTML = item.member.playerName; row_2_data_1.innerHTML = item.member.playerName;
row_2_data_2.innerHTML = ""; row_2_data_2.innerHTML = "<h5>---</h5>";
row_2_data_3.innerHTML = ""; row_2_data_3.innerHTML = "<h5>---</h5>";
row_2_data_4.innerHTML = ""; row_2_data_4.innerHTML = "<h5>---</h5>";
row_2_data_5.innerHTML = ""; row_2_data_5.innerHTML = "<h5>---</h5>";
row_2_data_6.innerHTML = ""; row_2_data_6.innerHTML = "<h5>---</h5>";
row_2_data_7.innerHTML = ""; row_2_data_7.innerHTML = "<h5>---</h5>";
} }
row_2.appendChild(row_2_data_1); row_2.appendChild(row_2_data_1);