Widget:网站维护时间线:修订间差异

H萌娘,万物皆可H的百科全书!
跳到导航 跳到搜索
imported>=海豚=
无编辑摘要
imported>=海豚=
无编辑摘要
 
(未显示同一用户的126个中间版本)
第1行: 第1行:
   <style>
<noinclude>Only for [[H萌娘:维护日志]]</noinclude>
  
<includeonly>
<style>
* {
* {
   margin: 0;
   margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#timeline {
  padding-top: 5%;
}
}
.timeline {
.timeline {
第16行: 第12行:
   position: absolute;
   position: absolute;
   width: 100%;
   width: 100%;
   height: 100%;
   height: 105%;
   left: 0;
   left: 0;
   top: 0;
   top: 43px;
}
}
.timeline figcaption {
.timeline figcaption {
   font-weight: 400;
   font-weight: 400;
   font-family: 'Poppins',sans-serif;
    font-size: 24px;
    font-size: 24px;
   text-transform: uppercase;
   text-transform: uppercase;
第30行: 第25行:
   font-weight: 400;
   font-weight: 400;
    font-size: 30px;
    font-size: 30px;
   padding-bottom: 100px;
   padding-bottom: 20px;
   color: #b2cde9;
   color: #a2c9f3!important;
   font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
   text-transform: uppercase;
  line-height: 1.2 !important;
}
}
.timeline h6 {
.timeline h6 {
   color: #0090F5;
   color: #0090F5!important;
 
   font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-size: 17px;
    font-weight: 400;
    font-weight: 400;
第45行: 第38行:
.timeline ol {
.timeline ol {
   font-weight: 400;
   font-weight: 400;
   font-family: 'Poppins', sans-serif;
   padding: 3px 0 20px 0;
   padding: 3px 0 20px 0;
   color: #575757;
   color: #575757!important;
   text-align: justify;
   text-align: justify;
   width: 70%;
   width: 70%;
第64行: 第56行:
   width: 38%;
   width: 38%;
   overflow: hidden;
   overflow: hidden;
  margin-bottom: 100px;
}
}
.timeline article:first-of-type {
.timeline article:first-of-type {
第78行: 第69行:
}
}
.timeline article:last-of-type h2 {
.timeline article:last-of-type h2 {
   color: #c6e0aa;
   color: #b9d79a!important;
}
}
.timeline article:last-of-type h6,
.timeline article:last-of-type h6,
.timeline article:last-of-type a {
.timeline article:last-of-type a {
   color: #40aa00;
   color: #40aa00!important;
}
}
.timeline article:last-of-type a:hover {
.timeline article:last-of-type a:hover {
   color: #95D40D;
   color: #95D40D!important;
}
}
 
</style>
   </style>
</head>
</head>
<body>
<body>
    <section id="timeline">
    <section id="timeline">
    <div class="timeline">
    <div class="timeline">
      <canvas id="cvs3"></canvas>
      <canvas id="cvs3"></canvas>
      <article>
      <article>
        <h2>Education</h2>      
        <h2> 新增功能</h2>      
        <figure>
        <figure>
          <figcaption>Web Design</figcaption>
          <figcaption> 全站系统版本更新</figcaption>
          <h6>using Html CSS JS</h6>
          <h6>2021.6.23</h6>
          <p>
          <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. Ut ut libero in nibh convallis sollicitudin. Maecenas ante erat, lacinia commodo pretium vel, ultricies eget nibh. Duis et felis lectus. Donec orci libero, auctor eget sodales at, euismod venenatis nibh.
           升级至2021年6月23日由维基媒体发布的 MW1.31.15(c755afe) 补丁版本,此次内部更新跨越了7个小版本(1.31.7→1.31.15)。
          </p>
          </p>
        </figure>
        </figure>
        <figure>
        <figure>
          <figcaption>Web Development</figcaption>
          <figcaption> 看板娘系统重构并支持换装</figcaption>
          <h6>With modern technologies</h6>
          <h6>2021.6.26-27</h6>
          <p>
          <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           去除冗余代码;新增5个看板娘;加入换装功能(为 pio酱 提供了86套皮肤 / 为 Tia酱 提供了62套皮肤 / 为 22、33 提供了21套皮肤 / 为 22、33 提供了21套皮肤 / 为 海王星 提供了19套皮肤)。
          </p>
          </p>
        </figure>
        </figure>
        <figure>
        <figure>
          <figcaption>Search Engine Op.</figcaption>
          <figcaption> 支持繁简转换</figcaption>
          <h6>With Free & Paid Plugin</h6>
          <h6>2021.7.12-14</h6>
          <p>
          <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           增添繁简转换插件,在左上角显示按钮,可在所有页面使用,支持繁体源代码编辑和繁体字搜索。
         </p>
       </figure>
       <figure>
         <figcaption>编辑记录页改版</figcaption>
         <h6>2021.7.15-16</h6>
         <p>
           添加图标;引入显示维护组用户的用户组的小工具;更新最近更改图例。
          </p>
          </p>
        </figure>
        </figure>
        <figure>
        <figure>
          <figcaption>Graphics Design</figcaption>
          <figcaption> 左侧显示浮动目录</figcaption>
          <h6>using ps and all</h6>
          <h6>2021.8.10-12</h6>
          <p>           
          <p>           
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           当条目中的标题超过三个时,条目左侧会出现目录,侧边栏划上去时可以看见,点击可跳转到指定标题。
         </p>
       </figure>
       <figure>
         <figcaption>用户贡献页改版</figcaption>
         <h6>2021.8.13</h6>
         <p>
           改变顶部用户信息控制栏;维护组用户可分名字空间查看其他用户的编辑数量。
         </p>
       </figure>
       <figure>
         <figcaption>讨论版分功能导航指向</figcaption>
         <h6>2021.8.27</h6>
         <p>
           加入讨论版导航,分功能指向不同版面,方便用户按需求反馈问题。
          </p>
          </p>
        </figure>
        </figure>
      </article>
      </article>
      <article>
      <article>
        <h2>Work</h2>
        <h2> 系统修复</h2>
         <figure>
         <figcaption>全站背景修正</figcaption>
         <h6>2021.6.23-7.6</h6>
         <p>
           修正全站背景《画画的纱雾酱》,重新抠图,减少体积,加快显示效率;加入春天飞鸟的顶部栏背景。
         </p>
       </figure>
       <figure>
         <figcaption>中立性存疑警告改为只为游客展示</figcaption>
         <h6>2021.7.3</h6>
         <p>
          已注册用户在访问含有{{中立性存疑}}模板的条目将不再展示弹出警告。
         </p>
       </figure>
       <figure>
         <figcaption>Wikiplus小工具本地化适配</figcaption>
         <h6>2021.7.4</h6>
         <p>
          修复桌面端显示问题;并在移动端加入该工具。
         </p>
       </figure>
       <figure>
         <figcaption>重写首页及主题导航图片规则</figcaption>
         <h6>2021.7.28</h6>
         <p>
          更正首页和主题导航图片链接,修正失效图片,大大加快访问速度。
         </p>
       </figure>
        <figure>
        <figure>
          <figcaption>Graphic & WEB</figcaption>
          <figcaption> 底部导航模板改为默认折叠</figcaption>
          <h6>Learn Today</h6>
          <h6>2021.8.1</h6>
          <p>
          <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           相对较长的导航模板在条目中默认折叠,减少条目空间。
         </p>
        </figure>
        </figure>
        <figure>
        <figure>
          <figcaption>Mobile Friendly</figcaption>
          <figcaption> 更改验证系统</figcaption>
          <h6>with touch screen</h6>
          <h6>2021.8.3</h6>
          <p>
          <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           改为知识提问型验证系统,不再使用Cloudflare的验证,同时取消其频繁的JS质询。
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
          </p>
          </p>
        </figure>
        </figure>
        <figure>
        <figure>
          <figcaption>Retina Ready Display</figcaption>
          <figcaption> 改变条目中二级标题样式</figcaption>
          <h6>Supported all devices</h6>
          <h6>2021.8.6</h6>
          <p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt.
            为二级标题增加黄底主题色,更符合本站样式。
         </p>
       </figure>
       <figure>
         <figcaption>更新移动端页面</figcaption>
         <h6>2021.8.20</h6>
         <p>
           在移动端条目顶部加入选项工具,更好的方便用户使用;同时更改部分页面以适配APP。
          </p>
          </p>
        </figure>
        </figure>
第153行: 第197行:
      <br style="clear:both" />
      <br style="clear:both" />
    </div>
    </div>
</section>
</section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.5g-o.com/wp-content/uploads/2021/01/time.js">
<script>
 
   function Timeline(cvs) {
   </script>
   var self = this,
</body>
     paused = true,
</html>
     rafid = 0,
     mouse = { x: 0, y: 0 },
     canvas = cvs,
     ctx = null;
   self.lines = [];
   self.isOK = false;
   self.options = {
     speed: 0.1,
     density: 8,
     radius: 600,
   };
   self.targets = [
  [20, 26, 58, 64, 116, 122, 150],
  [20, 40, 42, 90, 98, 102, 108, 136]
  ];
   self.dotColors = [
     ['#13669b', 'rgba(19, 102, 155, 0.3)', 'rgba(19, 102, 155, 0.08)'],
     ['#7dd317', 'rgba(113, 222, 15, 0.3)', 'rgba(91, 164, 22, 0.12)'],
   ];
   self.isPaused = function () {
     return paused;
   };
   function InitDots() {
     var tl = $('.timeline');
     var top = tl.find('h2').outerHeight();
     self.lines[0].dots = [];
     var y = top;
     tl.find('article:first figure').each(function () {
       self.lines[0].dots.push([$(this).outerWidth() + 20, y + 20]);
       y += $(this).outerHeight();
     });
     self.lines[1].dots = [];
     var y = top;
     tl.find('article:last figure').each(function () {
       self.lines[1].dots.push([canvas.width - $(this).outerWidth() - 20, y + 20]);
       y += $(this).outerHeight();
     });
   }
   function OnResize() {
     canvas.width = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;
     var wasPaused = paused;
     self.toggle(false);
     // Init lines
     self.lines[0].reset(canvas.offsetWidth / 2 - 15);
     self.lines[1].reset(canvas.offsetWidth / 2 + 15);
     InitDots();
     self.toggle(!wasPaused);
   }
   function init() {
     var result = false;
     try {
       result = !!(canvas.getContext && (ctx = canvas.getContext('2d')));
       self.lines[0] = new Line(0, canvas.offsetHeight - 100, '#4789a3', self.options, mouse);
       self.lines[1] = new Line(0, canvas.offsetHeight - 100, '#a0d59c', self.options, mouse);
     } catch (e) {
       return false;
     }
     $(canvas).mousemove(function (e) {
       if (e.offsetX) {
         mouse.x = e.offsetX;
         mouse.y = e.offsetY;
       }
       else if (e.layerX) {
         mouse.x = e.layerX;
         mouse.y = e.layerY;
       }
       else {
         mouse.x = e.pageX - $(canvas).offset().left;
         mouse.y = e.pageY - $(canvas).offset().top;
       }
     });
     $(window).resize(OnResize);
     OnResize();
     return result;
   }
   function Line(y, height, color, options, mouse) {
     var self = this;
     self.color = color;
     self.options = options;
     self.mouse = mouse;
     self.height = height;
     self.dots = [];
     self.y = y;
     self.points = [];
     self.reset = function (x, f) {
       self.points = [];
       for (var y = self.y; y < self.height; y += self.options.density)
         self.points.push(new Point(x, y, self.color));
     }
     self.update = function () {
       for (var i = 0; i < self.points.length; i++)
         self.points[i].update(self.mouse, self.options);
     }
     function Point(x, y) {
       this.y = y;
       this.x = x;
       this.base = { x: x, y: y };
       this.update = function (mouse, options) {
         var dx = this.x - mouse.x,
           dy = this.y - mouse.y,
           alpha = Math.atan2(dx, dy),
           alpha = (alpha > 0 ? alpha : 2 * Math.PI + alpha),
           d = options.radius / Math.sqrt(dx * dx + dy * dy);
         this.y += Math.cos(alpha) * d + (this.base.y - this.y) * options.speed;
         this.x += Math.sin(alpha) * d + (this.base.x - this.x) * options.speed;
       }
     }
   }
   function drawCircle(p, r, color) {
     ctx.fillStyle = color;
     ctx.beginPath();
     ctx.arc(p.x, p.y, r, 0, 2 * Math.PI, true);
     ctx.closePath();
     ctx.fill();
   }
   function drawLine(p1, p2) {
     ctx.beginPath();
     ctx.moveTo(p1.x, p1.y);
     ctx.lineTo(p2.x, p2.y);
     ctx.stroke();
     ctx.closePath();
   }
   function redraw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     for (var i = 0; i < 2; i++) {
       var points = self.lines[i].points;
       ctx.beginPath();
       ctx.lineWidth = 2;
       ctx.strokeStyle = self.lines[i].color;
       ctx.moveTo(points[15].x, points[15].y);
       for (var j = 15; j < points.length - 2; j++) {
         var point = points[j];
         var xc = (points[j + 1].x + point.x) / 2;
         var yc = (points[j + 1].y + point.y) / 2;
         ctx.quadraticCurveTo(point.x, point.y, xc, yc);
       }
       ctx.stroke();
       ctx.closePath();
       // Dots
       ctx.lineWidth = 1.2;
       ctx.strokeStyle = self.dotColors[i][2];
       for (var j = 0; j < self.lines[i].dots.length; j++) {
         var dot = self.lines[i].dots[j],
           id = self.targets[i][j];
           dot2 = [
             (self.lines[i].points[id].x + self.lines[i].points[id + 1].x) / 2,
             (self.lines[i].points[id].y + self.lines[i].points[id + 1].y) / 2,
           ];
         var p1 = { x: dot[0], y: dot[1] };
         var p2 = { x: dot2[0], y: dot2[1] };
         drawLine(p1, p2);
         drawCircle(p1, 4, self.dotColors[i][0]);
         drawCircle(p2, 11, self.dotColors[i][1]);
         drawCircle(p2, 5.5, self.dotColors[i][0]);
       }
     }
   }
   function animate() {
     rafid = requestAnimationFrame(animate);
     self.lines[0].update();
     self.lines[1].update();
     redraw();
   }
   self.toggle = function (run) {
     if (!self.isOK) return false;
     if (run === undefined)
       self.toggle(!paused);
     else if (!!run && paused) {
       paused = false;
       animate();
     }
     else if (!!!run) {
       paused = true;
       cancelAnimationFrame(rafid);
     }
     return true;
   }
   self.isOK = init();
}
new Timeline($('#cvs3').get(0)).toggle(true);
</script>
</includeonly>

2021年8月27日 (五) 20:37的最新版本