Fix(UI): Reskin with milder colour theme and improved spacing in layout..

This commit is contained in:
2025-02-02 02:02:33 +00:00
parent 5a7d5417d0
commit dd10b12197
44 changed files with 320 additions and 310 deletions

View File

@@ -14,9 +14,13 @@ Data model for services view
from models.model_view_base import Model_View_Base from models.model_view_base import Model_View_Base
# from routes import bp_home # from routes import bp_home
# external # external
from typing import ClassVar
class Model_View_Services(Model_View_Base): class Model_View_Services(Model_View_Base):
# Attributes FLAG_FAQ: ClassVar[str] = 'faq'
FLAG_SERVICES: ClassVar[str] = 'services'
FLAG_TECHNOLOGIES: ClassVar[str] = 'technologies'
@property @property
def title(self): def title(self):
return 'Services' return 'Services'

View File

@@ -6,15 +6,15 @@ button, .button-submit, input[type="submit"] {
border-radius: 2vh; border-radius: 2vh;
padding: 1vh 2vh 1vh 2vh; padding: 1vh 2vh 1vh 2vh;
margin: 0.5vh; margin: 0.5vh;
background-color: var(--c_purple_pastel); background-color: var(--background-colour);
color: var(--c_purple_dark); color: var(--primary-colour);
border-color: var(--c_purple_dark); border-color: var(--border-colour);
} }
button.navContactUs { button.navContactUs {
border: 4px solid var(--c_purple_dark); border: 4px solid var(--border-colour);
background-color: var(--c_purple_pastel); background-color: var(--c_purple_pastel);
color: var(--c_purple_dark) !important; /* color: var(--c_purple_dark) !important; */
border-radius: 2vh; border-radius: 2vh;
width: 180px !important; width: 180px !important;
} }

View File

@@ -10,7 +10,7 @@
right: 0; right: 0;
width: 100px; width: 100px;
/* height: 50%; */ /* height: 50%; */
background: var(--c_purple_pastel); background: var(--background-colour);
justify-content: right; justify-content: right;
align-items: right; align-items: right;
align-self: right; align-self: right;
@@ -33,7 +33,7 @@
max-height: 80%; max-height: 80%;
} }
.hamburger { .hamburger {
border: 2px solid var(--c_purple_dark); border: 2px solid var(--border-colour);
border-radius: 4px; border-radius: 4px;
} }
.hamburger:first-child { .hamburger:first-child {
@@ -52,14 +52,14 @@
justify-content: center; justify-content: center;
text-align: center; text-align: center;
width: 100%; width: 100%;
color: var(--c_purple_dark); /* color: var(--text-colour); */
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
/* height: 18px; */ /* height: 18px; */
} }
.hamburger > :hover { .hamburger > :hover {
background-color: var(--c_purple_light); color: var(--background-colour);
color: var(--c_purple_dark); background-color: var(--primary-colour);
} }
.hamburger > * > * { .hamburger > * > * {
width: 100%; width: 100%;
@@ -73,10 +73,6 @@
padding-bottom: 4.5px; padding-bottom: 4.5px;
} }
#overlayHamburger .row *:hover {
text-decoration: underline;
}
/* Confirm overlay */ /* Confirm overlay */
#overlayConfirm { #overlayConfirm {
position: absolute; position: absolute;

View File

