diff --git a/frontend/index.html b/frontend/index.html index e73a091..87fd9c7 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,10 @@ - Favs + + + + ramon
diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 6555617..2fbfcd9 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,28 +1,30 @@ diff --git a/frontend/src/components/BookmarkForm.vue b/frontend/src/components/BookmarkForm.vue index e7dbdc4..fbf0b8a 100644 --- a/frontend/src/components/BookmarkForm.vue +++ b/frontend/src/components/BookmarkForm.vue @@ -20,8 +20,8 @@ async function submit() { diff --git a/frontend/src/components/BookmarkList.vue b/frontend/src/components/BookmarkList.vue index 6994b63..cb61e88 100644 --- a/frontend/src/components/BookmarkList.vue +++ b/frontend/src/components/BookmarkList.vue @@ -11,7 +11,7 @@ async function remove(id) { diff --git a/frontend/src/sections.js b/frontend/src/sections.js new file mode 100644 index 0000000..e5f1b60 --- /dev/null +++ b/frontend/src/sections.js @@ -0,0 +1,32 @@ +export const sections = [ + { + letter: 'R', + title: 'Recursos', + subtitle: 'Tools & References', + description: 'Arsenal de herramientas, librerías y referencias que uso en el día a día. Lo que hace que el código fluya.', + }, + { + letter: 'A', + title: 'Aprendizaje', + subtitle: 'Learning & Growth', + description: 'Artículos, cursos y lecturas que expanden la mente. El camino del aprendizaje continuo.', + }, + { + letter: 'M', + title: 'Mundo', + subtitle: 'Exploration & Ideas', + description: 'Mapas mentales, inspiración y descubrimientos. Todo lo que alimenta la curiosidad.', + }, + { + letter: 'O', + title: 'Oficio', + subtitle: 'Craft & Work', + description: 'Obras, proyectos y referencias profesionales. El oficio de construir software.', + }, + { + letter: 'N', + title: 'Naturaleza', + subtitle: 'Geek & Personal', + description: 'Lo que define quién soy. Nacionalidad digital, naturaleza geek, el lado humano detrás del código.', + }, +] diff --git a/frontend/src/style.css b/frontend/src/style.css index 6eee6d1..013bee3 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -7,128 +7,198 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - background: #0f0f0f; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + background: #0a0a0a; color: #e0e0e0; line-height: 1.5; + overflow: hidden; + height: 100vh; } -.container { - max-width: 700px; - margin: 2rem auto; - padding: 0 1rem; +#app { + height: 100vh; } -h1 { - font-size: 1.5rem; - margin-bottom: 1.5rem; +/* Layout */ +.layout { + display: grid; + grid-template-columns: 1fr auto; + height: 100vh; + border: 1px solid #222; + margin: 12px; + height: calc(100vh - 24px); +} + +/* Left panel */ +.panel-left { + display: flex; + flex-direction: column; + padding: 2.5rem 3rem; + overflow: hidden; +} + +.section-subtitle { + font-size: 0.8rem; + font-weight: 300; + color: #666; + letter-spacing: 0.05em; + margin-bottom: 0.5rem; +} + +.section-title { + font-size: clamp(4rem, 10vw, 8rem); + font-weight: 900; color: #fff; + line-height: 0.95; + letter-spacing: -0.03em; + margin-bottom: 2rem; + transition: opacity 0.3s; } -/* Form */ +.section-divider { + width: 100%; + height: 1px; + background: #222; + margin-bottom: 1.5rem; +} + +.section-meta { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 0.75rem; +} + +.section-year { + font-size: 0.8rem; + font-weight: 300; + color: #888; +} + +.section-count { + font-size: 0.8rem; + font-weight: 300; + color: #888; +} + +.section-description { + font-size: 0.85rem; + color: #777; + line-height: 1.6; + max-width: 480px; + margin-bottom: 1.5rem; +} + +/* Content area */ +.content-area { + flex: 1; + overflow-y: auto; + padding-right: 1rem; + scrollbar-width: thin; + scrollbar-color: #222 transparent; +} + +.content-area::-webkit-scrollbar { + width: 4px; +} + +.content-area::-webkit-scrollbar-thumb { + background: #222; + border-radius: 2px; +} + +/* Navigation tabs (right panel) */ +.panel-right { + display: flex; + border-left: 1px solid #222; +} + +.nav-tab { + display: flex; + align-items: flex-start; + justify-content: center; + padding: 2.5rem 1.25rem 2rem; + background: none; + border: none; + border-left: 1px solid #222; + color: #555; + font-family: 'Inter', sans-serif; + font-size: 0.8rem; + font-weight: 400; + cursor: pointer; + transition: color 0.2s, background 0.2s; + min-width: 70px; + letter-spacing: 0.02em; +} + +.nav-tab:first-child { + border-left: none; +} + +.nav-tab:hover { + color: #aaa; + background: #111; +} + +.nav-tab.active { + color: #fff; + font-weight: 700; + background: #0f0f0f; +} + +/* Bookmark form */ .bookmark-form { display: flex; gap: 0.5rem; - margin-bottom: 1.5rem; + margin-bottom: 1.25rem; } .bookmark-form input { flex: 1; - padding: 0.5rem 0.75rem; - border: 1px solid #333; - border-radius: 6px; - background: #1a1a1a; + padding: 0.5rem 0; + border: none; + border-bottom: 1px solid #222; + background: transparent; color: #e0e0e0; - font-size: 0.875rem; + font-family: 'Inter', sans-serif; + font-size: 0.8rem; + outline: none; + transition: border-color 0.2s; } .bookmark-form input:focus { - outline: none; border-color: #555; } .bookmark-form input::placeholder { - color: #666; -} - -/* Buttons */ -button { - padding: 0.5rem 1rem; - border: none; - border-radius: 6px; - cursor: pointer; - font-size: 0.875rem; - transition: background 0.15s; + color: #444; } .btn-add { - background: #2563eb; - color: #fff; + padding: 0.5rem 1rem; + background: #fff; + color: #0a0a0a; + border: none; + font-family: 'Inter', sans-serif; + font-size: 0.75rem; + font-weight: 700; + cursor: pointer; + letter-spacing: 0.05em; + text-transform: uppercase; + transition: opacity 0.2s; } .btn-add:hover { - background: #1d4ed8; -} - -.btn-categorize { - background: #1a1a1a; - color: #a0a0a0; - border: 1px solid #333; - margin-bottom: 1rem; -} - -.btn-categorize:hover { - background: #252525; - color: #fff; -} - -.btn-delete { - background: none; - color: #555; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; -} - -.btn-delete:hover { - color: #ef4444; -} - -/* Category bar */ -.category-bar { - display: flex; - gap: 0.375rem; - margin-bottom: 1rem; - flex-wrap: wrap; -} - -.category-pill { - padding: 0.25rem 0.75rem; - border-radius: 999px; - background: #1a1a1a; - color: #888; - border: 1px solid #282828; - font-size: 0.75rem; - cursor: pointer; -} - -.category-pill:hover { - color: #ccc; - border-color: #444; -} - -.category-pill.active { - background: #2563eb; - color: #fff; - border-color: #2563eb; + opacity: 0.85; } /* Bookmark list */ .bookmark-item { display: flex; - align-items: center; + align-items: baseline; justify-content: space-between; - padding: 0.625rem 0; - border-bottom: 1px solid #1a1a1a; + padding: 0.5rem 0; + border-bottom: 1px solid #151515; } .bookmark-info { @@ -137,103 +207,178 @@ button { } .bookmark-title { - color: #60a5fa; + color: #fff; text-decoration: none; - font-size: 0.875rem; + font-size: 0.825rem; + font-weight: 400; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + transition: color 0.15s; } .bookmark-title:hover { - text-decoration: underline; + color: #888; } .bookmark-meta { - font-size: 0.7rem; - color: #555; - margin-top: 0.125rem; + font-size: 0.65rem; + color: #444; + margin-top: 0.15rem; + font-weight: 300; } .bookmark-category { - color: #888; - background: #1a1a1a; - padding: 0.1rem 0.4rem; - border-radius: 4px; - font-size: 0.65rem; + color: #555; + margin-right: 0.5rem; + text-transform: lowercase; } -.empty { +.btn-delete { + background: none; + border: none; + color: #333; + padding: 0.25rem 0.5rem; + font-size: 0.65rem; + cursor: pointer; + font-family: 'Inter', sans-serif; + letter-spacing: 0.05em; + transition: color 0.15s; +} + +.btn-delete:hover { + color: #ef4444; +} + +/* Actions bar */ +.actions-bar { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1rem; +} + +.btn-action { + padding: 0.35rem 0.75rem; + background: transparent; color: #555; - font-size: 0.875rem; - padding: 2rem 0; - text-align: center; + border: 1px solid #222; + font-family: 'Inter', sans-serif; + font-size: 0.7rem; + font-weight: 400; + cursor: pointer; + letter-spacing: 0.03em; + transition: all 0.2s; +} + +.btn-action:hover { + color: #fff; + border-color: #444; +} + +.btn-action:disabled { + opacity: 0.4; + cursor: default; } .status { - font-size: 0.75rem; - color: #888; - margin-bottom: 0.5rem; + font-size: 0.7rem; + color: #555; + font-weight: 300; +} + +.empty { + color: #333; + font-size: 0.8rem; + padding: 3rem 0; + text-align: center; + font-weight: 300; + letter-spacing: 0.05em; } /* Login */ .login-screen { - text-align: center; - padding-top: 20vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + gap: 1rem; +} + +.login-title { + font-size: clamp(5rem, 15vw, 12rem); + font-weight: 900; + color: #fff; + letter-spacing: -0.04em; + line-height: 0.9; } .login-subtitle { - color: #666; - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.btn-google { - background: #fff; - color: #333; - padding: 0.625rem 1.5rem; - font-size: 0.875rem; - font-weight: 500; - border-radius: 6px; -} - -.btn-google:hover { - background: #f0f0f0; -} - -/* Header */ -.header { - display: flex; - align-items: center; - justify-content: space-between; + color: #444; + font-size: 0.8rem; + font-weight: 300; + letter-spacing: 0.1em; margin-bottom: 1.5rem; } -.header h1 { - margin-bottom: 0; +.btn-google { + padding: 0.625rem 2rem; + background: #fff; + color: #0a0a0a; + border: none; + font-family: 'Inter', sans-serif; + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + letter-spacing: 0.03em; + transition: opacity 0.2s; } -.user-info { +.btn-google:hover { + opacity: 0.85; +} + +/* Header */ +.header-bar { display: flex; align-items: center; + justify-content: flex-end; gap: 0.75rem; + margin-bottom: 0.5rem; } .user-email { - font-size: 0.75rem; - color: #666; + font-size: 0.65rem; + color: #444; + font-weight: 300; } .btn-logout { background: none; - color: #666; - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border: 1px solid #333; + border: none; + color: #444; + font-family: 'Inter', sans-serif; + font-size: 0.65rem; + cursor: pointer; + letter-spacing: 0.05em; + transition: color 0.15s; + padding: 0; } .btn-logout:hover { color: #fff; - border-color: #555; +} + +/* Loading */ +.loading-screen { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + color: #333; + font-size: 0.8rem; + font-weight: 300; + letter-spacing: 0.1em; }