Hugging Face's logo

Spaces:
nagasurendra
/
BiryaniHubcart
Sleeping

App Files Community
nagasurendra commited on
Commit
c510759
·
verified ·
1 Parent(s): 7136825

Update templates/cart.html

Browse files
Files changed (1) hide show
  1. templates/cart.html +55 -39
templates/cart.html CHANGED
@@ -7,39 +7,78 @@
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <style>
10
- body {
11
  font-family: Arial, sans-serif;
12
- background-color: #f8f9fa;
 
13
  }
14
  .cart-container {
15
  max-width: 768px;
16
- margin: 20px auto;
17
- padding: 15px;
18
  background-color: #fff;
19
- border-radius: 10px;
20
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 
 
 
 
21
  }
22
  .cart-item {
23
  display: flex;
24
  align-items: center;
25
  justify-content: space-between;
26
- border-bottom: 1px solid #dee2e6;
27
- padding: 10px 0;
28
  }
29
  .cart-item img {
30
- width: 70px;
31
- height: 70px;
32
  object-fit: cover;
33
- border-radius: 5px;
 
 
 
 
34
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  .cart-item-details {
36
  flex: 1;
37
  margin-left: 15px;
38
  }
39
- .cart-item-title {
40
- font-size: 1rem;
41
- font-weight: bold;
42
- }
43
  .cart-item-quantity {
44
  display: flex;
45
  align-items: center;
@@ -66,17 +105,7 @@
66
  text-align: right;
67
  margin-top: 15px;
68
  }
69
- .checkout-button {
70
- background-color: #5bbfc1;
71
- color: #fff;
72
- padding: 10px;
73
- border-radius: 5px;
74
- border: none;
75
- width: 100%;
76
- font-size: 1.2rem;
77
- cursor: pointer;
78
- margin-top: 10px;
79
- }
80
  .suggestion-section {
81
  margin-top: 20px;
82
  padding: 15px;
@@ -95,19 +124,6 @@
95
  object-fit: cover;
96
  border-radius: 5px;
97
  }
98
- .add-back-button {
99
- padding: 5px 15px;
100
- font-size: 0.9rem;
101
- border-radius: 20px;
102
- border: 1px solid #007bff;
103
- color: #007bff;
104
- background-color: #5bbfc1;
105
- cursor: pointer;
106
- }
107
- .add-back-button:hover {
108
- background-color: #4a5d68;
109
- color: #fff;
110
- }
111
  </style>
112
  </head>
113
  <body>
 
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <style>
10
+ body {
11
  font-family: Arial, sans-serif;
12
+ background-color: #f3f4f6;
13
+ color: #333;
14
  }
15
  .cart-container {
16
  max-width: 768px;
17
+ margin: 30px auto;
18
+ padding: 20px;
19
  background-color: #fff;
20
+ border-radius: 12px;
21
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
22
+ transition: box-shadow 0.3s ease-in-out;
23
+ }
24
+ .cart-container:hover {
25
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
26
  }
27
  .cart-item {
28
  display: flex;
29
  align-items: center;
30
  justify-content: space-between;
31
+ border-bottom: 1px solid #e0e0e0;
32
+ padding: 15px 0;
33
  }
34
  .cart-item img {
35
+ width: 80px;
36
+ height: 80px;
37
  object-fit: cover;
38
+ border-radius: 8px;
39
+ transition: transform 0.3s;
40
+ }
41
+ .cart-item img:hover {
42
+ transform: scale(1.05);
43
  }
44
+ .cart-item-title {
45
+ font-size: 1.1rem;
46
+ font-weight: 600;
47
+ }
48
+ .checkout-button {
49
+ background-color: #007bff;
50
+ color: #fff;
51
+ padding: 12px;
52
+ border-radius: 8px;
53
+ border: none;
54
+ width: 100%;
55
+ font-size: 1.2rem;
56
+ cursor: pointer;
57
+ transition: background-color 0.3s;
58
+ }
59
+ .checkout-button:hover {
60
+ background-color: #0056b3;
61
+ }
62
+ .add-back-button {
63
+ padding: 6px 20px;
64
+ font-size: 0.9rem;
65
+ border-radius: 20px;
66
+ border: 1px solid #007bff;
67
+ background-color: #007bff;
68
+ color: #fff;
69
+ cursor: pointer;
70
+ transition: background-color 0.3s, color 0.3s;
71
+ }
72
+ .add-back-button:hover {
73
+ background-color: #0056b3;
74
+ color: #fff;
75
+ }
76
+
77
  .cart-item-details {
78
  flex: 1;
79
  margin-left: 15px;
80
  }
81
+
 
 
 
82
  .cart-item-quantity {
83
  display: flex;
84
  align-items: center;
 
105
  text-align: right;
106
  margin-top: 15px;
107
  }
108
+
 
 
 
 
 
 
 
 
 
 
109
  .suggestion-section {
110
  margin-top: 20px;
111
  padding: 15px;
 
124
  object-fit: cover;
125
  border-radius: 5px;
126
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
127
  </style>
128
  </head>
129
  <body>