miteruzo
/
kekec_bbs

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="robots" content="noindex" />
        <title><?= ($title == '') ? '' : ($title . ' - ') ?>キケッツチャンネル お絵描き掲示板</title>
        <link rel="stylesheet" href="https://jpafonts.osdn.jp/webfonts/jpafonts.css" /> 
        <link rel="stylesheet" type="text/css" href="/style.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
        <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
        <script src="modules/colour-pad.js"></script>
    </head>

    <body>
        <!-- <div style="font-size: 500%">
            メンテ中
        </div> -->

        <div id="modal" class="modal">
            <div class="modal-content">
                <h3>Canvas のサイズを変更</h3>

                <form>
                    <div style="margin-bottom: 16px">
                        <div>
                            <label for="width">幅：</label>
                            <input type="number" id="change-width" name="width" value="480" min="32" max="640" />
                            <label>（32 〜 640）</label>
                        </div>

                        <div>
                            <label for="height">高さ：</label>
                            <input type="number" id="change-height" name="height" value="480" min="24" max="480" />
                            <label>（24 〜 480）</label>
                        </div>
                    </div>

                    <button type="button" onclick="closeModal ()">取消</button>
                    <button type="button" onclick="applyResolution ()">適用</button>
                </form>
            </div>
        </div>

        <h1><a href="."><img src="/img/kusobbs.gif" alt="クソ掲示板" style="width: 398px" /></a></h1>
        <div style="text-align: center"><a href="#" onclick="PauseMusic ()" id="mute">&emsp;</a></div>

        <?php if ($thread == -1): ?>
        <form action="make_thread.php" method="POST">
            スレ名：<input type="text" name="thread-name" /><br />
            スレ内容：<textarea name="thread-explain"></textarea><br />
            <input type="submit" value="スレ立て" />
        </form>

        <?php if ($result = $mysqli -> query ("SELECT * FROM threads WHERE id <> 1 ORDER BY latest DESC")): ?>
        <?php while ($row = $result -> fetch_assoc ()): ?>
        <table width="90%">
            <thead>
                <tr><td class="header"><a href="?thread=<?= $row['id'] ?>"><?= $row['title'] ?></a>&emsp;更新：1<?= $row['latest'] ?>&emsp;<?= $row['length'] ?> レス</td></tr>
            </thead>

            <?php if ($row['explain'] != '<p></p>'): ?>
            <tbody>
            <tr><td><?= $row['explain'] ?></td></tr>
            </tbody>
            <?php endif ?>
        </table>
        <?php endwhile ?>
        <?php endif ?>

        <?php else: ?>
        <table width="90%">
            <thead>
                <tr><td class="header"><?= $title ?></td></tr>
            </thead>

            <?php if ($explain != '<p></p>'): ?>
            <tbody>
                <tr><td><?= $explain ?></td></tr>
            </tbody>
            <?php endif ?>
        </table>

        <form id="message-form">
            <label>名前：</label><input type="text" id="user-name" name="name" /><br />
            <label>削除用パスワード：</label><input type="password" id="password" name="password" />
            <!-- <textarea id="message" name="message"></textarea> -->
        </form>

        <div id="paint">
            <div style="display: flex; justify-content: center">
                <div class="button-area" style="margin-right: 64px">
                    <button id="new">新規作成</button>
                    <button id="send">送信</button>
                    <button id="save">ダウンロード</button>
                    <button id="change-size">サイズ変更</button>
                </div>

                <div class="button-area" style="vertical-align: middle">
                    <button id="undo">←</button>
                    <button id="redo">→</button>
                </div>
            </div>

            <div style="display: flex; width: max-content; flex-direction: column">
                <div class="radio">
                    <form id="mode">
                        <label>モード：</label>
                        <label><input type="radio" name="mode" value="pen" id="pen" checked />ペン</label>
                        <label><input type="radio" name="mode" value="rubber" id="rubber" />消しゴム</label>
                        <label><input type="radio" name="mode" value="bucket" id="bucket" />塗りつぶし</label>
                    </form>
                </div>

                <div class="radio">
                    <label>取込み：</label>
                    <input id="load" type="file" onChange="LoadFile (this.files)" />
                </div>

                <div class="radio">
                    <form id="colour">
                        <label>色：</label>
                        <!-- <input type="radio" name="colour" value="black" checked="checked" />黒
                        <input type="radio" name="colour" value="blue" />ブルー
                        <input type="radio" name="colour" value="red" />赤    
                        <input type="radio" name="colour" value="magenta" />マジェンタ
                        <input type="radio" name="colour" value="lime" />ライム
                        <input type="radio" name="colour" value="cyan" />青
                        <input type="radio" name="colour" value="yellow" />イェロウ
                        <input type="radio" name="colour" value="white" />白 -->
                        <button id="colour-picker" type="button" onclick="cmanCP_JS_open(this)" cmanCPat="def_color:cns=#000000,rc_form:RGBA,rc_func:changeColour">選択</button>
                        <label id="irorororo">黒</label>
                    </form>
                </div>

                <div class="radio">
                    <form id="size">
                        <label>太さ：</label>
                        <label><input type="radio" name="size" value="1" />1</label>
                        <label><input type="radio" name="size" value="2" />2</label>
                        <label><input type="radio" name="size" value="3" checked="checked" />3</label>
                        <label><input type="radio" name="size" value="5" />5</label>
                        <label><input type="radio" name="size" value="7" />7</label>
                        <label><input type="radio" name="size" value="10" />10</label>
                        <label><input type="radio" name="size" value="15" />15</label>
                        <!-- <input type="range" name="size" min="1" max="57" value="3" /> -->
                        <label><input type="radio" name="size" value="0" />指定：
                        <input style="width: 2em" type="number" name="size" id="size-free" value="57" /></label>
                    </form>
                </div>

                <div class="radio">
                    <form id="layer">
                        <label>レイア：</label>
                        <label><input onclick="reDraw ()" type="radio" name="layer" value="0" checked="checked" />基底</label>
                        <label><input onclick="reDraw ()" type="radio" name="layer" value="1" />1</label>
                        <label><input onclick="reDraw ()" type="radio" name="layer" value="2" />2</label>
                        <button type="button" name="del">削除</button>
                        <button type="button" name="down">下へ</button>
                        <button type="button" name="up">上へ</button>
                        <button type="button" name="add">追加</button>
                        <br />
                        <label><input onclick="reDraw ()" type="checkbox" name="sep" />レイアを分けて表示</label>
                    </form>
                </div>
            </div>

            <div class="canvas-area" id="canvas-area">
                <canvas id="canvas"  width="480" height="480"></canvas>
                <!-- <canvas id="canvas1" width="480" height="480"></canvas> -->
                <!-- <canvas id="canvas2" width="480" height="480"></canvas> -->
            </div>
        </div>

        <form name="sort">
            <label>
                並べ替え：

                <select id="sort" style="font-size: 24px">
                    <option value="time-desc"<?= ($sort == 'td') ? ' selected="selected"' : '' ?>>投稿が新しい順</option>
                    <option value="evaluate-good"<?= ($sort == 'eg') ? ' selected="selected"' : '' ?>>評価が高い順</option>
                    <option value="time-asc"<?= ($sort == 'ta') ? ' selected="selected"' : '' ?>>投稿が古い順</option>
                    <option value="evaluate-bad"<?= ($sort == 'eb') ? ' selected="selected"' : '' ?>>評価が低い順</option>
                </select>
            </label>
        </form>

        <div id="bbs">
