Bootstrap に基づいて開発されたフロントエンド 12307 チケット販売 Web サイト

データベース 2023-12-27 17:31:04 訪問数: null

1. 12307 オンラインチケット販売 Web サイトのデザインの問題の説明

コンテンツと機能要件

オンラインチケット販売 Web サイトには、ホームページ、ホテル情報ページ、航空券情報ページ、鉄道チケット情報ページなど、少なくとも次のページが含まれている必要があります。

具体的には次のものが挙げられます。

ホームページには、ナビゲーション メニュー バー、検索バー、ホテル、航空券、鉄道チケット、その他の情報が必要です。

ホテル情報ページにはホテル情報の紹介が必要です。

航空券情報ページには航空券情報の紹介が必要です。

鉄道チケット情報ページには、鉄道チケット情報の紹介が必要です。

2. ブートストラップの関連用途

入門テンプレート

最新のページ設計および開発標準を使用してページが設定されていることを確認してください。つまり、HTML5 doctype を使用し、 <meta> レスポンシブ レイアウトが正しく動作するようにビューポートを設定するタグを含めます。これらの要件をまとめると、ページは次のようになります。

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>
    -->
  </body>
</html>

3. 12307オンラインチケット販売 Web サイトの設計と実装

1. ウェブサイトの企画

全体は Bootsrap フレームワークを通じて実装されています。各ページにはナビゲーション バーが必要です。ホームページでは、div 内のフォーム フォームを使用して、カルーセル画像と組み合わせて、購入する必要がある鉄道チケットや航空券に素早くジャンプできます。を画像やテキストと組み合わせて表示します 割引付きの旅行プランについては、ハイパーリンクを使用して新しいページにリンクし、ハイパーリンクと組み合わせたフレーム内の表を使用して公式発表を表示します 下部はフレームを使用してファイリングと著作権のレイアウトを実装します。

コード表示の一部:

 <nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
        <a class="navbar-brand" href="index.html">12307在线购票</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button></span>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto"><span class="border border-info">
            <li class="nav-item active">
              <a class="nav-link" href="train.html">火车票 <span class="sr-only">(current)</span></a>
            </li></span><span class="border border-info">
            <li class="nav-item">
              <a class="nav-link" href="aeroplane.html">机票</a>
            </li></span><span class="border border-info">
            <li class="nav-item">
              <a class="nav-link" href="groggery.html">酒店服务</a>
            </li></span><span class="border border-info">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                账号设置
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="login.html">登录</a>
                <a class="dropdown-item" href="zuce.html">注册</a>
            </li></span>
            
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
          </form>
        </div>
      </nav>

      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="image/lunbo-1.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
          <div class="carousel-item">
            <img src="image/lunbo-2.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
          <div class="carousel-item">
            <img src="image/lunbo-3.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>

2. 乗車券購入用Webページの設計・実装

ホームページのあるナビゲーション バーがあり、フォームを使用してデータを取得し、バックグラウンド データ (まだ実装されていません) を取得することで、以下の表の spam タグを介して電車のチケット データが表示されます。購入することを選択できます。

コード表示の一部:

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">顺序</th>
      <th scope="col">车次</th>
      <th scope="col">出发时间-到站时间</th>
      <th scope="col">出发站-终点站</th>
      <th scope="col">是否有座位</th>
      <th scope="col">备注</th>
      <th scope="col">购票</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>K1406</td>
      <td>2023/6/30 8:20-2023/6/32 9:20</td>
      <td>长春西站-成都东站</td>
      <td>硬座*6</td>
      <td></td>
      <td><button style="background-color: aquamarine;">购买</button></td>
    </tr
  </tbody>
</table>
</div><br><br>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

3. 航空券購入用Webページの設計・実装

ホーム ページにはナビゲーション バーがあり、from フォームを使用してデータを取得し、バックエンド データが取得され、下の表の spam タグを介して航空券データが表示されます。ユーザーは購入を選択し、同時に、この記事を組み合わせて割引旅行券を表示する表を作成します。

コード表示の一部:

<nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
      <a class="navbar-brand" href="index.html">12307在线购票</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button></span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"><span class="border border-info">
          <li class="nav-item active">
            <a class="nav-link" href="train.html">火车票<span class="sr-only">(current)</span></a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="aeroplane.html">机票</a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="groggery.html">酒店服务</a>
          </li></span><span class="border border-info">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              账号设置
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="login.html">登录</a>
              <a class="dropdown-item" href="zuce.html">注册</a>
          </li></span>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>


    <br><br> 
    <center>
  <div style="height: 100px;width: 90%;border:solid #aeaeae;background-color: #b5edff;">
  <div style="height: 100px;width: 100px; position:absolute;left: 110px;"><br>
  <input type="radio" name="piao">单程<br><input type="radio" name="piao">往返
  </div>
  <div style="height: 100px;width: 1100px; position:absolute;left: 210px;top: 120px; font-size: 16px;color: #737373;">
  <br>出发地&nbsp;&nbsp;<input type="text" style="border: none;" value="长春">&nbsp;&nbsp;&nbsp;&nbsp;
  目的地&nbsp;&nbsp;<input type="text" style="border: none;">&nbsp;&nbsp;&nbsp;&nbsp;
  出发日期&nbsp;<input type="date" style="border: none;">&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="x1">学生<input type="radio" name="x1">成人&nbsp;&nbsp;&nbsp;&nbsp;
    起飞时间<input type="time">&nbsp;&nbsp;
    <input type="button" onclick="f()" value="查询票务" style="width: 80px; height: 30px; background-color: rgb(29, 195, 255);border: none;border-radius: 5px;">
  </div>
  </div>
  </center>
  <br>
  
  
  
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">顺序</th>
        <th scope="col">航班</th>
        <th scope="col">出发时间-到站时间</th>
        <th scope="col">出发站-终点站</th>
        <th scope="col">是否有座位</th>
        <th scope="col">备注</th>
        <th scope="col">购票</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>川551406</td>
        <td>2023/6/30 8:20-2023/6/32 9:20</td>
        <td>长春龙嘉国际机场-成都双流国际机场</td>
        <td>商务舱*6</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>川504502</td>
        <td>2023/6/30 8:20-2023/6/32 9:14</td>
        <td>广州白云机场-成都双流国际机场</td>
        <td>候补</td>
        <td></td>
        <td><button style="background-color: rgb(127, 246, 255);">候补</button></td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>川969117</td>
        <td>2023/6/30 7:40-2023/6/32 9:14</td>
        <td>达州河市机场-长春龙嘉国际机场</td>
        <td>候补</td>
        <td></td>
        <td><button style="background-color: rgb(127, 246, 255);">候补</button></td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>南航85436</td>
        <td>2023/6/29 8:20-2023/6/31 6:14</td>
        <td>成都龙泉机场-上海国际机场</td>
        <td>经济舱*3</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>南航854402</td>
        <td>2023/7/1 16:10-2023/7/1 19:48</td>
        <td>长春龙嘉国际机场-杭州国际机场</td>
        <td>无票</td>
        <td></td>
        <td><button>购买</button></td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>川852502</td>
        <td>2023/6/30 8:40-2023/6/32 9:52</td>
        <td>深圳国际机场-成都双流机场</td>
        <td>经济舱*14</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">7</th>
        <td>京895342</td>
        <td>2023/6/29 8:01-2023/6/30 19:6</td>
        <td>北京国际机场-成都双流国际机场</td>
        <td>经济舱*16</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
    </tbody>
  </table>
  </div>

<br><br>
<center>
<table >
<tr >
  <td class="table-active"width="500px"height="60px" colspan="2" align="center"><p style="color: #5c5c5c;">周末省心游</p></td>
</tr>
<tr>
  <td class="table-primary"width="500px"height="40px">航班</td>
  <td class="table-primary"width="500px"height="40px">费用</td>
</tr>
<tr>
  <td class="table-secondary"width="500px"height="40px"><img src="image/air-1.jpg" width="150px">长春->南宁</td>
  <td class="table-secondary"width="500px"height="40px">¥540起</td>
</tr>
  <tr>
  <td class="table-success"width="500px"height="40px"><img src="image/air-2.jpg" width="150px">长春->深圳</td>
  <td class="table-success"width="500px"height="40px">¥580起</td>
</tr>
<tr>
  <td class="table-danger"width="500px"height="40px"><img src="image/air-3.jpg" width="150px">长春->上海</td>
  <td class="table-danger"width="500px"height="40px">¥640起</td>
</tr>
<tr>
  <td class="table-warning"width="500px"height="40px"><img src="image/air-4.jpg" width="150px">长春->杭州</td>
  <td class="table-warning"width="500px"height="40px">¥440起</td>
</tr>
<tr>
  <td class="table-info"width="500px"height="40px"><img src="image/air-5.jpg" width="150px">长春->呼和浩特</td>
  <td class="table-info"width="500px"height="40px">¥520起</td>
</tr>
<tr>
  <td class="table-light"width="500px"height="40px"><img src="image/air-6.jpg" width="150px">长春->成都</td>
  <td class="table-light"width="500px"height="40px">¥520起</td>
</tr>
<tr>
  <td class="table-dark"width="500px"height="40px"><img src="image/air-7.jpg" width="150px">长春->北京</td>
  <td class="table-dark"width="500px"height="40px">¥550起</td>
</tr>
</table>
</center>


  <br><br>
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

4. ホテル情報・宿泊予約ページの企画・運営

ホームページにナビゲーション バーを備え、擬似クラス セレクターと組み合わせて、ホテルの表示ページで画像のスケーリングを実現します。ホテル予約のためにユーザーから提出された情報を取得するためのフォームも作成され、データは選択されたホテルに直接送信されました。次に、カルーセル写真と組み合わせてホテルを表示します。

コード表示の一部:

