diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..f673a71
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/TEXTREADING/TextImage/cloud.png b/TEXTREADING/TextImage/cloud.png
new file mode 100644
index 0000000..285ed57
Binary files /dev/null and b/TEXTREADING/TextImage/cloud.png differ
diff --git a/TEXTREADING/TextImage/jiyi.png b/TEXTREADING/TextImage/jiyi.png
new file mode 100644
index 0000000..282198a
Binary files /dev/null and b/TEXTREADING/TextImage/jiyi.png differ
diff --git a/TEXTREADING/myFavourite/myFavourite.css b/TEXTREADING/myFavourite/myFavourite.css
new file mode 100644
index 0000000..3b1b774
--- /dev/null
+++ b/TEXTREADING/myFavourite/myFavourite.css
@@ -0,0 +1,661 @@
+* {
+ padding: 0px;
+ margin: 0px auto;
+}
+
+html,
+body {
+ overflow-x: hidden;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+/* 日夜交替 */
+.cont_principal {
+ width: 100%;
+ height: 100%;
+ left: 75%;
+ position: absolute;
+ max-width: 500px;
+ max-height: 500px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: -100px;
+}
+
+.cont_text>p {
+ color: #7730ec;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 20px;
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+
+.cont_text_dia>p {
+ font-size: 20px;
+ color: #fcce18;
+}
+
+.cont_text_noche>p {
+ font-size: 20px;
+ color: #7730ec;
+}
+
+
+body {
+ background-color: #f2edff;
+ transition-delay: 0.7s;
+ transition: background-color 0.5s;
+}
+
+.cont_centro {
+ position: relative;
+ width: 100%;
+ height: auto;
+ left: 30%;
+}
+
+.cont_circle {
+ width: 212px;
+ height: 212px;
+ position: relative;
+ border-radius: 50%;
+ border: 3px solid #fff;
+ box-shadow: 0px 5px 30px 5px rgba(119, 48, 236, 0.4);
+ overflow: hidden;
+ transition: all 0.5s;
+ background-color: #7730ec;
+ cursor: pointer;
+}
+
+.cont_circle_noche {
+ box-shadow: 0px 5px 30px 5px rgba(119, 48, 236, 0.4);
+ transition-delay: 0.7s;
+}
+
+.cont_circle_noche>.sun {
+ animation-name: ocultar_sun;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
+ -webkit-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+}
+
+.cont_circle_noche>.moon {
+ -webkit-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+ animation-name: salida_sun;
+ animation-duration: 2s;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
+
+
+}
+
+
+.cont_olas_top {
+ position: absolute;
+ bottom: 63px;
+ left: -210px;
+}
+
+.cont_olas_bottom {
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ height: 212px;
+ z-index: 0;
+ overflow: hidden;
+ border-radius: 50%;
+}
+
+.cont_olas_bottom>svg {
+ margin-top: 100px;
+ transition: all 1.5s;
+ position: relative;
+ left: -212px;
+}
+
+.cont_circle_dia>.cont_olas_bottom>svg {
+
+ position: relative;
+ left: 0px;
+}
+
+.moon {
+ position: absolute;
+ top: 50px;
+ right: 50px;
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.cont_circle_dia {
+ background-color: #fcce18;
+ transition-delay: 0.7s;
+ box-shadow: 0px 5px 30px 5px rgba(252, 206, 24, 0.5);
+}
+
+.cont_circle_dia>.sun {
+ -webkit-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+ animation-name: salida_sun;
+ animation-duration: 2s;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
+
+
+}
+
+.cont_circle_dia>.moon {
+ animation-name: ocultar_sun;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
+ -webkit-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+}
+
+.sun {
+ position: absolute;
+ top: 50px;
+ right: 50px;
+ width: 23px;
+ height: 23px;
+ background-color: #fff;
+ border-radius: 50%;
+ box-shadow: 1px 1px 10px 6px rgba(255, 255, 255, 0.5);
+ transform: translate(-190px, 20px);
+}
+
+@-webkit-keyframes salida_sun {
+ from {
+ transform: translate(100px, 50px);
+ }
+
+ to {
+ transform: translate(0px, 0px);
+ }
+}
+
+@-o-keyframes salida_sun {
+ from {
+ transform: translate(100px, 50px);
+ }
+
+ to {
+ transform: translate(0px, 0px);
+ }
+
+}
+
+@-moz-keyframes salida_sun {
+ from {
+ transform: translate(100px, 50px);
+ }
+
+ to {
+ transform: translate(0px, 0px);
+ }
+}
+
+@keyframes salida_sun {
+ from {
+ transform: translate(100px, 50px);
+ }
+
+ to {
+ transform: translate(0px, 0px);
+ }
+}
+
+
+
+@-webkit-keyframes ocultar_sun {
+ 0% {
+ transform: translate(0px, 0px);
+ }
+
+ 50% {
+ transform: translate(-50px, -20px);
+ }
+
+ 60% {
+ transform: translate(-70px, -15px);
+ }
+
+ 70% {
+ transform: translate(-90px, -10px);
+ }
+
+ 85% {
+ transform: translate(-130px, 5px);
+ }
+
+ 100% {
+ transform: translate(-190px, 20px);
+ }
+}
+
+@-o-keyframes ocultar_sun {
+ 0% {
+ transform: translate(0px, 0px);
+ }
+
+ 50% {
+ transform: translate(-50px, -20px);
+ }
+
+ 60% {
+ transform: translate(-70px, -15px);
+ }
+
+ 70% {
+ transform: translate(-90px, -10px);
+ }
+
+ 85% {
+ transform: translate(-130px, 5px);
+ }
+
+ 100% {
+ transform: translate(-190px, 20px);
+ }
+}
+
+@-moz-keyframes ocultar_sun {
+ 0% {
+ transform: translate(0px, 0px);
+ }
+
+ 50% {
+ transform: translate(-50px, -20px);
+ }
+
+ 60% {
+ transform: translate(-70px, -15px);
+ }
+
+ 70% {
+ transform: translate(-90px, -10px);
+ }
+
+ 85% {
+ transform: translate(-130px, 5px);
+ }
+
+ 100% {
+ transform: translate(-190px, 20px);
+ }
+}
+
+@keyframes ocultar_sun {
+ 0% {
+ transform: translate(0px, 0px);
+ }
+
+ 50% {
+ transform: translate(-50px, -20px);
+ }
+
+ 60% {
+ transform: translate(-70px, -15px);
+ }
+
+ 70% {
+ transform: translate(-90px, -10px);
+ }
+
+ 85% {
+ transform: translate(-130px, 5px);
+ }
+
+ 100% {
+ transform: translate(-190px, 20px);
+ }
+}
+
+
+
+/* TITLE 字体 */
+@import url(https://fonts.googleapis.com/css?family=Signika:700,300,600);
+
+.BOXtitle {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ width: 100%;
+ left: 50%;
+ font-size: 3rem;
+ font: bold 'Signika', sans-serif;
+ user-select: none;
+ flex-direction: row;
+ margin-top: 50px;
+}
+
+h1 span {
+ display: inline-block;
+ animation: float .7s ease-in-out infinite;
+ /* 调整动画速度 */
+}
+
+@keyframes float {
+
+ 0%,
+ 100% {
+ transform: none;
+ }
+
+ 33% {
+ transform: translateY(-1px) rotate(-2deg);
+ }
+
+ 66% {
+ transform: translateY(1px) rotate(2deg);
+ }
+}
+
+.BOXtitle:hover span {
+ animation: bounce .6s;
+}
+
+@keyframes bounce {
+
+ 0%,
+ 100% {
+ transform: translate(0);
+ }
+
+ 25% {
+ transform: rotateX(20deg) translateY(2px) rotate(-3deg);
+ }
+
+ 50% {
+ transform: translateY(-20px) rotate(3deg) scale(1.1);
+ }
+}
+
+.BOXtitle span:nth-child(4n) {
+ color: hsl(50, 75%, 55%);
+ text-shadow: 1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%);
+}
+
+.BOXtitle span:nth-child(4n-1) {
+ color: hsl(135, 35%, 55%);
+ text-shadow: 1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%);
+}
+
+.BOXtitle span:nth-child(4n-2) {
+ color: hsl(155, 35%, 60%);
+ text-shadow: 1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%);
+}
+
+.BOXtitle span:nth-child(4n-3) {
+ color: hsl(30, 65%, 60%);
+ text-shadow: 1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%);
+}
+
+.BOXtitle h1 span:nth-child(2) {
+ animation-delay: .05s;
+}
+
+.BOXtitle h1 span:nth-child(3) {
+ animation-delay: .1s;
+}
+
+.BOXtitle h1 span:nth-child(4) {
+ animation-delay: .15s;
+}
+
+.BOXtitle h1 span:nth-child(5) {
+ animation-delay: .2s;
+}
+
+.BOXtitle h1 span:nth-child(6) {
+ animation-delay: .25s;
+}
+
+.BOXtitle h1 span:nth-child(7) {
+ animation-delay: .3s;
+}
+
+.BOXtitle h1 span:nth-child(8) {
+ animation-delay: .35s;
+}
+
+.BOXtitle h1 span:nth-child(9) {
+ animation-delay: .4s;
+}
+
+.BOXtitle h1 span:nth-child(10) {
+ animation-delay: .45s;
+}
+
+.BOXtitle h1 span:nth-child(11) {
+ animation-delay: .5s;
+}
+
+.BOXtitle h1 span:nth-child(12) {
+ animation-delay: .55s;
+}
+
+.BOXtitle h1 span:nth-child(13) {
+ animation-delay: .6s;
+}
+
+/* ------- 表格 ----------*/
+/* 表格容器 */
+main.table {
+ width: 57vw;
+ height: 80vh;
+ background-color: #fff5;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+ border-radius: 16px;
+ overflow: hidden;
+ transform: translateX(35%);
+ margin-top: 50px;
+ box-sizing: border-box;
+}
+
+/* 头部样式 */
+.header {
+ width: 100%;
+ height: 10%;
+ background-color: #fff4;
+ padding: 0 40px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 2px solid #388e3c;
+}
+
+.header .input-group {
+ width: 35%;
+ height: 50%;
+ background-color: #fff5;
+ padding: 0 20px;
+ border-radius: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: width 0.3s, background-color 0.3s, box-shadow 0.3s;
+}
+
+.header .input-group:hover {
+ width: 45%;
+ background-color: #fff8;
+ box-shadow: 0 5px 40px rgba(0, 0, 0, 0.1);
+}
+
+.header .input-group input {
+ width: 100%;
+ background-color: transparent;
+ border: none;
+ outline: none;
+}
+
+/* 表格内容容器 */
+.shell {
+ width: 95%;
+ max-height: calc(90% - 25px);
+ background-color: #fff;
+ margin: 8px auto;
+ border-radius: 10px;
+ overflow: auto;
+ overflow: overlay;
+}
+
+.shell::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+table {
+ width: 100%;
+}
+
+table,
+th,
+td {
+ border-collapse: collapse;
+ padding: 14px;
+ text-align: left;
+ border: 1px solid #ddd;
+}
+
+tbody td {
+ max-width: 450px;
+}
+
+thead th {
+ padding: 18px;
+ position: sticky;
+ top: 0px;
+ background-color: #f1f1f1;
+ cursor: pointer;
+ transform: translateY(-1px);
+ z-index: 5;
+}
+
+tbody tr:nth-child(even) {
+ background-color: #f9f9f9;
+}
+
+tbody tr:hover {
+ background-color: #f1f1f1 !important;
+}
+
+/* 链接按钮样式 */
+a.button {
+ color: #11396E;
+ text-decoration: none;
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ position: relative;
+}
+
+a.button::before,
+a.button::after {
+ content: '';
+ width: 0%;
+ height: 2px;
+ display: block;
+ transition: 0.8s;
+ position: absolute;
+}
+
+a.button::before {
+ left: 0;
+}
+
+a.button::after {
+ right: 0;
+}
+
+a.button:hover::after,
+a.button:hover::before {
+ width: 100%;
+ background: #7D99BF;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400);
+
+
+
+
+.header h1:hover {
+ transform: translate(-5px, -5px);
+ text-shadow: 0 1px 0 hsl(174, 5%, 90%),
+ 0 2px 0 hsl(174, 5%, 85%),
+ 0 3px 0 hsl(174, 5%, 80%),
+ 0 4px 0 hsl(174, 5%, 76%),
+ 0 5px 0 hsl(174, 5%, 74%),
+ 0 6px 0 hsl(174, 5%, 72%),
+
+ 0 0 5px rgba(0, 0, 0, .05),
+ 0 1px 3px rgba(0, 0, 0, .14),
+ 0 3px 5px rgba(0, 0, 0, .16),
+ 0 5px 10px rgba(0, 0, 0, .18),
+ 0 7px 7px rgba(0, 0, 0, .2),
+ 0 9px 9px rgba(0, 0, 0, .25);
+}
+
+.table {
+ margin-bottom: 50px;
+}
+
+/* 云 */
+.shell-cloud {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ /* 改为 fixed 以固定位置 */
+ right: 4%;
+ bottom: 30%;
+ background-color: transparent;
+ min-height: 200px;
+}
+
+.cloud {
+ position: relative;
+ top: 50px;
+ width: 180px;
+ height: 140px;
+ background-image: url(../TextImage/cloud.png);
+ background-size: cover;
+}
+
+.text {
+ position: absolute;
+ top: 145px;
+ max-width: 160px;
+ max-height: 100px;
+ line-height: 10px;
+ color: #845EC2;
+ text-shadow: 0 0 2px #B39CD0,
+ 0 0 4px #FBEAFF,
+ 0 0 6px #FFF;
+ animation: rain 1s linear forwards;
+}
+
+@keyframes rain {
+ 0% {
+ transform: translateY(0) scale(1);
+ }
+
+ 80% {
+ transform: translateY(130px) scale(1);
+ }
+
+ /* 让雨点落到最下面时回弹10px后变大一点三倍并使其透明度消失可以
+ 达到真实雨水落地后溅射消失的效果 */
+ 100% {
+ transform: translateY(120px) scale(1.3);
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/TEXTREADING/myFavourite/myFavourite.html b/TEXTREADING/myFavourite/myFavourite.html
new file mode 100644
index 0000000..c46e80d
--- /dev/null
+++ b/TEXTREADING/myFavourite/myFavourite.html
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+ My favourite articles
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ MY
+ FAVOURITE!
+
+
+
+
+
+ | Title |
+ Category |
+ Link |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/TEXTREADING/myFavourite/myFavourite.js b/TEXTREADING/myFavourite/myFavourite.js
new file mode 100644
index 0000000..8b6ebf8
--- /dev/null
+++ b/TEXTREADING/myFavourite/myFavourite.js
@@ -0,0 +1,199 @@
+
+let c = 0;
+function toggle() {
+ c % 2 == 0 ? day() : night();
+ c++;
+}
+
+function night() {
+ document.querySelector(".cont_circle").className =
+ "cont_circle cont_circle_noche";
+ document.body.style.backgroundColor = "#f2edff";
+ document.querySelector(".cont_text").className = "cont_text cont_text_noche";
+ document.querySelectorAll(".cont_text > p")[0].innerHTML = "NIGHT";
+}
+
+function day() {
+ document.querySelector(".cont_circle").className =
+ "cont_circle cont_circle_dia";
+ document.body.style.backgroundColor = "#f7f7f7";
+ document.querySelector(".cont_text").className = "cont_text cont_text_dia";
+ document.querySelectorAll(".cont_text > p")[0].innerHTML = " ";
+}
+
+
+const articles = [
+ {
+ title: "JavaScript BasicsJavaScript BasicsJavaScript BasicsJavaScript BasicsJavaScript BasicsJavaScript Basics",
+ category: "Programming",
+ link: "https://example.com/js-basics"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+ {
+ title: "CSS Grid Layout",
+ category: "Web Design",
+ link: "https://example.com/css-grid"
+ },
+
+ {
+ title: "Understanding React",
+ category: "JavaScript Library",
+ link: "https://example.com/react"
+ }
+];
+
+
+function loadTableData() {
+ const tableBody = document.getElementById('table-body');
+ tableBody.innerHTML = ''; // 清空现有内容
+
+ articles.forEach((item, index) => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+ ${item.title} |
+ ${item.category} |
+
+
+ Review →
+
+ |
+ `;
+ tableBody.appendChild(row);
+ });
+}
+
+// 加载数据
+loadTableData();
+
+
+// 搜索栏
+document.getElementById('search-input').addEventListener('input', function () {
+ const filter = this.value.toLowerCase();
+ const rows = document.querySelectorAll('#table-body tr');
+
+ rows.forEach(row => {
+ const cells = row.querySelectorAll('td');
+ const match = Array.from(cells).some(cell => cell.textContent.toLowerCase().includes(filter));
+ if (match) {
+ row.style.display = '';
+ } else {
+ row.style.display = 'none';
+ }
+ });
+});
+
+
+// 汉字云
+function randomText() {
+ const text = 'WORD TONGJI';
+ const letter = text[Math.floor(Math.random() * text.length)];
+ return letter;
+}
+function rain() {
+ const cloud = document.querySelector('.cloud');
+ const e = document.createElement('div');
+ const left = Math.floor(Math.random() * 110);
+ const size = Math.random() * 1.5;
+ const duration = Math.random() * 1;
+ const text = randomText();
+ e.classList.add('text');
+ e.innerText = text;
+ e.style.left = 25 + left + 'px';
+ e.style.fontSize = size + 'em';
+ e.style.animationDuration = 2 + duration + 's';
+ cloud.appendChild(e);
+ setTimeout(() => {
+ cloud.removeChild(e);
+ }, 2000);
+}
+setInterval(rain, 40);
diff --git a/TEXTREADING/readingText/Text_globalwarming.html b/TEXTREADING/readingText/Text_globalwarming.html
index d674e4c..782c147 100644
--- a/TEXTREADING/readingText/Text_globalwarming.html
+++ b/TEXTREADING/readingText/Text_globalwarming.html
@@ -70,6 +70,17 @@
+
+
+
@@ -769,6 +780,17 @@ Global warming
+
+
+
\ No newline at end of file
diff --git a/TEXTREADING/readingText/article.docx b/TEXTREADING/readingText/article.docx
deleted file mode 100644
index a61418c..0000000
Binary files a/TEXTREADING/readingText/article.docx and /dev/null differ
diff --git a/TEXTREADING/readingText/clock.css b/TEXTREADING/readingText/clock.css
new file mode 100644
index 0000000..478008f
--- /dev/null
+++ b/TEXTREADING/readingText/clock.css
@@ -0,0 +1,142 @@
+.tikutaku {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ min-height: 350px;
+ /* 让父容器占满整个可视区域 */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+
+ margin-top: 30px;
+ margin-bottom: -80px;
+}
+
+.clock {
+ box-sizing: border-box;
+ position: relative;
+ display: flex;
+ z-index: -3;
+ justify-content: center;
+ align-items: center;
+ width: 300px;
+ min-width: 300px;
+ height: 300px;
+ border-radius: 50%;
+ background-color: rgba(250, 200, 200, .9);
+ box-shadow: 4px 4px 20px rgba(0, 0, 0, .5);
+}
+
+.clock::before {
+ content: '';
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ z-index: 5;
+ box-shadow: 8px 2px 60px rgba(0, 0, 0, .5);
+ background-color: rgba(248, 239, 247, 0.8);
+}
+
+.clock::after {
+ content: '';
+ display: block;
+ position: absolute;
+
+ width: 220px;
+ height: 220px;
+ border-radius: 50%;
+ box-shadow: 1px 1px 20px rgba(0, 0, 0, .5) inset;
+ background-color: rgba(250, 200, 200, .9);
+ z-index: -2;
+}
+
+.clock .hour,
+.clock .min,
+.clock .sec {
+ position: absolute;
+}
+
+.clock .hour,
+.hr {
+ width: 100px;
+ height: 120px;
+ display: flex;
+ justify-content: center;
+}
+
+.clock .min,
+.mn {
+ width: 160px;
+ height: 160px;
+ display: flex;
+ justify-content: center;
+}
+
+.clock .sec,
+.sc {
+ width: 200px;
+ height: 200px;
+ display: flex;
+ justify-content: center;
+}
+
+.hr::before,
+.mn::before,
+.sc::before {
+ box-shadow: 2px -0.6px 2px rgba(255, 255, 255, 0.1) inset,
+ 2px 0.5px 2px rgba(0, 0, 0, 0.2) inset,
+ -3px 10px 10px rgba(0, 0, 0, 0.3);
+}
+
+.hr::before {
+ content: '';
+ width: 8px;
+ height: 80px;
+ background-color: crimson;
+ z-index: 10;
+ border-radius: 6px 6px 0 0;
+ border-radius: 0.5em;
+ width: 15px;
+ height: 45px;
+}
+
+.mn::before {
+ content: '';
+ width: 4px;
+ height: 90px;
+ background-color: slateblue;
+ z-index: 8;
+ border-radius: 6px 6px 0 0;
+ border-radius: 0.4em;
+ width: 13px;
+ height: 65px;
+}
+
+.sc::before {
+ content: '';
+ width: 4px;
+ height: 90px;
+ background-color: powderblue;
+ z-index: 9;
+ border-radius: 6px 6px 0 0;
+ border-radius: 0.3em;
+ width: 10px;
+ height: 85px;
+}
+
+.artfont {
+ position: relative;
+ z-index: -18;
+ margin-left: 40px;
+ /* 调整这个值以确保artfont和clock水平对齐 */
+ max-width: 250px;
+ max-height: 200px;
+ box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
+ background-color: paleturquoise;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transform: translateX(-70px);
+}
\ No newline at end of file
diff --git a/TEXTREADING/readingText/clock.js b/TEXTREADING/readingText/clock.js
new file mode 100644
index 0000000..2a03b8a
--- /dev/null
+++ b/TEXTREADING/readingText/clock.js
@@ -0,0 +1,15 @@
+const deg = 6;
+const hr = document.querySelector('#hr');
+const mn = document.querySelector('#mn');
+const sc = document.querySelector('#sc');
+// 设置定时器，每秒执行一次
+setInterval(() => {
+ let day = new Date();
+ // 求一小时，一分钟，一秒的角度，一共360度
+ let h = day.getHours() * 30; // 一小时等于30度
+ let m = day.getMinutes() * deg; // 一分钟等于6度
+ let s = day.getSeconds() * deg; // 一秒等于6度,近似就完了
+ hr.style.transform = `rotateZ(${h + m / 12}deg)`;
+ mn.style.transform = `rotateZ(${m}deg)`;
+ sc.style.transform = `rotateZ(${s}deg)`;
+}, 1000)
\ No newline at end of file
diff --git a/TEXTREADING/readingText/createDOC.py b/TEXTREADING/readingText/createDOC.py
deleted file mode 100644
index 6235f26..0000000
--- a/TEXTREADING/readingText/createDOC.py
+++ /dev/null
@@ -1,39 +0,0 @@
-from docx import Document
-from docx.shared import Inches
-
-document = Document()
-
-# Title
-document.add_heading('Climate Change and Residential Property', 0)
-
-# Paragraph 1
-document.add_paragraph(
- 'THINK ABOUT the places vulnerable to climate change, and you might picture rice paddies in Bangladesh or low-lying islands in the Pacific. '
- 'But another, more surprising answer ought to be your own house. About a tenth of the world\'s residential property by value is under threat from global warming—including many houses that are nowhere near the coast.'
-)
-
-document.add_paragraph(
- '提起那些易受气候变化影响的地方，脑海中或许会浮现孟加拉国的水稻田，亦或是太平洋中海拔较低的岛屿。'
- '但更为令人惊奇的是另一个画面，也就是你自己的房子。按价值评估，世界上约有十分之一的房产面临全球变暖的威胁——包括许多内陆房屋。'
-)
-
-# Paragraph 2
-document.add_paragraph(
- 'From tornadoes battering midwestern American suburbs to tennis-ball-size hailstones smashing the roofs of Italian villas, the severe weather '
- 'brought about by greenhouse-gas emissions is shaking the foundations of the world\'s most important asset class.'
-)
-
-document.add_paragraph(
- '从肆虐美国中西部郊区的龙卷风到砸向意大利别墅屋顶的网球般大小的冰雹，温室气体排放造成的严峻天气正在打击世界上最重要的资产种类。'
-)
-
-# Phrase and Example
-document.add_paragraph('Phrase: foot the bill')
-document.add_paragraph('Explanation: 负担费用')
-document.add_paragraph('Example: Once again it will be the taxpayer who has to foot the bill.')
-document.add_paragraph('示例: 这一次掏腰包的又得是纳税人。')
-
-# Insert an image
-document.add_picture('F:/vscode_files/web技术/githubwork/web_program/TEXTREADING/TextImage/baciWelcome.jpg', width=Inches(4.0))
-
-document.save('F:/vscode_files/web技术/githubwork/web_program/TEXTREADING/readingText/article.docx')
diff --git a/TEXTREADING/readingText/cursor.css b/TEXTREADING/readingText/cursor.css
new file mode 100644
index 0000000..ea0f4e1
--- /dev/null
+++ b/TEXTREADING/readingText/cursor.css
@@ -0,0 +1,8 @@
+#canvas {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+}
\ No newline at end of file
diff --git a/TEXTREADING/readingText/cursor.js b/TEXTREADING/readingText/cursor.js
new file mode 100644
index 0000000..f48a4c8
--- /dev/null
+++ b/TEXTREADING/readingText/cursor.js
@@ -0,0 +1,86 @@
+
+
+// 监听鼠标移动事件，更新自定义光标的位置
+document.addEventListener('mousemove', function (e) {
+ var cursor = document.querySelector('.cursor');
+ cursor.style.left = e.pageX + 'px';
+ cursor.style.top = e.pageY + 'px';
+});
+
+// 获取画布并设置上下文
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+// 设置画布大小的函数
+function resizeCanvas() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+}
+
+// 初始化画布大小
+resizeCanvas();
+
+// 监听窗口变化事件，并调整画布大小
+window.addEventListener('resize', resizeCanvas);
+
+const particlesArray = [];
+const numberOfParticles = 1; // 每次移动生成的粒子数量
+
+const mouse = {
+ x: null,
+ y: null
+}
+
+// 监听鼠标移动事件，更新鼠标位置并生成粒子
+window.addEventListener('mousemove', function (event) {
+ mouse.x = event.x;
+ mouse.y = event.y;
+ for (let i = 0; i < numberOfParticles; i++) {
+ particlesArray.push(new Particle());
+ }
+});
+// 粒子类
+class Particle {
+ constructor() {
+ this.x = mouse.x;
+ this.y = mouse.y;
+ this.size = Math.random() * 2 + 1; // 粒子的随机小尺寸
+ this.speedX = Math.random() * 1 - 0.5; // 粒子的水平速度
+ this.speedY = Math.random() * 1 - 0.5; // 粒子的垂直速度
+ this.color = `#6DA7FD`;
+ this.opacity = 1; // 初始透明度
+ this.life = 100; // 粒子的生命时长
+ }
+ update() {
+ this.x += this.speedX; // 更新粒子水平位置
+ this.y += this.speedY; // 更新粒子垂直位置
+ this.life -= 2; // 递减生命时长
+ }
+ draw() {
+ ctx.fillStyle = this.color; // 设置粒子颜色
+ ctx.globalAlpha = this.life / 100; // 根据剩余生命时长设置透明度
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); // 绘制粒子
+ ctx.fill();
+ ctx.globalAlpha = 1; // 重置透明度
+ }
+}
+
+// 处理粒子数组，更新和绘制每个粒子
+function handleParticles() {
+ for (let i = particlesArray.length - 1; i >= 0; i--) {
+ particlesArray[i].update(); // 更新粒子位置和生命时长
+ particlesArray[i].draw(); // 绘制粒子
+ if (particlesArray[i].life <= 0) {
+ particlesArray.splice(i, 1); // 生命时长耗尽时删除粒子
+ }
+ }
+}
+// 动画循环
+function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
+ handleParticles(); // 处理和绘制粒子
+ requestAnimationFrame(animate); // 递归调用animate，实现动画
+}
+
+// 开始动画
+animate();
diff --git a/TEXTREADING/readingText/moreArticles.css b/TEXTREADING/readingText/moreArticles.css
index 7f63039..1bc3e9d 100644
--- a/TEXTREADING/readingText/moreArticles.css
+++ b/TEXTREADING/readingText/moreArticles.css
@@ -5,7 +5,7 @@
--background-color: #f0f4f8;
--container-bg-color: #ffffff;
--text-color: #333;
- --shadow-color: rgba(0, 0, 0, 0.1);
+ --shadow-color: rgba(0, 0, 0, 0.4);
--font-family: 'Roboto', sans-serif;
--border-radius: 10px;
--transition-duration: 0.3s;
@@ -21,6 +21,7 @@ body {
margin: 0;
padding: 0;
display: flex;
+ flex-direction: column;
justify-content: center;
/* 水平居中 */
align-items: center;
@@ -55,7 +56,7 @@ body {
position: absolute;
top: 50%;
left: 50%;
- z-index: -2;
+ z-index: -20;
animation: starAnimation 1.5s infinite ease-in-out alternate;
}
@@ -88,6 +89,7 @@ body {
/* 水平居中 */
animation: fadeIn 1s ease-in-out;
/* 淡入效果 */
+ margin-bottom: 40px;
}
/* 标题样式 */
@@ -106,7 +108,7 @@ body {
transition: all 0.3s ease;
margin-top: 20px;
margin-bottom: 60px;
- min-height: 100px;
+ min-height: 80px;
}
@keyframes glow {
@@ -182,6 +184,7 @@ body {
max-width: 600px;
display: flex;
justify-content: center;
+ z-index: 10;
}
.search-bar input {
@@ -208,6 +211,7 @@ body {
max-width: 200px;
display: flex;
justify-content: center;
+ z-index: 3;
}
.category-filter select {
@@ -247,6 +251,7 @@ body {
animation: fadeIn 1s ease-in-out;
/* 淡入效果 */
margin-bottom: 20px;
+ z-index: 10;
}
/* 这里调整封面大小 */
@@ -301,6 +306,7 @@ body {
justify-content: center;
gap: 10px;
margin-bottom: 10px;
+ z-index: 3;
}
.pagination button {
diff --git a/TEXTREADING/readingText/moreArticles.html b/TEXTREADING/readingText/moreArticles.html
index 7894c58..a29643b 100644
--- a/TEXTREADING/readingText/moreArticles.html
+++ b/TEXTREADING/readingText/moreArticles.html
@@ -13,8 +13,11 @@
crossorigin="anonymous" referrerpolicy="no-referrer" />
-
+
+
+
+
@@ -79,6 +82,27 @@
+
+
+
+
+
+
+
+
+
@@ -142,9 +166,12 @@
+
-
+
+
+
diff --git a/TEXTREADING/readingText/moreArticles.js b/TEXTREADING/readingText/moreArticles.js
index 8ff1c05..84d0305 100644
--- a/TEXTREADING/readingText/moreArticles.js
+++ b/TEXTREADING/readingText/moreArticles.js
@@ -111,3 +111,4 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
+
diff --git a/TEXTREADING/musicPlayer/musicPlayer.css b/TEXTREADING/readingText/musicPlayer.css
similarity index 100%
rename from TEXTREADING/musicPlayer/musicPlayer.css
rename to TEXTREADING/readingText/musicPlayer.css
diff --git a/TEXTREADING/musicPlayer/musicPlayer.js b/TEXTREADING/readingText/musicPlayer.js
similarity index 96%
rename from TEXTREADING/musicPlayer/musicPlayer.js
rename to TEXTREADING/readingText/musicPlayer.js
index 3059d0b..5edcd34 100644
--- a/TEXTREADING/musicPlayer/musicPlayer.js
+++ b/TEXTREADING/readingText/musicPlayer.js
@@ -18,8 +18,8 @@ loadSong(songs[songIndex])
// 更新歌曲细节
function loadSong(song) {
title.innerHTML = song
- audio.src = `/TEXTREADING/musicPlayer/MUSIC/${song}.mp3`;
- musicCover.src = `/TEXTREADING/musicPlayer/IMG/${song}.jpg`;
+ audio.src = `../musicPlayer/MUSIC/${song}.mp3`;
+ musicCover.src = `../musicPlayer/IMG/${song}.jpg`;
}
// 播放歌曲
diff --git a/TEXTREADING/readingText/readingDOC.py b/TEXTREADING/readingText/readingDOC.py
deleted file mode 100644
index fd2fb70..0000000
--- a/TEXTREADING/readingText/readingDOC.py
+++ /dev/null
@@ -1,46 +0,0 @@
-from flask import Flask, jsonify
-from docx import Document
-
-app = Flask(__name__)
-
-def read_docx(file_path):
- document = Document(file_path)
- content = {
- "paragraphs": [],
- "phrases": [],
- "images": []
- }
-
- temp_phrase = {}
-
- for para in document.paragraphs:
- text = para.text
- if text.startswith("Phrase:"):
- if temp_phrase:
- content["phrases"].append(temp_phrase)
- temp_phrase = {"phrase": text[len("Phrase: "):]}
- elif text.startswith("Explanation:"):
- temp_phrase["explanation"] = text[len("Explanation: "):]
- elif text.startswith("Example:"):
- temp_phrase["example_en"] = text[len("Example: "):]
- elif text.startswith("示例:"):
- temp_phrase["example_cn"] = text[len("示例: "):]
- else:
- content["paragraphs"].append(text)
-
- if temp_phrase:
- content["phrases"].append(temp_phrase)
-
- for rel in document.part.rels:
- if "image" in document.part.rels[rel].target_ref:
- content["images"].append(document.part.rels[rel].target_ref)
-
- return content
-
-@app.route('/api/article', methods=['GET'])
-def get_article():
- data = read_docx('F:/vscode_files/web技术/githubwork/web_program/TEXTREADING/readingText/article.docx')
- return jsonify(data)
-
-if __name__ == '__main__':
- app.run(debug=True)
diff --git a/TEXTREADING/readingText/readingTextHeader.css b/TEXTREADING/readingText/readingTextHeader.css
index e13b417..a57b701 100644
--- a/TEXTREADING/readingText/readingTextHeader.css
+++ b/TEXTREADING/readingText/readingTextHeader.css
@@ -173,4 +173,197 @@ header>div>img {
opacity: 1;
left: 8%;
top: 10%
+}
+
+
+/* 点赞 收藏 */
+.collection {
+ width: 230px;
+ height: 100px;
+ position: fixed;
+ display: flex;
+ /* 使用 fixed 以确保卡片固定在页面位置 */
+ top: 40%;
+ /* 调整距离顶部的位置 */
+ right: 2%;
+ /* 调整距离右侧的位置 */
+ border-radius: 5px;
+}
+
+
+.collection-content {
+ box-sizing: border-box;
+ padding: 10px;
+ overflow: hidden;
+ position: relative;
+ /* 使用 relative 以确保内部元素定位正确 */
+ width: 100%;
+ height: 100%;
+}
+
+
+
+.collection-content .collection-btn {
+ background-image: linear-gradient(135deg, rgb(106, 106, 245) 0%, rgb(132, 50, 255) 100%);
+ width: 50px;
+ height: 50px;
+ position: absolute;
+ right: 25px;
+ top: 25px;
+ border-radius: 50%;
+ z-index: 1;
+ cursor: pointer;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ transition: all 0.3s ease-in-out;
+ animation: pop-btn 0.3s both ease-in-out 0.5s;
+}
+
+@keyframes pop-btn {
+ 0% {
+ transform: scale(0);
+ }
+
+ 80% {
+ transform: scale(1.2);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+}
+
+.collection-content .collection-btn:hover {
+ box-shadow: 0 0 0 5px rgba(170, 187, 204, 0.5);
+}
+
+.collection-content .collection-btn span {
+ width: 60%;
+ height: 2px;
+ position: absolute;
+ background-color: white;
+ top: 50%;
+ left: 20%;
+ transform: translateY(-50%);
+ animation: to-hamburger 0.3s forwards ease-in-out;
+}
+
+.collection-content .collection-btn span::before,
+.collection-content .collection-btn span::after {
+ content: "";
+ width: 100%;
+ height: 2px;
+ position: absolute;
+ background-color: white;
+ transition-duration: 0.3s;
+ transform: rotate(0deg);
+ right: 0;
+}
+
+.collection-content .collection-btn span::before {
+ margin-top: -7px;
+}
+
+.collection-content .collection-btn span::after {
+ margin-top: 7px;
+}
+
+.collection-content .collection-btn.active span {
+ animation: to-arrow 0.3s forwards ease-in-out;
+}
+
+.collection-content .collection-btn.active span::before,
+.collection-content .collection-btn.active span::after {
+ width: 60%;
+ right: -1px;
+}
+
+.collection-content .collection-btn.active span::before {
+ transform: rotate(45deg);
+}
+
+.collection-content .collection-btn.active span::after {
+ transform: rotate(-45deg);
+}
+
+@keyframes to-hamburger {
+ from {
+ transform: translateY(-50%) rotate(-180deg);
+ }
+}
+
+@keyframes to-arrow {
+ from {
+ transform: translateY(-50%) rotate(0deg);
+ }
+
+ to {
+ transform: translateY(-50%) rotate(180deg);
+ }
+}
+
+.collection-box {
+ opacity: 0;
+ border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.7);
+ position: absolute;
+ top: 50%;
+ right: -30%;
+ transform: translate(-60%, -50%);
+ transition-duration: 0.3s;
+ box-shadow: 0 0 10px #a1c8e8;
+ border: 5px #5785db solid;
+}
+
+.collection-box::after {
+ content: '';
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-size: cover;
+ opacity: .7;
+ border-radius: 50%;
+
+}
+
+.collection-box i {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-color: #ececec;
+ font-size: 25px;
+ text-align: center;
+ line-height: 50px;
+ position: absolute;
+ left: 18px;
+ top: calc(60px - 50px/2 - 5px);
+ box-shadow: 0 0 10px #fff;
+ color: rgb(106, 106, 245);
+ background-color: #fff;
+ transition-duration: 0.3s;
+}
+
+.collection-box i:hover {
+ transition-delay: initial !important;
+ box-shadow: 0 0 0 5px #babbbc;
+ background-color: rgb(106, 106, 245);
+ color: #fff;
+}
+
+.collection-box.open {
+ opacity: 1;
+}
+
+.collection-box.open i {
+ left: 20px;
+ opacity: 1;
+}
+
+.collection-box.open i:nth-of-type(1) {
+ transform: rotate(45deg) translateX(-120px) rotate(-45deg);
+ transition-delay: 0.1s;
+}
+
+.collection-box.open i:nth-of-type(2) {
+ transform: rotate(-45deg) translateX(-120px) rotate(45deg);
+ transition-delay: 0.3s;
}
\ No newline at end of file
diff --git a/TEXTREADING/readingText/test.html b/TEXTREADING/readingText/test.html
deleted file mode 100644
index c24ce81..0000000
--- a/TEXTREADING/readingText/test.html
+++ /dev/null
@@ -1,88 +0,0 @@
-
-
-
-
-
-
- Article Reader
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/TEXTREADING/readingWelcome/readingWelcome.html b/TEXTREADING/readingWelcome/readingWelcome.html
index 087f9c2..bebb289 100644
--- a/TEXTREADING/readingWelcome/readingWelcome.html
+++ b/TEXTREADING/readingWelcome/readingWelcome.html
@@ -286,6 +286,25 @@ and enjoy your day!
+
+
+
+
diff --git a/TEXTREADING/readingWelcome/readingWelcomeMain.css b/TEXTREADING/readingWelcome/readingWelcomeMain.css
index 493bda9..52d2926 100644
--- a/TEXTREADING/readingWelcome/readingWelcomeMain.css
+++ b/TEXTREADING/readingWelcome/readingWelcomeMain.css
@@ -295,4 +295,218 @@ h2 {
h1 {
margin-bottom: 0;
}
+}
+
+
+/* 按钮插件 */
+
+.continue-application{
+ left: 43.5%;
+ margin-top: 20px;
+ margin-bottom: 50px;
+}
+
+.morebtn{
+ font-size: 20px;
+}
+
+.continue-application {
+ --color: #fff;
+ --background: #404660;
+ --background-hover: #3A4059;
+ --background-left: #2B3044;
+ --folder: #F3E9CB;
+ --folder-inner: #BEB393;
+ --paper: #FFFFFF;
+ --paper-lines: #BBC1E1;
+ --paper-behind: #E1E6F9;
+ --pencil-cap: #fff;
+ --pencil-top: #275EFE;
+ --pencil-middle: #fff;
+ --pencil-bottom: #5C86FF;
+ --shadow: rgba(13, 15, 25, .2);
+ border: none;
+ outline: none;
+ cursor: pointer;
+ position: relative;
+ border-radius: 5px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 19px;
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: transparent;
+ padding: 17px 29px 17px 69px;
+ transition: background 0.3s;
+ color: var(--color);
+ background: var(--bg, var(--background));
+}
+
+.continue-application>div {
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 53px;
+ position: absolute;
+ overflow: hidden;
+ border-radius: 5px 0 0 5px;
+ background: var(--background-left);
+}
+
+.continue-application>div .folder {
+ width: 23px;
+ height: 27px;
+ position: absolute;
+ left: 15px;
+ top: 13px;
+}
+
+.continue-application>div .folder .top {
+ left: 0;
+ top: 0;
+ z-index: 2;
+ position: absolute;
+ transform: translateX(var(--fx, 0));
+ transition: transform 0.4s ease var(--fd, 0.3s);
+}
+
+.continue-application>div .folder .top svg {
+ width: 24px;
+ height: 27px;
+ display: block;
+ fill: var(--folder);
+ transform-origin: 0 50%;
+ transition: transform 0.3s ease var(--fds, 0.45s);
+ transform: perspective(120px) rotateY(var(--fr, 0deg));
+}
+
+.continue-application>div .folder:before,
+.continue-application>div .folder:after,
+.continue-application>div .folder .paper {
+ content: "";
+ position: absolute;
+ left: var(--l, 0);
+ top: var(--t, 0);
+ width: var(--w, 100%);
+ height: var(--h, 100%);
+ border-radius: 1px;
+ background: var(--b, var(--folder-inner));
+}
+
+.continue-application>div .folder:before {
+ box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
+ transform: translateX(var(--fx, 0));
+ transition: transform 0.4s ease var(--fd, 0.3s);
+}
+
+.continue-application>div .folder:after,
+.continue-application>div .folder .paper {
+ --l: 1px;
+ --t: 1px;
+ --w: 21px;
+ --h: 25px;
+ --b: var(--paper-behind);
+}
+
+.continue-application>div .folder:after {
+ transform: translate(var(--pbx, 0), var(--pby, 0));
+ transition: transform 0.4s ease var(--pbd, 0s);
+}
+
+.continue-application>div .folder .paper {
+ z-index: 1;
+ --b: var(--paper);
+}
+
+.continue-application>div .folder .paper:before,
+.continue-application>div .folder .paper:after {
+ content: "";
+ width: var(--wp, 14px);
+ height: 2px;
+ border-radius: 1px;
+ transform: scaleY(0.5);
+ left: 3px;
+ top: var(--tp, 3px);
+ position: absolute;
+ background: var(--paper-lines);
+ box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
+}
+
+.continue-application>div .folder .paper:after {
+ --tp: 6px;
+ --wp: 10px;
+}
+
+.continue-application>div .pencil {
+ height: 2px;
+ width: 3px;
+ border-radius: 1px 1px 0 0;
+ top: 8px;
+ left: 105%;
+ position: absolute;
+ z-index: 3;
+ transform-origin: 50% 19px;
+ background: var(--pencil-cap);
+ transform: translateX(var(--pex, 0)) rotate(35deg);
+ transition: transform 0.4s ease var(--pbd, 0s);
+}
+
+.continue-application>div .pencil:before,
+.continue-application>div .pencil:after {
+ content: "";
+ position: absolute;
+ display: block;
+ background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
+ width: var(--w, 5px);
+ height: var(--h, 20px);
+ border-radius: var(--br, 2px 2px 0 0);
+ top: var(--t, 2px);
+ left: var(--l, -1px);
+}
+
+.continue-application>div .pencil:before {
+ -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
+ clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
+}
+
+.continue-application>div .pencil:after {
+ --b: none;
+ --w: 3px;
+ --h: 6px;
+ --br: 0 2px 1px 0;
+ --t: 3px;
+ --l: 3px;
+ border-top: 1px solid var(--pencil-top);
+ border-right: 1px solid var(--pencil-top);
+}
+
+.continue-application:before,
+.continue-application:after {
+ content: "";
+ position: absolute;
+ width: 10px;
+ height: 2px;
+ border-radius: 1px;
+ background: var(--color);
+ transform-origin: 9px 1px;
+ transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));
+ top: 26px;
+ right: 16px;
+ transition: transform 0.3s;
+}
+
+.continue-application:after {
+ --r: 45deg;
+}
+
+.continue-application:hover {
+ --cx: 2px;
+ --bg: var(--background-hover);
+ --fx: -40px;
+ --fr: -60deg;
+ --fd: .15s;
+ --fds: 0s;
+ --pbx: 3px;
+ --pby: -3px;
+ --pbd: .15s;
+ --pex: -24px;
}
\ No newline at end of file
diff --git a/TEXTREADING/readingWelcome/readingWelcomeNav.css b/TEXTREADING/readingWelcome/readingWelcomeNav.css
index 72ae52b..2a4c488 100644
--- a/TEXTREADING/readingWelcome/readingWelcomeNav.css
+++ b/TEXTREADING/readingWelcome/readingWelcomeNav.css
@@ -14,7 +14,7 @@
height: 70vh;
/* 设置高度的百分比 */
background-color: #7D99BF;
- z-index: 2;
+ z-index: 20;
top: 0;
bottom: 0;
left: 10px;
diff --git a/static/1.png b/static/1.png
deleted file mode 100644
index f5b6eab..0000000
Binary files a/static/1.png and /dev/null differ
diff --git a/static/an.jpg b/static/an.jpg
deleted file mode 100644
index 8858300..0000000
Binary files a/static/an.jpg and /dev/null differ
diff --git a/static/anvi.png b/static/anvi.png
deleted file mode 100644
index e5eeb21..0000000
Binary files a/static/anvi.png and /dev/null differ
diff --git a/static/base.css b/static/base.css
deleted file mode 100644
index 4c5eeb1..0000000
--- a/static/base.css
+++ /dev/null
@@ -1,123 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
-
-body {
- font-family: Arial, sans-serif;
- }
-
- .navigation {
- margin: -5px auto 0;
- width: 100%;
- background-color: transparsent;
- height: 300px;
- border-radius: 20px;
- background-image: url("./anvi.png");
- background-attachment: fixed;
- background-size: 100%;
- background-repeat: no-repeat;
- overflow: hidden;
- color: #fff;
-}
-
- .search-container {
- display: flex;
- justify-content: center; /* 在水平方向上居中 */
- align-items: center; /* 在垂直方向上居中 */
- margin-top: 20px; /* 调整搜索栏距离上方的间距，根据需要调整 */
- }
-
- .search-box {
- position: relative;
- border: 1px solid #ccc;
- padding: 20px;
- width: 65%;
- left:5%;
- border-radius: 40px;
- font-size: 20px;
- background-image: linear-gradient(to right, transparent 15%, #ccc 15%, #ccc 85%, transparent 85%), linear-gradient(to right, transparent 15%, #ccc 15%, #ccc 85%, transparent 85%);
- background-size: 10px 100%, 10px 100%;
- background-position: 5% center;
- }
- .magnifying-glass {
- background-image: url('data:image/svg+xml;utf8,