webnode

webnode/public/style.css

@@ -0,0 +1,293 @@
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    background: #fff;
+    color: #333;
+    overflow-x: hidden;
+}
+
+/* Navbar */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 56px;
+    background: #fff;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    z-index: 1000;
+}
+
+.nav-btn {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    transition: background 0.2s;
+}
+
+.nav-btn:hover {
+    background: #f5f5f5;
+}
+
+.nav-btn:active {
+    background: #e0e0e0;
+}
+
+.nav-btn svg {
+    width: 24px;
+    height: 24px;
+    stroke: #555;
+}
+
+.nav-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+}
+
+/* Main content area */
+.main-content {
+    padding-top: 56px;
+    min-height: 100vh;
+}
+
+/* Lines container */
+.lines-container {
+    padding: 8px 0;
+}
+
+/* Individual line */
+.line {
+    padding: 10px 16px;
+    cursor: pointer;
+    transition: background 0.15s;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.line:hover {
+    background: #f9f9f9;
+}
+
+.line.selected {
+    background: #e3f2fd;
+}
+
+.english {
+    font-size: 16px;
+    line-height: 1.5;
+    color: inherit;
+}
+
+/* Translation card (expanded state) */
+.translation-card {
+    margin-top: 10px;
+    padding: 12px 16px;
+    background: #fff9e6;
+    border-radius: 8px;
+    border-left: 3px solid #ffc107;
+    animation: slideDown 0.2s ease-out;
+}
+
+.meta-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #ffe0b2;
+}
+
+.meta-timestamp {
+    font-size: 11px;
+    color: #999;
+    font-family: monospace;
+}
+
+.meta-speaker {
+    font-size: 11px;
+    font-weight: 600;
+    color: #666;
+}
+
+.translation-label {
+    font-size: 10px;
+    color: #999;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}
+
+.chinese {
+    font-size: 17px;
+    line-height: 1.6;
+    color: #333;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Side menu */
+.side-menu-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s, visibility 0.3s;
+    z-index: 2000;
+}
+
+.side-menu-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.side-menu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 80vw;
+    background: #fff;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+    transform: translateX(100%);
+    transition: transform 0.3s ease-out;
+    z-index: 2001;
+    display: flex;
+    flex-direction: column;
+}
+
+.side-menu.active {
+    transform: translateX(0);
+}
+
+.side-menu-header {
+    height: 56px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.side-menu-title {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.close-btn {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+}
+
+.close-btn:hover {
+    background: #f5f5f5;
+}
+
+.close-btn svg {
+    width: 24px;
+    height: 24px;
+    stroke: #555;
+}
+
+.episode-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 0;
+}
+
+.episode-item {
+    display: block;
+    padding: 16px;
+    text-decoration: none;
+    color: #333;
+    border-bottom: 1px solid #f0f0f0;
+    transition: background 0.15s;
+}
+
+.episode-item:hover {
+    background: #f5f5f5;
+}
+
+.episode-item.active {
+    background: #e3f2fd;
+    font-weight: 500;
+}
+
+.episode-id {
+    font-size: 16px;
+}
+
+/* Empty state */
+.empty-state {
+    padding: 40px 16px;
+    text-align: center;
+    color: #999;
+}
+
+/* Mobile optimizations */
+@media (max-width: 480px) {
+    .line {
+        padding: 12px 16px;
+    }
+    
+    .english {
+        font-size: 17px;
+    }
+    
+    .chinese {
+        font-size: 18px;
+    }
+}
+
+/* Hide scrollbar but keep functionality */
+.episode-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.episode-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.episode-list::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 3px;
+}