+
diff --git a/public/styles.css b/public/styles.css
index da0eb35..056e140 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -26,59 +26,125 @@ body {
background: linear-gradient(135deg, var(--background) 0%, #1a1f3a 100%);
color: var(--text-primary);
min-height: 100vh;
- padding: 2rem 1rem;
+ padding: 0;
line-height: 1.6;
}
+/* Top Header Bar */
+.top-header-bar {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ background: rgba(30, 41, 59, 0.95);
+ backdrop-filter: blur(20px);
+ border-bottom: 1px solid var(--border);
+ box-shadow: 0 4px 24px var(--shadow);
+ padding: 1rem 0;
+}
+
+.header-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2rem;
+}
+
+.header-left {
+ display: flex;
+ align-items: center;
+}
+
+.app-title {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ font-size: 1.75rem;
+ font-weight: 700;
+ margin: 0;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ letter-spacing: -0.02em;
+}
+
+.title-icon {
+ font-size: 1.5rem;
+ filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.3));
+}
+
+.title-text {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.header-right {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ justify-content: flex-end;
+ max-width: 400px;
+}
+
.container {
max-width: 1200px;
margin: 0 auto;
+ padding: 2rem 1rem;
}
-header {
- text-align: center;
+/* Top Section - Modern Unified Design */
+.top-section {
margin-bottom: 3rem;
animation: fadeIn 0.6s ease-out;
}
-header h1 {
- font-size: 3rem;
- font-weight: 700;
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- margin-bottom: 0.5rem;
-}
-
-.subtitle {
- color: var(--text-secondary);
- font-size: 1.1rem;
-}
-
-.input-section {
- margin-bottom: 2rem;
+.add-link-section {
animation: fadeIn 0.8s ease-out;
}
-.link-form {
- margin-bottom: 1.5rem;
+.section-subtitle {
+ color: var(--text-secondary);
+ font-size: 0.95rem;
+ font-weight: 400;
+ margin: 0 0 1.5rem 0;
+ opacity: 0.8;
}
-.input-group {
+/* Add Link Section */
+.link-form {
+ margin: 0;
+}
+
+.input-wrapper {
display: flex;
- gap: 1rem;
+ align-items: center;
+ gap: 0.75rem;
background: var(--surface);
- padding: 0.5rem;
+ padding: 0.5rem 0.75rem;
border-radius: 12px;
border: 1px solid var(--border);
- box-shadow: 0 4px 6px var(--shadow);
+ box-shadow: 0 4px 12px var(--shadow);
transition: all 0.3s ease;
}
-.input-group:focus-within {
+.input-wrapper:focus-within {
border-color: var(--primary-color);
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 4px 12px var(--shadow);
+}
+
+.input-icon {
+ color: var(--text-muted);
+ flex-shrink: 0;
+ transition: color 0.3s ease;
+}
+
+.input-wrapper:focus-within .input-icon {
+ color: var(--primary-color);
}
#linkInput {
@@ -86,49 +152,93 @@ header h1 {
background: transparent;
border: none;
color: var(--text-primary);
- font-size: 1rem;
- padding: 1rem;
+ font-size: 0.95rem;
+ padding: 0.5rem 0;
outline: none;
+ font-weight: 400;
}
#linkInput::placeholder {
color: var(--text-muted);
+ font-weight: 400;
}
-.btn-primary {
+.btn-add {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
- padding: 1rem 2rem;
- border-radius: 8px;
- font-size: 1rem;
+ padding: 0.625rem 1.25rem;
+ border-radius: 10px;
+ font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
- box-shadow: 0 4px 6px var(--shadow);
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 70px;
+ position: relative;
}
-.btn-primary:hover:not(:disabled) {
- transform: translateY(-2px);
- box-shadow: 0 6px 12px var(--shadow-lg);
+.btn-add:hover:not(:disabled) {
+ transform: translateY(-1px);
+ box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
-.btn-primary:active:not(:disabled) {
+.btn-add:active:not(:disabled) {
transform: translateY(0);
}
-.btn-primary:disabled {
+.btn-add:disabled {
opacity: 0.6;
cursor: not-allowed;
}
-.search-section {
- background: var(--surface);
- padding: 0.5rem;
+.btn-loader {
+ display: none;
+ align-items: center;
+ justify-content: center;
+}
+
+.btn-loader svg {
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+/* Search in Header */
+.search-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ background: rgba(255, 255, 255, 0.05);
+ padding: 0.625rem 1rem;
border-radius: 12px;
- border: 1px solid var(--border);
- box-shadow: 0 4px 6px var(--shadow);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
+ width: 100%;
+ min-width: 250px;
+}
+
+.search-wrapper:focus-within {
+ border-color: var(--primary-color);
+ background: rgba(99, 102, 241, 0.1);
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.search-icon {
+ color: var(--text-muted);
+ flex-shrink: 0;
+ transition: color 0.3s ease;
+}
+
+.search-wrapper:focus-within .search-icon {
+ color: var(--primary-color);
}
#searchInput {
@@ -136,13 +246,15 @@ header h1 {
background: transparent;
border: none;
color: var(--text-primary);
- font-size: 1rem;
- padding: 1rem;
+ font-size: 0.95rem;
+ padding: 0;
outline: none;
+ font-weight: 400;
}
#searchInput::placeholder {
color: var(--text-muted);
+ font-weight: 400;
}
.message {
@@ -321,16 +433,43 @@ header h1 {
}
@media (max-width: 768px) {
- header h1 {
- font-size: 2rem;
+ .top-header-bar {
+ padding: 0.75rem 0;
}
- .input-group {
+ .header-container {
flex-direction: column;
+ gap: 1rem;
+ align-items: stretch;
}
- .btn-primary {
+ .header-left {
+ justify-content: center;
+ }
+
+ .app-title {
+ font-size: 1.5rem;
+ }
+
+ .title-icon {
+ font-size: 1.25rem;
+ }
+
+ .header-right {
+ max-width: 100%;
+ }
+
+ .search-wrapper {
+ min-width: 100%;
+ }
+
+ .input-wrapper {
+ flex-wrap: wrap;
+ }
+
+ .btn-add {
width: 100%;
+ padding: 0.75rem 1.25rem;
}
.links-container {