From 33322ee276ac6f4fb4d900bcbdc84886b49c8103 Mon Sep 17 00:00:00 2001
From: Ricardo Sousa <71410420+RicardoSS27@users.noreply.github.com>
Date: Fri, 21 Oct 2022 13:57:06 -0300
Subject: [PATCH 1/7] Add files via upload
---
src/main.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 69 insertions(+), 1 deletion(-)
diff --git a/src/main.js b/src/main.js
index 5cb2f01..2b039e1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1 +1,69 @@
-import "./css/index.css"
+import "./css/index.css"
+import IMask from 'imask'
+
+const ccBgColor01 = document.querySelector(".cc-bg svg > g g:nth-child(1) path")
+const ccBgColor02 = document.querySelector(".cc-bg svg > g g:nth-child(2) path")
+const ccColor = document.querySelector(".cc-logo span:nth-child(2) img ")
+
+function setCardType(type) {
+ const colors = {
+ "visa": ["#436D99", "#2D57F2"],
+ "mastercard": ["#DF6F29", "#C69347"],
+ "default": ["black", "gray"],
+ }
+
+ ccBgColor01.setAttribute("fill", colors[type][0])
+ ccBgColor02.setAttribute("fill", colors[type][1])
+ ccColor.setAttribute("src", `cc-${type}.svg`)
+}
+
+globalThis.setCardType = setCardType
+
+
+const securityCode = document.querySelector('#security-code')
+const securityCodePattern = {
+ mask: "0000"
+}
+const securityCodeMasked = IMask(securityCode, securityCodePattern)
+
+const expirationdate = document.querySelector('#expiration-date')
+const expirationdatePattern = {
+ mask: "MM{/}YY",
+ blocks: {
+ YY: {
+ mask: IMask.MaskedRange,
+ from: String(new Date().getFullYear()).slice(2),
+ to: String(new Date().getFullYear() + 10).slice(2),
+ },
+ MM: {
+ mask: IMask.MaskedRange,
+ from: 1,
+ to: 12,
+ },
+ },
+}
+const expirationdateMasked = IMask(expirationdate, expirationdatePattern)
+
+const cardnumber = document.querySelector("#card-number")
+const cardnumberPattern = {
+ mask: [
+ {
+ mask: '0000 0000 0000 0000',
+ regex: /^(5[1-5]\d{0,2}|22[2-9]\d{0,1}|2[3-7]\d{0,2})\d{0,12}/,
+ cardtype: "mastercard",
+ },
+ {
+ mask: '0000 0000 0000 0000',
+ regex: /^4\d{0,15}/,
+ cardtype: "visa",
+ },
+ {
+ mask: '0000 0000 0000 0000',
+ regex: //,
+ cardtype: "default",
+ }
+
+ ]
+}
+
+const cardnumberMasked = IMask(cardnumber, cardnumberPattern)
From 1e4ce95495fede5907ac2a1dadb509778622f1fb Mon Sep 17 00:00:00 2001
From: Ricardo Sousa <71410420+RicardoSS27@users.noreply.github.com>
Date: Fri, 21 Oct 2022 13:58:34 -0300
Subject: [PATCH 2/7] Add files via upload
---
src/css/index.css | 100 +++++++++++++++++++++++-----------------------
1 file changed, 50 insertions(+), 50 deletions(-)
diff --git a/src/css/index.css b/src/css/index.css
index e87a091..4596a67 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,50 +1,50 @@
-@import "base.css";
-@import "credit-card.css";
-@import "form.css";
-
-@media (max-width: 420px) {
- :root {
- font-size: 50%;
- }
-
- body {
- background: #202024;
- }
-
- #app {
- background: none;
- border: none;
- }
-
- .cc-bg svg {
- width: 100%;
- height: auto;
- }
-}
-
-@media (min-width: 780px) {
- #app {
- grid-template-areas:
- "A B"
- "C B";
-
- width: fit-content;
- max-width: fit-content;
- padding-inline: 4.8rem;
-
- grid-template-columns: 0.8fr 1fr;
- }
-
- #app header {
- grid-area: A;
- }
-
- #app section.cc {
- grid-area: B;
- align-self: center;
- }
-
- #app form {
- grid-area: C;
- }
-}
+@import "base.css";
+@import "credit-card.css";
+@import "form.css";
+
+@media (max-width: 420px) {
+ :root {
+ font-size: 50%;
+ }
+
+ body {
+ background: #202024;
+ }
+
+ #app {
+ background: none;
+ border: none;
+ }
+
+ .cc-bg svg {
+ width: 100%;
+ height: auto;
+ }
+}
+
+@media (min-width: 780px) {
+ #app {
+ grid-template-areas:
+ "A B"
+ "C B";
+
+ width: fit-content;
+ max-width: fit-content;
+ padding-inline: 4.8rem;
+
+ grid-template-columns: 0.8fr 1fr;
+ }
+
+ #app header {
+ grid-area: A;
+ }
+
+ #app section.cc {
+ grid-area: B;
+ align-self: center;
+ }
+
+ #app form {
+ grid-area: C;
+ }
+}
From 6c245523b24d9544b996656aecf4299b833fd469 Mon Sep 17 00:00:00 2001
From: Ricardo Sousa <71410420+RicardoSS27@users.noreply.github.com>
Date: Fri, 21 Oct 2022 14:07:55 -0300
Subject: [PATCH 3/7] Update settings.json
---
.vscode/settings.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8c0b1ca..c820c92 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,7 @@
{
// editor
"editor.wordWrap": "on",
- "editor.fontSize": 18,
+ "editor.fontSize": 14,
"editor.lineHeight": 30,
"editor.tabSize": 2,
"editor.bracketPairColorization.enabled": true,
From 4791f7d9e4993ff6368c7bb7e075e1c41d4cde8c Mon Sep 17 00:00:00 2001
From: Ricardo Sousa <71410420+RicardoSS27@users.noreply.github.com>
Date: Fri, 21 Oct 2022 14:08:52 -0300
Subject: [PATCH 4/7] Add files via upload
---
index.html | 328 ++++++++++++++++++++++++++---------------------------
1 file changed, 164 insertions(+), 164 deletions(-)
diff --git a/index.html b/index.html
index 185cfbf..3eee874 100644
--- a/index.html
+++ b/index.html
@@ -1,164 +1,164 @@
-
-
-
-
-
-
-
-
-
- Rocketpay
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
1234 5678 9012 3456
-
-
-
Nome do titular
-
FULANO DA SILVA
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
1234 5678 9012 3456
+
+
+
Nome do titular
+
FULANO DA SILVA
+
+
+
+
+
+
+
-