geometric-solid-gallery/index.html at main · mimisukeMaster/geometric-solid-gallery · 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
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ホーム - 生成立体造形展</title>
    <link rel="icon" href="data:image/svg+xml,<svg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M 16 4 L 27 10 V 22 L 16 28 L 5 22 V 10 L 16 4 Z M 5 10 L 16 16 L 27 10 M 16 16 V 28' stroke='%23f3d773' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
</head>
<body class="bg-stone-800 text-white">

    <canvas id="bg-canvas"></canvas>

    <header class="w-full pt-4 pb-6 px-4 md:pb-8 md:px-12 flex justify-between items-center fixed top-0 left-0 z-20">
        <div class="flex items-center gap-4 md:gap-10">
            <a href="index.html" class="text-3xl md:text-5xl font-bold tracking-wider">生成立体造形展</a>
            <a href="about.html" class="text-xl md:text-2xl underline hover:text-gray-300 transition duration-300 ease-in-out inline-block hover:scale-110">概要</a>
        </div>
        <a href="https://github.com/mimisukeMaster/geometric-solid-gallery" target="_blank" rel="noopener noreferrer" class="icon-link" aria-label="GitHub profile">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
            </svg>
        </a>
    </header>

    <main id="portfolio" class="flex flex-wrap content-start justify-center p-4 md:p-8 pt-28 md:pt-40 pb-16">

        <div class="w-11/12 md:w-3/5 lg:w-7/12 flex-shrink-0 relative px-8 md:px-7">
            <div id="image-viewer" class="relative">
                <div class="image-container bg-black rounded-lg">
                    <img id="main-image" src="" alt="Main artwork image" class="main-image rounded-lg">
                </div>
                <div id="prev-work" class="arrow arrow-left">◀</div>
                <div id="next-work" class="arrow arrow-right">▶</div>
            </div>
            <div id="thumbnail-container" class="thumbnail-container"></div>
            <div id="pagination-dots" class="flex justify-center items-center gap-3 mt-4 h-6"></div>
            <p id="image-caption" class="text-center text-gray-400 h-6"></p>
        </div>

        <div class="w-full md:w-2/5 lg:w-5/12 mt-8 md:mt-0 md:pl-8">
            <h1 id="work-title" class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4"></h1>
            <p id="work-description" class="text-base leading-relaxed text-gray-300"></p>
            <div id="work-3d-button-container" class="mt-6">
                <button id="view-3d-button" class="view-3d-button">
                    <svg width="20" height="20" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                        <path d="M 16 4 L 27 10 V 22 L 16 28 L 5 22 V 10 L 16 4 Z M 5 10 L 16 16 L 27 10 M 16 16 V 28" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span>3Dで見る</span>
                </button>
            </div>
            <div id="work-link-container" class="mt-6"></div>
        </div>

        <div id="node-section" class="w-full mt-16 px-4">
            <h2 class="text-2xl font-bold mb-4 text-gray-300">この作品を構成するジオメトリノード</h2>
            <p class="text-base leading-relaxed text-gray-300 pb-1">🔍クリックで拡大</p>
            <div class="bg-emerald-900 rounded-lg p-0.5">
                <img id="node-image" src="" alt="Geometry Node setup for the artwork" class="w-full h-auto rounded-md">
            </div>
        </div>
    </main>

    <div id="modal" class="hidden fixed top-0 left-0 z-50 w-full h-full bg-black/90 flex items-center justify-center">
        <span id="modal-close" class="absolute top-5 right-8 text-white text-5xl font-bold cursor-pointer hover:text-gray-400 transition-colors">&times;</span>
        <img id="modal-image" src="" alt="Enlarged geometry node setup" class="max-w-[90%] max-h-[90%] object-contain">
    </div>

    <div id="viewer-modal" class="hidden fixed top-0 left-0 z-40 w-full h-full bg-black/90 flex items-center justify-center">        <span id="viewer-close" class="absolute top-5 right-8 text-white text-5xl font-bold cursor-pointer hover:text-gray-400 transition-colors z-50">&times;</span>
        <canvas id="viewer-canvas" class="max-w-[90%] max-h-[90%] rounded-lg"></canvas>
        <div id="viewer-loader" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-xl">
            読み込み中...
        </div>
    </div>

    <footer class="bg-stone-900 p-6 w-full bottom-0 text-gray-400 text-center text-sm md:text-base">
        © 2025 mimisukeMaster. All Rights Reserved.
    </footer>
    <script src="script.js"></script>
</body>
</html>