admin/parts_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement new user interface.

Browse Source
This commit is contained in:
teddy
2024-04-23 18:55:41 +01:00
parent bbb7800dc8
commit a282c6dbcc
7 changed files with 387 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
models/__pycache__/model_view_base.cpython-311.pyc
View File

Binary file not shown.

7
models/model_view_base.py
View File

@@ -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'

217
static/css/shared.css
View File

@@ -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;
}
}
.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;
}

35
static/js/shared.js
View File

@@ -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;

129
templates/_page_home.html
View File

@@ -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 class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
<h1>Offering a full suite of software engineering services.</h1>
</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>
<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_home }}";
var hashPageCurrent = "{{ model.HASH_PAGE_HOME }}";
$(document).ready(function() {
hookupPageHome();

144
templates/_page_services.html Normal file
View File

@@ -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>

105
templates/layout.html
View File

@@ -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="container">
<div class="topnav">
<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">
<h1>Precision And Research Technology Systems Limited</h1>
<div class="{{ model.FLAG_CONTAINER }}" style="width: 60vw; min-width: 60vw; max-width: 60vw;">
<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 class="container column">
<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="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
<a id="{{ model.ID_NAV_HOME }}">Home</a> <!-- href="{{ url_for('home') }}" -->
</div>
<!--
<div class="container column">
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
<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">
<form id="{{ model.ID_FORM_DELIVERY_REGION }}" class="container" action="{{ url_for('set_delivery_region') }}" method="POST">
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
<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">
<form id="{{ model.ID_FORM_CURRENCY }}" class="container" action="{{ url_for('set_currency') }}" method="POST">
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
<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>