index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5">
    <title>勿忘初心</title>
    <meta name="description" content="95后青年,后端开发者,常叹自知甚少而愧,略懂前端,涉猎安全,故以孜孜不倦,日夜不息.">
    <meta name="keywords" content="Java,Spring,个人博客，微信小程序，博客">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="https://at.alicdn.com/t/font_3310772_63oi2jbn27j.css"/>
    <link rel="stylesheet" href="static/css/index.css">
    <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
    <link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
        if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?
            alert('朋友，上古浏览器不支持呢~');
        }
    </script>
</head>

<body>
    <div id="body-wrap">
        <nav class="not_index_bg" id="nav" style="background-image:url(./static/image/night.webp)">
            <div id="page_site-info">
                <div id="site-title">
                    <span class="blogtitle"></span>
                    <!-- <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script> -->
					<!-- 打字机特效js文件 -->
					<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/typed.js/2.0.12/typed.js" type="application/javascript"></script>
                    <script>
                        var typed = new Typed(".blogtitle", {
                            strings: ['我的思绪常贯穿黑夜，期待着未知处的黎明', 'Stay Hungry Stay Foolish'],
                            startDelay: 300,
                            typeSpeed: 100,
                            loop: true,
                            backSpeed: 50,
                            showCursor: true,
                        });
                    </script>
                </div>
            </div>
        </nav>
        <main id="content-outer">
            <div class="layout_page" id="content-inner">
                <div class="aside_content" id="aside_content">
                    <div class="card-widget card-info">
                        <div class="card-content">
                            <div class="card-info-avatar is-center">
                                <img class="avatar-img"
                                    src="./static/image/wanfenicon.webp"
                                    alt="avatar">
                                <div class="author-info__name">勿忘初心</div>
                                <div class="author-info__description">95后青年，后端开发者，略懂前端，涉猎安全，常以自知甚少而愧，故以孜孜不倦，日夜不息。</div>
                            </div>
                            <div class="card-info-avatar is-center">
                            	<span class="card-info-social-icons social">
                            	    <a class="social-icon" href="https://github.com/Invalided" target="_blank">
										<i class="iconfont icon-githubb"></i>
                            	    </a>
                            	</span>
                            	<span class="card-info-social-icons social">
                            	    <a class="social-icon" href="https://blog.csdn.net/mdzz14?type=blog" target="_blank">
										<i class="iconfont icon-boke"></i>
                            	    </a>
                            	</span>
								<span class="card-info-social-icons social">
								    <a class="social-icon" href="https://y.music.163.com/m/user/home?id=1296520663" target="_blank">
										<i class="iconfont icon-wangyiyunyinle1"></i>
								    </a>
								</span>
                            </div>	
                        </div>
                    </div>

                    <!-- <div class="card-widget card-announcement">
                        <div class="card-content">
                            <div class="item-headline">
                                <i class="fa fa-bullhorn" aria-hidden="true"></i>
                                <span>一言</span>
                            </div>
                            <div id="hitokoto"></div>
                        </div>
                    </div>
                    <div class="card-widget card-announcement">
                        <div class="card-content">
                            <div class="item-headline">
                                <i class="fa fa-calendar" aria-hidden="true"></i>
                                <span>今日诗词</span>
                            </div>
                            <div id="jinrishici-sentence"></div>
                        </div>
                    </div> -->
					
					<div class="card-widget card-webinfo">
					  <div class="card-content">
					  <div class="item-headline">
					  <i class="fa fa-line-chart" aria-hidden="true"></i>
					  <span>站点信息</span>
					  </div>
					 <div class="webinfo">
					   <div class="webinfo-item">
					       <div class="webinfo-site-uv-name">本站访客数 :</div>
					       <div class="webinfo-site-uv-count" id="busuanzi_value_site_uv"></div>
					   </div>
					   <div class="webinfo-item">
					       <div class="webinfo-site-name">本站总访问量 :</div>
					       <div class="webinfo-site-pv-count" id="busuanzi_value_site_pv"></div>
					   </div>
					           </div>
					   </div>
				 </div>
                </div>
				<div id="page">
					<!-- <article> -->
						<div class="title">
							<h2>作品展示</h2>
						</div>
					    <div class="product">
					        <div class="skillbox productleft">
					            <div class="worktitle">悦享校园</div>
					            <div class="show">
					                <img src="./static/image/o2o.webp">
					            </div>
					            <div class="desc">
					                <div>扫码登录体验，用户 user 123456 </div>	
									<div>商户 admin 123456</div>
					            </div>
					        </div>
					
					        <div class="skillbox productleft">
					            <div class="worktitle">轻聊</div>
					            <div class="show">
					                <img src="./static/image/qingliao.webp">
					            </div>
								<div class="desc">
								    <div>扫码下载注册登录即可</div>
									<div>数据定清，仅供测试</div>
								</div>
					        </div>
							
							<div class="skillbox productleft">
							    <div class="worktitle">此刻</div>
							    <div class="show">
							        <img src="./static/image/video.webp">
							    </div>
								<div class="desc">
								    <div>
										扫码或
										<a href="video.html" target="_blank">点击此处</a>
										<br />
										查看演示视频
									</div>
									
								</div>
							</div>
					<!-- </article> -->
				</div>
            </div>
        </main>
        <footer id="footer">
            <div id="footer-wrap">
                <div class="copyright">&copy;2021 - 2023 BY 勿忘初心</div>
            </div>
        </footer>
    </div>
	<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.4.1/jquery.min.js" type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/2.1.5/jquery.fancybox.js" type="application/javascript"></script>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/3.0.0/instantpage.js" type="application/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lazysizes/5.3.2/lazysizes.min.js" type="application/javascript"></script>
    <!-- aplayer、meting 音乐播放器组件 start -->
    <!-- require APlayer -->
	<link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" type="text/css" rel="stylesheet" />
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js" type="application/javascript"></script>
    <!-- require MetingJS -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script> -->
	<!-- aplayer、meting 音乐播放器组件 end-->
    <!-- nplayer -->
    <script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>

    <!--   一言、今日诗词   -->
    <!-- <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script> -->
    <!-- <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script> -->
	<!-- 点击页面烟花效果 -->
	<script src="./static/fireworks.js"></script>

    <script type="text/javascript">
        console.clear();
        console.log("%c 有朋自远方来, 不亦说乎.", "background:#24272A; color:#ffffff", "");
        console.log("%c 黑客大佬求放过，小服务器经不起折腾.", "background:#24272A; color:#ffffff", "");
        console.log("%c Github %c", "background:#24272A; color:#ffffff", "", "https://github.com/Invalided");
        console.log("%c 版本号: %c", "background:#24272A; color:#ffffff", "", "1.0.0");


        (function ($) {
            $.fn.snow = function (options) {
                var $flake = $('<div id="snowbox" />').css({ 'position': 'absolute', 'z-index': '9999', 'top': '-50px' }).html('&#10052;'),
                    documentHeight = $(document).height(),
                    documentWidth = $(document).width(),
                    defaults = {
                        minSize: 10,
                        maxSize: 20,
                        newOn: 1000,
                        flakeColor: "#FFFFFF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
                    },
                    options = $.extend({}, defaults, options);
                var interval = setInterval(function () {
                    var startPositionLeft = Math.random() * documentWidth - 100,
                        startOpacity = 0.5 + Math.random(),
                        sizeFlake = options.minSize + Math.random() * options.maxSize,
                        endPositionTop = documentHeight - 200,
                        endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
                        durationFall = documentHeight * 10 + Math.random() * 5000;
                    $flake.clone().appendTo('body').css({
                        left: startPositionLeft,
                        opacity: startOpacity,
                        'font-size': sizeFlake,
                        color: options.flakeColor
                    }).animate({
                        top: endPositionTop,
                        left: endPositionLeft,
                        opacity: 0.2
                    }, durationFall, 'linear', function () {
                        $(this).remove()
                    });
                }, options.newOn);
            };
        })(jQuery);
        $(function () {
            $.fn.snow({
                minSize: 5, /* 定义雪花最小尺寸 */
                maxSize: 50,/* 定义雪花最大尺寸 */
                newOn: 800  /* 定义密集程度，数字越小越密集 */
            });
        });

        // 浏览器搞笑标题
        var OriginTitle = document.title;
        var titleTime;
        document.addEventListener('visibilitychange', function () {
            if (document.hidden) {
                // $('[rel="icon"]').attr('href', "/funny.ico");
                document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
                clearTimeout(titleTime);
            }
            else {
                $('[rel="icon"]').attr('href', "/favicon.ico");
                document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle;
                titleTime = setTimeout(function () {
                    document.title = OriginTitle;
                }, 2000);
            }
        });
    </script>
</body>

</html>