diff --git a/app/static/css/application.css b/app/static/css/application.css index 17df88a..23e0ed3 100644 --- a/app/static/css/application.css +++ b/app/static/css/application.css @@ -2,10 +2,11 @@ html, body { + height: 100%; width: 100%; margin: 0; + padding: 0; font-family: "Fakt", "Segoe UI", sans-serif, Helvetica, Arial; - /*background-color: #E4D8B4; - All things retro */ } *, @@ -44,6 +45,48 @@ a:hover { box-sizing: border-box; } +.row { + height: 100%; +} + +.dropIn-UI { + background-color: var(--secondary-text); +} + +.config-UI { + background-color: var(--main-grey); + /* border-top-left-radius: 20px; + border-bottom-left-radius: 20px; */ + box-shadow: 1px 1px 5px 1px rgb(207, 207, 207); +} + +.config-Title { +font-family: "Roboto", sans-serif; +font-weight: 400; +font-weight: bold; +} + +.tab-options { +color: var(--main-text); +font-size: 10px; +margin-top: 1.5rem; +} + +.config-content-panel { +padding: 1rem; +} + +.titleFonts { +font-family: var(--main-font); +font-weight: 600; +font-size: 20px; +} + +.textFonts { +font-family: var(--main-font); +font-size: 12px; +} + /* Buttons */ .button { @@ -507,22 +550,6 @@ a:hover { /* end Payments page */ -/* PBL page */ -.qrcontainer { - padding: 10px; -} - -.pbl-conatiner { - margin-top: 100px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - width: 100%; - max-width: 1110px; -} - -/* end PBL page */ /* Status page */ @@ -564,6 +591,44 @@ a:hover { /* end Status page */ +/* Test card container */ + +#test-cards-btn { + width: 15%; + margin-left: 2%; + padding: 0; + height: 0%; + background-color: rgb(6, 6, 46); + color: var(--main-grey); + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} + +.test-cards-display { +height: 10%; +width: 30%; +background-color: rgb(6, 6, 46); +} + +.collapseText { +color: var(--main-grey); +font-family: var(--main-font); +font-size: 1rem; +font-weight: 400; +} + +.testCardBtn { +font-size: 1rem; +font-weight: 300; +margin-left: 5px; +margin-bottom: 0; +padding-bottom: 0; +margin-top: 10px; +} + +/* End of card container */ + + /* Virtual Card CSS */ .card{ width: 290px; @@ -715,6 +780,7 @@ a:hover { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } +/* end of virtual card css */ /* :root { --back-rotate : rotateY(0deg); @@ -736,6 +802,11 @@ a:hover { --bg-color: white; --dropin-color: #f7f8f9; --dropin-tab-color: white; + --main-green: #0abf53; + --main-grey: #f3f5f9; + --main-text: #00112c; + --secondary-text: #ffffff; + --main-font: "Roboto", sans-serif; } .card-visited .card__back { diff --git a/app/templates/component.html b/app/templates/component.html index 739eaf1..4a3e2d7 100644 --- a/app/templates/component.html +++ b/app/templates/component.html @@ -2,22 +2,41 @@ - + - - - - + + + + + + + + + + + + + Checkout Create - + --> - - +
+
+ +
+
+ +
- - + +
+ +
+
+ +
+
+

Design Your Own Checkout

+ +
+ + +
+ +
+ +
+
+

Location

+
+
+ +
+

+ Choose your shopper location and language +

+
+ +
+

Shopper Location

+
+ +
+ + + +
+
+
+ +
+ +
+

Open first payment method

+
+ + +
three
+
+
+ + + +
+
+
+
-
-
-
- -
-
-
- Change country: -
- - -
-
-

this thing

-
- -
-
- - -
@@ -135,10 +440,7 @@
Button colour: -
- Background colour: - -
+
Dropin background colour: @@ -157,102 +459,8 @@
-
- - - -
-
-
- - -

4111 1111 1111 1111

-
- Card holder -

John Doe

-
-
- Expires -

03/30

-
-
-
-
-
-
-

737

-
- - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - + --> diff --git a/index.html b/index.html index cfbc227..3b0b67b 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> + @@ -25,6 +26,9 @@ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> + + + Hello, world!