chenyqthu.github.io/index.html at master · ChenyqThu/chenyqthu.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
    <title>跟踪仪表盘</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 0px;
            background-color: white;
        }

        .button-container {
			position: absolute;
			top: 70px; /* 按钮距顶部的距离 */
			left: 50%;
			transform: translateX(-50%); /* 水平居中 */
			z-index: 2; /* 确保在iframe之上 */
			display: none;
			opacity: 0;
			transition: opacity 1s ease;
		}

		/* 当按钮容器添加了 'visible' 类时，改变透明度 */
		.button-container.visible {
			opacity: 1;
		}

        .iframe-container {
            position: relative;
            width: 100%;
			height: 500px;
            background-color: white;

        }

        .iframe {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .button {
            background-color: #e9ecef;
            color: #495057;
            padding: 8px 16px;
            border: none;
            cursor: pointer;
            border-radius: 0px;
            transition: background-color 0.3s;
            font-size: 14px;
            margin: 0 0px; /* 为按钮添加间距 */
        }

        .button:hover {
            background-color: #dee2e6;
        }

        .button.active {
            background-color: #adb5bd;
            color: white;
        }
    </style>
    <script type="text/javascript">
        function switchIframe(iframeId) {
            var iframes = document.getElementsByClassName('iframe');
            var buttons = document.getElementsByClassName('button');
            for (var i = 0; i < iframes.length; i++) {
                iframes[i].style.display = 'none';
                buttons[i].classList.remove('active');
            }
            document.getElementById(iframeId).style.display = 'block';
            document.querySelector(`[data-target='${iframeId}']`).classList.add('active');
        }

		document.addEventListener('DOMContentLoaded', function() {
			var buttonContainer = document.querySelector('.button-container');

			var iframe = document.getElementById('iframe1');
			iframe.onload = function() {
				// 显示按钮容器并添加淡入效果
				buttonContainer.style.display = 'block';
				setTimeout(function() {
					buttonContainer.classList.add('visible');
				}, 150); // 延迟100毫秒
			};
		});

    </script>
</head>
<body>
	<div class="button-container">
		<button class="button active" data-target="iframe1" onclick="switchIframe('iframe1')">工作</button><button class="button" data-target="iframe2" onclick="switchIframe('iframe2')">读书</button><button class="button" data-target="iframe3" onclick="switchIframe('iframe3')">英语</button>
	</div>
    <div class="iframe-container">
        <iframe id="iframe1" onload="iframeLoaded()" class="iframe" style="display: block;" src="https://lifeofdiscipline.com/notion/habit/clcgg8pg90002jk0f1ml8k3up?darkTheme=0"></iframe>
        <iframe id="iframe2" class="iframe" style="display: none;" src="https://www.lifeofdiscipline.com/notion/habit/clqkqxipa0000ju0flbgnqv42?darkTheme=0"></iframe>
		<iframe id="iframe3" class="iframe" style="display: none;" src="https://www.lifeofdiscipline.com/notion/habit/clqm4nngd0001le0fp2ritt9r?darkTheme=0"></iframe>
	</div>
</body>
</html>