s3.html

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第三话：零食“战争” - 小喵心语 CatTalk</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="《那些年的校园与我们》主线篇第三话：零食“战争”。" />
	<meta name="keywords" content="小喵心语, CatTalk, 那些年的校园与我们, 原创, 漫画, 校园, 青春, 表情包, 人物, 初中, 主线" />
	<meta name="author" content="小喵心语 CatTalk" />

	<!-- Favicons -->
	<link rel='apple-touch-icon' href='apple-touch-icon.png' sizes='180x180'>
	<link rel='icon' type='image/png' href='favicon.png' sizes='128x128'>
	<link rel='shortcut icon' href='favicon.ico'>
	<meta name='theme-color' content='#FFFFFF'>

	<!-- Color CSS Define -->
	<style id="switch-theme-color"></style>

	<!-- Add PWA Support -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="#FFE8E6">
	<link rel="manifest" href="manifest.json">
	<script type="text/javascript">
		if (navigator.serviceWorker != null) {
		  navigator.serviceWorker.register('sw.js')
		  .then(function(registration) {
			console.log('Registered events at scope: ', registration.scope);
		  });
		}
	</script>

	<!-- Loading -->
	<script>
		function loading() {
			let lightstyle = ":root {--color-1: #828282;--color-2: #ffffff;--color-3: #1d2f3b;--color-4: #000;--color-5: #FFE8E6;--color-6: #00000090;--color-7: #000;--color-8: #fff;--color-9: #1d2f3b;--color-10: #000;--color-11: #fff;--color-12: #efefef;--color-13: rgba(0, 0, 0, 0.5);--color-14: #fff;}";
			let darkstyle = ":root {--color-1: #FDF0E9;--color-2: #272625;--color-3: #F4B1AE;--color-4: #fff;--color-5: #141413;--color-6: #FDF0E990;--color-7: #FDF0E9;--color-8: #FDE8E6;--color-9: #FDF0E9;--color-10: #E68476;--color-11: #141413;--color-12: #141413;--color-13: rgba(255, 255, 255, 0.5);--color-14: #000;}";
			var checked = localStorage.getItem("theme");

			console.log(checked)
			if (checked == "light") {
				document.getElementById("dark-theme-toggle").checked = false;
				document.getElementById("switch-theme-color").innerHTML = lightstyle;
				console.log('成功获取配置文件：浅色模式');
			} else if (checked == "dark") {
				document.getElementById("dark-theme-toggle").checked = true;
				document.getElementById("switch-theme-color").innerHTML = darkstyle;
				console.log('成功获取配置文件：深色模式');
			} else {
				const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
        		if (themeMedia.matches) {
					document.getElementById("dark-theme-toggle").checked = false;
					document.getElementById("switch-theme-color").innerHTML = lightstyle;
					console.log('根据系统颜色选择：浅色模式');
        		} else {
					document.getElementById("dark-theme-toggle").checked = true;
					document.getElementById("switch-theme-color").innerHTML = darkstyle;
					console.log('根据系统颜色选择：深色模式');
        		}
			}
		}
	</script>

	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content="第二话：零食“战争”" />
	<meta property="og:image" content="http://cattalk.nousbuild.org/assets/images/cattalk-logo.jpg" />
	<meta property="og:url" content="http://cattalk.nousbuild.org/" />
	<meta property="og:site_name" content="小喵心语 CatTalk" />
	<meta property="og:description" content="《那些年的校园与我们》主线篇第三话：零食“战争”。" />
	<meta name="twitter:title" content="第三话：零食“战争”" />
	<meta name="twitter:image" content="http://cattalk.nousbuild.org/assets/images/cattalk-logo.jpg" />
	<meta name="twitter:url" content="http://cattalk.nousbuild.org/" />
	<meta name="twitter:card" content="《那些年的校园与我们》主线篇第三话：零食“战争”。" />

	<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,600,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">

	<!-- Bootstrap  -->
	<link rel="stylesheet" href="assets/css/bootstrap.css">

	<!-- Theme Style  -->
	<link rel="stylesheet" id="main-css" href="assets/css/style.css" />

	<!-- Music -->
	<link href="assets/css/APlayer.min.css" rel="stylesheet">

	<!-- Modernizr JS -->
	<script src="assets/js/modernizr-2.6.2.min.js"></script>

	<!-- Lozad JS -->
	<script type="text/javascript" src="assets/js/lozad.min.js"></script>

	<!-- Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137231556-1"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag() {
			dataLayer.push(arguments);
		}
		gtag('js', new Date());
		gtag('config', 'UA-137231556-1');
	</script>

