SOURCE

console 命令行工具 X clear

                    
>
console
// 获取导航栏按钮和对应的卡片
const navButtons = document.querySelectorAll('.nav-button');
const cards = document.querySelectorAll('.card');
const homeBox = document.querySelector("#home");

cards.forEach((cards) => {
  if (cards === homeBox) {
    cards.style.display = "block";
  } /*else {
    // 否则将它的 display 属性设置为 none
    cards.style.display = "none";
  }*/
});

// 给每个按钮添加点击事件
navButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // 隐藏所有卡片
    cards.forEach((card) => {
      card.classList.remove('active');
    });

    // 显示对应的卡片
    cards[index].classList.add('active');
  });
});

// 获取关闭按钮和对应的卡片
const closeButtons = document.querySelectorAll('.close-button');

// 给每个关闭按钮添加点击事件
closeButtons.forEach((button) => {
  button.addEventListener('click', () => {
    // 隐藏对应的卡片
    const card = button.parentNode;
    card.classList.remove('active');
  });
});

/* 预编写,暂时不需要的功能 */
function scrollTop() {
  window.scrollTop({ top: 0, behavior: 'smooth' });
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Voidtask</title>
	<link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">

</head>
<body>
	<!-- 主页卡片 -->
	<div class="card win95-box" id="home">
		<h1>Voidtask</h1>
		<p>Welcome to my task manager!</p>
        <img src="ok.png">
        <p> My main blog is  <a href="blog.ariax,icu">Voidhead</a>. Here, I mainly organize books and movies I want to read/watch after quitting Douban, while also reminding myself of things I want to do.</p>
        <p>日本語の勉強に熱心に取り組む</p>
		<p>请点击左侧的导航栏以查看其他卡片。</p>
        <footer id="copyright">© 2077 by web 1.0 lover</footer>
	</div>

	<!-- 导航栏 -->
	<div class="sidebar">
		<button class="nav-button" id="home-nav">Homepage</button>
		<button class="nav-button" id="calendar-nav">月カレ</button>
		<button class="nav-button" id="movie-list-nav">Movie List</button>
		<button class="nav-button" id="book-list-nav">Book List</button>
		<button class="nav-button" id="misc-list-nav">Misc...</button>
		<button class="nav-button" id="settings-nav">Settings</button>
	</div>

	<!-- 月历打卡表卡片 -->
	<div class="card win95-box" id="calendar">
		<h2>~Calender~</h2>
		<table>
			<thead>
				<tr>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="disabled"></td>
					<td>1</td>
                    <td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>7</td>
					<td>8</td>
				</tr>
				<!-- 请根据月份和日期来生成打卡表格 -->
			</tbody>
		</table>
	</div>

	<!-- 其他卡片 -->
	<!-- 在这里添加您需要的其他卡片,例如个人书单、个人片单和个人杂项工作清单等 -->
    <!-- 片单页面 -->
<div class="card" id="movies">
  <div class="card-header">
    <h2>片单</h2>
    <button class="close-button">×</button>
  </div>
  <div class="card-body">
    <h3>计划观看</h3>
    <div class="movie-list">
  <div class="movie-item">
    <img src="https://img1.doubanio.com/view/subject/s/public/s34496227.jpg" alt="Cover">
    <div class="movie-info">
      <h3 class="movie-title">Title</h3>
      <p class="movie-author">Producer</p>
    </div>
  </div>
  <!-- 重复 -->
  </div>
</div>

<div class="card-body">
    <h3>已观看</h3>
    <div class="movie-list">
  <div class="movie-item">
    <img src="https://img1.doubanio.com/view/subject/s/public/s34496227.jpg" alt="Cover">
    <div class="movie-info">
      <h3 class="movie-title">Title</h3>
      <p class="movie-author">Producer</p>
      <p class="movie-review">Review</p>
    </div>
  </div>
  <!-- 重复 -->
  </div>
</div>

</div>

<!-- 书单页面 -->
<div class="card" id="books">
  <div class="card-header">
    <h2>书单</h2>
    <button class="close-button">×</button>
  </div>
  <div class="card-body">
    <h3>计划阅读</h3>
    <div class="book-list">
  <div class="book-item">
    <img src="https://img1.doubanio.com/view/subject/s/public/s34496227.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
    </div>
  </div>
  <!-- 重复 -->
   <div class="book-item">
    <img src="book-cover.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
    </div>
  </div>
   <div class="book-item">
    <img src="book-cover.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
    </div>
  </div>
</div>
<h3>已阅读</h3>
    <div class="book-list">
  <div class="book-item">
    <img src="https://img1.doubanio.com/view/subject/s/public/s34496227.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
      <p class="book-description">!!testteaaaaaaaaaaaa换行缓缓杠hhhhhhhaaaaaa???asttestetstettsttstettsttetette</p>
    </div>
  </div>
  <!-- 重复 -->
   <div class="book-item">
    <img src="book-cover.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
      <p class="book-description">Book Description</p>
    </div>
  </div>
   <div class="book-item">
    <img src="book-cover.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
      <p class="book-description">Book Description</p>
    </div>
  </div>
  <div class="book-item">
    <img src="book-cover.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
      <p class="book-description">Book Description</p>
    </div>
  </div>
  </div>
</div>

<div class="card win95-box" id="misc">
  <div class="card-header">
    <h2>MISC</h2>
  </div>
  <div class="card-body">
    <ul>
      <li>购买食材</li>
      <li>约见朋友</li>
      <li>办理银行业务</li>
      <li>参加健身课程</li>
      <li>完成报告撰写</li>
    </ul>
  </div>
</div>


	<script src="script.js"></script>
</body>
</html>
/* 通用样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family:DotGothic16, Arial, sans-serif;
}

/* 页面主体样式 */
body {
    background-color: #008080; /* 青色背景 */
}

/*p自动换行*/
p { word-wrap:break-word; }

/* 卡片样式 */
.card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    padding: 1 rem;
    background-color: #c0c0c0; /* 灰色卡片界面 */
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: none; /* 初始状态下隐藏卡片 */
    overflow: scroll;
    max-width: 20 rem;
    max-height: 20 rem;
}