@@ -9,7 +9,7 @@ thead, tbody {
} }
th { th {
background-color: var(--c_purple_pastel); background-color: transparent;
} }
td { td {
font-size: min(12px, calc(1vh * 3)); font-size: min(12px, calc(1vh * 3));
@@ -19,7 +19,7 @@ th, td {
min-width: fit-content; min-width: fit-content;
} }
tr:not(:last-child) > td { tr:not(:last-child) > td {
border-bottom: 1px dashed var(--c_purple_dark); border-bottom: 1px dashed var(--border-colour);
} }
td > table > tbody > tr > td { td > table > tbody > tr > td {
border: none !important; border: none !important;
@@ -28,17 +28,18 @@ th.collapsed, td.collapsed {
display: table-cell !important; display: table-cell !important;
} }
td.dirty { td.dirty {
background-color: var(--c_purple_dark); background-color: var(--primary-colour);
} }
td:not(.dirty) { td:not(.dirty) {
/* color: var(--c_purple_dark); */ /* color: var(--c_purple_dark); */
background-color: var(--c_purple_pastel); background-color: transparent;
} }
tr { tr {
min-height: 1px; min-height: 1px;
border-bottom: 1px solid var(--c_purple_dark); border-bottom: 1px solid;
border-top: 1px solid var(--c_purple_dark); border-top: 1px solid;
border-color: var(--border-colour);
background-color: transparent; background-color: transparent;
} }
@@ -54,11 +55,11 @@ table button {
} }
table button.active { table button.active {
background-color: var(--c_purple_pastel); background-color: var(--background-colour);
} }
tr.delete, tr.delete > td { tr.delete, tr.delete > td {
background-color: red; background-color: var(--c-red);
} }
table div { table div {

View File

@@ -8,9 +8,11 @@
margin: 0; margin: 0;
height: 8vh !important; height: 8vh !important;
overflow-y: auto; overflow-y: auto;
background-color: var(--c_purple_pastel); background-color: var(--accent-colour);
/*
border-top-left-radius: 2.5vh; border-top-left-radius: 2.5vh;
border-top-right-radius: 2.5vh; border-top-right-radius: 2.5vh;
*/
position: absolute; position: absolute;
/* top: 2.5vh; */ /* top: 2.5vh; */
bottom: 0; bottom: 0;

View File

@@ -17,7 +17,7 @@
.topnav a, .topnav label, .topnav p, .topnav h1 { .topnav a, .topnav label, .topnav p, .topnav h1 {
float: left; float: left;
display: flex; display: flex;
color: white; /* color: white; */
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
@@ -26,8 +26,8 @@
justify-content: center; justify-content: center;
} }
.topnav a:hover { .topnav a:hover {
background-color: var(--c_purple_light); background-color: var(--background-colour);
color: var(--c_purple_dark); /* color: var(--c_purple_dark); */
} }
.topnav > .container { .topnav > .container {
@@ -43,9 +43,11 @@
padding: 1vh; padding: 1vh;
margin: 1vh; margin: 1vh;
border-radius: 1vh; border-radius: 1vh;
/* background-color: var(--c_purple_light); */ /*
background-color: var(--c_purple_light);
color: var(--c_purple_dark); color: var(--c_purple_dark);
border: 2px solid white; */
border: 2px solid var(--border-colour);
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
@@ -58,7 +60,6 @@
.company-name { .company-name {
font-size: min(28px, calc(1vh * 7)); font-size: min(28px, calc(1vh * 7));
color: white;
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
.company-name { .company-name {
@@ -100,5 +101,5 @@ form.filter button.save, form.filter button.button-cancel {
} }
form.filter button.save, form.filter button.button-cancel { form.filter button.save, form.filter button.button-cancel {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 1px;
} }

View File

@@ -1,14 +1,31 @@
:root { :root {
/* Declare global variables */ /* Declare global variables */
/*
--c_purple: #5B29FF; --c_purple: #5B29FF;
--c_purple_pastel: #D1D1FF; --c_purple_pastel: #D1D1FF;
--c_purple_lighter: #E8E1FF;
--c_purple_light: #C6BDFF; --c_purple_light: #C6BDFF;
--c_purple_dark: #4700B3; --c_purple_dark: #4700B3;
*/
/* purple theme
- light https://coolors.co/palette/a172fd-a77afe-ac82fe-b691fe-c1a0fe-cbaffe-d6bffe-e0cefe-ebddfe-f5ecfe
- dark https://coolors.co/palette/310055-3c0663-4a0a77-5a108f-6818a5-8b2fc9-ab51e3-bd68ee-d283ff-dc97ff
*/
--c_purple_darker: #310055;
--c_purple_dark: #4A0A77;
--c_purple: #6818A5;
--c_purple_light: #CBAFFE;
--c_purple_lighter: #F5ECFE;
--c_blue: #0044FF; --c_blue: #0044FF;
--c_blue_pastel: #B8E0FF; --c_blue_pastel: #B8E0FF;
--c_blue_light: #73E8FF; --c_blue_light: #73E8FF;
--c_blue_dark: #003ADB; --c_blue_dark: #003ADB;
/* --c_red: */
--c-red: #FF0000;
--c_red_pastel: #FAE0E2;
--c_red_lighter: #FAE0E2;
} }
html { html {
@@ -16,14 +33,14 @@ html {
} }
body { body {
background-color: var(--background-color); background-color: var(--background-colour);
color: var(--text-color); color: var(--text-colour);
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-family: Arial; font-family: Arial;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
background: linear-gradient(to bottom right, var(--c_purple), #dc2430); /* var(--c_purple_pastel); */ background: linear-gradient(to bottom right, var(--c_purple_lighter), var(--c_red_lighter)); /* var(--c_purple); */
height: 100vh; height: 100vh;
max-height: 100%; max-height: 100%;
} }
@@ -54,6 +71,7 @@ script, link {
overflow-x: hidden; overflow-x: hidden;
position: absolute; position: absolute;
width: 98vw; width: 98vw;
color: var(--text-colour);
} }
.page-body > * { .page-body > * {
@@ -70,7 +88,7 @@ script, link {
align-self: center; align-self: center;
padding-top: 0.5vh; padding-top: 0.5vh;
padding-bottom: 0.5vh; padding-bottom: 0.5vh;
color: var(--c_purple_dark); /* color: var(--c_purple_dark); */
} }
#pageBody > .card { #pageBody > .card {
height: fit-content; height: fit-content;
@@ -160,7 +178,7 @@ img.header-logo {
/* Add a card effect for articles */ /* Add a card effect for articles */
.card { .card {
background-color: var(--c_purple_pastel); background-color: white;
padding: 1vh; padding: 1vh;
margin: 1vh; margin: 1vh;
display: flex !important; display: flex !important;
@@ -250,7 +268,7 @@ img.header-logo {
} }
.container-input > input, .container-input > textarea { .container-input > input, .container-input > textarea {
border: 2px solid var(--c_purple); border: 2px solid var(--border-colour);
padding: 1vh; padding: 1vh;
} }
@@ -270,10 +288,10 @@ li {
:not(input,textarea,select,button).dirty { :not(input,textarea,select,button).dirty {
background-color: var(--c_purple_dark); background-color: var(--accent-colour);
} }
input.dirty, textarea.dirty, select.dirty { input.dirty, textarea.dirty, select.dirty {
border-color: var(--c_purple_dark); border-color: var(--border-colour);
} }

View File

@@ -1,5 +1,5 @@
#pageBody > .card:first-of-type { #pageBody > .card:first-of-type {
width: 80%; width: min(80vw, 500px);
} }
.container.row { .container.row {

View File

@@ -11,15 +11,19 @@
font-size: min(16px, calc(1vh * 4)); font-size: min(16px, calc(1vh * 4));
} }
#pageBody > .card {
max-width: min(80vw, 1000px);
}
#email { #email {
/* min-width: 40vw; */ /* min-width: 40vw; */
width: 40vw; width: min(40vw, 500px);
} }
#name { #name {
width: 50vw; width: min(50vw, 625px);
} }
#message { #message {
width: 60vw; width: min(60vw, 750px);
} }
input, textarea { input, textarea {

View File

@@ -12,6 +12,15 @@
margin-bottom: 35vh; margin-bottom: 35vh;
} }
.home-hero {
}
.home-hero-title {
font-size: 24px;
font-weight: normal;
}
.img-demo { .img-demo {
max-width: 50%; max-width: 50%;
min-width: 500px; min-width: 500px;

View File

@@ -1,7 +1,16 @@
#pageBody > .card { #pageBody > .card {
padding-left: 5vw; padding-left: 5vw;
padding-right: 5vw; padding-right: 5vw;
max-width: 80vw; max-width: min(80vw, 1000px);
}
#pageBody > .card.services {
max-width: min(80vw, 690px);
}
#pageBody > .card.technologies {
}
#pageBody > .card.faq {
max-width: min(80vw, 1250px);
} }
#pageBody .card h1, #pageBody .card h1,

View File

@@ -52,7 +52,7 @@
} }
td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea { td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
border: 2px solid var(--c_purple); border: 2px solid var(--border-colour);
border-radius: 0.5vh; border-radius: 0.5vh;
} }

