DEV Community: Vida Khoshpey

Share your experience

Vida Khoshpey — Sat, 06 Dec 2025 23:41:49 +0000

Vida Khoshpey

Dec 6 '25

🤷🏻‍♀️ Freelance Devs Drop Your Realest Truth Here

#learning #freelance #beginners

Comments 11

2 min read

🤷🏻‍♀️ Freelance Devs Drop Your Realest Truth Here

Vida Khoshpey — Sat, 06 Dec 2025 09:00:13 +0000

(No flexing. No motivational BS. Just the raw reality people actually need.)😁

If you’ve ever made even $1 from coding outside a 9–5…

this thread is your mic. 🎤🔥

Silent juniors who think they’re the only impostors

are reading every word you write. 👀💭😂

Reply using this exact template (copy → fill → send):

💰 Platforms that paid me:  
→ (Upwork, Fiverr, Toptal, Arc, Lemon.io, Contra, Twitter/X DMs, cold email, referrals, friend of a friend, etc.)

😶‍🌫️ Imposter syndrome in 2025:  
→ Still hits daily  
→ Only when I raise rates or meet a new client  
→ Sometimes, usually late at night  
→ Rarely now  
→ Never had it (respect 🫡)

🔥 One sentence I wish someone told me when I was terrified to send my first proposal:  
→ “Your real sentence here — keep it raw.”

💬 Now fill in your details

Copy → paste → answer honestly ↓

💰 Platforms that paid me:

→ (Upwork, Fiverr, Toptal, Arc, Lemon.io, Contra, Twitter/X DMs, cold email, referrals, friend-of-a-friend, etc.)

😶‍🌫️ Imposter syndrome in 2025:

→ Still hits daily

→ Only when I raise my rates or meet a new client

→ Sometimes, usually late at night

→ Rarely these days

→ Never had it (respect 🫡)

🔥 One sentence I wish someone told me before sending my first proposal:

→ “Your real sentence here — keep it raw.”

Real examples (copy the vibe, not the words):

Platforms → Fiverr + one repeat client from Reddit  
Imposter → Daily, especially when they call me “expert”  
Truth → “I started at $15/hr while following YouTube tutorials with the client on call.”


💰 Platforms → Upwork → Arc → now mostly direct  
😶‍🌫️ Imposter → Only before sending $8k+ invoices  
🔥 Truth → “Half my career is just being the only one who answers emails on weekends.”

No sugarcoating.

Just truth.💕

The dev who’s about to give up tonight will read your comment and think:

“…wait, even THEY feel like this?”😭

Copy the template.

Fill it honestly.

Hit reply.

And if you don’t want to use the template, that’s totally fine 😂just tell your story in your own words. I’m listening.
Sometimes I catch myself thinking “the competition is too big… why me? will anyone even pay me?”😞
So your honesty might help someone who feels the same.

We’re waiting for your line ↓

Need help😭

Vida Khoshpey — Mon, 01 Dec 2025 09:36:43 +0000

PayPal Smart Buttons in 2025 is the about:blank flash + never-closing popup finally dead?😞

Vida Khoshpey ・ Nov 29

#webdev #django #javascript #paypal

PayPal Smart Buttons in 2025 is the about:blank flash + never-closing popup finally dead?😞

Vida Khoshpey — Sat, 29 Nov 2025 11:09:38 +0000

PayPal Checkout in 2025: Who Has Actually Fixed These Two Classic Issues? 😅😭🪦

Hey everyone,

I’m building a clean, modern PayPal checkout and I’m down to the last two annoying (but very old) problems that still exist in 2025. I know I’m not the only one who’s seen these.

Here’s exactly what happens (you’ve probably seen this GIF a thousand times):

The two problems:

The about:blank white flash

When the user clicks the PayPal button → a blank popup opens with about:blank in the address bar → 1–4 seconds of pure white screen before PayPal loads.

On desktop it looks broken and hurts conversions badly.
The popup never closes automatically after payment
- Desktop → PayPal window stays open forever (user has to close it manually)
- Mobile → user is sent back to paypal.com and has to press Back themselves → most people get confused and abandon

What I’ve already tried (2025 edition):

Custom window.open() with my own branded loader
Overriding window.open globally
Every SDK option I could find (commit=true, vault=false, disable-funding, venue, onApprove + window.close(), etc.)
All the usual sources: Stack Overflow, GitHub issues, PayPal community, AI answers
Tested on Chrome, Firefox, Safari, real phones, incognito, clean installs

