Stream/payment.html at main · Goyam02/Stream · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment & Subscription - Stream</title>
    <link rel="stylesheet" href="style6.css">
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>

</head>
<body>

    <!-- Header Navigation -->
    <header>
        <nav>
            <div class="logo_ul">
                <a href="index.html"><img src="IMAGES/logo.png" alt="STREAM"></a>
                <ul class="navigation-buttons">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="movies.html">Movies</a></li>
                    <li><a href="tvshows.html">TV Shows</a></li>
                    <li><a href="kids.html">Kids</a></li>
                    <li><a href="musicindex.html">Music</a></li>
                    <li><a href="help.html">Help & Support</a></li>
                </ul>
                <img src="IMAGES/user.png" class="user-pic">
            </div>
        </nav>
    </header>

    <!-- Payment & Subscription Section -->
    <main>
        <section class="payment-subscription-section">
            <h1>Payment & Subscription</h1>

            <!-- Current Subscription Plan -->
            <div class="subscription-plan">
                <h2>Current Subscription</h2>
                <div class="plan-info">
                    <p><strong>Plan:</strong> Premium</p>
                    <p><strong>Renewal Date:</strong> 20th December, 2024</p>
                    <p><strong>Next Payment:</strong> $15.99</p>
                </div>
            </div>

            <!-- Available Subscription Plans -->
            <div class="available-plans">
                <h2>Available Subscription Plans</h2>
                <div class="plans">
                    <div class="plan-card">
                        <h3>Basic</h3>
                        <p>$7.99/month</p>
                        <button class="btn-select">Select</button>
                    </div>
                    <div class="plan-card">
                        <h3>Standard</h3>
                        <p>$12.99/month</p>
                        <button class="btn-select">Select</button>
                    </div>
                    <div class="plan-card">
                        <h3>Premium</h3>
                        <p>$15.99/month</p>
                        <button class="btn-select">Select</button>
                    </div>
                </div>
                <button id="pay-btn" class="btn-save">Pay Now</button>
            </div>

            <!-- Payment Method -->
            <div class="payment-method">
                <h2>Payment Method</h2>
                <form action="/update-payment-method" method="POST">
                    <div class="form-group">
                        <label for="card-number">Card Number</label>
                        <input type="text" id="card-number" name="card-number" placeholder="Enter your card number" required>
                    </div>

                    <div class="form-group">
                        <label for="expiry-date">Expiry Date</label>
                        <input type="month" id="expiry-date" name="expiry-date" required>
                    </div>

                    <div class="form-group">
                        <label for="cvv">CVV</label>
                        <input type="text" id="cvv" name="cvv" placeholder="Enter CVV" required>
                    </div>

                    <button type="submit" class="btn-save">Save Payment Method</button>
                </form>
            </div>

            <!-- Payment History -->
            <div class="payment-history">
                <h2>Payment History</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Amount</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>15th Nov 2024</td>
                            <td>$15.99</td>
                            <td>Paid</td>
                        </tr>
                        <tr>
                            <td>15th Oct 2024</td>
                            <td>$15.99</td>
                            <td>Paid</td>
                        </tr>
                        <tr>
                            <td>15th Sep 2024</td>
                            <td>$15.99</td>
                            <td>Paid</td>
                        </tr>
                    </tbody>
                </table>
            </div>
             <!-- QR Code Scanner -->
             <div class="qr-scanner">
                <h2>Scan QR Code</h2>
                <div id="qr-reader" style="width: 300px;"></div>
                <div id="qr-reader-results"></div>
            </div>


        </section>
    </main>

    <!-- Footer -->
    <footer>
        <p>&copy; 2024 Stream OTT Platform. All rights reserved.</p>
    </footer>
    <script src="payment.js"></script>
    <script src="/path/to/local/html5-qrcode.min.js"></script>
    <script src="./html5-qrcode.min.js"></script>
qqq

</body>
</html>