diff --git a/models/__pycache__/model_view_base.cpython-311.pyc b/models/__pycache__/model_view_base.cpython-311.pyc index 5d8e3f3c..c2ad9d7a 100644 Binary files a/models/__pycache__/model_view_base.cpython-311.pyc and b/models/__pycache__/model_view_base.cpython-311.pyc differ diff --git a/models/model_view_base.py b/models/model_view_base.py index 4251628b..2eb49113 100644 --- a/models/model_view_base.py +++ b/models/model_view_base.py @@ -49,7 +49,10 @@ class Model_View_Base(ABC): FLAG_CONTAINER = 'container' FLAG_CONTAINER_INPUT = FLAG_CONTAINER + '-input' FLAG_EXPANDED = 'expanded' + FLAG_HAMBURGER = 'hamburger' FLAG_INITIALISED = 'initialised' + FLAG_OVERLAY = 'overlay' + FLAG_PAGE_BODY = 'page-body' FLAG_ROW = 'row' FLAG_SCROLLABLE = 'scrollable' FLAG_SUBMITTED = 'submitted' @@ -57,8 +60,10 @@ class Model_View_Base(ABC): HASH_PAGE_CONTACT = '/contact' HASH_PAGE_ERROR_NO_PERMISSION = '/error' HASH_PAGE_HOME = '/' + HASH_PAGE_SERVICES = '/services' HASH_PAGE_STORE_HOME = '/store' HASH_PAGE_STORE_PRODUCT = '/store/product' + ID_BUTTON_HAMBURGER = 'btnHamburger' ID_FORM_CURRENCY = 'formCurrency' ID_FORM_DELIVERY_REGION = 'formDeliveryRegion' ID_FORM_IS_INCLUDED_VAT = 'formIsIncludedVAT' @@ -66,8 +71,10 @@ class Model_View_Base(ABC): ID_MODAL_TECHNOLOGIES = 'modalTechnologies' ID_NAV_CONTACT = 'navContact' ID_NAV_HOME = 'navHome' + ID_NAV_SERVICES = 'navServices' ID_NAV_STORE_HOME = 'navStoreHome' ID_NAV_STORE_PRODUCT = 'navStoreProduct' + ID_OVERLAY_HAMBURGER = 'overlayHamburger' ID_PAGE_BODY = 'pageBody' URL_HOST = 'http://127.0.0.1:5000' URL_GITHUB = 'https://github.com/Teddy-1024' diff --git a/static/css/shared.css b/static/css/shared.css index 47069acf..dfe81c2f 100644 --- a/static/css/shared.css +++ b/static/css/shared.css @@ -11,13 +11,26 @@ } *{ - box-sizing: border-box; + /*box-sizing: border-box; */ + margin: 0; +} + +script, link { + display: none !important; +} + +html { + height: 100%; } body { font-family: Arial; - padding: 10px; - background: var(--c_purple_pastel); + padding: 0; + margin: 0; + border: 0; + background: linear-gradient(to bottom right, var(--c_purple), #dc2430); /* var(--c_purple_pastel); */ + height: 100%; + max-height: 100%; } h1 { @@ -43,45 +56,56 @@ h5 { margin: 1vh; } -/* Header/Blog Title */ -.header { - padding: 1vh; - text-align: center; - background-color: var(--c_purple_light); -} - /* Style the top navigation bar */ .topnav { - overflow: hidden; - background-color: var(--c_purple); + /* overflow: hidden; */ + /* background-color: var(--c_purple); */ border-bottom-left-radius: 2.5vh; border-bottom-right-radius: 2.5vh; + display: flex; flex-wrap: wrap; + flex: 1; + flex-direction: row; font-weight: bold; - font-size: 2vh; + font-size: 1vh; + max-height: 15vh; + height: 15vh; + align-items: flex-start; } /* Style the topnav links */ -.topnav a, .topnav label { +.topnav a, .topnav label, .topnav p { float: left; - display: block; + display: flex; color: white; text-align: center; /* padding: 14px 16px; */ text-decoration: none; + width: 100%; + max-height: 15vh; + font-weight: normal; + font-size: 25px; } +/* .topnav a { padding: 3vh 2vw; } +*/ + /* Change color on hover */ .topnav a:hover { background-color: var(--c_purple_light); color: var(--c_purple_dark); } -.topnav .container { - max-width: 20%; +.topnav > .container { + max-width: 50%; height: 100%; + align-items: center; + align-self: center; + /* align-content: center; */ + /* width: fit-content; */ + display: flex; } .topnav select { @@ -101,31 +125,76 @@ h5 { width: 25vw; } -/* Create two unequal columns that floats next to each other */ -/* Left column */ + +.company-name { + font-size: 2.5vh; + color: white; + margin: 0; + padding: 0; + +} + +.page-body { + height: 75vh !important; + padding: 0; + margin: 0; + border: 0; + align-items: center; + align-content: center; + justify-content: center; +} + +.page-body > * { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + width: 100%; + height: 100%; + align-self: center; + font-size: 20px; +} +#pageBody > * > * { + width: 100%; + align-self: center; + padding-top: 1vh; + padding-bottom: 1vh; + color: white; /* var(--c_purple_dark); */ +} +#pageBody > * :first-child{ + margin-top: 25vh; +} +#pageBody > * :last-child { + margin-bottom: 35vh; +} + +/* Create two unequal columns that floats next to each other * +/* Left column * .leftcolumn { float: left; width: 70%; display: flex; flex-wrap: wrap; - /* min-width: fit-content; */ + /* min-width: fit-content; * align-items: center; justify-content: center; } -/* Right column */ +/* Right column * .rightcolumn { float: left; width: 30%; display: flex; flex-wrap: wrap; - /* min-width: fit-content; only on store?? */ - /* background-color: #f1f1f1; */ + /* min-width: fit-content; only on store?? * + /* background-color: #f1f1f1; * padding-left: 20px; height: fit-content; align-items: center; justify-content: center; } +*/ /* Fake image */ .fakeimg { @@ -177,8 +246,8 @@ img.header-logo { /* Add a card effect for articles */ .card { background-color: white; - padding: 1vh; - margin-top: 3vh; + padding: 0; + margin: 0; display: flex !important; flex-wrap: wrap; align-items: center; @@ -201,11 +270,11 @@ img.header-logo { .container { flex: 1; margin: 0px; - align-items: center; - justify-content: center; - text-align: center; + align-items: flex-start; + justify-content: flex-start; + text-align: flex-start; max-width: 100%; - min-width: fit-content; + /* min-width: fit-content; */ } .column { @@ -217,7 +286,7 @@ img.header-logo { display: flex; flex-direction: row; width: 100%; - min-width: fit-content; + /* min-width: fit-content; */ } .container > .card:first-of-type { @@ -233,33 +302,41 @@ img.header-logo { */ /* Footer */ .footer { - padding: 1vh; + padding: 0; text-align: center; + margin: 0; + /* background: var(--c_purple_light); - margin-top: 20px; - border-radius: 2.5vh; + border-top-right-radius: 2.5vh; + border-top-left-radius: 2.5vh; + border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + */ + height: 10vh !important; } .footer > h4, h5 { padding: 0; - margin: 1vh; + margin: 0; } -/* 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 */ +/* +/* 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 * @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; - /* padding: 0; */ + /* padding: 0; * } } -/* 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 */ +/* 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 * @media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; } } +*/ /* input container margin-top: 3vh; @@ -301,21 +378,71 @@ button, .btn-submit, input[type="submit"] { border-radius: 2vh; padding: 1vh 2vh 1vh 2vh; margin: 0.5vh; + /* background-color: var(--c_blue_pastel); color: var(--c_blue_dark); border-color: var(--c_blue_dark); + */ + background-color: var(--c_purple_pastel); + color: var(--c_purple_dark); + border-color: var(--c_purple_dark); +} +.button-contact { + border: 4px solid var(--c_purple_dark); + background-color: var(--c_purple_pastel); + color: var(--c_purple_dark) !important; + border-radius: 2vh; + width: 180px !important; +} +.button-contact:hover { + text-decoration: underline; } /* Overlay modal */ .overlay { + /* display: none; + */ position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - justify-content: center; - align-items: center; + top: 15vh; + right: 0; + width: 100px; + /* height: 50%; */ + background: var(--c_purple_pastel); + justify-content: right; + align-items: right; + align-self: right; z-index: 999; -} \ No newline at end of file +} +.overlay.expanded { + display: block !important; +} +.overlay.collapsed { + display: none !important; +} + +.hamburger { + +} + +.hamburger > * { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + width: 100%; + color: var(--c_purple_dark); + font-weight: bold; + font-size: 18px; + height: 27px; +} +.hamburger > :hover { + background-color: var(--c_purple_light); + color: var(--c_purple_dark); +} +.hamburger > * > * { + width: 100%; + margin-top: 4.5px; + margin-bottom: 4.5px; +} diff --git a/static/js/shared.js b/static/js/shared.js index 139fe764..56c54f32 100644 --- a/static/js/shared.js +++ b/static/js/shared.js @@ -4,8 +4,12 @@ var _verbose = true; var hashPageCurrent; function hookupShared() { - hookupVideos(); + // hookupVideos(); hookupNavigation(); + /* + $(idOverlayHamburger).removeClass(flagCollapsed); + $(idOverlayHamburger).addClass(flagExpanded); + */ } function hookupVideos() { @@ -31,6 +35,21 @@ function videoPause(elemVideo) { function hookupNavigation() { console.log("hooking up navigation"); + let buttonHamburger = $(idButtonHamburger); + initialiseEventHandler(buttonHamburger, flagInitialised, function() { + buttonHamburger.on("click", function(event) { + event.stopPropagation(); + let overlayHamburger = $(idOverlayHamburger); + if (overlayHamburger.hasClass(flagCollapsed)) { + overlayHamburger.removeClass(flagCollapsed); + overlayHamburger.addClass(flagExpanded); + } else { + overlayHamburger.removeClass(flagExpanded); + overlayHamburger.addClass(flagCollapsed); + } + }); + }); + let btnNavHome = $(idNavHome); initialiseEventHandler(btnNavHome, flagInitialised, function() { btnNavHome.on("click", function(event) { @@ -62,9 +81,15 @@ function hookupNavigation() { }); }); - hookupSelectorCurrency(); - hookupSelectorDeliveryRegion(); - hookupCheckboxIsIncludedVAT(); + + try + { + hookupSelectorCurrency(); + hookupSelectorDeliveryRegion(); + hookupCheckboxIsIncludedVAT(); + } + catch {} + } function hookupOverlay(idOverlay) { @@ -99,7 +124,7 @@ function hookupSelectorCurrency() { }); console.log("form currency initialised") */ - + let dropdownCurrency = $(idCurrency)[0]; // dropdownCurrency.options.map(function(option) { let option, indexHyphen, textOption; diff --git a/templates/_page_home.html b/templates/_page_home.html index 6f186074..effba272 100644 --- a/templates/_page_home.html +++ b/templates/_page_home.html @@ -1,139 +1,24 @@ + + {% extends 'layout.html' %} {% block title %}{{ model.title }}{% endblock %} {% block page_body %} - + -
Crafting seamless digital experiences with expertly designed web applications and robust database solutions.
-Empowering businesses with efficient automation, web manipulation, and cutting-edge AI/ML solutions for complex tasks.
-Unleashing the power of MS Office for streamlined data analysis, automation, and enhanced productivity across Excel, PowerPoint, and Outlook.
-Integrating mechanical and electronic components seamlessly for innovative mechatronic solutions, elevating your product design.
-
- Transforming concepts into reality with precision CAD designs, Design for Manufacturing (DFM), and Design for Additive Manufacturing (DFAM) expertise.
-
- Navigating the forefront of materials science and additive manufacturing, providing expert advice on photopolymerisation and innovative AM solutions.
-Your software engineering solution
+Crafting seamless digital experiences with expertly designed web applications and robust database solutions.
+Empowering businesses with efficient automation, web manipulation, and cutting-edge AI/ML solutions for complex tasks.
+Unleashing the power of MS Office for streamlined data analysis, automation, and enhanced productivity across Excel, PowerPoint, and Outlook.
+Integrating mechanical and electronic components seamlessly for innovative mechatronic solutions, elevating your product design.
+
+ Transforming concepts into reality with precision CAD designs, Design for Manufacturing (DFM), and Design for Additive Manufacturing (DFAM) expertise.
+
+ Navigating the forefront of materials science and additive manufacturing, providing expert advice on photopolymerisation and innovative AM solutions.
+