main

分支 (2)

管理

管理

main

1.2.3

course-index
/
coursePhone.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>一课表</title>
</head>

<body style="background-color: #89daff;padding: 0;overflow: hidden;display: flex;
    flex-direction: column;background-image: url(./bg1.jpg);background-repeat: round;">
    <div style="height: 80px;background-color: #175b759c;display: flex;flex-direction: row;align-items: center;
        padding:0 20px;flex-shrink: 0;backdrop-filter: blur(10px);">
        <img style="height: 70px;width: 70px;border: none;outline: none;flex-shrink: 0;" src="./iconEm.png" />
        <div style="width: 1px;height: 40px;background-color: white;margin-right: 10px;
        opacity: 0.5;flex-shrink: 0;"></div>
        <h1>一课表</h1>
        <h2>v1.2.3</h2>
        <h2 id="version">版本号:1000230</h2>
        <div style="flex-grow: 1;"></div>
        <div style="color: white; padding-right: 10px;
        font-size: 14px;">反馈邮箱：oneCourse@outlook.com</div>
        <button onclick="toSQSP()">申请适配</button>
        <button onclick="window.location.href='./courseTest.html'">测试课表</button>
        <button onclick="window.location.href='https://ffffffds.gitee.io/chart-coder/'">其他(chartCoder)</button>
    </div>
    <div style="flex-grow: 1;overflow: hidden;">
        <div style="position: fixed;right: 10px;height: 100%;display: flex;
        flex-direction: column;justify-content: center;" id="dotContainer">
            <div class="dot now" id="dotP" style="display: none;"></div>
        </div>
        <div style="width: 100%;display: flex;flex-direction: column;height: fit-content;
        overflow-y: hidden;position: relative;top: 0;" id="contentBg">
            <div style="height: 100%;background-color: #80808010;
            width: 100%;" class="page">
                <img src="./img1.png" style="position: relative;left: 50%;
                top: 300px;transform: translateX(-50%);object-fit: contain;
                height: 900px;" />
                <div style="width:100%;display: flex;flex-direction: column;
                align-items: center;position: absolute;top: 50px;">
                    <text style="font-size: 100px;color: white;letter-spacing: 20px;
                    text-shadow: 0 0 15px #00000050;border-bottom: 2px solid white;
                    padding: 10px 80px;">一课表</text>
                    <text style="font-size: 20px;color: white;letter-spacing: 5px;
                    padding-top: 5px;text-shadow: 0 0 10px #00000080;">
                        清爽简洁的大学生课表软件</text>
                </div>
            </div>
            <div style="height: 100%;background-color: #80808010;
                        width: 100%;display: flex;flex-direction: row;" class="page">
                <img src="./img2.png" style="object-fit: contain;margin: 100px 30px 0 30px;
                                height: 900px;flex-shrink: 0;" />
                <div style="display: flex;flex-direction: column;flex-grow: 1;
                margin-top: 100px;padding-top: 100px;">
                    <div class="main">卡片式管理</div>
                    <div class="detail">只给你最想得到的信息</div>
                </div>
            </div>
            <div style="height: 100%;background-color: #80808010;
                                    width: 100%;display: flex;flex-direction: row;" class="page">
                <div style="display: flex;flex-direction: column;flex-grow: 1;
                            margin-top: 100px;padding-top: 100px;">
                    <div class="main r">快捷添加课程</div>
                    <div class="detail r">即使没有适配学校也能轻松使用</div>
                </div>
                <img src="./img3.png" style="object-fit: contain;margin: 100px 30px 0 30px;
                                                            height: 900px;flex-shrink: 0;" />
            </div>
            <div style="height: 100%;background-color: #80808010;
                                    width: 100%;display: flex;flex-direction: row;" class="page">
                <img src="./img4.png" style="object-fit: contain;margin: 100px 30px 0 30px;
                                            height: 900px;flex-shrink: 0;" />
                <div style="display: flex;flex-direction: column;flex-grow: 1;
                            margin-top: 100px;padding-top: 100px;">
                    <div class="main" style="font-size: 70px;">日程与课程同时兼具</div>
                    <div class="detail">还在担心记不住的DDL吗</div>
                </div>
            </div>
            <div style="height: 100%;background-color: #80808010;
                                                width: 100%;display: flex;flex-direction: row;" class="page">
                <div style="display: flex;flex-direction: column;flex-grow: 1;
                                        margin-top: 100px;padding-top: 100px;">
                    <div class="main r">内嵌的教务登录</div>
                    <div class="detail r">让你拥有一个更加美观的教务系统</div>
                </div>
                <img src="./img5.png" style="object-fit: contain;margin: 100px 30px 0 30px;
                                                                        height: 900px;flex-shrink: 0;" />
            </div>
            <div style="height: 100%;background-color: #80808010;
                                                width: 100%;display: flex;flex-direction: row;" class="page">
                <img src="./img6.png" style="object-fit: contain;margin: 100px 30px 0 30px;
                                                        height: 900px;flex-shrink: 0;" />
                <div style="display: flex;flex-direction: column;flex-grow: 1;
                                        margin-top: 100px;padding-top: 100px;">
                    <div class="main">独特的教务页面</div>
                    <div class="detail">尽收你的学习情况</div>
                </div>
            </div>
            <div style="height: 100%;background-color: #80808010;
                 width: 100%;display: flex;flex-direction: column;"
                class="page">
                <div style="display: flex;flex-direction: row;justify-content: center;">
                    <img src="./img7.png" style="object-fit: contain;margin: 100px 10px 0 10px;
                                                                    height: 900px;flex-shrink: 0;" />
                    <img src="./img8.png" style="object-fit: contain;margin: 100px 10px 0 10px;
                                        height: 900px;flex-shrink: 0;" />
                </div>
                <div style="display: flex;flex-direction: column;flex-grow: 1;
                                                    margin-top: 100px;padding-top: 100px;">
                    <div class="main m" style="font-size: 70px;">丰富的鸿蒙卡片加持</div>
                    <div class="detail m">8大种类，15张卡片让你玩个够</div>
                </div>

            </div>
            <div style="height: 100%;background-color: #80808010;
                        width: 100%;display: flex;flex-direction: row;" class="page">
                <div style="display: flex;flex-direction: column;flex-grow: 1;
                        margin-top: 100px;padding-top: 100px;">
                    <div class="main r">支持深色模式</div>
                    <div class="detail r">夜晚看课也不会被闪瞎眼睛</div>
                </div>
                <img src="./img9.png" style="object-fit: contain;margin: 100px 30px 0 30px;
                        height: 900px;flex-shrink: 0;" />
            </div>
            <div style="height: 100%;background-color: #80808010;
                        width: 100%;display: flex;flex-direction: column;align-items: center;" class="page">
                <img src="./img10.png" style="object-fit: contain;margin-top: 50px;
                            height: 600px;flex-shrink: 0;" />
                <div style="display: flex;flex-direction: column;flex-grow: 1;">
                    <div class="main m" style="font-size: 70px;">多设备支持&nbsp&nbsp一键传递</div>
                    <div class="detail m">将来也会支持手表噢</div>
                </div>

            </div>
            <div style="height: 100%;background-color: #80808010;
                    width: 100%;display: flex;flex-direction: column;align-items: center;" class="page">
                <div style="display: flex;flex-direction: column;flex-grow: 1;overflow-y: scroll;
                    width: 100%;padding: 10px 200px;box-sizing: border-box;">
                    <div class="main m" style="font-size: 70px;">历史版本更新</div>
                    <div class="detail" style="font-size: 16px;letter-spacing: 2px;">1.2.3更新：<br>
                    1.新增课程周视图卡片<br>
                    2.新增课程预览界面添加删除课程<br>
                    3.修复课程编辑的一些bug<br>
                    4.新增关闭开屏页<br>
                    5.新增上滑卡片默认显示的课程、日程<br>
                    6.新增课程、日程预览界面返回按钮显示课程表、日程表名称<br>
                    7.修复课程预览界面滚动错误<br>
                    8.修复明暗转换的转换方式<br>
                    9.修复选择色调时偶尔颜色与名字不对应<br>
                    10.修复修改课程、日程名称后卡片对应课程、日程显示不存在<br>
                    <br>
