PHP WebShell

Текущая директория: /var/www/bitcardoApp/user/giftcards

Просмотр файла: buy_giftcard.php

<?php
// user/giftcards/buy_giftcard.php
include '../common/header.php';
?>

<div class="container mt-3">
  <div class="row">
    <?php include '../common/nav.php'; ?>

    <main class="col-md-9 col-lg-10 px-md-5 mb-5">
      <?php include '../common/page-header.php'; ?>

      <div class="row justify-content-center">
        <div class="col-12 col-lg-9">

          <!-- Hero -->
        <div class="container p-2 p-md-2 position-relative">

            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-3">
            <div>
                <div class="d-inline-flex align-items-center gap-2 mb-2">
                <span class="badge rounded-pill bg-warning text-dark px-3 py-2">
                    Coming Soon
                </span>
                <span class="badge rounded-pill bg-light text-dark border px-3 py-2">
                    Buy Giftcard
                </span>
                </div>

                <h3 class="fw-bold mb-1">Buy Giftcards Seamlessly</h3>
                <div class="text-muted">
                We’re building a fast, secure giftcard marketplace inside Bitcardo—built for Nigerian users.
                </div>
            </div>

            <div class="text-md-end">
                <div class="text-muted small mb-1">Expected launch</div>
                <div class="fw-bold" id="launchEta">Very soon</div>
            </div>
            </div>

            <div class="row g-3 mt-2">
            <div class="col-12 col-md-7">
                <div class="bg-light border rounded-4 p-3 p-md-4 h-100">
                <h6 class="fw-bold mb-2">What you’ll be able to do</h6>

                <div class="d-grid gap-2">
                    <div class="d-flex gap-2 align-items-start">
                    <div class="mt-1">
                        <span class="badge bg-primary-subtle text-primary border">1</span>
                    </div>
                    <div>
                        <div class="fw-semibold">Choose a brand & card type</div>
                        <div class="text-muted small">Amazon, iTunes, Steam, Google Play, and more.</div>
                    </div>
                    </div>

                    <div class="d-flex gap-2 align-items-start">
                    <div class="mt-1">
                        <span class="badge bg-primary-subtle text-primary border">2</span>
                    </div>
                    <div>
                        <div class="fw-semibold">Pay with NGN or crypto</div>
                        <div class="text-muted small">Pay from your wallet with instant confirmation.</div>
                    </div>
                    </div>

                    <div class="d-flex gap-2 align-items-start">
                    <div class="mt-1">
                        <span class="badge bg-primary-subtle text-primary border">3</span>
                    </div>
                    <div>
                        <div class="fw-semibold">Receive your giftcard instantly</div>
                        <div class="text-muted small">Redeem codes delivered securely in-app.</div>
                    </div>
                    </div>

                    <div class="d-flex gap-2 align-items-start">
                    <div class="mt-1">
                        <span class="badge bg-primary-subtle text-primary border">4</span>
                    </div>
                    <div>
                        <div class="fw-semibold">Track history & receipts</div>
                        <div class="text-muted small">All purchases stored for easy reference.</div>
                    </div>
                    </div>
                </div>

                <hr class="my-3">

                <div class="d-flex flex-wrap gap-2">
                    <span class="badge bg-light text-dark border">Secure delivery</span>
                    <span class="badge bg-light text-dark border">Fraud checks</span>
                    <span class="badge bg-light text-dark border">Instant confirmation</span>
                    <span class="badge bg-light text-dark border">24/7 availability</span>
                </div>
                </div>
            </div>

            <div class="col-12 col-md-5">
                <div class="border rounded-4 p-3 p-md-4 h-100">
                <h6 class="fw-bold mb-2">Get notified at launch</h6>
                <div class="text-muted small mb-3">
                    Drop your email and we’ll notify you once Buy Giftcard goes live.
                </div>

                <!-- UI-only form (no backend changes) -->
                <form id="waitlistForm" novalidate>
                    <div class="mb-2">
                    <label class="form-label fw-semibold">Email</label>
                    <input type="email" class="form-control" id="waitlistEmail"
                            placeholder="you@example.com" required>
                    </div>

                    <div class="mb-3">
                    <label class="form-label fw-semibold">Interest</label>
                    <select class="form-select" id="waitlistInterest">
                        <option value="all">All giftcards</option>
                        <option value="shopping">Shopping</option>
                        <option value="gaming">Gaming</option>
                        <option value="subscriptions">Subscriptions</option>
                    </select>
                    <div class="form-text">This does not submit anywhere yet.</div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 fw-bold" id="notifyBtn">
                    Notify me
                    </button>

                    <div class="alert alert-success mt-3 mb-0 d-none" id="waitlistOk">
                    Noted. We’ll notify you at launch.
                    </div>
                </form>

            </div>
            </div>

            <!-- Decorative strip -->
            <div class="position-absolute top-0 end-0 p-3 d-none d-md-block">
                
            </div>

        </div>

          <!-- Secondary section -->
          <div class="row g-3 mt-3">
            <div class="col-12 col-md-4">
              <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                  <div class="fw-bold mb-1">Better rates</div>
                  <div class="text-muted small">Competitive pricing across popular brands.</div>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-4">
              <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                  <div class="fw-bold mb-1">Instant delivery</div>
                  <div class="text-muted small">Secure code delivery immediately after payment.</div>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-4">
              <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                  <div class="fw-bold mb-1">Transaction history</div>
                  <div class="text-muted small">Receipts and purchase history inside your dashboard.</div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </main>
  </div>
</div>

<script>
(function(){
  // UI-only: fake waitlist success
  const form = document.getElementById('waitlistForm');
  const email = document.getElementById('waitlistEmail');
  const ok = document.getElementById('waitlistOk');
  const btn = document.getElementById('notifyBtn');

  form.addEventListener('submit', function(e){
    e.preventDefault();
    ok.classList.add('d-none');

    const val = (email.value || '').trim();
    if (!val || !val.includes('@')) {
      email.focus();
      return;
    }

    btn.disabled = true;
    btn.textContent = 'Saved';
    ok.classList.remove('d-none');

    setTimeout(() => {
      btn.disabled = false;
      btn.textContent = 'Notify me';
    }, 1500);
  });

  // Optional: show a friendly ETA text (no hard date)
  const eta = document.getElementById('launchEta');
  if (eta) eta.textContent = 'In the next update';
})();
</script>

<?php include '../common/footer.php'; ?>

Выполнить команду


Для локальной разработки. Не используйте в интернете!