.card.active {
    display: block; /* 卡片激活时显示 */
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 5px;
}


#copyright{
    position: absolute;
    bottom: 0;
    font-size:12px;
    text-align: center;
}

.btn-top {
  position: sticky;
  bottom: 10px;
  right: 100px;
  background-color: #fff;
  border: none;
  color: #000;
  padding: 10px;
  cursor: pointer;
}

#books, #movies{
    width:800px;
    height:650px;
}
/*win95风格编写*/
/*.win95-box {
  background-color: #c0c0c0;
  padding: 16px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}

.win95-box::before, .win95-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
}

.win95-box::before {
  background-color: #ffffff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
}

.win95-box::after {
  background-color: #000000;
  opacity: 0.4;
  z-index: -1;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
}*/


/* 导航栏样式 */
.sidebar {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100px;
    height: auto;
    background-color: #c0c0c0; /* 灰色导航栏界面 */
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 2;
    overflow: hidden;
}

.nav-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #808080; /* 灰色分割线 */
    font-size: 16px;
    color: #000000;
    cursor: pointer;
}

.nav-button:hover {
    background-color: #808080; /* 鼠标悬停时背景变为灰色 */
    color: #ffffff; /* 鼠标悬停时字体变为白色 */
}

/* 月历打卡表样式 */
table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #808080; /* 灰色边框 */
    text-align: center;
    font-size: 16px;
    padding: 10px;
}

thead {
    background-color: #c0c0c0; /* 灰色表头背景 */
}

td.disabled {
    background-color: #d3d3d3; /* 禁用日期背景 */
    color: #808080; /* 禁用日期文字颜色 */
}

/* 关闭按钮样式 */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: #ff0000; /* 红色关闭按钮 */
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 20px;
    color: #ffffff;
    font-size: 14
}
.card {
  width: 300px;
  height: 400px;
  background-color: #808080;
  border: 3px solid #808080;
}

.book-list, .movie-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自适应网格布局 */
  grid-gap: 20px;
}

.book-item, .movie-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  background-color: #f0f0f0;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  overflow: auto;
}

.book-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.movie-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.book-title, .movie-title{
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
}

.book-author,
.book-publisher,
.book-rating,
.book-description {
  font-size: 1rem;
  margin: 5px 0;
}