119 lines
5.5 KiB
HTML
119 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ワンポイントTIPS</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', sans-serif; }
|
||
.line-clamp-2 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-white p-4">
|
||
<div class="w-[420px] h-[650px] mx-auto flex flex-col">
|
||
|
||
<!-- Header -->
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-8 h-8 rounded-lg bg-amber-500 flex items-center justify-center">
|
||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h1 class="text-base font-semibold text-slate-900">ワンポイントTIPS</h1>
|
||
<p class="text-xs text-slate-500">今日の変更から学ぶ</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-sm font-medium text-slate-700">1/15</div>
|
||
</div>
|
||
|
||
<!-- Related Change - ブランチタグ付き -->
|
||
<div class="mb-3 p-2.5 bg-blue-50 rounded-lg border border-blue-100">
|
||
<div class="flex items-center gap-2 mb-0.5">
|
||
<svg class="w-3.5 h-3.5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||
</svg>
|
||
<span class="text-xs font-medium text-blue-700">関連する変更</span>
|
||
<!--
|
||
ブランチタグの色（デフォルトブランチかどうかで判定）:
|
||
- デフォルトブランチ: bg-green-100 text-green-700, ドット bg-green-500
|
||
- fix/*: bg-orange-100 text-orange-700, ドット bg-orange-500
|
||
- docs/*: bg-purple-100 text-purple-700, ドット bg-purple-500
|
||
- その他全て: bg-blue-100 text-blue-700, ドット bg-blue-500
|
||
|
||
⚠️ ラベルは常にブランチ名をそのまま表示（main, feature/xxx, fix/xxx等）
|
||
-->
|
||
<div class="flex items-center gap-1 px-1.5 py-0.5 bg-green-100 rounded text-xs text-green-600 ml-auto">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-green-500"></div>
|
||
<span>{branch_name}</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-sm text-slate-700">{related_change_description}</div>
|
||
</div>
|
||
|
||
<!-- Topic Title -->
|
||
<div class="mb-2">
|
||
<h2 class="text-lg font-bold text-slate-900">動画プレイヤーの仕組み</h2>
|
||
</div>
|
||
|
||
<!-- Diagram (3ステップまでに収める) -->
|
||
<div class="mb-3 p-3 bg-slate-50 rounded-lg">
|
||
<div class="flex flex-col items-center gap-1.5">
|
||
<div class="px-3 py-1.5 bg-white rounded-lg border border-slate-200 text-sm text-slate-700">
|
||
動画ファイル（圧縮）
|
||
</div>
|
||
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
|
||
</svg>
|
||
<div class="px-3 py-1.5 bg-amber-100 rounded-lg border border-amber-200 text-sm text-amber-800">
|
||
デコーダー（解凍処理）
|
||
</div>
|
||
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
|
||
</svg>
|
||
<div class="px-3 py-1.5 bg-blue-100 rounded-lg border border-blue-200 text-sm text-blue-800">
|
||
画面に表示
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Explanation (コンパクトに) -->
|
||
<div class="flex-1 space-y-2">
|
||
<p class="text-sm text-slate-700 leading-relaxed">
|
||
動画は<span class="font-medium text-slate-900">圧縮された状態</span>で保存されており、再生時にリアルタイムで解凍しています。この処理が端末の性能に追いつかないと<span class="font-medium text-slate-900">カクつきやフリーズ</span>の原因になります。
|
||
</p>
|
||
<div class="p-2.5 bg-amber-50 rounded-lg border border-amber-100">
|
||
<div class="flex items-start gap-2">
|
||
<svg class="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
|
||
</svg>
|
||
<p class="text-sm text-slate-700">
|
||
<span class="font-medium">今回の修正:</span>
|
||
Android端末向けに解凍処理を最適化しました
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="border-t border-slate-200 pt-2.5 mt-3">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-1.5">
|
||
<div class="w-2 h-2 rounded-full bg-amber-500"></div>
|
||
<span class="text-xs text-slate-500">技術豆知識</span>
|
||
</div>
|
||
<div class="text-xs text-slate-400">Generated by Claude Code</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|