Implement new user interface.

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'

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;
+    padding: 0;
-    background: var(--c_purple_pastel);
+    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;
+    /* overflow: hidden; */
-    background-color: var(--c_purple);
+    /* 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 {
+.topnav > .container {
-    max-width: 20%;
+    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?? */
+    /* min-width: fit-content; only on store?? *
-    /* background-color: #f1f1f1; */
+    /* 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;
+    padding: 0;
-    margin-top: 3vh;
+    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;
+    align-items: flex-start;
-    justify-content: center;
+    justify-content: flex-start;
-    text-align: center;
+    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-top-right-radius: 2.5vh;
-    border-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;
+    top: 15vh;
-    left: 0;
+    right: 0;
-    width: 100%;
+    width: 100px;
-    height: 100%;
+    /* height: 50%; */ 
-    background: rgba(0, 0, 0, 0.5);
+    background: var(--c_purple_pastel);
-    justify-content: center;
+    justify-content: right;
-    align-items: center;
+    align-items: right;
+    align-self: right;
     z-index: 999;
-}
+}
+.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;
+}

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();
+    try 
-    hookupCheckboxIsIncludedVAT();
+    {
+        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;

templates/_page_home.html

@@ -1,139 +1,24 @@
+<!-- v2a -->
+
 {% extends 'layout.html' %}
 
 {% block title %}{{ model.title }}{% endblock %}
 
 {% block page_body %}
     <!-- Include Stylesheet -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}" />
 
     <!-- HTML content -->
-    <div class="{{ model.FLAG_CARD }}">
+    <div>
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
+        <p>Your software engineering solution</p>
-            <h1>Offering a full suite of software engineering services.</h1>
+        <button class="button-contact">Get in touch</button>
-        </div>
-    </div>
-    <div class="{{ model.FLAG_CARD }}">
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <h2>Web App & Database Design</h2>
-            <p>Crafting seamless digital experiences with expertly designed web applications and robust database solutions.</p>
-        </div>
-        <div class="{{ model.FLAG_CONTAINER }}">
-            <!-- image 
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
-            -->
-            <!-- MP4 video --
-            <video controls class="img-demo" name="Web app and database design">
-                <source src="{{ url_for('static', filename='images/webapp_db_design.mp4')}}" type="video/mp4">
-                    Your browser does not support the video format mp4.
-            </video> 
-            -->
-            <!-- gif --
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.gif')}}" alt="Web app and database design gif">
-            -->
-        </div>
-    </div>
-    <div class="{{ model.FLAG_CARD }}">
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <h2>Programming services (C++, Python, etc.)</h2>
-            <p>Empowering businesses with efficient automation, web manipulation, and cutting-edge AI/ML solutions for complex tasks.</p>
-        </div>
-        <div class="{{ model.FLAG_CONTAINER }}">
-            <!-- image --
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
-            -->
-            <!-- MP4 video -->
-            <video controls class="img-demo" name="Programming services">
-                <source src="{{ url_for('static', filename='images/programming_services.mp4')}}" type="video/mp4">
-                    Your browser does not support the video format mp4.
-            </video>
-            <!-- gif --
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.gif')}}" alt="Web app and database design gif">
-            -->
-        </div>
-    </div>
-    <div class="{{ model.FLAG_CARD }}">
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <h2>MS Office Data Analysis & Automation</h2>
-            <p>Unleashing the power of MS Office for streamlined data analysis, automation, and enhanced productivity across Excel, PowerPoint, and Outlook.</p>
-        </div>
-        <div class="{{ model.FLAG_CONTAINER }}">
-            <!-- image --
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
-            -->
-            <!-- MP4 video -->
-            <video controls class="img-demo" name="MS Office automation">
-                <source src="{{ url_for('static', filename='images/ms_automation.mp4')}}" type="video/mp4">
-                    Your browser does not support the video format mp4.
-            </video>
-            <!-- gif --
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.gif')}}" alt="Web app and database design gif">
-            -->
-        </div>
-    </div>
-    <div class="{{ model.FLAG_CARD }}">
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <h2>Mechatronics Design</h2>
-            <p>Integrating mechanical and electronic components seamlessly for innovative mechatronic solutions, elevating your product design.</p>
-        </div>
-        <div class="{{ model.FLAG_CONTAINER }}">
-            <!-- image --
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
-            -->
-            <!-- MP4 video --
-            <video controls class="img-demo">
-                <source src="{{ url_for('static', filename='images/programming_services.mp4')}}" type="video/mp4">
-                    Your browser does not support the video format mp4.
-            </video>
-            -->
-            <!-- gif -->
-            <img class="img-demo" src="{{ url_for('static', filename='images/mechatronics_design.gif')}}" alt="Mechatronics design gif">
-        </div>
-    </div>
-    <div class="{{ model.FLAG_CARD }}">
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <h2>CAD, DFM, DFAM</h2>
-            <p>Transforming concepts into reality with precision CAD designs, Design for Manufacturing (DFM), and Design for Additive Manufacturing (DFAM) expertise.</p>
-        </div>
-        <div class="{{ model.FLAG_CONTAINER }}">
-            <!-- image --
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
-            -->
-            <!-- MP4 video --
-            <video controls class="img-demo">
-                <source src="{{ url_for('static', filename='images/programming_services.mp4')}}" type="video/mp4">
-                    Your browser does not support the video format mp4.
-            </video>
-            -->
-            <!-- gif -->
-            <img class="img-demo" src="{{ url_for('static', filename='images/CAD.gif')}}" alt="Computer aided design gif">
-        </div>
-    </div>
-    <div class="{{ model.FLAG_CARD }}">
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <h2>Photopolymerisation, Materials Science, AM Advice</h2>
-            <p>Navigating the forefront of materials science and additive manufacturing, providing expert advice on photopolymerisation and innovative AM solutions.</p>
-        </div>
-        <div class="{{ model.FLAG_CONTAINER }}">
-            <!-- image --
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
-            -->
-            <!-- MP4 video --
-            <video controls class="img-demo">
-                <source src="{{ url_for('static', filename='images/programming_services.mp4')}}" type="video/mp4">
-                    Your browser does not support the video format mp4.
-            </video>
-            -->
-            <!-- gif --
-            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.gif')}}" alt="Web app and database design gif">
-            -->
-        </div>
     </div>
     
     <!-- Include JavaScript -->
     <script src="{{ url_for('static', filename='js/home.js') }}"></script>
     
     <script>