View File

@@ -46,7 +46,7 @@
} }
td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea { td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
border: 2px solid var(--c_purple); border: 2px solid var(--border-colour);
border-radius: 0.5vh; border-radius: 0.5vh;
} }

View File

@@ -14,15 +14,15 @@
} }
.buttonAddToBasket { .buttonAddToBasket {
background-color: var(--c_blue_pastel); background-color: var(--background-colour);
color: var(--c_blue_dark); /* color: var(--c_blue_dark); */
border-color: var(--c_blue_dark); border-color: var(--border-colour);
} }
#buttonCheckout, .buttonBuyNow { #buttonCheckout, .buttonBuyNow {
background-color: var(--c_purple_pastel); background-color: var(--background-colour);
color: var(--c_purple_dark); /* color: var(--c_purple_dark); */
border-color: var(--c_purple_dark); border-color: var(--border-colour);
} }
.button-increment, .button-decrement { .button-increment, .button-decrement {

View File

@@ -1,16 +1,18 @@
:root { :root {
--background-color: #ffffff; /* --background-colour: #ffffff; */
--text-color: #333333; --text-colour: var(--c_purple_darker);
--primary-color: #007bff; --primary-colour: var(--c_purple_dark);
--secondary-color: #6c757d; --secondary-colour: var(--c_purple);
--success-color: #28a745; --accent-colour: var(--c_purple_light);
--danger-color: #dc3545; --background-colour: var(--c_purple_lighter);
--warning-color: #ffc107; --success-colour: #28a745;
--info-color: #17a2b8; --danger-colour: #dc3545;
--light-color: #f8f9fa; --warning-colour: #ffc107;
--dark-color: #343a40; --info-colour: #17a2b8;
--border-color: #dee2e6; --light-colour: var(--c_purple_light);
--shadow-color: rgba(0, 0, 0, 0.1); --dark-colour: var(--c_purple_dark);
--border-colour: var(--c_purple_dark);
--shadow-colour: rgba(0, 0, 0, 0.1);
/* Header * / /* Header * /
--header-bg: #f8f9fa; --header-bg: #f8f9fa;
@@ -42,4 +44,5 @@
--card-bg: #ffffff; --card-bg: #ffffff;
--card-border: #dee2e6; --card-border: #dee2e6;
--card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
*/
} }

View File

@@ -1,5 +1,5 @@
#pageBody > .card:first-of-type { #pageBody > .card:first-of-type {
width: 80%; width: min(80vw, 500px);
} }
.container.row { .container.row {

View File

@@ -11,15 +11,19 @@
font-size: min(16px, calc(1vh * 4)); font-size: min(16px, calc(1vh * 4));
} }
#pageBody > .card {
max-width: min(80vw, 1000px);
}
#email { #email {
/* min-width: 40vw; */ /* min-width: 40vw; */
width: 40vw; width: min(40vw, 500px);
} }
#name { #name {
width: 50vw; width: min(50vw, 625px);
} }
#message { #message {
width: 60vw; width: min(60vw, 750px);
} }
input, textarea { input, textarea {

View File

@@ -12,6 +12,15 @@
margin-bottom: 35vh; margin-bottom: 35vh;
} }
.home-hero {
}
.home-hero-title {
font-size: 24px;
font-weight: normal;
}
.img-demo { .img-demo {
max-width: 50%; max-width: 50%;
min-width: 500px; min-width: 500px;

View File

@@ -1,7 +1,16 @@
#pageBody > .card { #pageBody > .card {
padding-left: 5vw; padding-left: 5vw;
padding-right: 5vw; padding-right: 5vw;
max-width: 80vw; max-width: min(80vw, 1000px);
}
#pageBody > .card.services {
max-width: min(80vw, 690px);
}
#pageBody > .card.technologies {
}
#pageBody > .card.faq {
max-width: min(80vw, 1250px);
} }
#pageBody .card h1, #pageBody .card h1,

View File

