AIgen

index.html

@@ -11,7 +11,7 @@
     <div id="app">
       <div class="container">
         <main class="main">
-          <h1 class="title">徐越的在线学习平台</h1>
+          <h1 class="title gradient">徐越的在线学习平台</h1>
           <h2 class="subtitle"></h2>
           <div class="grid" id="sites"></div>
         </main>

style.css

@@ -2,8 +2,11 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: 'Orbitron', 'Roboto Mono', 'Fira Mono', 'Consolas', monospace, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background: radial-gradient(ellipse at 10% 10%, #1b0036 0%, transparent 25%), linear-gradient(135deg, #0f1724 0%, #081220 40%, #120022 100%);
+  color: #f8f8f2;
+  min-height: 100vh;
+  letter-spacing: 0.02em;
 }
 
 a {
@@ -11,6 +14,17 @@ a {
   text-decoration: none;
 }
 
+/* 霓虹链接 */
+a {
+  color: #00fff7;
+  text-shadow: 0 0 3px rgba(0,255,247,0.9), 0 0 6px rgba(255,0,234,0.35);
+  transition: color 0.18s ease, text-shadow 0.18s ease;
+}
+a:hover {
+  color: #ff00ea;
+  text-shadow: 0 0 6px rgba(255,0,234,0.9), 0 0 10px rgba(0,255,247,0.25);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -18,14 +32,19 @@ a {
 .container {
   padding: 0 2rem;
 }
-
 .main {
-  padding: 2rem 0;
+  /* 保持居中：水平与垂直；移除最外层框和动画 */
-  flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding: 2rem 0;
+  min-height: 100vh; /* 确保垂直居中 */
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  backdrop-filter: none;
+  animation: none;
 }
 
 .title {
@@ -33,6 +52,22 @@ a {
   font-size: 2rem;
 }
 
+.title {
+  font-family: 'Orbitron', sans-serif;
+  color: #ff00ea;
+  text-shadow: 0 0 4px rgba(255,0,234,0.9), 0 0 8px rgba(0,255,247,0.28);
+  letter-spacing: 0.04em;
+}
+
+/* 渐变文字（用于主标题） */
+.title.gradient {
+  background: linear-gradient(90deg, #00fff7 0%, #ff00ea 50%, #ffd400 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: none; /* 去掉发光以显示纯渐变 */
+}
+
 .title,
 .description {
   text-align: center;
@@ -44,6 +79,11 @@ a {
   font-size: 1.5rem;
 }
 
+.description {
+  color: #00fff7;
+  text-shadow: 0 0 3px rgba(0,255,247,0.10), 0 0 6px rgba(255,0,234,0.04);
+}
+
 .grid {
   display: flex;
   align-items: center;
@@ -52,6 +92,11 @@ a {
   max-width: 800px;
 }
 
+.grid {
+  gap: 1rem;
+  max-width: 960px;
+}
+
 .card {
   width: 100%;
   margin: 1rem;
@@ -65,15 +110,29 @@ a {
   max-width: 300px;
 }
 
+/* 赛博朋克卡片 */
+.card {
+  color: #f8f8f2;
+  border: 1px solid rgba(0,255,247,0.12);
+  background: linear-gradient(180deg, rgba(20,0,40,0.48), rgba(5,0,20,0.52));
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.55), 0 0 12px rgba(255,0,234,0.03);
+  max-width: 340px;
+  backdrop-filter: blur(3px);
+}
+
 .card.pin {
-  background-color: whitesmoke;
+  background: linear-gradient(180deg, rgba(30,0,60,0.68), rgba(10,0,30,0.72));
+  border-color: rgba(255,0,234,0.9);
 }
 
 .card:hover,
 .card:focus,
 .card:active {
-  color: #0070f3;
+  color: #e6ffff;
-  border-color: #0070f3;
+  border-color: rgba(255,0,234,0.85);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 18px 4px rgba(255,0,234,0.06);
 }
 
 .card h2 {
@@ -81,12 +140,21 @@ a {
   font-size: 1.5rem;
 }
 
+.card h2 {
+  color: #00fff7;
+  text-shadow: 0 0 3px rgba(0,255,247,0.9), 0 0 6px rgba(255,0,234,0.25);
+}
+
 .card p {
   margin: 0;
   font-size: 1.25rem;
   line-height: 1.5;
 }
 
+.card p {
+  color: #dfeffd;
+}
+
 .card .single {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -106,6 +174,10 @@ a {
   margin-right: 12px;
 }
 
+.title-icon .icon {
+  filter: drop-shadow(0 0 3px rgba(0,255,247,0.9)) drop-shadow(0 0 6px rgba(255,0,234,0.35));
+}
+
 .beian {
   margin-bottom: 20px;
   text-align: center;
@@ -122,6 +194,13 @@ a {
   font-size: 14px;
 }
 
+.beian {
+  color: #00fff7;
+  text-shadow: 0 0 2px rgba(0,255,247,0.9);
+}
+
+.beian a { color: #ff00ea; }
+
 @media (max-width: 600px) {
   .grid {
     width: 100%;
@@ -129,6 +208,11 @@ a {
   }
 }
 
+@media (max-width: 600px) {
+  .main { padding: 1.25rem; border-radius: 10px; }
+  .card { max-width: 100%; margin: 0.5rem 0; }
+}
+
 @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;
@@ -147,3 +231,10 @@ a {
     background-color: #222;
   }
 }
+
+/* 霓虹呼吸动画 */
+@keyframes neonPulse {
+  0% { box-shadow: 0 0 4px rgba(0,255,247,0.08), 0 0 8px rgba(255,0,234,0.03); }
+  50% { box-shadow: 0 0 12px rgba(255,0,234,0.06), 0 0 24px rgba(0,255,247,0.05); }
+  100% { box-shadow: 0 0 4px rgba(0,255,247,0.08), 0 0 8px rgba(255,0,234,0.03); }
+}