null8r · null8r · Nov 26, 2023 · Nov 26, 2023 · Nov 26, 2023 · Nov 26, 2023
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <link href="src/css/style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap" rel="stylesheet">
 
     <title>Bouncing</title>
   </head>

diff --git a/pp/index.html b/pp/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap" rel="stylesheet">
+
+    <link href="../src/css/style.css" rel="stylesheet">
+    <link href="src/css/style.css" rel="stylesheet">
+
+    <title>Bouncing / Photo Picker</title>
+  </head>
+  <body>
+    <div id="navbar">
+      <nav class="navbar navbar-expand-sm navbar-light fixed-top glass-filter">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="/">null🦋</a>
+
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+
+          <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="https://twitter.com/null8r" title="Twitter" target="_blank" rel="noopener noreferrer">
+                  <img class="link" src="../src/img/sns/twitter.svg">
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://github.com/null8r" title="GitHub" target="_blank" rel="noopener noreferrer">
+                  <img class="link" src="../src/img/sns/github.svg">
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://github.com/null8r/bouncing-dvd">README</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </div>
+
+    <main >
+      <div id="canvas"></div>
+
+      <div id="control">
+        <div class="box">
+          <p>画像を選択 (png、jpegのみ)</p>
+          <input type="file" id="selectFile" accept="image/png, image/jpeg">
+        </div>
+        <hr>
+        <div class="box">
+          <p>画像の大きさ(0.01~5)</p>
+          <span>元の画像サイズ * <span id="scaleOp"></span></span><br>
+          <input class="range" type="range" id="selectScale" min="0.01" max="5" step="0.05" value="0.5" width="100%">
+        </div>
+        <hr>
+        <div class="box">
+          <p>画像の速さ(1~10)</p>
+          <span id="speedOp"></span><br>
+          <input class="range" type="range" id="selectSpeed" min="1" max="10" step="1" value="3">
+        </div>
+        <hr>
+        <p>ウィンドウサイズを変更した場合、<a  href="" title="Reload">再読込</a>が必要です。</p>
+      </div>
+    </main>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.min.js"></script>
+
+    <script src="src/pp.js"></script>
+  </body>
+</html>
diff --git a/pp/src/css/style.css b/pp/src/css/style.css
@@ -0,0 +1,129 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  font-family: "Noto Sans JP";
+}
+
+body:after {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  z-index: -1;
+  background-size: 200% 200%;
+  animation: gradient 13s ease infinite;
+}
+
+main {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  padding-top: 60px;
+  padding-bottom: 150px;
+}
+
+#nojs {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  position: fixed;
+  padding: 30px;
+  padding-bottom: 70px;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  z-index: 1;
+}
+
+footer {
+  text-align: center;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  color: #000;
+}
+
+a {
+  text-decoration: none !important;
+  transition: transform 0.2s;
+}
+a:active {
+  transform: scale(0.95);
+}
+
+button {
+  cursor: auto;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+img.emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0.05em 0.1em;
+  vertical-align: -0.1em;
+}
+
+.link {
+  width: 16px;
+  height: 16px;
+}
+
+.glass-filter {
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
+  .glass-filter {
+    background-color: rgba(255, 255, 255, 0.4);
+  }
+}
+@media all and (-ms-high-contrast: none) {
+  * {
+    font-size: initial;
+  }
+  .glass-filter {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}
+.sub-txt {
+  font-size: 80%;
+  text-align: center;
+}
+
+hr {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
+
+#control {
+  width: 50%;
+  margin: 0 auto 0;
+  text-align: center;
+}
+
+.box {
+  padding: 10px;
+}
+.box p {
+  margin-bottom: 10px;
+}
+
+.range {
+  width: 70%;
+}/*# sourceMappingURL=style.css.map */
diff --git a/pp/src/css/style.css.map b/pp/src/css/style.css.map
diff --git a/pp/src/css/style.scss b/pp/src/css/style.scss
@@ -0,0 +1,118 @@
+html, body{
+  width: 100%;
+	height: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  font-family: "Noto Sans JP";
+}
+body:after{
+  position: fixed;
+      top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  z-index: -1;
+  background-size: 200% 200%;
+  animation: gradient 13s ease infinite;
+}
+main{
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  padding-top: 60px;
+  padding-bottom: 150px;
+}
+#nojs{
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  position: fixed;
+  padding: 30px;
+  padding-bottom: 70px;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  z-index: 1;
+}
+footer {
+  text-align: center;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  color: #000;
+}
+a {
+  text-decoration: none!important;
+  transition: transform .2s;
+  &:active{
+   transform: scale(.95);
+  }
+}
+button{
+  cursor: auto;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+img.emoji{
+  height: 1em;
+  width: 1em;
+  margin: 0.05em 0.1em;
+  vertical-align: -0.1em;
+}
+
+.link{
+  width: 16px; 
+  height: 16px;
+}
+
+.glass-filter{
+  backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+}
+@supports not (backdrop-filter: blur(5px)) {
+  .glass-filter{
+    background-color: rgba(255, 255, 255, 0.4);
+  }
+}
+@media all and (-ms-high-contrast: none) {
+  *{
+    font-size: initial;
+  }
+  .glass-filter{
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}
+.sub-txt {
+  font-size: 80%;
+  text-align: center;
+}
+
+hr{
+  margin: 0;
+}
+canvas {
+  display: block;
+}
+#control{
+  width: 50%;
+  margin: 0 auto 0;
+  text-align: center;
+}
+.box{
+  padding: 10px;
+  p{
+    margin-bottom: 10px;
+  }
+}
+.range{
+  width: 70%;
+}
diff --git a/pp/src/img/syachiku.png b/pp/src/img/syachiku.png