| @@ -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; | |||
| } | |||