diff --git a/index.html b/index.html new file mode 100644 index 0000000..fc524d0 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + Build Your Own X - Interactive Explorer + + + +
+
+
+

🛠️ Build Your Own X

+

Learn by building your favorite technologies from scratch

+
+ "What I cannot create, I do not understand" — Richard Feynman +
+
+
+ +
+
+ + +
+ +
+ + +
+ +
+
+ +
+
+ 0 + Tutorials +
+
+ 0 + Categories +
+
+ 0 + Languages +
+
+ 0 + Showing +
+
+ +
+ + +
+ + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..978dece --- /dev/null +++ b/style.css @@ -0,0 +1,505 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary: #6366f1; + --primary-dark: #4f46e5; + --secondary: #8b5cf6; + --success: #10b981; + --warning: #f59e0b; + --danger: #ef4444; + --dark: #1f2937; + --light: #f9fafb; + --border: #e5e7eb; + --text: #374151; + --text-light: #6b7280; + --shadow: rgba(0, 0, 0, 0.1); + --shadow-lg: rgba(0, 0, 0, 0.15); +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: var(--text); + line-height: 1.6; + min-height: 100vh; + padding: 20px; +} + +.container { + max-width: 1200px; + margin: 0 auto; + background: white; + border-radius: 20px; + box-shadow: 0 20px 60px var(--shadow-lg); + overflow: hidden; +} + +header { + background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); + color: white; + padding: 60px 40px; + text-align: center; +} + +.header-content h1 { + font-size: 3.5rem; + margin-bottom: 10px; + font-weight: 800; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} + +.subtitle { + font-size: 1.2rem; + opacity: 0.9; + margin-bottom: 20px; +} + +blockquote { + font-style: italic; + opacity: 0.85; + font-size: 1.1rem; + margin-top: 20px; + padding: 15px; + border-left: 4px solid rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.1); + border-radius: 5px; + display: inline-block; +} + +.controls { + padding: 30px 40px; + background: var(--light); + border-bottom: 2px solid var(--border); +} + +.search-bar { + position: relative; + margin-bottom: 20px; +} + +.search-bar input { + width: 100%; + padding: 16px 50px 16px 20px; + font-size: 1.1rem; + border: 2px solid var(--border); + border-radius: 12px; + outline: none; + transition: all 0.3s ease; +} + +.search-bar input:focus { + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} + +.clear-btn { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + background: var(--text-light); + color: white; + border: none; + width: 30px; + height: 30px; + border-radius: 50%; + cursor: pointer; + font-size: 1.2rem; + display: none; + align-items: center; + justify-content: center; + transition: all 0.2s ease; +} + +.clear-btn:hover { + background: var(--danger); + transform: translateY(-50%) scale(1.1); +} + +.clear-btn.show { + display: flex; +} + +.action-buttons { + display: flex; + gap: 15px; + margin-bottom: 20px; +} + +.action-buttons button { + flex: 1; + padding: 14px 24px; + font-size: 1rem; + font-weight: 600; + border: none; + border-radius: 10px; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.surprise-btn { + background: linear-gradient(135deg, var(--warning) 0%, #f97316 100%); + color: white; +} + +.surprise-btn:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3); +} + +.show-all-btn { + background: linear-gradient(135deg, var(--success) 0%, #059669 100%); + color: white; +} + +.show-all-btn:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); +} + +.filter-chips { + display: flex; + flex-wrap: wrap; + gap: 10px; + min-height: 40px; +} + +.chip { + padding: 8px 16px; + background: white; + border: 2px solid var(--primary); + color: var(--primary); + border-radius: 20px; + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + display: inline-flex; + align-items: center; + gap: 8px; +} + +.chip:hover { + background: var(--primary); + color: white; + transform: scale(1.05); +} + +.chip.active { + background: var(--primary); + color: white; +} + +.stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; + padding: 30px 40px; + background: white; +} + +.stat-card { + text-align: center; + padding: 20px; + background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); + border-radius: 12px; + border: 2px solid #bae6fd; +} + +.stat-number { + display: block; + font-size: 2.5rem; + font-weight: 800; + color: var(--primary); + margin-bottom: 5px; +} + +.stat-label { + display: block; + font-size: 0.9rem; + color: var(--text-light); + text-transform: uppercase; + letter-spacing: 1px; +} + +.categories { + padding: 40px; +} + +.category { + margin-bottom: 40px; + opacity: 0; + animation: fadeIn 0.5s forwards; +} + +@keyframes fadeIn { + to { + opacity: 1; + } +} + +.category-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 3px solid var(--primary); + cursor: pointer; + transition: all 0.3s ease; +} + +.category-header:hover { + transform: translateX(10px); +} + +.category-icon { + font-size: 2rem; +} + +.category-title { + font-size: 1.8rem; + font-weight: 700; + color: var(--dark); + flex: 1; +} + +.category-count { + background: var(--primary); + color: white; + padding: 5px 15px; + border-radius: 20px; + font-size: 0.9rem; + font-weight: 600; +} + +.category-toggle { + font-size: 1.5rem; + color: var(--text-light); + transition: transform 0.3s ease; +} + +.category-toggle.collapsed { + transform: rotate(-90deg); +} + +.tutorials { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + margin-top: 20px; +} + +.tutorial-card { + background: white; + border: 2px solid var(--border); + border-radius: 12px; + padding: 20px; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.tutorial-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: var(--primary); + transform: scaleY(0); + transition: transform 0.3s ease; +} + +.tutorial-card:hover::before { + transform: scaleY(1); +} + +.tutorial-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px var(--shadow); + border-color: var(--primary); +} + +.tutorial-card.highlight { + animation: pulse 1.5s ease-in-out; + border-color: var(--warning); + background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); +} + +@keyframes pulse { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} + +.tutorial-language { + display: inline-block; + background: var(--primary); + color: white; + padding: 4px 12px; + border-radius: 6px; + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 10px; +} + +.tutorial-title { + font-size: 1.1rem; + color: var(--dark); + margin-bottom: 10px; + line-height: 1.4; +} + +.tutorial-link { + color: var(--primary); + text-decoration: none; + font-size: 0.9rem; + display: inline-flex; + align-items: center; + gap: 5px; + margin-top: 10px; +} + +.tutorial-link:hover { + text-decoration: underline; +} + +.modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + animation: fadeIn 0.3s; +} + +.modal-content { + background-color: white; + margin: 5% auto; + padding: 40px; + border-radius: 20px; + max-width: 600px; + position: relative; + animation: slideIn 0.3s; +} + +@keyframes slideIn { + from { + transform: translateY(-50px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +.close-modal { + position: absolute; + right: 20px; + top: 20px; + font-size: 2rem; + font-weight: bold; + color: var(--text-light); + cursor: pointer; + transition: color 0.3s ease; +} + +.close-modal:hover { + color: var(--danger); +} + +.modal h2 { + color: var(--primary); + margin-bottom: 20px; + font-size: 2rem; +} + +.modal p { + margin-bottom: 15px; + line-height: 1.8; +} + +.modal a { + color: var(--primary); + font-weight: 600; + text-decoration: none; +} + +.modal a:hover { + text-decoration: underline; +} + +footer { + text-align: center; + padding: 20px; + color: white; + margin-top: 20px; +} + +footer a { + color: white; + text-decoration: underline; +} + +.empty-state { + text-align: center; + padding: 60px 40px; + color: var(--text-light); +} + +.empty-state-icon { + font-size: 4rem; + margin-bottom: 20px; +} + +.empty-state-text { + font-size: 1.5rem; + font-weight: 600; +} + +/* Responsive */ +@media (max-width: 768px) { + body { + padding: 10px; + } + + .header-content h1 { + font-size: 2rem; + } + + .subtitle { + font-size: 1rem; + } + + .controls, .stats, .categories { + padding: 20px; + } + + .tutorials { + grid-template-columns: 1fr; + } + + .action-buttons { + flex-direction: column; + } + + .stat-number { + font-size: 2rem; + } +}