Beranda
Design

More Basic Card Member Design

ALEXANDER RYZEN
PB-B-8877-22
PISBON.NET
SARAH CONNOR
PB-BR-5544-11
PISBON.NET
JOHN SILVER
PB-S-1122-33
PISBON.NET
GOLDEN KING
PB-G-9988-77
PISBON.NET
ULTIMATE ALPHA
PB-P-6655-44
PISBON.NET

Kode HTML & CSS & JavaScript (untuk Postingan Blogger)

Pastikan kamu memasukkan ini di mode "Tampilan HTML" pada editor Blogger.

HTML
<div class="card-section-wrapper">

  <style>
    /* Global Styles for the Card Section - SCOPED CSS */
    .card-section-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 25px; /* Increased gap between cards */
      justify-content: center;
      padding: 30px; /* More padding for the section */
      background: #0a0a0e; /* Darker background for the entire section */
      border-radius: 18px;
      font-family: 'Poppins', sans-serif; /* A modern font */
      color: white;
      text-shadow: 0 0 5px rgba(0,0,0,0.3); /* Slight text shadow for readability */
    }

    /* Base Card Styling */
    .pisbon-card {
      width: 330px; /* Slightly larger for more detail */
      height: 205px; /* Adjust height to maintain aspect ratio */
      border-radius: 18px;
      position: relative;
      padding: 20px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.4s ease-in-out; /* Smooth transition for hover effects */
      background: rgba(255, 255, 255, 0.08); /* Base for glass effect */
      backdrop-filter: blur(12px); /* Glassmorphism effect */
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    }

    .pisbon-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
    }

    /* Card header with Logo and Level SVG */
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .card-logo {
      font-weight: bold;
      font-size: 1.5rem;
      letter-spacing: 1px;
      color: #00f2ff; /* Pisbon color */
    }
    .level-svg {
      width: 40px;
      height: 40px;
      filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
    }
    .level-svg path { fill: currentColor; } /* Allow color change via CSS */

    /* Member Info */
    .member-info {
      text-align: left;
      margin-bottom: 15px;
    }
    .member-info .name {
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #fff;
    }
    .member-info .card-number {
      font-family: 'Share Tech Mono', monospace; /* Futuristic monospaced font */
      font-size: 0.9rem;
      letter-spacing: 2px;
      opacity: 0.8;
      margin-top: 5px;
    }

    /* Footer with Barcode and URL */
    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    .barcode-container canvas {
      max-width: 100px; /* Adjust barcode size */
      height: auto;
      background: white; /* Barcode needs white background */
      padding: 2px;
      border-radius: 3px;
    }
    .pisbon-url {
      font-size: 0.7rem;
      color: #00f2ff;
      text-decoration: none;
      align-self: flex-end; /* Align to bottom */
      padding-bottom: 5px;
      letter-spacing: 0.5px;
      filter: drop-shadow(0 0 3px #00f2ff);
    }

    /* --- LEVEL SPECIFIC STYLES --- */

    /* Level 1: Basic */
    .level-basic {
      background: linear-gradient(135deg, #2c3e50, #0a0a0e);
      box-shadow: 0 0 10px rgba(44,62,80,0.5);
    }
    .level-basic .level-svg { color: #8899a6; } /* Grey */

    /* Level 2: Bronze */
    .level-bronze {
      background: linear-gradient(135deg, #4e342e, #1a1a1a);
      box-shadow: 0 0 15px rgba(78,52,46,0.6);
    }
    .level-bronze .level-svg { color: #cd7f32; } /* Bronze */

    /* Level 3: Silver */
    .level-silver {
      background: linear-gradient(135deg, #3c4f6b, #1a1a1a);
      box-shadow: 0 0 20px rgba(192,192,192,0.6);
    }
    .level-silver .level-svg { color: #c0c0c0; } /* Silver */

    /* Level 4: Gold */
    .level-gold {
      background: linear-gradient(135deg, #5c4a16, #1a1a1a);
      box-shadow: 0 0 25px rgba(255,215,0,0.7);
    }
    .level-gold .level-svg { color: #ffd700; } /* Gold */

    /* Level 5: Platinum */
    .level-platinum {
      background: linear-gradient(135deg, #330867, #30cfd0); /* A vibrant gradient */
      box-shadow: 0 0 30px rgba(48,207,208,0.8);
    }
    .level-platinum .level-svg { color: #00f2ff; } /* Platinum/Cyan */

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .card-section-wrapper { padding: 20px 10px; }
      .pisbon-card { width: 90%; max-width: 350px; height: auto; min-height: 200px; }
    }
  </style>

  <div class="pisbon-card level-basic">
    <div class="card-header">
      <div class="card-logo">PISBON</div>
      <svg class="level-svg" viewBox="0 0 24 24">
        <path d="M12 2L1 21h22L12 2zm0 3.86L18.42 19H5.58L12 5.86z"/>
      </svg>
    </div>
    <div class="member-info">
      <div class="name">ALEXANDER RYZEN</div>
      <div class="card-number">PB-B-8877-22</div>
    </div>
    <div class="card-footer">
      <div class="barcode-container" data-barcode-value="PB-B-8877-22"></div>
      <a href="https://www.pisbon.net" target="_blank" class="pisbon-url">PISBON.NET</a>
    </div>
  </div>

  <div class="pisbon-card level-bronze">
    <div class="card-header">
      <div class="card-logo">PISBON</div>
      <svg class="level-svg" viewBox="0 0 24 24">
        <path d="M12 2l-5 5-7-7v20h24V0h-7l-5 5zM4 19V7l5-5h6l5 5v12H4z"/>
      </svg>
    </div>
    <div class="member-info">
      <div class="name">SARAH CONNOR</div>
      <div class="card-number">PB-BR-5544-11</div>
    </div>
    <div class="card-footer">
      <div class="barcode-container" data-barcode-value="PB-BR-5544-11"></div>
      <a href="https://www.pisbon.net" target="_blank" class="pisbon-url">PISBON.NET</a>
    </div>
  </div>

  <div class="pisbon-card level-silver">
    <div class="card-header">
      <div class="card-logo">PISBON</div>
      <svg class="level-svg" viewBox="0 0 24 24">
        <path d="M12 2c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1s1-.45 1-1V3c0-.55-.45-1-1-1zm0 18c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1s-1 .45-1 1v6c0 .55.45 1 1 1zm-7-9v-2c0-.55-.45-1-1-1s-1 .45-1 1v2c0 .55.45 1 1 1s1-.45 1-1zm14 0v-2c0-.55-.45-1-1-1s-1 .45-1 1v2c0 .55.45 1 1 1s1-.45 1-1zM7.4 5.9L8 6.5l.7-.7c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L9.4 8l-.7.7c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L7.4 5.9zM15.9 7.3l.7-.7c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L16.6 8l-.7-.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L15.9 7.3zM4.5 16.6L5.2 17l-.7.7c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L6.6 18l.7-.7c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L4.5 16.6zm10.9-1.4l-.7-.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L15.2 17l.7.7c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L15.9 15.2z"/>
      </svg>
    </div>
    <div class="member-info">
      <div class="name">JOHN SILVER</div>
      <div class="card-number">PB-S-1122-33</div>
    </div>
    <div class="card-footer">
      <div class="barcode-container" data-barcode-value="PB-S-1122-33"></div>
      <a href="https://www.pisbon.net" target="_blank" class="pisbon-url">PISBON.NET</a>
    </div>
  </div>

  <div class="pisbon-card level-gold">
    <div class="card-header">
      <div class="card-logo">PISBON</div>
      <svg class="level-svg" viewBox="0 0 24 24">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
      </svg>
    </div>
    <div class="member-info">
      <div class="name">GOLDEN KING</div>
      <div class="card-number">PB-G-9988-77</div>
    </div>
    <div class="card-footer">
      <div class="barcode-container" data-barcode-value="PB-G-9988-77"></div>
      <a href="https://www.pisbon.net" target="_blank" class="pisbon-url">PISBON.NET</a>
    </div>
  </div>

  <div class="pisbon-card level-platinum">
    <div class="card-header">
      <div class="card-logo">PISBON</div>
      <svg class="level-svg" viewBox="0 0 24 24">
        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.76-7 8.94V12H5V7.96l7-3.01v6.04z"/>
      </svg>
    </div>
    <div class="member-info">
      <div class="name">ULTIMATE ALPHA</div>
      <div class="card-number">PB-P-6655-44</div>
    </div>
    <div class="card-footer">
      <div class="barcode-container" data-barcode-value="PB-P-6655-44"></div>
      <a href="https://www.pisbon.net" target="_blank" class="pisbon-url">PISBON.NET</a>
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script>
  // This script will find all barcode containers and generate a barcode for each
  document.addEventListener('DOMContentLoaded', function() {
    const barcodeContainers = document.querySelectorAll('.barcode-container');
    barcodeContainers.forEach(container => {
      const barcodeValue = container.getAttribute('data-barcode-value');
      if (barcodeValue) {
        const canvas = document.createElement('canvas');
        container.appendChild(canvas);
        JsBarcode(canvas, barcodeValue, {
          format: "CODE128", // Standard barcode format
          displayValue: false, // Don't show the text below the barcode
          height: 30, // Adjust barcode height
          width: 1.5, // Adjust bar width
          margin: 0,
          background: "#ffffff", // Barcode background
          lineColor: "#000000" // Barcode line color
        });
      }
    });
  });
</script>

Penjelasan dan Fitur Utama:

  1. 5 Level yang Berbeda:

    • Basic: Desain minimalis, warna gelap, SVG segitiga.

    • Bronze: Nuansa cokelat, SVG perisai.

    • Silver: Nuansa abu-abu/biru, SVG bintang-bintang.

    • Gold: Dominasi keemasan, SVG bintang besar.

    • Platinum: Gradient futuristik (ungu-biru), SVG berlian.

  2. Desain Futuris:

    • Glassmorphism: Efek kaca transparan dengan backdrop-filter: blur().

    • Shadows & Glows: Menggunakan box-shadow untuk memberikan kedalaman dan efek cahaya.

    • Modern Typography: Menggunakan font 'Poppins' dan 'Share Tech Mono' (membutuhkan Google Fonts, tapi browser akan fallback ke sans-serif jika tidak ada).

    • Hover Effect: Setiap kartu akan sedikit terangkat dan bayangannya menjadi lebih gelap saat di-hover.

  3. SVG Sebagai Indikator Level:

    • Setiap level memiliki SVG unik yang merepresentasikan statusnya (segitiga, perisai, bintang, berlian).

    • Warna SVG diatur melalui currentColor sehingga bisa diubah dengan mudah di CSS (.level-svg { color: ...; }).

  4. Nama Anggota & Nomor Kartu:

    • Setiap kartu memiliki placeholder untuk NAMA ANGGOTA dan NOMOR KARTU. Kamu bisa menggantinya.

  5. Barcode Dinamis:

    • Menggunakan library JsBarcode (di-load dari CDN) untuk menghasilkan barcode.

    • data-barcode-value pada div barcode-container digunakan untuk mengambil nilai barcode secara otomatis oleh JavaScript.

    • Barcode tampil dengan latar belakang putih agar bisa discan.

  6. URL PISBON.NET:

    • Link ke https://www.pisbon.net diletakkan di footer setiap kartu.

  7. Scoped CSS & JS untuk Blogger:

    • Seluruh <style> dan <script> dibungkus dalam div.card-section-wrapper dan diletakkan di dalam postingan Blogger. Ini akan meminimalkan konflik dengan tema blog utama.

Cara Penggunaan di Blogger:

  1. Buka editor postingan baru di Blogger.

  2. Beralih ke mode "Tampilan HTML" (ikon pensil/<>).

  3. Copy-paste seluruh kode di atas ke dalam editor.

  4. Ganti nama dan nomor kartu sesuai keinginanmu.

  5. Simpan atau Pratinjau untuk melihat hasilnya.

Semoga ini sesuai dengan yang kamu inginkan!


Related Posts:
Thank you for your visit. Support Pisbon™

Posting Komentar