master

分支 (1)

管理

管理

master

ProgramCX
/
index.html

<!DOCTYPE html>
<html style="    width: 90%;
    height: 90%;">
<head>
    <meta charset="UTF-8">
    <title>ProgramCX个人主页
    </title>
    <style>

        *{
        color:white;
        }

        .container {
            width: 300px;
            height: 151px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
            padding: 20px;
            border: 1.5px solid #6f6f6f30;
        }
        .language {
            margin-bottom: 20px;
        }
        .language-name {
            font-size: 1px;
            margin-bottom: 5px;
        }
        .progress-bar {
            width: 100%;
            height: 10px;
            background-color: #ffffff1c;
            border-radius: 10px;
            overflow: hidden;
        }
        .progress {
            border-radius: 10px;
            height: 100%;
            background-color: #5d5d5d;
            width: 0%;
            transition: width 2s;
        }
                body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 300px;
            height: 151px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
            padding: 20px;
        }
        .language {
            margin-bottom: 20px;
        }
        .language-name {
            font-size: 1px;
            margin-bottom: 5px;
        }
        .progress-bar {
            width: 100%;
            height: 10px;
            background-color: #ffffff1c;
            border-radius: 10px;
            overflow: hidden;
        }
        .progress {
            height: 100%;
            background-color: #5d5d5d;
            width: 0%;
            transition: width 2s;
        }
</style>
    <style>
        body {
            background-color: #333;
            width: 100%;
            height: 100%;
        }
        #window {
            background: radial-gradient(#313131,#0a0a0a);
            width: 50%;
            height: 90%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            margin: 50px auto;
            padding: 10px;
            padding: var(--base-size-32, 32px) !important;
            overflow: auto;
        }
        /* 修改滚动条的宽度 */
::-webkit-scrollbar {
    width: 10px;
}

/* 修改滚动条轨道的样式 */
::-webkit-scrollbar-track {
    background-color: #6b6b6b;
}

/* 修改滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
    background-color: #f4f4f417;
    border-radius: 5px;
}

        #cursor {
            animation: blink 1s steps(2, start) infinite;
        }
        @keyframes blink {
            to {
                visibility: hidden;
            }
        }
                .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
            border-radius: 5px;
            width: 240px;
            padding: 2px 16px;
            text-align: center;
        }
        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }
        .container {
            padding: 2px 16px;
        }
        .bycsYN {
    background-color: rgb(26, 28, 29);
    text-shadow: rgb(79, 86, 89) 0px 0px 1px, rgb(40, 40, 0) 0px 0px 1px, rgb(40, 40, 0) 0px 0px 1px;
    box-shadow: rgb(49, 53, 55) 0px 3px 20px 0px inset;
}
.bycsYN {
    position: absolute;
    z-index: 2;
    top: 0px;
    right: 0px;
    left: 0px;
    background-color: rgb(34, 34, 34);
    text-align: center;
    padding: 2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-shadow: rgb(160, 156, 155) 0px 0px 1px, rgb(255, 255, 251) 0px 0px 1px, rgb(255, 255, 251) 0px 0px 1px;
    box-shadow: rgb(65, 65, 65) 0px 3px 20px 0px inset;
}
dcoqCz {
    margin: 5px;
    letter-spacing: 1px;
    font-weight: 300;
}
h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.bycsYN {
    background-color: rgb(26, 28, 29);
    text-shadow: rgb(79, 86, 89) 0px 0px 1px, rgb(40, 40, 0) 0px 0px 1px, rgb(40, 40, 0) 0px 0px 1px;
    box-shadow: rgb(49, 53, 55) 0px 3px 20px 0px inset;
}

.bycsYN {
    position: absolute;
    z-index: 2;
    top: 0px;
    right: 0px;
    left: 0px;
    background-color: rgb(34, 34, 34);
    text-align: center;
    padding: 2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-shadow: rgb(160, 156, 155) 0px 0px 1px, rgb(255, 255, 251) 0px 0px 1px, rgb(255, 255, 251) 0px 0px 1px;
    box-shadow: rgb(65, 65, 65) 0px 3px 20px 0px inset;
}

.hPyNGy {
    color: rgb(232, 230, 227);
}

.hPyNGy {
    position: relative;
    font-size: 16px;
    width: 60%;
    max-width: 1200px;
    border-radius: 4px;
    color: white;
    -webkit-font-smoothing: antialiased;
    margin: 5vh auto 10px !important;
}
    </style>
</head>
<body>
    <p>Code From nb-group.github.io</p>
    <audio src="music.m4a" autoplay loop></audio>
    <div id="window">
        <div id="text"></div><span id="cursor">|</span>
    </div>

    <script>
        const text = ['<h2 style="border-bottom: 1px solid gray;">Hi there 👋</h2>','<p>欢迎来到Program的主页。</p>','<h3 style="/* border-bottom: 1px solid var(--color-border-muted); */">个人信息</h3>','<ul>',
            '<li>真实姓名：程旭</li>',
            '<li>生日：2005/11/20</li>',
            '<li>年龄：自己算</li>',
            '<li>身份：高考生、“水滴实验室”的创立者之一</li>',
            '<li>国籍：中华人民共和国</li>',
            '<h3>兴趣爱好</h3>','<ul>',
                '<li>乒乓球</li>',
                '<li>编程</li>',
                '<li>瞎装系统</li>',
            '<h3>事迹与项目</h3>','<ul>',
                '<li>制作破解学校机房教师控制软件-极域电子教室的OneKeyPlay软件 <a href="https://waterdroplab.gitee.io/SoftwareDownload/Files/onekeyplay.html" style="color: #2f81f7;">下载链接</a></li>',
            '<li>参与安徽省天长中学第五十届田径运动会相册网站项目 <a href="https://tzydh.gitee.io" style="color: #2f81f7;">网站链接</a></li>',
            '<li>创立“水滴实验室” <a href="https://waterdroplab.gitee.io" style="color: #2f81f7;">官网链接</a></li>',
            '<li>开发水滴时钟 <a href="https://waterdroplab.gitee.io/SoftwareDownload/Files/waterdropclock.html" style="color: #2f81f7;">下载链接</a></li>',
            '<h3>个人使用的编程语言</h3>','<p>略知皮毛</p>',
            '<div class="container">    <div class="language">        <div class="language-name">HTML</div>        <div class="progress-bar">            <div class="progress" data-progress="30"></div>        </div>    </div>    <div class="language">        <div class="language-name">VB</div>        <div class="progress-bar">            <div class="progress" data-progress="70"></div>        </div>    </div>    <div class="language">        <div class="language-name">C++</div>        <div class="progress-bar">            <div class="progress" data-progress="10"></div>        </div>    </div></div>']
        let i = 0;
        setInterval(() => {
            if (i < text.length) {
                var divElement = document.getElementById('text');
                divElement.innerHTML += text[i];
                i++;
            }
        },300);
    </script>

<script>
const element = document.getElementById('window');

element.addEventListener('scroll', function() {
        var progressBars = document.querySelectorAll('.progress');
        progressBars.forEach(function(progressBar) {
            var progressBarRect = progressBar.getBoundingClientRect();
            var progressBarTop = progressBarRect.top + window.pageYOffset;
            var progressBarBottom = progressBarTop + progressBar.offsetHeight;

            var isVisible = (progressBarBottom <= window.innerHeight + window.pageYOffset) && (progressBarTop >= window.pageYOffset);

            if (isVisible) {
                var progress = progressBar.getAttribute('data-progress');
                progressBar.style.width = progress + '%';
            }
        });
    });
</script>
</body>
</html>