diff --git a/src/main/java/demo/1.html b/src/main/java/demo/1.html
new file mode 100644
index 0000000..11e08e2
--- /dev/null
+++ b/src/main/java/demo/1.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="author" content="Vasanth.V" />
+  <meta name="theme-color" content="#FFFFFF" />
+
+  <title>xxxx</title>
+  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
+
+  <style>
+    html,
+    body {
+      overscroll-behavior: none;
+    }
+
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+      margin: 0;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-text-size-adjust: 100%;
+      background: #fbf9f6;
+    }
+
+    a {
+      color: inherit;
+    }
+
+    #canvas {
+      display: none;
+      height: 100vh;
+      width: 100%;
+      max-width: 640px;
+      overflow: hidden;
+      box-sizing: border-box;
+      margin: auto;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    #canvas svg {
+      width: 100%;
+    }
+
+    #about {
+      text-align: center;
+      font-size: 1.2rem;
+      line-height: 1.75;
+      padding: 0rem 2rem 1rem;
+      color: #2c3d51;
+    }
+
+    #about a {
+      font-weight: 500;
+      font-style: italic;
+    }
+
+    #ball {
+      transform: translateZ(0);
+      animation: rot 2000ms infinite linear;
+      animation-play-state: paused;
+    }
+
+    #ball.started {
+      animation-play-state: running;
+    }
+
+    #play {
+      cursor: pointer;
+    }
+
+    #finalscore,
+    #best {
+      font-size: 70%;
+      fill: #34495e;
+    }
+
+    #best {
+      font-style: italic;
+      font-size: 50%;
+    }
+
+    #tip {
+      font-weight: 300;
+      font-size: 18%;
+      font-style: italic;
+      padding: 0.5rem 2rem 0rem;
+    }
+
+    #shareBtn {
+      background: #1d9bf0;
+      color: #fff;
+      width: 150px;
+      text-align: center;
+      text-decoration: none;
+      border-radius: 2rem;
+      padding: 0.3rem 1.5rem;
+      margin: 1rem auto 0px;
+      font-size: 1.25rem;
+    }
+
+    #shareBtn.hide {
+      visibility: hidden;
+    }
+
+    @keyframes rot {
+      from {
+        transform: rotate(0deg) translate(40%) rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg) translate(40%) rotate(-360deg);
+      }
+    }
+  </style>
+
+</head>
+
+<body>
+<section id="canvas" v-bind:style="'display:flex;'">
+  <svg id="looptap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect id="bg" x="0" cy="0" height="100" width="100" fill="none" />
+    <text x="50" y="50" dominant-baseline="middle" text-anchor="middle" class="score" id="score"
+          v-if="state === 'started'" v-html="score"></text>
+    <text x="50" y="32" text-anchor="middle" class="score" id="finalscore" v-if="state === 'stopped'"
+          v-html="score"></text>
+    <text x="50" y="70" text-anchor="middle" class="score" id="best" v-if="state === 'stopped'"
+          v-html="'Best: '+best"></text>
+    <g id="tip" v-if="state === 'init'">
+      <text x="50" y="68" text-anchor="middle" class="tip">
+        点击 ▶️ 开始 / 点击任何地方停止
+      </text>
+      <text x="50" y="74" text-anchor="middle" class="tip">
+        让球停在有颜色的区域就行！
+      </text>
+    </g>
+    <path id="arc" fill="none"
+          v-bind:stroke="colors[Math.floor(score / 10)] || colors[Math.floor((score - 270) / 10)] || '#bdc3c7'"
+          stroke-width="10" stroke-linejoin="round" stroke-linecap="round" v-bind:d="arcDValue" />
+    <circle id="ball" cx="50" cy="50" r="4" fill="#2C3D51" v-bind:class="state"
+            v-bind:style="'animation-duration: '+(2000 - taps * 40) + 'ms'" />
+    <polygon id="play" points="45,45 55,50 45,55" fill="#2C3D51" stroke="#2C3D51" stroke-width="5"
+             stroke-linejoin="round" stroke-linecap="round" v-if="state !== 'started'" v-on:click="startPlay" />
+  </svg>
+</section>
+</body>
+<script>
+  const loopTapApp = new Vue({
+    el: "#canvas",
+    data: {
+      arc: [180, 270],
+      taps: 0,
+      score: 0,
+      best: window.localStorage.best || 0,
+      state: "init",
+      prevTapTime: 0,
+      colors: [
+        '#F26D22',
+        '#F1B21D',
+        '#ECE82F',
+        '#AED136',
+        '#7EC242',
+        '#63BC46',
+        '#65BD5D',
+        '#64C29A',
+        '#61C8D2',
+        '#2DAAE1',
+        '#456EB5',
+        '#4451A3',
+        '#6151A2'
+      ]
+    },
+    computed: {
+      arcDValue: function () {
+        return this.describeArc(50, 50, 40, this.arc[0], this.arc[1]);
+      },
+    },
+    methods: {
+      polarToCartesian: function (centerX, centerY, radius, angleInDegrees) {
+        const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+        return {
+          x: centerX + radius * Math.cos(angleInRadians),
+          y: centerY + radius * Math.sin(angleInRadians),
+        };
+      },
+
+      describeArc: function (x, y, radius, startAngle, endAngle) {
+        const start = this.polarToCartesian(x, y, radius, endAngle);
+        const end = this.polarToCartesian(x, y, radius, startAngle);
+        const arcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+        const d = ["M", start.x, start.y, "A", radius, radius, 0, arcFlag, 0, end.x, end.y].join(" ");
+        return d;
+      },
+
+      getAngle: function (cx, cy, ex, ey) {
+        const dy = ey - cy;
+        const dx = ex - cx;
+        let theta = Math.atan2(dx, -dy);
+        theta *= 180 / Math.PI;
+        theta = theta < 0 ? theta + 360 : theta;
+        return theta;
+      },
+
+      getBallAngle: function () {
+        const bg = document.getElementById("bg").getBoundingClientRect();
+        const bgCenter = { x: bg.left + bg.width / 2, y: bg.top + bg.height / 2 };
+        const ball = document.getElementById("ball").getBoundingClientRect();
+        const ballCenter = { x: ball.left + ball.width / 2, y: ball.top + ball.height / 2 };
+        return this.getAngle(bgCenter.x, bgCenter.y, ballCenter.x, ballCenter.y);
+      },
+
+      setArc: function () {
+        const random = (i, j) => Math.floor(Math.random() * (j - i)) + i;
+        arc = [];
+        arc.push(random(0, 300));
+        arc.push(random(arc[0] + 10, arc[0] + 110));
+        arc[1] = arc[1] > 360 ? 360 : arc[1];
+        this.arc = arc;
+      },
+
+      startPlay: function () {
+        this.state = "started";
+        this.taps = 0;
+        this.score = 0;
+        this.prevTapTime = Date.now();
+      },
+      stopPlay: function () {
+        if (this.state === "started") {
+          this.state = "stopped";
+          if (this.score > this.best) window.localStorage.best = this.best = this.score;
+        }
+      },
+
+      tap: function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.state === "started") {
+          const ballAngle = this.getBallAngle();
+          // adding a 6 for better accuracy as the arc stroke extends beyond the angle.
+          if (ballAngle + 6 > this.arc[0] && ballAngle - 6 < this.arc[1]) {
+            const currentTapTime = Date.now();
+            const tapInterval = currentTapTime - this.prevTapTime;
+            this.taps++;
+            if (this.taps >= 28){this.taps = 28;}
+            this.score = this.score + (tapInterval < 500 ? 5 : tapInterval < 1000 ? 2 : 1);
+            this.prevTapTime = currentTapTime;
+            this.setArc();
+          } else this.stopPlay();
+        }
+      },
+    },
+  });
+
+  if ("ontouchstart" in window) {
+    window.addEventListener("touchstart", loopTapApp.tap);
+  } else {
+    window.addEventListener("mousedown", loopTapApp.tap);
+  }
+
+
+</script>
+
+</html>
\ No newline at end of file
