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