null8r · null8r · Nov 30, 2023 · Nov 30, 2023
diff --git a/pp/index.html b/pp/index.html
@@ -24,6 +24,16 @@
 
           <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
             <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href=""  title="画面を更新する&#13;&#10;白い余白がある時に実行してください。">
+                  <img class="link" src="../src/img/update.svg">
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#control" title="画像の設定&#13;&#10;好きな画像にしたり、大きさ・速さを変更できます。">
+                  <img class="link" src="../src/img/settings.svg">
+                </a>
+              </li>
               <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">
@@ -73,17 +83,7 @@
             <button class="button up" id="speedUp">＋</button>
           </div>
         </div>
-        <!-- <div class="box">
-          <p>下のリンクをコピーして友達に送ろう！</p>
-          <a id="shareUrl" href="">りんく</a>
-        </div> -->
       </div>
-
-      <svg class="arrows">
-        <path class="a1" d="M0 0 L30 32 L60 0"></path>
-        <path class="a2" d="M0 20 L30 52 L60 20"></path>
-        <path class="a3" d="M0 40 L30 72 L60 40"></path>
-      </svg>
     </main>
 
     <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

diff --git a/pp/src/css/style.css b/pp/src/css/style.css
@@ -107,51 +107,6 @@ img.emoji {
   text-align: center;
 }
 
-.arrows {
-  width: 60px;
-  height: 72px;
-  position: absolute;
-  right: 20px;
-  bottom: 10px;
-}
-
-.arrows path {
-  stroke: #0de1bd;
-  fill: transparent;
-  stroke-width: 2px;
-  animation: arrow 5s infinite;
-  -webkit-animation: arrow 5s infinite;
-}
-
-@keyframes arrow {
-  0% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-  80% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-.arrows path.a1 {
-  animation-delay: -1s;
-  -webkit-animation-delay: -1s;
-}
-
-.arrows path.a2 {
-  animation-delay: -0.5s;
-  -webkit-animation-delay: -0.5s;
-}
-
-.arrows path.a3 {
-  animation-delay: 0s;
-  -webkit-animation-delay: 0s;
-}
-
 hr {
   margin: 0;
 }

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
@@ -106,45 +106,6 @@ img.emoji{
   text-align: center;
 }
 
-.arrows {
-  width: 60px;
-  height: 72px;
-  position: absolute;
-  right: 20px;
-  bottom: 10px;
-}
-.arrows path {
-  stroke: #0de1bd;
-  fill: transparent;
-  stroke-width: 2px;  
-  animation: arrow 5s infinite;
-  -webkit-animation: arrow 5s infinite; 
-}
-@keyframes arrow{
-  0% {opacity:0}
-  40% {opacity:1}
-  80% {opacity:0}
-  100% {opacity:0}
-}
-@-webkit-keyframes arrow{
-  0% {opacity:0}
-  40% {opacity:1}
-  80% {opacity:0}
-  100% {opacity:0}
-}
-.arrows path.a1 {
-  animation-delay:-1s;
-  -webkit-animation-delay:-1s;
-}
-.arrows path.a2 {
-  animation-delay:-0.5s;
-  -webkit-animation-delay:-0.5s;
-}
-.arrows path.a3 { 
-  animation-delay:0s;
-  -webkit-animation-delay:0s;
-}
-
 hr{
   margin: 0;
 }

diff --git a/src/img/settings.svg b/src/img/settings.svg
diff --git a/src/img/update.svg b/src/img/update.svg