調整樣式
This commit is contained in:
Raymond Yang
parent
c2641714c3
commit
c14e4cd1c3
126
css/style.css
126
css/style.css
@ -6,10 +6,14 @@ table {
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 10px 20px;
|
||||
padding: 5px 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid #2c6a99;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #000000;
|
||||
}
|
||||
@ -23,13 +27,13 @@ a:visited {
|
||||
/* 已訪問超連結 */
|
||||
|
||||
a:hover {
|
||||
color: #1aff00;
|
||||
color: #1070c4;
|
||||
}
|
||||
|
||||
/* 滑鼠移動到超連結上 */
|
||||
|
||||
a:active {
|
||||
color: #396035;
|
||||
color: #0d5da3;
|
||||
}
|
||||
|
||||
/* 滑鼠點選時 */
|
||||
@ -37,19 +41,31 @@ a:active {
|
||||
h1 {
|
||||
text-align: center;
|
||||
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 {
|
||||
text-align: center;
|
||||
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 {
|
||||
text-align: center;
|
||||
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 {
|
||||
@ -62,40 +78,98 @@ h4 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-family: 'Arial', system-ui
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-weight: bold;
|
||||
font-family: 'Arial', system-ui
|
||||
input[type="text"], input[type="number"] {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
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"] {
|
||||
width: 100%;
|
||||
outline: #1aff00;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
outline: #1aff00;
|
||||
input[type="text"], input[type="number"] {
|
||||
outline:none;
|
||||
}
|
||||
|
||||
input[type="date"] {
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
font-family: 'Arial', system-ui
|
||||
padding: 5px;
|
||||
font-size: 16px;
|
||||
border-width: 1px;
|
||||
border-color: #07407d;
|
||||
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 {
|
||||
width: 40%;
|
||||
input[type="date"] {
|
||||
outline:none;
|
||||
}
|
||||
|
||||
/*button {
|
||||
width: auto;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
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
216
edit.html
@ -1,95 +1,147 @@
|
||||
<!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>
|
||||
<body>
|
||||
<h1 id="title">新增/修改紀錄</h1>
|
||||
<hr>
|
||||
<h4>填寫方式：掉刀填0，正常出刀填X周-Y王。傷害依照幹部規定要不要填，如不填可留空</h4>
|
||||
<hr>
|
||||
<hr />
|
||||
<h4>填寫方式：掉刀填0，正常出刀填X周-Y王。</h4>
|
||||
<br />
|
||||
<h4>傷害依照幹部規定要不要填，如不填可留空</h4>
|
||||
<hr />
|
||||
<form id="record-form">
|
||||
<table>
|
||||
<tr>
|
||||
<td><h4>第1刀正刀</h4></td>
|
||||
<td>
|
||||
<input type="text" id="knife1_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td><h4>第1刀正刀傷害</h4></td>
|
||||
<td>
|
||||
<input type="number" id="knife1_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>第1刀殘刀</h4></td>
|
||||
<td>
|
||||
<input type="text" id="knife1c_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td><h4>第1刀殘刀傷害</h4></td>
|
||||
<td>
|
||||
<input type="number" id="knife1c_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<table>
|
||||
<tr>
|
||||
<td><h4>第2刀正刀</h4></td>
|
||||
<td>
|
||||
<input type="text" id="knife2_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td><h4>第2刀正刀傷害</h4></td>
|
||||
<td>
|
||||
<input type="number" id="knife2_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>第2刀殘刀</h4></td>
|
||||
<td>
|
||||
<input type="text" id="knife2c_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td><h4>第2刀殘刀傷害</h4></td>
|
||||
<td>
|
||||
<input type="number" id="knife2c_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<table>
|
||||
<tr>
|
||||
<td><h4>第3刀正刀</h4></td>
|
||||
<td>
|
||||
<input type="text" id="knife3_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td><h4>第3刀正刀傷害</h4></td>
|
||||
<td>
|
||||
<input type="number" id="knife3_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>第3刀殘刀</h4></td>
|
||||
<td>
|
||||
<input type="text" id="knife3c_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td><h4>第3刀殘刀傷害</h4></td>
|
||||
<td>
|
||||
<input type="number" id="knife3c_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<p><button type="submit">送出</button></p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<h5>第1刀<br />正刀</h5>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="knife1_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>
|
||||
<h5>第1刀<br />正刀傷害</h5>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="knife1_damage"
|
||||
placeholder="ex: 12000000"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h5>第1刀<br />殘刀</h5>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="knife1c_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>
|
||||
<h5>第1刀<br />殘刀傷害</h5>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="knife1c_damage"
|
||||
placeholder="ex: 12000000"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<h5>第2刀<br />正刀</h5>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="knife2_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>
|
||||
<h5>第2刀<br />正刀傷害</h5>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="knife2_damage"
|
||||
placeholder="ex: 12000000"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h5>第2刀<br />殘刀</h5>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="knife2c_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>
|
||||
<h5>第2刀<br />殘刀傷害</h5>
|
||||
</td>
|
||||
<td>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
@ -17,9 +17,11 @@
|
||||
<!--p>
|
||||
<a href="new.html">我要填表</a>
|
||||
</p-->
|
||||
<div class="center">
|
||||
<label for="queryDate">日期篩選：</label>
|
||||
<input type="date" id="queryDate">
|
||||
<button onclick="getDate()">設定日期</button>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
|
||||
|
||||
66
js/index.js
66
js/index.js
@ -16,19 +16,19 @@ document.getElementById("body").appendChild(table);
|
||||
// Creating and adding data to first row of the table
|
||||
let row_1 = document.createElement("tr");
|
||||
let heading_1 = document.createElement("th");
|
||||
heading_1.innerHTML = "成員名稱";
|
||||
heading_1.innerHTML = "<h4>成員名稱</h4>";
|
||||
let heading_2 = document.createElement("th");
|
||||
heading_2.innerHTML = "1<br>正刀";
|
||||
heading_2.innerHTML = "<h4>1<br>正刀</h4>";
|
||||
let heading_3 = document.createElement("th");
|
||||
heading_3.innerHTML = "1<br>殘刀";
|
||||
heading_3.innerHTML = "<h4>2<br>正刀</h4>";
|
||||
let heading_4 = document.createElement("th");
|
||||
heading_4.innerHTML = "2<br>正刀";
|
||||
heading_4.innerHTML = "<h4>3<br>正刀</h4>";
|
||||
let heading_5 = document.createElement("th");
|
||||
heading_5.innerHTML = "2<br>殘刀";
|
||||
heading_5.innerHTML = "<h4>1<br>殘刀</h4>";
|
||||
let heading_6 = document.createElement("th");
|
||||
heading_6.innerHTML = "3<br>正刀";
|
||||
heading_6.innerHTML = "<h4>2<br>殘刀</h4>";
|
||||
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_2);
|
||||
@ -62,21 +62,21 @@ axios.get("https://pcredive.ray650128.com/backend/api/record", {
|
||||
const item = data[i];
|
||||
|
||||
if (item.record !== null) {
|
||||
row_2_data_1.innerHTML = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>";
|
||||
row_2_data_2.innerHTML = item.record.record1.boss;
|
||||
row_2_data_3.innerHTML = item.record.record1c.boss;
|
||||
row_2_data_4.innerHTML = item.record.record2.boss;
|
||||
row_2_data_5.innerHTML = item.record.record2c.boss;
|
||||
row_2_data_6.innerHTML = item.record.record3.boss;
|
||||
row_2_data_7.innerHTML = item.record.record3c.boss;
|
||||
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>";
|
||||
} else {
|
||||
row_2_data_1.innerHTML = item.member.playerName;
|
||||
row_2_data_2.innerHTML = "";
|
||||
row_2_data_3.innerHTML = "";
|
||||
row_2_data_4.innerHTML = "";
|
||||
row_2_data_5.innerHTML = "";
|
||||
row_2_data_6.innerHTML = "";
|
||||
row_2_data_7.innerHTML = "";
|
||||
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.appendChild(row_2_data_1);
|
||||
@ -125,21 +125,21 @@ function getDate() {
|
||||
const item = data[i];
|
||||
|
||||
if (item.record !== null) {
|
||||
row_2_data_1.innerHTML = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>";
|
||||
row_2_data_2.innerHTML = item.record.record1.boss;
|
||||
row_2_data_3.innerHTML = item.record.record1c.boss;
|
||||
row_2_data_4.innerHTML = item.record.record2.boss;
|
||||
row_2_data_5.innerHTML = item.record.record2c.boss;
|
||||
row_2_data_6.innerHTML = item.record.record3.boss;
|
||||
row_2_data_7.innerHTML = item.record.record3c.boss;
|
||||
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>";
|
||||
} else {
|
||||
row_2_data_1.innerHTML = item.member.playerName;
|
||||
row_2_data_2.innerHTML = "";
|
||||
row_2_data_3.innerHTML = "";
|
||||
row_2_data_4.innerHTML = "";
|
||||
row_2_data_5.innerHTML = "";
|
||||
row_2_data_6.innerHTML = "";
|
||||
row_2_data_7.innerHTML = "";
|
||||
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.appendChild(row_2_data_1);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user