</head>

<body onload="onload()">

	<div class="fh5co-loader"></div>

	<div id="page">
		<nav class="fh5co-nav" role="navigation">
			<div class="container-fluid">
				<div class="row">
					<div class="top-menu">
						<div class="container">
							<div class="row">
								<div class="col-sm-7 text-left menu-1">
									<ul>
										<li><a href="index.html">主页</a></li>
										<li class="has-dropdown active">
											<a href="#">主线篇</a>
											<ul class="dropdown">
												<li><a href="s3.html">第三话: <br>“零食”战争</a></li>
												<li><a href="s2.html">第二话: <br>上课怎能睡觉</a></li>
												<li><a href="s1.html">第一话: <br>碟中谍 一线生机</a></li>
											</ul>
										</li>
										<li class="has-dropdown">
											<a href="#">番外篇</a>
											<ul class="dropdown">
												<li><a href="sp1.html">特别篇: <br>意外“事故”</a></li>
												<li><a href="e1.html">番外一: <br>去烧烤吧</a></li>
											</ul>
										</li>
										<li><a href="about.html">关于</a></li>
									</ul>
								</div>
								<div class="col-sm-5">
									<ul class="fh5co-social-icons">
										<li><a href="https://www.nousbuild.org/"><i class="icon-home3"></i></a></li>
										<li><a href="mailto:admin@nousbuild.com"><i class="icon-envelop"></i></a></li>
										<li><a class="getminipp"><i style="cursor:pointer" class="icon-qrcode"></i></a></li>
										<li><a href="https://pudding0503.github.io/get-cattalk/"><i class="icon-github"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12 text-center menu-2">
						<div id="fh5co-logo">
							<h1>
								<a href="index.html">
									Cattalk<span>.</span>
									<small>小喵心语</small>
								</a>
							</h1>
						</div>
					</div>
				</div>
			</div>
		</nav>

		<!-- 漫画内容 -->
		<div id="fh5co-content" class="fh5co-no-pd-top">
			<div class="container">
				<div class="row animate-box">
					<div class="col-md-12 col-md-offset-0 text-center fh5co-heading">
						<h2><span>那些年的校园与我们</span></h2>
					</div>
				</div>
				<div class="row">
					<div class="col-md-9 col-padded-right">
						<div class="row">
							<div class="col-md-12">
								<div class="fh5co-blog animate-box">
									<div class="title title-pin text-center">
										<span class="posted-on">2020年1月23日</span>
										<h3><a href="#">零食“战争”</a></h3>
										<span class="category">主线篇</span>
									</div>

									<script type="text/javascript">
										for (var i = 1; i < 11; i++) {
											(function (i) {
												document.write('<img class="img-responsive lozad" data-src="https://img-1254235857.file.myqcloud.com/catcomics/s3/' + i + '.jpg" alt="漫画">')
											})(i);
										}
									</script>

									<div class="blog-text text-center">
										<p>想要留言互动？想要给小喵写信？扫码打开小程序参与更多互动。<br>人物专属表情需要在小程序内获取。</p>
										<ul class="fh5co-social-icons">
											<li>分享</li>
											<li><a href="http://connect.qq.com/widget/shareqq/index.html?url=http://cattalk.nousbuild.org/s3.html&sharesource=qzone&title=“零食”战争&pics=http://cattalk.nousbuild.org/assets/images/cover-s3.jpg&summary=主线篇第三话&desc=主线第三话更新了快来围观"><i class="icon-qq qq"></i></a></li>
											<li><a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://cattalk.nousbuild.org/s3.html&&sharesource=qzone&title=“零食”战争&pics=http://cattalk.nousbuild.org/assets/images/cover-s3.jpg&summary=主线篇第三话"><i class="icon-qzone"></i></a></li>
											<li><a style="cursor:pointer" class="wechat"><i class="icon-wechat"></i></a></li>
										</ul>
									</div>
								</div>

								<!--<div class="fh5co-blog animate-box">
									<div id="tcomment"></div>
									<script src="https://cdn.jsdelivr.net/npm/twikoo@1.4.18/dist/twikoo.all.min.js"></script>
									<script>
									twikoo.init({
										envId: 'twikoo-0gjebtk1322faad2',
										el: '#tcomment',
										region: 'ap-shanghai',
										path: 's3', 
										lang: 'zh-CN',
									})
									</script>
								</div>-->

							</div>

						</div>
					</div>

					<aside id="sidebar">
						<div class="col-md-3">

							<!-- 音乐盒 -->
							<div id="music" class="side animate-box">
								<div class="col-md-12 col-md-offset-0 text-center fh5co-heading fh5co-heading-sidebar">
									<h2><span>音乐盒 Music</span></h2>
								</div>
								<div class="row">
									<div class="col-md-12">
										<center>
											<div id="player" class="aplayer"></div>
										</center>
									</div>
								</div>
							</div>

							<!-- 小喵心语介绍 -->
							<div class="side animate-box">
								<div class="col-md-12 col-md-offset-0 text-center fh5co-heading fh5co-heading-sidebar">
									<h2><span>关于 About</span></h2>
								</div>
								<div class="fh5co-staff">
									<img src="assets/images/cattalk-logo.jpg" alt="CatTalk">
									<h3>CatTalk</h3>
									<strong class="role">小喵心语</strong>
									<p>原创校园青春漫画<br>《那些年的校园与我们》<br>官方发行平台</p>
									<ul class="fh5co-social-icons">
										<li><a href="https://www.nousbuild.org/"><i class="icon-home3"></i></a></li>
										<li><a href="mailto:admin@nousbuild.com"><i class="icon-envelop"></i></a></li>
										<li><a class="getminipp"><i style="cursor:pointer" class="icon-qrcode"></i></a></li>
										<li><a href="https://pudding0503.github.io/get-cattalk/"><i class="icon-github"></i></a></li>
									</ul>
								</div>
							</div>

							<!-- 深色模式 -->
							<div class="side animate-box">
								<div class="col-md-12 col-md-offset-0 text-center fh5co-heading fh5co-heading-sidebar">
									<h2><span>主题 Theme</span></h2>
								</div>

								<input type="checkbox" id="dark-theme-toggle" onclick="saveDarkMode(this)"/>
								<label class="dark-button" for="dark-theme-toggle"></label>
								
								<script type="text/javascript">loading();</script>

							</div>

							<!-- 作者介绍 -->
							<div class="side animate-box">
								<div class="col-md-12 col-md-offset-0 text-center fh5co-heading fh5co-heading-sidebar">
									<h2><span>作者 Author</span></h2>
								</div>
								<div class="blog-entry">
									<a href="#">
										<img src="assets/images/author-1.jpg" class="img-responsive" alt="昊小宁">
										<div class="desc">
											<span class="date">作者</span>
											<h3>昊小宁<br>编剧及绘画</h3>
										</div>
									</a>
								</div>
								<div class="blog-entry">
									<a href="#">
										<img src="assets/images/author-2.jpg" class="img-responsive" alt="村小山">
										<div class="desc">
											<span class="date">作者</span>
											<h3>村小山<br>首席美术指导</h3>
										</div>
									</a>
								</div>
								<div class="blog-entry">
									<a href="#">
										<img src="assets/images/author-3.jpg" class="img-responsive" alt="马小陆">
										<div class="desc">
											<span class="date">作者</span>
											<h3>马小陆<br>文字艺术设计</h3>
										</div>
									</a>
								</div>
							</div>
							<div class="side animate-box">
								<div class="col-md-12 col-md-offset-0 text-center fh5co-heading fh5co-heading-sidebar">
									<h2><span>小程序 Minipp</span></h2>
								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="insta" style="background-image: url(assets/images/minipp-wxqr.jpg);">
										</div>
										<div class="insta" style="background-image: url(assets/images/minipp-qqqr.jpg);">
										</div>
									</div>
								</div>
							</div>
						</div>
					</aside>

				</div>
			</div>
		</div>

		<footer id="fh5co-footer" role="contentinfo">
			<div class="container">

				<div class="row copyright">
					<div class="col-md-12 text-center">
						<p>
							<small class="block">&copy; <span id="footerYear">2019</span> <a href="https://cattalk.nousbuild.org/">CatTalk</a>. All Rights Reserved.</small>
							<small class="block">Special Thanks <a href="https://www.nousbuild.org/" target="_blank">Scenery Architecture</a></small>
						</p>
						<p>
							<ul class="fh5co-social-icons">
								<li><a href="https://www.nousbuild.org/"><i class="icon-home3"></i></a></li>
								<li><a href="mailto:admin@nousbuild.com"><i class="icon-envelop"></i></a></li>
								<li><a class="getminipp"><i style="cursor:pointer" class="icon-qrcode"></i></a></li>
								<li><a href="https://pudding0503.github.io/get-cattalk/"><i class="icon-github"></i></a></li>
							</ul>
						</p>
					</div>
				</div>

			</div>
		</footer>
	</div>

	<div id="js-palymusic" style="cursor:pointer" class="ap-pause js-music" onclick="ap_toggle()">
		<a class="js-palymusic"><i class="icon-music"></i></a>
	</div>

	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
	</div>

	<!-- jQuery -->
	<script src="assets/js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="assets/js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="assets/js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="assets/js/jquery.waypoints.min.js"></script>
	<!-- Flexslider -->
	<script src="assets/js/jquery.flexslider-min.js"></script>
	<!-- Magnific Popup -->
	<script src="assets/js/jquery.magnific-popup.min.js"></script>
	<script src="assets/js/magnific-popup-options.js"></script>
	<!-- Main -->
	<script src="assets/js/main.js"></script>
	<!-- Music -->
	<script src="assets/js/APlayer.min.js"></script>

	<!-- Inside Scripts -->
	<script type="text/javascript">
		/* footerYeaer js */
		document.getElementById('footerYear').innerHTML = new Date().getFullYear() + '';

		/* on load */
		function onload() {
			const observer = lozad();
			observer.observe();
		}

		/* save dark mode */
		function saveDarkMode(checkbox) {
			let lightstyle = ":root {--color-1: #828282;--color-2: #ffffff;--color-3: #1d2f3b;--color-4: #000;--color-5: #FFE8E6;--color-6: #00000090;--color-7: #000;--color-8: #fff;--color-9: #1d2f3b;--color-10: #000;--color-11: #fff;--color-12: #efefef;--color-13: rgba(0, 0, 0, 0.5);--color-14: #fff;}";
			let darkstyle = ":root {--color-1: #FDF0E9;--color-2: #272625;--color-3: #F4B1AE;--color-4: #fff;--color-5: #141413;--color-6: #FDF0E990;--color-7: #FDF0E9;--color-8: #FDE8E6;--color-9: #FDF0E9;--color-10: #E68476;--color-11: #141413;--color-12: #141413;--color-13: rgba(255, 255, 255, 0.5);--color-14: #000;}";

			if (checkbox.checked == true) {
				console.log('手动设置深色模式，并保存配置')
				localStorage.setItem("theme", "dark");
				document.getElementById("switch-theme-color").innerHTML = darkstyle;
			} else {
				console.log('手动设置浅色模式，并保存配置')
				localStorage.setItem("theme", "light");
				document.getElementById("switch-theme-color").innerHTML = lightstyle;
			}
		}

		/* APlayer */
		const ap = new APlayer({
			container: document.getElementById('player'),
			mini: true,
			audio: [{
				name: 'Play With Me',
				artist: 'Dan Salvato',
				url: 'https://img-1254235857.file.myqcloud.com/catcomics/music/s1-bgm.mp3',
				cover: 'assets/images/cd.png',
				theme: '#ebd0c2'
			}]
		});

		function ap_toggle() {
			ap.toggle();
			if (document.getElementById("js-palymusic").className == 'ap-pause js-music active') {
				document.getElementById("js-palymusic").setAttribute("class", "ap-play js-music active");
			} else if (document.getElementById("js-palymusic").className == 'ap-play js-music active') {
				document.getElementById("js-palymusic").setAttribute("class", "ap-pause js-music active");
			}
		}
	</script>

	<!-- live2d -->
	<script src="live2d/autoload.js"></script>
	
</body>

<script type="text/javascript" src="assets/js/sweetalert.min.js"></script>
<script type="text/javascript">

	$(function () {
		$(".getminipp").click(function () {
			swal({
				title: '<a style="color: #333333">小程序端</a>',
				text: '<a style="color: #333333">获得更好体验，支持 QQ 和 微信小程序。<br><br><img src="assets/images/minipp-qr.jpg" width="320px" he1ght="160px"></a>',
				imageUrl: "assets/images/my-minipp.jpg",
				html: true
			});
		});
	});

	$(function () {
		$(".wechat").click(function () {
			swal({
				title: '<a style="color: #4DB774">微信分享</a>',
				text: '<a style="color: #4DB774">请使用微信扫描此二维码，然后再点击右上角分享。<br><br><img src="assets/images/qr/wechat-s3.png" width="160px" he1ght="160px"></a>',
				imageUrl: "assets/images/my-wechat.jpg",
				html: true
			});
		});
	});

</script>

</html>