<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal WebGIS Projects</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* ─── TOKENS ─── */
        :root {
            --blue:    #2563EB;
            --blue-d:  #1D4ED8;
            --blue-l:  #EFF6FF;
            --blue-m:  rgba(37,99,235,.10);
            --navy:    #0F172A;
            --green:   #10B981;
            --green-l: #ECFDF5;
            --red:     #EF4444;
            --red-l:   #FEF2F2;
            --bg:      #EBF0F7;
            --surface: #FFFFFF;
            --border:  #E2E8F0;
            --border-l:#F1F5F9;
            --text-2:  #475569;
            --text-3:  #94A3B8;
            --sh:      0 4px 24px rgba(15,23,42,.10);
            --sh-lg:   0 20px 60px rgba(15,23,42,.18);
            --r:       16px;
            --r2:      12px;
            --r3:       8px;
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        
        html, body {
            height: 100%;
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--bg);
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* ─── ANIMATED BACKGROUND ─── */
        .bg-scene {
            position: fixed; inset: 0;
            background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 40%, #1D4ED8 80%, #2563EB 100%);
            z-index: 0;
            overflow: hidden;
        }

        /* Grid map lines */
        .bg-grid {
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size: 48px 48px;
            animation: gridPan 25s linear infinite;
        }
        @keyframes gridPan {
            0%   { transform: translate(0, 0); }
            100% { transform: translate(48px, 48px); }
        }

        /* Floating blobs */
        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(72px);
            opacity: 0.22;
            animation: blobFloat 12s ease-in-out infinite;
        }
        .blob-1 {
            width: 520px; height: 520px;
            background: #3B82F6;
            top: -180px; left: -140px;
            animation-delay: 0s;
        }
        .blob-2 {
            width: 380px; height: 380px;
            background: #10B981;
            bottom: -100px; right: -80px;
            animation-delay: -5s;
        }
        .blob-3 {
            width: 280px; height: 280px;
            background: #6366F1;
            top: 40%; left: 55%;
            animation-delay: -9s;
        }
        @keyframes blobFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33%       { transform: translate(18px, -22px) scale(1.04); }
            66%       { transform: translate(-12px, 14px) scale(0.97); }
        }

        /* Floating map pin particles */
        .particle {
            position: absolute;
            width: 8px; height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
            animation: particleDrift linear infinite;
        }
        @keyframes particleDrift {
            0%   { transform: translateY(100vh) scale(0); opacity: 0; }
            10%  { opacity: 1; }
            90%  { opacity: 1; }
            100% { transform: translateY(-80px) scale(1.2); opacity: 0; }
        }

        /* ─── LAYOUT ─── */
        .page {
            position: relative; z-index: 10;
            width: 100%;
            padding: 40px 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            justify-content: center;
        }

        /* ── Header ── */
        .header {
            text-align: center;
            margin-bottom: 48px;
            color: #ffffff;
            animation: fadeInDown 0.6s ease-out both;
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .header h1 {
            font-size: 32px;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        .header p {
            color: rgba(255,255,255,0.8);
            font-size: 16px;
            font-weight: 500;
        }

        /* ── Grid Container ── */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 28px;
            width: 100%;
            max-width: 800px;
        }

        /* ── Cards ── */
        .card {
            background: rgba(255,255,255,0.95);
            border-radius: 24px;
            padding: 32px 28px;
            text-decoration: none;
            color: var(--navy);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--sh-lg), 0 0 0 1px rgba(255,255,255,0.12);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(12px);
            animation: cardIn 0.55s cubic-bezier(0.34,1.4,0.64,1) both;
        }
        .card:nth-child(2) {
            animation-delay: 0.1s;
        }
        
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(32px) scale(0.94); }
            to   { opacity: 1; transform: translateY(0)   scale(1); }
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 24px 48px rgba(0,0,0,0.2), 0 0 0 1px var(--blue);
        }

        /* ── Card Elements ── */
        .icon-wrap {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            transition: transform 0.3s ease;
        }

        .icon-wrap svg {
            width: 32px;
            height: 32px;
        }

        .c1 .icon-wrap { background: var(--blue-l); color: var(--blue); box-shadow: 0 8px 16px rgba(37,99,235,0.15); }
        .c2 .icon-wrap { background: var(--green-l); color: var(--green); box-shadow: 0 8px 16px rgba(16,185,129,0.15); }

        .card:hover .icon-wrap {
            transform: scale(1.1) rotate(-5deg);
        }

        .card h2 {
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: -0.3px;
        }

        .card p {
            font-size: 14px;
            color: var(--text-2);
            line-height: 1.6;
            margin-bottom: 28px;
            flex: 1;
            font-weight: 500;
        }

        .btn-go {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 700;
            padding: 10px 20px;
            border-radius: 10px;
            transition: all 0.2s;
        }

        .c1 .btn-go { 
            color: white; 
            background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
            box-shadow: 0 4px 14px rgba(37,99,235,0.35);
        }
        .c2 .btn-go { 
            color: white; 
            background: linear-gradient(135deg, var(--green) 0%, #059669 100%);
            box-shadow: 0 4px 14px rgba(16,185,129,0.35);
        }

        .card:hover .btn-go {
            gap: 12px;
            transform: translateY(-2px);
        }

        .btn-go svg {
            width: 18px;
            height: 18px;
            transition: transform 0.2s;
        }
        .card:hover .btn-go svg {
            transform: translateX(4px);
        }

        /* ── Footer Info ── */
        .footer {
            margin-top: 60px;
            animation: fadeInDown 0.6s ease-out both;
            animation-delay: 0.3s;
        }

        .developer-badge {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 12px 24px;
            border-radius: 100px;
            backdrop-filter: blur(12px);
            color: white;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .developer-badge:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .dev-icon {
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dev-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .dev-name {
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.5px;
        }

        .dev-nim {
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
        }

    </style>
</head>
<body>

    <!-- Animated Background -->
    <div class="bg-scene">
        <div class="bg-grid"></div>
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        <div class="blob blob-3"></div>

        <!-- Floating particles -->
        <div class="particle" style="left:12%;animation-duration:9s;animation-delay:0s;width:5px;height:5px;"></div>
        <div class="particle" style="left:25%;animation-duration:13s;animation-delay:-3s;width:8px;height:8px;"></div>
        <div class="particle" style="left:38%;animation-duration:8s;animation-delay:-6s;width:4px;height:4px;"></div>
        <div class="particle" style="left:52%;animation-duration:11s;animation-delay:-1s;width:6px;height:6px;"></div>
        <div class="particle" style="left:67%;animation-duration:14s;animation-delay:-8s;width:5px;height:5px;"></div>
        <div class="particle" style="left:80%;animation-duration:10s;animation-delay:-4s;width:9px;height:9px;"></div>
        <div class="particle" style="left:91%;animation-duration:7s;animation-delay:-2s;width:4px;height:4px;"></div>
    </div>

    <div class="page">
        <div class="header">
            <h1>GIS Project Portfolio</h1>
            <p>Sistem Informasi Geografis Terintegrasi</p>
        </div>

        <div class="grid-container">
            
            <a href="webgisdatakemiskinan/" class="card c1">
                <div class="icon-wrap">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
                        <circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 00-3-3.87"/>
                        <path d="M16 3.13a4 4 0 010 7.75"/>
                    </svg>
                </div>
                <h2>WebGIS Pemetaan Sosial</h2>
                <p>Sistem pemetaan untuk mendata sebaran warga kurang mampu, rumah ibadah, analisa zona blind-spot, serta manajemen log distribusi donasi dan bantuan sosial.</p>
                <div class="btn-go">
                    Buka Aplikasi
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                </div>
            </a>

            <a href="webgisspbu-parsiltanah/" class="card c2">
                <div class="icon-wrap">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                </div>
                <h2>WebGIS SPBU & Parsil Tanah</h2>
                <p>Sistem informasi geografis untuk memetakan lokasi jaringan SPBU beserta batas parsil tanah (poligon) untuk manajemen tata ruang dan aset wilayah.</p>
                <div class="btn-go">
                    Buka Aplikasi
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                </div>
            </a>

        </div>

        <div class="footer">
            <div class="developer-badge">
                <div class="dev-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
                        <circle cx="12" cy="7" r="4"/>
                    </svg>
                </div>
                <div class="dev-info">
                    <span class="dev-name">Novie</span>
                    <span class="dev-nim">NIM: D1041231015</span>
                </div>
            </div>
        </div>

    </div>

</body>
</html>