Watanabebashi/WB-Workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ダッシュボード、ログイン画面のプロトタイプを作成

Browse Source
This commit is contained in:
furu04
2025-07-27 22:29:43 +09:00
parent 8b23051fde
commit c53f850806
2 changed files with 282 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
app/assets/dashboard.html Normal file
View File

@@ -0,0 +1,221 @@
<!-- 作りかけのプロトタイプ -->
<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>WB-Workout - ワークアウトダッシュボード</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style type="text/tailwindcss">
:root {
--primary-color: #2a8fed;
--primary-hover-color: #1e73db;
--text-color: #111827;
--text-muted-color: #6b7280;
--background-color: #f9fafb;
--card-background-color: #ffffff;
--border-color: #e5e7eb;
}
body {
font-family: 'Lexend', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
}
.primary-button {
@apply bg-[var(--primary-color)] text-white font-semibold py-2 px-4 rounded-md shadow-sm hover:bg-[var(--primary-hover-color)] transition-colors duration-300;
}
.nav-link.active {
@apply text-[var(--primary-color)] font-semibold border-b-2 border-[var(--primary-color)];
}.mobile-menu {
@apply hidden md:hidden absolute top-full left-0 w-full bg-[var(--card-background-color)] shadow-md;
}
.mobile-menu.active {
@apply block;
}
</style>
</head>
<body>
<div class="relative flex size-full min-h-screen flex-col group/design-root">
<div class="layout-container flex h-full grow flex-col">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-[var(--border-color)] bg-[var(--card-background-color)] px-4 sm:px-6 py-4 shadow-sm relative">
<div class="flex items-center gap-4">
<a class="flex items-center gap-2 text-xl md:text-2xl font-bold text-[var(--primary-color)]" href="#">
<!-- ロゴ画像をここに追加 -->
<span class="hidden sm:inline">WB-Workout</span>
</a>
<nav class="hidden md:flex items-center gap-6 ml-8">
<a class="nav-link text-sm font-medium text-[var(--text-muted-color)] hover:text-[var(--primary-color)] transition-colors duration-200" href="#">ホーム</a>
<a class="nav-link active text-sm font-medium transition-colors duration-200 pb-1" href="#">ダッシュボード</a>
<a class="nav-link text-sm font-medium text-[var(--text-muted-color)] hover:text-[var(--primary-color)] transition-colors duration-200" href="#">コミュニティ</a>
<a class="nav-link text-sm font-medium text-[var(--text-muted-color)] hover:text-[var(--primary-color)] transition-colors duration-200" href="#">設定</a>
</nav>
</div>
<div class="flex items-center gap-2 sm:gap-4">
<div class="relative hidden sm:block">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-5 w-5 text-[var(--text-muted-color)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg>
</div>
<input class="form-input w-full max-w-xs rounded-md border-[var(--border-color)] bg-transparent pl-10 text-sm focus:border-[var(--primary-color)] focus:ring-[var(--primary-color)]" placeholder="検索..." type="search"/>
</div>
<button class="primary-button hidden sm:block">新しいワークアウト</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" style='background-image: url("");'></div>
<!--↑ユーザプロフ画像 -->
<button class="md:hidden p-2" id="mobile-menu-button">
<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<path d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<nav class="mobile-menu" id="mobile-menu">
<a class="block px-4 py-2 text-sm text-[var(--text-muted-color)] hover:bg-gray-100" href="#">ホーム</a>
<a class="block px-4 py-2 text-sm text-[var(--primary-color)] font-semibold bg-gray-100" href="#">ダッシュボード</a>
<a class="block px-4 py-2 text-sm text-[var(--text-muted-color)] hover:bg-gray-100" href="#">コミュニティ</a>
<a class="block px-4 py-2 text-sm text-[var(--text-muted-color)] hover:bg-gray-100" href="#">設定</a>
<div class="border-t border-[var(--border-color)] px-4 py-3">
<button class="primary-button w-full">新しいワークアウト</button>
</div>
</nav>
</header>
<main class="px-4 sm:px-6 lg:px-8 py-8 flex flex-1 justify-center">
<div class="layout-content-container flex flex-col max-w-7xl w-full gap-6 md:gap-8">
<div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
<div>
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight">ワークアウトダッシュボード</h1>
<p class="text-[var(--text-muted-color)] mt-1 text-sm sm:text-base">あなたの進捗をグラフと表で確認しましょう。</p>
</div>
<div class="flex items-center gap-2">
<button class="text-sm font-medium px-3 py-1.5 rounded-md bg-[var(--primary-color)] text-white">日別</button>
<button class="text-sm font-medium px-3 py-1.5 rounded-md bg-gray-200 text-[var(--text-muted-color)] hover:bg-gray-300">週別</button>
<button class="text-sm font-medium px-3 py-1.5 rounded-md bg-gray-200 text-[var(--text-muted-color)] hover:bg-gray-300">月別</button>
</div>
</div>
<section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 flex flex-col gap-6">
<div class="rounded-md border border-[var(--border-color)] p-4 sm:p-6 bg-[var(--card-background-color)] shadow-sm">
<h2 class="font-semibold text-lg mb-4">総リフト重量の推移</h2>
<div class="flex items-center gap-2 text-sm mb-4">
<p class="text-[var(--text-muted-color)]">過去7日間</p>
<span class="flex items-center text-green-600 font-semibold">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path clip-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L6.22 8.78a.75.75 0 01-1.06-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 11-1.06 1.06L10.75 5.612V16.25A.75.75 0 0110 17z" fill-rule="evenodd"></path></svg>
5%
</span>
</div>
<div class="h-52 sm:h-64 relative">
<svg class="absolute inset-0" fill="none" height="100%" preserveAspectRatio="none" viewBox="0 0 400 160" width="100%" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0, 0)">
<path d="M0 130L50 110L100 120L150 90L200 100L250 60L300 80L350 50L400 70V160H0V130Z" fill="url(#paint0_linear_area)" fill-opacity="0.3"></path>
<path d="M0 130L50 110L100 120L150 90L200 100L250 60L300 80L350 50L400 70" stroke="var(--primary-color)" stroke-width="2"></path>
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_area" x1="200" x2="200" y1="50" y2="160">
<stop stop-color="var(--primary-color)"></stop>
<stop offset="1" stop-color="var(--primary-color)" stop-opacity="0"></stop>
</linearGradient>
</defs>
</g>
</svg>
<div class="absolute bottom-0 left-0 right-0 h-px bg-[var(--border-color)]"></div>
</div>
<div class="flex justify-between mt-2 text-xs text-[var(--text-muted-color)] border-t border-dashed border-[var(--border-color)] pt-2 overflow-x-auto">
<span class="flex-shrink-0 px-1">7月14日</span>
<span class="flex-shrink-0 px-1">7月15日</span>
<span class="flex-shrink-0 px-1">7月16日</span>
<span class="flex-shrink-0 px-1">7月17日</span>
<span class="flex-shrink-0 px-1">7月18日</span>
<span class="flex-shrink-0 px-1">7月19日</span>
<span class="flex-shrink-0 px-1">7月20日</span>
</div>
</div>
</div>
<div class="flex flex-col gap-6">
<div class="rounded-md border border-[var(--border-color)] p-4 sm:p-6 bg-[var(--card-background-color)] shadow-sm">
<h2 class="font-semibold text-lg mb-4">ジム訪問回数</h2>
<p class="text-4xl font-bold text-[var(--primary-color)]">12回</p>
<p class="text-[var(--text-muted-color)] text-sm mt-1">今月</p>
<div class="h-32 mt-4">
<div class="grid h-full grid-cols-4 gap-2 items-end">
<div class="bg-[var(--primary-color)] rounded-t-sm" style="height: 60%;"></div>
<div class="bg-[var(--primary-color)] rounded-t-sm" style="height: 100%;"></div>
<div class="bg-[var(--primary-color)] rounded-t-sm" style="height: 80%;"></div>
<div class="bg-gray-200 rounded-t-sm" style="height: 0%;"></div>
</div>
</div>
<div class="flex justify-between mt-2 text-xs text-[var(--text-muted-color)]">
<span>第1週</span>
<span>第2週</span>
<span>第3週</span>
<span>第4週</span>
</div>
</div>
</div>
</section>
<section>
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-4">
<h2 class="text-xl font-bold">ワークアウト履歴</h2>
<input class="form-input w-full sm:w-auto rounded-md border-[var(--border-color)] focus:border-[var(--primary-color)] focus:ring-[var(--primary-color)] text-sm" type="date" value="2024-07-20"/>
</div>
<div class="overflow-x-auto rounded-md border border-[var(--border-color)] bg-[var(--card-background-color)] shadow-sm">
<table class="w-full text-sm text-left">
<thead class="bg-gray-50 border-b border-[var(--border-color)]">
<tr>
<th class="px-4 py-3 font-semibold tracking-wider" scope="col">日付</th>
<th class="px-4 py-3 font-semibold tracking-wider" scope="col">運動の種類</th>
<th class="px-4 py-3 font-semibold tracking-wider text-center" scope="col">セット数</th>
<th class="px-4 py-3 font-semibold tracking-wider hidden md:table-cell" scope="col">レップ数</th>
<th class="px-4 py-3 font-semibold tracking-wider hidden sm:table-cell" scope="col">重量 (kg)</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--border-color)]">
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 whitespace-nowrap font-medium">2024-07-20</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)]">胸 &amp; 三頭筋</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] text-center">6</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden md:table-cell">10, 8, 8, 12, 10, 10</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden sm:table-cell">60, 50, 20</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 whitespace-nowrap font-medium">2024-07-18</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)]">脚 &amp; 肩</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] text-center">5</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden md:table-cell">10, 10, 8, 12, 12</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden sm:table-cell">100, 20</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 whitespace-nowrap font-medium">2024-07-17</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)]">背中 &amp; 二頭筋</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] text-center">7</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden md:table-cell">5, 8, 8, 12, 12, 10, 10</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden sm:table-cell">120, 50, 15</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 whitespace-nowrap font-medium">2024-07-15</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)]">胸 &amp; 三頭筋</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] text-center">6</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden md:table-cell">8, 8, 6, 10, 10, 8</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden sm:table-cell">65, 50, 22</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 whitespace-nowrap font-medium">2024-07-13</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)]">脚 &amp; 肩</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] text-center">5</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden md:table-cell">8, 8, 6, 10, 10</td>
<td class="px-4 py-4 whitespace-nowrap text-[var(--text-muted-color)] hidden sm:table-cell">105, 20</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</main>
</div>
</div>
<script>
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('active');
});
</script>
</body></html>