<?php
    if ($result = $mysqli -> query ("
            SELECT
              response_id as id, name, message, date, image, held, deleted, pass, good, bad, good - bad as evaluate
            FROM
              responses
            WHERE
              thread_id = $thread
            ORDER BY
              " . (($sort == 'td')
                   ? 'id DESC'
                   : (($sort == 'eg')
                      ? 'evaluate DESC, id DESC'
                      : (($sort == 'ta')
                         ? 'id ASC'
                         : (($sort == 'eb')
                            ? 'evaluate ASC, id DESC'
                            : 'id DESC')))))):
?>
            <?php while ($row = $result -> fetch_assoc ()): ?>
            <table width="90%" id="<?= $row['id'] ?>">
                <thead>
                    <tr>
                        <td class="header">
                            <div style="margin: 0 8px">
                                <div style="float: left"><?= $row['id'] ?>:
                                    <?= (($row['name'] == '')
                                         ? '名なしさん'
                                         : $row['name']) ?>
                                </div>

                                <div style="text-align: right">
                                    1<?= date ('Y/m/d H:i:s', strtotime ($row['date'])) ?>
                                </div>
                            </div>

                            <div style="display:                grid;
                                        grid-template-columns:  auto <?= ($row['good'] + $row['bad'] == 0) ? '.48fr' : ((.96 * $row['bad'] / ($row['good'] + $row['bad'])) . 'fr') ?> <?= ($row['good'] + $row['bad'] == 0) ? '.48fr' : ((.96 * $row['good'] / ($row['good'] + $row['bad'])) . 'fr') ?> auto;
                                        align-items:            center;
                                        margin-top:             8px;
                                        margin-left:            auto;
                                        margin-right:           auto;
                                        width:                  90%;
                                        font-size:              80%">
                                <div style="grid-columns: 1; text-align: left;">
                                    <a style="color: blue; white-space: nowrap" title="低評価"
                                       href="?thread=<?= $thread ?>&sort=<?= $sort ?>&evaluate=bad&id=<?= $row['id'] ?>#<?= $row['id'] ?>">
                                        <i class="fas fa-thumbs-down"></i>&thinsp;<?= $row['bad'] ?>
                                    </a>
                                </div>

                                <div style="grid-columns:       2;
                                            background-color:   blue;
                                            text-align:         center;
                                            height:             40%">
                                    &nbsp;
                                </div>

                                <div style="grid-columns:       3;
                                            background-color:   red;
                                            text-align:         center;
                                            height:             40%">
                                    &nbsp;
                                </div>

                                <div style="grid-columns: 4; text-align: right">
                                    <a style="color: red" title="高評価" href="?thread=<?= $thread ?>&sort=<?= $sort ?>&evaluate=good&id=<?= $row['id'] ?>#<?= $row['id'] ?>">
                                        <?= $row['good'] ?>&thinsp;<i class="fas fa-thumbs-up"></i>
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </thead>

                <tbody>
                    <?php if ($row['deleted']): ?>
                    <tr><td><p>削除されました．</p></td></tr>
                    <?php elseif ($row['held']): ?>
                    <tr><td><p>確認中です．</p></td></tr>
                    <?php else: ?>
                    <tr><td class="illust" style="display: grid; grid-template-columns: .375fr auto .375fr; align-items: end"><div style="grid-columns: 1"></div><div style="grid-columns: 2; text-align: center"><img style="border: solid 1px"src="<?= $dir . $row['image'] ?>" /></div><div style="grid-columns: 3; justify-self: end; margin-right: 8px; margin-bottom: 8px; font-size: 80%"><a href="#del" onclick="deletePost (<?= $row['id'] ?>)">削除</a></div></td></tr>
                    <?php endif ?>
                </tbody>
            </table>
            <?php endwhile ?>

