Skip to content

E
EMSystemsWeb
Commit bab3af79 by Mac Stephens
Options

Created all of the pages and connected them with hashes, reworked entire grid… 

Created all of the pages and connected them with hashes, reworked entire grid system for clarity on all pages and lots of styling on navbar and footer
parent e16ea6a0
Showing with 2303 additions and 386 deletions
EMSystemsWebsite/EMSystemsWebsite.dpr
...@@ -3,7 +3,12 @@ program EMSystemsWebsite; ...@@ -3,7 +3,12 @@ program EMSystemsWebsite;
uses uses
Vcl.Forms, Vcl.Forms,
WEBLib.Forms, WEBLib.Forms,
View.Home in 'View.Home.pas' {FHome: TWebForm} {*.html}; View.Home in 'View.Home.pas' {FHome: TWebForm} {*.html},
View.PublicSafety in 'View.PublicSafety.pas' {FPublicSafety: TWebForm} {*.html},
View.RecordsManagement in 'View.RecordsManagement.pas' {FRecordsManagement: TWebForm} {*.html},
View.CustomSoftware in 'View.CustomSoftware.pas' {FCustomSoftware: TWebForm} {*.html},
View.AboutUs in 'View.AboutUs.pas' {FAboutUs: TWebForm} {*.html},
View.ContactUs in 'View.ContactUs.pas' {FContactUs: TWebForm} {*.html};
{$R *.res} {$R *.res}
......
EMSystemsWebsite/EMSystemsWebsite.dproj
...@@ -103,10 +103,39 @@ ...@@ -103,10 +103,39 @@
<FormType>dfm</FormType> <FormType>dfm</FormType>
<DesignClass>TWebForm</DesignClass> <DesignClass>TWebForm</DesignClass>
</DCCReference> </DCCReference>
<DCCReference Include="View.PublicSafety.pas">
<Form>FPublicSafety</Form>
<FormType>dfm</FormType>
<DesignClass>TWebForm</DesignClass>
</DCCReference>
<DCCReference Include="View.RecordsManagement.pas">
<Form>FRecordsManagement</Form>
<FormType>dfm</FormType>
<DesignClass>TWebForm</DesignClass>
</DCCReference>
<DCCReference Include="View.CustomSoftware.pas">
<Form>FCustomSoftware</Form>
<FormType>dfm</FormType>
<DesignClass>TWebForm</DesignClass>
</DCCReference>
<DCCReference Include="View.AboutUs.pas">
<Form>FAboutUs</Form>
<FormType>dfm</FormType>
<DesignClass>TWebForm</DesignClass>
</DCCReference>
<DCCReference Include="View.ContactUs.pas">
<Form>FContactUs</Form>
<FormType>dfm</FormType>
<DesignClass>TWebForm</DesignClass>
</DCCReference>
<None Include="EMSystemsWebsite.html"/> <None Include="EMSystemsWebsite.html"/>
<None Include="css\App.css"/> <None Include="css\App.css"/>
<None Include="images\job-gcdf1cf1d3_1920-1536x925.jpg"/> <None Include="images\job-gcdf1cf1d3_1920-1536x925.jpg"/>
<None Include="images\table_with_computers.jpg"/> <None Include="images\table_with_computers.jpg"/>
<None Include="images\EM_Logo2_Copy5-1024x173.png"/>
<None Include="images\EM_Logo_White.png"/>
<None Include="images\EM_Logo_#2c66a0.png"/>
<None Include="images\EM_Logo_2c66a0.png"/>
<BuildConfiguration Include="Release"> <BuildConfiguration Include="Release">
<Key>Cfg_2</Key> <Key>Cfg_2</Key>
<CfgParent>Base</CfgParent> <CfgParent>Base</CfgParent>
......
EMSystemsWebsite/Index.html
...@@ -4,11 +4,12 @@ ...@@ -4,11 +4,12 @@
<noscript>Your browser does not support JavaScript!</noscript> <noscript>Your browser does not support JavaScript!</noscript>
<link rel="icon" href="data:;base64,="> <link rel="icon" href="data:;base64,=">
<title>TMS Web Project</title> <title>TMS Web Project</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/App.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link href="css/App.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="$(ProjectName).js"></script> <script type="text/javascript" src="$(ProjectName).js"></script>
<style> <style>
</style> </style>
......
EMSystemsWebsite/TMSWeb/Debug/Index.html
...@@ -4,11 +4,12 @@ ...@@ -4,11 +4,12 @@
<noscript>Your browser does not support JavaScript!</noscript> <noscript>Your browser does not support JavaScript!</noscript>
<link rel="icon" href="data:;base64,="> <link rel="icon" href="data:;base64,=">
<title>TMS Web Project</title> <title>TMS Web Project</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/App.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link href="css/App.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="EMSystemsWebsite.js"></script> <script type="text/javascript" src="EMSystemsWebsite.js"></script>
<style> <style>
</style> </style>
......
EMSystemsWebsite/TMSWeb/Debug/View.AboutUs.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a></li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
EMSystemsWebsite/TMSWeb/Debug/View.ContactUs.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a>
</li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records
Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
\ No newline at end of file
EMSystemsWebsite/TMSWeb/Debug/View.CustomSoftware.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a>
</li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records
Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
\ No newline at end of file
EMSystemsWebsite/TMSWeb/Debug/View.Home.html
<!--NAVBAR CONTAINER--> <!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap"> <div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max"> <div class="container-fluid container-main">
<a class="navbar-brand em-brand" href="#FHome"> <a class="navbar-brand em-brand" href="#FHome">
<img src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/cropped-EM_Logo2_Copy5-180x30.png" alt="EFX"> <img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
...@@ -14,8 +15,21 @@ ...@@ -14,8 +15,21 @@
<a class="nav-link" id="home" href="#FHome">Home</a> <a class="nav-link" id="home" href="#FHome">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="information" href="#FInformation">What We Do</a> <a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li> </li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a></li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a> <a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li> </li>
...@@ -40,83 +54,87 @@ ...@@ -40,83 +54,87 @@
</div> </div>
</div> </div>
<!--MAIN CONTAINER-->
<!-- LEARN BOXES --> <div class="container-main">
<div class="container my-5"> <!-- LEARN BOXES -->
<div class="learn-boxes p-5">
<div class="row row-cols-1 row-cols-lg-3 g-4 align-items-stretch"> <div class="row row-cols-1 row-cols-lg-3 g-4 align-items-stretch">
<div class="col"> <div class="col d-flex">
<div class="learn-box shadow"> <div class="learn-box shadow flex-fill d-flex flex-column">
<img src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/10/computer-ga073c6b91_1920-1024x682.jpg" alt="Computer Image" class="img-fluid"> <img
<div class="box-content"> src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/10/computer-ga073c6b91_1920-1024x682.jpg"
alt="Computer Image" class="img-fluid rounded-top">
<div class="box-content d-flex flex-column p-3">
<h2>Custom Software Development</h2> <h2>Custom Software Development</h2>
<button class="btn btn-primary">Learn More</button> <button class="btn btn-primary mx-auto mt-auto" style="width: 175px;">Learn More</button>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col d-flex">
<div class="learn-box shadow"> <div class="learn-box shadow flex-fill d-flex flex-column">
<img src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/digitization-g72e897cbb_1920-1024x680.jpg" alt="Logistics Image" class="img-fluid"> <img
<div class="box-content"> src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/digitization-g72e897cbb_1920-1024x680.jpg"
alt="Logistics Image" class="img-fluid rounded-top">
<div class="box-content d-flex flex-column p-3">
<h2>Integrated Public Safety Solutions</h2> <h2>Integrated Public Safety Solutions</h2>
<button class="btn btn-primary">Learn More</button> <button class="btn btn-primary mx-auto mt-auto" style="width: 175px;">Learn More</button>
</div>
</div> </div>
</div> </div>
<div class="col d-flex">
<div class="learn-box shadow flex-fill d-flex flex-column">
<img
src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/archive-gc84e8bebd_1920-1024x683.jpg"
alt="Storage Image" class="img-fluid rounded-top">
<div class="box-content d-flex flex-column p-3">
<h2>Storage and Records Management</h2>
<button class="btn btn-primary mx-auto mt-auto" style="width: 175px;">Learn More</button>
</div> </div>
<div class="col">
<div class="learn-box shadow">
<img src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/archive-gc84e8bebd_1920-1024x683.jpg" alt="Storage Image" class="img-fluid">
<div class="box-content">
<h2> Records and Database Management</h2>
<button class="btn btn-primary">Learn More</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- CONTENT SECTION --> <!-- FOOTER -->
<footer class="bg-dark text-light">
<div class="container-main">
<div class="row text-center text-lg-start">
<footer class="bg-dark text-light text-center text-lg-start"> <!-- Logo Column -->
<div class="container p-4"> <div class="col-lg-4 col-md-4 mb-4 mb-md-0 d-flex justify-content-lg-start justify-content-center">
<div class="row"> <a href="#FHome" class="navbar-brand">
<div class="col-lg-4 col-md-12 mb-4 mb-md-0"> <img src="images/EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 30px">
<h5 class="mb-4">EM Systems, Inc.</h5> </a>
</div> </div>
<div class="col-lg-2 col-md-6 mb-4 mb-md-0"> <!-- Explore Links Column -->
<div class="col-lg-4 col-md-4 mb-4 mb-md-0">
<div>
<h5>Explore</h5> <h5>Explore</h5>
<ul class="list-unstyled mb-0"> <ul class="list-unstyled mb-0">
<li> <li><a href="#FHome">Home</a></li>
<a href="#!" class="text-light">Home</a> <li><a href="#FAboutUs">About Us</a></li>
</li> <li><a href="#FContactUs">Contact Us</a></li>
<li>
<a href="#!" class="text-light">What We Do</a>
</li>
<li>
<a href="#!" class="text-light">Contact Us</a>
</li>
</ul> </ul>
</div> </div>
</div>
<div class="col-lg-6 col-md-6 mb-4 mb-md-0"> <!-- Address Column -->
<h5 class="mb-0">Connect With Us</h5> <div class="col-lg-4 col-md-4 mb-4 mb-md-0">
<div>
<ul class="list-unstyled"> <address>
<li> 4043 Maple Rd, Suite 211<br>
<p>40432 Maple Rd, Suite 211<br>Amherst, NY 14226</p> Amherst, NY 14226<br>
</li> (716) 836-4910
<li> </address>
<p>(716) 836-4910</p> </div>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> <!-- Copyright Text -->
<div class="footer-copyright">
© 2011-2024 EM Systems Inc © 2011-2024 EM Systems Inc
</div> </div>
</footer> </footer>
EMSystemsWebsite/TMSWeb/Debug/View.PublicSafety.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a>
</li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records
Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
\ No newline at end of file
EMSystemsWebsite/TMSWeb/Debug/View.RecordsManagement.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a>
</li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records
Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
\ No newline at end of file
EMSystemsWebsite/TMSWeb/Debug/css/App.css
...@@ -9,62 +9,96 @@ body { ...@@ -9,62 +9,96 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.container-max { .container-main {
max-width: 1400px; max-width: 1400px;
margin-right: auto; margin: auto;
margin-left: auto; padding: 1rem;
} }
.em-black { .em-black {
color: #000000; color: #000000;
} }
/* NAVBAR */
.em-navbar-wrap .navbar { .em-navbar-wrap .navbar {
transition: height 0.3s ease-in-out; transition: padding-top 0.3s ease, padding-bottom 0.3s ease; /* Smooth transitions for padding */
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 1030; z-index: 1030;
} }
/* Default state of the navbar */
.em-navbar-wrap .navbar {
padding-top: 1rem;
padding-bottom: 1rem;
}
/* Transition for navbar logo size */
.em-brand img { .em-brand img {
height: auto; transition: max-height 0.3s ease; /* Smooth transition for logo size */
transition: height 0.3s ease-in-out; max-height: 80px; /* Set a max-height for the logo */
margin-top: 8px;
} }
.navbar-nav .nav-link { /* Nav link styles and transitions */
.em-navbar-wrap .navbar .navbar-nav .nav-link {
transition: color 0.3s ease; /* Smooth transition for color change */
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.085em; letter-spacing: 0.085em;
font-size: larger; font-size: 1rem;
color: #999999; color: #FFFFFF;
padding-top: 37px;
padding-bottom: 37px;
height: 90px;
transition: padding 0.3s ease-in-out;
} }
.navbar-nav .nav-item:hover .nav-link, /* Hover and active state for nav links */
.navbar-nav .nav-item.active .nav-link { .em-navbar-wrap .navbar .navbar-nav .nav-item:hover .nav-link,
.em-navbar-wrap .navbar .navbar-nav .nav-item.active .nav-link {
color: #999999;
box-shadow: inset 0 -4px 0 0 #2c66a0; box-shadow: inset 0 -4px 0 0 #2c66a0;
} }
/* navbar changes when scrolled */
.em-navbar-wrap .navbar.scrolled { .em-navbar-wrap .navbar.scrolled {
padding-top: 0; padding-top: 0.5rem;
padding-bottom: 0; padding-bottom: 0.5rem;
height: 70px;
} }
/* Smaller logo when scrolled */
.em-brand img.scrolled-logo { .em-brand img.scrolled-logo {
height: 30px; max-height: 40px;
} }
/* Adjust padding for nav links when scrolled */
.navbar.scrolled .nav-link { .navbar.scrolled .nav-link {
padding-top: 25px; padding-top: 0.5rem;
padding-bottom: 25px; padding-bottom: 0.5rem;
}
/* navbar dropdown menu */
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu {
background-color: #212529; /* Dark background to match the navbar */
border: none; /* No border for a cleaner look */
}
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item {
color: #f8f9fa;
}
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:focus {
background-color: #495057; /* Slightly lighter background on hover/focus */
color: #ffffff;
} }
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:active {
background-color: #2c66a0; /* Highlights color for active state */
color: #ffffff;
}
/* navbar hamburger menu */
.navbar-toggler { .navbar-toggler {
outline: none !important; outline: none !important;
border: none !important; border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, box-shadow 0.3s ease;
background-color: #999999; background-color: #2c66a0;
} }
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.active { .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.active {
outline: none; outline: none;
...@@ -74,10 +108,12 @@ body { ...@@ -74,10 +108,12 @@ body {
} }
.navbar-toggler:hover { .navbar-toggler:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; /* "Pressed in" look */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; /* "Pressed in" look */
background-color: #2c66a0; background-color: #999999;
} }
/****************************************************************************************/
/* HERO IMAGE */
.hero-section { .hero-section {
position: relative; position: relative;
height: 50vh; /* Control the height of the hero section */ height: 50vh; /* Control the height of the hero section */
...@@ -95,24 +131,21 @@ body { ...@@ -95,24 +131,21 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay for better text visibility */ background-color: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-shadow: 0px 0px 10px #000; text-shadow: 0px 0px 10px #000;
} }
/****************************************************************************************/
/* LEARN BOXES */
.learn-boxes { .learn-boxes {
margin-top: 80px; /* Add space above the boxes */ margin-top: auto;
padding: 20px 0; /* Add some padding at the top and bottom */ padding: 20px 0;
color: #000; /* Set text color to black */ color: #000;
overflow: hidden; /* Prevents content from overflowing the container */ overflow: hidden;
border-radius: 8px; /* Round the corners of the container */
}
.container.my-5 {
padding-top: 20px; /* Optional: increase if navbar covers the top content */
} }
.learn-box { .learn-box {
...@@ -121,145 +154,103 @@ body { ...@@ -121,145 +154,103 @@ body {
background-color: #FFF; background-color: #FFF;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
}
.learn-box {
display: flex;
flex-direction: column;
flex-grow: 1; flex-grow: 1;
background-color: #FFF; overflow: hidden;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px; /* This value rounds the corners of the boxes */
} }
.learn-box img { .img-fluid {
flex-grow: 1;
width: 100%; width: 100%;
object-fit: cover; /* Ensures the image covers the allotted space without distortion */ object-fit: cover;
border-top-left-radius: 8px; /* Round the bottom left corner */
border-top-right-radius: 8px; /* Round the bottom right corner */
} }
.box-content { .box-content {
padding: 15px; /* Padding around the content at the bottom of the box */ padding: 15px;
text-align: center; /* Center-aligns the text */ text-align: center;
background: #ffffff; /* Optional: for a visual break between image and text, use a contrasting background */ background: #ffffff;
border-bottom-left-radius: 8px; /* Round the bottom left corner */ flex-grow: 1;
border-bottom-right-radius: 8px; /* Round the bottom right corner */ display: flex;
flex-direction: column;
justify-content: space-between;
} }
.learn-box h2 { .learn-box h2 {
margin-bottom: 10px; /* Reduced bottom margin */ margin-bottom: 10px;
color: #333; /* Text color for visibility */ color: #333;
} }
.learn-box button { .learn-box button {
padding: 8px 16px; /* Slightly larger padding than text width */ padding: 8px 16px;
font-size: 16px; /* Adequate font size for readability */ font-size: 16px;
border-radius: 4px; /* Aesthetic choice for button corners */ border-radius: 4px;
background-color: #333333; /* Primary button color */ background-color: #333333;
color: white; /* Text color for the button */ color: white;
border: none; /* Simplifies the button appearance */ border: none;
} }
.learn-box button:hover { .learn-box button:hover {
background-color: #000; /* Darker button on hover */ background-color: #000;
}
/* Currency Expert Box Styling */
.currency-expert-box {
position: absolute;
top: 30%;
left: 10%;
transform: translateX(-50%, -50%);
background-color: rgba(246, 246, 246, 0.9);
padding: 20px;
width: 30%;
max-width: 400px;
z-index: 2;
border-radius: 10px;
} }
/****************************************************************************************/
/* Content Section Styling */ /* FOOTER */
.content-section { .container-main {
position: relative; max-width: 1400px;
z-index: 10; margin: auto; /* Centers the container */
background: #FFF; padding: 1rem; /* Padding for top and bottom */
margin-top: -2rem;
}
blockquote {
margin-top: 1em;
font-style: italic;
}
.middle-subtitle {
font-size: medium;
font-weight: bold;
} }
footer {
.container.mt-5 { background-color: #000;
margin-top: calc(5rem + 90px) !important; color: #fff;
padding: 1rem 0;
} }
footer .navbar-brand img {
.location-info { max-height: 50px;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
margin-bottom: 2rem;
} }
footer h5 {
.location-info h3 { font-size: 0.9rem;
margin-bottom: .5rem;
} }
footer ul li a,
.location { footer ul li p {
display: flex; font-size: 0.8rem;
align-items: start; /* Aligns the icon with the top of the text */ color: #fff;
margin-bottom: 1rem; /* Spacing between locations */ text-decoration: none;
} }
footer ul li a:hover,
.location i.fas { footer ul li a:focus {
margin-top: 0.25rem; /* Adjust this value to fine-tune vertical alignment with h4 */ color: #999999;
text-decoration: none;
} }
footer address,
.location > div { footer p {
margin-left: 0.5rem; /* Space between icon and text */ font-size: 0.8rem;
} }
footer .footer-copyright {
.hours-box h3 { font-size: 0.8rem;
margin-bottom: 1rem; /* Space below the section title */ padding: 0.5rem 0;
text-align: center;
} }
/****************************************************************************************/
/* MEDIA QUERIES */ /* MEDIA QUERIES */
/* Media Queries */
/* Adjustments for navbar and learn-boxes margin on medium screens */
@media (max-width: 992px) { @media (max-width: 992px) {
.navbar-nav .nav-link { .navbar-nav .nav-link {
padding-top: 30px; padding-top: 30px;
padding-bottom: 10px; padding-bottom: 10px;
height: auto; height: auto;
} }
} }
@media (min-width: 1400px) {
/* Adjustments for .currency-expert-box on small screens */ .container-max {
@media (max-width: 768px) { max-width: 1600px;
.currency-expert-box {
width: 80%; /* Adjust width for smaller screens */
} }
} }
@media (min-width: 1400px) {
/* Adjustments for .currency-expert-box on extra small screens */ .em-navbar-wrap .navbar-brand {
@media (max-width: 576px) { padding-right: 2rem;
.currency-expert-box { }
width: 90%; /* Adjust width for even smaller screens */ .em-navbar-wrap .navbar .navbar-nav {
padding: 15px; /* Adjust padding for smaller screens */ padding-left: 2rem;
} }
} }
\ No newline at end of file
EMSystemsWebsite/View.AboutUs.dfm 0 → 100644
object FAboutUs: TFAboutUs
Color = clWhite
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
FormStyle = fsNormal
Height = 480
Left = 0
OnClose = WebFormClose
TabOrder = 0
Top = 0
Width = 640
object btnHome: TWebButton
Caption = 'HOME'
Color = clNone
ElementFont = efCSS
ElementID = 'home'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnHomeClick
Role = 'button'
TabOrder = 0
Top = 105
Width = 100
end
object btnAboutUs: TWebButton
Caption = 'ABOUT US'
Color = clNone
ElementFont = efCSS
ElementID = 'aboutus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnAboutUsClick
Role = 'button'
TabOrder = 0
Top = 113
Width = 100
end
object btnContactUs: TWebButton
Caption = 'CONTACT US'
Color = clNone
ElementFont = efCSS
ElementID = 'contactus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnContactUsClick
Role = 'button'
TabOrder = 0
Top = 121
Width = 100
end
object btnPublicSafety: TWebButton
Caption = 'Public Safety'
Color = clNone
ElementFont = efCSS
ElementID = 'publicsafety'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnPublicSafetyClick
Role = 'button'
TabOrder = 0
Top = 137
Width = 100
end
object btnRecordsManagement: TWebButton
Caption = 'Records Management'
Color = clNone
ElementID = 'recordsmanagement'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnRecordsManagementClick
Role = 'button'
TabOrder = 0
Top = 169
Width = 100
end
object btnCustomSoftware: TWebButton
Caption = 'Custom Software'
Color = clNone
ElementFont = efCSS
ElementID = 'customsoftware'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnCustomSoftwareClick
Role = 'button'
TabOrder = 0
Top = 111
Width = 100
end
end
EMSystemsWebsite/View.AboutUs.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a></li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
EMSystemsWebsite/View.AboutUs.pas 0 → 100644
unit View.AboutUs;
interface
uses
System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Forms, Vcl.StdCtrls,
WEBLib.StdCtrls, Vcl.Controls, WEBLib.Dialogs, Vcl.Imaging.pngimage,
WEBLib.ExtCtrls, WEBLib.Controls, Web, JS, WEBLib.Menus, WEBLib.WebCtrls;
type
TFAboutUs = class(TWebForm)
btnHome: TWebButton;
btnAboutUs: TWebButton;
btnContactUs: TWebButton;
btnRecordsManagement: TWebButton;
btnCustomSoftware: TWebButton;
btnPublicSafety: TWebButton;
procedure btnHomeClick(Sender: TObject);
procedure btnAboutUsClick(Sender: TObject);
procedure btnContactUsClick(Sender: TObject);
procedure btnRecordsManagementClick(Sender: TObject);
procedure btnCustomSoftwareClick(Sender: TObject);
procedure btnPublicSafetyClick(Sender: TObject);
[async]
procedure WebFormCreate(Sender: TObject);
procedure WebFormClose(Sender: TObject; var Action: TCloseAction);
private
{ Private declarations }
public
procedure NavScrollSizing;
end;
var
FAboutUs: TFAboutUs;
implementation
{$R *.dfm}
uses
View.Home,
View.ContactUs,
View.CustomSoftware,
View.PublicSafety,
View.RecordsManagement;
procedure TFAboutUs.btnCustomSoftwareClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFCustomSoftware, FCustomSoftware);
end;
procedure TFAboutUs.btnRecordsManagementClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFRecordsManagement, FRecordsManagement);
end;
procedure TFAboutUs.btnPublicSafetyClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFPublicSafety, FPublicSafety);
end;
procedure TFAboutUs.btnContactUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFContactUs, FContactUs);
end;
procedure TFAboutUs.btnAboutUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFAboutUs, FAboutUs);
end;
procedure TFAboutUs.btnHomeClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFHome, FHome);
end;
procedure TFAboutUs.WebFormCreate(Sender: TObject);
begin
Application.ThemeColor := clTMSWEB;
NavScrollSizing;
end;
procedure TFAboutUs.NavScrollSizing;
begin
asm
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.em-navbar-wrap .navbar');
var logo = document.querySelector('.em-brand img');
var scrollDistance = 50; // Adjust based on your preference
if (window.scrollY > scrollDistance) {
navbar.classList.add('scrolled');
logo.classList.add('scrolled-logo');
} else {
navbar.classList.remove('scrolled');
logo.classList.remove('scrolled-logo');
}
});
end;
end;
procedure TFAboutUs.WebFormClose(Sender: TObject; var Action: TCloseAction);
begin
Action := caFree;
end;
initialization
RegisterClass(TFAboutUs);
end.
\ No newline at end of file
EMSystemsWebsite/View.ContactUs.dfm 0 → 100644
object FContactUs: TFContactUs
Color = clWhite
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
FormStyle = fsNormal
Height = 480
Left = 0
OnClose = WebFormClose
TabOrder = 0
Top = 0
Width = 640
object btnHome: TWebButton
Caption = 'HOME'
Color = clNone
ElementFont = efCSS
ElementID = 'home'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnHomeClick
Role = 'button'
TabOrder = 0
Top = 105
Width = 100
end
object btnAboutUs: TWebButton
Caption = 'ABOUT US'
Color = clNone
ElementFont = efCSS
ElementID = 'aboutus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnAboutUsClick
Role = 'button'
TabOrder = 0
Top = 113
Width = 100
end
object btnContactUs: TWebButton
Caption = 'CONTACT US'
Color = clNone
ElementFont = efCSS
ElementID = 'contactus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnContactUsClick
Role = 'button'
TabOrder = 0
Top = 121
Width = 100
end
object btnPublicSafety: TWebButton
Caption = 'Public Safety'
Color = clNone
ElementFont = efCSS
ElementID = 'publicsafety'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnPublicSafetyClick
Role = 'button'
TabOrder = 0
Top = 137
Width = 100
end
object btnRecordsManagement: TWebButton
Caption = 'Records Management'
Color = clNone
ElementID = 'recordsmanagement'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnRecordsManagementClick
Role = 'button'
TabOrder = 0
Top = 169
Width = 100
end
object btnCustomSoftware: TWebButton
Caption = 'Custom Software'
Color = clNone
ElementFont = efCSS
ElementID = 'customsoftware'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnCustomSoftwareClick
Role = 'button'
TabOrder = 0
Top = 111
Width = 100
end
end
EMSystemsWebsite/View.ContactUs.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a>
</li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records
Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
\ No newline at end of file
EMSystemsWebsite/View.ContactUs.pas 0 → 100644
unit View.ContactUs;
interface
uses
System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Forms, Vcl.StdCtrls,
WEBLib.StdCtrls, Vcl.Controls, WEBLib.Dialogs, Vcl.Imaging.pngimage,
WEBLib.ExtCtrls, WEBLib.Controls, Web, JS, WEBLib.Menus, WEBLib.WebCtrls;
type
TFContactUs = class(TWebForm)
btnHome: TWebButton;
btnAboutUs: TWebButton;
btnContactUs: TWebButton;
btnRecordsManagement: TWebButton;
btnCustomSoftware: TWebButton;
btnPublicSafety: TWebButton;
procedure btnHomeClick(Sender: TObject);
procedure btnAboutUsClick(Sender: TObject);
procedure btnContactUsClick(Sender: TObject);
procedure btnRecordsManagementClick(Sender: TObject);
procedure btnCustomSoftwareClick(Sender: TObject);
procedure btnPublicSafetyClick(Sender: TObject);
[async]
procedure WebFormCreate(Sender: TObject);
procedure WebFormClose(Sender: TObject; var Action: TCloseAction);
private
{ Private declarations }
public
procedure NavScrollSizing;
end;
var
FContactUs: TFContactUs;
implementation
{$R *.dfm}
uses
View.AboutUs,
View.Home,
View.CustomSoftware,
View.PublicSafety,
View.RecordsManagement;
procedure TFContactUs.btnCustomSoftwareClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFCustomSoftware, FCustomSoftware);
end;
procedure TFContactUs.btnRecordsManagementClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFRecordsManagement, FRecordsManagement);
end;
procedure TFContactUs.btnPublicSafetyClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFPublicSafety, FPublicSafety);
end;
procedure TFContactUs.btnContactUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFContactUs, FContactUs);
end;
procedure TFContactUs.btnAboutUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFAboutUs, FAboutUs);
end;
procedure TFContactUs.btnHomeClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFHome, FHome);
end;
procedure TFContactUs.WebFormCreate(Sender: TObject);
begin
Application.ThemeColor := clTMSWEB;
NavScrollSizing;
end;
procedure TFContactUs.NavScrollSizing;
begin
asm
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.em-navbar-wrap .navbar');
var logo = document.querySelector('.em-brand img');
var scrollDistance = 50; // Adjust based on your preference
if (window.scrollY > scrollDistance) {
navbar.classList.add('scrolled');
logo.classList.add('scrolled-logo');
} else {
navbar.classList.remove('scrolled');
logo.classList.remove('scrolled-logo');
}
});
end;
end;
procedure TFContactUs.WebFormClose(Sender: TObject; var Action: TCloseAction);
begin
Action := caFree;
end;
initialization
RegisterClass(TFContactUs);
end.
\ No newline at end of file
EMSystemsWebsite/View.CustomSoftware.dfm 0 → 100644
object FCustomSoftware: TFCustomSoftware
Color = clWhite
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
FormStyle = fsNormal
Height = 480
Left = 0
OnClose = WebFormClose
TabOrder = 0
Top = 0
Width = 640
object btnHome: TWebButton
Caption = 'HOME'
Color = clNone
ElementFont = efCSS
ElementID = 'home'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnHomeClick
Role = 'button'
TabOrder = 0
Top = 105
Width = 100
end
object btnAboutUs: TWebButton
Caption = 'ABOUT US'
Color = clNone
ElementFont = efCSS
ElementID = 'aboutus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 113
Width = 100
end
object btnContactUs: TWebButton
Caption = 'CONTACT US'
Color = clNone
ElementFont = efCSS
ElementID = 'contactus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 121
Width = 100
end
object btnPublicSafety: TWebButton
Caption = 'Public Safety'
Color = clNone
ElementFont = efCSS
ElementID = 'publicsafety'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 137
Width = 100
end
object btnRecordsManagement: TWebButton
Caption = 'Records Management'
Color = clNone
ElementID = 'recordsmanagement'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 169
Width = 100
end
object btnCustomSoftware: TWebButton
Caption = 'Custom Software'
Color = clNone
ElementFont = efCSS
ElementID = 'customsoftware'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 111
Width = 100
end
end
EMSystemsWebsite/View.CustomSoftware.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a>
</li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records
Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
\ No newline at end of file
EMSystemsWebsite/View.CustomSoftware.pas 0 → 100644
unit View.CustomSoftware;
interface
uses
System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Forms, Vcl.StdCtrls,
WEBLib.StdCtrls, Vcl.Controls, WEBLib.Dialogs, Vcl.Imaging.pngimage,
WEBLib.ExtCtrls, WEBLib.Controls, Web, JS, WEBLib.Menus, WEBLib.WebCtrls;
type
TFCustomSoftware = class(TWebForm)
btnHome: TWebButton;
btnAboutUs: TWebButton;
btnContactUs: TWebButton;
btnRecordsManagement: TWebButton;
btnCustomSoftware: TWebButton;
btnPublicSafety: TWebButton;
procedure btnHomeClick(Sender: TObject);
procedure btnAboutUsClick(Sender: TObject);
procedure btnContactUsClick(Sender: TObject);
procedure btnRecordsManagementClick(Sender: TObject);
procedure btnCustomSoftwareClick(Sender: TObject);
procedure btnPublicSafetyClick(Sender: TObject);
[async]
procedure WebFormCreate(Sender: TObject);
procedure WebFormClose(Sender: TObject; var Action: TCloseAction);
private
{ Private declarations }
public
procedure NavScrollSizing;
end;
var
FCustomSoftware: TFCustomSoftware;
implementation
{$R *.dfm}
uses
View.AboutUs,
View.ContactUs,
View.Home,
View.PublicSafety,
View.RecordsManagement;
procedure TFCustomSoftware.btnCustomSoftwareClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFCustomSoftware, FCustomSoftware);
end;
procedure TFCustomSoftware.btnRecordsManagementClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFRecordsManagement, FRecordsManagement);
end;
procedure TFCustomSoftware.btnPublicSafetyClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFPublicSafety, FPublicSafety);
end;
procedure TFCustomSoftware.btnContactUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFContactUs, FContactUs);
end;
procedure TFCustomSoftware.btnAboutUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFAboutUs, FAboutUs);
end;
procedure TFCustomSoftware.btnHomeClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFHome, FHome);
end;
procedure TFCustomSoftware.WebFormCreate(Sender: TObject);
begin
Application.ThemeColor := clTMSWEB;
NavScrollSizing;
end;
procedure TFCustomSoftware.NavScrollSizing;
begin
asm
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.em-navbar-wrap .navbar');
var logo = document.querySelector('.em-brand img');
var scrollDistance = 50; // Adjust based on your preference
if (window.scrollY > scrollDistance) {
navbar.classList.add('scrolled');
logo.classList.add('scrolled-logo');
} else {
navbar.classList.remove('scrolled');
logo.classList.remove('scrolled-logo');
}
});
end;
end;
procedure TFCustomSoftware.WebFormClose(Sender: TObject; var Action: TCloseAction);
begin
Action := caFree;
end;
initialization
RegisterClass(TFCustomSoftware);
end.
\ No newline at end of file
EMSystemsWebsite/View.Home.dfm
object FHome: TFHome object FHome: TFHome
CSSLibrary = cssBootstrap
Color = clWhite Color = clWhite
ElementFont = efCSS
Font.Charset = ANSI_CHARSET Font.Charset = ANSI_CHARSET
Font.Color = clBlack Font.Color = clBlack
Font.Height = -11 Font.Height = -11
...@@ -7,9 +9,130 @@ object FHome: TFHome ...@@ -7,9 +9,130 @@ object FHome: TFHome
Font.Size = 8 Font.Size = 8
Font.Style = [] Font.Style = []
FormStyle = fsNormal FormStyle = fsNormal
Height = 481 Height = 762
Left = 0 Left = 0
OnCreate = WebFormCreate
TabOrder = 0 TabOrder = 0
Top = 0 Top = 0
Width = 450 Visible = False
Width = 1290
object btnHome: TWebButton
Caption = 'HOME'
Color = clNone
ElementFont = efCSS
ElementID = 'home'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 779
OnClick = btnHomeClick
Role = 'button'
TabOrder = 0
Top = 105
Width = 100
end
object btnAboutUs: TWebButton
Caption = 'ABOUT US'
Color = clNone
ElementFont = efCSS
ElementID = 'aboutus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 899
OnClick = btnAboutUsClick
Role = 'button'
TabOrder = 0
Top = 105
Width = 100
end
object btnContactUs: TWebButton
Caption = 'CONTACT US'
Color = clNone
ElementFont = efCSS
ElementID = 'contactus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 1171
OnClick = btnContactUsClick
Role = 'button'
TabOrder = 0
Top = 105
Width = 100
end
object btnPublicSafety: TWebButton
Caption = 'Public Safety'
Color = clNone
ElementFont = efCSS
ElementID = 'publicsafety'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 1027
OnClick = btnPublicSafetyClick
Role = 'button'
TabOrder = 0
Top = 137
Width = 100
end
object btnRecordsManagement: TWebButton
Caption = 'Records Management'
Color = clNone
ElementID = 'recordsmanagement'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 1027
OnClick = btnRecordsManagementClick
Role = 'button'
TabOrder = 0
Top = 169
Width = 100
end
object btnCustomSoftware: TWebButton
Caption = 'Custom Software'
Color = clNone
ElementFont = efCSS
ElementID = 'customsoftware'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 1019
OnClick = btnCustomSoftwareClick
Role = 'button'
TabOrder = 0
Top = 111
Width = 100
end
end end
EMSystemsWebsite/View.Home.html
<!--NAVBAR CONTAINER--> <!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap"> <div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max"> <div class="container-fluid container-main">
<a class="navbar-brand em-brand" href="#FHome"> <a class="navbar-brand em-brand" href="#FHome">
<img src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/cropped-EM_Logo2_Copy5-180x30.png" alt="EFX"> <img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
...@@ -14,8 +15,21 @@ ...@@ -14,8 +15,21 @@
<a class="nav-link" id="home" href="#FHome">Home</a> <a class="nav-link" id="home" href="#FHome">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="information" href="#FInformation">What We Do</a> <a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li> </li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a></li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a> <a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li> </li>
...@@ -40,83 +54,87 @@ ...@@ -40,83 +54,87 @@
</div> </div>
</div> </div>
<!--MAIN CONTAINER-->
<!-- LEARN BOXES --> <div class="container-main">
<div class="container my-5"> <!-- LEARN BOXES -->
<div class="learn-boxes p-5">
<div class="row row-cols-1 row-cols-lg-3 g-4 align-items-stretch"> <div class="row row-cols-1 row-cols-lg-3 g-4 align-items-stretch">
<div class="col"> <div class="col d-flex">
<div class="learn-box shadow"> <div class="learn-box shadow flex-fill d-flex flex-column">
<img src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/10/computer-ga073c6b91_1920-1024x682.jpg" alt="Computer Image" class="img-fluid"> <img
<div class="box-content"> src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/10/computer-ga073c6b91_1920-1024x682.jpg"
alt="Computer Image" class="img-fluid rounded-top">
<div class="box-content d-flex flex-column p-3">
<h2>Custom Software Development</h2> <h2>Custom Software Development</h2>
<button class="btn btn-primary">Learn More</button> <button class="btn btn-primary mx-auto mt-auto" style="width: 175px;">Learn More</button>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col d-flex">
<div class="learn-box shadow"> <div class="learn-box shadow flex-fill d-flex flex-column">
<img src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/digitization-g72e897cbb_1920-1024x680.jpg" alt="Logistics Image" class="img-fluid"> <img
<div class="box-content"> src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/digitization-g72e897cbb_1920-1024x680.jpg"
alt="Logistics Image" class="img-fluid rounded-top">
<div class="box-content d-flex flex-column p-3">
<h2>Integrated Public Safety Solutions</h2> <h2>Integrated Public Safety Solutions</h2>
<button class="btn btn-primary">Learn More</button> <button class="btn btn-primary mx-auto mt-auto" style="width: 175px;">Learn More</button>
</div>
</div> </div>
</div> </div>
<div class="col d-flex">
<div class="learn-box shadow flex-fill d-flex flex-column">
<img
src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/archive-gc84e8bebd_1920-1024x683.jpg"
alt="Storage Image" class="img-fluid rounded-top">
<div class="box-content d-flex flex-column p-3">
<h2>Storage and Records Management</h2>
<button class="btn btn-primary mx-auto mt-auto" style="width: 175px;">Learn More</button>
</div> </div>
<div class="col">
<div class="learn-box shadow">
<img src="http://gator3304.temp.domains/~emsys065/wp-content/uploads/2021/12/archive-gc84e8bebd_1920-1024x683.jpg" alt="Storage Image" class="img-fluid">
<div class="box-content">
<h2> Records and Database Management</h2>
<button class="btn btn-primary">Learn More</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- CONTENT SECTION --> <!-- FOOTER -->
<footer class="bg-dark text-light">
<div class="container-main">
<div class="row text-center text-lg-start">
<footer class="bg-dark text-light text-center text-lg-start"> <!-- Logo Column -->
<div class="container p-4"> <div class="col-lg-4 col-md-4 mb-4 mb-md-0 d-flex justify-content-lg-start justify-content-center">
<div class="row"> <a href="#FHome" class="navbar-brand">
<div class="col-lg-4 col-md-12 mb-4 mb-md-0"> <img src="images/EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 30px">
<h5 class="mb-4">EM Systems, Inc.</h5> </a>
</div> </div>
<div class="col-lg-2 col-md-6 mb-4 mb-md-0"> <!-- Explore Links Column -->
<div class="col-lg-4 col-md-4 mb-4 mb-md-0">
<div>
<h5>Explore</h5> <h5>Explore</h5>
<ul class="list-unstyled mb-0"> <ul class="list-unstyled mb-0">
<li> <li><a href="#FHome">Home</a></li>
<a href="#!" class="text-light">Home</a> <li><a href="#FAboutUs">About Us</a></li>
</li> <li><a href="#FContactUs">Contact Us</a></li>
<li>
<a href="#!" class="text-light">What We Do</a>
</li>
<li>
<a href="#!" class="text-light">Contact Us</a>
</li>
</ul> </ul>
</div> </div>
</div>
<div class="col-lg-6 col-md-6 mb-4 mb-md-0"> <!-- Address Column -->
<h5 class="mb-0">Connect With Us</h5> <div class="col-lg-4 col-md-4 mb-4 mb-md-0">
<div>
<ul class="list-unstyled"> <address>
<li> 4043 Maple Rd, Suite 211<br>
<p>40432 Maple Rd, Suite 211<br>Amherst, NY 14226</p> Amherst, NY 14226<br>
</li> (716) 836-4910
<li> </address>
<p>(716) 836-4910</p> </div>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> <!-- Copyright Text -->
<div class="footer-copyright">
© 2011-2024 EM Systems Inc © 2011-2024 EM Systems Inc
</div> </div>
</footer> </footer>
EMSystemsWebsite/View.Home.pas
...@@ -9,9 +9,23 @@ uses ...@@ -9,9 +9,23 @@ uses
type type
TFHome = class(TWebForm) TFHome = class(TWebForm)
[async] btnHome: TWebButton;
btnAboutUs: TWebButton;
btnContactUs: TWebButton;
btnCustomSoftware: TWebButton;
btnPublicSafety: TWebButton;
btnRecordsManagement: TWebButton;
procedure btnHomeClick(Sender: TObject);
procedure btnAboutUsClick(Sender: TObject);
procedure btnContactUsClick(Sender: TObject);
procedure btnRecordsManagementClick(Sender: TObject);
procedure btnCustomSoftwareClick(Sender: TObject);
procedure btnPublicSafetyClick(Sender: TObject);
procedure WebFormCreate(Sender: TObject); procedure WebFormCreate(Sender: TObject);
procedure WebFormClose(Sender: TObject; var Action: TCloseAction); procedure WebFormClose(Sender: TObject; var Action: TCloseAction);
private
{ Private declarations }
public public
procedure NavScrollSizing; procedure NavScrollSizing;
end; end;
...@@ -23,6 +37,49 @@ implementation ...@@ -23,6 +37,49 @@ implementation
{$R *.dfm} {$R *.dfm}
uses
View.AboutUs,
View.ContactUs,
View.CustomSoftware,
View.PublicSafety,
View.RecordsManagement;
procedure TFHome.btnCustomSoftwareClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFCustomSoftware, FCustomSoftware);
end;
procedure TFHome.btnRecordsManagementClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFRecordsManagement, FRecordsManagement);
end;
procedure TFHome.btnPublicSafetyClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFPublicSafety, FPublicSafety);
end;
procedure TFHome.btnContactUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFContactUs, FContactUs);
end;
procedure TFHome.btnAboutUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFAboutUs, FAboutUs);
end;
procedure TFHome.btnHomeClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFHome, FHome);
end;
procedure TFHome.WebFormClose(Sender: TObject; var Action: TCloseAction); procedure TFHome.WebFormClose(Sender: TObject; var Action: TCloseAction);
begin begin
Action := caFree; Action := caFree;
...@@ -31,12 +88,14 @@ end; ...@@ -31,12 +88,14 @@ end;
procedure TFHome.WebFormCreate(Sender: TObject); procedure TFHome.WebFormCreate(Sender: TObject);
begin begin
Application.ThemeColor := clTMSWEB; Application.ThemeColor := clTMSWEB;
console.log('WebFormCreate - start');
NavScrollSizing; NavScrollSizing;
end; end;
procedure TFHome.NavScrollSizing; procedure TFHome.NavScrollSizing;
begin begin
asm asm
console.log('NavScrollSizing - start')
window.addEventListener('scroll', function() { window.addEventListener('scroll', function() {
var navbar = document.querySelector('.em-navbar-wrap .navbar'); var navbar = document.querySelector('.em-navbar-wrap .navbar');
var logo = document.querySelector('.em-brand img'); var logo = document.querySelector('.em-brand img');
...@@ -51,6 +110,7 @@ begin ...@@ -51,6 +110,7 @@ begin
} }
}); });
end; end;
console.log('NavScrollSizing - end');
end; end;
initialization initialization
......
EMSystemsWebsite/View.PublicSafety.dfm 0 → 100644
object FPublicSafety: TFPublicSafety
Color = clWhite
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
FormStyle = fsNormal
Height = 480
Left = 0
OnClose = WebFormClose
TabOrder = 0
Top = 0
Width = 640
object btnHome: TWebButton
Caption = 'HOME'
Color = clNone
ElementFont = efCSS
ElementID = 'home'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnHomeClick
Role = 'button'
TabOrder = 0
Top = 105
Width = 100
end
object btnAboutUs: TWebButton
Caption = 'ABOUT US'
Color = clNone
ElementFont = efCSS
ElementID = 'aboutus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnAboutUsClick
Role = 'button'
TabOrder = 0
Top = 113
Width = 100
end
object btnContactUs: TWebButton
Caption = 'CONTACT US'
Color = clNone
ElementFont = efCSS
ElementID = 'contactus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnContactUsClick
Role = 'button'
TabOrder = 0
Top = 121
Width = 100
end
object btnPublicSafety: TWebButton
Caption = 'Public Safety'
Color = clNone
ElementFont = efCSS
ElementID = 'publicsafety'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnPublicSafetyClick
Role = 'button'
TabOrder = 0
Top = 137
Width = 100
end
object btnRecordsManagement: TWebButton
Caption = 'Records Management'
Color = clNone
ElementID = 'recordsmanagement'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnRecordsManagementClick
Role = 'button'
TabOrder = 0
Top = 169
Width = 100
end
object btnCustomSoftware: TWebButton
Caption = 'Custom Software'
Color = clNone
ElementFont = efCSS
ElementID = 'customsoftware'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
OnClick = btnCustomSoftwareClick
Role = 'button'
TabOrder = 0
Top = 111
Width = 100
end
end
EMSystemsWebsite/View.PublicSafety.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a>
</li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records
Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
\ No newline at end of file
EMSystemsWebsite/View.PublicSafety.pas 0 → 100644
unit View.PublicSafety;
interface
uses
System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Forms, Vcl.StdCtrls,
WEBLib.StdCtrls, Vcl.Controls, WEBLib.Dialogs, Vcl.Imaging.pngimage,
WEBLib.ExtCtrls, WEBLib.Controls, Web, JS, WEBLib.Menus, WEBLib.WebCtrls;
type
TFPublicSafety = class(TWebForm)
btnHome: TWebButton;
btnAboutUs: TWebButton;
btnContactUs: TWebButton;
btnRecordsManagement: TWebButton;
btnCustomSoftware: TWebButton;
btnPublicSafety: TWebButton;
procedure btnHomeClick(Sender: TObject);
procedure btnAboutUsClick(Sender: TObject);
procedure btnContactUsClick(Sender: TObject);
procedure btnRecordsManagementClick(Sender: TObject);
procedure btnCustomSoftwareClick(Sender: TObject);
procedure btnPublicSafetyClick(Sender: TObject);
[async]
procedure WebFormCreate(Sender: TObject);
procedure WebFormClose(Sender: TObject; var Action: TCloseAction);
private
{ Private declarations }
public
procedure NavScrollSizing;
end;
var
FPublicSafety: TFPublicSafety;
implementation
{$R *.dfm}
uses
View.AboutUs,
View.ContactUs,
View.CustomSoftware,
View.Home,
View.RecordsManagement;
procedure TFPublicSafety.btnCustomSoftwareClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFCustomSoftware, FCustomSoftware);
end;
procedure TFPublicSafety.btnRecordsManagementClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFRecordsManagement, FRecordsManagement);
end;
procedure TFPublicSafety.btnPublicSafetyClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFPublicSafety, FPublicSafety);
end;
procedure TFPublicSafety.btnContactUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFContactUs, FContactUs);
end;
procedure TFPublicSafety.btnAboutUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFAboutUs, FAboutUs);
end;
procedure TFPublicSafety.btnHomeClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFHome, FHome);
end;
procedure TFPublicSafety.WebFormCreate(Sender: TObject);
begin
Application.ThemeColor := clTMSWEB;
NavScrollSizing;
end;
procedure TFPublicSafety.NavScrollSizing;
begin
asm
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.em-navbar-wrap .navbar');
var logo = document.querySelector('.em-brand img');
var scrollDistance = 50; // Adjust based on your preference
if (window.scrollY > scrollDistance) {
navbar.classList.add('scrolled');
logo.classList.add('scrolled-logo');
} else {
navbar.classList.remove('scrolled');
logo.classList.remove('scrolled-logo');
}
});
end;
end;
procedure TFPublicSafety.WebFormClose(Sender: TObject; var Action: TCloseAction);
begin
Action := caFree;
end;
initialization
RegisterClass(TFPublicSafety);
end.
\ No newline at end of file
EMSystemsWebsite/View.RecordsManagement.dfm 0 → 100644
object FRecordsManagement: TFRecordsManagement
CSSLibrary = cssBootstrap
Color = clWhite
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
FormStyle = fsNormal
Height = 480
Left = 0
OnClose = WebFormClose
TabOrder = 0
Top = 0
Width = 640
object btnHome: TWebButton
Caption = 'HOME'
Color = clNone
ElementFont = efCSS
ElementID = 'home'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 105
Width = 100
end
object btnAboutUs: TWebButton
Caption = 'ABOUT US'
Color = clNone
ElementFont = efCSS
ElementID = 'aboutus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 113
Width = 100
end
object btnContactUs: TWebButton
Caption = 'CONTACT US'
Color = clNone
ElementFont = efCSS
ElementID = 'contactus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 121
Width = 100
end
object btnPublicSafety: TWebButton
Caption = 'Public Safety'
Color = clNone
ElementFont = efCSS
ElementID = 'publicsafety'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 137
Width = 100
end
object btnRecordsManagement: TWebButton
Caption = 'Records Management'
Color = clNone
ElementID = 'recordsmanagement'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 169
Width = 100
end
object btnCustomSoftware: TWebButton
Caption = 'Custom Software'
Color = clNone
ElementFont = efCSS
ElementID = 'customsoftware'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 540
Role = 'button'
TabOrder = 0
Top = 111
Width = 100
end
end
EMSystemsWebsite/View.RecordsManagement.html 0 → 100644
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images\EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutus" href="#FAboutUs">About Us</a>
</li>
<!-- Dropdown Menu for "What We Do" -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
What We Do
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="customsoftware" href="#FCustomSoftware">Custom Software</a>
</li>
<li><a class="dropdown-item" id="publicsafety" href="#FPublicSafety">Public Safety</a></li>
<li><a class="dropdown-item" id="recordsmanagement" href="#FRecordsManagement">Records
Management</a></li>
</ul>
</li>
<!-- End Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
\ No newline at end of file
EMSystemsWebsite/View.RecordsManagement.pas 0 → 100644
unit View.RecordsManagement;
interface
uses
System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Forms, Vcl.StdCtrls,
WEBLib.StdCtrls, Vcl.Controls, WEBLib.Dialogs, Vcl.Imaging.pngimage,
WEBLib.ExtCtrls, WEBLib.Controls, Web, JS, WEBLib.Menus, WEBLib.WebCtrls;
type
TFRecordsManagement = class(TWebForm)
btnHome: TWebButton;
btnAboutUs: TWebButton;
btnContactUs: TWebButton;
btnRecordsManagement: TWebButton;
btnCustomSoftware: TWebButton;
btnPublicSafety: TWebButton;
procedure btnHomeClick(Sender: TObject);
procedure btnAboutUsClick(Sender: TObject);
procedure btnContactUsClick(Sender: TObject);
procedure btnRecordsManagementClick(Sender: TObject);
procedure btnCustomSoftwareClick(Sender: TObject);
procedure btnPublicSafetyClick(Sender: TObject);
[async]
procedure WebFormCreate(Sender: TObject);
procedure WebFormClose(Sender: TObject; var Action: TCloseAction);
private
{ Private declarations }
public
procedure NavScrollSizing;
end;
var
FRecordsManagement: TFRecordsManagement;
implementation
{$R *.dfm}
uses
View.AboutUs,
View.ContactUs,
View.CustomSoftware,
View.PublicSafety,
View.Home;
procedure TFRecordsManagement.btnCustomSoftwareClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFCustomSoftware, FCustomSoftware);
end;
procedure TFRecordsManagement.btnRecordsManagementClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFRecordsManagement, FRecordsManagement);
end;
procedure TFRecordsManagement.btnPublicSafetyClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFPublicSafety, FPublicSafety);
end;
procedure TFRecordsManagement.btnContactUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFContactUs, FContactUs);
end;
procedure TFRecordsManagement.btnAboutUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFAboutUs, FAboutUs);
end;
procedure TFRecordsManagement.btnHomeClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFHome, FHome);
end;
procedure TFRecordsManagement.WebFormCreate(Sender: TObject);
begin
Application.ThemeColor := clTMSWEB;
NavScrollSizing;
end;
procedure TFRecordsManagement.NavScrollSizing;
begin
asm
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.em-navbar-wrap .navbar');
var logo = document.querySelector('.em-brand img');
var scrollDistance = 50; // Adjust based on your preference
if (window.scrollY > scrollDistance) {
navbar.classList.add('scrolled');
logo.classList.add('scrolled-logo');
} else {
navbar.classList.remove('scrolled');
logo.classList.remove('scrolled-logo');
}
});
end;
end;
procedure TFRecordsManagement.WebFormClose(Sender: TObject; var Action: TCloseAction);
begin
Action := caFree;
end;
initialization
RegisterClass(TFRecordsManagement);
end.
\ No newline at end of file
EMSystemsWebsite/css/App.css
...@@ -9,62 +9,96 @@ body { ...@@ -9,62 +9,96 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.container-max { .container-main {
max-width: 1400px; max-width: 1400px;
margin-right: auto; margin: auto;
margin-left: auto; padding: 1rem;
} }
.em-black { .em-black {
color: #000000; color: #000000;
} }
/* NAVBAR */
.em-navbar-wrap .navbar { .em-navbar-wrap .navbar {
transition: height 0.3s ease-in-out; transition: padding-top 0.3s ease, padding-bottom 0.3s ease; /* Smooth transitions for padding */
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 1030; z-index: 1030;
} }
/* Default state of the navbar */
.em-navbar-wrap .navbar {
padding-top: 1rem;
padding-bottom: 1rem;
}
/* Transition for navbar logo size */
.em-brand img { .em-brand img {
height: auto; transition: max-height 0.3s ease; /* Smooth transition for logo size */
transition: height 0.3s ease-in-out; max-height: 80px; /* Set a max-height for the logo */
margin-top: 8px;
} }
.navbar-nav .nav-link { /* Nav link styles and transitions */
.em-navbar-wrap .navbar .navbar-nav .nav-link {
transition: color 0.3s ease; /* Smooth transition for color change */
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.085em; letter-spacing: 0.085em;
font-size: larger; font-size: 1rem;
color: #999999; color: #FFFFFF;
padding-top: 37px;
padding-bottom: 37px;
height: 90px;
transition: padding 0.3s ease-in-out;
} }
.navbar-nav .nav-item:hover .nav-link, /* Hover and active state for nav links */
.navbar-nav .nav-item.active .nav-link { .em-navbar-wrap .navbar .navbar-nav .nav-item:hover .nav-link,
.em-navbar-wrap .navbar .navbar-nav .nav-item.active .nav-link {
color: #999999;
box-shadow: inset 0 -4px 0 0 #2c66a0; box-shadow: inset 0 -4px 0 0 #2c66a0;
} }
/* navbar changes when scrolled */
.em-navbar-wrap .navbar.scrolled { .em-navbar-wrap .navbar.scrolled {
padding-top: 0; padding-top: 0.5rem;
padding-bottom: 0; padding-bottom: 0.5rem;
height: 70px;
} }
/* Smaller logo when scrolled */
.em-brand img.scrolled-logo { .em-brand img.scrolled-logo {
height: 30px; max-height: 40px;
} }
/* Adjust padding for nav links when scrolled */
.navbar.scrolled .nav-link { .navbar.scrolled .nav-link {
padding-top: 25px; padding-top: 0.5rem;
padding-bottom: 25px; padding-bottom: 0.5rem;
}
/* navbar dropdown menu */
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu {
background-color: #212529; /* Dark background to match the navbar */
border: none; /* No border for a cleaner look */
}
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item {
color: #f8f9fa;
}
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:focus {
background-color: #495057; /* Slightly lighter background on hover/focus */
color: #ffffff;
} }
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:active {
background-color: #2c66a0; /* Highlights color for active state */
color: #ffffff;
}
/* navbar hamburger menu */
.navbar-toggler { .navbar-toggler {
outline: none !important; outline: none !important;
border: none !important; border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, box-shadow 0.3s ease;
background-color: #999999; background-color: #2c66a0;
} }
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.active { .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.active {
outline: none; outline: none;
...@@ -74,10 +108,12 @@ body { ...@@ -74,10 +108,12 @@ body {
} }
.navbar-toggler:hover { .navbar-toggler:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; /* "Pressed in" look */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; /* "Pressed in" look */
background-color: #2c66a0; background-color: #999999;
} }
/****************************************************************************************/
/* HERO IMAGE */
.hero-section { .hero-section {
position: relative; position: relative;
height: 50vh; /* Control the height of the hero section */ height: 50vh; /* Control the height of the hero section */
...@@ -95,24 +131,21 @@ body { ...@@ -95,24 +131,21 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay for better text visibility */ background-color: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-shadow: 0px 0px 10px #000; text-shadow: 0px 0px 10px #000;
} }
/****************************************************************************************/
/* LEARN BOXES */
.learn-boxes { .learn-boxes {
margin-top: 80px; /* Add space above the boxes */ margin-top: auto;
padding: 20px 0; /* Add some padding at the top and bottom */ padding: 20px 0;
color: #000; /* Set text color to black */ color: #000;
overflow: hidden; /* Prevents content from overflowing the container */ overflow: hidden;
border-radius: 8px; /* Round the corners of the container */
}
.container.my-5 {
padding-top: 20px; /* Optional: increase if navbar covers the top content */
} }
.learn-box { .learn-box {
...@@ -121,145 +154,103 @@ body { ...@@ -121,145 +154,103 @@ body {
background-color: #FFF; background-color: #FFF;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
}
.learn-box {
display: flex;
flex-direction: column;
flex-grow: 1; flex-grow: 1;
background-color: #FFF; overflow: hidden;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px; /* This value rounds the corners of the boxes */
} }
.learn-box img { .img-fluid {
flex-grow: 1;
width: 100%; width: 100%;
object-fit: cover; /* Ensures the image covers the allotted space without distortion */ object-fit: cover;
border-top-left-radius: 8px; /* Round the bottom left corner */
border-top-right-radius: 8px; /* Round the bottom right corner */
} }
.box-content { .box-content {
padding: 15px; /* Padding around the content at the bottom of the box */ padding: 15px;
text-align: center; /* Center-aligns the text */ text-align: center;
background: #ffffff; /* Optional: for a visual break between image and text, use a contrasting background */ background: #ffffff;
border-bottom-left-radius: 8px; /* Round the bottom left corner */ flex-grow: 1;
border-bottom-right-radius: 8px; /* Round the bottom right corner */ display: flex;
flex-direction: column;
justify-content: space-between;
} }
.learn-box h2 { .learn-box h2 {
margin-bottom: 10px; /* Reduced bottom margin */ margin-bottom: 10px;
color: #333; /* Text color for visibility */ color: #333;
} }
.learn-box button { .learn-box button {
padding: 8px 16px; /* Slightly larger padding than text width */ padding: 8px 16px;
font-size: 16px; /* Adequate font size for readability */ font-size: 16px;
border-radius: 4px; /* Aesthetic choice for button corners */ border-radius: 4px;
background-color: #333333; /* Primary button color */ background-color: #333333;
color: white; /* Text color for the button */ color: white;
border: none; /* Simplifies the button appearance */ border: none;
} }
.learn-box button:hover { .learn-box button:hover {
background-color: #000; /* Darker button on hover */ background-color: #000;
}
/* Currency Expert Box Styling */
.currency-expert-box {
position: absolute;
top: 30%;
left: 10%;
transform: translateX(-50%, -50%);
background-color: rgba(246, 246, 246, 0.9);
padding: 20px;
width: 30%;
max-width: 400px;
z-index: 2;
border-radius: 10px;
} }
/****************************************************************************************/
/* Content Section Styling */ /* FOOTER */
.content-section { .container-main {
position: relative; max-width: 1400px;
z-index: 10; margin: auto; /* Centers the container */
background: #FFF; padding: 1rem; /* Padding for top and bottom */
margin-top: -2rem;
}
blockquote {
margin-top: 1em;
font-style: italic;
}
.middle-subtitle {
font-size: medium;
font-weight: bold;
} }
footer {
.container.mt-5 { background-color: #000;
margin-top: calc(5rem + 90px) !important; color: #fff;
padding: 1rem 0;
} }
footer .navbar-brand img {
.location-info { max-height: 50px;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
margin-bottom: 2rem;
} }
footer h5 {
.location-info h3 { font-size: 0.9rem;
margin-bottom: .5rem;
} }
footer ul li a,
.location { footer ul li p {
display: flex; font-size: 0.8rem;
align-items: start; /* Aligns the icon with the top of the text */ color: #fff;
margin-bottom: 1rem; /* Spacing between locations */ text-decoration: none;
} }
footer ul li a:hover,
.location i.fas { footer ul li a:focus {
margin-top: 0.25rem; /* Adjust this value to fine-tune vertical alignment with h4 */ color: #999999;
text-decoration: none;
} }
footer address,
.location > div { footer p {
margin-left: 0.5rem; /* Space between icon and text */ font-size: 0.8rem;
} }
footer .footer-copyright {
.hours-box h3 { font-size: 0.8rem;
margin-bottom: 1rem; /* Space below the section title */ padding: 0.5rem 0;
text-align: center;
} }
/****************************************************************************************/
/* MEDIA QUERIES */ /* MEDIA QUERIES */
/* Media Queries */
/* Adjustments for navbar and learn-boxes margin on medium screens */
@media (max-width: 992px) { @media (max-width: 992px) {
.navbar-nav .nav-link { .navbar-nav .nav-link {
padding-top: 30px; padding-top: 30px;
padding-bottom: 10px; padding-bottom: 10px;
height: auto; height: auto;
} }
} }
@media (min-width: 1400px) {
/* Adjustments for .currency-expert-box on small screens */ .container-max {
@media (max-width: 768px) { max-width: 1600px;
.currency-expert-box {
width: 80%; /* Adjust width for smaller screens */
} }
} }
@media (min-width: 1400px) {
/* Adjustments for .currency-expert-box on extra small screens */ .em-navbar-wrap .navbar-brand {
@media (max-width: 576px) { padding-right: 2rem;
.currency-expert-box { }
width: 90%; /* Adjust width for even smaller screens */ .em-navbar-wrap .navbar .navbar-nav {
padding: 15px; /* Adjust padding for smaller screens */ padding-left: 2rem;
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment