ProjectOne/index.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>デザインについての研究</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">
    <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-6xl mx-auto flex flex-col md:flex-row gap-8 md:gap-12">
        <!-- 左：大きなビジュアルとタイトル -->
        <div class="flex-1 flex flex-col items-center md:items-start justify-start">
          <div class="w-full bg-white/40 backdrop-blur-xl rounded-3xl shadow-3xl border-2 border-blue-300/70 p-8 md:p-14 mb-10 mt-4 transition-all duration-500">
            <h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold text-blue-900 mb-3 drop-shadow-xl tracking-tight bg-gradient-to-r from-blue-700 via-blue-400 to-blue-700 bg-clip-text text-transparent">Retro design and the Internet</h1>
            <p class="text-lg md:text-2xl text-blue-800/90 font-medium drop-shadow-sm">レトロデザインとインターネットの関係性を探る</p>
          </div>
          <img src="hero.png" alt="Hero" class="w-full max-w-md rounded-2xl shadow-2xl border-2 border-blue-200/70 bg-white/30 backdrop-blur-lg" />
        </div>
        <!-- 右：Aeroボタンカードエリア -->
        <div class="flex-1 flex flex-col gap-8 justify-start mt-8 md:mt-0">
          <a href="research.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">
              <img src="icon1.png" alt="icon1" class="w-full h-full object-contain" />
            </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>
            <span class="absolute right-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none">
              <svg class="w-7 h-7 text-blue-400 drop-shadow-glow animate-pulse" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
            </span>
            <span class="absolute inset-0 rounded-2xl pointer-events-none group-hover:shadow-[0_0_32px_8px_rgba(59,130,246,0.25)] transition-all duration-300"></span>
          </a>
          <a href="creation.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">
              <img src="icon2.png" alt="icon2" class="w-full h-full object-contain" />
            </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>
            <span class="absolute right-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none">
              <svg class="w-7 h-7 text-blue-400 drop-shadow-glow animate-pulse" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
            </span>
            <span class="absolute inset-0 rounded-2xl pointer-events-none group-hover:shadow-[0_0_32px_8px_rgba(59,130,246,0.25)] transition-all duration-300"></span>
          </a>
          <a href="#sect3" 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">
              <img src="icon3.png" alt="icon3" class="w-full h-full object-contain" />
            </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>
            <span class="absolute right-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none">
              <svg class="w-7 h-7 text-blue-400 drop-shadow-glow animate-pulse" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
            </span>
            <span class="absolute inset-0 rounded-2xl pointer-events-none group-hover:shadow-[0_0_32px_8px_rgba(59,130,246,0.25)] transition-all duration-300"></span>
          </a>
          <a href="Production-work.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">
              <img src="icon4.png" alt="icon4" class="w-full h-full object-contain" />
            </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>
            <span class="absolute right-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none">
              <svg class="w-7 h-7 text-blue-400 drop-shadow-glow animate-pulse" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
            </span>
            <span class="absolute inset-0 rounded-2xl pointer-events-none group-hover:shadow-[0_0_32px_8px_rgba(59,130,246,0.25)] transition-all duration-300"></span>
          </a>
        </div>
      </div>
    </div>
    <!-- ナビゲーションバー（Aeroデザイン） -->
    <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 space-x-50">
      <a href="#sect1" class="text-2xl text-white">目当て</a>
      <a href="#sect2" class="text-2xl text-white">経緯</a>
      <a href="#sect3" class="text-2xl text-white">予想</a>
      <a href="#sect4" class="text-2xl text-white">研究方法</a>
    </nav>
    <br>
    <!-- セクション1 -->
    <section id="sect1" class="relative max-w-5xl mx-auto 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">
        <svg class="w-10 h-10 text-blue-400 drop-shadow-lg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>
        <h2 class="text-4xl md:text-6xl 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 lg:text-3xl text-blue-800 font-medium leading-relaxed drop-shadow-sm">レトロデザインの研究を通じて、パソコンをもっとよく知り、<br>そこから学びを深め、新たなウェブデザインのベクトルを<br>生み出すことを目指します。</p>
    </section>
    <br>
    <!-- セクション2 -->
    <section id="sect2" class="relative max-w-5xl mx-auto my-12 p-8 md:p-16 bg-gradient-to-br from-blue-50/90 via-white/80 to-blue-200/60 backdrop-blur-2xl rounded-3xl border border-blue-200 shadow-2xl overflow-hidden group transition-all duration-500">
      <div class="absolute right-0 top-0 w-2 h-full bg-gradient-to-b from-blue-200 via-blue-400 to-blue-100 rounded-r-3xl blur-sm opacity-70"></div>
      <div class="absolute left-8 bottom-8 w-24 h-24 bg-gradient-to-tr from-blue-200/60 to-white/0 rounded-full blur-2xl opacity-60 animate-pulse"></div>
      <div class="flex items-center gap-4 mb-6">
        <svg class="w-10 h-10 text-blue-300 drop-shadow-lg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4"/><path d="M8 12h8"/></svg>
        <h2 class="text-4xl md:text-6xl font-extrabold text-blue-900 drop-shadow-lg tracking-tight bg-gradient-to-r from-blue-400 via-blue-700 to-blue-400 bg-clip-text text-transparent">経緯</h2>
      </div>
      <p class="text-xl md:text-2xl lg:text-3xl text-blue-800 font-medium leading-relaxed drop-shadow-sm">レトロデザインについて学ぶことで現代のデザインを見つめ直し、<br>新たな視点を得ることを目指します。</p>
    </section>
    <br>
    <!-- セクション3 -->
    <section id="sect3" class="relative max-w-5xl mx-auto my-12 p-8 md:p-16 bg-gradient-to-br from-blue-100/90 via-blue-50/80 to-white/70 backdrop-blur-2xl rounded-3xl border border-blue-100 shadow-2xl overflow-hidden group transition-all duration-500">
      <div class="absolute left-0 bottom-0 w-2 h-full bg-gradient-to-t from-blue-200 via-blue-400 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-100/60 to-white/0 rounded-full blur-2xl opacity-60 animate-pulse"></div>
      <div class="flex items-center gap-4 mb-6">
        <svg class="w-10 h-10 text-blue-400 drop-shadow-lg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4v16m8-8H4"/></svg>
        <h2 class="text-4xl md:text-6xl font-extrabold text-blue-900 drop-shadow-lg tracking-tight bg-gradient-to-r from-blue-300 via-blue-600 to-blue-300 bg-clip-text text-transparent">予想</h2>
      </div>
      <p class="text-xl md:text-2xl lg:text-3xl text-blue-800 font-medium leading-relaxed drop-shadow-sm">とてもシンプルなのかなと思っています、<br>なぜかというと今のデザインが完成形とした場合、<br>レトロデザインはまだ発展途上なのでシンプルと予想しました</p>
    </section>
    <br>
    <!-- セクション4 -->
    <section id="sect4" class="relative max-w-5xl mx-auto 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 right-0 bottom-0 w-2 h-full bg-gradient-to-t from-blue-400 via-blue-300 to-blue-100 rounded-r-3xl blur-sm opacity-70"></div>
      <div class="absolute left-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">
        <svg class="w-10 h-10 text-blue-400 drop-shadow-lg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4"/><path d="M12 8v8m-4-4h8"/></svg>
        <h2 class="text-4xl md:text-6xl 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 lg:text-3xl text-blue-800 font-medium leading-relaxed drop-shadow-sm">本研究では、Wayback Machineを活用して過去のウェブデザインを分析、その後レトロデザインの特性を明らかにし、<br>自分でそのデザインを作ってみることを目指します。</p>
    </section>
    <footer class="mt-12 text-center text-gray-600 bg-white/90 backdrop-blur-2xl p-6 shadow-2xl border border-blue-200">
      <p class="text-sm">© 2025 My Retro Design Research. All rights reserved.</p>
    </footer>
    <!-- 右下ポータルボタン -->
    <a href="portal.html" class="fixed md:sticky z-50 bottom-6 right-6 md:bottom-6 md:right-6 flex items-center gap-2 px-5 py-3 rounded-full bg-gradient-to-r from-blue-600 via-blue-400 to-blue-600 text-white font-bold shadow-xl border border-blue-200 backdrop-blur-lg hover:scale-105 hover:shadow-blue-400/50 transition-all duration-200" style="position:sticky; float:right;">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="#e0f2fe"/><path d="M12 8v4l3 3" stroke="#2563eb" stroke-width="2.5"/></svg>
      ポータルへ
    </a>
  </div>
</body>
</html>