<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    h1 {
        padding: 0.4em 0.5em;
        /*文字の上下 左右の余白*/
        color: #494949;
        /*文字色*/
        background: #f4f4f4;
        /*背景色*/
        border-left: solid 5px #7db4e6;
        /*左線*/
        border-bottom: solid 3px #d7d7d7;
        /*下線*/
    }

    /* ▼テーブル全体の装飾 */
    table.sample {
        border-collapse: collapse;
        /* テーブルの罫線を重ねて1本に見せる */
        border: 2px solid green;
        /* テーブルの外側の枠線(2pxで緑色の実線) */
    }

    /* ▼セル共通の装飾 */
    table.sample th,
    table.sample td {
        border: 1px solid green;
        /* テーブルの内側の罫線(1pxで緑色の実線) */
        padding: 0.3em;
    }

    /* ▼見出しセルの装飾 */
    table.sample th {
        background-color: #ccffcc;
        /* 背景色(淡い緑色) */
        padding: 0.3em;
        /* 内側の余白(0.3文字分) */
    }

    /* ▼リンクの上にマウスが載った際の装飾(背景色だけ指定) */
    a:hover {
        background-color: #fcfcaa;
    }

    .evaluation {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }

    .evaluation input[type='radio'] {
        display: none;
    }

    .evaluation label {
        position: relative;
        padding: 10px 10px 0;
        color: gray;
        cursor: pointer;
        font-size: 30px;
    }

    .evaluation label .text {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        color: gray;
    }

    .evaluation label:hover,
    .evaluation label:hover~label,
    .evaluation input[type='radio']:checked~label {
        color: #ffcc00;
    }

    dt {
        margin-top: 1em;
    }

    #test1 {
        width: 240px;
        height: 50px;
        background: white url(メモリ画像.gif) no-repeat 0 .6em;
    }

    #test1 label {
        display: block;
        width: 48px;
        float: left;
    }

    /* 上記↑評価１のCSS　　下記↓評価２のCSS */
    #test2 {
        width: 240px;
    }

    #test2 label,
    #test2 input {
        display: block;
    }

    #test2 label {
        width: 48px;
        float: left;
        text-indent: 6px;
    }
</style>


