“Widget:网站维护时间线”与“Widget:萌百条目”：页面之间的差异

H萌娘，万物皆可H的百科全书！
（页面间差异）
跳到导航 跳到搜索
imported>=海豚=
无编辑摘要
 
imported>=海豚=
无编辑摘要
 
第1行： 第1行：
<noinclude>Only for {{tl|萌百页面嵌入}}</noinclude>
<includeonly>
<style>
<style>
* {
/* <pre> */
  margin: 0;
@media screen and (min-width: 600px) {body {background-image:url(https://www.hmoegirl.com/images/e/ef/%E7%AE%B1%E5%AD%90%E9%87%8C%E7%9A%84%E8%90%8C%E7%99%BE%E5%A8%98_.png);background-size:650px;}}
}
#moe a {color: #00AF89;}
.timeline {
#moe a.new {color: #BA0000!important;}
  height: 100%;
#moe a.external {color: #36b!important;}
  position: relative;
#moe a.mw-collapsible-text {color: #3366cc!important;}
}
#moe .heimu a, a .heimu {color: #00AF89!important;}
.timeline canvas {
#moe .colormu {background-color: rgba(37,37,37,0.1)!important;}
  position: absolute;
.skin-vector #moe table {box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);border-radius: 4px;overflow: hidden;}
  width: 100%;
#moe .infotemplatebox {box-shadow: none!important;}
  height: 100%;
.mw-editmoegirl {display:block!important;}
  left: 0;
#ca-ve-edit,#ca-editTopSection .mw-editsection {display: none !important;}
  top: 46px;
#moe .bilibili-toggle {display: none !important;}
}
#moe .bilibili-title {padding: .2em 2em .2em 1em !important;}
.timeline figcaption {
#moe li.gallerybox {display: inline-block;width: 100%; height: auto;}
  font-weight: 400;
#moe .reference> a {color: #36b!important;}
   font-size: 24px;
#moe .mw-cite-backlink> a {color: #36b!important;}
  text-transform: uppercase;
#moe pre {display: none!important;}
  -webkit-text-stroke: .25px;
/* </pre> */
}
.timeline h2 {
  font-weight: 400;
   font-size: 30px;
  padding-bottom: 20px;
  color: #b2cde9!important;
  text-transform: uppercase;
  line-height: 1.2 !important;
}
.timeline h6 {
  color: #0090F5!important;
   font-size: 17px;
   font-weight: 400;
}
.timeline p,
.timeline ol {
  font-weight: 400;
  padding: 3px 0 20px 0;
  color: #575757!important;
  text-align: justify;
  width: 70%;
}
.timeline ol {
  list-style: disc;
  margin-top: -20px;
  padding-left: 40px;
}
.timeline figure {
  float: right;
  width: 100%;
}
.timeline article {
  position: relative;
  width: 38%;
  overflow: hidden;
}
.timeline article:first-of-type {
  float: left;
  text-align: right;
}
.timeline article:first-of-type p,
.timeline article:first-of-type figure {
  float: right;
}
.timeline article:last-of-type {
  float: right;
}
.timeline article:last-of-type h2 {
  color: #c6e0aa!important;
}
.timeline article:last-of-type h6,
.timeline article:last-of-type a {
  color: #40aa00!important;
}
.timeline article:last-of-type a:hover {
  color: #95D40D!important;
}
</style>
</style>
</head>
<body>
   <section id="timeline">
   <div class="timeline">
     <canvas id="cvs3"></canvas>
     <article>
       <h2>新增功能</h2>     
       <figure>
         <figcaption>Web Development</figcaption>
         <h6>With modern technologies</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Search Engine Op.</figcaption>
         <h6>With Free & Paid Plugin</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Search Engine Op.</figcaption>
         <h6>With Free & Paid Plugin</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Graphics Design</figcaption>
         <h6>using ps and all</h6>
         <p>          
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
     </article>


     <article>
       <h2>修复BUG</h2>
       <figure>
         <figcaption>Mobile Friendly</figcaption>
         <h6>with touch screen</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Mobile Friendly</figcaption>
         <h6>with touch screen</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
             <figure>
         <figcaption>Web Design</figcaption>
         <h6>using Html CSS JS</h6>
         <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.
         </p>
       </figure>
       <figure>
         <figcaption>Retina Ready Display</figcaption>
         <h6>Supported all devices</h6>
         <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>Retina Ready Display</figcaption>
         <h6>Supported all devices</h6>
         <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>Retina Ready Display</figcaption>
         <h6>Supported all devices</h6>
         <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>
     </article>
     <br style="clear:both" />
   </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
<script>
   function Timeline(cvs) {
window.RLQ = window.RLQ || [];
 
window.RLQ.push(function() {
   var self = this,
mw.loader.using('mediawiki.notification').then(function() {
     paused = true,
mw.notify(' 本页面部分内容引自萌娘百科，遵循CC BY-NC-SA 3.0协议，受版权保护', { type: 'warn' });
     rafid = 0,
mw.notify(' 页面含有程序自动获取生成的内容，存在缓存时限，如果为空白请去萌娘百科完成人机认证后刷新缓存' );
     mouse = { x: 0, y: 0 },
});
     canvas = cvs,
var div = document.getElementById('moe');
     ctx = null;
div.innerHTML = div.innerHTML
 
.replace(/提取(.*) 失败/g,'唔啊~~发生了什么(╯°Д°）╯嵌入时好像混进了奇怪的数据，要坏掉啦QAQ___ 这通常是由于网络不稳定导致的，请<a href="?action=purge" title="清除本页缓存">点此重新获取</a>');
   self.lines = [];
if ( mw.config.get( 'wgNamespaceNumber' ) === 0) {
 
   var div = document.getElementById('moe');
   self.isOK = false;
   div.innerHTML = div.innerHTML
   self.options = {
   .replace(/萌娘百科欢迎您参与完善本条目/g,'H萌娘欢迎您参与完善本条目')
     speed: 0.1,
   .replace(/并查找相关资料。萌娘百科祝您在本站度过愉快的时光。/g,'并查找相关资料。注意这是一个萌百的自动嵌入页面，世界观可能与本站不同。H萌娘祝您在本站度过愉快的时光！')
     density: 8,
   .replace(/并查找相关资料哦。/g,'并查找相关资料哦。<br />注意这是一个萌百的自动嵌入页面，世界观可能与本站不同。H萌娘祝您在本站度过愉快的时光！')
     radius: 600,
   .replace(/萌娘百科不是新闻的搜集处/g,'H萌娘不是新闻的搜集处')
   };
   .replace(/萌娘百科提醒您/g,'H萌娘提醒您')
   self.targets = [
   .replace(/此条目或需要大幅度整改/g,'此条目可能需要大幅度整改')
  [1, 10, 20],
   .replace(/ 若您清楚改善现状的方法/g,'注意这是一个萌百的自动嵌入页面，世界观可能与本站不同。如果您清楚改善现状的方法')
  [5, 25, 30]
   .replace(/ 萌娘百科郑重提示/g,'H萌娘郑重提示')
   ];
   .replace(/非特殊情况下请不要将此模板用在人物条目中(.*)。/g,'')
   self.dotColors = [
   .replace(/提示：本页面/g,'各位绅士注意：本条目')
     ['#13669b', 'rgba(19, 102, 155, 0.3)', 'rgba(19, 102, 155, 0.08)'],
   .replace(/不适合未满15岁的读者/g,'不够色情')
     ['#7dd317', 'rgba(113, 222, 15, 0.3)', 'rgba(91, 164, 22, 0.12)'],
   .replace(/页面可能包含/g,'页面只包含')
   ];
   .replace(/阅读时有可能产生轻微不适感/g,' 阅读时没让人产生不适感')
 
   .replace(/请确信自己已满当地法律许可年龄且心智成熟后再来阅览/g,' 最好陪同自己的孩子一起来阅览')
   self.isPaused = function () {
   .replace(/另请编辑者注意：勿滥用此模板/g,' 另请编辑者注意：本页面急待调整以适应本站的年龄段');
     return paused;
   window.setTimeout(function() {
   };
      document.querySelector("#ca-edit.collapsible a").textContent='添加本地化差异';
 
    },350);
   function InitDots() {
}
     var tl = $('.timeline');
if( (mw.config.get('wgNamespaceNumber') == 1) || (mw.config.get('wgNamespaceNumber') == 3) || (mw.config.get('wgNamespaceNumber') == 7) || (mw.config.get('wgNamespaceNumber') == 9) || (mw.config.get('wgNamespaceNumber') == 11) || (mw.config.get('wgNamespaceNumber') == 13) || (mw.config.get('wgNamespaceNumber') == 15)){
     var top = tl.find('h2').outerHeight();
   window.setTimeout(function() {
 
     document.querySelector("#ca-edit a").textContent='编辑本地讨论';
     self.lines[0].dots = [];
     document.querySelector("#ca-editmoegirl a").textContent='去萌娘百科讨论';
     var y = top;
   },350);
     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>
</script>
</includeonly>

2021年9月8日 (三) 00:05的版本

Only for {{萌百页面嵌入}}

取自“https://hmoegirl.com/index.php?title=Widget:网站维护时间线&oldid=59810”