From 6ffb7e23d49d51e38539c7e84f40d5a89468914a Mon Sep 17 00:00:00 2001 From: Satsuki Akiba Date: Sat, 7 Jun 2025 10:13:46 +0900 Subject: [PATCH] Update --- frontend/src/App.tsx | 133 +++++++++- frontend/src/app/globals.css | 113 ++++---- frontend/src/app/page.tsx | 165 ++++++++---- frontend/src/components/Dashboard.tsx | 299 ++++++++++++---------- frontend/src/components/EpisodePlayer.tsx | 117 ++++----- frontend/src/components/FeedList.tsx | 258 +++++++++++++++++-- frontend/src/components/FeedManager.tsx | 88 ++++--- frontend/src/main.tsx | 14 +- package.json | 2 +- 9 files changed, 813 insertions(+), 376 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 2710c9f..9057510 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,11 +1,132 @@ -import './app/globals.css'; -import RootLayout from './app/layout'; -import Home from './app/page'; +import { useState } from "react"; +import "./app/globals.css"; +import Dashboard from "./components/Dashboard"; +import EpisodePlayer from "./components/EpisodePlayer"; +import FeedManager from "./components/FeedManager"; + +type TabType = "dashboard" | "episodes" | "feeds"; + +interface Tab { + id: TabType; + label: string; + icon: string; + description: string; +} + +const tabs: Tab[] = [ + { + id: "dashboard", + label: "ダッシュボード", + icon: "📊", + description: "システム概要と最新情報", + }, + { + id: "episodes", + label: "エピソード", + icon: "🎧", + description: "ポッドキャスト再生と管理", + }, + { + id: "feeds", + label: "フィード管理", + icon: "📡", + description: "RSSフィードの設定", + }, +]; export default function App() { + const [activeTab, setActiveTab] = useState("dashboard"); + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const activeTabInfo = tabs.find((tab) => tab.id === activeTab); + return ( - - - + + + + + Voice RSS Summary - AI音声ポッドキャスト生成システム + + + +
+ {/* Header */} +
+
+
+ {/* Status and Mobile Menu */} +
+ {/* System Status */} +
+
+ 稼働中 +
+ + {/* Mobile menu button */} + +
+
+
+
+ + {/* Navigation */} + + + {/* Main Content */} +
+
+ {activeTab === "dashboard" && } + {activeTab === "episodes" && } + {activeTab === "feeds" && } +
+
+ + {/* Footer */} +
+
+
+

+ © 2025 Voice RSS Summary. All rights reserved. +

+
+
+
+
+ + ); } diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 7ffb5a7..482dc93 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -2,7 +2,19 @@ @tailwind components; @tailwind utilities; -/* Custom styles for better accessibility and design */ +/* Minimal CSS Variables */ +:root { + --primary: #3b82f6; + --primary-hover: #2563eb; + --border: #e5e7eb; + --border-hover: #d1d5db; + --background: #ffffff; + --muted: #f9fafb; + --text: #111827; + --text-muted: #6b7280; +} + + .line-clamp-1 { overflow: hidden; display: -webkit-box; @@ -17,54 +29,40 @@ -webkit-line-clamp: 2; } -/* Custom slider styles */ +.slider { + background: #e5e7eb; +} + .slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; - background: #8b5cf6; + background: var(--primary); cursor: pointer; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); - transition: all 0.2s ease; -} - -.slider::-webkit-slider-thumb:hover { - background: #7c3aed; - transform: scale(1.1); + border: 2px solid white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; - background: #8b5cf6; + background: var(--primary); cursor: pointer; - border: none; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + border: 2px solid white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } -/* Focus states for accessibility */ -.focus-ring:focus { - outline: 2px solid #8b5cf6; +button:focus, +input:focus, +select:focus, +textarea:focus { + outline: 2px solid var(--primary); outline-offset: 2px; } -/* Animation for loading states */ -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: .5; - } -} -.animate-pulse { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -/* Improved scrollbar */ ::-webkit-scrollbar { width: 8px; } @@ -82,41 +80,46 @@ background: #94a3b8; } -/* High contrast mode support */ -@media (prefers-contrast: high) { - .border-gray-200 { - border-color: #000; - } - - .text-gray-600 { - color: #000; - } - - .bg-gray-50 { - background-color: #fff; - } +.btn-primary { + background: var(--primary); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-weight: 500; + transition: background-color 0.2s; } -/* Reduced motion support */ +.btn-primary:hover { + background: var(--primary-hover); +} + + @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } -/* Global font and base styles */ -html, -body { - padding: 0; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', - sans-serif; +html { + scroll-behavior: smooth; } -*, -*::before, -*::after { +body { + margin: 0; + padding: 0 1rem; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: #f9fafb; + color: var(--text); + line-height: 1.5; +} + +* { box-sizing: border-box; +} + +::selection { + background: #dbeafe; + color: #1e40af; } \ No newline at end of file diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 7b6286b..8113fe5 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -5,33 +5,37 @@ import Dashboard from "../components/Dashboard"; export const metadata = { title: "Voice RSS Summary", - description: "RSSフィードから自動生成された音声ポッドキャストをご紹介します。", + description: + "RSSフィードから自動生成された音声ポッドキャストをご紹介します。", }; export default function Home() { - const [activeTab, setActiveTab] = useState<'dashboard' | 'episodes' | 'feeds'>('dashboard'); + const [activeTab, setActiveTab] = useState< + "dashboard" | "episodes" | "feeds" + >("dashboard"); return ( -
+
{/* Header */} -
+
-
-
- -
+
-

Voice RSS Summary

-

AI音声ポッドキャスト自動生成システム

+

+ Voice RSS Summary +

+

+ AI音声ポッドキャスト自動生成システム +

-
-
-
- システム稼働中 +
+
+
+ + システム稼働中 +
@@ -39,26 +43,41 @@ export default function Home() {
{/* Navigation */} -