@@ -1,14 +1,31 @@
:root { :root {
/* Declare global variables */ /* Declare global variables */
/*
--c_purple: #5B29FF; --c_purple: #5B29FF;
--c_purple_pastel: #D1D1FF; --c_purple_pastel: #D1D1FF;
--c_purple_lighter: #E8E1FF;
--c_purple_light: #C6BDFF; --c_purple_light: #C6BDFF;
--c_purple_dark: #4700B3; --c_purple_dark: #4700B3;
*/
/* purple theme
- light https://coolors.co/palette/a172fd-a77afe-ac82fe-b691fe-c1a0fe-cbaffe-d6bffe-e0cefe-ebddfe-f5ecfe
- dark https://coolors.co/palette/310055-3c0663-4a0a77-5a108f-6818a5-8b2fc9-ab51e3-bd68ee-d283ff-dc97ff
*/
--c_purple_darker: #310055;
--c_purple_dark: #4A0A77;
--c_purple: #6818A5;
--c_purple_light: #CBAFFE;
--c_purple_lighter: #F5ECFE;
--c_blue: #0044FF; --c_blue: #0044FF;
--c_blue_pastel: #B8E0FF; --c_blue_pastel: #B8E0FF;
--c_blue_light: #73E8FF; --c_blue_light: #73E8FF;
--c_blue_dark: #003ADB; --c_blue_dark: #003ADB;
/* --c_red: */
--c-red: #FF0000;
--c_red_pastel: #FAE0E2;
--c_red_lighter: #FAE0E2;
} }
html { html {
@@ -16,14 +33,14 @@ html {
} }
body { body {
background-color: var(--background-color); background-color: var(--background-colour);
color: var(--text-color); color: var(--text-colour);
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-family: Arial; font-family: Arial;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
background: linear-gradient(to bottom right, var(--c_purple), #dc2430); /* var(--c_purple_pastel); */ background: linear-gradient(to bottom right, var(--c_purple_lighter), var(--c_red_lighter)); /* var(--c_purple); */
height: 100vh; height: 100vh;
max-height: 100%; max-height: 100%;
} }
@@ -54,6 +71,7 @@ script, link {
overflow-x: hidden; overflow-x: hidden;
position: absolute; position: absolute;
width: 98vw; width: 98vw;
color: var(--text-colour);
} }
.page-body > * { .page-body > * {
@@ -70,7 +88,7 @@ script, link {
align-self: center; align-self: center;
padding-top: 0.5vh; padding-top: 0.5vh;
padding-bottom: 0.5vh; padding-bottom: 0.5vh;
color: var(--c_purple_dark); /* color: var(--c_purple_dark); */
} }
#pageBody > .card { #pageBody > .card {
height: fit-content; height: fit-content;
@@ -160,7 +178,7 @@ img.header-logo {
/* Add a card effect for articles */ /* Add a card effect for articles */
.card { .card {
background-color: var(--c_purple_pastel); background-color: white;
padding: 1vh; padding: 1vh;
margin: 1vh; margin: 1vh;
display: flex !important; display: flex !important;
@@ -250,7 +268,7 @@ img.header-logo {
} }
.container-input > input, .container-input > textarea { .container-input > input, .container-input > textarea {
border: 2px solid var(--c_purple); border: 2px solid var(--border-colour);
padding: 1vh; padding: 1vh;
} }
@@ -270,10 +288,10 @@ li {
:not(input,textarea,select,button).dirty { :not(input,textarea,select,button).dirty {
background-color: var(--c_purple_dark); background-color: var(--accent-colour);
} }
input.dirty, textarea.dirty, select.dirty { input.dirty, textarea.dirty, select.dirty {
border-color: var(--c_purple_dark); border-color: var(--border-colour);
} }
@@ -288,15 +306,15 @@ button, .button-submit, input[type="submit"] {
border-radius: 2vh; border-radius: 2vh;
padding: 1vh 2vh 1vh 2vh; padding: 1vh 2vh 1vh 2vh;
margin: 0.5vh; margin: 0.5vh;
background-color: var(--c_purple_pastel); background-color: var(--background-colour);
color: var(--c_purple_dark); color: var(--primary-colour);
border-color: var(--c_purple_dark); border-color: var(--border-colour);
} }
button.navContactUs { button.navContactUs {
border: 4px solid var(--c_purple_dark); border: 4px solid var(--border-colour);
background-color: var(--c_purple_pastel); background-color: var(--c_purple_pastel);
color: var(--c_purple_dark) !important; /* color: var(--c_purple_dark) !important; */
border-radius: 2vh; border-radius: 2vh;
width: 180px !important; width: 180px !important;
} }
@@ -354,7 +372,7 @@ h5 {
right: 0; right: 0;
width: 100px; width: 100px;
/* height: 50%; */ /* height: 50%; */
background: var(--c_purple_pastel); background: var(--background-colour);
justify-content: right; justify-content: right;
align-items: right; align-items: right;
align-self: right; align-self: right;
@@ -377,7 +395,7 @@ h5 {
max-height: 80%; max-height: 80%;
} }
.hamburger { .hamburger {
border: 2px solid var(--c_purple_dark); border: 2px solid var(--border-colour);
border-radius: 4px; border-radius: 4px;
} }
.hamburger:first-child { .hamburger:first-child {
@@ -396,14 +414,14 @@ h5 {
justify-content: center; justify-content: center;
text-align: center; text-align: center;
width: 100%; width: 100%;
color: var(--c_purple_dark); /* color: var(--text-colour); */
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
/* height: 18px; */ /* height: 18px; */
} }
.hamburger > :hover { .hamburger > :hover {
background-color: var(--c_purple_light); color: var(--background-colour);
color: var(--c_purple_dark); background-color: var(--primary-colour);
} }
.hamburger > * > * { .hamburger > * > * {
width: 100%; width: 100%;
@@ -417,10 +435,6 @@ h5 {
padding-bottom: 4.5px; padding-bottom: 4.5px;
} }
#overlayHamburger .row *:hover {
text-decoration: underline;
}
/* Confirm overlay */ /* Confirm overlay */
#overlayConfirm { #overlayConfirm {
position: absolute; position: absolute;
@@ -439,7 +453,7 @@ thead, tbody {
} }
th { th {
background-color: var(--c_purple_pastel); background-color: transparent;
} }
td { td {
font-size: min(12px, calc(1vh * 3)); font-size: min(12px, calc(1vh * 3));
@@ -449,7 +463,7 @@ th, td {
min-width: fit-content; min-width: fit-content;
} }
tr:not(:last-child) > td { tr:not(:last-child) > td {
border-bottom: 1px dashed var(--c_purple_dark); border-bottom: 1px dashed var(--border-colour);
} }
td > table > tbody > tr > td { td > table > tbody > tr > td {
border: none !important; border: none !important;
@@ -458,17 +472,18 @@ th.collapsed, td.collapsed {
display: table-cell !important; display: table-cell !important;
} }
td.dirty { td.dirty {
background-color: var(--c_purple_dark); background-color: var(--primary-colour);
} }
td:not(.dirty) { td:not(.dirty) {
/* color: var(--c_purple_dark); */ /* color: var(--c_purple_dark); */
background-color: var(--c_purple_pastel); background-color: transparent;
} }
tr { tr {
min-height: 1px; min-height: 1px;
border-bottom: 1px solid var(--c_purple_dark); border-bottom: 1px solid;
border-top: 1px solid var(--c_purple_dark); border-top: 1px solid;
border-color: var(--border-colour);
background-color: transparent; background-color: transparent;
} }
@@ -484,11 +499,11 @@ table button {
} }
table button.active { table button.active {
background-color: var(--c_purple_pastel); background-color: var(--background-colour);
} }
tr.delete, tr.delete > td { tr.delete, tr.delete > td {
background-color: red; background-color: var(--c-red);
} }
table div { table div {
@@ -513,7 +528,7 @@ table div {
.topnav a, .topnav label, .topnav p, .topnav h1 { .topnav a, .topnav label, .topnav p, .topnav h1 {
float: left; float: left;
display: flex; display: flex;
color: white; /* color: white; */
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
@@ -522,8 +537,8 @@ table div {
justify-content: center; justify-content: center;
} }
.topnav a:hover { .topnav a:hover {
background-color: var(--c_purple_light); background-color: var(--background-colour);
color: var(--c_purple_dark); /* color: var(--c_purple_dark); */
} }
.topnav > .container { .topnav > .container {
@@ -539,9 +554,11 @@ table div {
padding: 1vh; padding: 1vh;
margin: 1vh; margin: 1vh;
border-radius: 1vh; border-radius: 1vh;
/* background-color: var(--c_purple_light); */ /*
background-color: var(--c_purple_light);
color: var(--c_purple_dark); color: var(--c_purple_dark);
border: 2px solid white; */
border: 2px solid var(--border-colour);
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
@@ -554,7 +571,6 @@ table div {
.company-name { .company-name {
font-size: min(28px, calc(1vh * 7)); font-size: min(28px, calc(1vh * 7));
color: white;
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
.company-name { .company-name {
@@ -596,7 +612,7 @@ form.filter button.save, form.filter button.button-cancel {
} }
form.filter button.save, form.filter button.button-cancel { form.filter button.save, form.filter button.button-cancel {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 1px;
} }
/* Footer */ /* Footer */
@@ -608,9 +624,11 @@ form.filter button.save, form.filter button.button-cancel {
margin: 0; margin: 0;
height: 8vh !important; height: 8vh !important;
overflow-y: auto; overflow-y: auto;
background-color: var(--c_purple_pastel); background-color: var(--accent-colour);
/*
border-top-left-radius: 2.5vh; border-top-left-radius: 2.5vh;
border-top-right-radius: 2.5vh; border-top-right-radius: 2.5vh;
*/
position: absolute; position: absolute;
/* top: 2.5vh; */ /* top: 2.5vh; */
bottom: 0; bottom: 0;
@@ -668,18 +686,20 @@ form.filter button.save, form.filter button.button-cancel {
:root { :root {
--background-color: #ffffff; /* --background-colour: #ffffff; */
--text-color: #333333; --text-colour: var(--c_purple_darker);
--primary-color: #007bff; --primary-colour: var(--c_purple_dark);
--secondary-color: #6c757d; --secondary-colour: var(--c_purple);
--success-color: #28a745; --accent-colour: var(--c_purple_light);
--danger-color: #dc3545; --background-colour: var(--c_purple_lighter);
--warning-color: #ffc107; --success-colour: #28a745;
--info-color: #17a2b8; --danger-colour: #dc3545;
--light-color: #f8f9fa; --warning-colour: #ffc107;
--dark-color: #343a40; --info-colour: #17a2b8;
--border-color: #dee2e6; --light-colour: var(--c_purple_light);
--shadow-color: rgba(0, 0, 0, 0.1); --dark-colour: var(--c_purple_dark);
--border-colour: var(--c_purple_dark);
--shadow-colour: rgba(0, 0, 0, 0.1);
/* Header * / /* Header * /
--header-bg: #f8f9fa; --header-bg: #f8f9fa;
@@ -711,6 +731,7 @@ form.filter button.save, form.filter button.button-cancel {
--card-bg: #ffffff; --card-bg: #ffffff;
--card-border: #dee2e6; --card-border: #dee2e6;
--card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
*/
} }
/*# sourceMappingURL=main.bundle.css.map*/ /*# sourceMappingURL=main.bundle.css.map*/

View File

@@ -14,15 +14,15 @@
} }
.buttonAddToBasket { .buttonAddToBasket {
background-color: var(--c_blue_pastel); background-color: var(--background-colour);
color: var(--c_blue_dark); /* color: var(--c_blue_dark); */
border-color: var(--c_blue_dark); border-color: var(--border-colour);
} }
#buttonCheckout, .buttonBuyNow { #buttonCheckout, .buttonBuyNow {
background-color: var(--c_purple_pastel); background-color: var(--background-colour);
color: var(--c_purple_dark); /* color: var(--c_purple_dark); */
border-color: var(--c_purple_dark); border-color: var(--border-colour);
} }
.button-increment, .button-decrement { .button-increment, .button-decrement {

View File

@@ -14,15 +14,15 @@
} }
.buttonAddToBasket { .buttonAddToBasket {
background-color: var(--c_blue_pastel); background-color: var(--background-colour);
color: var(--c_blue_dark); /* color: var(--c_blue_dark); */
border-color: var(--c_blue_dark); border-color: var(--border-colour);
} }
#buttonCheckout, .buttonBuyNow { #buttonCheckout, .buttonBuyNow {
background-color: var(--c_purple_pastel); background-color: var(--background-colour);
color: var(--c_purple_dark); /* color: var(--c_purple_dark); */
border-color: var(--c_purple_dark); border-color: var(--border-colour);
} }
.button-increment, .button-decrement { .button-increment, .button-decrement {
@@ -109,7 +109,7 @@
} }
td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea { td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
border: 2px solid var(--c_purple); border: 2px solid var(--border-colour);
border-radius: 0.5vh; border-radius: 0.5vh;
} }

View File

@@ -14,15 +14,15 @@
} }
.buttonAddToBasket { .buttonAddToBasket {
background-color: var(--c_blue_pastel); background-color: var(--background-colour);
color: var(--c_blue_dark); /* color: var(--c_blue_dark); */
border-color: var(--c_blue_dark); border-color: var(--border-colour);
} }
#buttonCheckout, .buttonBuyNow { #buttonCheckout, .buttonBuyNow {
background-color: var(--c_purple_pastel); background-color: var(--background-colour);
color: var(--c_purple_dark); /* color: var(--c_purple_dark); */
border-color: var(--c_purple_dark); border-color: var(--border-colour);
} }
.button-increment, .button-decrement { .button-increment, .button-decrement {

View File

@@ -14,15 +14,15 @@
} }
.buttonAddToBasket { .buttonAddToBasket {
background-color: var(--c_blue_pastel); background-color: var(--background-colour);
color: var(--c_blue_dark); /* color: var(--c_blue_dark); */
border-color: var(--c_blue_dark); border-color: var(--border-colour);
} }
#buttonCheckout, .buttonBuyNow { #buttonCheckout, .buttonBuyNow {
background-color: var(--c_purple_pastel); background-color: var(--background-colour);
color: var(--c_purple_dark); /* color: var(--c_purple_dark); */
border-color: var(--c_purple_dark); border-color: var(--border-colour);
} }
.button-increment, .button-decrement { .button-increment, .button-decrement {

View File

@@ -2,7 +2,7 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ 497: /***/ 561:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
/***/ }), /***/ }),
/***/ 647: /***/ 711:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = { /******/ var installedChunks = {
/******/ 780: 0, /******/ 780: 0,
/******/ 564: 0 /******/ 466: 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@@ -144,8 +144,8 @@
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, [564], () => (__webpack_require__(647))) /******/ __webpack_require__.O(undefined, [466], () => (__webpack_require__(711)))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [564], () => (__webpack_require__(497))) /******/ var __webpack_exports__ = __webpack_require__.O(undefined, [466], () => (__webpack_require__(561)))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

View File

@@ -2,7 +2,7 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ 206: /***/ 278:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
/***/ }), /***/ }),
/***/ 647: /***/ 711:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = { /******/ var installedChunks = {
/******/ 775: 0, /******/ 775: 0,
/******/ 564: 0 /******/ 466: 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@@ -144,8 +144,8 @@
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, [564], () => (__webpack_require__(647))) /******/ __webpack_require__.O(undefined, [466], () => (__webpack_require__(711)))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [564], () => (__webpack_require__(206))) /******/ var __webpack_exports__ = __webpack_require__.O(undefined, [466], () => (__webpack_require__(278)))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

