diff --git a/assets/css/checkout.css b/assets/css/checkout.css
new file mode 100644
index 000000000..0ce76e7ff
--- /dev/null
+++ b/assets/css/checkout.css
@@ -0,0 +1,372 @@
+:root {
+ --field-border: 1px solid #EEEEEE;
+ --accent-color: #2962FF;
+ --sidebar-color: #F1F1F1;
+ --secondary-text: #aaaaaa;
+ --radius-sm: .25em;
+ --radius-md: .50em;
+ }
+
+ * { box-sizing: border-box; }
+
+ .flex {
+ display: flex;
+ }
+ .flex-center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .flex-fill {
+ display: flex;
+ flex: 1 1;
+ }
+ .flex-vertical {
+ display: flex;
+ flex-direction: column;
+ }
+ .flex-vertical-center {
+ display: flex;
+ align-items: center;
+ }
+ .flex-between {
+ display: flex;
+ justify-content: space-between;
+ }
+ .p-sm { padding: .5em; }
+ .pl-sm { padding-left: .5em; }
+ .pr-sm { padding-right: .5em; }
+ .pb-sm { padding-bottom: .5em; }
+ .p-md { padding: 1em; }
+ .pb-md { padding-bottom: 1em; }
+ .p-lg { padding: 2em; }
+ .m-md { margin: 1em; }
+ .size-md { font-size: .85em; }
+ .size-lg { font-size: 1.5em; }
+ .size-xl { font-size: 2em; }
+ .half-width { width: 50%; }
+
+ .pointer { cursor: pointer; }
+ .uppercase{ text-transform: uppercase; }
+ .ellipsis { text-overflow: ellipsis; overflow: hidden; }
+
+ .f-main-color { color: #2962FF; }
+ .f-secondary-color { color: var(--secondary-text); }
+ .b-main-color { background: var(--accent-color); }
+ .numbers::-webkit-outer-spin-button,
+ .numbers::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ body {
+ font-size: 14px;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ .goback{
+ padding: 0px 10px;
+ background-color: #ed4643;
+ position: absolute;
+ left:10%;
+ top:10%;
+ border-radius: 10px;
+ }
+
+ .goback a{
+ text-decoration: none;
+ }
+
+ .goback h3{
+ font-size: 15px;
+ color:#E3F2FD;
+ }
+
+ .screen {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ top: 0;
+ background: #ffe3e3;
+ }
+
+ .popup {
+ position: relative;
+ width: 50em;
+ height: 35em;
+ background: #FFFFFF;
+ overflow-x: hidden;
+ overflow-y: auto;
+ border-radius: 10px;
+ box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+ }
+ .popup .close-btn {
+ position: absolute;
+ right: 0;
+ top: 0;
+ background: #FCFCFC;
+ border-bottom-left-radius: var(--radius-sm);
+ transition: background-color .25s ease-in-out;
+ }
+ .popup .close-btn:hover {
+ background: #EF5350;
+ }
+ .header {
+ padding-bottom: 1em;
+ }
+ .sidebar {
+ width: 16.5em;
+ padding-left: 2em;
+ padding-top: 5em;
+ }
+
+ .header .title {
+ font-size: 1.2em;
+ }
+ .header .title span {
+ font-weight: 300;
+ }
+
+ .card-data > div {
+ padding-bottom: 1.5em;
+ }
+ .card-data > div:first-child {
+ padding-top: 1.5em;
+ }
+
+ .card-property-title {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1;
+ margin-right: 0.5em;
+ }
+ .card-property-title strong {
+ padding-bottom: .5em;
+ font-size: .85em;
+ }
+ .card-property-title span {
+ color: var(--secondary-text);
+ font-size: .75em;
+ }
+ .card-property-value {
+ flex: 1 1;
+ }
+
+ .card-number {
+ background: #fafafa;
+ border: var(--field-border);
+ border-radius: var(--radius-md);
+ padding: .5em 1em;
+ }
+ .card-number-field * { line-height: 1; margin: 0; padding: 0;}
+ .card-number-field input {
+ width: 3em;
+ height: 100%;
+ padding: .5em 0;
+ margin: 0 .75em;
+ border: none;
+ color: #888888;
+ background: transparent;
+ text-align: center;
+ font-family: inherit;
+ font-weight: 500;
+ }
+
+ .timer span {
+ background: #ed4643;
+ color: #FFFFFF;
+ width: 1.2em;
+ padding: 4px 0;
+ display: inline-block;
+ text-align: center;
+ border-radius: var(--radius-sm);
+ }
+ .timer span+span {
+ margin-left: 2px;
+ }
+ .timer em {
+ font-style: normal;
+ }
+
+ .action button {
+ padding: 1.1em;
+ width: 100%;
+ height: 100%;
+ font-weight: 600;
+ font-size: 1em;
+ color: #FFFFFF;
+ border: none;
+ border-radius: var(--radius-md);
+ transition: background-color .2s ease-in-out;
+ background-color: #EF5350;
+ }
+ .action button:hover {
+ background: #2979FF;
+ }
+
+ .input-container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ height: 3em;
+ overflow: hidden;
+ border: var(--field-border);
+ border-radius: var(--radius-md);
+ }
+ .input-container input,
+ .input-container i {
+ line-height: 1;
+ }
+ .input-container input {
+ flex: 1 1;
+ height: 100%;
+ width: 100%;
+ text-align: center;
+ border: none;
+ border-radius: var(--radius-md);
+ font-family: inherit;
+ font-weight: 800;
+ font-size: .85em;
+ }
+ .input-container input:focus {
+ background: #E3F2FD;
+ color: #283593;
+ }
+ .input-container input::placeholder {
+ color: #ddd;
+ }
+ .input-container input::-webkit-outer-spin-button,
+ .input-container input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+ .input-container i {
+ position: absolute;
+ right: 0.5em;
+ }
+
+ .purchase-section {
+ position: relative;
+ overflow: visible;
+ padding: 0 1em 1em 1em;
+ background: var(--sidebar-color);
+ border-top-left-radius: .8em;
+ border-top-right-radius: .8em;
+ }
+ .purchase-section:before {
+ content: '';
+ position: absolute;
+ width: 1.6em;
+ height: 1.6em;
+ border-radius: 50%;
+ left: -0.8em;
+ bottom: -0.8em;
+ background: #FFFFFF;
+ }
+ .purchase-section:after {
+ content: '';
+ position: absolute;
+ width: 1.6em;
+ height: 1.6em;
+ border-radius: 50%;
+ right: -0.8em;
+ bottom: -0.8em;
+ background: #FFFFFF;
+ }
+
+ .card-mockup {
+ position: relative;
+ margin: -5em 1em 1.5em 1em;
+ padding: 1.5em 1.2em;
+ height: 15em;
+ border-radius: var(--radius-md);
+ background: #FFFFFF;
+ box-shadow: 0 .5em 1em .125em rgba(0,0,0, 0.1);
+ }
+ .card-mockup:after {
+ content: '';
+ position: absolute;
+ width: 25%;
+ top: -.2em;
+ left: 37.5%;
+ height: .2em;
+ background: var(--accent-color);
+ border-top-left-radius: .2em;
+ border-top-right-radius: .2em;
+ }
+ .card-mockup:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ width: 25%;
+ left: 37.5%;
+ height: 0.5em;
+ background: #2962ff36;
+ border-bottom-left-radius: 0.2em;
+ border-bottom-right-radius: 0.2em;
+ box-shadow: 0 2px 15px 5px #2962ff4d;
+ }
+
+ .purchase-props {
+ margin: 0;
+ padding: 0;
+ font-size: .8em;
+ width: 100%;
+ }
+ .purchase-props li {
+ width: 100%;
+ line-height: 2.5;
+ }
+ .purchase-props li span {
+ color: var(--secondary-text);
+ font-weight: 600;
+ }
+
+ .separation-line {
+ border-top: 1px dashed #aaa;
+ margin: 0 .8em;
+ }
+
+ .total-section {
+ position: relative;
+ overflow: hidden;
+
+ padding: 1em;
+ background: var(--sidebar-color);
+ border-bottom-left-radius: .8em;
+ border-bottom-right-radius: .8em;
+ }
+ .total-section:before {
+ content: '';
+ position: absolute;
+ width: 1.6em;
+ height: 1.6em;
+ border-radius: 50%;
+ left: -0.8em;
+ top: -0.8em;
+ background: #FFFFFF;
+ }
+ .total-section:after {
+ content: '';
+ position: absolute;
+ width: 1.6em;
+ height: 1.6em;
+ border-radius: 50%;
+ right: -0.8em;
+ top: -0.8em;
+ background: #FFFFFF;
+ }
+ .total-label {
+ font-size: 0.8em;
+ padding-bottom: 0.5em;
+ }
+ .total-section strong {
+ font-size: 1.5em;
+ font-weight: 800;
+ }
+ .total-section small {
+ font-weight: 600;
+ }
\ No newline at end of file
diff --git a/assets/html/checkout.html b/assets/html/checkout.html
new file mode 100644
index 000000000..de7c27a25
--- /dev/null
+++ b/assets/html/checkout.html
@@ -0,0 +1,200 @@
+
+
+
+
+
+ Checkout
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/js/checkout.js b/assets/js/checkout.js
new file mode 100644
index 000000000..61f8ea0fb
--- /dev/null
+++ b/assets/js/checkout.js
@@ -0,0 +1,47 @@
+
+/* COPY INPUT VALUES TO CARD */
+const bounds = document.querySelectorAll('[data-bound]');
+
+for(let i = 0; i < bounds.length; i++) {
+ const targetId = bounds[i].getAttribute('data-bound');
+ const defValue = bounds[i].getAttribute('data-def');
+ const targetEl = document.getElementById(targetId);
+ bounds[i].addEventListener('keyup', () => targetEl.innerText = bounds[i].value || defValue );
+}
+
+
+/* TOGGLE CVC DISPLAY MODE */
+const cvc_toggler = document.getElementById('cvc_toggler');
+
+cvc_toggler.addEventListener('click', () => {
+ const target = cvc_toggler.getAttribute('data-target');
+ const el = document.getElementById(target);
+ el.setAttribute('type', el.type === 'text' ? 'password' : 'text');
+});
+
+
+
+const timer = document.querySelector('[data-id=timer]');
+let timeLeft = 5 * 60;
+
+const tick = () => {
+ if (timeLeft >= 0) {
+ const minutes = Math.floor(timeLeft / 60);
+ const seconds = timeLeft % 60;
+
+ // Display the minutes
+ timer.children[0].innerText = Math.floor(minutes / 10); // First digit of minutes
+ timer.children[1].innerText = minutes % 10; // Second digit of minutes
+
+ // Display the seconds
+ timer.children[3].innerText = Math.floor(seconds / 10); // First digit of seconds
+ timer.children[4].innerText = seconds % 10; // Second digit of seconds
+
+ timeLeft--;
+ } else {
+ clearInterval(interval); // Stop the timer when time is up
+ }
+}
+
+const interval = setInterval(tick, 1000);
+tick();
diff --git a/index.html b/index.html
index 34cdfe4c8..9de69412d 100644
--- a/index.html
+++ b/index.html
@@ -2205,7 +2205,7 @@ Fresh Pages - New Releases
-
+
@@ -2220,7 +2220,7 @@ Timeless Classics - Aged Wonders
-
+
@@ -2238,7 +2238,7 @@ Hidden Treasures - Vintage Editions
-
+