<body>
    <a href="/toyama_japan">キーワード選択画面に戻る<br></a>
    <h1>{{title}}</h1>
    <p>ホームページ教材</p>
    <table class="sample">
        <tr>
            <th>No.</th>
            <th>HPname</th>
            <th>評価スコア</th>
            <th>レビュー本文</th>
            <th>評価ボタン</th>
            <th>評価</th>
        </tr>
        <tr>
            <th>1</th>
            <td><a href='{{kyouzai_url1}}'>{{kyouzai_title1}}</a></td>
            <form action="/toyama_japan12_Review" method="post">
                <input type="hidden" name="number" value="0">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
            <td>
                {{score1}}
            </td>


        </tr>
        <tr>
            <th>2</th>
            <td><a href='{{kyouzai_url2}}'>{{kyouzai_title2}}</a></td>
            <form action="/toyama_japan12_Review" method="post">
                <input type="hidden" name="number" value="1">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
            <td>
                {{score2}}
            </td>


        </tr>
        <tr>
            <th>3</th>
            <td><a href='{{kyouzai_url3}}'>{{kyouzai_title3}}</a></td>
            <form action="/toyama_japan12_Review" method="post">
                <input type="hidden" name="number" value="2">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
            <td>
                {{score3}}
            </td>


        </tr>
    </table>

    <p>★未評価HP★</p>
    <table class="sample">
        <tr>
            <th>No.</th>
            <th>HPname</th>
            <th>評価スコア</th>
            <th>レビュー本文</th>
            <th>評価ボタン</th>
        </tr>
        <tr>
            <th>1</th>
            <td><a href='{{mihyouka_url1}}'>{{mihyouka_title1}}</a></td>
            <form action="/toyama_japan12_mihyouka_Review" method="post">
                <input type="hidden" name="number" value="0">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
        </tr>
        <tr>
            <th>2</th>
            <td><a href='{{mihyouka_url2}}'>{{mihyouka_title2}}</a></td>
            <form action="/toyama_japan12_mihyouka_Review" method="post">
                <input type="hidden" name="number" value="1">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
        </tr>
        <tr>
            <th>3</th>
            <td><a href='{{mihyouka_url3}}'>{{mihyouka_title3}}</a></td>
            <form action="/toyama_japan12_mihyouka_Review" method="post">
                <input type="hidden" name="number" value="2">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
        </tr>
    </table>

    <p>★動画★</p>
    <table class="sample">
        <tr>
            <th>No.</th>
            <th>YouTubetitle</th>
            <th>評価スコア</th>
            <th>レビュー本文</th>
            <th>評価ボタン</th>
            <th>信頼性スコア</th>
        </tr>
        <tr>
            <th>1</th>
            <td>
                <iframe width="320" height="180" src="{{video_id1}}" title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
                <a href='{{video_url1}}'>{{video_title1}}</a>
            </td>

            <form action="/toyama_japan12_video" method="post">
                <input type="hidden" name="number" value="0">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
            <td>
                {{video_score1}}
            </td>
        </tr>
        <tr>
            <th>2</th>
            <td>
                <iframe width="320" height="180" src="{{video_id2}}" title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
                <a href='{{video_url2}}'>{{video_title2}}</a>
            </td>

            <form action="/toyama_japan12_video" method="post">
                <input type="hidden" name="number" value="1">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
            <td>
                {{video_score2}}
            </td>
        </tr>
        <tr>
            <th>3</th>
            <td>
                <iframe width="320" height="180" src="{{video_id3}}" title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
                <a href='{{video_url3}}'>{{video_title3}}</a>
            </td>

            <form action="/toyama_japan12_video" method="post">
                <input type="hidden" name="number" value="2">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
            <td>
                {{video_score3}}
            </td>
        </tr>
    </table>

    <p>★未評価動画★</p>
    <table class="sample">
        <tr>
            <th>No.</th>
            <th>YouTubetitle</th>
            <th>評価スコア</th>
            <th>レビュー本文</th>
            <th>評価ボタン</th>
        </tr>
        <tr>
            <th>1</th>
            <td>
                <iframe width="320" height="180" src="{{mihyouka_video_id1}}" title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
                <a href='{{mihyouka_video_url1}}'>{{mihyouka_video_title1}}</a>
            </td>

            <form action="/toyama_japan12_mihyouka_video" method="post">
                <input type="hidden" name="number" value="0">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
        </tr>
        <tr>
            <th>2</th>
            <td>
                <iframe width="320" height="180" src="{{mihyouka_video_id2}}" title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
                <a href='{{mihyouka_video_url2}}'>{{mihyouka_video_title2}}</a>
            </td>

            <form action="/toyama_japan12_mihyouka_video" method="post">
                <input type="hidden" name="number" value="1">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
        </tr>
        <tr>
            <th>3</th>
            <td>
                <iframe width="320" height="180" src="{{mihyouka_video_id3}}" title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
                <a href='{{mihyouka_video_url3}}'>{{mihyouka_video_title3}}</a>
            </td>

            <form action="/toyama_japan12_mihyouka_video" method="post">
                <input type="hidden" name="number" value="2">
                <td>
                    <select name="evaluation">
                        <option hidden>評価してね</option>
                        <option value="1">非常に悪い</option>
                        <option value="2">悪い</option>
                        <option value="3">普通</option>
                        <option value="4">良い</option>
                        <option value="5">非常に良い</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="text" placeholder="text" maxlength="500"
                        style="width: 200px; height: 50px;">
                </td>
                <td>
                    <p><input type="submit" value="評価する"></p>
                </td>
            </form>
        </tr>
    </table>



</body>

</html>