@@ -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 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 rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css" /> | ||||
<link href="./style.css" rel="stylesheet" /> | <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> | </head> | ||||
<body> | <body> | ||||
@@ -54,14 +60,24 @@ | |||||
<div class="row d-flex align-items-center my-2"> | <div class="row d-flex align-items-center my-2"> | ||||
<div class="col-sm-4 fw-bold"> | <div class="col-sm-4 fw-bold"> | ||||
日時ニジカ | |||||
<?php if ($april_fool): ?> | |||||
ゴートう日とり | |||||
<?php else: ?> | |||||
日時ニジカ | |||||
<?php endif ?> | |||||
</div> | </div> | ||||
<div class="col-sm input-group"> | <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 ?>" /> | value="<?= $date_start ?>" /> | ||||
<span class="input-group-text">〜</span> | <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 ?>" /> | value="<?= $date_end ?>" /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -72,7 +88,10 @@ | |||||
</div> | </div> | ||||
<div class="col-sm"> | <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 ?>"/> | value="<?= $keyword ?>"/> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -101,14 +120,15 @@ | |||||
<?php foreach (array_slice ($log_data, | <?php foreach (array_slice ($log_data, | ||||
($page - 1) * $length, | ($page - 1) * $length, | ||||
$length, | $length, | ||||
true) as $record): ?> | |||||
true) | |||||
as $record): ?> | |||||
<div class="mb-4"> | <div class="mb-4"> | ||||
<div> | <div> | ||||
<?= $record['date_time'] ?> | <?= $record['date_time'] ?> | ||||
</div> | </div> | ||||
<div> | <div> | ||||
<img src="<?= $record['chat_icon'] ?>" /> | |||||
<img src="<?= $record['chat_icon'] ?>" width="64" height="64" /> | |||||
<?= $record['chat_name'] ?> | <?= $record['chat_name'] ?> | ||||
</div> | </div> | ||||
@@ -1,38 +1,61 @@ | |||||
<!-- vim:set tabstop=4 softtabstop=4 expandtab :--> | |||||
<nav class="d-flex justify-content-center" aria-label="..."> | <nav class="d-flex justify-content-center" aria-label="..."> | ||||
<ul class="pagination opacity-0"> | <ul class="pagination opacity-0"> | ||||
<?php if ($page > 1): ?> | <?php if ($page > 1): ?> | ||||
<li class="page-item"> | <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> | </li> | ||||
<?php else: ?> | <?php else: ?> | ||||
<li class="page-item disabled"> | <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> | </li> | ||||
<?php endif ?> | <?php endif ?> | ||||
<?php for ($i = max (min ($page + 10, $pages_max) - 20, 1); $i < $page; ++$i): ?> | <?php for ($i = max (min ($page + 10, $pages_max) - 20, 1); $i < $page; ++$i): ?> | ||||
<li class="page-item page-<?= $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> | </li> | ||||
<?php endfor ?> | <?php endfor ?> | ||||
<li class="page-item active" aria-current="page"> | <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> | </li> | ||||
<?php for ($i = $page + 1; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i): ?> | <?php for ($i = $page + 1; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i): ?> | ||||
<li class="page-item page-<?= $i - $page ?>"> | <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> | </li> | ||||
<?php endfor ?> | <?php endfor ?> | ||||
<?php if ($page < $pages_max): ?> | <?php if ($page < $pages_max): ?> | ||||
<li class="page-item"> | <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> | </li> | ||||
<?php else: ?> | <?php else: ?> | ||||
<li class="page-item disabled"> | <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> | </li> | ||||
<?php endif ?> | <?php endif ?> | ||||
</ul> | </ul> | ||||
@@ -1,3 +1,5 @@ | |||||
/* vim:set tabstop=2 softtabstop=2 expandtab :*/ | |||||
.container-max-width | .container-max-width | ||||
{ | { | ||||
max-width: 1600px; | max-width: 1600px; | ||||
@@ -20,7 +22,49 @@ | |||||
.page-item | .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; | |||||
} | } | ||||