View File

@@ -2,7 +2,7 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ 469: /***/ 805:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
/***/ }), /***/ }),
/***/ 647: /***/ 711:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = { /******/ var installedChunks = {
/******/ 664: 0, /******/ 664: 0,
/******/ 564: 0 /******/ 466: 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@@ -144,8 +144,8 @@
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, [564], () => (__webpack_require__(647))) /******/ __webpack_require__.O(undefined, [466], () => (__webpack_require__(711)))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [564], () => (__webpack_require__(469))) /******/ var __webpack_exports__ = __webpack_require__.O(undefined, [466], () => (__webpack_require__(805)))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

View File

@@ -2,7 +2,7 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ 396: /***/ 188:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
/***/ }), /***/ }),
/***/ 647: /***/ 711:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = { /******/ var installedChunks = {
/******/ 405: 0, /******/ 405: 0,
/******/ 564: 0 /******/ 466: 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@@ -144,8 +144,8 @@
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, [564], () => (__webpack_require__(647))) /******/ __webpack_require__.O(undefined, [466], () => (__webpack_require__(711)))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [564], () => (__webpack_require__(396))) /******/ var __webpack_exports__ = __webpack_require__.O(undefined, [466], () => (__webpack_require__(188)))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

View File

@@ -2,7 +2,7 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ 132: /***/ 780:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
/***/ }), /***/ }),
/***/ 807: /***/ 359:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = { /******/ var installedChunks = {
/******/ 841: 0, /******/ 841: 0,
/******/ 830: 0 /******/ 416: 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@@ -144,8 +144,8 @@
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, [830], () => (__webpack_require__(807))) /******/ __webpack_require__.O(undefined, [416], () => (__webpack_require__(359)))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [830], () => (__webpack_require__(132))) /******/ var __webpack_exports__ = __webpack_require__.O(undefined, [416], () => (__webpack_require__(780)))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

