HtmlMirror - スマホからHTMLソースを表示

https://lightwill.tokyo/todofuken/ のソースを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta property="og:title" content="都道府県をつくろう" />
<meta property="og:description" content="都道府県のカケラを集めて都道府県をつくろう！" />
<meta property="og:url" content="https://lightwill.tokyo/todofuken/" />
<meta property="og:image" content="https://lightwill.tokyo/todofuken/img/todofuken.png" />
<meta name="twitter:card" content="summary_large_image" />
<title>都道府県をつくろう</title>
<meta name="description" content="都道府県のカケラを集めて都道府県をつくろう！">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
  background-color: #deffad;
  color: #ad6600;
  text-align: center;
}
h1 {
  font-size: 22px;
  margin-left:5px;
}
form {
  display: inline-block;
}
.btn-selected {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}
#play, #got {
  padding: 5px;
  max-width:360px;
  margin:auto;
}
.used {
  visibility: hidden;
}
#next {
  display: none;
}
footer {
  margin:15px;
}
</style>
</head>
<body>
<h1>都道府県をつくろう
<span id="reset" class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</h1>
<div id="play">
  <button class="char btn btn-primary" data-char="手">手</button>
  <button class="char btn btn-primary" data-char="茨">茨</button>
  <button class="char btn btn-primary" data-char="阜">阜</button>
  <button class="char btn btn-primary" data-char="福">福</button>
  <button class="char btn btn-primary" data-char="岐">岐</button>
  <button class="char btn btn-primary" data-char="岩">岩</button>
  <button class="char btn btn-primary" data-char="岡">岡</button>
  <button class="char btn btn-primary" data-char="城">城</button>
</div>
<div id="next">
  <p>クリア！</p>
  next > 
  <form method="POST">
    <input type="hidden" name="num" value="10">
    <button class="btn btn-primary">ランダム10</button>
  </form>
  <form method="POST">
    <input type="hidden" name="num" value="47">
    <button class="btn btn-danger">47都道府県</button>
  </form>
</div>
<hr>
<div id="got">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
chars = ["\u624b","\u8328","\u961c","\u798f","\u5c90","\u5ca9","\u5ca1","\u57ce"];
checker = {"\u5317":{"\u6d77":{"\u9053":1}},"\u9752":{"\u68ee":1},"\u79cb":{"\u7530":1},"\u5ca9":{"\u624b":1},"\u5c71":{"\u5f62":1,"\u68a8":1,"\u53e3":1},"\u5bae":{"\u57ce":1,"\u5d0e":1},"\u798f":{"\u5cf6":1,"\u4e95":1,"\u5ca1":1},"\u8328":{"\u57ce":1},"\u7fa4":{"\u99ac":1},"\u6803":{"\u6728":1},"\u5343":{"\u8449":1},"\u57fc":{"\u7389":1},"\u795e":{"\u5948":{"\u5ddd":1}},"\u6771":{"\u4eac":1},"\u65b0":{"\u6f5f":1},"\u5bcc":{"\u5c71":1},"\u77f3":{"\u5ddd":1},"\u9577":{"\u91ce":1,"\u5d0e":1},"\u9759":{"\u5ca1":1},"\u5c90":{"\u961c":1},"\u611b":{"\u77e5":1,"\u5a9b":1},"\u6ecb":{"\u8cc0":1},"\u4e09":{"\u91cd":1},"\u4eac":{"\u90fd":1},"\u5927":{"\u962a":1,"\u5206":1},"\u5948":{"\u826f":1},"\u548c":{"\u6b4c":{"\u5c71":1}},"\u5175":{"\u5eab":1},"\u9ce5":{"\u53d6":1},"\u5cf6":{"\u6839":1},"\u5ca1":{"\u5c71":1},"\u5e83":{"\u5cf6":1},"\u9ad8":{"\u77e5":1},"\u9999":{"\u5ddd":1},"\u5fb3":{"\u5cf6":1},"\u4f50":{"\u8cc0":1},"\u718a":{"\u672c":1},"\u9e7f":{"\u5150":{"\u5cf6":1}},"\u6c96":{"\u7e04":1}};
let tempChecker;
let tempChar;
$(".char").on("click", function() {
  if (!tempChecker) {
    if (!checker[this.dataset.char]) return;
    tempChecker = checker[this.dataset.char];
    tempChar = this.dataset.char;
    $(this).removeClass("btn-primary").addClass("btn-selected");
  } else {
    if (tempChecker[this.dataset.char] == 1) {
      $(this).addClass("used");
      $(".btn-selected").addClass("used");
      tempChar += this.dataset.char;
      $("#got").append('<button class="btn btn-success">'+tempChar+'</button>');
      tempChecker = null;
      tempChar = null;
      if ($(".used").length == chars.length) {
        $("#play").hide();
        $("#next").show();
      }
    } else if (tempChecker[this.dataset.char]) {
      tempChecker = tempChecker[this.dataset.char];
      tempChar += this.dataset.char;
      $(this).removeClass("btn-primary").addClass("btn-selected");
    } else {
      $(".btn-selected").removeClass("btn-selected").addClass("btn-primary");
      tempChecker = null;
      tempChar = null;
    }
  }
});
$("#reset").on("click", function() {
  $(".char").removeClass("btn-selected used").addClass("btn-primary");
  $("#got").empty();
  $("#play").show();
  $("#next").hide();
});
</script>
<footer>
<p>つくろうシリーズ: <a href="https://lightwill.tokyo/todofuken/kencho">県庁所在地</a>
 / <a href="https://lightwill.tokyo/todofuken/yamatesen">山手線</a>
 / <a href="https://lightwill.tokyo/todofuken/country">国</a></p>
<p>created by <a href="https://lightwill.tokyo/">lightwill</a> on <a href="https://px.a8.net/svt/ejp?a8mat=ZWUIW+8D9CVM+348+65MEA" target="_blank">ロリポップ！</a><img border="0" width="1" height="1" src="https://www19.a8.net/0.gif?a8mat=ZWUIW+8D9CVM+348+65MEA" alt=""></p>
</footer>
</body>
</html>
このページをシェア twitter