Dharohar/Payment.html at main · ronitk18/Dharohar · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
        integrity="sha384-tViUnnbYAV00FLIhhi3v/dWt3Jxw4gZQcNoSCxCIFNJVCx7/D55/wXsrNIRANwdD" crossorigin="anonymous">
    <style>
        body {
            font-family: 'Cinzel', serif;
            background-color: #2b306f;
            color: #ffeaa1;
        }

        .container {
            margin-top: 50px;
            max-width: 500px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .btn-primary {
            background-color: #ffeaa1;
            color: #2b306f;
            border: none;
        }

        .btn-primary:hover {
            background-color: #fcd97f;
            color: #2b306f;
        }

        .btn-secondary {
            background-color: #444b8a;
            color: #ffeaa1;
            border: none;
        }

        .btn-secondary:hover {
            background-color: #6068b2;
            color: #ffeaa1;
        }

        .card {
            background-color: #444b8a;
            color: #ffeaa1;
            border: none;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            transform: translateY(0);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
        }

        input:focus, select:focus {
            box-shadow: 0 0 8px rgba(255, 234, 161, 0.8);
            border-color: #ffeaa1;
        }

        h1 {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>

    <div class="container mt-5">
        <div class="card">
            <div class="card-body text-center">
                <h5 class="card-title">Buy a Beautiful Saree</h5>
                <p class="card-text">Explore our collection of exquisite sarees. Click below to make a purchase.</p>
                <a href="payment.html" class="btn btn-primary">Proceed to Payment</a>
            </div>
        </div>
    </div>

    <div class="container">
        <h1 class="text-center">Payment for Your Saree</h1>
        <form id="payment-form" action="/process_payment" method="POST">
            <div class="form-group">
                <label for="payment-option">Select Payment Method</label>
                <select class="form-control" id="payment-option" name="payment_option" required>
                    <option value="credit_card">Credit Card</option>
                    <option value="paypal">PayPal</option>
                    <option value="bank_transfer">Bank Transfer</option>
                </select>
            </div>
            <div class="form-group">
                <label for="card-number">Account Number</label>
                <input type="number" class="form-control" id="card-number" name="card_number" required>
            </div>
            <div class="form-group">
                <label for="expiry-date">Expiry Card Date (MM/YY)</label>
                <input type="text" class="form-control" id="expiry-date" name="expiry_date" required>
            </div>
            <div class="form-group">
                <label for="cvv">CVV</label>
                <input type="text" class="form-control" id="cvv" name="cvv" required>
            </div>
            <div class="form-group">
                <label for="amount">Amount</label>
                <input type="text" class="form-control" id="amount" name="amount" value="100" readonly>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Pay Now</button>
        </form>
        <div class="text-center mt-3">
            <a href="index.html" class="btn btn-secondary">Back to Home</a>
        </div>
    </div>
    <script>
        const card = document.querySelector('.card');

        card.addEventListener('mouseover', () => {
            card.style.transform = 'rotateY(5deg)';
        });

        card.addEventListener('mouseout', () => {
            card.style.transform = 'rotateY(0deg)';
        });

        document.getElementById('payment-form').addEventListener('submit', function (event) {
            event.preventDefault();
            alert('Payment submitted successfully!');
        });
    </script>

</body>

</html>