View File

@@ -2,7 +2,7 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ 527: /***/ 623:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
/***/ }), /***/ }),
/***/ 807: /***/ 359:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = { /******/ var installedChunks = {
/******/ 690: 0, /******/ 690: 0,
/******/ 830: 0 /******/ 416: 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@@ -144,8 +144,8 @@
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, [830], () => (__webpack_require__(807))) /******/ __webpack_require__.O(undefined, [416], () => (__webpack_require__(359)))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [830], () => (__webpack_require__(527))) /******/ var __webpack_exports__ = __webpack_require__.O(undefined, [416], () => (__webpack_require__(623)))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

View File

@@ -2,7 +2,7 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ 649: /***/ 713:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
/***/ }), /***/ }),
/***/ 807: /***/ 359:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = { /******/ var installedChunks = {
/******/ 364: 0, /******/ 364: 0,
/******/ 830: 0 /******/ 416: 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@@ -144,8 +144,8 @@
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, [830], () => (__webpack_require__(807))) /******/ __webpack_require__.O(undefined, [416], () => (__webpack_require__(359)))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [830], () => (__webpack_require__(649))) /******/ var __webpack_exports__ = __webpack_require__.O(undefined, [416], () => (__webpack_require__(713)))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

View File

@@ -2,7 +2,7 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ 954: /***/ 930:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
/***/ }), /***/ }),
/***/ 807: /***/ 359:
/***/ (() => { /***/ (() => {
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = { /******/ var installedChunks = {
/******/ 607: 0, /******/ 607: 0,
/******/ 830: 0 /******/ 416: 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@@ -144,8 +144,8 @@
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, [830], () => (__webpack_require__(807))) /******/ __webpack_require__.O(undefined, [416], () => (__webpack_require__(359)))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [830], () => (__webpack_require__(954))) /******/ var __webpack_exports__ = __webpack_require__.O(undefined, [416], () => (__webpack_require__(930)))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

View File

@@ -167,8 +167,6 @@ function dom_createClass(e, r, t) { return r && dom_defineProperties(e.prototype
function dom_toPropertyKey(t) { var i = dom_toPrimitive(t, "string"); return "symbol" == dom_typeof(i) ? i : i + ""; } function dom_toPropertyKey(t) { var i = dom_toPrimitive(t, "string"); return "symbol" == dom_typeof(i) ? i : i + ""; }
function dom_toPrimitive(t, r) { if ("object" != dom_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != dom_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function dom_toPrimitive(t, r) { if ("object" != dom_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != dom_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
// Module for DOM manipulation
var DOM = /*#__PURE__*/function () { var DOM = /*#__PURE__*/function () {
function DOM() { function DOM() {
dom_classCallCheck(this, DOM); dom_classCallCheck(this, DOM);
@@ -538,8 +536,6 @@ function api_createClass(e, r, t) { return r && api_defineProperties(e.prototype
function api_toPropertyKey(t) { var i = api_toPrimitive(t, "string"); return "symbol" == api_typeof(i) ? i : i + ""; } function api_toPropertyKey(t) { var i = api_toPrimitive(t, "string"); return "symbol" == api_typeof(i) ? i : i + ""; }
function api_toPrimitive(t, r) { if ("object" != api_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != api_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function api_toPrimitive(t, r) { if ("object" != api_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != api_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
// Module for API calls
var api_API = /*#__PURE__*/function () { var api_API = /*#__PURE__*/function () {
function API() { function API() {
api_classCallCheck(this, API); api_classCallCheck(this, API);
@@ -896,7 +892,6 @@ var api_API = /*#__PURE__*/function () {
const api = new API(); const api = new API();
export default api; export default api;
Example of using the API
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initializeApp(); initializeApp();
setupEventListeners(); setupEventListeners();
@@ -6926,43 +6921,10 @@ function router_toPrimitive(t, r) { if ("object" != router_typeof(t) || !t) retu
// import PageUserLogout from './pages/user/logout.js'; // import PageUserLogout from './pages/user/logout.js';
// import PageUserAccount from './pages/user/account.js'; // import PageUserAccount from './pages/user/account.js';
/*
import "./lib/common.js";
import "./lib/constants.js";
import "./lib/events.js";
import "./lib/extras.js";
// import "./DEPRECATED/init.js";
import "./lib/local_storage.js";
import "./lib/utils.js";
import "./lib/validation.js";
*/
// Create a context for the pages
// const pagesContext = require.context('./pages', true, /\.js$/);
/*
const pageModules = {
// Core
[hashPageHome]: () => import('./pages/core/home.js'),
[hashPageContact]: () => import('./pages/core/contact.js'),
[hashPageServices]: () => import('./pages/core/services.js'),
[hashPageAdminHome]: () => import('./pages/core/admin_home.js'),
// Legal
[hashPageAccessibilityStatement]: () => import('./pages/legal/accessibility_statement.js'),
[hashPageLicense]: () => import('./pages/legal/license.js'),
// Store
[hashPageStoreProductCategories]: () => import('./pages/store/product_categories.js'),
[hashPageStoreProductPermutations]: () => import('./pages/store/product_permutations.js'),
// [hashPageStoreProducts]: () => import('./pages/store/products.js'),
// User
// Add other pages here...
};
*/
var Router = /*#__PURE__*/function () { var Router = /*#__PURE__*/function () {
function Router() { function Router() {
var _this = this; var _this = this;
@@ -7341,12 +7303,10 @@ var Router = /*#__PURE__*/function () {
DOM.loadPageBody(response.data); DOM.loadPageBody(response.data);
} }
}]); }]);
}(); // Create and export a singleton instance }();
var router = new Router(); var router = new Router();
// import this for navigation
// Usage example (you can put this in your main.js or app.js)
/* /*
router.addRoute('/', () => { router.addRoute('/', () => {
console.log('Home page'); console.log('Home page');
@@ -7358,7 +7318,6 @@ router.addRoute('/about', () => {
// Load about page content // Load about page content
}); });
// Example of how to use the router in other parts of your application
export function setupNavigationEvents() { export function setupNavigationEvents() {
document.querySelectorAll('a[data-nav]').forEach(link => { document.querySelectorAll('a[data-nav]').forEach(link => {
link.addEventListener('click', (e) => { link.addEventListener('click', (e) => {
@@ -7370,32 +7329,8 @@ export function setupNavigationEvents() {
} }
*/ */
;// CONCATENATED MODULE: ./static/js/app.js ;// CONCATENATED MODULE: ./static/js/app.js
/*
// Bundle css imports
import '../css/lib/reset.css';
import '../css/lib/typography.css';
import '../css/lib/variables.css';
import '../css/lib/utils.css';
import '../css/layouts/header.css';
import '../css/layouts/footer.css';
import '../css/layouts/table-main.css'
import '../css/components/button.css';
import '../css/components/card.css';
import '../css/components/dialog.css';
import '../css/components/form.css';
import '../css/components/modal.css';
import '../css/components/navigation.css';
import '../css/components/overlay.css';
import '../css/sections/store.css';
*/
// Main entry point for the application
// import API from './api.js';
function app_typeof(o) { "@babel/helpers - typeof"; return app_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, app_typeof(o); } function app_typeof(o) { "@babel/helpers - typeof"; return app_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, app_typeof(o); }
function app_classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); } function app_classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function app_defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, app_toPropertyKey(o.key), o); } } function app_defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, app_toPropertyKey(o.key), o); } }
@@ -7419,35 +7354,24 @@ var App = /*#__PURE__*/function () {
}, { }, {
key: "setupEventListeners", key: "setupEventListeners",
value: function setupEventListeners() { value: function setupEventListeners() {
// Global event listeners
// document.addEventListener('click', this.handleGlobalClick.bind(this)); // document.addEventListener('click', this.handleGlobalClick.bind(this));
// Add more global event listeners as needed
} }
}, { }, {
key: "handleGlobalClick", key: "handleGlobalClick",
value: function handleGlobalClick(event) { value: function handleGlobalClick(event) {}
// Handle global click events
}
}, { }, {
key: "start", key: "start",
value: function start() { value: function start() {
// Additional startup logic
this.initPageCurrent(); this.initPageCurrent();
} }
}, { }, {
key: "initPageCurrent", key: "initPageCurrent",
value: function initPageCurrent() { value: function initPageCurrent() {
/*
_pageCurrent = Router.getPageCurrent();
_pageCurrent.initialize();
*/
this.router.loadPageCurrent(); this.router.loadPageCurrent();
} }
}]); }]);
}(); // Application instance }();
var app = new App(); var app = new App();
// DOM ready handler
function domReady(fn) { function domReady(fn) {
if (document.readyState !== 'loading') { if (document.readyState !== 'loading') {
fn(); fn();
@@ -7455,16 +7379,10 @@ function domReady(fn) {
document.addEventListener('DOMContentLoaded', fn); document.addEventListener('DOMContentLoaded', fn);
} }
} }
// Initialize and start the app when DOM is ready
domReady(function () { domReady(function () {
app.initialize(); app.initialize();
}); });
// Expose app to window for debugging (optional)
window.app = app; window.app = app;
// Export app if using modules
/* harmony default export */ const js_app = ((/* unused pure expression or super */ null && (app))); /* harmony default export */ const js_app = ((/* unused pure expression or super */ null && (app)));
})(); })();

View File

@@ -339,9 +339,11 @@
</div> </div>
{% endif %} {% endif %}
{% if model.user.is_logged_in %} {% if model.user.is_logged_in %}
{#
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}"> <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
<a class="{{ model.FLAG_NAV_USER_ACCOUNT }}">Account</a> <a class="{{ model.FLAG_NAV_USER_ACCOUNT }}">Account</a>
</div> </div>
#}
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}"> <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
<a class="{{ model.FLAG_NAV_USER_LOGOUT }}">Logout</a> <a class="{{ model.FLAG_NAV_USER_LOGOUT }}">Logout</a>
</div> </div>

View File

@@ -5,8 +5,8 @@
{% block page_body %} {% block page_body %}
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/core_home.bundle.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/core_home.bundle.css') }}">
<div> <div class="home-hero">
<h2 style="font-size: 24px; color: white; font-weight: normal;">We make websites, web apps, and desktop software</h2> <h2 class="home-hero-title">We make websites, web apps, and desktop software</h2>
{% set block_id = 'button_get_in_touch' %} {% set block_id = 'button_get_in_touch' %}
{% include 'components/common/buttons/_buttons_save_cancel.html' %} {% include 'components/common/buttons/_buttons_save_cancel.html' %}
</div> </div>

View File

@@ -7,7 +7,7 @@
{% block page_body %} {% block page_body %}
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/core_services.bundle.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/core_services.bundle.css') }}">
<div class="{{ model.FLAG_CARD }}"> <div class="{{ model.FLAG_CARD }} {{ model.FLAG_SERVICES }}">
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"> <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
<h1>Services</h1> <h1>Services</h1>
<h2>Website, Web App, & Desktop Software Development</h2> <h2>Website, Web App, & Desktop Software Development</h2>
@@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<div class="{{ model.FLAG_CARD }}"> <div class="{{ model.FLAG_CARD }} {{ model.FLAG_TECHNOLOGIES }}">
<h1>Technologies</h1> <h1>Technologies</h1>
<p>We are most experienced with these technologies, in case you have any requirements.</p> <p>We are most experienced with these technologies, in case you have any requirements.</p>
<table> <table>
@@ -82,7 +82,7 @@
</table> </table>
</div> </div>
<div class="{{ model.FLAG_CARD }}"> <div class="{{ model.FLAG_CARD }} {{ model.FLAG_FAQ }}">
<h1>FAQs</h1> <h1>FAQs</h1>
<h2>Websites, Web apps, and Software - what's the difference?</h2> <h2>Websites, Web apps, and Software - what's the difference?</h2>
<ul> <ul>