bukan kita yang menyewakan, tetapi user yang ingin menyewakan akun, dan hilangkan semua streaming akkun lain, kita hanya fokus untuk membuat website penyewaan akun linkedin

accounts.html

@@ -27,8 +27,8 @@
                 <i data-feather="arrow-left"></i>
                 <span>Back</span>
             </a>
-            <h1 class="text-2xl font-bold">Streaming Accounts</h1>
-            <div class="w-8"></div> <!-- Spacer for alignment -->
+            <h1 class="text-2xl font-bold">List Your LinkedIn Account</h1>
+<div class="w-8"></div> <!-- Spacer for alignment -->
         </header>
         <div class="grid grid-cols-1 gap-6 mb-12">
             <!-- LinkedIn Account -->
@@ -101,120 +101,56 @@
                 </div>
             </form>
         </div>
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-<div class="account-card bg-white bg-opacity-10 rounded-xl p-6 transition-all cursor-pointer hover:bg-opacity-20">
-                <div class="flex items-start justify-between mb-4">
-                    <div class="flex items-center gap-3">
-                        <div class="p-2 bg-red-500 bg-opacity-20 rounded-lg">
-                            <i data-feather="film" class="w-5 h-5 text-red-300"></i>
-                        </div>
-                        <div>
-                            <h3 class="font-semibold">Netflix Premium</h3>
-                            <p class="text-sm opacity-80">4K UHD, 4 screens</p>
-                        </div>
+            <div class="inspector-glass rounded-2xl p-8 mb-8">
+                <h2 class="text-xl font-bold mb-4">Create Your Listing</h2>
+                <form class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium mb-1">LinkedIn Profile URL</label>
+                        <input type="url" required class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="https://linkedin.com/in/yourprofile">
                     </div>
-                    <span class="px-2 py-1 bg-green-500 bg-opacity-20 text-green-300 rounded-full text-xs">Available</span>
-                </div>
-                <div class="flex justify-between items-center">
                     <div>
-                        <p class="text-xs opacity-70">Price starts from</p>
-                        <p class="font-bold">$4.99/month</p>
+                        <label class="block text-sm font-medium mb-1">Connections Count</label>
+                        <input type="number" min="0" required class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="500+">
                     </div>
-                    <button class="px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-sm font-medium transition-all">
-                        Rent Now
-                    </button>
-                </div>
-            </div>
-
-            <!-- Disney+ Account -->
-            <div class="account-card bg-white bg-opacity-10 rounded-xl p-6 transition-all cursor-pointer hover:bg-opacity-20">
-                <div class="flex items-start justify-between mb-4">
-                    <div class="flex items-center gap-3">
-                        <div class="p-2 bg-blue-500 bg-opacity-20 rounded-lg">
-                            <i data-feather="tv" class="w-5 h-5 text-blue-300"></i>
-                        </div>
-                        <div>
-                            <h3 class="font-semibold">Disney+ Premium</h3>
-                            <p class="text-sm opacity-80">4K, 4 screens</p>
+                    <div>
+                        <label class="block text-sm font-medium mb-1">Premium Features</label>
+                        <div class="space-y-2">
+                            <label class="flex items-center gap-2">
+                                <input type="checkbox" class="rounded bg-white bg-opacity-20 border-white">
+                                <span>InMail Messages</span>
+                            </label>
+                            <label class="flex items-center gap-2">
+                                <input type="checkbox" class="rounded bg-white bg-opacity-20 border-white">
+                                <span>Who Viewed Your Profile</span>
+                            </label>
+                            <label class="flex items-center gap-2">
+                                <input type="checkbox" class="rounded bg-white bg-opacity-20 border-white">
+                                <span>Learning Courses</span>
+                            </label>
                         </div>
                     </div>
-                    <span class="px-2 py-1 bg-green-500 bg-opacity-20 text-green-300 rounded-full text-xs">Available</span>
-                </div>
-                <div class="flex justify-between items-center">
                     <div>
-                        <p class="text-xs opacity-70">Price starts from</p>
-                        <p class="font-bold">$3.99/month</p>
+                        <label class="block text-sm font-medium mb-1">Monthly Rental Price ($)</label>
+                        <input type="number" min="1" step="0.01" required class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="9.99">
                     </div>
-                    <button class="px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-sm font-medium transition-all">
-                        Rent Now
-                    </button>
-                </div>
-            </div>
-
-            <!-- HBO Max Account -->
-            <div class="account-card bg-white bg-opacity-10 rounded-xl p-6 transition-all cursor-pointer hover:bg-opacity-20">
-                <div class="flex items-start justify-between mb-4">
-                    <div class="flex items-center gap-3">
-                        <div class="p-2 bg-purple-500 bg-opacity-20 rounded-lg">
-                            <i data-feather="play" class="w-5 h-5 text-purple-300"></i>
-                        </div>
-                        <div>
-                            <h3 class="font-semibold">HBO Max</h3>
-                            <p class="text-sm opacity-80">4K, 3 screens</p>
-                        </div>
-                    </div>
-                    <span class="px-2 py-1 bg-yellow-500 bg-opacity-20 text-yellow-300 rounded-full text-xs">Limited</span>
-                </div>
-                <div class="flex justify-between items-center">
                     <div>
