forked from sourabbr/A2I
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate4.html
142 lines (135 loc) · 4.25 KB
/
template4.html
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
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<template>
<v-container>
<h1><b>Upgrade Account<b></h1>
</br>
<v-flex lg12>
<p><b>Step 1<b>: Verify a Caller ID</p>
<hr>
</br>
</v-flex>
<v-flex offset-lg5>
<p>You've verified 12345678</p>
</v-flex>
</br>
<v-flex>
<p>Step 2: Enter your payment information</p>
<hr>
</br>
</v-flex>
<v-flex>
<v-subheader v-text="'Methods'"></v-subheader>
</v-flex>
<v-flex lg8 offset-lg3>
<v-radio-group row>
<v-radio label="Credit Card" value="Credit Card" ></v-radio>
<v-radio label="PayPal" value="PayPal"></v-radio>
<v-radio label="Stripe" value="Stripe"></v-radio>
</v-radio-group>
</v-flex>
<v-flex lg8 offset-lg2>
<v-card>
<v-card-text row>
<v-layout row wrap>
<v-flex xs12 sm6>
<v-text-field
label="Credit Card Number"
placeholder="xxxx xxxx xxxx xxxx"
></v-text-field>
</v-flex>
<v-flex xs12 sm2>
<v-text-field
label="Expires"
placeholder="MM"
></v-text-field>
</v-flex>
<v-flex xs12 sm2>
<v-text-field
label=""
placeholder="YYYY"
></v-text-field>
</v-flex>
<v-flex xs12 sm2>
<v-text-field
label="CVV"
placeholder="***"
></v-text-field>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-flex>
</br>
<v-flex>
<p>Step 3: Add funds</p>
<hr>
</br>
</v-flex>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-card-text>
<p style="color:grey">AMOUNT TO ADD TO YOUR ACCOUNT NOW</P>
<v-flex>
<v-select
light
v-bind:items="recharge"
v-model="a1"
label=""
autocomplete
></v-select>
</v-flex>
<v-card color="grey lighten-2">
<v-card-text>
<v-flex>
<v-checkbox v-model="mode" value="Turn on automatic recharging" label="Turn on automatic recharging"></v-checkbox>
</v-flex>
<p>When your balance falls below $10.00, we will recharge your balance to $20</p>
</v-card-text>
</v-card>
</v-card-text>
<v-card-actions>
<v-btn color="primary">Upgrade Account</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-container>
</template>
</v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>
new Vue({
el: '#app',
data() {
return {
al: null,
mode:'',
recharge: ["$10", "$20", "$30", "$40", "$50"]
}
}
})
</script>
</body>
</html>
<style>
h1{
font-family: 'Nunito SemiBold';
font-size: 40px
}
p{
font-family: 'Nunito SemiBold';
font-size: 18px
}
</style>