Files
llbzow.github.io/live2d-widget/demo/login.html
2022-11-17 14:25:21 +00:00

721 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<script src="/live2d-widget/autoload.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.2.0">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel="mask-icon" href="/images/logo.svg" color="#222">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
<link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
<script src="/lib/pace/pace.min.js"></script>
<script id="hexo-configurations">
var NexT = window.NexT || {};
var CONFIG = {"hostname":"example.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
</script>
<meta name="description" content="看板娘登陆平台 html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-sig">
<meta property="og:type" content="website">
<meta property="og:title" content="流量不足ow的个人博客">
<meta property="og:url" content="http://example.com/live2d-widget/demo/login.html">
<meta property="og:site_name" content="流量不足ow的个人博客">
<meta property="og:description" content="看板娘登陆平台 html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-sig">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/live2d-widget/assets/screenshot-1.png">
<meta property="article:published_time" content="2022-11-07T17:13:56.479Z">
<meta property="article:modified_time" content="2022-11-07T16:45:40.967Z">
<meta property="article:author" content="llbzow">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/live2d-widget/assets/screenshot-1.png">
<link rel="canonical" href="http://example.com/live2d-widget/demo/login">
<script id="page-configurations">
// https://hexo.io/docs/variables.html
CONFIG.page = {
sidebar: "",
isHome : false,
isPost : false,
lang : 'zh-CN'
};
</script>
<script>
(function () {
if ('') {
if (prompt('请输入文章密码') !== '') {
alert('密码错误!');
if (history.length === 1) {
location.replace("http://blog.llbzow.tk"); // 这里替换成你的首页
} else {
history.back();
}
}
}
})();
</script>
<title> | 流量不足ow的个人博客
</title>
<noscript>
<style>
.use-motion .brand,
.use-motion .menu-item,
.sidebar-inner,
.use-motion .post-block,
.use-motion .pagination,
.use-motion .comments,
.use-motion .post-header,
.use-motion .post-body,
.use-motion .collection-header { opacity: initial; }
.use-motion .site-title,
.use-motion .site-subtitle {
opacity: initial;
top: initial;
}
.use-motion .logo-line-before i { left: initial; }
.use-motion .logo-line-after i { right: initial; }
</style>
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="container use-motion">
<div class="headband"></div>
<header class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="切换导航栏">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
</div>
<div class="site-meta">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<h1 class="site-title">流量不足ow的个人博客</h1>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger">
</div>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="main-menu menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
<span>0%</span>
</div>
<main class="main">
<div class="main-inner">
<div class="content-wrap">
<div class="content page posts-expand">
<div class="post-block" lang="zh-CN">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
</h1>
<div class="post-meta">
<ul class="breadcrumb">
<li><a href="/live2d-widget/">LIVE2D-WIDGET</a></li>
<li><a href="/live2d-widget/demo/">DEMO</a></li>
<li>LOGIN</li>
</ul>
</div>
</header>
<div class="post-body">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>看板娘登陆平台</title>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
<script src="../live2d.min.js"></script>
<style>
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type=text] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type=password] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#stage {
position: relative;
}
#stage img {
width: 100%;
margin-bottom: 20px;
border-radius: 20px;
}
#stage button {
position: absolute;
padding: 0;
}
#inner {
position: relative;
background-color: #999;
clip-path: circle(120px at center);
}
#cover {
position: absolute;
background-color: #CB3837;
width: 100%;
height: 100%;
bottom: 10%;
transition: all 1s;
box-shadow: 0 0 0 5px rgba(0, 0, 0, .1);
}
#text {
position: absolute;
bottom: 30%;
font-size: 2em;
left: 50%;
transform: translateX(-50%);
opacity: 0.4;
font-weight: bold;
}
#detail {
position: absolute;
background: rgba(255, 255, 255, .1);
width: 100%;
height: 10px;
bottom: 0;
}
#handle {
position: absolute;
background: #ccc;
bottom: -2px;
box-shadow: 0 1px 0 1px rgba(0, 0, 0, .1);
height: 8px;
left: 50%;
margin-left: -15px;
width: 30px;
cursor: pointer;
}
#info {
left: 40px;
bottom: 20px;
}
#refresh {
right: 40px;
bottom: 20px;
}
#live2d {
cursor: grab;
height: 300px;
width: 300px;
}
#live2d:active {
cursor: grabbing;
}
</style>
</head>
<body class="text-center">
<form class="form-signin" action="login.php" method="post">
<div id="stage">
<div id="inner">
<div id="cover">
<div id="text">
<span style="color: cyan;">MIMI</span><span style="color: white;">POWERED</span>
</div>
<div id="detail"></div>
<div id="handle"></div>
</div>
<canvas class="mb-4" id="live2d" width="800" height="800"></canvas>
</div>
<button class="btn btn-link" id="info"><i class="fa fa-lg fa-info"></i></button>
<button class="btn btn-link" id="refresh"><i class="fa fa-lg fa-sync-alt"></i></button>
</div>
<h1 class="h3 mb-3 fw-normal">看板娘登陆平台</h1>
<label for="room" class="sr-only">用户名</label>
<input type="text" name="room" class="form-control" placeholder="用户名" required autofocus>
<label for="pass" class="sr-only">密码</label>
<input type="password" name="pass" class="form-control" placeholder="密码" required>
<div class="checkbox mb-4">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
</div>
<div class="d-grid">
<button class="btn btn-lg btn-primary" type="submit">登录</button>
</div>
<p class="mt-5 mb-3 text-muted">Copyleft &copy; Mimi 2019</p>
</form>
<script>
/*
* _(:з」∠)_
* Created by Shuqiao Zhang in 2019.
* https://zhangshuqiao.org
*/
/*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*/
window.addEventListener("load", () => {
"use strict";
if (!CSS.supports("clip-path", "circle(120px at center)")) {
document.getElementById("stage").innerHTML = '<img src="../assets/screenshot-1.png">';
return;
}
const apiPath = "https://live2d.fghrsh.net/api";
let state = 0, loading = false,
modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId");
if (modelId === null) {
modelId = 1;
modelTexturesId = 53;
}
loadModel(modelId, modelTexturesId);
function loadModel(modelId, modelTexturesId) {
localStorage.setItem("modelId", modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem("modelTexturesId", modelTexturesId);
loadlive2d("live2d", `${apiPath}/get/?id=${modelId}-${modelTexturesId}`, null);
console.log("live2d", `模型 ${modelId}-${modelTexturesId} 加载完成`);
setTimeout(() => {
coverPosition("80%");
state = 2;
}, 2000);
}
function loadRandModel() {
const modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId");
fetch(`${apiPath}/rand_textures/?id=${modelId}-${modelTexturesId}`)
.then(response => response.json())
.then(result => {
loadModel(modelId, result.textures.id);
setTimeout(() => {
state = 2;
coverPosition("80%");
loading = false;
}, 1000);
});
}
function loadOtherModel() {
const modelId = localStorage.getItem("modelId");
fetch(`${apiPath}/switch/?id=${modelId}`)
.then(response => response.json())
.then(result => {
loadModel(result.model.id);
});
}
function coverPosition(pos) {
document.getElementById("cover").style.bottom = pos;
}
document.getElementById("info").addEventListener("click", () => {
fetch("https://v1.hitokoto.cn")
.then(response => response.json())
.then(result => {
alert("「" + result.hitokoto + "」——" + result.from);
});
});
document.getElementById("refresh").addEventListener("click", () => {
if (loading) return;
state = 0;
coverPosition("10%");
loading = true;
setTimeout(loadRandModel, 1000);
});
document.getElementById("handle").addEventListener("click", () => {
if (state === 1) {
state = 2;
coverPosition("80%");
}
else if (state === 2) {
state = 1;
coverPosition("20%");
}
});
document.querySelector("input[type=password]").addEventListener("focus", () => {
if (state === 2) {
state = 1;
coverPosition("20%");
}
});
document.querySelector("input[type=password]").addEventListener("blur", () => {
if (state === 1) {
state = 2;
coverPosition("80%");
}
});
});
</script>
</body>
</html>
<link rel="stylesheet" href="/css/spoiler.css" type="text/css"><script src="/js/spoiler.js" type="text/javascript" async></script>
</div>
</div>
<ul class="breadcrumb">
<li><a href="/live2d-widget/">LIVE2D-WIDGET</a></li>
<li><a href="/live2d-widget/demo/">DEMO</a></li>
<li>LOGIN</li>
</ul>
</div>
<div class="comments" id="gitalk-container"></div>
<script>
window.addEventListener('tabs:register', () => {
let { activeClass } = CONFIG.comments;
if (CONFIG.comments.storage) {
activeClass = localStorage.getItem('comments_active') || activeClass;
}
if (activeClass) {
let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
if (activeTab) {
activeTab.click();
}
}
});
if (CONFIG.comments.storage) {
window.addEventListener('tabs:click', event => {
if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
let commentClass = event.target.classList[1];
localStorage.setItem('comments_active', commentClass);
});
}
</script>
</div>
<div class="toggle sidebar-toggle">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
<aside class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc">
文章目录
</li>
<li class="sidebar-nav-overview">
站点概览
</li>
</ul>
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
<div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-number">1.</span> <span class="nav-text">看板娘登陆平台</span></a></li></ol></div>
</div>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image" alt="llbzow"
src="/images/avatar.png">
<p class="site-author-name" itemprop="name">llbzow</p>
<div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">8</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories/">
<span class="site-state-item-count">2</span>
<span class="site-state-item-name">分类</span></a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/">
<span class="site-state-item-count">2</span>
<span class="site-state-item-name">标签</span></a>
</div>
</nav>
</div>
</div>
</div>
</aside>
<div id="sidebar-dimmer"></div>
</div>
</main>
<footer class="footer">
<div class="footer-inner">
<div class="copyright">
&copy; 2022-06
<span itemprop="copyrightYear">2022</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">llbzow</span>
</div>
<!--
<div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
</div>
-->
<div class="busuanzi-count">
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
<span class="post-meta-item-icon">
<i class="fa fa-user"></i>
</span>
<span class="site-uv" title="总访客量">
<span id="busuanzi_value_site_uv"></span>
</span>
</span>
<span class="post-meta-divider">|</span>
<span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="site-pv" title="总访问量">
<span id="busuanzi_value_site_pv"></span>
</span>
</span>
</div>
</div>
</footer>
</div>
<script color='0,0,255' opacity='0.5' zIndex='-1' count='99' src="/lib/canvas-nest/canvas-nest.min.js"></script>
<script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
<script src="/lib/anime.min.js"></script>
<script src="/lib/velocity/velocity.min.js"></script>
<script src="/lib/velocity/velocity.ui.min.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/motion.js"></script>
<script src="/js/schemes/pisces.js"></script>
<script src="/js/next-boot.js"></script>
<script defer src="/lib/three/three.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
<script>
NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
var gitalk = new Gitalk({
clientID : '1e2867144d855824b913# GitHub Application Client ID',
clientSecret: '3c474768436b020bd64b81c163e40c7ac7e3f1d6# GitHub Application Client Secret',
repo : 'BlogComments# Repository name to store issues',
owner : 'llbzow# GitHub repo owner',
admin : ['llbzow# GitHub repo owner and collaborators, only these guys can initialize gitHub issues'],
id : 'c99f292b337be155c00f399a4e18ec94',
language: '',
distractionFreeMode: true
});
gitalk.render('gitalk-container');
}, window.Gitalk);
});
</script>
</body>
</html>