Nothing removes the white flash 100%, and nothing reliably auto-closes the window on both desktop and mobile.

Everything else works perfectly
the checkout page looks great, server-side capture is solid. Just these two classic UX issues remain.

So my simple question to anyone shipping real PayPal checkouts in 2025:

Has anyone actually solved either of these two problems cleanly?

Completely removed the about:blank white flash?
Made the popup auto-close after successful payment on both desktop and mobile?

If you have a working solution (live site, code snippet, or even just the right combination of SDK flags), I’d love to see it. I’m sure many others would too.

My code

{% extends 'base.html' %}
{% load static %}

{% block content %}

<!-- Font Awesome CDN -->
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Custom Page Styles -->
<link rel="stylesheet" href="{% static 'lessons/css/paypal_payment.css' %}?v=20251128" />

<div class="payment-container">
  <div class="payment-card">

    <!-- Header with gradient background -->
    <div class="payment-header">
      <div class="header-icon">
        <i class="fas fa-lock"></i>
      </div>
      <h2>Complete Your Payment</h2>
      <p>Secure checkout powered by PayPal</p>
      <div class="progress-steps">
        <div class="step active">
          <span class="step-number">1</span>
          <span class="step-text">Booking</span>
        </div>
        <div class="step active">
          <span class="step-number">2</span>
          <span class="step-text">Payment</span>
        </div>
        <div class="step">
          <span class="step-number">3</span>
          <span class="step-text">Confirmation</span>
        </div>
      </div>
    </div>

    <!-- Success Message -->
    <div class="payment-alert success" id="success-alert" style="display: none;">
      <div class="alert-icon">
        <i class="fas fa-check-circle"></i>
      </div>
      <div class="alert-content">
        <h4>Payment Successful!</h4>
        <p>Your booking has been confirmed. Redirecting to dashboard...</p>
      </div>
      <div class="alert-progress">
        <div class="progress-bar">
          <div class="progress-fill"></div>
        </div>
      </div>
    </div>

    <!-- Processing Message -->
    <div class="payment-alert processing" id="processing-alert" style="display: none;">
      <div class="alert-icon">
        <i class="fas fa-spinner fa-spin"></i>
      </div>
      <div class="alert-content">
        <h4>Processing Payment...</h4>
        <p>Please do not close or refresh this page.</p>
      </div>
    </div>

    <!-- Booking Summary -->
    <div class="booking-summary">
      <div class="summary-header">
        <i class="fas fa-receipt"></i>
        <h3>Booking Summary</h3>
      </div>

      <div class="summary-grid">
        <div class="summary-row">
          <div class="summary-item">
            <span class="item-label">Package:</span>
            <span class="item-value">{{ package.name }}</span>
          </div>
          <div class="summary-item">
            <span class="item-label">Date:</span>
            <span class="item-value">{{ pending_booking.date }}</span>
          </div>
        </div>

        <div class="summary-row">
          <div class="summary-item">
            <span class="item-label">Time:</span>
            <span class="item-value">{{ pending_booking.time }}</span>
          </div>
          <div class="summary-item">
            <span class="item-label">Base Price:</span>
            <span class="item-value">${{ package.price|floatformat:2 }}</span>
          </div>
        </div>

        <div class="summary-row">
          <div class="summary-item">
            <span class="item-label">Extra Guests ({{ pending_booking.extra_guests }}):</span>
            <span class="item-value">
              {% if pending_booking.extra_guests > 0 %}
                ${{ pending_booking.extra_guest_fee|floatformat:2 }}
              {% else %}
                $0.00
              {% endif %}
            </span>
          </div>
        </div>

        <div class="summary-divider"></div>

        <div class="summary-row total-row">
          <div class="summary-item">
            <span class="item-label">Total Amount:</span>
            <span class="item-value total-price">${{ pending_booking.total_price|floatformat:2 }}</span>
          </div>
        </div>

        <div class="status-container">
          <div class="status-badge pending" id="status-badge">
            <i class="fas fa-clock"></i>
            <span>Pending Payment</span>
          </div>
        </div>
      </div>
    </div>

    <!-- PayPal Button Container -->
    <div class="payment-section">
      <div class="section-header">
        <h4><i class="fab fa-paypal"></i> PayPal Checkout</h4>
        <p>Pay securely with your PayPal account</p>
      </div>
      <div id="paypal-button-container" class="paypal-button-wrapper"></div>
    </div>

    <!-- Security & Support -->
    <div class="security-section">
      <div class="security-features">
        <div class="security-item">
          <i class="fas fa-shield-alt"></i>
          <span>256-bit SSL Encryption</span>
        </div>
        <div class="security-item">
          <i class="fas fa-lock"></i>
          <span>Secure Payment</span>
        </div>
        <div class="security-item">
          <i class="fas fa-user-shield"></i>
          <span>Privacy Protected</span>
        </div>
      </div>

      <div class="support-note">
        <i class="fas fa-life-ring"></i>
        <div>
          <strong>Need help?</strong>
          <p>Contact us at <a href="mailto:rdl.firearms@gmail.com">rdl.firearms@gmail.com</a></p>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- PayPal SDK -->