61
app/assets/login.html Normal file
View File

@@ -0,0 +1,61 @@
<!-- 作りかけのプロトタイプ -->
<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>WB-Workout - ログイン</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style type="text/tailwindcss">
:root {
--primary-color: #2a8fed;
--primary-hover-color: #1e78d6;
}
body {
font-family: 'Lexend', 'Noto Sans JP', sans-serif;
}
</style>
</head>
<body class="bg-gray-50 text-gray-900">
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12">
<div class="w-full max-w-md space-y-8">
<div>
<div class="flex items-center justify-center gap-3">
<!-- ロゴ画像をここに追加 -->
<h1 class="text-3xl font-bold tracking-tighter text-gray-900">WB-Workout</h1>
</div>
<h2 class="mt-6 text-center text-2xl font-bold tracking-tight text-gray-800">おかえりなさい！</h2>
<p class="mt-2 text-center text-sm text-gray-600">アカウントにログインしてください</p>
</div>
<form action="#" class="mt-8 space-y-6" method="POST">
<div class="space-y-4 rounded-md shadow-sm">
<div>
<label class="sr-only" for="email-address">メールアドレス</label>
<input autocomplete="email" class="relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-3 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-[var(--primary-color)] focus:outline-none focus:ring-[var(--primary-color)] sm:text-sm" id="email-address" name="email" placeholder="メールアドレス" required="" type="email"/>
</div>
<div>
<label class="sr-only" for="password">パスワード</label>
<input autocomplete="current-password" class="relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-3 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-[var(--primary-color)] focus:outline-none focus:ring-[var(--primary-color)] sm:text-sm" id="password" name="password" placeholder="パスワード" required="" type="password"/>
</div>
</div>
<div class="flex items-center justify-end">
<div class="text-sm">
<a class="font-medium text-[var(--primary-color)] hover:text-[var(--primary-hover-color)]" href="#">パスワードをお忘れですか？</a>
</div>
</div>
<div>
<button class="group relative flex w-full justify-center rounded-md border border-transparent bg-[var(--primary-color)] px-4 py-3 text-sm font-semibold text-white hover:bg-[var(--primary-hover-color)] focus:outline-none focus:ring-2 focus:ring-[var(--primary-color)] focus:ring-offset-2" type="submit">
ログイン
</button>
</div>
</form>
<div class="mt-6 text-center text-sm text-gray-600">
アカウントをお持ちでないですか？
<a class="font-medium text-[var(--primary-color)] hover:text-[var(--primary-hover-color)]" href="#">新規登録</a>
</div>
</div>
</div>
</body></html>