master

分支 (1)

管理

管理

master

snowflake-home-page
/
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>Chuan-Blog site</title>
    <meta name="description" content="Chuan">
    <meta name="keywords" content="Chuan，Blog">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="/img/mylogo.ico">
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.fancybox@2.1.5/source/jquery.fancybox.css">
    <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(https://api.ixiaowai.cn/api/api.php)">
            <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>
                    <script>
                        var typed = new Typed(".blogtitle", {
                            // strings: ['人生海海，山山而川', 'World Peace'],
                            strings: ['龙腾云霭鸿鹏志,凤舞红霞盛世烟', '2024 Happy New Year',' 欢 度 春 节'],
                            startDelay: 300, // 文字每轮播间隔的时长，数值越大越慢
                            typeSpeed: 200, // 文字出现的速度，数值越大越慢
                            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="/img/mylogo.jpg" alt="avatar">
                                <div class="author-info__name">Chuan</div>
                                <div class="author-info__description">web前端开发<br>Front-End Developer</div>
                            </div>
                            <div class="card-info-social-icons is-center">
                                <a class="social-icon" href="https://github.com/jreeycheng232" target="_blank">
                                    <i class="fa fa-github"></i>
                                </a>
                            </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>
                <article id="page">
                    <div class="article-container">
                        <h2>音乐</h2>
                        <meting-js auto="https://music.163.com/#/playlist?id=2736614717">
                        </meting-js>
                        <hr>

                        <h2>技能</h2>
                        <div class="skillbox">
                            <div class="skillbar">
                                <div class="skillbar-title"
                                    style="background: linear-gradient(to right, #FF0066 0%, #FF00CC 100%); width: 75%">
                                    <span>JavaScript</span>
                                </div>
                                <div class="skill-bar-percent">75%</div>
                            </div>
                            <div class="skillbar">
                                <div class="skillbar-title"
                                    style="background: linear-gradient(to right, #9900FF 0%, #CC66FF 100%); width: 95%">
                                    <span>HTML</span>
                                </div>
                                <div class="skill-bar-percent">95%</div>
                            </div>
                            <div class="skillbar">
                                <div class="skillbar-title"
                                    style="background: linear-gradient(to right, #2196F3 0%, #42A5F5 100%); width: 70%">
                                    <span>CSS</span>
                                </div>
                                <div class="skill-bar-percent">70%</div>
                            </div>
                            <div class="skillbar">
                                <div class="skillbar-title"
                                    style="background: linear-gradient(to right, #00BCD4 0%, #80DEEA 100%); width: 60%">
                                    <span>AJAX</span>
                                </div>
                                <div class="skill-bar-percent">60%</div>
                            </div>
                            <div class="skillbar">
                                <div class="skillbar-title"
                                    style="background: linear-gradient(to right, #eaec4b 0%, #fd7247 100%); width: 70%">
                                    <span>Node</span>
                                </div>
                                <div class="skill-bar-percent">70%</div>
                            </div>
                            <div class="skillbar">
                                <div class="skillbar-title"
                                    style="background: linear-gradient(to right, #4CAF50 0%, #81C784 100%); width: 80%">
                                    <span>Vue</span>
                                </div>
                                <div class="skill-bar-percent">80%</div>
                            </div>
                            <div class="skillbar">
                                <div class="skillbar-title"
                                    style="background: linear-gradient(to right, #5481fc 0%, #480ceb 100%); width: 45%">
                                    <span>React</span>
                                </div>
                                <div class="skill-bar-percent">45%</div>
                            </div>
                        </div>

                        <hr>
                        <h2>刷题</h2>
                        <div class="tool">
                            <a href="https://leetcode-cn.com/problemset/all/" target="_blank">Leetcode</a>
                            <!-- <br> -->
                            <a href="https://www.nowcoder.com/ta/coding-interviews" target="_blank">剑指 Offer</a>
                        </div>

                        <hr>
                        <h2>收藏</h2>
                        <div class="tool">
                            <a href="http://tooool.org/" target="_blank" rel="noopener noreferrer">❶程序员导航  ╠═  ═╣  </a>
                            <a href="https://adzhp.cn/" target="_blank" rel="noopener noreferrer">❷爱达杂货铺  ╠═  ═╣  </a>
                            <a href="http://ifeve.com/" target="_blank" rel="noopener noreferrer">❸并发编程网  ╠═  ═╣  </a>
                        </div>
                    </div>
                </article>
            </div>
        </main>
        <footer id="footer">
            <div id="footer-wrap">
                <div class="copyright">&copy; 2021 - 2024 BY Chuan All Rights Reserved</div>
            </div>
        </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery.fancybox@2.1.5/source/jquery.fancybox.js"></script>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/instant.page@3.0.0/instantpage.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.0/lazysizes.min.js" async></script>
    <!-- aplayer、meting -->
    <!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    <!-- 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>

    <!-- 看板娘 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

    <!--鼠标点击效果-->
    <script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.8/js/maodian.js"></script>

    <script type="text/javascript">
        console.clear();
        console.log("%c 有朋自远方来, 不亦说乎.", "background:#24272A; color:#ffffff", "");
        console.log("%c Github %c", "background:#24272A; color:#ffffff", "", "https://github.com/");
        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: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#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: 80,/* 定义雪花最大尺寸 */
                newOn: 300  /* 定义密集程度，数字越小越密集 */
            });
        });

        // 浏览器搞笑标题
        // 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;
        //         }, 1000);
        //     }
        // });
    </script>
</body>

</html>