diff --git a/README.md b/README.md index f91339d..abe1e92 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,25 @@ -Magic: The Gathering trading card game commander life tracking tool. +## Magic: The Gathering trading card game commander life tracking tool. Powered by flask -enter virtual environment: -python -m venv VIRTUAL_ENVIRONMENT_NAME +# create virtual environment +python3 -m venv VIRTUAL_ENVIRONMENT_NAME -run module bundler: +# enter virtual environment +source ./VIRTUAL_ENVIRONMENT_NAME/bin/activate + +# run module bundler npm run build -host for machine: -python -m flask run +# create ssh tunnel to vps hosting db +ssh -i /path/to/your/key.pem -L 5433:localhost:5433 user@your-vps-ip -N -host for local network: -python -m flask run --host=0.0.0.0 +# host +for machine: +python3 -m flask run + +for local network: +python3 -m flask run --host=0.0.0.0 files dedicated to each page: diff --git a/business_objects/tcg/mtg_game_player.py b/business_objects/tcg/mtg_game_player.py index cfd1c5c..e0711dd 100644 --- a/business_objects/tcg/mtg_game_player.py +++ b/business_objects/tcg/mtg_game_player.py @@ -155,6 +155,9 @@ class Parameters_MTG_Game_Player(Get_Many_Parameters_Base): get_all_game: bool get_inactive_game: bool game_ids: str + get_all_user: bool + get_inactive_user: bool + user_ids: str require_all_id_filters_met: bool require_any_id_filters_met: bool @@ -165,6 +168,9 @@ class Parameters_MTG_Game_Player(Get_Many_Parameters_Base): , get_all_game = True , get_inactive_game = False , game_ids = '' + , get_all_user = True + , get_inactive_user = False + , user_ids = '' , require_all_id_filters_met = True , require_any_id_filters_met = True ) @@ -176,6 +182,9 @@ class Parameters_MTG_Game_Player(Get_Many_Parameters_Base): , get_all_game = json.get('a_get_all_game', False) , get_inactive_game = json.get('a_get_inactive_game', False) , game_ids = json.get('a_game_ids', '') + , get_all_user = json.get('a_get_all_user', False) + , get_inactive_user = json.get('a_get_inactive_user', False) + , user_ids = json.get('a_user_ids', '') , require_all_id_filters_met = json.get('a_require_all_id_filters_met', True) , require_any_id_filters_met = json.get('a_require_any_id_filters_met', True) ) @@ -186,6 +195,9 @@ class Parameters_MTG_Game_Player(Get_Many_Parameters_Base): , 'a_get_all_game': self.get_all_game , 'a_get_inactive_game': self.get_inactive_game , 'a_game_ids': self.game_ids + , 'a_get_all_user': self.get_all_user + , 'a_get_inactive_user': self.get_inactive_user + , 'a_user_ids': self.user_ids , 'a_require_all_id_filters_met': self.require_all_id_filters_met , 'a_require_any_id_filters_met': self.require_any_id_filters_met } @@ -197,6 +209,9 @@ class Parameters_MTG_Game_Player(Get_Many_Parameters_Base): , 'a_get_all_game': Boolean , 'a_get_inactive_game': Boolean , 'a_game_ids': Text + , 'a_get_all_user': Boolean + , 'a_get_inactive_user': Boolean + , 'a_user_ids': Text , 'a_require_all_id_filters_met': Boolean , 'a_require_any_id_filters_met': Boolean } diff --git a/business_objects/tcg/mtg_game_round.py b/business_objects/tcg/mtg_game_round.py index 76d07dc..d67f8f2 100644 --- a/business_objects/tcg/mtg_game_round.py +++ b/business_objects/tcg/mtg_game_round.py @@ -134,6 +134,9 @@ class Parameters_MTG_Game_Round(Get_Many_Parameters_Base): get_all_game: bool get_inactive_game: bool game_ids: str + get_all_user: bool + get_inactive_user: bool + user_ids: str require_all_id_filters_met: bool require_any_id_filters_met: bool @@ -144,6 +147,9 @@ class Parameters_MTG_Game_Round(Get_Many_Parameters_Base): , get_all_game = True , get_inactive_game = False , game_ids = '' + , get_all_user = True + , get_inactive_user = False + , user_ids = '' , require_all_id_filters_met = True , require_any_id_filters_met = True ) @@ -155,6 +161,9 @@ class Parameters_MTG_Game_Round(Get_Many_Parameters_Base): , get_all_game = json.get('a_get_all_game', False) , get_inactive_game = json.get('a_get_inactive_game', False) , game_ids = json.get('a_game_ids', '') + , get_all_user = json.get('a_get_all_user', False) + , get_inactive_user = json.get('a_get_inactive_user', False) + , user_ids = json.get('a_user_ids', '') , require_all_id_filters_met = json.get('a_require_all_id_filters_met', True) , require_any_id_filters_met = json.get('a_require_any_id_filters_met', True) ) @@ -165,6 +174,9 @@ class Parameters_MTG_Game_Round(Get_Many_Parameters_Base): , 'a_get_all_game': self.get_all_game , 'a_get_inactive_game': self.get_inactive_game , 'a_game_ids': self.game_ids + , 'a_get_all_user': self.get_all_user + , 'a_get_inactive_user': self.get_inactive_user + , 'a_user_ids': self.user_ids , 'a_require_all_id_filters_met': self.require_all_id_filters_met , 'a_require_any_id_filters_met': self.require_any_id_filters_met } @@ -176,6 +188,9 @@ class Parameters_MTG_Game_Round(Get_Many_Parameters_Base): , 'a_get_all_game': Boolean , 'a_get_inactive_game': Boolean , 'a_game_ids': Text + , 'a_get_all_user': Boolean + , 'a_get_inactive_user': Boolean + , 'a_user_ids': Text , 'a_require_all_id_filters_met': Boolean , 'a_require_any_id_filters_met': Boolean } diff --git a/business_objects/tcg/mtg_game_round_player_damage.py b/business_objects/tcg/mtg_game_round_player_damage.py index ef8e0b1..532fcc2 100644 --- a/business_objects/tcg/mtg_game_round_player_damage.py +++ b/business_objects/tcg/mtg_game_round_player_damage.py @@ -167,6 +167,9 @@ class Parameters_MTG_Game_Round_Player_Damage(Get_Many_Parameters_Base): get_all_game: bool get_inactive_game: bool game_ids: str + get_all_user: bool + get_inactive_user: bool + user_ids: str require_all_id_filters_met: bool require_any_id_filters_met: bool @@ -177,6 +180,9 @@ class Parameters_MTG_Game_Round_Player_Damage(Get_Many_Parameters_Base): , get_all_game = True , get_inactive_game = False , game_ids = '' + , get_all_user = True + , get_inactive_user = False + , user_ids = '' , require_all_id_filters_met = True , require_any_id_filters_met = True ) @@ -188,6 +194,9 @@ class Parameters_MTG_Game_Round_Player_Damage(Get_Many_Parameters_Base): , get_all_game = json.get('a_get_all_game', False) , get_inactive_game = json.get('a_get_inactive_game', False) , game_ids = json.get('a_game_ids', '') + , get_all_user = json.get('a_get_all_user', False) + , get_inactive_user = json.get('a_get_inactive_user', False) + , user_ids = json.get('a_user_ids', '') , require_all_id_filters_met = json.get('a_require_all_id_filters_met', True) , require_any_id_filters_met = json.get('a_require_any_id_filters_met', True) ) @@ -198,6 +207,9 @@ class Parameters_MTG_Game_Round_Player_Damage(Get_Many_Parameters_Base): , 'a_get_all_game': self.get_all_game , 'a_get_inactive_game': self.get_inactive_game , 'a_game_ids': self.game_ids + , 'a_get_all_user': self.get_all_user + , 'a_get_inactive_user': self.get_inactive_user + , 'a_user_ids': self.user_ids , 'a_require_all_id_filters_met': self.require_all_id_filters_met , 'a_require_any_id_filters_met': self.require_any_id_filters_met } @@ -209,6 +221,9 @@ class Parameters_MTG_Game_Round_Player_Damage(Get_Many_Parameters_Base): , 'a_get_all_game': Boolean , 'a_get_inactive_game': Boolean , 'a_game_ids': Text + , 'a_get_all_user': Boolean + , 'a_get_inactive_user': Boolean + , 'a_user_ids': Text , 'a_require_all_id_filters_met': Boolean , 'a_require_any_id_filters_met': Boolean } diff --git a/static/css/main.css b/static/css/main.css index 4473429..4e17275 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -100,7 +100,9 @@ script, link { margin: 0.5vh auto; } - +section { + margin: 0 auto; +} /* Add a card effect for articles */ .card { diff --git a/static/css/pages/tcg/home.css b/static/css/pages/tcg/home.css index f8d9774..0657a68 100644 --- a/static/css/pages/tcg/home.css +++ b/static/css/pages/tcg/home.css @@ -1,7 +1,186 @@ -#pageBody .column .row { - margin-top: 0.5vh; +/* Landing Page - Hero Section */ +.home-hero { + text-align: center; + padding: 6rem 2rem 4rem; + position: relative; +} + +.home-hero::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 900px; + height: 550px; + background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.12) 0%, transparent 70%); + pointer-events: none; +} + +.home-hero-eyebrow { + font-family: 'Cinzel', serif; + font-size: 1.5rem; + color: var(--tcg-accent-purple); + letter-spacing: 0.3em; + text-transform: uppercase; + margin-bottom: 1.5rem; + animation: tcg-fadeIn 0.6s ease both; +} + +.home-hero-title { + font-family: 'Cinzel', serif; + font-size: clamp(2.5rem, 6vw, 4.5rem); + font-weight: 700; + background: linear-gradient(135deg, var(--tcg-accent-gold) 30%, var(--tcg-accent-purple)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + letter-spacing: 0.05em; + text-transform: uppercase; + margin: 0 0 1.5rem; + line-height: 1.1; + animation: tcg-fadeInDown 0.8s ease 0.1s both; +} + +.home-hero-subtitle { + font-size: clamp(1.1rem, 2vw, 1.4rem); + color: var(--tcg-text-secondary); + max-width: 580px; + margin: 0 auto 3rem; + line-height: 1.7; + animation: tcg-fadeIn 0.8s ease 0.3s both; +} + +.home-hero-actions { + display: flex; + gap: 1.25rem; + justify-content: center; + flex-wrap: wrap; + animation: tcg-fadeIn 0.8s ease 0.5s both; +} + +/* Divider */ +.home-divider { + width: 80px; + height: 3px; + background: linear-gradient(90deg, var(--tcg-accent-purple), var(--tcg-accent-gold)); + margin: 0 auto; + border-radius: 2px; +} + +/* Features Section */ +.home-features { + padding: 2rem 0; +} + +.home-features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1.5rem; + margin-top: 2.5rem; +} + +.home-feature-card { + position: relative; + text-align: center; +} + +.home-feature-card:nth-child(1) { animation: tcg-scaleIn 0.6s ease 0.1s both; } +.home-feature-card:nth-child(2) { animation: tcg-scaleIn 0.6s ease 0.25s both; } +.home-feature-card:nth-child(3) { animation: tcg-scaleIn 0.6s ease 0.4s both; } + +.home-feature-symbol { + width: 56px; + height: 56px; + margin: 0 auto 1.25rem; + background: linear-gradient(135deg, var(--tcg-accent-purple), var(--tcg-accent-gold)); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Cinzel', serif; + font-size: 1.4rem; + color: var(--tcg-bg-primary); + font-weight: 700; + letter-spacing: 0; +} + +.home-feature-card h3 { + font-family: 'Cinzel', serif; + color: var(--tcg-accent-gold); + font-size: 1.05rem; + margin: 0 0 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.home-feature-card p { + color: var(--tcg-text-secondary); + font-size: 1.1rem; + line-height: 1.6; + margin: 0; +} + +/* CTA Section */ +.home-cta { + text-align: center; + padding: 4rem 2rem; + background: var(--tcg-bg-secondary); + border: 2px solid var(--tcg-border-color); + border-radius: 16px; + margin-top: 1rem; + position: relative; + /* overflow: hidden; */ + animation: tcg-fadeIn 0.8s ease 0.6s both; +} + +.home-cta::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.06) 0%, transparent 70%); + pointer-events: none; +} + +.home-cta-title { + font-family: 'Cinzel', serif; + font-size: clamp(1.4rem, 3vw, 2rem); + color: var(--tcg-text-primary); + margin: 0 0 1rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.home-cta-subtitle { + color: var(--tcg-text-secondary); + font-size: 1.15rem; + margin: 0 auto 2.5rem; + max-width: 500px; + line-height: 1.6; +} + +/* Responsive */ +@media screen and (max-width: 768px) { + .home-hero { + padding: 3rem 1rem 2rem; + } + + .home-hero-actions { + flex-direction: column; + align-items: center; + } + + .home-hero-actions .btn-tcg { + width: 100%; + max-width: 280px; + text-align: center; + } + + .home-features-grid { + grid-template-columns: 1fr; + } + + .home-cta { + padding: 2.5rem 1.5rem; + } } -#pageBody .column .row .button { - margin-left: auto; - margin-right: auto; -} \ No newline at end of file diff --git a/static/dist/css/main.bundle.css b/static/dist/css/main.bundle.css index 42d463a..a747cb2 100644 --- a/static/dist/css/main.bundle.css +++ b/static/dist/css/main.bundle.css @@ -100,7 +100,9 @@ script, link { margin: 0.5vh auto; } - +section { + margin: 0 auto; +} /* Add a card effect for articles */ .card { diff --git a/static/dist/css/main.bundle.css.map b/static/dist/css/main.bundle.css.map index 3fa7a97..030d808 100644 --- a/static/dist/css/main.bundle.css.map +++ b/static/dist/css/main.bundle.css.map @@ -1 +1 @@ -{"version":3,"file":"css/main.bundle.css","mappings":"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","sources":["webpack://app/./static/css/main.css","webpack://app/./static/css/components/button.css","webpack://app/./static/css/components/form.css","webpack://app/./static/css/components/image.css","webpack://app/./static/css/components/label.css","webpack://app/./static/css/components/overlay.css","webpack://app/./static/css/components/table.css","webpack://app/./static/css/layouts/header.css","webpack://app/./static/css/layouts/footer.css","webpack://app/./static/css/layouts/table-main.css","webpack://app/./static/css/themes/dark.css"],"sourcesContent":["\n:root {\n --font-family-base: 'Open Sans', Arial, sans-serif;\n /* Declare global variables */\n /*\n --c_purple: #5B29FF;\n --c_purple_pastel: #D1D1FF;\n --c_purple_lighter: #E8E1FF;\n --c_purple_light: #C6BDFF;\n --c_purple_dark: #4700B3;\n */\n /* purple theme\n - light https://coolors.co/palette/a172fd-a77afe-ac82fe-b691fe-c1a0fe-cbaffe-d6bffe-e0cefe-ebddfe-f5ecfe\n - dark https://coolors.co/palette/310055-3c0663-4a0a77-5a108f-6818a5-8b2fc9-ab51e3-bd68ee-d283ff-dc97ff\n */\n /*\n --c_purple_darker: #310055;\n --c_purple_dark: #4A0A77;\n --c_purple: #6818A5;\n --c_purple_light: #CBAFFE;\n --c_purple_lighter: #F5ECFE;\n\n --c_blue: #0044FF;\n --c_blue_pastel: #B8E0FF;\n --c_blue_light: #73E8FF;\n --c_blue_dark: #003ADB;\n */\n /* --c_red: * /\n --c-red: #FF0000;\n --c_red_pastel: #FAE0E2;\n --c_red_lighter: #FAE0E2;\n */\n}\n\nhtml {\n height: 100vh;\n /* overflow-y: clip; */\n}\n\nbody {\n background-color: var(--background-color);\n color: var(--text-color);\n font-family: var(--font-family-base);\n font-family: Arial;\n padding: 0;\n margin: 0;\n border: 0;\n height: 100vh;\n /* max-height: 100vh;\n overflow-y: clip; */\n}\n\n* {\n margin: 0;\n color: var(--text-color);\n}\n\nscript, link {\n display: none !important;\n}\n\n/*\n#pageBody {\n / * height: 69vh !important; * /\n max-height: 79vh;\n padding: 0 5vw;\n margin: 0;\n border: 0;\n align-content: center;\n justify-content: flex-start;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-y: auto;\n overflow-x: hidden;\n position: absolute;\n width: 90vw;\n color: var(--colour-text);\n}\n*/\n\n.page-body > * {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n text-align: center;\n width: 100%;\n align-self: center;\n font-size: 1rem;\n color: var(--text-color);\n}\n#pageBody > * > * {\n align-self: center;\n padding-top: 0.5vh 0.5vw;\n padding-bottom: 0.5vh 0.5vw;\n}\n#pageBody > .card {\n height: fit-content;\n margin: 0.5vh auto;\n}\n\n\n\n/* Add a card effect for articles */\n.card {\n padding: 1vh 2.5vw;\n margin: 1vh 1vw;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n text-align: center;\n border-radius: 1.5vh;\n position: relative;\n height: fit-content;\n max-width: 80vw;\n}\n\n.container {\n flex: 1;\n margin: 0;\n align-items: flex-start;\n justify-content: flex-start;\n text-align: flex-start;\n /* max-width: 100%; */\n /* min-width: fit-content; */\n}\n\n.column {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: auto 0;\n}\n\n.row {\n display: flex; \n flex-direction: row;\n width: 100%;\n flex-wrap: wrap;\n}\n\n.container > .card:first-of-type {\n margin-top: none;\n}\n\n\n/*\n/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other *\n@media screen and (max-width: 800px) {\n .leftcolumn, .rightcolumn { \n width: 100%;\n /* padding: 0; *\n }\n}\n\n/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other *\n@media screen and (max-width: 400px) {\n .topnav a {\n float: none;\n width: 100%;\n }\n}\n*/\n\n.container-input {\n padding: 1vh 1vw;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.container-input > label {\n width: 100%;\n margin-bottom: 1vh;\n margin-top: 0;\n}\n\n.container-input > input,\n.container-input > textarea {\n border: 2px solid var(--border-color);\n border-radius: 0.5vh;\n padding: 1vh 1vw;\n}\n\n.label-title {\n width: 100%;\n}\n\n\nul {\n max-width: 90%;\n padding: 5px 0 10px 0;\n width: fit-content;\n margin: auto;\n}\nli {\n text-align: left;\n font-size: 18px;\n}\n\n\n:not(input,textarea,select,button).dirty {\n background-color: var(--border-color);\n}\ninput.dirty, textarea.dirty, select.dirty {\n border-color: var(--primary-color);\n}\n\n.is-collapsed {\n display: none;\n}\n",".button {\n display: inline-block;\n padding: 0.5vh 0.75vh;\n border-radius: 0.75vh;\n text-decoration: none;\n font-weight: bold;\n transition: all 0.3s ease;\n width: fit-content;\n}\n.button:not(.is_collapsed) {\n cursor: pointer;\n}\n.button.is_collapsed {\n display: block;\n opacity: 0;\n}\n\n.button-primary {\n background: var(--colour-accent);\n color: var(--primary-color);\n border: 2px solid var(--primary-color);\n}\n\n.button-primary:hover {\n background: var(--colour-secondary);\n color: var(--colour-accent);\n}\n\n.button-light {\n background: white;\n color: var(--primary-color);\n}\n\n.button-light:hover {\n background: var(--colour-accent);\n}\n\n.logo:hover{\n cursor: pointer;\n}\n\n\n.button.icon.active.delete, \n.button.icon.active.add {\n height: 2vh;\n}","\n\nselect {\n border: 1px solid var(--colour-accent);\n background-color: var(--background-color-1);\n}","\nimg, video {\n border-radius: 3vh;\n}\n","\nh1 {\n font-size: 2.5rem;\n}\nh2 {\n font-size: 1.8rem;\n}\nh3 {\n font-size: 1.2rem;\n margin-top: 1vh;\n}\nh4 {\n font-size: 13px;\n margin: 1vh;\n text-align: center;\n margin-left: auto;\n margin-right: auto;\n}\nh5 {\n font-size: 11px;\n margin: 1vh;\n}\n\n\n.text-center {\n text-align: center;\n}\n.section-title {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n}\n.section-subtitle {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n}","\n\n/* Overlay modal */\n.overlay {\n /*\n display: none;\n */\n position: fixed;\n width: 100px;\n /* height: 50%; */ \n background: var(--background-color);\n justify-content: right;\n align-items: right;\n align-self: right;\n z-index: 999;\n}\n.is_collapsed {\n display: none;\n}\n\n/* Hamburger menu overlay */\n#buttonHamburger {\n cursor: pointer;\n position: fixed;\n right: 1vh;\n min-height: 3.5vh;\n max-height: 3.5vh;\n min-width: 4vh;\n max-width: 4vh;\n z-index: 10;\n padding: 0;\n}\n#buttonHamburger.expanded {\n min-width: 100px;\n max-width: 100px;\n min-height: 5vh;\n max-height: 5vh;\n padding-left: calc(100 * 1px - 5 * 1vh);\n padding-bottom: 1vh;\n}\n#buttonHamburger .icon.hamburger {\n min-height: 2.5vh;\n max-height: 2.5vh;\n min-width: 2.5vh;\n max-width: 2.5vh;\n padding: 0.5vh 0.75vh;\n}\n/*\n#buttonHamburger:hover {\n text-decoration: none;\n cursor: pointer;\n}\n*/\n#overlayHamburger {\n top: 7vh;\n right: 1vh;\n overflow-x: hidden;\n overflow-y: auto;\n max-height: 60vh;\n background-color: var(--colour-accent);\n border: 2px solid var(--border-colour);\n border-radius: 0.75vh;\n width: 100px;\n z-index: 2;\n padding-top: 3.5vh;\n}\n#overlayHamburger:first-child {\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n}\n#overlayHamburger:last-child {\n border-bottom-left-radius: 12px;\n border-bottom-right-radius: 12px;\n}\n#overlayHamburger > :hover {\n color: var(--background-color);\n background-color: var(--primary-color);\n}\n#overlayHamburger .container {\n background-color: var(--tcg-accent-purple);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n text-align: center;\n width: 100%;\n /* color: var(--colour-text); */\n font-weight: bold;\n font-size: 15px;\n /* height: 18px; */\n cursor: pointer;\n padding: 0;\n height: fit-content;\n}\n#overlayHamburger .container:hover {\n color: var(--background-color);\n background-color: var(--primary-color);\n}\n#overlayHamburger > .container {\n /*\n padding-top: 4.5px;\n padding-bottom: 4.5px;\n */\n}\n#overlayHamburger .container a {\n width: 100%;\n padding: 4.5px 0;\n color: var(--tcg-text-primary);\n text-decoration: none;\n line-height: initial;\n}\n#overlayHamburger .container a:hover {\n color: var(--background-color);\n background-color: var(--primary-color);\n}\n\n@media screen and (max-width: 400px) {\n #buttonHamburger {\n min-height: 5vh;\n max-height: 5vh;\n min-width: 5.5vh;\n max-width: 5.5vh;\n }\n #buttonHamburger .icon.hamburger {\n min-height: 4vh;\n max-height: 4vh;\n min-width: 4vh;\n max-width: 4vh;\n }\n #overlayHamburger {\n padding-top: 5vh;\n }\n}\n\n/* Confirm overlay */\n#overlayConfirm {\n position: absolute;\n left: 25vw;\n width: 50vw;\n height: 50vh;\n}\n\n#overlayConfirm .row > * {\n margin-left: auto;\n margin-right: auto;\n}\n\n#overlayConfirm .row .button.button-cancel {\n margin-right: 0.5vh;\n}\n#overlayConfirm .row .button.submit {\n margin-left: 0.5vh;\n}\n\n\n","\n#formFilters .container {\n max-width: fit-content;\n}\n\nthead, tbody {\n padding-top: 0px !important;\n padding-bottom: 0px !important;\n}\n\nth {\n background-color: transparent;\n}\ntd {\n font-size: min(16px, calc(1vh * 3));\n}\n\nth, td {\n min-width: fit-content;\n}\ntr:not(:last-child) > td {\n border-bottom: 1px dashed var(--border-colour);\n}\ntd > table > tbody > tr > td {\n border: none !important;\n}\nth.is_collapsed, td.is_collapsed {\n display: table-cell !important;\n}\ntd.dirty {\n background-color: var(--primary-color);\n}\ntd:not(.dirty) {\n background-color: transparent;\n}\n\ntr {\n min-height: 1px;\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: var(--border-colour);\n background-color: transparent;\n}\n\ntable button {\n margin: 0.25vh;\n padding: 0.5vh 1vh;\n}\n\ntable button.active {\n background-color: var(--background-color);\n}\n\ntr.delete, tr.delete > td {\n background-color: var(--colour-error);\n}\n\ntable div {\n align-content: center;\n}","\n\n/* Navigation */\n.topnav {\n display: flex;\n flex-wrap: wrap;\n flex: 1;\n flex-direction: row;\n font-weight: bold;\n font-size: 1vh;\n max-height: 7vh;\n height: 7vh;\n align-items: flex-start;\n background: var(--colour-text-background);\n justify-content: center; /* space-between */\n align-items: center;\n}\n.topnav a,\n.topnav label,\n.topnav p,\n.topnav h1 {\n float: left;\n display: flex;\n text-align: center;\n text-decoration: none;\n width: 100%;\n max-height: 7vh;\n justify-content: center;\n}\n.topnav h1 {\n color: var(--colour-text-link-visited);\n}\n.topnav a:hover {\n background-color: var(--background-color);\n color: var(--colour-text)\n}\n.topnav > .container {\n width: 30vw;\n min-width: 30vw;\n max-width: 30vw;\n height: 100%;\n align-items: center;\n align-self: center;\n display: flex;\n}\n.topnav .container.logo {\n cursor: pointer;\n}\n.topnav .container .logo {\n /* min-width: 35vh; */\n max-width: 30vw;\n /* width: 30vw; */\n /* min-height: 6vh; */\n max-height: 6vh;\n margin: 0.5vh;\n margin-right: auto;\n}\n.topnav .container.company-name {\n min-width: 30vw;\n max-width: 30vw;\n}\n.company-name {\n font-size: 1.6rem;\n}\n.nav-links {\n display: flex;\n gap: 0 2rem;\n display: flex;\n flex-wrap: wrap;\n max-width: calc(1vw * 100 - 1vh * 35);\n align-items: center;\n margin: 0 0.5vw;\n}\n.nav-links a {\n text-decoration: none;\n color: var(--colour-text);\n font-weight: normal;\n align-content: center;\n font-size: 1.2rem;\n width: fit-content;\n padding: 0.5vh 0.5vw;\n border-radius: 0.5vh;\n}\n.nav-links a.button {\n color: var(--colour-text-background);\n margin: 0 auto;\n font-weight: bold;\n}\n\n\n/* Page Filters */\n#formFilters {\n width: fit-content;\n margin-left: auto;\n margin-right: auto;\n \n}\n#formFilters * {\n font-size: 1rem;\n}\n\n#formFilters .container {\n}\n#formFilters .container-input {\n max-width: fit-content;\n padding: 0 0.5vh;\n}\n#formFilters .container-input:has(.dirty) {\n background-color: var(--colour-accent);\n} \n\n#formFilters .container-input input {\n width: 10vh;\n max-width: 10vh;\n height: 20px;\n}\n/*\n#formFilters .container-input input {\n height: 1.7vh;\n}\n#formFilters .container-input select {\n height: 2vh;\n}\n*/\n\n#formFilters .container-input.filter.active_only {\n width: 8vh;\n}\n#formFilters .container-input.filter.active_only input {\n display: none;\n}\n#formFilters .container-input.filter.active_only svg.active_only {\n height: 25px;\n fill: var(--colour-text-background);\n background-color: var(--colour-accent);\n /* border: 1px solid var(--colour-accent);\n border-radius: 0.5vh; */\n width: 25px;\n}\n#formFilters .container-input.filter.active_only svg.active_only.is_checked {\n fill: var(--colour-accent);\n background-color: var(--colour-text-background);\n}\n#formFilters .container-input.filter.is_not_empty {\n width: 12vh;\n}\n\n/*\n#formFilters button {\n padding: 0.5vh 0.75vh;\n background-color: var(--colour-accent);\n color: var(--primary-color);\n font-weight: bold;\n border-radius: 0.75vh;\n border: 2px solid var(--primary-color);\n}\n\n#formFilters button.is_collapsed {\n display: block;\n opacity: 0;\n}\n*/\n\nform.filter button.save, form.filter button.button-cancel {\n margin-top: 0;\n margin-bottom: 0;\n}\nform.filter button.save, form.filter button.button-cancel {\n margin-top: 0;\n margin-bottom: 1px;\n}\n\n/*\n@media screen and (max-width: 400px) {\n .topnav h1 {\n font-size: 16px;\n }\n}\n*/\n\n@media screen and (max-width: 980px) {\n /*\n .hero h1 {\n font-size: 2.5rem;\n }\n */\n .nav-links,\n .nav-links.tcg {\n display: none;\n }\n .topnav {\n justify-content: flex-start;\n align-items: start;\n }\n .topnav.tcg {\n padding-right: 30vw;\n }\n}","\n/* In sections */\n.tcg.footer {\n display: flex;\n}\n.tcg.footer > .container {\n /* display: flex; */\n}\n.footer-content {\n display: flex;\n margin: 0 auto;\n}\n.footer-section {\n /* display: flex; */\n margin: auto auto;\n}\n","\n#formFilters {\n padding: 0.5vh 1vw;\n margin-top: 1vh;\n}\n\n.table-main {\n overflow-x: auto;\n padding: 0; /*1vh 1vw;*/\n max-width: 80vw; /* min(calc(1vh * 80), calc(1vw * 90)); */\n width: min-content;\n align-items: normal;\n justify-content: normal;\n margin: 0 auto;\n}\n\n.table-main * {\n padding: 0.25vh 0.5vh;\n}\n\n.table-main thead {\n max-height: 4vh;\n overflow-y: visible;\n background-color: var(--background-color);\n}\n\n.table-main tbody {\n max-height: 75vh;\n overflow-y: auto;\n min-width: fit-content;\n max-width: fit-content;\n overflow-x: visible;\n}\n.table-main tbody.is_collapsed {\n display: block;\n}\n.table-main:has(tbody > div) tbody {\n}\n.table-main tbody > div {\n margin-left: auto;\n margin-right: auto;\n text-align: center;\n justify-content: center;\n justify-items: center;\n justify-self: center;\n align-content: center;\n align-items: center;\n align-self: center;\n position: relative;\n display: block;\n width: 100%; /* min(calc(90vh), calc(70vw)); */\n}\n\n.table-main select, \n.table-main input:not([type=\"checkbox\"]), \n.table-main textarea, \n.table-main div {\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n height: 100%;\n border: 1px solid var(--border-color);\n border-radius: 0.5vh;\n text-align: center;\n background-color: var(--background-color);\n font-size: 16px;\n}\n\n.table-main thead tr th, \n.table-main tbody tr td {\n max-width: 20vh;\n min-width: 20vh;\n padding: 0 0.5vh;\n}\n.table-main tbody tr td {\n height: 3vh;\n /* padding-top: 0.5vh; */\n}\n.table-main thead tr th.notes, \n.table-main tbody tr td.notes {\n max-width: fit-content;\n}\n.table-main tbody tr td:has(.dirty) {\n background-color: var(--primary-color);\n}\n.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {\n background-color: var(--colour-text-background);\n}\n.table-main tbody tr:not(:last-of-type) td {\n padding-bottom: 0.25vh;\n}\n.table-main tbody tr td.ddl-preview div {\n cursor: pointer;\n}\n.table-main tbody tr td.ddl-preview div,\n.table-main tbody tr td.ddl-preview select {\n padding-left: 2vh;\n padding-right: 2vh;\n}\n.table-main thead tr th.active, \n.table-main tbody tr td.active {\n max-width: 6vh;\n min-width: 6vh;\n}\n.table-main thead tr th.active svg.active.add {\n fill: var(--primary-color);\n background-color: var(--background-color);\n border: 2px solid var(--border-color);\n padding: 0;\n border-radius: 1vh;\n}\n.table-main tbody tr td.active svg.active.add {\n fill: var(--primary-color);\n}\n.table-main tbody tr td.active svg.active.delete {\n fill: var(--tcg-accent-red);\n}\n.table-main tbody tr td.display_order, \n.table-main thead tr th.display_order {\n max-width: 5vh;\n min-width: 5vh;\n}\n\n#container-template-elements {\n display: none;\n}\n\n\n@media screen and (max-width: 850px) {\n}\n@media screen and (max-width: 400px) {\n #formFilters input[type=\"text\"],\n #formFilters select {\n width: 15vh;\n /* height: 3vh; */\n }\n .topnav .container.company-name {\n margin: 0 auto;\n min-width: 40vw;\n max-width: 64vw;\n }\n .company-name {\n font-size: 1.2rem;\n }\n .table-main {\n max-height: 61vh;\n }\n .table-main thead {\n font-size: 0.8rem;\n }\n .table-main tbody {\n max-height: 53vh;\n }\n}","\n:root {\n --background-color: #121212;\n --text-color: #e0e0e0;\n --primary-color: #bb86fc;\n --secondary-color: #03dac6;\n --success-color: #00c853;\n --danger-color: #cf6679;\n --warning-color: #ffab00;\n --info-color: #2196f3;\n --light-color: #2c2c2c;\n --dark-color: #1f1f1f;\n --border-color: #333333;\n --shadow-color: rgba(255, 255, 255, 0.1);\n \n /* Header * /\n --header-bg: #1f1f1f;\n --header-text: #e0e0e0;\n \n /* Footer * /\n --footer-bg: #1f1f1f;\n --footer-text: #a0a0a0;\n \n /* Navigation * /\n --nav-bg: #1f1f1f;\n --nav-text: #e0e0e0;\n --nav-hover-bg: #2c2c2c;\n --nav-hover-text: #bb86fc;\n \n /* Buttons * /\n --Button-primary-bg: #bb86fc;\n --Button-primary-text: #121212;\n --Button-secondary-bg: #03dac6;\n --Button-secondary-text: #121212;\n \n /* Forms * /\n --input-bg: #2c2c2c;\n --input-border: #454545;\n --input-text: #e0e0e0;\n --input-focus-border: #bb86fc;\n \n /* Cards * /\n --card-bg: #1f1f1f;\n --card-border: #333333;\n --card-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05);\n */\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"css/main.bundle.css","mappings":";AACA;IACI,kDAAkD;IAClD,6BAA6B;IAC7B;;;;;;KAMC;IACD;;;KAGC;IACD;;;;;;;;;;;KAWC;IACD;;;;KAIC;AACL;;AAEA;IACI,aAAa;IACb,sBAAsB;AAC1B;;AAEA;IACI,yCAAyC;IACzC,wBAAwB;IACxB,oCAAoC;IACpC,kBAAkB;IAClB,UAAU;IACV,SAAS;IACT,SAAS;IACT,aAAa;IACb;uBACmB;AACvB;;AAEA;IACI,SAAS;IACT,wBAAwB;AAC5B;;AAEA;IACI,wBAAwB;AAC5B;;AAEA;;;;;;;;;;;;;;;;;;CAkBC;;AAED;IACI,aAAa;IACb,eAAe;IACf,mBAAmB;IACnB,uBAAuB;IACvB,kBAAkB;IAClB,WAAW;IACX,kBAAkB;IAClB,eAAe;IACf,wBAAwB;AAC5B;AACA;IACI,kBAAkB;IAClB,wBAAwB;IACxB,2BAA2B;AAC/B;AACA;IACI,mBAAmB;IACnB,kBAAkB;AACtB;;AAEA;IACI,cAAc;AAClB;;AAEA,mCAAmC;AACnC;IACI,kBAAkB;IAClB,eAAe;IACf,aAAa;IACb,eAAe;IACf,mBAAmB;IACnB,uBAAuB;IACvB,kBAAkB;IAClB,oBAAoB;IACpB,kBAAkB;IAClB,mBAAmB;IACnB,eAAe;AACnB;;AAEA;IACI,OAAO;IACP,SAAS;IACT,uBAAuB;IACvB,2BAA2B;IAC3B,sBAAsB;IACtB,qBAAqB;IACrB,4BAA4B;AAChC;;AAEA;IACI,aAAa;IACb,sBAAsB;IACtB,mBAAmB;IACnB,cAAc;AAClB;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,WAAW;IACX,eAAe;AACnB;;AAEA;IACI,gBAAgB;AACpB;;;AAGA;;;;;;;;;;;;;;;;CAgBC;;AAED;IACI,gBAAgB;IAChB,aAAa;IACb,eAAe;IACf,mBAAmB;IACnB,uBAAuB;IACvB,kBAAkB;AACtB;;AAEA;IACI,WAAW;IACX,kBAAkB;IAClB,aAAa;AACjB;;AAEA;;IAEI,qCAAqC;IACrC,oBAAoB;IACpB,gBAAgB;AACpB;;AAEA;IACI,WAAW;AACf;;;AAGA;IACI,cAAc;IACd,qBAAqB;IACrB,kBAAkB;IAClB,YAAY;AAChB;AACA;IACI,gBAAgB;IAChB,eAAe;AACnB;;;AAGA;IACI,qCAAqC;AACzC;AACA;IACI,kCAAkC;AACtC;;AAEA;IACI,aAAa;AACjB;;ACxNA;IACI,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,iBAAiB;IACjB,yBAAyB;IACzB,kBAAkB;AACtB;AACA;IACI,eAAe;AACnB;AACA;IACI,cAAc;IACd,UAAU;AACd;;AAEA;IACI,gCAAgC;IAChC,2BAA2B;IAC3B,sCAAsC;AAC1C;;AAEA;IACI,mCAAmC;IACnC,2BAA2B;AAC/B;;AAEA;IACI,iBAAiB;IACjB,2BAA2B;AAC/B;;AAEA;IACI,gCAAgC;AACpC;;AAEA;IACI,eAAe;AACnB;;;AAGA;;IAEI,WAAW;AACf,C;;;;;AC3CA;IACI,sCAAsC;IACtC,2CAA2C;AAC/C,C;;ACJA;IACI,kBAAkB;AACtB;;;ACFA;IACI,iBAAiB;AACrB;AACA;IACI,iBAAiB;AACrB;AACA;IACI,iBAAiB;IACjB,eAAe;AACnB;AACA;IACI,eAAe;IACf,WAAW;IACX,kBAAkB;IAClB,iBAAiB;IACjB,kBAAkB;AACtB;AACA;IACI,eAAe;IACf,WAAW;AACf;;;AAGA;IACI,kBAAkB;AACtB;AACA;IACI,iBAAiB;IACjB,mBAAmB;AACvB;AACA;IACI,iBAAiB;IACjB,mBAAmB;AACvB,C;;;;;AChCA,kBAAkB;AAClB;IACI;;KAEC;IACD,eAAe;IACf,YAAY;IACZ,iBAAiB;IACjB,mCAAmC;IACnC,sBAAsB;IACtB,kBAAkB;IAClB,iBAAiB;IACjB,YAAY;AAChB;AACA;IACI,aAAa;AACjB;;AAEA,2BAA2B;AAC3B;IACI,eAAe;IACf,eAAe;IACf,UAAU;IACV,iBAAiB;IACjB,iBAAiB;IACjB,cAAc;IACd,cAAc;IACd,WAAW;IACX,UAAU;AACd;AACA;IACI,gBAAgB;IAChB,gBAAgB;IAChB,eAAe;IACf,eAAe;IACf,uCAAuC;IACvC,mBAAmB;AACvB;AACA;IACI,iBAAiB;IACjB,iBAAiB;IACjB,gBAAgB;IAChB,gBAAgB;IAChB,qBAAqB;AACzB;AACA;;;;;CAKC;AACD;IACI,QAAQ;IACR,UAAU;IACV,kBAAkB;IAClB,gBAAgB;IAChB,gBAAgB;IAChB,sCAAsC;IACtC,sCAAsC;IACtC,qBAAqB;IACrB,YAAY;IACZ,UAAU;IACV,kBAAkB;AACtB;AACA;IACI,4BAA4B;IAC5B,6BAA6B;AACjC;AACA;IACI,+BAA+B;IAC/B,gCAAgC;AACpC;AACA;IACI,8BAA8B;IAC9B,sCAAsC;AAC1C;AACA;IACI,0CAA0C;IAC1C,aAAa;IACb,eAAe;IACf,mBAAmB;IACnB,uBAAuB;IACvB,kBAAkB;IAClB,WAAW;IACX,+BAA+B;IAC/B,iBAAiB;IACjB,eAAe;IACf,kBAAkB;IAClB,eAAe;IACf,UAAU;IACV,mBAAmB;AACvB;AACA;IACI,8BAA8B;IAC9B,sCAAsC;AAC1C;AACA;IACI;;;KAGC;AACL;AACA;IACI,WAAW;IACX,gBAAgB;IAChB,8BAA8B;IAC9B,qBAAqB;IACrB,oBAAoB;AACxB;AACA;IACI,8BAA8B;IAC9B,sCAAsC;AAC1C;;AAEA;IACI;QACI,eAAe;QACf,eAAe;QACf,gBAAgB;QAChB,gBAAgB;IACpB;IACA;QACI,eAAe;QACf,eAAe;QACf,cAAc;QACd,cAAc;IAClB;IACA;QACI,gBAAgB;IACpB;AACJ;;AAEA,oBAAoB;AACpB;IACI,kBAAkB;IAClB,UAAU;IACV,WAAW;IACX,YAAY;AAChB;;AAEA;IACI,iBAAiB;IACjB,kBAAkB;AACtB;;AAEA;IACI,mBAAmB;AACvB;AACA;IACI,kBAAkB;AACtB;;;;;ACvJA;IACI,sBAAsB;AAC1B;;AAEA;IACI,2BAA2B;IAC3B,8BAA8B;AAClC;;AAEA;IACI,6BAA6B;AACjC;AACA;IACI,mCAAmC;AACvC;;AAEA;IACI,sBAAsB;AAC1B;AACA;IACI,8CAA8C;AAClD;AACA;IACI,uBAAuB;AAC3B;AACA;IACI,8BAA8B;AAClC;AACA;IACI,sCAAsC;AAC1C;AACA;IACI,6BAA6B;AACjC;;AAEA;IACI,eAAe;IACf,wBAAwB;IACxB,qBAAqB;IACrB,kCAAkC;IAClC,6BAA6B;AACjC;;AAEA;IACI,cAAc;IACd,kBAAkB;AACtB;;AAEA;IACI,yCAAyC;AAC7C;;AAEA;IACI,qCAAqC;AACzC;;AAEA;IACI,qBAAqB;AACzB,C;;;ACzDA,eAAe;AACf;IACI,aAAa;IACb,eAAe;IACf,OAAO;IACP,mBAAmB;IACnB,iBAAiB;IACjB,cAAc;IACd,eAAe;IACf,WAAW;IACX,uBAAuB;IACvB,yCAAyC;IACzC,uBAAuB,EAAE,kBAAkB;IAC3C,mBAAmB;AACvB;AACA;;;;IAII,WAAW;IACX,aAAa;IACb,kBAAkB;IAClB,qBAAqB;IACrB,WAAW;IACX,eAAe;IACf,uBAAuB;AAC3B;AACA;IACI,sCAAsC;AAC1C;AACA;IACI,yCAAyC;IACzC;AACJ;AACA;IACI,WAAW;IACX,eAAe;IACf,eAAe;IACf,YAAY;IACZ,mBAAmB;IACnB,kBAAkB;IAClB,aAAa;AACjB;AACA;IACI,eAAe;AACnB;AACA;IACI,qBAAqB;IACrB,eAAe;IACf,iBAAiB;IACjB,qBAAqB;IACrB,eAAe;IACf,aAAa;IACb,kBAAkB;AACtB;AACA;IACI,eAAe;IACf,eAAe;AACnB;AACA;IACI,iBAAiB;AACrB;AACA;IACI,aAAa;IACb,WAAW;IACX,aAAa;IACb,eAAe;IACf,qCAAqC;IACrC,mBAAmB;IACnB,eAAe;AACnB;AACA;IACI,qBAAqB;IACrB,yBAAyB;IACzB,mBAAmB;IACnB,qBAAqB;IACrB,iBAAiB;IACjB,kBAAkB;IAClB,oBAAoB;IACpB,oBAAoB;AACxB;AACA;IACI,oCAAoC;IACpC,cAAc;IACd,iBAAiB;AACrB;;;AAGA,iBAAiB;AACjB;IACI,kBAAkB;IAClB,iBAAiB;IACjB,kBAAkB;;AAEtB;AACA;IACI,eAAe;AACnB;;AAEA;AACA;AACA;IACI,sBAAsB;IACtB,gBAAgB;AACpB;AACA;IACI,sCAAsC;AAC1C;;AAEA;IACI,WAAW;IACX,eAAe;IACf,YAAY;AAChB;AACA;;;;;;;CAOC;;AAED;IACI,UAAU;AACd;AACA;IACI,aAAa;AACjB;AACA;IACI,YAAY;IACZ,mCAAmC;IACnC,sCAAsC;IACtC;2BACuB;IACvB,WAAW;AACf;AACA;IACI,0BAA0B;IAC1B,+CAA+C;AACnD;AACA;IACI,WAAW;AACf;;AAEA;;;;;;;;;;;;;;CAcC;;AAED;IACI,aAAa;IACb,gBAAgB;AACpB;AACA;IACI,aAAa;IACb,kBAAkB;AACtB;;AAEA;;;;;;CAMC;;AAED;IACI;;;;KAIC;IACD;;QAEI,aAAa;IACjB;IACA;QACI,2BAA2B;QAC3B,kBAAkB;IACtB;IACA;QACI,mBAAmB;IACvB;AACJ,C;;ACpMA,gBAAgB;AAChB;IACI,aAAa;AACjB;AACA;IACI,mBAAmB;AACvB;AACA;IACI,aAAa;IACb,cAAc;AAClB;AACA;IACI,mBAAmB;IACnB,iBAAiB;AACrB;;;ACdA;IACI,kBAAkB;IAClB,eAAe;AACnB;;AAEA;IACI,gBAAgB;IAChB,UAAU,EAAE,WAAW;IACvB,eAAe,EAAE,yCAAyC;IAC1D,kBAAkB;IAClB,mBAAmB;IACnB,uBAAuB;IACvB,cAAc;AAClB;;AAEA;IACI,qBAAqB;AACzB;;AAEA;IACI,eAAe;IACf,mBAAmB;IACnB,yCAAyC;AAC7C;;AAEA;IACI,gBAAgB;IAChB,gBAAgB;IAChB,sBAAsB;IACtB,sBAAsB;IACtB,mBAAmB;AACvB;AACA;IACI,cAAc;AAClB;AACA;AACA;AACA;IACI,iBAAiB;IACjB,kBAAkB;IAClB,kBAAkB;IAClB,uBAAuB;IACvB,qBAAqB;IACrB,oBAAoB;IACpB,qBAAqB;IACrB,mBAAmB;IACnB,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,WAAW,EAAE,iCAAiC;AAClD;;AAEA;;;;IAII,sBAAsB;IACtB,WAAW;IACX,eAAe;IACf,YAAY;IACZ,qCAAqC;IACrC,oBAAoB;IACpB,kBAAkB;IAClB,yCAAyC;IACzC,eAAe;AACnB;;AAEA;;IAEI,eAAe;IACf,eAAe;IACf,gBAAgB;AACpB;AACA;IACI,WAAW;IACX,wBAAwB;AAC5B;AACA;;IAEI,sBAAsB;AAC1B;AACA;IACI,sCAAsC;AAC1C;AACA;IACI,+CAA+C;AACnD;AACA;IACI,sBAAsB;AAC1B;AACA;IACI,eAAe;AACnB;AACA;;IAEI,iBAAiB;IACjB,kBAAkB;AACtB;AACA;;IAEI,cAAc;IACd,cAAc;AAClB;AACA;IACI,0BAA0B;IAC1B,yCAAyC;IACzC,qCAAqC;IACrC,UAAU;IACV,kBAAkB;AACtB;AACA;IACI,0BAA0B;AAC9B;AACA;IACI,2BAA2B;AAC/B;AACA;;IAEI,cAAc;IACd,cAAc;AAClB;;AAEA;IACI,aAAa;AACjB;;;AAGA;AACA;AACA;IACI;;QAEI,WAAW;QACX,iBAAiB;IACrB;IACA;QACI,cAAc;QACd,eAAe;QACf,eAAe;IACnB;IACA;QACI,iBAAiB;IACrB;IACA;QACI,gBAAgB;IACpB;IACA;QACI,iBAAiB;IACrB;IACA;QACI,gBAAgB;IACpB;AACJ,C;;;;;;ACxJA;IACI,2BAA2B;IAC3B,qBAAqB;IACrB,wBAAwB;IACxB,0BAA0B;IAC1B,wBAAwB;IACxB,uBAAuB;IACvB,wBAAwB;IACxB,qBAAqB;IACrB,sBAAsB;IACtB,qBAAqB;IACrB,uBAAuB;IACvB,wCAAwC;;IAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BC;AACL","sources":["webpack://app/./static/css/main.css","webpack://app/./static/css/components/button.css","webpack://app/./static/css/components/form.css","webpack://app/./static/css/components/image.css","webpack://app/./static/css/components/label.css","webpack://app/./static/css/components/overlay.css","webpack://app/./static/css/components/table.css","webpack://app/./static/css/layouts/header.css","webpack://app/./static/css/layouts/footer.css","webpack://app/./static/css/layouts/table-main.css","webpack://app/./static/css/themes/dark.css"],"sourcesContent":["\n:root {\n --font-family-base: 'Open Sans', Arial, sans-serif;\n /* Declare global variables */\n /*\n --c_purple: #5B29FF;\n --c_purple_pastel: #D1D1FF;\n --c_purple_lighter: #E8E1FF;\n --c_purple_light: #C6BDFF;\n --c_purple_dark: #4700B3;\n */\n /* purple theme\n - light https://coolors.co/palette/a172fd-a77afe-ac82fe-b691fe-c1a0fe-cbaffe-d6bffe-e0cefe-ebddfe-f5ecfe\n - dark https://coolors.co/palette/310055-3c0663-4a0a77-5a108f-6818a5-8b2fc9-ab51e3-bd68ee-d283ff-dc97ff\n */\n /*\n --c_purple_darker: #310055;\n --c_purple_dark: #4A0A77;\n --c_purple: #6818A5;\n --c_purple_light: #CBAFFE;\n --c_purple_lighter: #F5ECFE;\n\n --c_blue: #0044FF;\n --c_blue_pastel: #B8E0FF;\n --c_blue_light: #73E8FF;\n --c_blue_dark: #003ADB;\n */\n /* --c_red: * /\n --c-red: #FF0000;\n --c_red_pastel: #FAE0E2;\n --c_red_lighter: #FAE0E2;\n */\n}\n\nhtml {\n height: 100vh;\n /* overflow-y: clip; */\n}\n\nbody {\n background-color: var(--background-color);\n color: var(--text-color);\n font-family: var(--font-family-base);\n font-family: Arial;\n padding: 0;\n margin: 0;\n border: 0;\n height: 100vh;\n /* max-height: 100vh;\n overflow-y: clip; */\n}\n\n* {\n margin: 0;\n color: var(--text-color);\n}\n\nscript, link {\n display: none !important;\n}\n\n/*\n#pageBody {\n / * height: 69vh !important; * /\n max-height: 79vh;\n padding: 0 5vw;\n margin: 0;\n border: 0;\n align-content: center;\n justify-content: flex-start;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-y: auto;\n overflow-x: hidden;\n position: absolute;\n width: 90vw;\n color: var(--colour-text);\n}\n*/\n\n.page-body > * {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n text-align: center;\n width: 100%;\n align-self: center;\n font-size: 1rem;\n color: var(--text-color);\n}\n#pageBody > * > * {\n align-self: center;\n padding-top: 0.5vh 0.5vw;\n padding-bottom: 0.5vh 0.5vw;\n}\n#pageBody > .card {\n height: fit-content;\n margin: 0.5vh auto;\n}\n\nsection {\n margin: 0 auto;\n}\n\n/* Add a card effect for articles */\n.card {\n padding: 1vh 2.5vw;\n margin: 1vh 1vw;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n text-align: center;\n border-radius: 1.5vh;\n position: relative;\n height: fit-content;\n max-width: 80vw;\n}\n\n.container {\n flex: 1;\n margin: 0;\n align-items: flex-start;\n justify-content: flex-start;\n text-align: flex-start;\n /* max-width: 100%; */\n /* min-width: fit-content; */\n}\n\n.column {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: auto 0;\n}\n\n.row {\n display: flex; \n flex-direction: row;\n width: 100%;\n flex-wrap: wrap;\n}\n\n.container > .card:first-of-type {\n margin-top: none;\n}\n\n\n/*\n/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other *\n@media screen and (max-width: 800px) {\n .leftcolumn, .rightcolumn { \n width: 100%;\n /* padding: 0; *\n }\n}\n\n/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other *\n@media screen and (max-width: 400px) {\n .topnav a {\n float: none;\n width: 100%;\n }\n}\n*/\n\n.container-input {\n padding: 1vh 1vw;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.container-input > label {\n width: 100%;\n margin-bottom: 1vh;\n margin-top: 0;\n}\n\n.container-input > input,\n.container-input > textarea {\n border: 2px solid var(--border-color);\n border-radius: 0.5vh;\n padding: 1vh 1vw;\n}\n\n.label-title {\n width: 100%;\n}\n\n\nul {\n max-width: 90%;\n padding: 5px 0 10px 0;\n width: fit-content;\n margin: auto;\n}\nli {\n text-align: left;\n font-size: 18px;\n}\n\n\n:not(input,textarea,select,button).dirty {\n background-color: var(--border-color);\n}\ninput.dirty, textarea.dirty, select.dirty {\n border-color: var(--primary-color);\n}\n\n.is-collapsed {\n display: none;\n}\n",".button {\n display: inline-block;\n padding: 0.5vh 0.75vh;\n border-radius: 0.75vh;\n text-decoration: none;\n font-weight: bold;\n transition: all 0.3s ease;\n width: fit-content;\n}\n.button:not(.is_collapsed) {\n cursor: pointer;\n}\n.button.is_collapsed {\n display: block;\n opacity: 0;\n}\n\n.button-primary {\n background: var(--colour-accent);\n color: var(--primary-color);\n border: 2px solid var(--primary-color);\n}\n\n.button-primary:hover {\n background: var(--colour-secondary);\n color: var(--colour-accent);\n}\n\n.button-light {\n background: white;\n color: var(--primary-color);\n}\n\n.button-light:hover {\n background: var(--colour-accent);\n}\n\n.logo:hover{\n cursor: pointer;\n}\n\n\n.button.icon.active.delete, \n.button.icon.active.add {\n height: 2vh;\n}","\n\nselect {\n border: 1px solid var(--colour-accent);\n background-color: var(--background-color-1);\n}","\nimg, video {\n border-radius: 3vh;\n}\n","\nh1 {\n font-size: 2.5rem;\n}\nh2 {\n font-size: 1.8rem;\n}\nh3 {\n font-size: 1.2rem;\n margin-top: 1vh;\n}\nh4 {\n font-size: 13px;\n margin: 1vh;\n text-align: center;\n margin-left: auto;\n margin-right: auto;\n}\nh5 {\n font-size: 11px;\n margin: 1vh;\n}\n\n\n.text-center {\n text-align: center;\n}\n.section-title {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n}\n.section-subtitle {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n}","\n\n/* Overlay modal */\n.overlay {\n /*\n display: none;\n */\n position: fixed;\n width: 100px;\n /* height: 50%; */ \n background: var(--background-color);\n justify-content: right;\n align-items: right;\n align-self: right;\n z-index: 999;\n}\n.is_collapsed {\n display: none;\n}\n\n/* Hamburger menu overlay */\n#buttonHamburger {\n cursor: pointer;\n position: fixed;\n right: 1vh;\n min-height: 3.5vh;\n max-height: 3.5vh;\n min-width: 4vh;\n max-width: 4vh;\n z-index: 10;\n padding: 0;\n}\n#buttonHamburger.expanded {\n min-width: 100px;\n max-width: 100px;\n min-height: 5vh;\n max-height: 5vh;\n padding-left: calc(100 * 1px - 5 * 1vh);\n padding-bottom: 1vh;\n}\n#buttonHamburger .icon.hamburger {\n min-height: 2.5vh;\n max-height: 2.5vh;\n min-width: 2.5vh;\n max-width: 2.5vh;\n padding: 0.5vh 0.75vh;\n}\n/*\n#buttonHamburger:hover {\n text-decoration: none;\n cursor: pointer;\n}\n*/\n#overlayHamburger {\n top: 7vh;\n right: 1vh;\n overflow-x: hidden;\n overflow-y: auto;\n max-height: 60vh;\n background-color: var(--colour-accent);\n border: 2px solid var(--border-colour);\n border-radius: 0.75vh;\n width: 100px;\n z-index: 2;\n padding-top: 3.5vh;\n}\n#overlayHamburger:first-child {\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n}\n#overlayHamburger:last-child {\n border-bottom-left-radius: 12px;\n border-bottom-right-radius: 12px;\n}\n#overlayHamburger > :hover {\n color: var(--background-color);\n background-color: var(--primary-color);\n}\n#overlayHamburger .container {\n background-color: var(--tcg-accent-purple);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n text-align: center;\n width: 100%;\n /* color: var(--colour-text); */\n font-weight: bold;\n font-size: 15px;\n /* height: 18px; */\n cursor: pointer;\n padding: 0;\n height: fit-content;\n}\n#overlayHamburger .container:hover {\n color: var(--background-color);\n background-color: var(--primary-color);\n}\n#overlayHamburger > .container {\n /*\n padding-top: 4.5px;\n padding-bottom: 4.5px;\n */\n}\n#overlayHamburger .container a {\n width: 100%;\n padding: 4.5px 0;\n color: var(--tcg-text-primary);\n text-decoration: none;\n line-height: initial;\n}\n#overlayHamburger .container a:hover {\n color: var(--background-color);\n background-color: var(--primary-color);\n}\n\n@media screen and (max-width: 400px) {\n #buttonHamburger {\n min-height: 5vh;\n max-height: 5vh;\n min-width: 5.5vh;\n max-width: 5.5vh;\n }\n #buttonHamburger .icon.hamburger {\n min-height: 4vh;\n max-height: 4vh;\n min-width: 4vh;\n max-width: 4vh;\n }\n #overlayHamburger {\n padding-top: 5vh;\n }\n}\n\n/* Confirm overlay */\n#overlayConfirm {\n position: absolute;\n left: 25vw;\n width: 50vw;\n height: 50vh;\n}\n\n#overlayConfirm .row > * {\n margin-left: auto;\n margin-right: auto;\n}\n\n#overlayConfirm .row .button.button-cancel {\n margin-right: 0.5vh;\n}\n#overlayConfirm .row .button.submit {\n margin-left: 0.5vh;\n}\n\n\n","\n#formFilters .container {\n max-width: fit-content;\n}\n\nthead, tbody {\n padding-top: 0px !important;\n padding-bottom: 0px !important;\n}\n\nth {\n background-color: transparent;\n}\ntd {\n font-size: min(16px, calc(1vh * 3));\n}\n\nth, td {\n min-width: fit-content;\n}\ntr:not(:last-child) > td {\n border-bottom: 1px dashed var(--border-colour);\n}\ntd > table > tbody > tr > td {\n border: none !important;\n}\nth.is_collapsed, td.is_collapsed {\n display: table-cell !important;\n}\ntd.dirty {\n background-color: var(--primary-color);\n}\ntd:not(.dirty) {\n background-color: transparent;\n}\n\ntr {\n min-height: 1px;\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: var(--border-colour);\n background-color: transparent;\n}\n\ntable button {\n margin: 0.25vh;\n padding: 0.5vh 1vh;\n}\n\ntable button.active {\n background-color: var(--background-color);\n}\n\ntr.delete, tr.delete > td {\n background-color: var(--colour-error);\n}\n\ntable div {\n align-content: center;\n}","\n\n/* Navigation */\n.topnav {\n display: flex;\n flex-wrap: wrap;\n flex: 1;\n flex-direction: row;\n font-weight: bold;\n font-size: 1vh;\n max-height: 7vh;\n height: 7vh;\n align-items: flex-start;\n background: var(--colour-text-background);\n justify-content: center; /* space-between */\n align-items: center;\n}\n.topnav a,\n.topnav label,\n.topnav p,\n.topnav h1 {\n float: left;\n display: flex;\n text-align: center;\n text-decoration: none;\n width: 100%;\n max-height: 7vh;\n justify-content: center;\n}\n.topnav h1 {\n color: var(--colour-text-link-visited);\n}\n.topnav a:hover {\n background-color: var(--background-color);\n color: var(--colour-text)\n}\n.topnav > .container {\n width: 30vw;\n min-width: 30vw;\n max-width: 30vw;\n height: 100%;\n align-items: center;\n align-self: center;\n display: flex;\n}\n.topnav .container.logo {\n cursor: pointer;\n}\n.topnav .container .logo {\n /* min-width: 35vh; */\n max-width: 30vw;\n /* width: 30vw; */\n /* min-height: 6vh; */\n max-height: 6vh;\n margin: 0.5vh;\n margin-right: auto;\n}\n.topnav .container.company-name {\n min-width: 30vw;\n max-width: 30vw;\n}\n.company-name {\n font-size: 1.6rem;\n}\n.nav-links {\n display: flex;\n gap: 0 2rem;\n display: flex;\n flex-wrap: wrap;\n max-width: calc(1vw * 100 - 1vh * 35);\n align-items: center;\n margin: 0 0.5vw;\n}\n.nav-links a {\n text-decoration: none;\n color: var(--colour-text);\n font-weight: normal;\n align-content: center;\n font-size: 1.2rem;\n width: fit-content;\n padding: 0.5vh 0.5vw;\n border-radius: 0.5vh;\n}\n.nav-links a.button {\n color: var(--colour-text-background);\n margin: 0 auto;\n font-weight: bold;\n}\n\n\n/* Page Filters */\n#formFilters {\n width: fit-content;\n margin-left: auto;\n margin-right: auto;\n \n}\n#formFilters * {\n font-size: 1rem;\n}\n\n#formFilters .container {\n}\n#formFilters .container-input {\n max-width: fit-content;\n padding: 0 0.5vh;\n}\n#formFilters .container-input:has(.dirty) {\n background-color: var(--colour-accent);\n} \n\n#formFilters .container-input input {\n width: 10vh;\n max-width: 10vh;\n height: 20px;\n}\n/*\n#formFilters .container-input input {\n height: 1.7vh;\n}\n#formFilters .container-input select {\n height: 2vh;\n}\n*/\n\n#formFilters .container-input.filter.active_only {\n width: 8vh;\n}\n#formFilters .container-input.filter.active_only input {\n display: none;\n}\n#formFilters .container-input.filter.active_only svg.active_only {\n height: 25px;\n fill: var(--colour-text-background);\n background-color: var(--colour-accent);\n /* border: 1px solid var(--colour-accent);\n border-radius: 0.5vh; */\n width: 25px;\n}\n#formFilters .container-input.filter.active_only svg.active_only.is_checked {\n fill: var(--colour-accent);\n background-color: var(--colour-text-background);\n}\n#formFilters .container-input.filter.is_not_empty {\n width: 12vh;\n}\n\n/*\n#formFilters button {\n padding: 0.5vh 0.75vh;\n background-color: var(--colour-accent);\n color: var(--primary-color);\n font-weight: bold;\n border-radius: 0.75vh;\n border: 2px solid var(--primary-color);\n}\n\n#formFilters button.is_collapsed {\n display: block;\n opacity: 0;\n}\n*/\n\nform.filter button.save, form.filter button.button-cancel {\n margin-top: 0;\n margin-bottom: 0;\n}\nform.filter button.save, form.filter button.button-cancel {\n margin-top: 0;\n margin-bottom: 1px;\n}\n\n/*\n@media screen and (max-width: 400px) {\n .topnav h1 {\n font-size: 16px;\n }\n}\n*/\n\n@media screen and (max-width: 980px) {\n /*\n .hero h1 {\n font-size: 2.5rem;\n }\n */\n .nav-links,\n .nav-links.tcg {\n display: none;\n }\n .topnav {\n justify-content: flex-start;\n align-items: start;\n }\n .topnav.tcg {\n padding-right: 30vw;\n }\n}","\n/* In sections */\n.tcg.footer {\n display: flex;\n}\n.tcg.footer > .container {\n /* display: flex; */\n}\n.footer-content {\n display: flex;\n margin: 0 auto;\n}\n.footer-section {\n /* display: flex; */\n margin: auto auto;\n}\n","\n#formFilters {\n padding: 0.5vh 1vw;\n margin-top: 1vh;\n}\n\n.table-main {\n overflow-x: auto;\n padding: 0; /*1vh 1vw;*/\n max-width: 80vw; /* min(calc(1vh * 80), calc(1vw * 90)); */\n width: min-content;\n align-items: normal;\n justify-content: normal;\n margin: 0 auto;\n}\n\n.table-main * {\n padding: 0.25vh 0.5vh;\n}\n\n.table-main thead {\n max-height: 4vh;\n overflow-y: visible;\n background-color: var(--background-color);\n}\n\n.table-main tbody {\n max-height: 75vh;\n overflow-y: auto;\n min-width: fit-content;\n max-width: fit-content;\n overflow-x: visible;\n}\n.table-main tbody.is_collapsed {\n display: block;\n}\n.table-main:has(tbody > div) tbody {\n}\n.table-main tbody > div {\n margin-left: auto;\n margin-right: auto;\n text-align: center;\n justify-content: center;\n justify-items: center;\n justify-self: center;\n align-content: center;\n align-items: center;\n align-self: center;\n position: relative;\n display: block;\n width: 100%; /* min(calc(90vh), calc(70vw)); */\n}\n\n.table-main select, \n.table-main input:not([type=\"checkbox\"]), \n.table-main textarea, \n.table-main div {\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n height: 100%;\n border: 1px solid var(--border-color);\n border-radius: 0.5vh;\n text-align: center;\n background-color: var(--background-color);\n font-size: 16px;\n}\n\n.table-main thead tr th, \n.table-main tbody tr td {\n max-width: 20vh;\n min-width: 20vh;\n padding: 0 0.5vh;\n}\n.table-main tbody tr td {\n height: 3vh;\n /* padding-top: 0.5vh; */\n}\n.table-main thead tr th.notes, \n.table-main tbody tr td.notes {\n max-width: fit-content;\n}\n.table-main tbody tr td:has(.dirty) {\n background-color: var(--primary-color);\n}\n.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {\n background-color: var(--colour-text-background);\n}\n.table-main tbody tr:not(:last-of-type) td {\n padding-bottom: 0.25vh;\n}\n.table-main tbody tr td.ddl-preview div {\n cursor: pointer;\n}\n.table-main tbody tr td.ddl-preview div,\n.table-main tbody tr td.ddl-preview select {\n padding-left: 2vh;\n padding-right: 2vh;\n}\n.table-main thead tr th.active, \n.table-main tbody tr td.active {\n max-width: 6vh;\n min-width: 6vh;\n}\n.table-main thead tr th.active svg.active.add {\n fill: var(--primary-color);\n background-color: var(--background-color);\n border: 2px solid var(--border-color);\n padding: 0;\n border-radius: 1vh;\n}\n.table-main tbody tr td.active svg.active.add {\n fill: var(--primary-color);\n}\n.table-main tbody tr td.active svg.active.delete {\n fill: var(--tcg-accent-red);\n}\n.table-main tbody tr td.display_order, \n.table-main thead tr th.display_order {\n max-width: 5vh;\n min-width: 5vh;\n}\n\n#container-template-elements {\n display: none;\n}\n\n\n@media screen and (max-width: 850px) {\n}\n@media screen and (max-width: 400px) {\n #formFilters input[type=\"text\"],\n #formFilters select {\n width: 15vh;\n /* height: 3vh; */\n }\n .topnav .container.company-name {\n margin: 0 auto;\n min-width: 40vw;\n max-width: 64vw;\n }\n .company-name {\n font-size: 1.2rem;\n }\n .table-main {\n max-height: 61vh;\n }\n .table-main thead {\n font-size: 0.8rem;\n }\n .table-main tbody {\n max-height: 53vh;\n }\n}","\n:root {\n --background-color: #121212;\n --text-color: #e0e0e0;\n --primary-color: #bb86fc;\n --secondary-color: #03dac6;\n --success-color: #00c853;\n --danger-color: #cf6679;\n --warning-color: #ffab00;\n --info-color: #2196f3;\n --light-color: #2c2c2c;\n --dark-color: #1f1f1f;\n --border-color: #333333;\n --shadow-color: rgba(255, 255, 255, 0.1);\n \n /* Header * /\n --header-bg: #1f1f1f;\n --header-text: #e0e0e0;\n \n /* Footer * /\n --footer-bg: #1f1f1f;\n --footer-text: #a0a0a0;\n \n /* Navigation * /\n --nav-bg: #1f1f1f;\n --nav-text: #e0e0e0;\n --nav-hover-bg: #2c2c2c;\n --nav-hover-text: #bb86fc;\n \n /* Buttons * /\n --Button-primary-bg: #bb86fc;\n --Button-primary-text: #121212;\n --Button-secondary-bg: #03dac6;\n --Button-secondary-text: #121212;\n \n /* Forms * /\n --input-bg: #2c2c2c;\n --input-border: #454545;\n --input-text: #e0e0e0;\n --input-focus-border: #bb86fc;\n \n /* Cards * /\n --card-bg: #1f1f1f;\n --card-border: #333333;\n --card-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05);\n */\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/static/dist/css/tcg_home.bundle.css b/static/dist/css/tcg_home.bundle.css index a89de90..ab1ddfd 100644 --- a/static/dist/css/tcg_home.bundle.css +++ b/static/dist/css/tcg_home.bundle.css @@ -63,12 +63,192 @@ padding: 0; margin: 0; } -#pageBody .column .row { - margin-top: 0.5vh; -} -#pageBody .column .row .button { - margin-left: auto; - margin-right: auto; +/* Landing Page - Hero Section */ +.home-hero { + text-align: center; + padding: 6rem 2rem 4rem; + position: relative; } +.home-hero::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 900px; + height: 550px; + background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.12) 0%, transparent 70%); + pointer-events: none; +} + +.home-hero-eyebrow { + font-family: 'Cinzel', serif; + font-size: 1.5rem; + color: var(--tcg-accent-purple); + letter-spacing: 0.3em; + text-transform: uppercase; + margin-bottom: 1.5rem; + animation: tcg-fadeIn 0.6s ease both; +} + +.home-hero-title { + font-family: 'Cinzel', serif; + font-size: clamp(2.5rem, 6vw, 4.5rem); + font-weight: 700; + background: linear-gradient(135deg, var(--tcg-accent-gold) 30%, var(--tcg-accent-purple)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + letter-spacing: 0.05em; + text-transform: uppercase; + margin: 0 0 1.5rem; + line-height: 1.1; + animation: tcg-fadeInDown 0.8s ease 0.1s both; +} + +.home-hero-subtitle { + font-size: clamp(1.1rem, 2vw, 1.4rem); + color: var(--tcg-text-secondary); + max-width: 580px; + margin: 0 auto 3rem; + line-height: 1.7; + animation: tcg-fadeIn 0.8s ease 0.3s both; +} + +.home-hero-actions { + display: flex; + gap: 1.25rem; + justify-content: center; + flex-wrap: wrap; + animation: tcg-fadeIn 0.8s ease 0.5s both; +} + +/* Divider */ +.home-divider { + width: 80px; + height: 3px; + background: linear-gradient(90deg, var(--tcg-accent-purple), var(--tcg-accent-gold)); + margin: 0 auto; + border-radius: 2px; +} + +/* Features Section */ +.home-features { + padding: 2rem 0; +} + +.home-features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1.5rem; + margin-top: 2.5rem; +} + +.home-feature-card { + position: relative; + text-align: center; +} + +.home-feature-card:nth-child(1) { animation: tcg-scaleIn 0.6s ease 0.1s both; } +.home-feature-card:nth-child(2) { animation: tcg-scaleIn 0.6s ease 0.25s both; } +.home-feature-card:nth-child(3) { animation: tcg-scaleIn 0.6s ease 0.4s both; } + +.home-feature-symbol { + width: 56px; + height: 56px; + margin: 0 auto 1.25rem; + background: linear-gradient(135deg, var(--tcg-accent-purple), var(--tcg-accent-gold)); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Cinzel', serif; + font-size: 1.4rem; + color: var(--tcg-bg-primary); + font-weight: 700; + letter-spacing: 0; +} + +.home-feature-card h3 { + font-family: 'Cinzel', serif; + color: var(--tcg-accent-gold); + font-size: 1.05rem; + margin: 0 0 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.home-feature-card p { + color: var(--tcg-text-secondary); + font-size: 1.1rem; + line-height: 1.6; + margin: 0; +} + +/* CTA Section */ +.home-cta { + text-align: center; + padding: 4rem 2rem; + background: var(--tcg-bg-secondary); + border: 2px solid var(--tcg-border-color); + border-radius: 16px; + margin-top: 1rem; + position: relative; + /* overflow: hidden; */ + animation: tcg-fadeIn 0.8s ease 0.6s both; +} + +.home-cta::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.06) 0%, transparent 70%); + pointer-events: none; +} + +.home-cta-title { + font-family: 'Cinzel', serif; + font-size: clamp(1.4rem, 3vw, 2rem); + color: var(--tcg-text-primary); + margin: 0 0 1rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.home-cta-subtitle { + color: var(--tcg-text-secondary); + font-size: 1.15rem; + margin: 0 auto 2.5rem; + max-width: 500px; + line-height: 1.6; +} + +/* Responsive */ +@media screen and (max-width: 768px) { + .home-hero { + padding: 3rem 1rem 2rem; + } + + .home-hero-actions { + flex-direction: column; + align-items: center; + } + + .home-hero-actions .btn-tcg { + width: 100%; + max-width: 280px; + text-align: center; + } + + .home-features-grid { + grid-template-columns: 1fr; + } + + .home-cta { + padding: 2.5rem 1.5rem; + } +} + + /*# sourceMappingURL=tcg_home.bundle.css.map*/ \ No newline at end of file diff --git a/static/dist/css/tcg_home.bundle.css.map b/static/dist/css/tcg_home.bundle.css.map index 193a2b7..f8ae4db 100644 --- a/static/dist/css/tcg_home.bundle.css.map +++ b/static/dist/css/tcg_home.bundle.css.map @@ -1 +1 @@ -{"version":3,"file":"css/tcg_home.bundle.css","mappings":";;AAEA;IACI,gBAAgB;IAChB,oBAAoB;IACpB,cAAc;AAClB;;;AAGA,iBAAiB;AACjB;IACI,sBAAsB;AAC1B;;AAEA,eAAe;AACf;IACI,gBAAgB;IAChB,cAAc;IACd,cAAc;IACd,SAAS;IACT,qBAAqB;IACrB,2BAA2B;IAC3B,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;IAClB,WAAW;IACX,yBAAyB;AAC7B;;;AAGA,WAAW;AACX;IACI,gBAAgB;IAChB,kBAAkB;IAClB,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,sCAAsC;IACtC,kBAAkB;IAClB,SAAS;IACT,WAAW;AACf;;AAEA;IACI;QACI,eAAe;QACf,mBAAmB;QACnB,eAAe;QACf,WAAW;QACX,eAAe;IACnB;IACA;QACI,eAAe;IACnB;IACA;QACI,cAAc;IAClB;AACJ;;AAEA;IACI,UAAU;IACV,SAAS;AACb,C;AChEA;IACI,iBAAiB;AACrB;AACA;IACI,iBAAiB;IACjB,kBAAkB;AACtB,C","sources":["webpack://app/./static/css/sections/tcg.css","webpack://app/./static/css/pages/tcg/home.css"],"sourcesContent":["\n\n.container-input > input {\n padding: 0vh 1vh;\n border-radius: 0.5vh;\n max-width: 7vh;\n}\n\n\n/* Right column */\n.rightcolumn {\n min-width: fit-content;\n}\n\n/* Main Table */\n#pageBody {\n max-height: 82vh;\n padding: 0 5vw;\n margin: 0 auto;\n border: 0;\n align-content: center;\n justify-content: flex-start;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-y: auto;\n overflow-x: hidden;\n width: 90vw;\n color: var(--colour-text);\n}\n\n\n/* Footer */\n.footer {\n padding: 1vh 1vw;\n text-align: center;\n margin: 0;\n max-height: 5vh;\n overflow-y: auto;\n background-color: var(--colour-accent);\n position: absolute;\n bottom: 0;\n width: 98vw;\n}\n\n@media screen and (max-width: 400px) {\n .footer {\n max-height: 8vh;\n padding: 0.75vh 2vw;\n font-size: 10px; \n width: 96vw;\n max-width: 96vw;\n }\n .footer > h4 {\n font-size: 10px;\n }\n .footer > h5 {\n font-size: 9px;\n }\n}\n\n.footer > h4, h5 {\n padding: 0;\n margin: 0;\n}","#pageBody .column .row {\n margin-top: 0.5vh;\n}\n#pageBody .column .row .button {\n margin-left: auto;\n margin-right: auto;\n}"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"css/tcg_home.bundle.css","mappings":"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","sources":["webpack://app/./static/css/sections/tcg.css","webpack://app/./static/css/pages/tcg/home.css"],"sourcesContent":["\n\n.container-input > input {\n padding: 0vh 1vh;\n border-radius: 0.5vh;\n max-width: 7vh;\n}\n\n\n/* Right column */\n.rightcolumn {\n min-width: fit-content;\n}\n\n/* Main Table */\n#pageBody {\n max-height: 82vh;\n padding: 0 5vw;\n margin: 0 auto;\n border: 0;\n align-content: center;\n justify-content: flex-start;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-y: auto;\n overflow-x: hidden;\n width: 90vw;\n color: var(--colour-text);\n}\n\n\n/* Footer */\n.footer {\n padding: 1vh 1vw;\n text-align: center;\n margin: 0;\n max-height: 5vh;\n overflow-y: auto;\n background-color: var(--colour-accent);\n position: absolute;\n bottom: 0;\n width: 98vw;\n}\n\n@media screen and (max-width: 400px) {\n .footer {\n max-height: 8vh;\n padding: 0.75vh 2vw;\n font-size: 10px; \n width: 96vw;\n max-width: 96vw;\n }\n .footer > h4 {\n font-size: 10px;\n }\n .footer > h5 {\n font-size: 9px;\n }\n}\n\n.footer > h4, h5 {\n padding: 0;\n margin: 0;\n}","/* Landing Page - Hero Section */\n.home-hero {\n text-align: center;\n padding: 6rem 2rem 4rem;\n position: relative;\n}\n\n.home-hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 900px;\n height: 550px;\n background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.12) 0%, transparent 70%);\n pointer-events: none;\n}\n\n.home-hero-eyebrow {\n font-family: 'Cinzel', serif;\n font-size: 1.5rem;\n color: var(--tcg-accent-purple);\n letter-spacing: 0.3em;\n text-transform: uppercase;\n margin-bottom: 1.5rem;\n animation: tcg-fadeIn 0.6s ease both;\n}\n\n.home-hero-title {\n font-family: 'Cinzel', serif;\n font-size: clamp(2.5rem, 6vw, 4.5rem);\n font-weight: 700;\n background: linear-gradient(135deg, var(--tcg-accent-gold) 30%, var(--tcg-accent-purple));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n margin: 0 0 1.5rem;\n line-height: 1.1;\n animation: tcg-fadeInDown 0.8s ease 0.1s both;\n}\n\n.home-hero-subtitle {\n font-size: clamp(1.1rem, 2vw, 1.4rem);\n color: var(--tcg-text-secondary);\n max-width: 580px;\n margin: 0 auto 3rem;\n line-height: 1.7;\n animation: tcg-fadeIn 0.8s ease 0.3s both;\n}\n\n.home-hero-actions {\n display: flex;\n gap: 1.25rem;\n justify-content: center;\n flex-wrap: wrap;\n animation: tcg-fadeIn 0.8s ease 0.5s both;\n}\n\n/* Divider */\n.home-divider {\n width: 80px;\n height: 3px;\n background: linear-gradient(90deg, var(--tcg-accent-purple), var(--tcg-accent-gold));\n margin: 0 auto;\n border-radius: 2px;\n}\n\n/* Features Section */\n.home-features {\n padding: 2rem 0;\n}\n\n.home-features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n gap: 1.5rem;\n margin-top: 2.5rem;\n}\n\n.home-feature-card {\n position: relative;\n text-align: center;\n}\n\n.home-feature-card:nth-child(1) { animation: tcg-scaleIn 0.6s ease 0.1s both; }\n.home-feature-card:nth-child(2) { animation: tcg-scaleIn 0.6s ease 0.25s both; }\n.home-feature-card:nth-child(3) { animation: tcg-scaleIn 0.6s ease 0.4s both; }\n\n.home-feature-symbol {\n width: 56px;\n height: 56px;\n margin: 0 auto 1.25rem;\n background: linear-gradient(135deg, var(--tcg-accent-purple), var(--tcg-accent-gold));\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Cinzel', serif;\n font-size: 1.4rem;\n color: var(--tcg-bg-primary);\n font-weight: 700;\n letter-spacing: 0;\n}\n\n.home-feature-card h3 {\n font-family: 'Cinzel', serif;\n color: var(--tcg-accent-gold);\n font-size: 1.05rem;\n margin: 0 0 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.home-feature-card p {\n color: var(--tcg-text-secondary);\n font-size: 1.1rem;\n line-height: 1.6;\n margin: 0;\n}\n\n/* CTA Section */\n.home-cta {\n text-align: center;\n padding: 4rem 2rem;\n background: var(--tcg-bg-secondary);\n border: 2px solid var(--tcg-border-color);\n border-radius: 16px;\n margin-top: 1rem;\n position: relative;\n /* overflow: hidden; */\n animation: tcg-fadeIn 0.8s ease 0.6s both;\n}\n\n.home-cta::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.06) 0%, transparent 70%);\n pointer-events: none;\n}\n\n.home-cta-title {\n font-family: 'Cinzel', serif;\n font-size: clamp(1.4rem, 3vw, 2rem);\n color: var(--tcg-text-primary);\n margin: 0 0 1rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.home-cta-subtitle {\n color: var(--tcg-text-secondary);\n font-size: 1.15rem;\n margin: 0 auto 2.5rem;\n max-width: 500px;\n line-height: 1.6;\n}\n\n/* Responsive */\n@media screen and (max-width: 768px) {\n .home-hero {\n padding: 3rem 1rem 2rem;\n }\n\n .home-hero-actions {\n flex-direction: column;\n align-items: center;\n }\n\n .home-hero-actions .btn-tcg {\n width: 100%;\n max-width: 280px;\n text-align: center;\n }\n\n .home-features-grid {\n grid-template-columns: 1fr;\n }\n\n .home-cta {\n padding: 2.5rem 1.5rem;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/templates/pages/tcg/mtg/_home.html b/templates/pages/tcg/mtg/_home.html index ad90ece..dd00dec 100644 --- a/templates/pages/tcg/mtg/_home.html +++ b/templates/pages/tcg/mtg/_home.html @@ -5,14 +5,63 @@ {% endblock %} {% block page_body %} -
-
-
-
Home
+ +
+

{{ model.NAME_COMPANY }}

+

Commander Life Tracker

+

+ Track life totals and commander damage across your multiplayer games. + Manage your decks, join sessions, and focus on the battle. +

+
+ + Try a Free Game
-
-
+ - + +
+ + +
+

Everything You Need at the Table

+
+
+
40
+

Life Tracking

+

+ Track life totals and commander damage for every player in real time. + Built for Commander's multiplayer chaos. +

+
+
+
◆
+

Deck Management

+

+ Store and organise your Commander decks. Choose your general before each game + and keep your collection in one place. +

+
+
+
▶
+

Instant Games

+

+ Create or join a game in seconds. No setup required — just share the session + and start playing. +

+
+
+
+ + +
+

Ready to Play?

+

+ Sign in to save your games and decks, or jump straight into a trial game with no account required. +

+
+ + Try Without an Account +
+
{% endblock %}