1.2.0更新：<br>
                    1.新增智能教务课表导入，新建课程表-三个点-智能导入<br>
                    2.新增深圳大学教务适配<br>
                    3.新增问题反馈与适配申请界面<br>
                    4.新增卡片字体粗细调节，课表单双周输入<br>
                    5.修改页面字体细节<br>
                    6.新增对手表的支持<br>
                    7.新增excel表格导入<br>
                    8.新增分布式传递，可以将课程表传递给手机、平板或手表<br>
                    9.修复一些bug，优化页面</div>
                </div>

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

<style>
    html,
    body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .r {
        text-align: right;
    }

    .m {
        text-align: center;
    }

    h1 {
        font-size: 16px;
        letter-spacing: 4px;
        color: white;
        font-weight: 300;
        flex-shrink: 0;
    }
    h2 {
        font-size: 14px;
        letter-spacing: 2px;
        color: white;
        font-weight: 400;
        flex-shrink: 0;
        margin: 0 5px;
    }

    button {
        border-radius: 40px;
        outline: none;
        border: none;
        margin: 0 5px;
        padding: 5px 20px;
        background-color: #0066ff;
        color: white;
        letter-spacing: 2px;
        font-size: 13px;
        transition-duration: 300ms;
        transition-timing-function: ease-in-out;
    }

    button:hover {
        transform: scale(1.05);
    }

    button:active {
        transform: scale(0.95);
    }

    .page {
        flex-shrink: 0;
    }

    #contentBg {
        transition-duration: 600ms;
        transition-timing-function: ease-in-out;
    }

    .main {
        font-size: 80px;
        letter-spacing: 20px;
        color: white;
        text-shadow: 0 0 10px #00000080;
    }

    .detail {
        font-size: 40px;
        letter-spacing: 10px;
        color: white;
        text-shadow: 0 0 10px #00000080;
    }

    .dot {
        width: 8px;
        height: 8px;
        background-color: rgb(4, 91, 141);
        border-radius: 10px;
        margin: 5px 0;
    }

    .now {
        box-shadow: 0 0 1px 3px goldenrod;
    }
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    var height = document.body.clientHeight + 400;
    var bg = document.getElementById('contentBg');
    var nowTop = 0;
    var pageNum = bg.childElementCount;
    let eles = document.getElementsByClassName('page')
    let dotP = document.getElementById('dotP')
    let dotC = document.getElementById('dotContainer')
    console.log(window.screen.height)
    for (let i = 0; i < eles.length; i++) {
        let child = eles.item(i)
        child.style.height = height + 'px';
        let childs = child.children
        for (let j = 0; j < childs.length; j++) {
            $(childs.item(j)).fadeOut(10)
        }
        let dot = dotP.cloneNode(false)
        dot.setAttribute('id', 'dot_' + String(i))
        dot.style.display = 'block'
        if (i == 0) dot.setAttribute('class', 'dot now')
        else dot.setAttribute('class', 'dot')
        dotC.appendChild(dot)
    }
    setTimeout(() => {
        let childs = bg.children.item(0).children
        for (let i = 0; i < childs.length; i++) {
            $(childs.item(i)).fadeIn(300)
        }
    }, 300)


    window.onmousewheel = scroll
    function scroll(e) {
        let oriTop = nowTop
        if (e.deltaY > 50 && nowTop + 1 < pageNum) {
            nowTop += 1;
        } else if (e.deltaY < -50 && nowTop - 1 >= 0) {
            nowTop -= 1;
        } else return
        let childs = bg.children.item(oriTop).children
        for (let i = 0; i < childs.length; i++) {
            $(childs.item(i)).fadeOut(600)
        }
        bg.style.top = -nowTop * height + 'px'
        document.getElementById('dot_' + nowTop).setAttribute('class', 'dot now')
        document.getElementById('dot_' + oriTop).setAttribute('class', 'dot')

        setTimeout(() => {
            let childs = bg.children.item(nowTop).children
            for (let i = 0; i < childs.length; i++) {
                $(childs.item(i)).fadeIn(600)
            }
        }, 500)

        console.log(nowTop)
    }

    function toSQSP() {
        window.location.href = 'https://gitee.com/ffffffds/one-course/blob/master/README.md'
    }

    var sY;
    var eY;
    window.ontouchstart = function(e){
        sY = e.touches[0].pageY
    }
    window.ontouchmove = function(e){
        eY = e.touches[0].pageY
    }
    window.ontouchend = function(e){
        console.log(sY, eY)
        scroll({deltaY: sY - eY})
    }
</script>

</html>