Nenhuma descrição
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

myaccount.html 35KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <link rel="shortcut icon" type="image/x-icon" href="./dist/assets/imgs/favicon.gif">
  8. <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
  9. <link rel="stylesheet" href="./dist/css/main.css" />
  10. <link rel="stylesheet" href="./style.css">
  11. <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.carousel.min.css">
  12. <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.theme.default.min.css">
  13. <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
  14. <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
  15. <link rel="stylesheet" href="./dist/css/vendor/vandella.css">
  16. <link rel="stylesheet" href="./dist/css/vendor/jellybelly.css">
  17. <link rel="stylesheet" href="./dist/css/vendor/fontello.css">
  18. <link rel="stylesheet" href="./dist/css/plugins/easyzoom.css">
  19. <link rel="stylesheet" href="./dist/css/plugins/slick.css">
  20. <link rel="stylesheet" href="./dist/css/plugins/nice-select.css">
  21. <link rel="stylesheet" href="./dist/css/plugins/animate.css">
  22. <link rel="stylesheet" href="./dist/css/plugins/magnific-popup.css">
  23. <link rel="stylesheet" href="./dist/css/plugins/jquery-ui.css">
  24. <link rel="stylesheet" href="./dist/css/style.css">
  25. <link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
  26. <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
  27. <title>My Account | Anwi</title>
  28. </head>
  29. <body class="my_account_page">
  30. <!-- navbar -->
  31. <div id="navbar-head" class="bg-white"></div>
  32. <!-- end-navbar -->
  33. <!-- main-body -->
  34. <main class="shopping-cart-main-container main-body pb-0">
  35. <section class="pt-5">
  36. <div class="my-account-wrapper bg-gradient-violet py-md-5">
  37. <div class="container pt-5">
  38. <div>
  39. <h4>My Account </h4>
  40. </div>
  41. <div class="row pt-md-5 pt-3">
  42. <div class="col-lg-12">
  43. <!-- My Account Page Start -->
  44. <div class="myaccount-page-wrapper">
  45. <!-- My Account Tab Menu Start -->
  46. <div class="row">
  47. <div class="col-lg-3 col-md-4">
  48. <div class="myaccount-tab-menu nav" role="tablist">
  49. <a href="#dashboad" class="" data-bs-toggle="tab">Overview</a>
  50. <a href="#orders" data-bs-toggle="tab" class="active"> My Orders</a>
  51. <a href="#warrenty" data-bs-toggle="tab">Warranty Products </a>
  52. <a href="#payment-method" data-bs-toggle="tab" class="d-none"> Payment Method</a>
  53. <a href="#account-info" data-bs-toggle="tab">Profile</a>
  54. <a href="#address-edit" data-bs-toggle="tab">address</a>
  55. <a href="./login.html">Logout</a>
  56. </div>
  57. </div>
  58. <!-- My Account Tab Menu End -->
  59. <!-- My Account Tab Content Start -->
  60. <div class="col-lg-9 col-md-8">
  61. <div class="tab-content" id="myaccountContent">
  62. <!-- Single Tab Content Start -->
  63. <div class="tab-pane fade " id="dashboad" role="tabpanel">
  64. <div class="myaccount-content p-lg-4">
  65. <div class="row bg-gray p-lg-4 align-items-end">
  66. <div class="col-md-5 col-12">
  67. <div class="row align-items-center">
  68. <div class="col-md-5">
  69. <img src="./dist/assets/imgs/account_warrenty/profile-icon.png" class="w-md-65 w-50"/>
  70. </div>
  71. <div class="col-md-7">
  72. <h6>Name :<span class="text-black-50"> Anwi</span></h6>
  73. <h6>Phone :<span class="text-black-50"> 9876543215</span></h6>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="col-md-5"></div>
  78. <div class="col-md-2 col-12 text-end">
  79. <a href="#" class="btn btn-outline-primary px-4">Edit</a>
  80. </div>
  81. </div>
  82. <div class="row py-4 justify-content-md-between">
  83. <div class="col-lg-3 col-md-5 mx-lg-3 mx-md-1 mb-3 border shadow rounded-2">
  84. <a href="#">
  85. <div class="border-0 card text-center">
  86. <div class="card-body">
  87. <img src="./dist/assets/imgs/account_warrenty/profile-orders.png" class="w-25 img-fluid"/>
  88. <h6>Orders</h6>
  89. <p class="mb-0 text-secondary">Check your order status</p>
  90. </div>
  91. </div>
  92. </a>
  93. </div>
  94. <div class="col-lg-3 col-md-5 mx-lg-3 mx-md-1 mb-3 border shadow rounded-2">
  95. <a href="#">
  96. <div class="border-0 card text-center">
  97. <div class="card-body">
  98. <img src="./dist/assets/imgs/account_warrenty/profile-collections.png" class="w-25 img-fluid"/>
  99. <h6>Warranty</h6>
  100. <p class="mb-0 text-secondary">All your curated product collections</p>
  101. </div>
  102. </div>
  103. </a>
  104. </div>
  105. <div class="col-lg-3 col-md-5 mx-lg-3 mx-md-1 mb-3 border shadow rounded-2">
  106. <a href="#">
  107. <div class="border-0 card text-center">
  108. <div class="card-body">
  109. <img src="./dist/assets/imgs/account_warrenty/profile-myntra-credit.png" class="w-25 img-fluid"/>
  110. <h6>Anwi Credit</h6>
  111. <p class="mb-0 text-secondary">Manage all your refunds & gift cards</p>
  112. </div>
  113. </div>
  114. </a>
  115. </div>
  116. <div class="col-lg-3 col-md-5 mx-lg-3 mx-md-1 mb-3 border shadow rounded-2">
  117. <a href="#">
  118. <div class="border-0 card text-center">
  119. <div class="card-body">
  120. <img src="./dist/assets/imgs/account_warrenty/profile-myntrapoints.png" class="w-25 img-fluid"/>
  121. <h6>AnwCash</h6>
  122. <p class="mb-0 text-secondary">Earn AnwCash as you shop and use them in checkout</p>
  123. </div>
  124. </div>
  125. </a>
  126. </div>
  127. <div class="col-lg-3 col-md-5 mx-lg-3 mx-md-1 mb-3 border shadow rounded-2">
  128. <a href="#">
  129. <div class="border-0 card text-center">
  130. <div class="card-body">
  131. <img src="./dist/assets/imgs/account_warrenty/profile-cards.png" class="w-25 img-fluid"/>
  132. <h6>Saved Cards</h6>
  133. <p class="mb-0 text-secondary">Save your cards for faster checkout</p>
  134. </div>
  135. </div>
  136. </a>
  137. </div>
  138. <div class="col-lg-3 col-md-5 mx-lg-3 mx-md-1 mb-3 border shadow rounded-2">
  139. <a href="#">
  140. <div class="border-0 card text-center">
  141. <div class="card-body">
  142. <img src="./dist/assets/imgs/account_warrenty/upiIcon.png" class="w-25 img-fluid"/>
  143. <h6>Saved VPA</h6>
  144. <p class="mb-0 text-secondary">View your saved VPA</p>
  145. </div>
  146. </div>
  147. </a>
  148. </div>
  149. <div class="col-lg-3 col-md-5 mx-lg-3 mx-md-1 mb-3 border shadow rounded-2 ">
  150. <a href="#">
  151. <div class="border-0 card text-center">
  152. <div class="card-body">
  153. <img src="./dist/assets/imgs/account_warrenty/profile-address.png" class="w-25 img-fluid"/>
  154. <h6>Addresses</h6>
  155. <p class="mb-0 text-secondary">Save addressess for a hassle free checkout</p>
  156. </div>
  157. </div>
  158. </a>
  159. </div>
  160. <div class="col-lg-3 col-md-5 mx-lg-3 mx-md-1 mb-3 border shadow rounded-2">
  161. <a href="#">
  162. <div class="border-0 card text-center">
  163. <div class="card-body">
  164. <img src="./dist/assets/imgs/account_warrenty/profile-coupons.png" class="w-25 img-fluid"/>
  165. <h6>Coupons</h6>
  166. <p class="mb-0 text-secondary">Manage coupons for additional discounts</p>
  167. </div>
  168. </div>
  169. </a>
  170. </div>
  171. <div class="col-lg-3 col-md-5 mx-lg-3 mx-md-1 mb-3 border shadow rounded-2">
  172. <a href="#">
  173. <div class="border-0 card text-center">
  174. <div class="card-body">
  175. <img src="./dist/assets/imgs/account_warrenty/profile-edit.png" class="w-25 img-fluid"/>
  176. <h6>Profile Details</h6>
  177. <p class="mb-0 text-secondary">Change your profile details & password</p>
  178. </div>
  179. </div>
  180. </a>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. <!-- Single Tab Content End -->
  186. <!-- Single Tab Content Start -->
  187. <div class="tab-pane fade active show" id="orders" role="tabpanel">
  188. <div class="myaccount-content">
  189. <h3>Orders</h3>
  190. <div class="border-0 border-bottom card rounded-0 shadow-sm mb-2 order-cards">
  191. <div class="row align-items-center">
  192. <div class="col-md-3 text-center">
  193. <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="img-fluid w-75"/>
  194. </div>
  195. <div class="col-md-9">
  196. <div class="row ps-md-2 ps-3">
  197. <div class="col-md-5">
  198. <div>Serial No : <span class="text-secondary fs-9">#7907987897348</span></div>
  199. <div>Purchase Date : <span class="text-secondary fs-9">Feb 1, 2023</span></div>
  200. </div>
  201. <div class="col-md-7">
  202. <div class="fs-9">Warrenty Expairy Date : <span class="bg-warning px-2 fs-9 rounded-2">Mar 20, 2023</span></div>
  203. <div class="row">
  204. <div class="col-md-5 col-6"> Status :</div>
  205. <div class="col-md-7 col-6"><span class="btn btn-success py-0 fs-9">Running</span></div>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. <div class="p-3">
  212. <p class="text-success d-done">Add Product Serial Number</p>
  213. <div class="d-none">
  214. <button class="btn btn-primary me-2">Send Remainder</button>
  215. <button class="btn btn-primary">Extended warranty History</button>
  216. </div>
  217. </div>
  218. </div>
  219. <div class="border-0 border-bottom card rounded-0 shadow-sm mb-2 order-cards">
  220. <div class="row align-items-center">
  221. <div class="col-md-3 text-center">
  222. <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="img-fluid w-75"/>
  223. </div>
  224. <div class="col-md-9">
  225. <div class="row ps-md-2 ps-3">
  226. <div class="col-md-5">
  227. <div class="fs-9">Serial No : <span class="text-secondary fs-9">#7907987897348</span></div>
  228. <div class="fs-9">Purchase Date : <span class="text-secondary fs-9">Feb 1, 2023</span></div>
  229. </div>
  230. <div class="col-md-7">
  231. <div class="fs-9">Warrenty Expairy Date : <span class="bg-warning px-2 fs-9 rounded-2">Mar 20, 2023</span></div>
  232. <div class="row">
  233. <div class="col-md-5 col-6"> Status :</div>
  234. <div class="col-md-7 col-6"> <span class="btn btn-success py-0 fs-9">Running</span></div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. <div class="p-3">
  241. <p class="text-success d-none">Add Product Serial Number</p>
  242. <div class="d-none">
  243. <button class="btn btn-primary me-2">Send Remainder</button>
  244. <button class="btn btn-primary">Extended warranty History</button>
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. <!-- Single Tab Content End -->
  251. <!-- Single Tab Content Start -->
  252. <div class="tab-pane fade" id="payment-method" role="tabpanel">
  253. <div class="myaccount-content">
  254. <h3>Payment Method</h3>
  255. <p class="saved-message">You Can't Saved Your Payment Method yet.</p>
  256. </div>
  257. </div>
  258. <!-- Single Tab Content End -->
  259. <!-- Single Tab Content Start -->
  260. <div class="tab-pane fade" id="address-edit" role="tabpanel">
  261. <div class="myaccount-content pb-0">
  262. <div class="row">
  263. <div class="col-md-6 py-md-2">
  264. <h3 class="mb-0 border-0 pb-0">Saved Address</h3>
  265. </div>
  266. <div class="col-md-6 text-end py-md-2">
  267. <a href="#" class="btn btn-outline-primary">+ ADD NEW ADDRESS</a>
  268. </div>
  269. </div>
  270. <address>
  271. <p><strong>Alex Tuntuni</strong></p>
  272. <p>1355 Market St, Suite 900 <br>
  273. San Francisco, CA 94103</p>
  274. <p>Mobile: (123) 456-7890</p>
  275. </address>
  276. <div class="row border-top">
  277. <div class="col-md-6 border-end text-center py-md-2">
  278. <a href="#" class="check-btn sqr-btn">Edit Address</a>
  279. </div>
  280. <div class="col-md-6 text-center py-md-2">
  281. <a href="#" class="check-btn sqr-btn">Remove</a>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. <div class="tab-pane fade" id="warrenty" role="tabpanel">
  287. <div class="myaccount-content pb-0">
  288. <div id="product-2" class="tab-pane active pb-5">
  289. <h5 class="mb-md-4">Enter your Product Serial no. :</h5>
  290. <div class="row ">
  291. <div class="col-md-12">
  292. <form>
  293. <div class="row pt-2">
  294. <div class="col-md-6">
  295. <div class="col-md-12 pb-4 d-none">
  296. <input type="text" class="form-control border-0 shadow-none border-bottom" placeholder="Enetr Mobile Number.." required />
  297. </div>
  298. <div class="col-md-12 text-center d-none py-md-4 py-2">
  299. <sapn class="p-2 shadow bg-gray rounded-2">Or</span>
  300. </div>
  301. <div class="col-md-12 pb-4">
  302. <input type="text"
  303. class="form-control border-0 shadow-none border-bottom"
  304. placeholder="Enetr Serial Number.." required />
  305. </div>
  306. <div class="col-md-12 pb-4 d-none">
  307. <input type="text"
  308. class="form-control border-0 shadow-none border-bottom"
  309. placeholder="Enetr captcha" required />
  310. </div>
  311. <div class="col-md-12 pb-4 px-md-2 text-center d-none">
  312. <span class="fw-bold pe-3">W p 5 C n</span> <span
  313. class="cursor-pointer text-primary">Refresh captcha</span>
  314. </div>
  315. <div class="col-md-6 pb-4 px-md-2">
  316. </div>
  317. <div class="col-md-12 pb-4 text-center">
  318. <span class="action_btn">
  319. <button class="btn border px-5">Submit</button>
  320. </span>
  321. </div>
  322. </div>
  323. </div>
  324. </form>
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. </div>
  330. <!-- Single Tab Content End -->
  331. <!-- Single Tab Content Start -->
  332. <div class="tab-pane fade" id="account-info" role="tabpanel">
  333. <div class="myaccount-content">
  334. <h3>Account Details</h3>
  335. <div class="account-details-form">
  336. <form action="#">
  337. <div class="row">
  338. <div class="col-lg-6">
  339. <div class="single-input-item">
  340. <label for="first-name" class="required">First Name</label>
  341. <input type="text" id="first-name" class="form-control shadow-none rounded-0">
  342. </div>
  343. </div>
  344. <div class="col-lg-6">
  345. <div class="single-input-item">
  346. <label for="last-name" class="required">Last Name</label>
  347. <input type="text" id="last-name" class="form-control shadow-none rounded-0">
  348. </div>
  349. </div>
  350. </div>
  351. <div class="single-input-item">
  352. <label for="display-name" class="required">Display Name</label>
  353. <input type="text" id="display-name" class="form-control shadow-none rounded-0">
  354. </div>
  355. <div class="single-input-item">
  356. <label for="email" class="required">Email Addres</label>
  357. <input type="email" id="email" class="form-control shadow-none rounded-0">
  358. </div>
  359. <fieldset>
  360. <legend>Password change</legend>
  361. <div class="single-input-item">
  362. <label for="current-pwd" class="required">Current Password</label>
  363. <input type="password" id="current-pwd" class="form-control shadow-none rounded-0">
  364. </div>
  365. <div class="row">
  366. <div class="col-lg-6">
  367. <div class="single-input-item">
  368. <label for="new-pwd" class="required">New Password</label>
  369. <input type="password" id="new-pwd" class="form-control shadow-none rounded-0">
  370. </div>
  371. </div>
  372. <div class="col-lg-6">
  373. <div class="single-input-item">
  374. <label for="confirm-pwd" class="required">Confirm Password</label>
  375. <input type="password" id="confirm-pwd" class="form-control shadow-none rounded-0">
  376. </div>
  377. </div>
  378. </div>
  379. </fieldset>
  380. <div class="single-input-item">
  381. <div class="row align-items-center">
  382. <div class="col-md-6 col-6 text-center">
  383. <button class="check-btn sqr-btn ">Save Changes</button>
  384. </div>
  385. <div class="col-md-6 col-6 text-center">
  386. <button class="check-btn sqr-btn ">Edit Profile</button>
  387. </div>
  388. </div>
  389. </div>
  390. </form>
  391. </div>
  392. </div>
  393. </div> <!-- Single Tab Content End -->
  394. </div>
  395. </div> <!-- My Account Tab Content End -->
  396. </div>
  397. </div> <!-- My Account Page End -->
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. </section>
  403. </main>
  404. <!-- footer -->
  405. <div id="footer-head"></div>
  406. <!-- end-footer -->
  407. <!-- <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script> -->
  408. <script src="./dist/js/jquery.min.js"></script>
  409. <script src="./dist/js/navbar.js"></script>
  410. <script src="./dist/js/footer.js"></script>
  411. <script src="./dist/js/cookies.min.js"></script>
  412. <script src="./dist/js/fontawesome.all.js"></script>
  413. <script src="./dist/js/fontawesome.min.js"></script>
  414. <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
  415. <script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
  416. <script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
  417. <script src="./dist/js/vendor/bootstrap.min.js"></script>
  418. <script src="./dist/js/plugins/slick.js"></script>
  419. <script src="./dist/js/plugins/wow.js"></script>
  420. <script src="./dist/js/plugins/svg-injector.min.js"></script>
  421. <script src="./dist/js/plugins/jquery.nice-select.min.js"></script>
  422. <script src="./dist/js/plugins/mouse-parallax.js"></script>
  423. <script src="./dist/js/plugins/images-loaded.js"></script>
  424. <script src="./dist/js/plugins/isotope.js"></script>
  425. <script src="./dist/js/plugins/jquery-ui.js"></script>
  426. <script src="./dist/js/plugins/magnific-popup.js"></script>
  427. <!-- Main JS -->
  428. <script src="./dist/js/main.js"></script>
  429. <script>
  430. $(".order-cards").each(function(){
  431. $(".order-cards").css("cursor","pointer")
  432. $(this).click(function(){
  433. window.location.href = "./orderdetails.html";
  434. })
  435. })
  436. </script>
  437. </body>
  438. </html>