<?php
        // MySQL を閉ぢる．
        $result -> close ();
    endif;
?>
        </div>

        <h3 id="del">レス削除</h3>
        削除したいレス番号と削除用パスワードを入力して &ldquo;削除&rdquo; を押してください．<br />
        <label>レス番号：</label><input type="text" id="del-id" /><br />
        <label>削除用パスワード：</label><input type="password" id="del-pass" /><br />
        <button id="delete" onclick="deletePostReally ()">削除</button>
        <?php endif ?>

        <hr />

        <footer>
            <div class="attention">
                このサイトでは，<a href="https://moji.or.jp/ipafont/license/" target="_blank">IPA フォントライセンス v1.0</a> で公開されてゐる <a href="https://jpafonts.osdn.jp/" target="_blank">JPA フォント</a>を使用してゐます．
            </div>

            <div class="copyright">
                &copy; このペィジへの投稿は，すべて，パブリック・ドメインとします．
            </div>
        </footer>

        <canvas style="display: none" width="1" height="1" id="work"></canvas>
        <canvas style="display: none" width="480" height="480" id="canvas-perfect"></canvas>

        <script type="text/javascript" src="script.js"></script>

        <?php if ($thread != -1): ?>
        <script type="text/javascript" src="paint.js"></script>
        <?php endif ?>
    </body>
</html>