Create styles.css

styles.css

@@ -0,0 +1,817 @@
+ebody {
+  font-family: 'Quicksand', sans-serif;
+  background: linear-gradient(135deg, #FF69B4 0%, #800080 100%);
+  color: #FFFFFF;
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  min-height: 100vh;
+}
+
+.container {
+  margin: 20px;
+  background-color: rgba(28, 14, 36, 0.95);
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(255, 105, 180, 0.4);
+  border: 1px solid rgba(255, 105, 180, 0.4);
+  outline: 1px solid rgba(255, 105, 180, 0.7);
+  outline-offset: -1px;
+  position: relative;
+  backdrop-filter: blur(10px);
+}
+
+.container::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  border: 1px solid rgba(255, 105, 180, 0.98);
+  border-radius: 12px;
+  pointer-events: none;
+  animation: borderGlow 2s ease-in-out infinite;
+}
+
+@keyframes borderGlow {
+  0% {
+    box-shadow: 0 0 5px rgba(255, 105, 180, 0.98);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(255, 105, 180, 0.98);
+  }
+  100% {
+    box-shadow: 0 0 5px rgba(255, 105, 180, 0.98);
+  }
+}
+
+.header h1 {
+  font-size: 28px;
+  color: #FF69B4;
+  margin: 0 0 20px 0;
+  text-shadow: 0 0 15px rgba(255, 105, 180, 0.8);
+  letter-spacing: 1px;
+}
+
+.update-section {
+  margin-top: 30px;
+}
+
+.update-section h2, h2 {
+  font-size: 24px;
+  color: #FF69B4;
+  text-shadow: 0 0 15px rgba(255, 105, 180, 0.8);
+  letter-spacing: 0.5px;
+}
+
+.update-section p {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #FFE1FF;
+}
+
+.info p {
+  color: #FFE1FF;
+  line-height: 1.6;
+  font-size: 16px;
+}
+
+.info img {
+  width: 100%;
+  border-radius: 10px;
+  margin-bottom: 15px;
+  box-shadow: 0 0 30px rgba(255, 105, 180, 0.5);
+  border: 1px solid rgba(255, 105, 180, 0.4);
+  outline: 1px solid rgba(255, 105, 180, 0.7);
+  outline-offset: -1px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.info img:hover {
+  transform: scale(1.01);
+  box-shadow: 0 0 40px rgba(255, 105, 180, 0.6);
+}
+
+a {
+  color: #00FFEE;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: #FF1493;
+}
+
+.button {
+  display: inline-block;
+  background: linear-gradient(45deg, rgba(255, 105, 180, 0.9), rgba(128, 0, 128, 0.9));
+  color: #FFFFFF;
+  padding: 12px 24px;
+  border-radius: 5px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 105, 180, 0.4);
+}
+
+.button:hover {
+  background: linear-gradient(45deg, rgba(255, 105, 180, 1), rgba(128, 0, 128, 1));
+  box-shadow: 0 0 20px rgba(255, 105, 180, 0.7);
+  transform: translateY(-2px);
+}
+
+pre {
+  background-color: rgba(28, 14, 36, 0.95);
+  padding: 15px;
+  border-radius: 5px;
+  overflow-x: auto;
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  outline: 1px solid rgba(255, 20, 147, 0.6);
+  outline-offset: -1px;
+}
+
+code {
+  font-family: 'Courier New', monospace;
+  color: #FFE1FF;
+}
+
+.benchmark-container {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.benchmark-container::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  border: 1px solid rgba(255, 20, 147, 0.98);
+  border-radius: 12px;
+  pointer-events: none;
+  animation: borderGlow 2s ease-in-out infinite;
+}
+
+.benchmark-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 15px;
+}
+
+.metric-box {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.metric-box:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3);
+}
+
+.metric-box .label {
+  color: #00FFEE;
+  font-size: 14px;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.metric-box .value {
+  color: #FFE1FF;
+  font-size: 18px;
+  font-weight: 600;
+  text-shadow: 0 0 5px rgba(255, 20, 147, 0.5);
+}
+
+.metrics-section {
+  margin-bottom: 30px;
+}
+
+.metrics-section details {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.metrics-section summary {
+  color: #FF1493;
+  font-size: 20px;
+  cursor: pointer;
+  text-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
+  outline: none;
+  padding: 5px 0;
+}
+
+.metrics-section summary::-webkit-details-marker {
+  display: none;
+}
+
+.core-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.progress-metrics {
+  display: grid;
+  gap: 15px;
+}
+
+.progress-metric {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+  transition: transform 0.3s ease;
+}
+
+.progress-metric:hover {
+  transform: translateY(-2px);
+}
+
+.progress-label {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  color: #00FFEE;
+  font-size: 14px;
+}
+
+.progress-value {
+  color: #FFE1FF;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 20, 147, 0.15);
+  border-radius: 4px;
+  position: relative;
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #FF69B4 0%, #800080 100%);
+  border-radius: 4px;
+  transition: width 1s ease-in-out;
+  box-shadow: 0 0 15px rgba(255, 105, 180, 0.4);
+}
+
+.progress-bar.split {
+  display: flex;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 20, 147, 0.15);
+  overflow: visible;
+}
+
+.progress-fill-left {
+  height: 100%;
+  position: absolute;
+  right: 50%;
+  background: linear-gradient(90deg, #FF69B4 30%, rgba(255, 105, 180, 0.5) 100%);
+  border-radius: 4px 0 0 4px;
+  transition: width 0.3s ease-in-out;
+}
+
+.progress-fill-right {
+  height: 100%;
+  position: absolute;
+  left: 50%;
+  background: linear-gradient(90deg, rgba(128, 0, 128, 0.5) 0%, #800080 70%);
+  border-radius: 0 4px 4px 0;
+  transition: width 0.3s ease-in-out;
+}
+
+.progress-metric.split .progress-bar::before,
+.progress-metric.split .progress-bar::after {
+  content: '';
+  position: absolute;
+  width: 2px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.7);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+}
+
+.progress-metric.split .progress-bar::before {
+  left: 0;
+}
+
+.progress-metric.split .progress-bar::after {
+  right: 0;
+}
+
+.progress-metric.split:hover .progress-fill-left {
+  box-shadow: 0 0 15px rgba(255, 20, 147, 0.5);
+}
+
+.progress-metric.split:hover .progress-fill-right {
+  box-shadow: 0 0 15px rgba(75, 0, 130, 0.5);
+}
+
+.progress-metric.split {
+  padding: 12px 15px;
+}
+
+.progress-metric.split .progress-label {
+  margin-bottom: 8px;
+  gap: 12px;
+}
+
+.progress-metric.split .progress-label span:first-child,
+.progress-metric.split .progress-label span:last-child {
+  flex: 0 0 80px;
+  font-size: 14px;
+}
+
+.progress-metric.split .progress-value {
+  font-weight: 600;
+  text-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
+  font-size: 14px;
+  min-width: 60px;
+  text-align: center;
+}
+
+.progress-metric:hover .progress-fill-center {
+  box-shadow: 0 0 15px rgba(255, 20, 147, 0.5);
+}
+
+.progress-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+  color: #00FFEE;
+  font-size: 14px;
+}
+
+.progress-metric:not(.split) .progress-label {
+  gap: 12px;
+}
+
+.progress-metric:not(.split) .progress-label span {
+  flex: 0 0 auto;
+}
+
+.progress-metric:not(.split) .progress-value {
+  color: #FFE1FF;
+}
+
+.progress-metric.split .progress-label {
+  gap: 20px;
+}
+
+.progress-metric.split .progress-label span:first-child,
+.progress-metric.split .progress-label span:last-child {
+  flex: 0 0 80px;
+}
+
+.progress-metric.split .progress-label span:first-child {
+  text-align: right;
+}
+
+.progress-metric.split .progress-label span:last-child {
+  text-align: left;
+}
+
+.progress-metric.split .progress-value {
+  color: #FFE1FF;
+  flex: 0 0 60px;
+  text-align: center;
+}
+
+.progress-metric:hover .progress-fill {
+  box-shadow: 0 0 15px rgba(255, 20, 147, 0.5);
+}
+
+.progress-metric:hover .progress-fill-center {
+  box-shadow: 0 0 15px rgba(75, 0, 130, 0.5);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+
+.creator-section {
+  margin: 20px 0;
+}
+
+.creator-badge {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  padding: 10px 15px;
+}
+
+.creator-label {
+  color: #FFE1FF;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.creator-link {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #00FFEE;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.creator-name {
+  font-weight: 600;
+}
+
+.creator-arrow {
+  font-size: 16px;
+  transition: transform 0.3s ease;
+}
+
+.creator-link:hover {
+  color: #FF1493;
+}
+
+.creator-link:hover .creator-arrow {
+  transform: translateX(3px);
+}
+
+.model-info {
+  margin-top: 30px;
+}
+
+.name-legend {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  padding: 20px;
+  margin: 20px 0;
+}
+
+.name-legend h3 {
+  color: #FF1493;
+  font-size: 18px;
+  margin: 0 0 15px 0;
+}
+
+.legend-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.legend-key {
+  color: #00FFEE;
+  font-weight: 600;
+  min-width: 80px;
+}
+
+.legend-value {
+  color: #FFE1FF;
+}
+
+.model-description {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.model-description p {
+  margin: 0 0 15px 0;
+  line-height: 1.6;
+}
+
+.model-description p:last-child {
+  margin-bottom: 0;
+}
+
+.section-container {
+  margin: 40px 0;
+}
+
+.info-card {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.info-header {
+  background: rgba(255, 20, 147, 0.1);
+  padding: 20px;
+  border-bottom: 1px solid rgba(255, 20, 147, 0.3);
+}
+
+.info-header h3 {
+  color: #FF1493;
+  margin: 0 0 10px 0;
+  font-size: 20px;
+  text-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
+}
+
+.model-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.model-tag {
+  background: rgba(0, 255, 238, 0.1);
+  color: #00FFEE;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  border: 1px solid rgba(0, 255, 238, 0.2);
+}
+
+.model-composition {
+  padding: 20px;
+  border-bottom: 1px solid rgba(255, 20, 147, 0.3);
+}
+
+.model-composition h4 {
+  color: #FF1493;
+  margin: 0 0 15px 0;
+  font-size: 16px;
+}
+
+.composition-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.composition-list li {
+  color: #FFE1FF;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.model-component {
+  color: #00FFEE;
+  font-weight: 500;
+  min-width: 120px;
+}
+
+.template-card {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+}
+
+.template-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.template-icon {
+  width: 24px;
+  height: 24px;
+  opacity: 0.8;
+}
+
+.template-content {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.template-link {
+  color: #00FFEE;
+  text-decoration: none;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.template-author {
+  color: rgba(255, 225, 255, 0.7);
+  font-size: 14px;
+}
+
+.quantized-container {
+  display: grid;
+  gap: 20px;
+}
+
+.quantized-section {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.quantized-section h3 {
+  color: #FF1493;
+  font-size: 18px;
+  margin: 0 0 15px 0;
+}
+
+.quantized-items {
+  display: grid;
+  gap: 12px;
+}
+
+.quantized-item {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.quantized-item .author {
+  color: rgba(255, 225, 255, 0.7);
+  min-width: 100px;
+}
+
+.multi-links {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.separator {
+  color: rgba(255, 225, 255, 0.5);
+}
+
+.config-container {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.config-header {
+  background: rgba(255, 20, 147, 0.1);
+  padding: 15px 20px;
+  border-bottom: 1px solid rgba(255, 20, 147, 0.3);
+}
+
+.model-name {
+  color: #FF1493;
+  font-weight: 600;
+}
+
+.config-content {
+  padding: 20px;
+}
+
+.config-item {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 15px;
+}
+
+.config-label {
+  color: #00FFEE;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.config-value {
+  color: #FFE1FF;
+  font-family: 'Courier New', monospace;
+}
+
+.config-models {
+  margin-top: 20px;
+}
+
+.model-list {
+  list-style: none;
+  padding: 0;
+  margin: 10px 0 0 0;
+}
+
+.model-list li {
+  color: #FFE1FF;
+  font-family: 'Courier New', monospace;
+  padding: 5px 0;
+  padding-left: 20px;
+  position: relative;
+}
+
+.model-list li::before {
+  content: '-';
+  position: absolute;
+  left: 0;
+  color: #00FFEE;
+}
+
+.link-arrow {
+  display: inline-block;
+  transition: transform 0.3s ease;
+}
+
+a:hover .link-arrow {
+  transform: translateX(3px);
+}
+
+.benchmark-notification {
+  background: rgba(255, 20, 147, 0.15);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  padding: 12px;
+  animation: glowPulse 2s infinite;
+}
+
+.notification-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  text-align: center;
+}
+
+.notification-icon {
+  font-size: 20px;
+}
+
+.notification-text {
+  color: #FFE1FF;
+  font-size: 16px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+}
+
+.benchmark-link {
+  color: #00FFEE;
+  text-decoration: none;
+  font-size: 14px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 255, 238, 0.3);
+}
+
+.benchmark-link:hover {
+  background: rgba(0, 255, 238, 0.1);
+  border-color: rgba(0, 255, 238, 0.5);
+  color: #00FFEE;
+  text-shadow: 0 0 5px rgba(0, 255, 238, 0.5);
+}
+
+@keyframes glowPulse {
+  0% {
+    box-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 15px rgba(255, 20, 147, 0.5);
+  }
+  100% {
+    box-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
+  }
+}
+
+.review-card {
+  background: rgba(28, 14, 36, 0.95);
+  border: 1px solid rgba(255, 20, 147, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.review-card:last-child {
+  margin-bottom: 0;
+}