<script src="https://www.paypal.com/sdk/js?client-id={{ PAYPAL_CLIENT_ID }}&currency=USD&intent=capture&components=buttons" async></script>

<script>
// Global variables for popup management
let paypalPopup = null;
let popupCheckInterval = null;
let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

// Function to handle popup blocking and mobile navigation
function handlePopupWindow(popup) {
    if (!popup || popup.closed || popup.closed === undefined) {
        // Popup was blocked or closed immediately
        if (isMobile) {
            // On mobile, redirect to a fallback page or show instructions
            showMobilePopupInstructions();
        } else {
            alert("Popup window was blocked. Please allow popups for this site to complete your payment.");
        }
        return false;
    }

    paypalPopup = popup;

    // Monitor the popup
    popupCheckInterval = setInterval(function() {
        if (paypalPopup.closed) {
            clearInterval(popupCheckInterval);
            paypalPopup = null;

            // If popup closed without completion, check if we need to go back on mobile
            if (isMobile && !window.paymentCompleted) {
                handleMobileBackNavigation();
            }
        }
    }, 500);

    return true;
}

// Show instructions for mobile users
function showMobilePopupInstructions() {
    const instructions = `
        <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; display: flex; align-items: center; justify-content: center;">
            <div style="background: white; padding: 20px; border-radius: 10px; max-width: 90%; text-align: center;">
                <h3>PayPal Payment</h3>
                <p>To complete your payment, you'll be redirected to PayPal. After payment, you'll return here automatically.</p>
                <button onclick="closeInstructions()" style="background: #0070ba; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-top: 10px;">
                    Continue to PayPal
                </button>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', instructions);
}

function closeInstructions() {
    const overlay = document.querySelector('[style*="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8)"]');
    if (overlay) {
        overlay.remove();
    }
}

// Handle mobile back navigation when popup closes
function handleMobileBackNavigation() {
    if (isMobile && window.history.length > 1 && !window.paymentCompleted) {
        // Only go back if we're not on the main payment page and payment isn't completed
        setTimeout(() => {
            if (!window.paymentCompleted) {
                window.history.back();
            }
        }, 1000);
    }
}

// Prevent back navigation during payment process
function setupNavigationGuards() {
    // Set a flag when payment starts
    window.paymentStarted = false;
    window.paymentCompleted = false;

    // Add beforeunload handler
    window.addEventListener('beforeunload', function(e) {
        if (window.paymentStarted && !window.paymentCompleted) {
            e.preventDefault();
            e.returnValue = 'Your payment is in progress. Are you sure you want to leave?';
            return e.returnValue;
        }
    });

    // Handle page visibility changes (for mobile)
    document.addEventListener('visibilitychange', function() {
        if (document.hidden && window.paymentStarted && !window.paymentCompleted) {
            // Page is hidden (user switched tabs/apps) - payment might be in progress
            console.log('Payment page hidden - payment might be in progress');
        }
    });
}

document.addEventListener("DOMContentLoaded", function () {
    setupNavigationGuards();

    if (typeof paypal === 'undefined') {
        alert("PayPal SDK failed to load. Please check your internet connection.");
        return;
    }

    paypal.Buttons({
        style: {
            layout: 'vertical',
            color: 'blue',
            shape: 'rect',
            label: 'paypal',
            height: 48,
            tagline: false
        },

        // Create Order - 100% Fixed: No quantity 0 error
        createOrder: function(data, actions) {
            const basePrice       = parseFloat("{{ package.price }}") || 0;
            const extraGuests     = parseInt("{{ pending_booking.extra_guests }}", 10) || 0;
            const extraGuestFee   = parseFloat("{{ pending_booking.extra_guest_fee }}") || 0;
            const totalPrice      = parseFloat("{{ pending_booking.total_price }}") || 0;

            const items = [];

            // Main Package (always included)
            items.push({
                name: "{{ package.name|truncatechars:120 }}",
                description: "Firearms Training Package",
                quantity: "1",
                unit_amount: {
                    currency_code: "USD",
                    value: basePrice.toFixed(2)
                }
            });

            // Extra Guests - Only if greater than 0
            if (extraGuests > 0) {
                items.push({
                    name: `Extra Guest × ${extraGuests}`,
                    description: `${extraGuests} additional guest(s)`,
                    quantity: extraGuests.toString(),
                    unit_amount: {
                        currency_code: "USD",
                        value: (extraGuestFee / extraGuests || 25).toFixed(2)
                    }
                });
            }

            const itemTotal = basePrice + (extraGuests > 0 ? extraGuestFee : 0);

            return actions.order.create({
                purchase_units: [{
                    amount: {
                        currency_code: "USD",
                        value: totalPrice.toFixed(2),
                        breakdown: {
                            item_total: {
                                currency_code: "USD",
                                value: itemTotal.toFixed(2)
                            }
                        }
                    },
                    description: `Booking: {{ package.name }} on {{ pending_booking.date }}`,
                    custom_id: `booking_{{ pending_booking.id }}`,
                    invoice_id: `INV-{{ pending_booking.id }}-{% now "U" %}`,
                    items: items
                }]
            });
        },

        // On Approve - Capture Payment
        onApprove: function(data, actions) {
            window.paymentStarted = true;
            document.getElementById("processing-alert").style.display = "flex";

            return actions.order.capture().then(function(details) {
                return fetch("/payment/confirm/", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRFToken": "{{ csrf_token }}"
                    },
                    body: JSON.stringify({
                        orderID: data.orderID,
                        payerID: details.payer?.payer_id || null,
                        paymentDetails: details
                    })
                });
            })
            .then(response => response.json())
            .then(result => {
                document.getElementById("processing-alert").style.display = "none";

                if (result.success) {
                    window.paymentCompleted = true;
                    document.getElementById("success-alert").style.display = "flex";
                    document.getElementById("status-badge").innerHTML = '<i class="fas fa-check-circle"></i><span>Confirmed</span>';
                    document.getElementById("status-badge").className = "status-badge confirmed";

                    // Close any open popup
                    if (paypalPopup && !paypalPopup.closed) {
                        paypalPopup.close();
                    }

                    // Animate progress bar
                    const progressFill = document.querySelector('.progress-fill');
                    if (progressFill) {
                        progressFill.style.animation = 'progressFill 3s linear forwards';
                    }

                    setTimeout(() => {
                        window.location.href = "/dashboard/";
                    }, 3000);
                } else {
                    throw new Error(result.message || "Booking confirmation failed");
                }
            })
            .catch(err => {
                document.getElementById("processing-alert").style.display = "none";
                console.error("Confirmation error:", err);
                alert("Payment completed but booking not confirmed. Contact support with Order ID: " + data.orderID);
            });
        },

        // Error Handling
        onError: function(err) {
            console.error("PayPal Error:", err);
            alert("An error occurred. Please try again or contact support.");
        },

        // User Cancelled
        onCancel: function() {
            if (isMobile) {
                handleMobileBackNavigation();
            }
            alert("Payment cancelled. You can complete it later from your dashboard.");
        },

        // Handle popup opening
        onClick: function() {
            window.paymentStarted = true;

            // For mobile devices, prepare for potential redirect
            if (isMobile) {
                console.log("Mobile device detected - preparing for PayPal flow");
            }
        }

    }).render("#paypal-button-container")
    .catch(err => {
        console.error("PayPal button render failed:", err);
        alert("Failed to load PayPal button. Please refresh the page.");
    });

    // Enhanced popup handling for PayPal
    const originalWindowOpen = window.open;
    window.open = function(url, name, specs) {
        const popup = originalWindowOpen.call(this, url, name, specs);
        if (url && url.includes('paypal.com')) {
            handlePopupWindow(popup);
        }
        return popup;
    };

    // Handle page load for mobile return from PayPal
    if (isMobile) {
        window.addEventListener('pageshow', function(event) {
            if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
                // Page was loaded from cache (back/forward navigation)
                if (window.paymentStarted && !window.paymentCompleted) {
                    // Check if we returned from PayPal
                    setTimeout(() => {
                        // Refresh the page to check payment status
                        window.location.reload();
                    }, 1000);
                }
            }
        });
    }
});
</script>

<!-- Modern Inline Styles -->
<style>
  :root {
    --primary: #0070ba;
    --primary-dark: #005ea6;
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --dark: #2d3748;
    --light: #f8f9fa;
    --gray: #6c757d;
    --border: #e2e8f0;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --gradient: linear-gradient(135deg, #0070ba 0%, #005ea6 100%);
  }

  * {
    box-sizing: border-box;
  }

  .payment-container {
    max-width: 520px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  }

  .payment-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
  }

  /* Header Styles */
  .payment-header {
    background: var(--gradient);
    color: white;
    padding: 40px 35px 30px;
    text-align: center;
    position: relative;
  }

  .payment-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
  }

  .header-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    backdrop-filter: blur(10px);
  }

  .header-icon i {
    font-size: 2.5rem;
    color: white;
  }

  .payment-header h2 {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  .payment-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 1.1rem;
  }

  /* Progress Steps */
  .progress-steps {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 40px;
  }

  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .step.active .step-number {
    background: white;
    color: var(--primary);
  }

  .step-text {
    font-size: 0.85rem;
    opacity: 0.8;
  }

  /* Alert Styles */
  .payment-alert {
    display: none;
    align-items: center;
    gap: 16px;
    padding: 20px;
    margin: 20px;
    border-radius: 12px;
    font-weight: 500;
    animation: slideIn 0.5s ease;
    position: relative;
  }

  .alert-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .alert-content {
    flex: 1;
  }

  .alert-content h4 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
  }

  .alert-content p {
    margin: 0;
    opacity: 0.8;
    font-size: 0.95rem;
  }

  .alert-progress {
    width: 100px;
    flex-shrink: 0;
  }

  .progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: white;
    width: 0%;
  }

  .success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    border: 1px solid #c3e6cb;
    color: #155724;
  }

  .processing {
    background: linear-gradient(135deg, #cff4fc, #b6effb);
    border: 1px solid #b6effb;
    color: #055160;
  }

  /* Booking Summary */
  .booking-summary {
    padding: 30px;
  }

  .summary-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
  }

  .summary-header i {
    font-size: 1.5rem;
    color: var(--primary);
  }

  .summary-header h3 {
    margin: 0;
    color: var(--dark);
    font-size: 1.4rem;
    font-weight: 600;
  }

  .summary-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .item-label {
    font-size: 0.9rem;
    color: var(--gray);
    font-weight: 500;
  }

  .item-value {
    font-size: 1rem;
    color: var(--dark);
    font-weight: 600;
  }

  .summary-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
    grid-column: 1 / -1;
  }

  .total-row {
    grid-template-columns: 1fr;
  }

  .total-row .item-value {
    font-size: 2rem;
    color: var(--success);
    font-weight: 700;
  }

  .status-container {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .status-badge.pending {
    background: #fff3cd;
    color: #856404;
  }

  .status-badge.confirmed {
    background: #d4edda;
    color: #155724;
  }

  /* Payment Section */
  .payment-section {
    padding: 0 30px 30px;
  }

  .section-header {
    text-align: center;
    margin-bottom: 20px;
  }

  .section-header h4 {
    margin: 0 0 8px 0;
    color: var(--dark);
    font-size: 1.2rem;
    font-weight: 600;
  }

  .section-header p {
    margin: 0;
    color: var(--gray);
    font-size: 0.95rem;
  }

  .section-header i {
    color: var(--primary);
  }

  .paypal-button-wrapper {
    margin: 0;
  }

  /* Security Section */
  .security-section {
    background: var(--light);
    padding: 25px 30px;
    border-top: 1px solid var(--border);
  }

  .security-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
  }

  .security-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .security-item i {
    font-size: 1.2rem;
    color: var(--primary);
  }

  .security-item span {
    font-size: 0.8rem;
    color: var(--gray);
    font-weight: 500;
  }

  .support-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border);
  }

  .support-note i {
    font-size: 1.3rem;
    color: var(--primary);
  }

  .support-note div {
    flex: 1;
  }

  .support-note strong {
    display: block;
    color: var(--dark);
    font-size: 0.95rem;
  }

  .support-note p {
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    color: var(--gray);
  }

  .support-note a {
    color: var(--primary);
    text-decoration: none;
  }

  .support-note a:hover {
    text-decoration: underline;
  }

  /* Animations */
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes progressFill {
    from {
      width: 0%;
    }
    to {
      width: 100%;
    }
  }

  /* Responsive Design */
  @media (max-width: 480px) {
    .payment-container {
      margin: 20px auto;
      padding: 0 15px;
    }

    .payment-header {
      padding: 30px 25px 25px;
    }

    .payment-header h2 {
      font-size: 1.7rem;
    }

    .progress-steps {
      gap: 20px;
    }

    .summary-row {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .security-features {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .total-row .item-value {
      font-size: 1.7rem;
    }

    .payment-alert {
      margin: 15px;
      padding: 15px;
    }
  }

  /* Hover Effects */
  .payment-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .payment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  /* Focus States */
  button:focus, a:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
</style>

{% endblock %}

paypal #javascript #webdev #checkout #ux #frontend #payment #ecommerce #helpme #webdevelopment

💀Does anyone know the Django?🤔🔍

Vida Khoshpey — Fri, 24 Oct 2025 07:28:46 +0000

Vida Khoshpey

Oct 23 '25

🚀 Help Needed: Review & Deploy My Django Project (Ready-Aim-Learn)

#help #django #webdev #python

Comments 11

2 min read

🚀 Help Needed: Review & Deploy My Django Project (Ready-Aim-Learn)

Vida Khoshpey — Thu, 23 Oct 2025 17:38:05 +0000

Hey Dev.to community! 👋

I'm Vida, a beginner Django developer, and I’ve been working hard on Ready-Aim-Learn, a project I built from the ground up despite knowing nothing about Django a few months ago! 💪 It’s about 65–70% production-ready, but I need your expertise to polish and deploy it safely. Your feedback is incredibly valuable to me! 🙌

📊 Project Status (~65–70% Production-Ready)

Component	Status	Completion
Core Features (Models, Views, Booking, Forms)	✅ Done	90–95%
Frontend/UI (Responsive, CSS, JS)	✅ Mostly Done	85–90%
Security (CSRF, Sessions, Env Vars)	✅ In Place	55–60%
Testing (Unit/Integration)	⚠ Limited	40–50%
Production Config (Settings, DB, SSL, HSTS)	❌ Pending	45–50%
Documentation/README	⚠ Needs Work	50–60%

✅ What’s Working

Booking System: Supports optional extra guests

Payments: PayPal sandbox integration
Authentication: Google OAuth for login/signup
Notifications: Email alerts for bookings
Frontend & Admin: Functional and user-friendly

🔹 Help Needed

I’m seeking guidance to make Ready-Aim-Learn production-ready. Key areas include:

Code Review: Security, best practices, and optimizations
Production Setup: Settings (prod.py), CORS, HTTPS, security headers
Database: Migrate to PostgreSQL/MySQL for production
Payments: Test PayPal live mode
Emails: Configure production-ready notifications
Deployment: Set up live server, SSL, static/media files
Testing: Ensure bookings, payments, and admin access work flawlessly
Optional: Enhance README with setup guide and screenshots

📂 Repository

Ready-Aim-Learn GitHub Repo

🙏 How You Can Help

If you’re experienced in Django, deployment, or security, I’d greatly appreciate your input! Whether it’s a quick tip, code review, or pull request, every contribution helps. Your expertise will bring this project to life! 🌟

Thank you so much for your time and support! 💖

Let’s connect! Drop your thoughts in the comments, or contribute directly on GitHub. I’m excited to learn from this amazing community! 😊

Make your hamburger 🍔😋

Vida Khoshpey — Wed, 20 Aug 2025 07:44:46 +0000

Yalda Khoshpey

Aug 19 '25

🍔 The Ultimate Burger Builder

#beginners #frontend #opensource #webdev

Comments 36

2 min read

Pacman maze snake 🐍

Vida Khoshpey — Sat, 09 Aug 2025 09:11:11 +0000

🎮 Turn Your GitHub Into a Game (Pacman, Snake & Trophies!

Vida Khoshpey ・ Aug 7

#beginners #actionshackathon #codenewbie #learning

Try this maze pacman and snake 🐍

Vida Khoshpey — Fri, 08 Aug 2025 20:37:49 +0000

Vida Khoshpey

Aug 7 '25

🎮 Turn Your GitHub Into a Game (Pacman, Snake & Trophies!

#beginners #actionshackathon #codenewbie #learning

Comments 18

2 min read

README.md pacman maze and snake

Vida Khoshpey — Fri, 08 Aug 2025 08:32:35 +0000

Vida Khoshpey

Aug 7 '25

🎮 Turn Your GitHub Into a Game (Pacman, Snake & Trophies!

#beginners #actionshackathon #codenewbie #learning

Comments 18

2 min read

🎮 Turn Your GitHub Into a Game (Pacman, Snake & Trophies!

Vida Khoshpey — Thu, 07 Aug 2025 22:19:55 +0000

🕹️ Make Your GitHub FUN Again!

Hey devs! 👋

Wanna turn your boring GitHub into a retro game zone?

I did — with Pacman, snake animations, and shiny trophies! 🏆✨

No matter if you're a newbie or a pro,

this trick adds fun + personality to your profile in seconds!

Let’s maze it up! 👾🎯

🎮 What I Did:

✅ Added a Pacman/Snake-style contribution graph

✅ Showed off dynamic trophies that update based on my GitHub activity

✅ Made it fun and visual, so anyone landing on my profile smiles 😁

🧠 How You Can Do It Too!

📌 1. Add the Pacman/Snake Contribution Graph

Just copy this code into your README.md file:

👾 Cute Maze

## 👾 Cute Maze

<picture>
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/VIDAKHOSHPEY22/VIDAKHOSHPEY22/output/pacman-contribution-graph.svg">
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/VIDAKHOSHPEY22/VIDAKHOSHPEY22/output/pacman-contribution-graph-dark.svg">
  <img alt="pacman contribution graph" src="https://raw.githubusercontent.com/VIDAKHOSHPEY22/VIDAKHOSHPEY22/output/pacman-contribution-graph.svg">
</picture>

✅ It auto-switches between light/dark mode!

👾 For maze you need to copy
My

.github/workflows/maze.yml

🐍 For snake you need to copy My

.github/workflows/snake.yml

⚠️ Change your username instead of mine and Just copy codes for them into your README.md file:

🏆 2. Add GitHub Trophies

Here’s a sample code to show your GitHub trophies using ryo-ma's trophy service:

## 🏆 GitHub Trophies

![Trophies](https://github-profile-trophy.vercel.app/?username=VIDAKHOSHPEY22&theme=dracula&no-frame=true&title=Stars,Commits,Repositories,Followers&margin-w=10&margin-h=10)

🎯 These trophies reflect your real activity: stars, commits, PRs, followers and more.

🪄 Result (Demo)

Here’s how mine looks 👇

🔁 You can easily replace the username above with your own and add these to your README.md too!

⚠️ DON'T Forget to add

 .github/workflows

and files like

 snake.yml

and

 maze.yml

and if you had problems with them just Rerun workflows

💡 Why Should You Try This?

🧒 Great for beginners
🎨 Boosts your creativity
😎 Impress recruiters
🔗 Makes your profile stand out
💬 Fun way to engage with the GitHub community

🙌 Let’s Have Some Fun Together!

You can check out my full profile here:
👉 https://github.com/VIDAKHOSHPEY22

If you create a game-style profile, share it in the comments!
Let’s inspire each other and spread the fun 🤗

And hey — don’t forget to star ⭐ if you liked it, or fork 🔁 if you want to steal the style! 😄

❤️ Support & Spread the Love

Made with lots of fun and curiosity 😍
Feel free to remix, improve or share this idea!

Collaboration need

Vida Khoshpey — Tue, 05 Aug 2025 23:05:57 +0000

Vida Khoshpey

Aug 5 '25

Can You Make This Python Racing Game Better?😏🧠 Let's Code Together!

#gamedev #opensource #python #beginners

Comments 12

1 min read