Add official manga

Signed-off-by: Yuan Si <do4suki@gmail.com>
2023-04-01 10:57:56 +08:00
parent 4b02d2fd0f
commit 6ef676f712
64 changed files with 426 additions and 1 deletions
@@ -123223,7 +123223,7 @@
                        "banner_type": 2,
                        "target_id": 1,
                        "asset_path": "assets\/image\/webview\/wv_ba_01.png",
-                        "webview_url": "\/webview.php\/static\/index?id=79",
+                        "webview_url": "/manga",
                        "fixed_flag": false,
                        "back_side": true,
                        "banner_id": 200001,
@@ -84,6 +84,12 @@ func main() {
 		r.GET("/webview.php/announce/index", handler.AnnounceIndexHandler)
 		// Server APIs
 		// Web
 		// Manga
 		r.GET("/manga", func(ctx *gin.Context) {
 			ctx.HTML(http.StatusOK, "manga.tmpl", gin.H{})
 		})
 		r.Run(":8080") // listen and serve on 0.0.0.0:8080 (for windows "localhost:8080")
 	}
 }
@@ -0,0 +1,97 @@
@charset "utf-8";
 #list-container {
  width: 386px;
  height: 536px;
  background-image: url("/static/images/bg-left.png");
  background-repeat: no-repeat;
  float: left;
 }
 h2 {
  height: 76px;
  margin: 16px auto 14px;
 }
 h2>img {
  display: block;
  height: 76px;
  margin: auto;
 }
 #list-scroll {
  height: 410px;
  width: 363px;
  margin-left: 8px;
  position: relative;
 }
 li {
  text-align: left;
  background-image: url("/static/images/list-content-bg.png");
  font-size: 18px;
  width: 330px;
  height: 58px;
  margin: 0 0 8px 8px;
  list-style-type: none;
  position: relative;
 }
 li.tapped {
  background-image: url("/static/images/list-content-bg-on.png");
 }
 li p {
  color: #fff;
  padding: 16px 8px 8px 50px;
 }
 .new-icon {
  background-image: url("/static/images/new-icon.png");
  width: 50px;
  height: 50px;
  position: absolute;
  left: -4px;
 }
 #image-container {
  float: left;
  background-image: url("/static/images/bg-right.png");
  background-repeat: no-repeat;
  width: 490px;
  height: 536px;
  margin-left: 4px;
  position: relative;
 }
 #image-scroll {
  width: 454px;
  height: 500px;
  margin: 20px 0 0 16px;
  position: relative;
 }
 #large-image-container {
  display: none;
  position: absolute;
  left: 5px;
  top: 6px;
  width: 855px;
  height: 488px;
  background-color: white;
  box-shadow: 10px 10px 5px rgba(51, 51, 51, 0.5);
  border-radius: 20px;
  border: 2px solid dimgray;
  padding: 15px 0;
 }
 #large-image-scroll {
  position: relative;
  width: 850px;
  height: 488px;
  padding: 0 -17px;
 }
 #large-image {
  margin: auto;
 }
@@ -0,0 +1,69 @@
 var Button = function() {
 };
 Button.TAPPED = 'tapped';
 Button.initialize = function(element, onTap) {
  var touchInfo = null;
  if (typeof onTap === 'function') {
    onTap = onTap.bind(element);
  } else {
    onTap = function() {};
  }
  function d2(x1, y1, x2, y2) {
    var dx = x2 - x1, dy = y2 - y1;
    return dx * dx + dy * dy;
  }
  function startTap(touch) {
    touchInfo = {startX: touch.clientX, startY: touch.clientY, tapped: false};
    element.classList.add(Button.TAPPED);
  }
  function endTap() {
    element.classList.remove(Button.TAPPED);
    touchInfo = null;
  }
  element.addEventListener('touchstart', function(e) {
    startTap(e.changedTouches[0]);
    e.preventDefault();
  });
  element.addEventListener('touchmove', function(e) {
    if (touchInfo) {
      var x0 = touchInfo.startX;
      var y0 = touchInfo.startY;
      var x = e.changedTouches[0].clientX;
      var y = e.changedTouches[0].clientY;
      var current = document.elementFromPoint(x, y);
      const THRESHOLD_SQ_PX = 50 * 50;
      if (!element.contains(current) || d2(x0, y0, x, y) > THRESHOLD_SQ_PX) {
        endTap();
      }
    }
    e.preventDefault();
  });
  element.addEventListener('touchend', function(e) {
    if (touchInfo && !touchInfo.tapped) {
      touchInfo.tapped = true;
      onTap();
    }
    endTap();
    e.preventDefault();
  });
  element.addEventListener('touchcancel', function(e) {
    endTap();
    e.preventDefault();
  });
  return element;
 };
