amazon-clone-two/cart.html at master · CleverProgrammers/amazon-clone-two · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon 2.0</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-firestore.js"></script>
    <script src="./firebase.js"></script>
    <script src="./header.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jdenticon@3.1.0/dist/jdenticon.min.js" async
        integrity="sha384-VngWWnG9GS4jDgsGEUNaoRQtfBGiIKZTiXwm9KpgAeaRn6Y/1tAFiyXqSzqC8Ga/"
        crossorigin="anonymous">
    </script>
    <script src="./cart.js"></script>
</head>
<body>
    <div class="bg-white w-full">
        <div class="header h-16 bg-gray-900 flex items-center">
            <div class="logo w-1/5 h-16 ml-10 ">
                <a href="./index.html">
                    <img class="w-28 h-16 object-contain"   src="https://www.pinclipart.com/picdir/big/57-576184_view-our-amazon-storefront-amazon-logo-white-png.png" >
                </a>
            </div>
            <input class="h-9 w-30 bg-gray-800 border border-gray-500 border-opacity-75 rounded-l-xl px-3 text-white ml-6 focus:outline-none placeholder-white" id="search" type="text" placeholder="Search...">
            <div class="categories h-9 w-30 bg-gray-800 border border-gray-500 border-opacity-75 px-3 text-white flex items-center ">
                categories
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </div>
            <div class="search-icon h-9 w-10 bg-yellow-500 rounded-r-xl flex justify-center items-center text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
            </div>
            <!-- Right Icons -->
            <div class="icons text-white flex items-center ml-auto mr-8 w-48 h-16 justify-around" >
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                  </svg>
                  <!-- Cart Icon -->
                  <div class="relative cart-icon h-10 w-10 bg-yellow-500 flex items-center justify-center rounded-xl">
                    <div class="cart-item-number text-gray-800 text-xs absolute -top-1 -right-1 h-4 w-4 bg-white rounded-full flex justify-center items-center"></div>
                    <svg class="h-4 w-4 text-gray-600" xmlns="http://owww.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                      </svg>
                  </div>
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                  </svg>
                  <svg class="rounded h-12 w-12" data-jdenticon-value="Jessy"></svg>
            </div>
        </div>
        <div class="main h-screen flex">
            <div class="hidden md:block border-t-2 border-gray-700 main-sidebar w-1/5 bg-gray-900 p-6">
                <div class="sidebar-categories">
                    <div class="sidebar-main-category text-yellow-500 cursor-pointer flex font-bold p-2 bg-gray-700 rounded-lg">
                        <span class="w-8">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                            </svg>
                        </span>
                        <span>Categories</span>
                    </div>
                    <div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
                        <span class="w-8"></span>
                        <span>Echo and Alexa</span>
                    </div>
                    <div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
                        <span class="w-8"></span>
                        <span>Kindle</span>
                    </div>
                    <div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
                        <span class="w-8"></span>
                        <span>Books</span>
                    </div>
                    <div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2 mb-2">
                        <span class="w-8"></span>
                        <span>Electronics</span>
                    </div>
                    <div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
                        <span class="w-8"></span>
                        <span>Home and Garden</span>
                    </div>
                    <div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
                        <span class="w-8"></span>
                        <span>Fashion</span>
                    </div>
                    <div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2 hover:bg-gray-700 rounded-xl mb-4">
                        <span class="w-8">
                            <i class="fas fa-percent"></i>
                        </span>
                        <span>Sell on Amazon</span>
                    </div>
                    <div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2 hover:bg-gray-700 rounded-xl ">
                        <span class="w-8">
                            <i class="far fa-question-circle"></i>
                        </span>
                        <span>Help</span>
                    </div>
                </div>
            </div>
            <div class="main-section flex-1 p-6 bg-white">
                <h1 class="font-bold text-gray-400 text-3xl mb-6">Shopping Cart</h1>
                <div class="font-bold text-gray-400 table-titles flex">
                    <h2 class="flex-grow">Product</h2>
                    <h2 class="w-48">Count</h2>
                    <h2 class="w-48">Total Cost</h2>
                    <span class="w-10"></span>
                </div>
                <div class="cart-items mt-5">
                    <!-- Cart Items from DB -->
                </div>
                <div class="complete-order flex justify-end mt-10">
                    <div class="total-cost mr-7">
                        <h2 class="text-gray-400">Total Cost</h2>
                        <div class="total-cost-number text-gray-600 font-bold total-cost-number text-3xl">
                            $1,439.00
                        </div>
                    </div>
                    <div class="complete-order-button w-56 flex items-center justify-center bg-yellow-500 rounded text-white cursor-pointer hover:bg-yellow-600" >
                        Complete Order
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>