<div>
  <form action="jd-cg.html">
    <table class="table table-hover">
      <thead>
        <tr>
          <th colspan="2">入住申请表单</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">酒店名称(全称)*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">申请酒店位置(精确至区县)*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住者姓名*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住者身份证类型*</th>
          <td><select>
            <option value="0">中国大陆居民身份证</option>
            <option value="1">中华人民共和国护照</option>
            <option value="2">香港特别行政区护照</option>
            <option value="3">澳门特别行政区护照</option>
          </select></td>
        </tr>
        <tr>
          <th scope="row">入住者身份证号码*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">联系方式*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住时间*</th>
          <td><input type="date">&nbsp;&nbsp;&nbsp;<input type="time"></td>
        </tr>
        <tr>
          <th scope="row">入住时长*(居住市场大于8天请与客服联系)</th>
          <td>
            <select>
              <option value="0">1</option>
              <option value="1">2</option>
              <option value="2">3</option>
              <option value="3">4</option>
              <option value="0">5</option>
              <option value="1">6</option>
              <option value="2">7</option>
              <option value="3">8</option>
            </select>天
          </td>
        </tr>
        <tr>
          <th scope="row">邮箱(非必填项)</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <center>
          <td colspan="2"><input type="submit" value="提交" style="border: solid rgb(94, 94, 94); border-radius: 3px;width: 100px;height: 40px;"></td>
        </center>
        </tr>
      </tbody>
    </table>
  </form>
</div>


<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image/jdl-1.jpg" class="d-block w-100" alt="..." width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>成都人民公园朵唯酒店</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image/jdl-2.jpg" class="d-block w-100" alt="..."  width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>长春伴这有山附属酒店</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image/jdl-3.jpg" class="d-block w-100" alt="..."  width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>成都大学附属酒店</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>

5. ログインおよび登録ページの設計と実装

ホームページのナビゲーションバーはCSSを使用してスタイルを調整し、登録情報を確認するためにJavaScriptの技術を組み合わせています。

コード表示の一部:

<script>
      function validateForm() {
  // 获取表单元素的值
  var username = document.getElementById(username).value;
  var password = document.getElementById(username).value;

  // 校验用户名：长度为 3 至 20 个字符
  if (username.length < 3 || username.length > 20) {
    alert("用户名必须在3到20个字符之间");
    return false;
  }

  // 校验密码：长度至少为 8 个字符
  if (password.length < 8) {
    alert("密码长度必须至少为8个字符");
    return false;
  }


  // 所有校验均通过，可以提交表单
  return true;
}
    </script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
      <a class="navbar-brand" href="index.html">12307在线购票</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button></span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"><span class="border border-info">
          <li class="nav-item active">
            <a class="nav-link" href="train.html">火车票<span class="sr-only">(current)</span></a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="aeroplane.html">机票</a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="groggery.html">酒店服务</a>
          </li></span><span class="border border-info">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              账号设置
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="login.html">登录</a>
              <a class="dropdown-item" href="zuce.html">注册</a>
          </li></span>
          
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>

<div class="y--2">
    <!-- <div class="anniu"> -->
      <br><br><br><br>
      <center>
      <div class="bai">
      <div class="qq1">
      <div class="qq2">&nbsp;&nbsp;&nbsp;中铁12307</div>
      </div>
      <form action="login-cg.html" method="post" onsubmit="return validateForm()">
    <h1>登录</h1><br>
    请输入账号：<br>
    <input type="text" id="username" size="37px" maxlength="12"><br>
    请输入密码：<br>
    <input type="password" id="password" size="37px" maxlength="20"><br>
    <input type="checkbox" name="a1">记住密码？
    <br>
   <!-- <input type="submit" value="注册" id="f1">&nbsp;&nbsp;&nbsp; -->
      <input type="submit" value="登录" id="f2">
      </form>
      </div>	
      </center>
  <!-- </div> -->

6. ウェブサイトのその他のページ

4.思考と感情

制作に時間がかかるため、オンライン チケット購入ウェブサイトは基本的にユーザーの要件を満たすことができ、ガイドの要件に加えてログイン ページと登録ページを追加し、同時に登録フォームを JavaScript で検証できるようにしました。

おすすめ

転載: blog.csdn.net/qq_74140417/article/details/134262565
おすすめ
中国人プログラマーの「35歳の呪い」
Lanya CorelDRAW プラグイン 2024.5.1 国際労働者の日バージョン、無料ダウンロード
ランキング
ループコントローラ
スピーカーの分類（スピーカーDiarisation）
雑音除去空気とフロートを除去するための統計的フィルタリング方法を使用して
Spring Cloudプロジェクトの構築（5）
Echarts去掉图形后面的网格线
【レジャー・楽しみ】C言語でクリスマスツリーを描く方法
ゲームが反映するように、後に＃589（本部2）ラウンドCodeforces
アレイの重複排除について知っているソリューションはいくつありますか？
NetBackupの証明書の有効期限は-nBuエラー8506に近づきます
Dockerコンテナの起動パラメータを表示する
アーカイブ
もっと
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)

コードワールド

© 2018 codetd.com