@@ -0,0 +1,253 @@
 {{ define "manga.tmpl" }}
 <!DOCTYPE html>
 <html lang="ja">
   <head>
      <meta charset="utf-8">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="viewport" content="width=880, target-densitydpi=device-dpi, user-scalable=no">
      <meta name="format-detection" content="telephone=no">
      <title>转校生漫画 〜转校生庆典〜</title>
      <link rel="stylesheet" href="/static/css/base.css">
      <link rel="stylesheet" href="/static/css/perfect-scrollbar.css">
      <link rel="stylesheet" href="/static/css/ll-perfect-scrollbar.css">
      <link rel="stylesheet" href="/static/css/style.css">
   </head>
   <body class="android_chromium ">
      <div id="body">
         <div id="list-container">
            <h2><img src="/static/images/title-banner.png"></h2>
            <div id="list-scroll">
               <ul>
                  <li class="button" data-image="/static/images/15238702168776.png">
                     <p>第54 转学生派对话</p>
                  </li>
                  <li class="button" data-image="/static/images/15238701747409.png">
                     <p>第53 末路话</p>
                  </li>
                  <li class="button" data-image="/static/images/15238695641197.png">
                     <p>第52 练习话</p>
                  </li>
                  <li class="button" data-image="/static/images/15238695587056.png">
                     <p>第51 放松效果话</p>
                  </li>
                  <li class="button" data-image="/static/images/15238695455400.png">
                     <p>第50 好胜心话</p>
                  </li>
                  <li class="button" data-image="/static/images/15238695303404.png">
                     <p>第49 相遇的两人话</p>
                  </li>
                  <li class="button" data-image="/static/images/15238695116848.png">
                     <p>第48 消化话</p>
                  </li>
                  <li class="button" data-image="/static/images/15238694919055.png">
                     <p>第47 摘花话</p>
                  </li>
                  <li class="button" data-image="/static/images/15238694807202.png">
                     <p>第46 小心叮咛话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141865196092.jpg">
                     <p>第45 好人有好报话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141865133555.jpg">
                     <p>第44 被宠坏的鸟儿话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141865055652.jpg">
                     <p>第43 海对岸的双峰话</p>
                  </li>
                  <li class="button" data-image="/static/images/15238681581968.png">
                     <p>第42 美丽的发声练习话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141864889884.jpg">
                     <p>第41 强力副歌的美学话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141864804128.jpg">
                     <p>第40 热血女子话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141864695842.jpg">
                     <p>第39 恶作剧之风话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141864584520.jpg">
                     <p>第38 禅之心话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141864261972.jpg">
                     <p>第37 枪械迷话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141863772178.jpg">
                     <p>第36 爱与正义的风纪纠察话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141863639911.jpg">
                     <p>第35 帅哥特集话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141863483422.jpg">
                     <p>第34 保护话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141863365919.jpg">
                     <p>第33 窗边美景话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141863229129.jpg">
                     <p>第32 机动性↑↑话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141863126912.jpg">
                     <p>第31 祈祷话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141862946556.jpg">
                     <p>第30 努力话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141862776588.jpg">
                     <p>第29 溜冰话</p>
                  </li>
                  <li class="button" data-image="/static/images/15141856059568.jpg">
                     <p>第28 逃跑话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047555888980.jpg">
                     <p>第27 突刺话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047555798773.jpg">
                     <p>第26 咖喱饭话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047555704112.jpg">
                     <p>第25 坠入爱河之日话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047555585712.jpg">
                     <p>第24 饲料话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047555499746.jpg">
                     <p>第23 刚才的事话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047555411780.jpg">
                     <p>第22 天体观测话</p>
                  </li>
                  <li class="button" data-image="/static/images/15107324142966.png">
                     <p>第21 空腹话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047555219572.jpg">
                     <p>第20 斗舞2话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047555087747.jpg">
                     <p>第19 斗舞话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047554922924.jpg">
                     <p>第18 点单话</p>
                  </li>
                  <li class="button" data-image="/static/images/15088959186072.jpg">
                     <p>第17 学园偶像祭最快决定战!!话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047554774569.jpg">
                     <p>第16 历史话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047554596230.jpg">
                     <p>第15 量尺寸话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047554481319.jpg">
                     <p>第14 艺术话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047554315307.jpg">
                     <p>第13 读书话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047554203428.jpg">
                     <p>第12 演出前话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047554108052.jpg">
                     <p>第11 特技话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047553982300.jpg">
                     <p>第10 学园偶像祭最快决定战！！话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047553849518.jpg">
                     <p>第9 给我醒过来！！话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047553728636.jpg">
                     <p>第8 秘密调查话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047553611357.jpg">
                     <p>第7 炎话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047553496606.jpg">
                     <p>第6 野生话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047553374283.jpg">
                     <p>第5 诞生话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047551242040.jpg">
                     <p>第4 优雅的放学后话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047551145790.jpg">
                     <p>第3 情人节话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047551059201.jpg">
                     <p>第2 游泳话</p>
                  </li>
                  <li class="button" data-image="/static/images/15047550942873.jpg">
                     <p>第1 开始！话</p>
                  </li>
               </ul>
            </div>
         </div>
         <div id="image-container">
            <div id="image-scroll">
               <img id="image" src="/static/images/15238702168776.png" width="444" height="850">
            </div>
         </div>
         <div id="large-image-container">
            <div id="large-image-scroll">
               <img id="large-image" width="888" height="1700">
            </div>
         </div>
      </div>
      <script src="/static/js/perfect-scrollbar.min.js"></script>
      <script src="/static/js/button.js"></script>
      <script>
         var largeImageContainer = document.getElementById('large-image-container');
         var listScroll = document.getElementById('list-scroll');
         var imageScroll = document.getElementById('image-scroll');
         var largeImageScroll = document.getElementById('large-image-scroll');
         var image = document.getElementById('image');
         var largeImage = document.getElementById('large-image');
         new PerfectScrollbar(listScroll, {suppressScrollX: true});
         var imageScrollbar = new PerfectScrollbar(imageScroll, {suppressScrollX: true});
         var largeImageScrollbar = new PerfectScrollbar(largeImageScroll, {suppressScrollX: true});
         function resetImageScroll() {
           imageScroll.scrollTop = 0;
           imageScrollbar.update();
         }
         function showLargeImage() {
           if (largeImageContainer.style.display === 'block') {
             return;
           }
           largeImage.src = image.src;
           largeImageContainer.style.display = 'block';
           largeImageScroll.scrollTop = 0;
           largeImageScrollbar.update();
         }
         function hideLargeImage() {
           largeImageContainer.style.display = 'none';
         }
         image.addEventListener('load', resetImageScroll);
         image.addEventListener('click', showLargeImage);
         largeImageContainer.addEventListener('click', hideLargeImage);
         var buttons = document.getElementsByClassName('button');
         for (var i = 0; i < buttons.length; ++i) {
           Button.initialize(buttons[i], function() {
             var url = this.getAttribute('data-image');
             if (url.replace(/^.*\//, '') !== image.src.replace(/^.*\//, '')) {
               image.src = url;
             } else {
               resetImageScroll();
             }
           });
         }
      </script>
   </body>
 </html>
 {{ end }}