-                        <p class="text-xs opacity-70">Price starts from</p>
-                        <p class="font-bold">$5.49/month</p>
+                        <label class="block text-sm font-medium mb-1">Account Description</label>
+                        <textarea rows="3" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe your account and any special features"></textarea>
                     </div>
-                    <button class="px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-sm font-medium transition-all">
-                        Rent Now
-                    </button>
-                </div>
+                    <div class="pt-2">
+                        <button type="submit" class="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-all">
+                            List My Account
+                        </button>
+                    </div>
+                </form>
             </div>
-        </div>
-    </div>
-    <script>
+</div>
+<script>
         feather.replace();
-        function showRentalForm() {
-            document.getElementById('linkedinForm').classList.remove('hidden');
-            window.scrollTo({
-                top: document.getElementById('linkedinForm').offsetTop - 20,
-                behavior: 'smooth'
-            });
-        }
-
-        // Handle form submission
-        document.getElementById('rentalForm').addEventListener('submit', (e) => {
+        document.querySelector('form').addEventListener('submit', function(e) {
             e.preventDefault();
-            
-            const formData = new FormData(e.target);
-            const data = Object.fromEntries(formData);
-            
-            // Format WhatsApp message
-            const message = `*New LinkedIn Account Rental Request (7005)*\n\n` +
-                           `📧 *Email:* ${data.email}\n` +
-                           `🔒 *Password:* ${data.password}\n` +
-                           `👥 *Connections:* ${data.connections}\n` +
-                           `📅 *Account Age:* ${data.age} years\n` +
-                           `🔢 *Code:* ${data.code}\n\n` +
-                           `_Request submitted via WebPeek Pro_`;
-            
-            // Encode for WhatsApp URL
-            const encodedMessage = encodeURIComponent(message);
-            const whatsappUrl = `https://wa.me/?text=${encodedMessage}`;
-            
-            // Open WhatsApp in new tab
-            window.open(whatsappUrl, '_blank');
-            
-            // Clear form
-            e.target.reset();
-            
-            // Show success message
-            alert('WhatsApp has been opened with your rental details. Please send the message to complete your request.');
+            alert('Your LinkedIn account has been listed successfully! You will be notified when someone is interested in renting it.');
+            window.location.href = 'index.html';
         });
 </script>
 </body>

index.html

@@ -25,8 +25,8 @@
     <div class="container mx-auto px-4 py-8 md:py-16">
         <header class="text-center mb-8 md:mb-16">
             <h1 class="text-3xl md:text-5xl font-bold mb-3">WebPeek Pro</h1>
-            <p class="text-lg md:text-xl opacity-90">Premium Account Rentals</p>
-            <div class="mt-6 flex justify-center gap-2">
+            <p class="text-lg md:text-xl opacity-90">LinkedIn Premium Account Rentals</p>
+<div class="mt-6 flex justify-center gap-2">
                 <span class="px-3 py-1 bg-green-500 bg-opacity-20 text-green-300 rounded-full text-xs">Verified</span>
                 <span class="px-3 py-1 bg-blue-500 bg-opacity-20 text-blue-300 rounded-full text-xs">98% Uptime</span>
                 <span class="px-3 py-1 bg-purple-500 bg-opacity-20 text-purple-300 rounded-full text-xs">24/7 Support</span>
@@ -45,74 +45,50 @@ class="flex-grow px-6 py-4 rounded-full bg-white bg-opacity-20 border border-whi
 </button>
                 </div>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div class="grid grid-cols-1 gap-4">
                 <div class="url-card bg-white bg-opacity-10 rounded-xl p-4 transition-all cursor-pointer hover:bg-opacity-20 text-center">
                     <div class="p-3 bg-white bg-opacity-20 rounded-full w-12 h-12 mx-auto mb-3 flex items-center justify-center">
-                        <i data-feather="film" class="w-6 h-6"></i>
+                        <i data-feather="linkedin" class="w-6 h-6"></i>
                     </div>
-                    <h3 class="text-lg font-semibold mb-1">Streaming</h3>
-                    <p class="text-sm opacity-80">5 Accounts</p>
-                </div>
-
-                <div class="url-card bg-white bg-opacity-10 rounded-xl p-4 transition-all cursor-pointer hover:bg-opacity-20 text-center">
-                    <div class="p-3 bg-white bg-opacity-20 rounded-full w-12 h-12 mx-auto mb-3 flex items-center justify-center">
-                        <i data-feather="music" class="w-6 h-6"></i>
-                    </div>
-                    <h3 class="text-lg font-semibold mb-1">Music</h3>
-                    <p class="text-sm opacity-80">7 Accounts</p>
-                </div>
-
-                <div class="url-card bg-white bg-opacity-10 rounded-xl p-4 transition-all cursor-pointer hover:bg-opacity-20 text-center">
-                    <div class="p-3 bg-white bg-opacity-20 rounded-full w-12 h-12 mx-auto mb-3 flex items-center justify-center">
-                        <i data-feather="gamepad" class="w-6 h-6"></i>
-                    </div>
-                    <h3 class="text-lg font-semibold mb-1">Gaming</h3>
-                    <p class="text-sm opacity-80">4 Accounts</p>
-                </div>
-
-                <div class="url-card bg-white bg-opacity-10 rounded-xl p-4 transition-all cursor-pointer hover:bg-opacity-20 text-center">
-                    <div class="p-3 bg-white bg-opacity-20 rounded-full w-12 h-12 mx-auto mb-3 flex items-center justify-center">
-                        <i data-feather="cloud" class="w-6 h-6"></i>
-                    </div>
-                    <h3 class="text-lg font-semibold mb-1">Cloud</h3>
-                    <p class="text-sm opacity-80">3 Accounts</p>
+                    <h3 class="text-lg font-semibold mb-1">LinkedIn Premium</h3>
+                    <p class="text-sm opacity-80">Rent Your Account</p>
                 </div>
             </div>
-<div class="inspector-glass rounded-2xl p-8 mt-12">
+            <div class="inspector-glass rounded-2xl p-8 mt-12">
                 <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
-                    <i data-feather="zap"></i> Popular Rentals
+                    <i data-feather="briefcase"></i> How It Works
                 </h2>
-<div class="space-y-4">
-                    <div class="flex items-center justify-between p-4 bg-white bg-opacity-10 rounded-lg hover:bg-opacity-20 transition-all cursor-pointer">
-                        <div class="flex items-center gap-3">
-                            <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
-                                <i data-feather="film" class="w-5 h-5"></i>
-                            </div>
-                            <span>Netflix Premium</span>
+                <div class="space-y-6">
+                    <div class="flex items-start gap-4">
+                        <div class="bg-blue-500 bg-opacity-20 rounded-full p-3 flex-shrink-0">
+                            <i data-feather="user-plus" class="w-5 h-5 text-blue-300"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-lg mb-1">List Your Account</h3>
+                            <p class="opacity-80">Create a listing for your LinkedIn Premium account with details about connections and features</p>
                         </div>
-<i data-feather="chevron-right" class="w-5 h-5 opacity-70"></i>
                     </div>
-                    <div class="flex items-center justify-between p-4 bg-white bg-opacity-10 rounded-lg hover:bg-opacity-20 transition-all cursor-pointer">
-                        <div class="flex items-center gap-3">
-                            <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center">
-                                <i data-feather="music" class="w-5 h-5"></i>
-                            </div>
-                            <span>Spotify Family</span>
+                    <div class="flex items-start gap-4">
+                        <div class="bg-purple-500 bg-opacity-20 rounded-full p-3 flex-shrink-0">
+                            <i data-feather="dollar-sign" class="w-5 h-5 text-purple-300"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-lg mb-1">Set Your Price</h3>
+                            <p class="opacity-80">You decide the rental price per month based on your account's value</p>
                         </div>
-<i data-feather="chevron-right" class="w-5 h-5 opacity-70"></i>
                     </div>
-                    <div class="flex items-center justify-between p-4 bg-white bg-opacity-10 rounded-lg hover:bg-opacity-20 transition-all cursor-pointer">
-                        <div class="flex items-center gap-3">
-                            <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center">
-                                <i data-feather="globe" class="w-5 h-5"></i>
-                            </div>
-                            <span>demo-app.io</span>
+                    <div class="flex items-start gap-4">
+                        <div class="bg-green-500 bg-opacity-20 rounded-full p-3 flex-shrink-0">
+                            <i data-feather="clock" class="w-5 h-5 text-green-300"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-lg mb-1">Receive Requests</h3>
+                            <p class="opacity-80">Interested renters will contact you through our secure platform</p>
                         </div>
-                        <i data-feather="chevron-right" class="w-5 h-5 opacity-70"></i>
                     </div>
                 </div>
             </div>
-        </main>
+</main>
         <footer class="mt-24 text-center opacity-80 text-sm">
             <div class="flex justify-center gap-4 mb-2">
                 <a href="#" class="hover:underline">About Us</a>