Ignore:
Timestamp:
02/17/25 01:39:28 (4 months ago)
Author:
ste08 <sjovanoska@…>
Branches:
master
Children:
de83113
Parents:
a70b5a4
git-author:
ste08 <sjovanoska@…> (02/17/25 01:39:02)
git-committer:
ste08 <sjovanoska@…> (02/17/25 01:39:28)
Message:

Frontend + some backend changes

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/main/resources/static/TransactionPage.html

    ra70b5a4 r9868304  
    88    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    99</head>
     10<style>
     11    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
     12
     13
     14    * {
     15        margin: 0;
     16        padding: 0;
     17        box-sizing: border-box;
     18        font-family: 'Poppins', sans-serif
     19    }
     20
     21    .container {
     22        margin: 10px auto;
     23        padding: 150px;
     24        padding-top:10px;
     25    }
     26
     27    .container .card {
     28        width: 100%;
     29        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     30        background: #fff;
     31        border-radius: 0px;
     32    }
     33
     34    body {
     35        background: #eee
     36    }
     37
     38
     39    .container .card .img-box {
     40        width: 80px;
     41        height: 50px;
     42    }
     43
     44    .container .card img {
     45        width: 100%;
     46        object-fit: fill;
     47    }
     48
     49    .container .card .number {
     50        font-size: 24px;
     51    }
     52
     53    .container .card-body .btn.btn-primary .fab.fa-cc-paypal {
     54        font-size: 32px;
     55        color: #3333f7;
     56    }
     57
     58    .fab.fa-cc-amex {
     59        color: #1c6acf;
     60        font-size: 32px;
     61    }
     62
     63    .fab.fa-cc-mastercard {
     64        font-size: 32px;
     65        color: red;
     66    }
     67
     68    .fab.fa-cc-discover {
     69        font-size: 32px;
     70        color: orange;
     71    }
     72
     73    .c-green {
     74        color: green;
     75    }
     76
     77    .box {
     78        height: 40px;
     79        width: 50px;
     80        display: flex;
     81        align-items: center;
     82        justify-content: center;
     83        background-color: #ddd;
     84    }
     85
     86    .btn.btn-primary.payment {
     87        background-color: #1c6acf;
     88        color: white;
     89        border-radius: 0px;
     90        height: 50px;
     91        display: flex;
     92        align-items: center;
     93        justify-content: center;
     94        margin-top: 24px;
     95    }
     96
     97
     98    .form__div {
     99        height: 50px;
     100        position: relative;
     101        margin-bottom: 24px;
     102    }
     103
     104    .form-control {
     105        width: 100%;
     106        height: 45px;
     107        font-size: 14px;
     108        border: 1px solid #DADCE0;
     109        border-radius: 0;
     110        outline: none;
     111        padding: 2px;
     112        background: none;
     113        z-index: 1;
     114        box-shadow: none;
     115    }
     116
     117    .form__label {
     118        position: absolute;
     119        left: 16px;
     120        top: 10px;
     121        background-color: #fff;
     122        color: #80868B;
     123        font-size: 16px;
     124        transition: .3s;
     125        text-transform: uppercase;
     126    }
     127
     128    .form-control:focus+.form__label {
     129        top: -8px;
     130        left: 12px;
     131        color: #1A73E8;
     132        font-size: 12px;
     133        font-weight: 500;
     134        z-index: 10;
     135    }
     136
     137    .form-control:not(:placeholder-shown).form-control:not(:focus)+.form__label {
     138        top: -8px;
     139        left: 12px;
     140        font-size: 12px;
     141        font-weight: 500;
     142        z-index: 10;
     143    }
     144    .input-group{
     145        align-content: center;
     146        padding-left: 500px;
     147        padding-top:10px;
     148    }
     149    .button-group{
     150        display:flex;
     151        gap:10px;
     152    }
     153    .pay-btn,
     154    .cancel-btn {
     155        padding: 10px 20px;
     156        font-size: 16px;
     157        cursor: pointer;
     158        border: none;
     159        border-radius: 5px;
     160    }
     161
     162    .pay-btn {
     163        background-color: #4CAF50; /* Green background for the pay button */
     164        color: white;
     165    }
     166
     167    .cancel-btn {
     168        background-color: #f44336; /* Red background for the cancel button */
     169        color: white;
     170    }
     171</style>
    10172<body>
    11173
    12 <div id="app" class="transaction-container">
    13     <div class="transaction-box">
    14         <h2>Complete Your Payment</h2>
    15 
    16         <form @submit.prevent="processPayment">
    17             <div class="input-group">
    18                 <label for="cardholder">Cardholder Name</label>
    19                 <input type="text" id="cardholder" v-model="cardholder" placeholder="John Doe" required />
     174<div id="app" class="container">
     175    <div class="row">
     176                <div class="col-lg-4 mb-lg-0 mb-3">
     177                    <div class="card p-3">
     178                        <div class="img-box">
     179                            <img src="https://www.freepnglogos.com/uploads/visa-logo-download-png-21.png" alt="">
     180                        </div>
     181                        <div class="number">
     182                            <label class="fw-bold" for="">**** **** **** 1060</label>
     183                        </div>
     184                        <div class="d-flex align-items-center justify-content-between">
     185                            <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
     186                            <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
     187                        </div>
     188                    </div>
     189                </div>
     190                <div class="col-lg-4 mb-lg-0 mb-3">
     191                    <div class="card p-3">
     192                        <div class="img-box">
     193                            <img src="https://www.freepnglogos.com/uploads/mastercard-png/file-mastercard-logo-svg-wikimedia-commons-4.png"
     194                                 alt="">
     195                        </div>
     196                        <div class="number">
     197                            <label class="fw-bold">**** **** **** 1060</label>
     198                        </div>
     199                        <div class="d-flex align-items-center justify-content-between">
     200                            <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
     201                            <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
     202                        </div>
     203                    </div>
     204                </div>
     205                <div class="col-lg-4 mb-lg-0 mb-3">
     206                    <div class="card p-3">
     207                        <div class="img-box">
     208                            <img src="https://www.freepnglogos.com/uploads/discover-png-logo/credit-cards-discover-png-logo-4.png"
     209                                 alt="">
     210                        </div>
     211                        <div class="number">
     212                            <label class="fw-bold">**** **** **** 1060</label>
     213                        </div>
     214                        <div class="d-flex align-items-center justify-content-between">
     215                            <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
     216                            <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
     217                        </div>
     218                    </div>
     219                </div>
     220                <div class="col-12 mt-4">
     221                    <div class="card p-3">
     222                        <p class="mb-0 fw-bold h4">Payment Methods</p>
     223                    </div>
     224                </div>
    20225            </div>
    21 
    22             <div class="input-group">
    23                 <label for="cardNumber">Card Number</label>
    24                 <input type="text"
    25                        id="cardNumber"
    26                        v-model="cardNumber"
    27                        maxlength="16"
    28                        placeholder="1234 5678 9012 3456"
    29                        required />
    30             </div>
    31 
    32             <div class="input-group">
    33                 <label for="expiration">Expiration Date</label>
    34                 <input type="month" id="expiration" v-model="expiration" required />
    35             </div>
    36 
    37             <div class="button-group">
    38                 <button type="submit" class="pay-btn">Pay</button>
    39                 <button type="button" class="cancel-btn" @click="cancelPayment">Cancel</button>
    40             </div>
    41         </form>
    42 
    43         <div v-if="paymentSuccess" class="success-message">
    44             ✅ Payment successful! Redirecting...
     226            <form class="submit" @submit.prevent="processPayment">
     227                <div class="input-group">
     228                    <label for="cardholder">Cardholder Name</label>
     229                    <input type="text" id="cardholder" v-model="cardholder" placeholder="John Doe" required />
     230                </div>
     231
     232                <div class="input-group">
     233                    <label for="cardNumber">Card Number</label>
     234                    <input type="text"
     235                           id="cardNumber"
     236                           v-model="cardNumber"
     237                           maxlength="16"
     238                           placeholder="1234 5678 9012 3456"
     239                           required />
     240                </div>
     241
     242                <div class="input-group">
     243                    <label for="expiration">Expiration Date</label>
     244                    <input type="month" id="expiration" v-model="expiration" required />
     245                </div>
     246
     247                <div class="button-group">
     248                    <button type="submit" class="pay-btn">Pay</button>
     249                    <button type="button" class="cancel-btn" @click="cancelPayment">Cancel</button>
     250                </div>
     251            </form>
    45252        </div>
    46     </div>
    47 </div>
    48253
    49254<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Note: See TracChangeset for help on using the changeset viewer.