ProjectOne/summary.html at main · Dreeam00/ProjectOne · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>まとめ - Flutiger Aero風</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gradient-to-l from-blue-50 to-blue-300 text-gray-900 font-sans overflow-x-hidden min-h-screen">
  <!-- ナビゲーションバー -->
  <nav class="mt-4 flex flex-col items-center gap-2 w-screen p-5 bg-blue-900 md:flex-row md:justify-center md:gap-6">
    <a href="index.html" class="text-2xl text-white">トップ</a>
    <a href="research.html" class="text-2xl text-white">研究</a>
    <a href="creation.html" class="text-2xl text-white">製作</a>
    <a href="portal.html" class="text-2xl text-white">ポータル</a>
    <a href="summary.html" class="text-2xl text-white font-bold underline">まとめ</a>
  </nav>
  <div class="w-full min-h-[400px] bg-gradient-to-b from-blue-200 via-blue-400 to-blue-900 pt-8 pb-16 px-2 md:px-0">
    <div class="max-w-5xl mx-auto">
      <header class="mb-12">
        <h1 class="text-4xl md:text-6xl font-extrabold text-blue-900 drop-shadow-xl tracking-tight bg-gradient-to-r from-blue-700 via-blue-400 to-blue-700 bg-clip-text text-transparent mb-2">まとめ</h1>
        <p class="text-lg md:text-2xl text-blue-800/90 font-medium drop-shadow-sm">Flutiger Aero風デザインのまとめエリアです。<br>UIの進化や特徴、デザインのポイントなどを簡潔にまとめています。</p>
      </header>
      <section class="relative my-12 p-8 md:p-16 bg-gradient-to-br from-white/90 via-blue-100/80 to-blue-200/70 backdrop-blur-2xl rounded-3xl border border-blue-300 shadow-2xl overflow-hidden group transition-all duration-500">
        <div class="absolute left-0 top-0 w-2 h-full bg-gradient-to-b from-blue-400 via-blue-300 to-blue-100 rounded-l-3xl blur-sm opacity-70"></div>
        <div class="absolute right-8 top-8 w-24 h-24 bg-gradient-to-tr from-blue-300/60 to-white/0 rounded-full blur-2xl opacity-60 animate-pulse"></div>
        <div class="flex items-center gap-4 mb-6">
          <span class="w-10 h-10 flex items-center justify-center drop-shadow-lg">
            <svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10" fill="#e0f2fe"/>
              <path d="M8 12l2 2 4-4" stroke="#0ea5e9" stroke-width="2.5"/>
            </svg>
          </span>
          <h2 class="text-3xl md:text-5xl font-extrabold text-blue-900 drop-shadow-lg tracking-tight bg-gradient-to-r from-blue-700 via-blue-400 to-blue-700 bg-clip-text text-transparent">まとめテーマ</h2>
        </div>
        <p class="text-xl md:text-2xl text-blue-800 font-medium leading-relaxed drop-shadow-sm mb-6">
          UIデザインの進化、Aero/Aqua/Retroの特徴、現代的な再評価などをまとめています。
        </p>
        <ul class="list-disc pl-8 text-blue-900/90 text-lg space-y-2">
          <li>Flutiger Aero風の特徴と魅力</li>
          <p>Flutiger Aero風のデザインは、シンプルでありながら洗練された美しさを持ち、ユーザーに親しみやすい印象を与えるということがわかりました</p>
          <li>UIの歴史的変遷</li>
          <p>UIデザインは常に進化しており、AeroやAquaのようなスタイルは人によっては古いと考えられるけども、時代の変化と共に新しく再評価されています。</p>
          <li>現代Webへの応用</li>
            <p>現代のWebデザインにおいても、Flutiger Aero風の要素を取り入れることで、ユーザーに親しみやすく、かつ洗練された印象を与えることができます。</p>
          <li>今後の展望</li>
          <p>Flutiger Aero風のデザインは、今後も進化し続けるでしょう。新しい技術やトレンドが登場する中で、他のデザインと融合しながら、新たな価値を生み出すことが期待されます。</p>
        </ul>
        <div class="mt-8 flex justify-center">
          <a href="portal.html" class="group relative bg-white/30 hover:bg-white/60 transition-all duration-300 backdrop-blur-2xl rounded-2xl shadow-2xl border-2 border-blue-300/70 p-6 flex items-center gap-5 cursor-pointer overflow-hidden focus:ring-4 focus:ring-blue-200">
            <span class="flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-blue-300 to-blue-600 border border-blue-100 shadow-lg mr-2 overflow-hidden">
              <svg class="w-10 h-10" fill="none" stroke="#818cf8" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#ede9fe"/><path d="M12 8v8m-4-4h8" stroke="#6366f1" stroke-width="2.5"/></svg>
            </span>
            <div>
              <p class="text-blue-900 font-extrabold text-xl group-hover:text-blue-700 transition">ポータルへ</p>
              <p class="text-blue-800/90 text-sm">全ページ一覧・まとめ</p>
            </div>
          </a>
        </div>
      </section>
    </div>
  </div>
</body>
</html>