84 lines
3.7 KiB
HTML
84 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
|
<meta name="googlebot" content="noindex, nofollow">
|
|
<meta property="og:title" content="<!-- TITLE -->">
|
|
<meta property="og:description" content="<!-- DESCRIPTION -->">
|
|
<meta property="og:type" content="article">
|
|
<title><!-- TITLE --></title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23FFFFFF'/><rect x='8' y='8' width='84' height='84' rx='14' fill='none' stroke='%233B82F6' stroke-width='4'/><circle cx='32' cy='40' r='10' fill='%233B82F6' opacity='0.8'/><circle cx='68' cy='40' r='10' fill='%2360A5FA' opacity='0.8'/><rect x='25' y='62' width='50' height='6' rx='3' fill='%2394A3B8' opacity='0.6'/><rect x='30' y='74' width='40' height='6' rx='3' fill='%2394A3B8' opacity='0.3'/></svg>">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
ads: {
|
|
bg: '#FFFFFF',
|
|
surface: '#F8FAFC',
|
|
hover: '#F1F5F9',
|
|
border: '#E2E8F0',
|
|
accent: '#3B82F6',
|
|
'accent-light': '#2563EB',
|
|
text: '#1E293B',
|
|
muted: '#64748B',
|
|
dim: '#94A3B8',
|
|
positive: '#10B981',
|
|
negative: '#EF4444',
|
|
warning: '#F59E0B',
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['"Noto Sans JP"', '"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Yu Gothic UI"', '"Meiryo"', 'sans-serif'],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@media print {
|
|
.no-print { display: none !important; }
|
|
body { border-top: none !important; }
|
|
.rounded-xl { break-inside: avoid; }
|
|
.md\:flex-row { flex-direction: row !important; }
|
|
.md\:hidden { display: none !important; }
|
|
.hidden.md\:block { display: block !important; }
|
|
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
|
|
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
|
|
.md\:mb-20 { margin-bottom: 5rem !important; }
|
|
.md\:py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
|
|
.bg-clip-text.text-transparent {
|
|
-webkit-background-clip: initial !important;
|
|
background-clip: initial !important;
|
|
color: #2563EB !important;
|
|
-webkit-text-fill-color: #2563EB !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-ads-bg text-slate-600 antialiased leading-relaxed border-t-4 border-ads-accent">
|
|
<div class="no-print max-w-3xl mx-auto px-5 pt-2 flex justify-end">
|
|
<button onclick="window.print()" class="flex items-center gap-1.5 text-xs text-ads-dim hover:text-ads-accent transition-colors cursor-pointer">
|
|
<i data-lucide="download" class="w-3.5 h-3.5"></i>
|
|
PDF
|
|
</button>
|
|
</div>
|
|
<main class="max-w-3xl mx-auto px-5 py-10 md:py-16">
|
|
<!-- CONTENT_START -->
|
|
|
|
<!-- CONTENT_END -->
|
|
</main>
|
|
<footer class="max-w-3xl mx-auto px-5 pb-10 pt-6 border-t border-ads-border/30">
|
|
<p class="text-xs text-ads-dim text-center">AI-Driven School の図解ツールで作成</p>
|
|
</footer>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
</html>
|