api/payment.html at main · risal-tech/api · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="id" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Payment Sall</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
    };
  </script>
  <style>
.typing-text {
  font-size: 1.875rem;
  font-weight: bold;
  text-align: center;
  width: fit-content;
  margin: 0 auto 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  border-right: .15em solid #00ffcc;
  animation: typing 3s steps(30, end), blink-caret .75s step-end infinite;
}
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }
    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: #00ffcc }
    }
    .pulse {
      animation: pulse 2s infinite;
    }
  </style>
</head>
<body class="bg-gray-900 dark:bg-white text-white dark:text-black transition duration-300 font-sans">
  <div class="max-w-md mx-auto py-10 px-4">

    <!-- Toggle Mode -->
    <div class="flex justify-end mb-4">
      <button onclick="toggleTheme()" class="px-3 py-1 bg-cyan-600 text-white dark:bg-gray-700 dark:text-white rounded text-sm">tema</button>
    </div>

    <!-- Logo -->
    <div class="flex justify-center mb-4">
      <img src="https://img1.pixhost.to/images/5239/591190169_skyvien.jpg" alt="Ditss Logo" class="w-20 h-20 rounded-full shadow-lg" />
    </div>

    <!-- Judul -->
    <h1 class="typing-text">Payment Sall</h1>
    <p class="text-center text-gray-400 dark:text-gray-600 mb-8">Pilih metode pembayaran yang tersedia di bawah ini</p>

    <!-- Payment Cards -->
    <div class="space-y-4">

      <!-- DANA -->
      <div class="bg-gray-800 dark:bg-gray-200 rounded-xl p-4 border-l-4 border-blue-500">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <img src="https://files.catbox.moe/i210w3.jpg" alt="Dana" class="w-6 h-6">
            <span class="font-semibold">DANA</span>
          </div>
          <span class="text-sm text-green-400">ready✓</span>
        </div>
        <button onclick="copyToClipboard('085796545869')" class="mt-2 bg-blue-600 dark:bg-blue-400 w-full py-2 rounded">Copy</button>
      </div>

      <!-- OVO -->
      <div class="bg-gray-800 dark:bg-gray-200 rounded-xl p-4 border-l-4 border-purple-500">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <img src="https://img12.pixhost.to/images/1486/584767534_ditss.jpg" alt="OVO" class="w-6 h-6">
            <span class="font-semibold">OVO</span>
          </div>
          <span class="text-sm text-green-400">ready</span>
        </div>
        <button onclick="copyToClipboard('081513607731')" class="mt-2 bg-purple-600 dark:bg-purple-400 w-full py-2 rounded">Copy</button>
      </div>

      <!-- GoPay -->
      <div class="bg-gray-800 dark:bg-gray-200 rounded-xl p-4 border-l-4 border-green-500">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <img src="https://img12.pixhost.to/images/1486/584766112_ditss.jpg" alt="GoPay" class="w-6 h-6">
            <span class="font-semibold">GoPay</span>
          </div>
          <span class="text-sm text-green-400">ready✓</span>
        </div>
        <button onclick="copyToClipboard('085787093794')" class="mt-2 bg-green-600 dark:bg-green-400 w-full py-2 rounded">Copy</button>
      </div>

      <!-- ShopeePay -->
      <div class="bg-gray-800 dark:bg-gray-200 rounded-xl p-4 border-l-4 border-yellow-400">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <img src="https://img12.pixhost.to/images/1486/584767499_ditss.jpg" alt="ShopeePay" class="w-6 h-6">
            <span class="font-semibold">ShopeePay</span>
          </div>
          <span class="text-sm text-green-400">not ready</span>
        </div>
        <button onclick="copyToClipboard('Tidak Tersedia!!')" class="mt-2 bg-yellow-500 dark:bg-yellow-400 w-full py-2 rounded">Copy</button>
      </div>

      <!-- QRIS -->
      <div class="bg-gray-800 dark:bg-gray-200 rounded-xl p-4 border-l-4 border-cyan-500">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <img src="https://img1.pixhost.to/images/5238/591183044_skyvien.jpg" alt="QRIS" class="w-6 h-6">
            <span class="font-semibold">QRIS</span>
          </div>
          <button onclick="toggleQRIS()" class="text-sm text-white bg-cyan-600 dark:bg-cyan-400 px-3 py-1 rounded">
            Tampilkan QR
          </button>
        </div>
        <div id="qris-img" class="hidden">
          <img src="https://img12.pixhost.to/images/1486/584766403_ditss.jpg" alt="QRIS" class="w-full mt-3 rounded-lg pulse" />
        </div>
      </div>

    </div>

    <!-- Music Preview -->
    <div class="mt-8 bg-gray-800 dark:bg-gray-100 p-4 rounded-lg">
      <p class="font-semibold mb-2">Now Playing</p>
      <audio controls src="https://files.catbox.moe/aoaagd.mp3" class="w-full rounded"></audio>
      <a href="playlist.html" class="flex items-center justify-center gap-2 text-sm text-cyan-400 mt-3 underline hover:text-cyan-300">
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg" alt="Spotify" class="w-5 h-5">
  Lihat Playlist Lengkap
</a>


    <!-- Navigasi -->
    <div class="flex justify-center text-sm text-gray-300 dark:text-gray-600 mt-8">
      <a href="download.html" class="underline hover:text-white dark:hover:text-black">Download SC Asuma</a>
    </div>

    <!-- Footer -->
    <p class="text-center text-xs text-gray-500 dark:text-gray-600 mt-8">powered by <strong>Sall</strong></p>
  </div>

  <script>
    function copyToClipboard(text) {
      navigator.clipboard.writeText(text)
        .then(() => alert('Disalin ke clipboard!'))
        .catch(() => alert('Gagal menyalin!'));
    }
    function toggleTheme() {
      document.documentElement.classList.toggle('dark');
    }
    function toggleQRIS() {
      const qr = document.getElementById("qris-img");
      qr.classList.toggle("hidden");
    }
  </script>
</body>
</html>