-        var hashPageCurrent = "{{ model.hash_page_home }}";
+        var hashPageCurrent = "{{ model.HASH_PAGE_HOME }}";
 
         $(document).ready(function() {
             hookupPageHome();

templates/_page_services.html

@@ -0,0 +1,144 @@
+<!-- v2a -->
+
+{% extends 'layout.html' %}
+
+{% block title %}{{ model.title }}{% endblock %}
+
+{% block page_body %}
+    <!-- Include Stylesheet -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}" />
+
+    <!-- HTML content -->
+    <div>
+        <p>Your software engineering solution</p>
+        <button class="button-contact">Get in touch</button>
+    </div>
+    
+    <!-- Include JavaScript -->
+    <script src="{{ url_for('static', filename='js/home.js') }}"></script>
+    
+    <script>
+        var hashPageCurrent = "{{ model.HASH_PAGE_SERVICES }}";
+
+        $(document).ready(function() {
+            hookupPageHome();
+        });
+    </script>
+{% endblock %}
+
+<div class="{{ model.FLAG_CARD }}">
+    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
+        <h2>Web App & Database Design</h2>
+        <p>Crafting seamless digital experiences with expertly designed web applications and robust database solutions.</p>
+    </div>
+    <div class="{{ model.FLAG_CONTAINER }}">
+        <!-- image 
+        <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
+        -->
+                <!-- MP4 video --
+            <video controls class="img-demo" name="Web app and database design">
+                <source src="{{ url_for('static', filename='images/webapp_db_design.mp4')}}" type="video/mp4">
+                    Your browser does not support the video format mp4.
+            </video> 
+            -->
+            <!-- gif --
+            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.gif')}}" alt="Web app and database design gif">
+            -->
+        </div>
+    </div>
+    <div class="{{ model.FLAG_CARD }}">
+        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
+            <h2>Programming services (C++, Python, etc.)</h2>
+            <p>Empowering businesses with efficient automation, web manipulation, and cutting-edge AI/ML solutions for complex tasks.</p>
+        </div>
+        <div class="{{ model.FLAG_CONTAINER }}">
+            <!-- image --
+            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
+            -->
+            <!-- MP4 video -->
+            <video controls class="img-demo" name="Programming services">
+                <source src="{{ url_for('static', filename='images/programming_services.mp4')}}" type="video/mp4">
+                    Your browser does not support the video format mp4.
+            </video>
+            <!-- gif --
+            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.gif')}}" alt="Web app and database design gif">
+            -->
+        </div>
+    </div>
+    <div class="{{ model.FLAG_CARD }}">
+        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
+            <h2>MS Office Data Analysis & Automation</h2>
+            <p>Unleashing the power of MS Office for streamlined data analysis, automation, and enhanced productivity across Excel, PowerPoint, and Outlook.</p>
+        </div>
+        <div class="{{ model.FLAG_CONTAINER }}">
+            <!-- image --
+            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
+            -->
+            <!-- MP4 video -->
+            <video controls class="img-demo" name="MS Office automation">
+                <source src="{{ url_for('static', filename='images/ms_automation.mp4')}}" type="video/mp4">
+                    Your browser does not support the video format mp4.
+            </video>
+            <!-- gif --
+            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.gif')}}" alt="Web app and database design gif">
+            -->
+        </div>
+    </div>
+    <div class="{{ model.FLAG_CARD }}">
+        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
+            <h2>Mechatronics Design</h2>
+            <p>Integrating mechanical and electronic components seamlessly for innovative mechatronic solutions, elevating your product design.</p>
+        </div>
+        <div class="{{ model.FLAG_CONTAINER }}">
+            <!-- image --
+            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
+            -->
+            <!-- MP4 video --
+            <video controls class="img-demo">
+                <source src="{{ url_for('static', filename='images/programming_services.mp4')}}" type="video/mp4">
+                    Your browser does not support the video format mp4.
+            </video>
+            -->
+            <!-- gif -->
+            <img class="img-demo" src="{{ url_for('static', filename='images/mechatronics_design.gif')}}" alt="Mechatronics design gif">
+        </div>
+    </div>
+    <div class="{{ model.FLAG_CARD }}">
+        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
+            <h2>CAD, DFM, DFAM</h2>
+            <p>Transforming concepts into reality with precision CAD designs, Design for Manufacturing (DFM), and Design for Additive Manufacturing (DFAM) expertise.</p>
+        </div>
+        <div class="{{ model.FLAG_CONTAINER }}">
+            <!-- image --
+            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
+            -->
+            <!-- MP4 video --
+            <video controls class="img-demo">
+                <source src="{{ url_for('static', filename='images/programming_services.mp4')}}" type="video/mp4">
+                    Your browser does not support the video format mp4.
+            </video>
+            -->
+            <!-- gif -->
+            <img class="img-demo" src="{{ url_for('static', filename='images/CAD.gif')}}" alt="Computer aided design gif">
+        </div>
+    </div>
+    <div class="{{ model.FLAG_CARD }}">
+        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
+            <h2>Photopolymerisation, Materials Science, AM Advice</h2>
+            <p>Navigating the forefront of materials science and additive manufacturing, providing expert advice on photopolymerisation and innovative AM solutions.</p>
+        </div>
+        <div class="{{ model.FLAG_CONTAINER }}">
+            <!-- image --
+            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.jpg')}}" alt="Web app and database design image">
+            -->
+            <!-- MP4 video --
+            <video controls class="img-demo">
+                <source src="{{ url_for('static', filename='images/programming_services.mp4')}}" type="video/mp4">
+                    Your browser does not support the video format mp4.
+            </video>
+            -->
+            <!-- gif --
+            <img class="img-demo" src="{{ url_for('static', filename='images/webapp_db_design.gif')}}" alt="Web app and database design gif">
+            -->
+        </div>
+    </div>

templates/layout.html

@@ -21,23 +21,26 @@
         var flagContainer = "{{ model.FLAG_CONTAINER }}";
         var flagContainerInput = "{{ model.FLAG_CONTAINER_INPUT }}";
         var flagExpanded = "{{ model.FLAG_EXPANDED }}";
+        var flagInitialised = "{{ model.FLAG_INITIALISED }}";
         var flagRow = "{{ model.FLAG_ROW }}";
         var flagScrollable = "{{ model.FLAG_SCROLLABLE }}";
-        var flagBtnOverlayClose = "{{ model.FLAG_BTN_OVERLAY_CLOSE }}";
-        var flagInitialised = "{{ model.FLAG_INITIALISED }}";
         var flagSubmitted = "{{ model.FLAG_SUBMITTED }}";
         var hashPageContact = "{{ model.HASH_PAGE_CONTACT }}";
         var hashPageErrorNoPermission = "{{ model.HASH_PAGE_ERROR_NO_PERMISSION }}";
         var hashPageHome = "{{ model.HASH_PAGE_HOME }}";
+        var hashPageServices = "{{ model.HASH_PAGE_SERVICES }}";
         var hashPageStoreHome = "{{ model.HASH_PAGE_STORE_HOME }}";
         var hashPageStoreProduct = "{{ model.HASH_PAGE_STORE_PRODUCT }}";
+        var idButtonHamburger = "#{{ model.ID_BUTTON_HAMBURGER }}";
         var idFormCurrency = "#{{ model.ID_FORM_CURRENCY }}";
         var idFormDeliveryRegion = "#{{ model.ID_FORM_DELIVERY_REGION }}";
         var idFormIsIncludedVAT = "#{{ model.ID_FORM_IS_INCLUDED_VAT }}";
         var idNavContact = "#{{ model.ID_NAV_CONTACT }}";
         var idNavHome = "#{{ model.ID_NAV_HOME }}";
+        var idNavServices = "#{{ model.ID_NAV_SERVICES }}";
         var idNavStoreHome = "#{{ model.ID_NAV_STORE_HOME }}";
         var idNavStoreProduct = "#{{ model.ID_NAV_STORE_PRODUCT }}";
+        var idOverlayHamburger = "#{{ model.ID_OVERLAY_HAMBURGER }}";
         var idPageBody = "#{{ model.ID_PAGE_BODY }}";
         var isUserLoggedIn = "{{ model.output_bool(model.IS_USER_LOGGED_IN) }}";
         var keyBasket = "{{ model.KEY_BASKET }}";
@@ -55,39 +58,40 @@
 <body>
 
 
-<div class="header card">
+<div class="topnav">
-    <div class="container">
+    <div class="{{ model.FLAG_CONTAINER }}" style="width: 25vw; min-width: 15vw; max-width: 25vw;">
         <img class="header-logo" src="{{ url_for('static', filename='images/Logo.png') }}" alt="PARTS logo">
     </div>
-    <div class="container">
+    <div class="{{ model.FLAG_CONTAINER }}" style="width: 60vw; min-width: 60vw; max-width: 60vw;">
-        <h1>Precision And Research Technology Systems Limited</h1>
+        <p class="company-name">Precision And Research Technology Systems</p>
+    </div>
+    <div class="{{ model.FLAG_CONTAINER }}" style="width: 15vw; min-width: 10vw; max-width: 15vw; justify-content: flex-end; "> <!-- padding-left: 25%; -->
+        <button id="{{ model.ID_BUTTON_HAMBURGER }}">=</button>
     </div>
 </div>
 
-<div class="topnav container row">
+<div id="{{ model.ID_OVERLAY_HAMBURGER }}" class="{{ model.FLAG_OVERLAY}} {{ model.FLAG_HAMBURGER }} {{ model.FLAG_EXPANDED}}" style="height: {{ 27 * 3 }}px"> <!-- {- { 4.5 * 3 }}vh -->
-    <div class="container column">
+    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
         <a id="{{ model.ID_NAV_HOME }}">Home</a> <!-- href="{{ url_for('home') }}" -->
     </div>
-    <!--
+    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
-    <div class="container column">
         <a id="{{ model.ID_NAV_SERVICES }}">Services</a>
     </div>
+    <!--
     <div class="container column">
         <a id="{{ model.ID_NAV_TECHNOLOGIES }}">Technologies</a>
     </div>
-    -->
     <div class="container column">
         <a id="{{ model.ID_NAV_STORE_HOME }}">Store</a>
     </div>
-    <!--
-    <div class="container column">
-        <a id="{{ model.ID_NAV_CONTACT }}">Contact</a> <!-- href="{{ url_for('contact') }}" --
-    </div>
     -->
+    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
+        <a id="{{ model.ID_NAV_CONTACT }}">Contact</a> <!-- href="{{ url_for('contact') }}" -->
+    </div>
     {% if model.is_page_store %}
-        <div class="container column">
+        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
             <!-- <a href="{ url_ for('create_price_dummy') }">Create template price</a> -->
-            <form id="{{ model.ID_FORM_IS_INCLUDED_VAT }}" class="container" action="{{ url_for('set_is_included_VAT') }}" method="POST">
+            <form id="{{ model.ID_FORM_IS_INCLUDED_VAT }}" class="{{ model.FLAG_CONTAINER }}" action="{{ url_for('set_is_included_VAT') }}" method="POST">
                 {{ model.form_is_included_VAT.hidden_tag() }}
                 <div class="container-input">
                     {{ model.form_is_included_VAT.is_included.label }}
@@ -98,8 +102,8 @@
                 </div>
             </form>
         </div>
-        <div class="container column">
+        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
-            <form id="{{ model.ID_FORM_DELIVERY_REGION }}" class="container" action="{{ url_for('set_delivery_region') }}" method="POST">
+            <form id="{{ model.ID_FORM_DELIVERY_REGION }}" class="{{ model.FLAG_CONTAINER }}" action="{{ url_for('set_delivery_region') }}" method="POST">
                 {{ model.form_delivery_region.hidden_tag() }}
                 <div class="container-input">
                     {{ model.form_delivery_region.id_region_delivery.label }}
@@ -110,8 +114,8 @@
                 </div>
             </form>
         </div>
-        <div class="container column">
+        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
-            <form id="{{ model.ID_FORM_CURRENCY }}" class="container" action="{{ url_for('set_currency') }}" method="POST">
+            <form id="{{ model.ID_FORM_CURRENCY }}" class="{{ model.FLAG_CONTAINER }}" action="{{ url_for('set_currency') }}" method="POST">
                 {{ model.form_currency.hidden_tag() }}
                 <div class="container-input">
                     {{ model.form_currency.id_currency.label }}
@@ -122,69 +126,14 @@
                 </div>
             </form>
         </div>
-        <div class="container column">
+        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
             <a href="{{ url_for('logout') if model.is_user_logged_in else url_for('login') }}" style="float:right">{{ 'Logout' if model.is_user_logged_in else 'Login' }}</a>
         </div>
     {% endif %}
 </div>
 
-<!--
-<div id="{{ model.id_modal_services }}" class="topnav-modal container column">
-    <div class="container row">
-        <h2>Web App & Database Design</h2>
-    </div>
-    <div class="container row">
-        <h2>Programming services (C++, Python, etc.)</h2>
-    </div>
-    <div class="container row">
-        <h2>MS Office Data Analysis & Automation</h2>
-    </div>
-    <div class="container row">
-        <h2>Mechatronics Design</h2>
-    </div>
-    <div class="container row">
-        <h2>CAD, DFM, DFAM</h2>
-    </div>
-    <div class="container row">
-        <h2>Photopolymerisation, Materials Science, AM Advice</h2>
-    </div>
-</div>
-
-<div id="{{ model.id_modal_technologies }}" class="topnav-modal container column">
-    <div class="container row">
-        <div class="container row">
-            <h2>Web development</h2>
-        </div>
-        <div class="container row">
-            <div class="container row">
-                <h3>JavaScript Frameworks</h3>
-            </div>
-            <div class="container column">
-                <h4>Angular</h4>
-                <h4>React</h4>
-                <h4>Vue</h4>
-            </div>
-        </div>
-        <div class="container row">
-            <div class="container row">
-                <h3>Markup languages</h3>
-            </div>
-            <div class="container column">
-                <h4>HTML</h4>
-                <h4>CSS</h4>
-            </div>
-        </div>
-    </div>
-    <div class="container row">
-        <div class="container row">
-            <h2>Desktop development</h2>
-        </div>
-    </div>
-</div>
--->
-
 <!-- Page body -->
-<div id="{{ model.ID_PAGE_BODY }}" class="container" style="display: block;">
+<div id="{{ model.ID_PAGE_BODY }}" class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_PAGE_BODY }}">
     {% block page_body %}{% endblock %}
 </div>