Update index.html
Browse files- index.html +30 -0
index.html
CHANGED
|
@@ -376,6 +376,35 @@
|
|
| 376 |
font-size: 0.85em;
|
| 377 |
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
| 378 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 379 |
</style>
|
| 380 |
</head>
|
| 381 |
<body>
|
|
@@ -385,6 +414,7 @@
|
|
| 385 |
<div class="tabs">
|
| 386 |
<button class="tab active" onclick="switchTab('rag')">RAG</button>
|
| 387 |
<button class="tab" onclick="switchTab('chunking')">Chunking</button>
|
|
|
|
| 388 |
</div>
|
| 389 |
|
| 390 |
<!-- RAG TYPES TAB -->
|
|
|
|
| 376 |
font-size: 0.85em;
|
| 377 |
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
| 378 |
}
|
| 379 |
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
| 380 |
+
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; min-height: 100vh; }
|
| 381 |
+
.container { max-width: 1400px; margin: 0 auto; }
|
| 382 |
+
h1 { text-align: center; color: white; margin-bottom: 30px; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
|
| 383 |
+
.tabs { display: flex; gap: 10px; margin-bottom: 25px; }
|
| 384 |
+
.tab { padding: 15px 30px; background: rgba(255, 255, 255, 0.3); color: white; border: none; border-radius: 10px 10px 0 0; cursor: pointer; font-size: 1.1em; font-weight: bold; transition: all 0.3s ease; }
|
| 385 |
+
.tab:hover { background: rgba(255, 255, 255, 0.4); }
|
| 386 |
+
.tab.active { background: white; color: #667eea; }
|
| 387 |
+
.tab-content { display: none; }
|
| 388 |
+
.tab-content.active { display: block; }
|
| 389 |
+
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 25px; margin-bottom: 25px; }
|
| 390 |
+
.card { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: transform 0.3s ease; }
|
| 391 |
+
.card h2 { color: #667eea; margin-bottom: 20px; font-size: 1.5em; border-bottom: 3px solid #667eea; padding-bottom: 10px; }
|
| 392 |
+
|
| 393 |
+
/* New Styles for Indexing/DB Tab */
|
| 394 |
+
.hint-box { background: #fff3cd; border-left: 5px solid #ffc107; padding: 20px; border-radius: 10px; margin-bottom: 25px; color: #856404; }
|
| 395 |
+
.hint-box h3 { margin-bottom: 10px; }
|
| 396 |
+
.tech-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
|
| 397 |
+
.tech-table th, .tech-table td { padding: 12px; border: 1px solid #ddd; text-align: left; font-size: 0.9em; }
|
| 398 |
+
.tech-table th { background-color: #f8f9fa; color: #667eea; }
|
| 399 |
+
.tag-algo { background: #e2e3ff; color: #4a51d4; padding: 2px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; }
|
| 400 |
+
.tag-sys { background: #d4edda; color: #155724; padding: 2px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; }
|
| 401 |
+
|
| 402 |
+
/* Retained utility classes */
|
| 403 |
+
.timeline-item { display: flex; align-items: center; padding: 15px; margin: 10px 0; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
| 404 |
+
.timeline-year { font-size: 1.8em; font-weight: bold; color: #667eea; min-width: 80px; padding-right: 20px; border-right: 3px solid #667eea; }
|
| 405 |
+
.timeline-content { padding-left: 20px; flex: 1; }
|
| 406 |
+
.timeline-reference { color: #888; font-size: 0.85em; font-style: italic; margin-top: 5px; }
|
| 407 |
+
.timeline-reference a { color: #667eea; text-decoration: none; }
|
| 408 |
</style>
|
| 409 |
</head>
|
| 410 |
<body>
|
|
|
|
| 414 |
<div class="tabs">
|
| 415 |
<button class="tab active" onclick="switchTab('rag')">RAG</button>
|
| 416 |
<button class="tab" onclick="switchTab('chunking')">Chunking</button>
|
| 417 |
+
<button class="tab" onclick="switchTab('indexing-db')">Indexing & Vector DB</button>
|
| 418 |
</div>
|
| 419 |
|
| 420 |
<!-- RAG TYPES TAB -->
|