nandemo2026/index.html at main · bonsai/nandemo2026 · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>なんでも2026 おしながき</title>
<style>
    body {
        font-family: sans-serif;
        max-width: 800px;
        margin: 2rem auto;
        padding: 0 1rem;
        position: relative;
        min-height: 100vh;
        line-height: 1.6;
    }
    .bg-image {
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background: url('https://github.com/bonsai/nandemo2026/blob/main/ChatGPT%20Image%202026%E5%B9%B45%E6%9C%886%E6%97%A5%2005_03_58.png?raw=true') no-repeat right center;
        background-size: contain;
        opacity: var(--bg-opacity, 0.08);
        z-index: -1;
        pointer-events: none;
        transition: opacity 0.1s linear;
    }

    h1 { border-bottom: 2px solid #333; padding-bottom: .5rem; }
    .project {
        margin: 1.5rem 0;
        padding: 1rem 110px 1rem 1rem;   /* 右側に QR 用の余白 */
        border: 1px solid #ddd;
        border-radius: 8px;
        position: relative;            /* 絶対配置の基準になる */
        text-align: left;
    }
    .project h2 { margin-top: 0; }

    .tag { display: inline-block; background:#eee; padding:.2rem .5rem; border-radius:4px; font-size:.9rem; margin-right:.5rem; }

    a { color:#0366d6; text-decoration:none; }
    a:hover { text-decoration:underline; }

    /* ---------------- QRコード ---------------- */
    .qr-wrapper {
        position: absolute;
        top: 50%;
        right: 10px;
        width: 80px;
        height: 80px;
        background:#fff;
        padding:4px;
        box-shadow:0 0 4px rgba(0,0,0,.2);
        border-radius:4px;
        transform: translateY(-50%);
        display: flex;               /* デフォルトは非表示にするのでここは書いておく */
        justify-content:center;
        align-items:center;

        /* ★ ここで非表示に設定 ★ */
        display: none;               /* デフォルト＝非表示 */
    }

    /* ホバーしたときだけ表示 */
    .project:hover .qr-wrapper {
        display: flex;               /* カーソルがカードに乗ったら出す */
    }

    .qr-wrapper img {
        width:100%;
        height:100%;
        display:block;
    }
</style>
</head>
<body>
<div class="bg-image"></div>

<h1>なんでも2026 ボンサイアップス　おしながき</h1>
<p>2026年のAIデモプロジェクト集</p>

<div class="project">
    <h2>挨拶音声 TTS/Suno</h2>
    <span class="tag">TTS</span><span class="tag">Suno</span>
    <p>挨拶用の音声ファイル</p>
    <audio controls src="%E6%8C%A8%E6%8B%B6.mp3"></audio><br>
    <a href="%E6%8C%A8%E6%8B%B6.mp3">音声をダウンロード</a>
</div>

<div class="project">
    <h2>アプリ　いくつにみえる？ VLM</h2>
    <span class="tag">VLM</span>
    <p>画像から数を認識するアプリ</p>
    <a href="https://ikutsu.onrender.com/">アプリを開く</a>
</div>

<div class="project">
    <h2>喜怒哀楽判定ゲーム mediapipe/LLM</h2>
    <span class="tag">mediapipe</span><span class="tag">LLM</span>
    <p>表情から感情を判定するゲーム</p>
    <a href="https://kidoairaku.onrender.com/">ゲームを開く</a>
</div>

<div class="project">
    <h2>夢をわけるアプリ localLLM</h2>
    <span class="tag">localLLM</span>
    <p>ローカルLLMを使った夢分解アプリ（要ローカル起動）</p>
    <a href="http://localhost:3000">ローカルで開く</a>
</div>

<div class="project">
    <h2>夢日記SFが読める夢百夜　localLLM</h2>
    <span class="tag">localLLM</span><span class="tag">SF</span>
    <p>夢日記をSFとして読めるアプリ</p>
    <a href="http://yume-hyakuya.onrender.com/">アプリを開く</a>
</div>

<!-- ★----- ここから新規追加（卒アル） -----★ -->
<div class="project">
    <h2>卒アル アルバム</h2>
    <span class="tag">卒アル</span>
    <p>卒業アルバムのページです。思い出の写真やコメントをご覧ください。</p>
    <a href="sotuwo/woman_graduation_album.html">卒アルを見る</a>
</div>
<!-- ★----- ここまで新規追加 -----★ -->

<div class="project">
    <h2>おしゃれてれびyoutube</h2>
    <span class="tag">YouTube</span>
    <p>YouTubeチャンネル「おしゃれてれび」</p>
    <a href="https://www.youtube.com/@kanalvideo/">チャンネルを見る</a>
</div>

<div class="project">
    <h2>X.com v0n5ai</h2>
    <span class="tag">X</span><span class="tag">SNS</span>
    <p>X.comアカウント</p>
    <a href="https://x.com/v0n5ai">X.comを開く</a>
</div>

<script>
/* --------------------------------------------------------------
 *  1️⃣ 背景画像の濃さ（opacity）をスクロール位置に合わせて変える
 * -------------------------------------------------------------- */
(function () {
    const bg = document.querySelector('.bg-image');
    const MIN_OPACITY = 0.08;
    const MAX_OPACITY = 0.48;
    let ticking = false;

    function updateOpacity() {
        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
        const scrollY   = window.scrollY || window.pageYOffset;
        const progress  = docHeight > 0 ? scrollY / docHeight : 0;
        const newOpacity = MIN_OPACITY + progress * (MAX_OPACITY - MIN_OPACITY);
        bg.style.setProperty('--bg-opacity', newOpacity.toFixed(3));
        ticking = false;
    }

    function onScroll() {
        if (!ticking) {
            window.requestAnimationFrame(updateOpacity);
            ticking = true;
        }
    }

    window.addEventListener('scroll', onScroll);
    updateOpacity();   // 初期表示
})();

/* --------------------------------------------------------------
 *  2️⃣ 各リンクを QR コード化してカード内右側に配置
 * -------------------------------------------------------------- */
(function () {
    const QR_BASE = 'https://chart.googleapis.com/chart?chs=80x80&cht=qr&chl=';

    document.querySelectorAll('.project').forEach(project => {
        const link = project.querySelector('a[href]');
        if (!link) return;                     // リンクが無ければスキップ

        const url    = link.getAttribute('href');
        const imgSrc = QR_BASE + encodeURIComponent(url);

        const wrapper = document.createElement('div');
        wrapper.className = 'qr-wrapper';

        const img = document.createElement('img');
        img.src = imgSrc;
        img.alt = `QR code for ${url}`;

        wrapper.appendChild(img);
        project.appendChild(wrapper);           // 絶対配置のまま追加
    });
})();
</script>
</body>
</html>