@@ -10,7 +10,13 @@ | |||
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> | |||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css" /> | |||
<link href="./style.css" rel="stylesheet" /> | |||
<title>伊地知ニジカ放送局 - ニジカ返答ログ</title> | |||
<?php $april_fool = ((int) date ('n') === 4) && ((int) date ('j') === 1) ?> | |||
<?php if ($april_fool): ?> | |||
<link rel="icon" href="favicon-goatoh.ico" /> | |||
<title>ゴートうひとり放送局 - ゴートう返答ログ</title> | |||
<?php else: ?> | |||
<title>伊地知ニジカ放送局 - ニジカ返答ログ</title> | |||
<?php endif ?> | |||
</head> | |||
<body> | |||
@@ -54,14 +60,24 @@ | |||
<div class="row d-flex align-items-center my-2"> | |||
<div class="col-sm-4 fw-bold"> | |||
日時ニジカ | |||
<?php if ($april_fool): ?> | |||
ゴートう日とり | |||
<?php else: ?> | |||
日時ニジカ | |||
<?php endif ?> | |||
</div> | |||
<div class="col-sm input-group"> | |||
<input type="text" class="form-control" placeholder="YYYY-MM-DD" id="filter-date-start" | |||
<input type="text" | |||
class="form-control" | |||
placeholder="YYYY-MM-DD" | |||
id="filter-date-start" | |||
value="<?= $date_start ?>" /> | |||
<span class="input-group-text">〜</span> | |||
<input type="text" class="form-control" placeholder="YYYY-MM-DD" id="filter-date-end" | |||
<input type="text" | |||
class="form-control" | |||
placeholder="YYYY-MM-DD" | |||
id="filter-date-end" | |||
value="<?= $date_end ?>" /> | |||
</div> | |||
</div> | |||
@@ -72,7 +88,10 @@ | |||
</div> | |||
<div class="col-sm"> | |||
<input type="text" class="form-control" placeholder="ぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛" id="filter-keyword" | |||
<input type="text" | |||
class="form-control" | |||
placeholder="<?= $april_fool ? 'ムムムム!! クサタベテル!!!!!' : 'ぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛' ?>" | |||
id="filter-keyword" | |||
value="<?= $keyword ?>"/> | |||
</div> | |||
</div> | |||
@@ -101,14 +120,15 @@ | |||
<?php foreach (array_slice ($log_data, | |||
($page - 1) * $length, | |||
$length, | |||
true) as $record): ?> | |||
true) | |||
as $record): ?> | |||
<div class="mb-4"> | |||
<div> | |||
<?= $record['date_time'] ?> | |||
</div> | |||
<div> | |||
<img src="<?= $record['chat_icon'] ?>" /> | |||
<img src="<?= $record['chat_icon'] ?>" width="64" height="64" /> | |||
<?= $record['chat_name'] ?> | |||
</div> | |||
@@ -1,38 +1,61 @@ | |||
<!-- vim:set tabstop=4 softtabstop=4 expandtab :--> | |||
<nav class="d-flex justify-content-center" aria-label="..."> | |||
<ul class="pagination opacity-0"> | |||
<?php if ($page > 1): ?> | |||
<li class="page-item"> | |||
<a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (1)">|<</a> | |||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (1)"> | |||
<img src="./assets/page-first.png" /> | |||
<div class="page-link-text">|<</div> | |||
</a> | |||
</li> | |||
<?php else: ?> | |||
<li class="page-item disabled"> | |||
<span class="page-link">|<</span> | |||
<span class="page-link"> | |||
<img src="./assets/page-first.png" /> | |||
<div class="page-link-text"></div> | |||
</span> | |||
</li> | |||
<?php endif ?> | |||
<?php for ($i = max (min ($page + 10, $pages_max) - 20, 1); $i < $page; ++$i): ?> | |||
<li class="page-item page-<?= $page - $i ?>"> | |||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a> | |||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"> | |||
<img src="./assets/page-body.png" /> | |||
<div class="page-link-text"><?= $i ?></div> | |||
</a> | |||
</li> | |||
<?php endfor ?> | |||
<li class="page-item active" aria-current="page"> | |||
<span class="page-link"><?= $page ?></span> | |||
<span class="page-link"> | |||
<img src="./assets/page-body.png" /> | |||
<div class="page-link-text"><?= $page ?></div> | |||
</span> | |||
</li> | |||
<?php for ($i = $page + 1; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i): ?> | |||
<li class="page-item page-<?= $i - $page ?>"> | |||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a> | |||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"> | |||
<img src="./assets/page-body.png" /> | |||
<div class="page-link-text"><?= $i ?></div> | |||
</a> | |||
</li> | |||
<?php endfor ?> | |||
<?php if ($page < $pages_max): ?> | |||
<li class="page-item"> | |||
<a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">>|</a> | |||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)"> | |||
<img src="./assets/page-last.png" /> | |||
<div class="page-link-text">>|</div> | |||
</a> | |||
</li> | |||
<?php else: ?> | |||
<li class="page-item disabled"> | |||
<span class="page-link">>|</span> | |||
<span class="page-link"> | |||
<img src="./assets/page-last.png" /> | |||
<div class="page-link-text"></div> | |||
</span> | |||
</li> | |||
<?php endif ?> | |||
</ul> | |||
@@ -1,3 +1,5 @@ | |||
/* vim:set tabstop=2 softtabstop=2 expandtab :*/ | |||
.container-max-width | |||
{ | |||
max-width: 1600px; | |||
@@ -20,7 +22,49 @@ | |||
.page-item | |||
{ | |||
width: 3.5em; | |||
text-align: center; | |||
width: 3.5em; | |||
text-align: center; | |||
vertical-align: middle; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.page-link | |||
{ | |||
color: black; | |||
padding: 0; | |||
margin: 0; | |||
border: none; | |||
margin-right: -3px; | |||
} | |||
.page-item.active > .page-link | |||
{ | |||
font-weight: bold; | |||
font-size: 150%; | |||
} | |||
.page-item.disabled > .page-link | |||
{ | |||
color: lightgray; | |||
} | |||
.page-link-text | |||
{ | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -48%); | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.pagination | |||
{ | |||
--bs-pagination-bg: none; | |||
--bs-pagination-disabled-bg: none; | |||
--bs-pagination-hover-bg: none; | |||
--bs-pagination-active-color: none; | |||
--bs-pagination-active-bg: none; | |||
} | |||