Skip to content

E
EMSystemsWeb
Commit acb46d75 by Mac Stephens
Options

Implement Request Demo form with shared navbar/footer, conditional validation,… 

Implement Request Demo form with shared navbar/footer, conditional validation, and improved email formatting/newline handling
parent 95b15d71
Showing with 866 additions and 529 deletions
emSystemsWeb/ConnectionModule.pas
......@@ -22,7 +22,7 @@ type
procedure LoadConfig(loadedProc: TProc<Boolean>);
public
const clientVersion = '1.0.0';
const clientVersion = '1.0.1';
procedure InitApp(readyProc: TProc);
procedure SetClientConfig(callback: TVersionCheckCallback);
end;
......
emSystemsWeb/EMSystemsWebsite.dpr
program emSystemsWebsite;
{$R *.dres}
uses
......
emSystemsWeb/Site.Navbar.pas
......@@ -14,15 +14,15 @@ const
'<div class="em-navbar-wrap">' +
' <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow py-1 py-lg-2">' +
' <div class="container-fluid container-main">' +
' <a class="navbar-brand em-brand" href="#FHome">' +
' <img src="images/EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">' +
' <a class="navbar-brand em-brand me-auto" href="#FHome">' +
' <img src="images/EM_Logo_2c66a0.png" alt="EM_Logo"">' +
' </a>' +
' <button class="navbar-toggler navbar-toggler-sm" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"' +
' <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">' +
' <ul class="navbar-nav ms-auto gap-lg-3">' +
' <li class="nav-item"><a class="nav-link" href="#FHome">Home</a></li>' +
' <li class="nav-item"><a class="nav-link" href="#FAboutUs">About Us</a></li>' +
' <li class="nav-item dropdown">' +
......
emSystemsWeb/View.AboutUs.html
<div id="site_nav"></div>
<div class="d-flex flex-column min-vh-100">
<div id="site_nav"></div>
<div class="container-fluid px-0">
<div class="hero-section-aboutus bg-dark text-white text-center">
<img src="images/niagara.jpg" alt="Our Story Image" class="img-fluid hero-image-aboutus">
<div class="hero-overlay-aboutus">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6"> <!-- Adjust the column sizes as needed -->
<div class="text-wrapper-aboutus mx-auto p-3 p-md-5 rounded shadow">
<h2>Our Story</h2>
<p class="fs-6">
EM Systems was established in the early 1990s as a software development group. Over the last
two decades, EM Systems have developed a vast array of custom software applications for a variety of
industries with a primary focus on the Public Safety and Healthcare fields. Currently, over 75
organizations across New York State rely on EM Systems applications to meet the needs of their
communities and
customers. EM Systems prides itself in its ability to create custom software solutions to meet the
specific needs of
our customers. Our goal is to create software which facilitates and enhances current business practices
in a
reliable and efficient manner. Not only do we offer expert software development knowledge and skills but
we are also experienced in understanding and improving efficiency in current business processes and
practice.
</p>
<div class="container-fluid px-0">
<div class="hero-section-aboutus bg-dark text-white text-center">
<img src="images/niagara.jpg" alt="Our Story Image" class="img-fluid hero-image-aboutus">
<div class="hero-overlay-aboutus">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6"> <!-- Adjust the column sizes as needed -->
<div class="text-wrapper-aboutus mx-auto p-3 p-md-5 rounded shadow">
<h2>Our Story</h2>
<p class="fs-6">
EM Systems was established in the early 1990s as a software development group. Over the last
two decades, EM Systems have developed a vast array of custom software applications for a variety of
industries with a primary focus on the Public Safety and Healthcare fields. Currently, over 75
organizations across New York State rely on EM Systems applications to meet the needs of their
communities and
customers. EM Systems prides itself in its ability to create custom software solutions to meet the
specific needs of
our customers. Our goal is to create software which facilitates and enhances current business practices
in a
reliable and efficient manner. Not only do we offer expert software development knowledge and skills but
we are also experienced in understanding and improving efficiency in current business processes and
practice.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="site_footer"></div>
<div id="site_footer"></div>
</div>
emSystemsWeb/View.ContactUs.pas
......@@ -9,7 +9,7 @@ uses
XData.Web.Connection, XData.Web.Client, Data.DB, Utils,
XData.Web.JsonDataset, XData.Web.Dataset, Vcl.Grids,
WEBLib.DBCtrls, WEBLib.DB, WEBLib.Grids, WEBLib.CDS, WEBLib.REST,
WEBLib.WebTools, System.NetEncoding, WEBLib.RegularExpressions,
WEBLib.WebTools, System.NetEncoding, WebLib.RegularExpressions,
WEBLib.Toast, XData.Web.Request, XData.Web.Response;
type
......
emSystemsWeb/View.CustomSoftware.html
<div id="site_nav"></div>
<div class="d-flex flex-column min-vh-100">
<div id="site_nav"></div>
<!-- HERO SECTION -->
<div class="container-fluid px-0">
<div class="page-hero-section bg-dark text-white text-center">
<img src="images\computer_code.jpg" alt="Hero Image" class="img-fluid hero-image">
<div class="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper">
<h1 class="display-4">Custom Software</h1>
<!-- HERO SECTION -->
<div class="container-fluid px-0">
<div class="page-hero-section bg-dark text-white text-center">
<img src="images\computer_code.jpg" alt="Hero Image" class="img-fluid hero-image">
<div class="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper">
<h1 class="display-4">Custom Software</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--MAIN CONTAINER-->
<div class="container-main">
<div class="learn-boxes py-5">
<!-- CUSTOM SOFTWARE BOX 1 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>AutoPark</h2>
<p class="mx-auto" style="max-width: 850px;">AutoPark is our parking ticket management system. It streamlines and coordinates the process and procedures of managing a parking area. From parking tags, tickets and bills to payments and appeals, this solution has it all when it comes to parking management.</p>
<!--MAIN CONTAINER-->
<div class="container-main">
<div class="learn-boxes py-5">
<!-- CUSTOM SOFTWARE BOX 1 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>AutoPark</h2>
<p class="mx-auto" style="max-width: 850px;">AutoPark is our parking ticket management system. It streamlines and coordinates the process and procedures of managing a parking area. From parking tags, tickets and bills to payments and appeals, this solution has it all when it comes to parking management.</p>
</div>
</div>
</div>
</div>
</div>
<!-- CUSTOM SOFTWARE BOX 2 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Document Scanning Tools</h2>
<p class="mx-auto" style="max-width: 850px;">Scan and transmit paper documents with ease. This software provides an easy way to scan and organize paper documents and send them electronically to a variety of configurable destinations including HL7, FTPS, HTTPS, CIFS and more.</p>
<!-- CUSTOM SOFTWARE BOX 2 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Document Scanning Tools</h2>
<p class="mx-auto" style="max-width: 850px;">Scan and transmit paper documents with ease. This software provides an easy way to scan and organize paper documents and send them electronically to a variety of configurable destinations including HL7, FTPS, HTTPS, CIFS and more.</p>
</div>
</div>
</div>
</div>
</div>
<!-- CUSTOM SOFTWARE BOX 3 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Document Management System</h2>
<p class="mx-auto" style="max-width: 850px;">Very easily scan and store all of your paper documents securely and safely and retrieve any of them instantly at any time. This software can save countless hours for document imaging projects and can be customized to fit specific needs.</p>
<!-- CUSTOM SOFTWARE BOX 3 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Document Management System</h2>
<p class="mx-auto" style="max-width: 850px;">Very easily scan and store all of your paper documents securely and safely and retrieve any of them instantly at any time. This software can save countless hours for document imaging projects and can be customized to fit specific needs.</p>
</div>
</div>
</div>
</div>
</div>
<!-- CUSTOM SOFTWARE BOX 4 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Pawn Shop Pro</h2>
<p class="mx-auto" style="max-width: 850px;">This is a pawn shop management system that will simplify record keeping, billing, and inventory management. If there is something specific that you need for your pawn shop the software can be modified to suit your needs.</p>
<!-- CUSTOM SOFTWARE BOX 4 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Pawn Shop Pro</h2>
<p class="mx-auto" style="max-width: 850px;">This is a pawn shop management system that will simplify record keeping, billing, and inventory management. If there is something specific that you need for your pawn shop the software can be modified to suit your needs.</p>
</div>
</div>
</div>
</div>
</div>
<!-- CUSTOM SOFTWARE BOX 5 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Employee Time Tracking</h2>
<p class="mx-auto" style="max-width: 850px;">This software is an easy and useful way to track customers, projects, tasks, and resources over time and create reports from this information.</p>
<!-- CUSTOM SOFTWARE BOX 5 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Employee Time Tracking</h2>
<p class="mx-auto" style="max-width: 850px;">This software is an easy and useful way to track customers, projects, tasks, and resources over time and create reports from this information.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="site_footer"></div>
<div id="site_footer"></div>
</div>
emSystemsWeb/View.Home.html
<div id="site_nav"></div>
<div class="d-flex flex-column min-vh-100">
<div id="site_nav"></div>
<!-- HERO SECTION -->
<div class="container-fluid px-0">
<div class="hero-section bg-dark text-white text-center">
<img src="images\table_with_computers.jpg" alt="Hero Image" class="img-fluid hero-image">
<div class="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper">
<h1 class="display-4">Custom Software, Comprehensive Support</h1>
<!-- HERO SECTION -->
<div class="container-fluid px-0">
<div class="hero-section bg-dark text-white text-center">
<img src="images\table_with_computers.jpg" alt="Hero Image" class="img-fluid hero-image">
<div class="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper">
<h1 class="display-4">Custom Software, Comprehensive Support</h1>
<!-- Constrain only the paragraph width -->
<div class="mx-auto" style="max-width: 540px;">
<p class="lead fs-3 mb-0">Real connections. Reliable support. Software made for you.</p>
</div>
<!-- Constrain only the paragraph width -->
<div class="mx-auto" style="max-width: 540px;">
<p class="lead fs-3 mb-0">Real connections. Reliable support. Software made for you.</p>
</div>
<!-- Button sits outside the max-width block -->
<div class="mt-5">
<button type="button"
id="btn_demo"
class="btn btn-lg rounded-pill fw-semibold text-white shadow px-4 px-sm-5 py-2">
Request a Demo
</button>
<!-- Button sits outside the max-width block -->
<div class="mt-5">
<button type="button"
id="btn_demo"
class="btn btn-lg rounded-pill fw-semibold text-white shadow px-4 px-sm-5 py-2"
onclick="window.location.hash='#FRequestDemo';">
Request a Demo
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--MAIN CONTAINER-->
<div class="container-main">
<!-- LEARN BOXES -->
<div class="learn-boxes">
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-6">
<img src="images\honeycomb-new.png" alt="Logistics Image" class="img-fluid rounded">
</div>
<div class="col-md-6">
<div class="p-3 text-center">
<h2>Integrated Public Safety Software</h2>
<p>EM Systems maintains a full suite of proven integrated systems that can be tailored to fit the specific needs of your organization. Seeking to move from an older outdated, or more expensive solution? Facilitate a smooth transition and don’t lose a thing. Ask us about data conversion and training programs.</p>
<a href="#FPublicSafety" id="publicsafetylearn" class="btn btn-primary btn-black">Learn More</a>
<!--MAIN CONTAINER-->
<div class="container-main">
<!-- LEARN BOXES -->
<div class="learn-boxes">
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-6">
<img src="images\honeycomb-new.png" alt="Logistics Image" class="img-fluid rounded">
</div>
<div class="col-md-6">
<div class="p-3 text-center">
<h2>Integrated Public Safety Software</h2>
<p>EM Systems maintains a full suite of proven integrated systems that can be tailored to fit the specific needs of your organization. Seeking to move from an older outdated, or more expensive solution? Facilitate a smooth transition and don’t lose a thing. Ask us about data conversion and training programs.</p>
<a href="#FPublicSafety" id="publicsafetylearn" class="btn btn-primary btn-black">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded flex-md-row-reverse">
<div class="col-md-6">
<img src="images\bookshelves.jpg" alt="Storage Image" class="img-fluid rounded">
</div>
<div class="col-md-6">
<div class="p-3 text-center">
<h2>Records Management Notification System</h2>
<p>EM Systems has several new records and information management systems which incorporate modern paradigms in the field. Thinking of integrating electronic medical records with public safety systems? We can help. Feel free to contact us any time.</p>
<a href="#FRecordsManagement" id="recordsmanagementlearn" class="btn btn-primary btn-black">Learn More</a>
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded flex-md-row-reverse">
<div class="col-md-6">
<img src="images\bookshelves.jpg" alt="Storage Image" class="img-fluid rounded">
</div>
<div class="col-md-6">
<div class="p-3 text-center">
<h2>Records Management Notification System</h2>
<p>EM Systems has several new records and information management systems which incorporate modern paradigms in the field. Thinking of integrating electronic medical records with public safety systems? We can help. Feel free to contact us any time.</p>
<a href="#FRecordsManagement" id="recordsmanagementlearn" class="btn btn-primary btn-black">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-6">
<img src="images\laptop.jpg" alt="Computer Image" class="img-fluid rounded">
</div>
<div class="col-md-6">
<div class="p-3 text-center">
<h2>Custom Software Development</h2>
<p>EM Systems has great talent when it comes to working with customers to develop software solutions designed and tailored to their specific needs. Over the years we have created hundreds of custom solutions that have worked wonders for our customers.</p>
<a href="#FCustomSoftware" id="customsoftwarelearn" class="btn btn-primary btn-black">Learn More</a>
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-6">
<img src="images\laptop.jpg" alt="Computer Image" class="img-fluid rounded">
</div>
<div class="col-md-6">
<div class="p-3 text-center">
<h2>Custom Software Development</h2>
<p>EM Systems has great talent when it comes to working with customers to develop software solutions designed and tailored to their specific needs. Over the years we have created hundreds of custom solutions that have worked wonders for our customers.</p>
<a href="#FCustomSoftware" id="customsoftwarelearn" class="btn btn-primary btn-black">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="site_footer"></div>
<div id="site_footer"></div>
</div>
emSystemsWeb/View.PublicSafety.html
<div id="site_nav"></div>
<div class="d-flex flex-column min-vh-100">
<div id="site_nav"></div>
<!-- HERO SECTION -->
<div class="container-fluid px-0">
<div class="page-hero-section bg-dark text-white text-center">
<img src="images\computer_code.jpg" alt="Hero Image" class="img-fluid hero-image">
<div class="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper">
<h1 class="display-4">Integrated Public Safety</h1>
<!-- HERO SECTION -->
<div class="container-fluid px-0">
<div class="page-hero-section bg-dark text-white text-center">
<img src="images\computer_code.jpg" alt="Hero Image" class="img-fluid hero-image">
<div class="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper">
<h1 class="display-4">Integrated Public Safety</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--MAIN CONTAINER-->
<div class="container-main">
<div class="learn-boxes py-5">
<!-- PUBLIC SAFETY BOX 1 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Computer Aided Dispatch</h2>
<p class="mx-auto" style="max-width: 850px;">EM Systems’ CAD program is designed for use by an unlimited number of police, fire, and emergency medical
services (EMS) agencies in a single or multi-agency environment. The system provides complaint and incident
mapping, real-time tracking of vehicles, field communications, and alerts to potential hazards at an
address.</p>
</div>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;">
<ul class="text-start">
<li>Real-time Call Taking / Dispatching</li>
<li>Complaint and Incident Mapping</li>
<li>911 Interface</li>
<li>Field Communications</li>
</ul>
<!--MAIN CONTAINER-->
<div class="container-main">
<div class="learn-boxes py-5">
<!-- PUBLIC SAFETY BOX 1 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Computer Aided Dispatch</h2>
<p class="mx-auto" style="max-width: 850px;">EM Systems’ CAD program is designed for use by an unlimited number of police, fire, and emergency medical
services (EMS) agencies in a single or multi-agency environment. The system provides complaint and incident
mapping, real-time tracking of vehicles, field communications, and alerts to potential hazards at an
address.</p>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>Messaging and Bulletin Boards</li>
<li>Alerts and Hazards Notification</li>
<li>Supports Silent Dispatch</li>
<li>Integration with LEMS</li>
</ul>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;">
<ul class="text-start">
<li>Real-time Call Taking / Dispatching</li>
<li>Complaint and Incident Mapping</li>
<li>911 Interface</li>
<li>Field Communications</li>
</ul>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>Messaging and Bulletin Boards</li>
<li>Alerts and Hazards Notification</li>
<li>Supports Silent Dispatch</li>
<li>Integration with LEMS</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PUBLIC SAFETY BOX 2 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Record Management System</h2>
<p class="mx-auto" style="max-width: 850px;">Our Records Management System (RMS) is a powerful menu-driven database system than can be used to track
everything from arrest / booking information to court records (e.g., orders of protection, summons, etc.),
and personnel information (e.g., training, promotions, etc.). The system provides for enhanced patrol,
investigative, and administrative processes and provides a wealth of valuable analysis information. Users
can create reports based on data from any field in the software to help prevent and solve crimes, allocate
resources, and much more.</p>
</div>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul class="text-start">
<li>Master Name including detailed data on persons, addresses, vehicles, etc.</li>
<li>Tracking incident activity
</li>
<li>Search and audit capabilities
</li>
<li>Investigations / case management
</li>
</ul>
<!-- PUBLIC SAFETY BOX 2 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Record Management System</h2>
<p class="mx-auto" style="max-width: 850px;">Our Records Management System (RMS) is a powerful menu-driven database system than can be used to track
everything from arrest / booking information to court records (e.g., orders of protection, summons, etc.),
and personnel information (e.g., training, promotions, etc.). The system provides for enhanced patrol,
investigative, and administrative processes and provides a wealth of valuable analysis information. Users
can create reports based on data from any field in the software to help prevent and solve crimes, allocate
resources, and much more.</p>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>Crime analysis</li>
<li>Personnel information / management
</li>
<li>Narrative with spell check
</li>
<li>Reporting capabilities
</li>
</ul>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul class="text-start">
<li>Master Name including detailed data on persons, addresses, vehicles, etc.</li>
<li>Tracking incident activity
</li>
<li>Search and audit capabilities
</li>
<li>Investigations / case management
</li>
</ul>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>Crime analysis</li>
<li>Personnel information / management
</li>
<li>Narrative with spell check
</li>
<li>Reporting capabilities
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PUBLIC SAFETY BOX 3 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Mobile Data System</h2>
<p class="mx-auto" style="max-width: 850px;">The Mobile Data System (MDS) we created provides multi-agency mobile data communications interoperability.
The system provides mobile users the ability to perform onsite data checks, including plate checks, driver
checks, vehicle data checks, and name checks. The system also provides detailed information on the
complaint, allows the user to view all units and their status, and enables the user to send and receive
messages from other users.</p>
</div>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul class="text-start">
<li>Wireless multi-agency interoperable data communications of real-time dispatch and complaint
information
</li>
<li>Onsite data checks (including name, plate, driver, vehicle, warrants)
</li>
<li>Police reporting module to enter information into RMS from the field
</li>
</ul>
<!-- PUBLIC SAFETY BOX 3 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Mobile Data System</h2>
<p class="mx-auto" style="max-width: 850px;">The Mobile Data System (MDS) we created provides multi-agency mobile data communications interoperability.
The system provides mobile users the ability to perform onsite data checks, including plate checks, driver
checks, vehicle data checks, and name checks. The system also provides detailed information on the
complaint, allows the user to view all units and their status, and enables the user to send and receive
messages from other users.</p>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>View all available units and their status
</li>
<li>Send and receive messages from other units / agencies</li>
<li>Supports AirCard and / or Packet Radio Modem RF Technology</li>
<li>Dispatch link (complaint and status updates)</li>
</ul>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul class="text-start">
<li>Wireless multi-agency interoperable data communications of real-time dispatch and complaint
information
</li>
<li>Onsite data checks (including name, plate, driver, vehicle, warrants)
</li>
<li>Police reporting module to enter information into RMS from the field
</li>
</ul>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>View all available units and their status
</li>
<li>Send and receive messages from other units / agencies</li>
<li>Supports AirCard and / or Packet Radio Modem RF Technology</li>
<li>Dispatch link (complaint and status updates)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PUBLIC SAFETY BOX 4 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Automated Vehicle Location System</h2>
<p class="mx-auto" style="max-width: 850px;">Our AVL System is a real-time automatic vehicle location system used to pinpoint the location of equipped
vehicles and track their movement. The system allows you to visually see the location of units in the field,
enhance dispatch operations, and increase officer safety.</p>
</div>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul class="text-start">
<li>Real-time GPS Vehicle Tracking</li>
<li>Mapping Application for Dispatch and Mobile</li>
</ul>
<!-- PUBLIC SAFETY BOX 4 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Automated Vehicle Location System</h2>
<p class="mx-auto" style="max-width: 850px;">Our AVL System is a real-time automatic vehicle location system used to pinpoint the location of equipped
vehicles and track their movement. The system allows you to visually see the location of units in the field,
enhance dispatch operations, and increase officer safety.</p>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>XML-based Communications</li>
<li>Complaint and Crime Mapping</li>
</ul>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul class="text-start">
<li>Real-time GPS Vehicle Tracking</li>
<li>Mapping Application for Dispatch and Mobile</li>
</ul>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>XML-based Communications</li>
<li>Complaint and Crime Mapping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PUBLIC SAFETY BOX 5 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Jail Management System</h2>
<p class="mx-auto" style="max-width: 850px;">EM Systems’ Jail Management System (JMS) is designed to effectively assist in the management of a
detention
facility of any size. The system can operate independently or as a component of EM Systems’ Law
Enforcement
Management System (LEMS). It can also be integrated with other justice information systems from
third-party
vendors. As with all EM Systems’ software, the JMS can be customized to meet the unique needs of your
agency.</p>
</div>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul class="text-start">
<li>Facilitates booking procedures</li>
<li>Access to historical data</li>
<li>Medical and suicide screening</li>
<li>Release date calculations and processing</li>
</ul>
<!-- PUBLIC SAFETY BOX 5 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3">
<div class="text-center">
<h2>Jail Management System</h2>
<p class="mx-auto" style="max-width: 850px;">EM Systems’ Jail Management System (JMS) is designed to effectively assist in the management of a
detention
facility of any size. The system can operate independently or as a component of EM Systems’ Law
Enforcement
Management System (LEMS). It can also be integrated with other justice information systems from
third-party
vendors. As with all EM Systems’ software, the JMS can be customized to meet the unique needs of your
agency.</p>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>Property and custody management</li>
<li>Powerful search capabilities</li>
<li>Automated reporting</li>
</ul>
<div class="container">
<h3 class="text-center">System Features</h3>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-auto mb-2 border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul class="text-start">
<li>Facilitates booking procedures</li>
<li>Access to historical data</li>
<li>Medical and suicide screening</li>
<li>Release date calculations and processing</li>
</ul>
</div>
<div class="col-sm-6 col-md-auto text-md-start border-top pt-3" style="max-width: 250px;"> <!-- Set max-width and use Bootstrap's sizing -->
<ul>
<li>Property and custody management</li>
<li>Powerful search capabilities</li>
<li>Automated reporting</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="site_footer"></div>
<div id="site_footer"></div>
</div>
emSystemsWeb/View.RecordsManagement.html
<div id="site_nav"></div>
<div class="d-flex flex-column min-vh-100">
<div id="site_nav"></div>
<!-- HERO SECTION -->
<div class="container-fluid px-0">
<div class="page-hero-section bg-dark text-white text-center" id="FRecordsManagement" tabindex="-1">
<img src="images\computer_code.jpg" alt="Hero Image" class="img-fluid hero-image">
<div class="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper">
<h1 class="display-4">Records Management Notification System</h1>
<!-- HERO SECTION -->
<div class="container-fluid px-0">
<div class="page-hero-section bg-dark text-white text-center" id="FRecordsManagement" tabindex="-1">
<img src="images\computer_code.jpg" alt="Hero Image" class="img-fluid hero-image">
<div class="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper">
<h1 class="display-4">Records Management Notification System</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--MAIN CONTAINER-->
<div class="container-main">
<div class="learn-boxes py-5">
<!-- RECORDS MANAGEMENT BOX 1 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Records Retention Notification</h2>
<p class="mx-auto" style="max-width: 850px;">Emergent.MD is an easy-to-use, full-featured, state-of-the-art Electronic Medical Records System. It works
with just about any practice. It interfaces with your existing Practice Management System. And, we’ll tailor
it to fit your unique workflow requirements. It will improve efficiency and save money for your practice.
</p>
<!--MAIN CONTAINER-->
<div class="container-main">
<div class="learn-boxes py-5">
<!-- RECORDS MANAGEMENT BOX 1 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Records Retention Notification</h2>
<p class="mx-auto" style="max-width: 850px;">Emergent.MD is an easy-to-use, full-featured, state-of-the-art Electronic Medical Records System. It works
with just about any practice. It interfaces with your existing Practice Management System. And, we’ll tailor
it to fit your unique workflow requirements. It will improve efficiency and save money for your practice.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- RECORDS MANAGEMENT BOX 2 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Legal Hold Notices</h2>
<p class="mx-auto" style="max-width: 850px;">TeleCare Connex is a completely integrated telemonitoring solution that includes wireless mobile devices
for remote vital sign collection, and a web application for technicians and monitors to setup, enroll, and
actively or passively track patient status and provide health information accordingly. This helps to reduce
hospititalizations, promote good health with its participants and saves money.</p>
<!-- RECORDS MANAGEMENT BOX 2 -->
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Legal Hold Notices</h2>
<p class="mx-auto" style="max-width: 850px;">TeleCare Connex is a completely integrated telemonitoring solution that includes wireless mobile devices
for remote vital sign collection, and a web application for technicians and monitors to setup, enroll, and
actively or passively track patient status and provide health information accordingly. This helps to reduce
hospititalizations, promote good health with its participants and saves money.</p>
</div>
</div>
</div>
</div>
</div>
<!-- RECORDS MANAGEMENT BOX 3 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Freedom of Information Law (FOIL)</h2>
<p class="mx-auto" style="max-width: 850px;">Dictation Notepad is a simple app for dictating and sending notes using an android powered device. It
leverages speech recognition technology to accurately transform speech to text and it allows formatting and
editing of the text using voice commands. The audio is recorded and encoded to a small file size and saved
along with the text. The text (in html format) and audio can be configured to send to variety of destination
protocols (SMTP, FTP/S, HTTP/S) with a user specified host.</p>
<!-- RECORDS MANAGEMENT BOX 3 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12">
<div class="p-3 text-center">
<h2>Freedom of Information Law (FOIL)</h2>
<p class="mx-auto" style="max-width: 850px;">Dictation Notepad is a simple app for dictating and sending notes using an android powered device. It
leverages speech recognition technology to accurately transform speech to text and it allows formatting and
editing of the text using voice commands. The audio is recorded and encoded to a small file size and saved
along with the text. The text (in html format) and audio can be configured to send to variety of destination
protocols (SMTP, FTP/S, HTTP/S) with a user specified host.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="site_footer"></div>
<div id="site_footer"></div>
</div>
emSystemsWeb/View.RequestDemo.dfm
......@@ -3,12 +3,14 @@ object FRequestDemo: TFRequestDemo
Height = 480
CSSLibrary = cssBootstrap
ElementFont = efCSS
OnCreate = WebFormCreate
object lblReqPrefMethod: TWebLabel
Left = 54
Top = 138
Width = 96
Width = 225
Height = 15
Caption = 'lblReqPrefMethod'
Caption = 'Please choose a preferred contact method.'
ElementID = 'lbl_req_pref_method'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
......@@ -19,24 +21,27 @@ object FRequestDemo: TFRequestDemo
Top = 62
Width = 121
Height = 22
ElementClassName = 'form-control'
TabStop = False
ElementID = 'edt_req_name'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
Text = 'edtReqName'
ShowFocus = False
WidthPercent = 100.000000000000000000
end
object WebEdit2: TWebEdit
object edtReqEmail: TWebEdit
Left = 196
Top = 62
Width = 121
Height = 22
TabStop = False
ChildOrder = 1
ElementClassName = 'form-control'
ElementID = 'edt_req_email'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
Text = 'edtReqEmail'
ShowFocus = False
WidthPercent = 100.000000000000000000
end
object edtReqAgency: TWebEdit
......@@ -44,59 +49,82 @@ object FRequestDemo: TFRequestDemo
Top = 100
Width = 121
Height = 22
TabStop = False
ChildOrder = 2
ElementClassName = 'form-control'
ElementID = 'edt_req_agency'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
Text = 'edtReqAgency'
ShowFocus = False
WidthPercent = 100.000000000000000000
end
object WebEdit4: TWebEdit
object edtReqPhoneNumber: TWebEdit
Left = 50
Top = 100
Width = 121
Height = 22
TabStop = False
ChildOrder = 3
EditType = weNumeric
ElementClassName = 'form-control'
ElementID = 'edt_req_phone_number'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
Text = 'edtReqPhone'
ShowFocus = False
WidthPercent = 100.000000000000000000
end
object req: TWebRadioButton
object radReqPhone: TWebRadioButton
Left = 54
Top = 164
Width = 113
Width = 117
Height = 22
Caption = 'req'
Caption = 'Phone'
Checked = False
ChildOrder = 5
Color = clNone
ElementClassName = 'custom-control custom-radio'
ElementButtonClassName = 'custom-control-input'
ElementLabelClassName = 'custom-control-label'
ElementID = 'rad_req_phone'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
ShowFocus = False
WidthPercent = 100.000000000000000000
end
object WebRadioButton2: TWebRadioButton
object radReqEmail: TWebRadioButton
Left = 196
Top = 164
Width = 113
Width = 121
Height = 22
Caption = 'WebRadioButton2'
Caption = 'Email'
Checked = False
ChildOrder = 6
Color = clNone
ElementClassName = 'custom-control custom-radio'
ElementButtonClassName = 'custom-control-input'
ElementLabelClassName = 'custom-control-label'
ElementID = 'rad_req_email'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
ShowFocus = False
WidthPercent = 100.000000000000000000
end
object btnReqSendRequest: TWebButton
Left = 54
Top = 212
Width = 96
Height = 25
Caption = 'Send Request'
ChildOrder = 7
ElementID = 'btn_req_send_request'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
TabStop = False
WidthPercent = 100.000000000000000000
OnClick = btnReqSendRequestClick
end
object xdwcRequestDemo: TXDataWebClient
Connection = DMConnection.ApiConnection
OnError = xdwcRequestDemoError
Left = 270
Top = 260
end
end
emSystemsWeb/View.RequestDemo.html
......@@ -2,42 +2,44 @@
<div id="site_nav"></div>
<!-- REQUEST DEMO SECTION -->
<main class="container pt-5 mt-5 flex-grow-1">
<div class="container pt-5 mt-5 flex-grow-1">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-7">
<div class="card shadow-sm border-0">
<div class="card-body p-4 p-md-5">
<h2 class="mb-2 text-center">Request a Demo</h2>
<p class="text-muted text-center mb-4">
Tell us a little about you, and well reach out to schedule a demo.
Please fill in the information, and we will reach out to schedule a demo.
</p>
<form>
<form id="frm_request_demo" novalidate>
<div class="row g-3">
<div class="col-md-6">
<label for="edt_req_name" class="form-label">Name*</label>
<input type="text" class="form-control" id="edt_req_name" required>
<div class="col-12">
<label for="edt_req_name" class="form-label mb-1">Name*</label>
<input type="text" class="form-control" id="edt_req_name">
<div id="fb_req_name" class="invalid-feedback">Please enter your name.</div>
</div>
<div class="col-md-6">
<label for="edt_req_email" class="form-label">Email*</label>
<input type="email" class="form-control" id="edt_req_email" required>
<div class="col-12 col-md-7">
<label for="edt_req_email" class="form-label mb-1">Email</label>
<input type="email" class="form-control" id="edt_req_email">
<div id="fb_req_email" class="invalid-feedback">Please enter a valid email address.</div>
</div>
<div class="col-md-6">
<label for="edt_req_phone_number" class="form-label">Phone Number</label>
<div class="col-12 col-md-5">
<label for="edt_req_phone_number" class="form-label mb-1">Phone Number</label>
<input type="tel" class="form-control" id="edt_req_phone_number">
<div id="fb_req_phone" class="invalid-feedback">Please enter a phone number.</div>
</div>
<div class="col-md-6">
<label for="edt_req_agency" class="form-label">Agency</label>
<div class="col-12 col-md-6">
<label for="edt_req_agency" class="form-label mb-1">Agency</label>
<input type="text" class="form-control" id="edt_req_agency">
</div>
<div class="col-12 mt-2">
<div id="lbl_req_pref_method" class="form-label mb-2">
Preferred Contact Method
</div>
<div class="col-12">
<div id="lbl_req_pref_method" class="form-label mb-2">Preferred Contact Method*</div>
<div class="d-flex flex-column flex-sm-row gap-2 gap-sm-4">
<div class="form-check">
......@@ -50,25 +52,28 @@
<label class="form-check-label" for="rad_req_email">Email</label>
</div>
</div>
<div id="fb_req_pref" class="text-danger small mt-1 d-none">
Please choose a preferred contact method.
</div>
</div>
<div class="col-12 mt-3">
<button type="button" class="btn btn-primary w-100 w-sm-auto px-4" id="btn_req_send_request">
<div class="col-12 mt-4">
<button type="button" class="btn btn-primary w-100 d-md-inline-block w-md-auto px-4" id="btn_req_send_request">
Send Request
</button>
</div>
<div class="col-12">
<div id="card_status_message" class="alert mt-3 d-none mb-0" role="alert"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
</div>
<div id="site_footer" class="mt-auto"></div>
</div>
......@@ -80,20 +85,28 @@
</div>
</div>
<div class="modal fade" id="request_demo_notification_modal" tabindex="-1" aria-labelledby="request_demo_notification_modal_label" aria-hidden="true">
<div class="modal fade" id="contact_notification_modal" tabindex="-1" aria-labelledby="contact_notification_modal_label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content shadow-lg">
<div class="modal-header">
<h5 class="modal-title" id="request_demo_notification_modal_label">Info</h5>
<h5 class="modal-title" id="contact_notification_modal_label">Demo Requested Successfully</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body fs-6 fw-bold" id="request_demo_notification_modal_body">
<div class="modal-body fs-6 fw-bold" id="contact_notification_modal_body">
Please contact EMSystems to solve the issue.
</div>
<div class="modal-footer justify-content-center">
<button type="button" id="btn_modal_close" class="btn btn-primary">Close</button>
<a href="#FHome"
id="btn_modal_close"
class="btn btn-primary"
data-bs-dismiss="modal"
onclick="window.location.hash='#FHome';">
Close
</a>
</div>
</div>
</div>
</div>
emSystemsWeb/View.RequestDemo.pas
......@@ -4,21 +4,32 @@ interface
uses
System.SysUtils, System.Classes, JS, Web, WEBLib.Graphics, WEBLib.Controls,
WEBLib.Forms, WEBLib.Dialogs, Vcl.StdCtrls, WEBLib.StdCtrls, Vcl.Controls;
WEBLib.Forms, WEBLib.Dialogs, Vcl.StdCtrls, WEBLib.StdCtrls, Vcl.Controls,
XData.Web.Client, ConnectionModule, Utils, WEBLib.RegularExpressions;
type
TFRequestDemo = class(TWebForm)
edtReqName: TWebEdit;
WebEdit2: TWebEdit;
edtReqEmail: TWebEdit;
edtReqAgency: TWebEdit;
WebEdit4: TWebEdit;
edtReqPhoneNumber: TWebEdit;
lblReqPrefMethod: TWebLabel;
req: TWebRadioButton;
WebRadioButton2: TWebRadioButton;
radReqPhone: TWebRadioButton;
radReqEmail: TWebRadioButton;
btnReqSendRequest: TWebButton;
xdwcRequestDemo: TXDataWebClient;
procedure btnReqSendRequestClick(Sender: TObject);
procedure WebFormCreate(Sender: TObject);
procedure xdwcRequestDemoError(Error: TXDataClientError);
private
{ Private declarations }
public
{ Public declarations }
function IsEmailValid(const email: string): Boolean;
function PreferredMethod: string;
procedure NavScrollSizing;
procedure ClearFieldErrors;
procedure SetInvalid(const inputId: string);
procedure ShowFeedback(const feedbackId: string);
function ValidateRequest: Boolean;
procedure SendRequest;
end;
var
......@@ -28,7 +39,193 @@ implementation
{$R *.dfm}
uses
Site.Navbar,
Site.Footer;
procedure TFRequestDemo.WebFormCreate(Sender: TObject);
begin
Application.ThemeColor := clTMSWEB;
InjectNavbar;
InjectFooter;
SetFooterVersion('ver - ' + TDMConnection.clientVersion);
NavScrollSizing;
end;
procedure TFRequestDemo.xdwcRequestDemoError(Error: TXDataClientError);
begin
Utils.HideSpinner('spinner');
ShowNotificationModal('Error when attempting to send: ' + Error.ErrorMessage);
end;
procedure TFRequestDemo.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;
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;
function TFRequestDemo.IsEmailValid(const email: string): Boolean;
const
pattern = '^[^\s@]+@[^\s@]+\.[^\s@]+$';
begin
Result := TRegEx.IsMatch(email.Trim, pattern);
end;
function TFRequestDemo.PreferredMethod: string;
begin
if radReqPhone.Checked then
Exit('phone');
if radReqEmail.Checked then
Exit('email');
Result := '';
end;
procedure TFRequestDemo.ShowFeedback(const feedbackId: string);
var
el: TJSHTMLElement;
begin
el := TJSHTMLElement(document.getElementById(feedbackId));
if Assigned(el) then
el.classList.remove('d-none');
end;
procedure TFRequestDemo.SetInvalid(const inputId: string);
var
inputEl: TJSHTMLElement;
begin
inputEl := TJSHTMLElement(document.getElementById(inputId));
if Assigned(inputEl) then
inputEl.classList.add('is-invalid');
end;
procedure TFRequestDemo.ClearFieldErrors;
var
inputEl: TJSHTMLElement;
prefEl: TJSHTMLElement;
begin
inputEl := TJSHTMLElement(document.getElementById('edt_req_name'));
if Assigned(inputEl) then inputEl.classList.remove('is-invalid');
inputEl := TJSHTMLElement(document.getElementById('edt_req_email'));
if Assigned(inputEl) then inputEl.classList.remove('is-invalid');
inputEl := TJSHTMLElement(document.getElementById('edt_req_phone_number'));
if Assigned(inputEl) then inputEl.classList.remove('is-invalid');
prefEl := TJSHTMLElement(document.getElementById('fb_req_pref'));
if Assigned(prefEl) then
prefEl.classList.add('d-none');
end;
function TFRequestDemo.ValidateRequest: Boolean;
var
prefMissing: Boolean;
needsEmail: Boolean;
needsPhone: Boolean;
emailHasText: Boolean;
begin
ClearFieldErrors;
if edtReqName.Text.Trim = '' then
begin
SetInvalid('edt_req_name');
Exit(False);
end;
prefMissing := not (radReqPhone.Checked or radReqEmail.Checked);
if prefMissing then
begin
ShowFeedback('fb_req_pref');
Exit(False);
end;
needsEmail := radReqEmail.Checked;
needsPhone := radReqPhone.Checked;
emailHasText := edtReqEmail.Text.Trim <> '';
if (needsEmail or emailHasText) and (not IsEmailValid(edtReqEmail.Text)) then
begin
SetInvalid('edt_req_email');
Exit(False);
end;
if needsPhone and (edtReqPhoneNumber.Text.Trim = '') then
begin
SetInvalid('edt_req_phone_number');
Exit(False);
end;
Result := True;
end;
procedure TFRequestDemo.btnReqSendRequestClick(Sender: TObject);
begin
if not ValidateRequest then
Exit;
Utils.ShowSpinner('spinner');
if not DMConnection.ApiConnection.Connected then
begin
DMConnection.ApiConnection.Open(
procedure
begin
SendRequest;
end);
Exit;
end;
SendRequest;
end;
procedure TFRequestDemo.SendRequest;
var
bodyText: string;
begin
bodyText :=
'Demo request details:' + sLineBreak +
'Name: ' + edtReqName.Text + sLineBreak +
'Email: ' + edtReqEmail.Text + sLineBreak +
'Phone: ' + edtReqPhoneNumber.Text + sLineBreak +
'Agency: ' + edtReqAgency.Text + sLineBreak +
'Preferred contact: ' + PreferredMethod;
xdwcRequestDemo.RawInvoke('IApiService.SendEmail',
[edtReqName.Text, edtReqEmail.Text, 'Demo Request', bodyText],
procedure(response: TXDataClientResponse)
begin
Utils.HideSpinner('spinner');
ClearFieldErrors;
edtReqName.Text := '';
edtReqEmail.Text := '';
edtReqPhoneNumber.Text := '';
edtReqAgency.Text := '';
radReqPhone.Checked := False;
radReqEmail.Checked := False;
ShowNotificationModal('Your demo request has been sent successfully. We will reach out shortly.');
end);
end;
initialization
RegisterClass(TFRequestDemo);
end.
\ No newline at end of file
end.
emSystemsWeb/css/App.css
......@@ -17,93 +17,103 @@ body {
/* NAVBAR */
.em-navbar-wrap .navbar {
transition: padding-top 0.3s ease, padding-bottom 0.3s ease; /* Smooth transitions for padding */
position: fixed;
width: 100%;
z-index: 1030;
transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
position: fixed;
width: 100%;
z-index: 1030;
}
/* Logo sizing (default + smooth transition) */
.em-brand img {
transition: max-height 0.3s ease;
max-height: 50px;
height: auto;
width: auto;
margin-top: 8px;
}
/* Smaller logo when scrolled */
.em-brand img.scrolled-logo {
max-height: 40px;
}
/* Transition for navbar logo size */
.em-brand img {
transition: max-height 0.3s ease; /* Smooth transition for logo size */
max-height: 80px; /* Set a max-height for the logo */
margin-top: 8px;
/* Smaller logo on phones */
@media (max-width: 575.98px) {
.em-brand img {
max-height: 40px;
margin-top: 6px;
}
}
/* 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;
letter-spacing: 0.085em;
font-size: 1rem;
color: #FFFFFF;
transition: color 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.085em;
font-size: 1rem;
color: #FFFFFF;
}
/* Hover and active state for nav links */
.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;
color: #999999;
box-shadow: inset 0 -4px 0 0 #2c66a0;
}
/* navbar changes when scrolled */
.em-navbar-wrap .navbar.scrolled {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Smaller logo when scrolled */
.em-brand img.scrolled-logo {
max-height: 40px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Adjust padding for nav links when scrolled */
.navbar.scrolled .nav-link {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
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 */
background-color: #212529;
border: none;
}
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item {
color: #f8f9fa;
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;
background-color: #495057;
color: #ffffff;
}
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:active {
background-color: #2c66a0; /* Highlights color for active state */
color: #ffffff;
background-color: #2c66a0;
color: #ffffff;
}
/* navbar hamburger menu */
.navbar-toggler {
outline: none !important;
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
background-color: #2c66a0;
}
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.active {
outline: none;
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
background-color: #999999;
outline: none !important;
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
background-color: #2c66a0;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler.active {
outline: none;
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
background-color: #999999;
}
.navbar-toggler:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; /* "Pressed in" look */
background-color: #999999;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset;
background-color: #999999;
}
/****************************************************************************************/
/* HERO IMAGES */
......@@ -111,7 +121,7 @@ body {
position: relative;
height: 50vh; /* Control the height of the hero section */
overflow: hidden;
margin-top: 45px;
margin-top: 0px;
}
.hero-image {
width: 100%;
......@@ -212,16 +222,37 @@ body {
margin-bottom: 1rem;
}
/****************************************************************************************/
/* btn-primary */
.btn-primary {
background-color: #000;
border-color: #000;
color: #fff;
width: 175px;
background-color: #212529;
border-color: #000;
color: #fff;
width: 175px;
}
.btn-primary:hover {
background-color: #333;
border-color: #333;
background-color: #333;
border-color: #333;
color: #fff;
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
background-color: #333;
border-color: #333;
color: #fff;
}
.btn-primary:focus,
.btn-primary:focus-visible {
box-shadow: 0 0 0 .25rem rgba(33, 37, 41, .35);
color: #fff;
}
/****************************************************************************************/
......@@ -284,4 +315,29 @@ footer ul li a:focus {
max-width: 400px;
}
/****************************************************************************************/
/* VALIDATION */
.was-validated .form-control:valid,
.was-validated .form-select:valid {
border-color: var(--bs-border-color) !important;
background-image: none !important;
padding-right: .75rem !important;
}
.was-validated .form-check-input:valid {
border-color: var(--bs-border-color) !important;
}
.was-validated .form-check-input:valid:checked {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
}
.was-validated .form-check-input:valid ~ .form-check-label {
color: inherit !important;
}
emSystemsWeb/emSystemsWebsite.dproj
......@@ -145,44 +145,56 @@
<DCCReference Include="Site.Footer.pas"/>
<DCCReference Include="Site.Navbar.pas"/>
<None Include="css\App.css"/>
<None Include="images\job-gcdf1cf1d3_1920-1536x925.jpg">
<None Include="index.html"/>
<None Include="css\spinner.css"/>
<RcItem Include="images\bookshelves.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_1</ResourceId>
</None>
<None Include="images\table_with_computers.jpg">
</RcItem>
<RcItem Include="images\computer_code.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_2</ResourceId>
</None>
<None Include="images\EM_Logo2_Copy5-1024x173.png">
</RcItem>
<RcItem Include="images\EM_Logo2_Copy5-1024x173.png">
<ResourceType>RCDATA</ResourceType>
<ResourceId>PngImage_1</ResourceId>
</None>
<None Include="images\EM_Logo_White.png">
</RcItem>
<RcItem Include="images\EM_Logo_2c66a0.png">
<ResourceType>RCDATA</ResourceType>
<ResourceId>PngImage_2</ResourceId>
</None>
<None Include="images\EM_Logo_#2c66a0.png">
</RcItem>
<RcItem Include="images\EM_Logo_Black_Purple.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_3</ResourceId>
</RcItem>
<RcItem Include="images\EM_Logo_White.png">
<ResourceType>RCDATA</ResourceType>
<ResourceId>PngImage_3</ResourceId>
</None>
<None Include="images\EM_Logo_2c66a0.png">
</RcItem>
<RcItem Include="images\honeycomb-new.png">
<ResourceType>RCDATA</ResourceType>
<ResourceId>PngImage_4</ResourceId>
</None>
<None Include="images\pexels-luis-gomes-546819.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_3</ResourceId>
</None>
<None Include="images\computer_code.jpg">
</RcItem>
<RcItem Include="images\honeycomb.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_4</ResourceId>
</None>
<None Include="images\niagara.jpg">
</RcItem>
<RcItem Include="images\laptop.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_5</ResourceId>
</RcItem>
<RcItem Include="images\LogoAddress2.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_6</ResourceId>
</None>
<None Include="index.html"/>
<None Include="css\spinner.css"/>
</RcItem>
<RcItem Include="images\niagara.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_7</ResourceId>
</RcItem>
<RcItem Include="images\table_with_computers.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_8</ResourceId>
</RcItem>
<BuildConfiguration Include="Base">
<Key>Base</Key>
</BuildConfiguration>
......@@ -267,19 +279,19 @@
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\EM_Logo_#2c66a0.png" Configuration="Release" Class="ProjectFile">
<DeployFile LocalName="images\EM_Logo_2c66a0.png" Configuration="Debug" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\EM_Logo_2c66a0.png" Configuration="Debug" Class="ProjectFile">
<DeployFile LocalName="images\EM_Logo_2c66a0.png" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\EM_Logo_2c66a0.png" Configuration="Release" Class="ProjectFile">
<DeployFile LocalName="images\EM_Logo_Black_Purple.jpg" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
......@@ -297,6 +309,18 @@
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\LogoAddress2.jpg" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\bookshelves.jpg" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\computer_code.jpg" Configuration="Debug" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
......@@ -309,67 +333,67 @@
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\job-gcdf1cf1d3_1920-1536x925.jpg" Configuration="Debug" Class="ProjectFile">
<DeployFile LocalName="images\honeycomb-new.png" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\job-gcdf1cf1d3_1920-1536x925.jpg" Configuration="Release" Class="ProjectFile">
<DeployFile LocalName="images\honeycomb.jpg" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\niagara.jpg" Configuration="Debug" Class="ProjectFile">
<DeployFile LocalName="images\job-gcdf1cf1d3_1920-1536x925.jpg" Configuration="Debug" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\niagara.jpg" Configuration="Release" Class="ProjectFile">
<DeployFile LocalName="images\laptop.jpg" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\pexels-luis-gomes-546819.jpg" Configuration="Debug" Class="ProjectFile">
<DeployFile LocalName="images\niagara.jpg" Configuration="Debug" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\pexels-luis-gomes-546819.jpg" Configuration="Release" Class="ProjectFile">
<DeployFile LocalName="images\niagara.jpg" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\table_with_computers.jpg" Configuration="Debug" Class="ProjectFile">
<DeployFile LocalName="images\pexels-luis-gomes-546819.jpg" Configuration="Debug" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="images\table_with_computers.jpg" Configuration="Release" Class="ProjectFile">
<DeployFile LocalName="images\table_with_computers.jpg" Configuration="Debug" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="index.html" Configuration="Debug" Class="ProjectFile">
<DeployFile LocalName="images\table_with_computers.jpg" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="index.html" Configuration="Release" Class="ProjectFile">
<DeployFile LocalName="index.html" Configuration="Debug" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
</Platform>
</DeployFile>
<DeployFile LocalName="test.html" Configuration="Release" Class="ProjectFile">
<DeployFile LocalName="index.html" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32">
<RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite>
......
emSystemsWebServer/bin/emSystemsWebServer.ini
[Settings]
memoLogLevel=3
fileLogLevel=4
LogFileNum=35
webClientVersion=1.0.0
LogFileNum=42
webClientVersion=1.0.1
[SMTP]
Host=mail.em-sys.net
......
emSystemsWebServer/source/Api.ServiceImpl.pas
......@@ -61,17 +61,24 @@ begin
HtmlBody := Format(
'<html>' +
'<body style="font-family: Arial, sans-serif; font-size: 14px;">' +
'<h2 style="color: #2E86C1;">New Contact Form Message from EM Systems Website</h2>' +
'<hr>' +
'<p><strong><u>Submitted On:</u></strong> %s</p>' +
'<p><strong><u>From:</u></strong> %s &lt;%s&gt;</p>' +
'<p><strong><u>Subject:</u></strong> %s</p>' +
'<hr>' +
'<p style="margin-top: 20px;"><strong>Message:</strong></p>' +
'<p>%s</p>' +
'</body></html>',
[FormatDateTime('yyyy-mm-dd hh:nn AM/PM', Now), Name, Email, Subject, Body.Replace(sLineBreak, '<br>')]
'<body style="font-family: Arial, sans-serif; font-size: 14px; color:#222;">' +
'<h2 style="color: #2E86C1; margin: 0 0 12px 0;">New "%s" message from EM Systems Website</h2>' +
'<p style="margin: 0 0 6px 0;"><strong>Submitted On:</strong> %s</p>' +
'<p style="margin: 0 0 6px 0;"><strong>From:</strong> %s &lt;%s&gt;</p>' +
'<p style="margin: 0 0 14px 0;"><strong>Subject:</strong> %s</p>' +
'<hr style="border:0; border-top:1px solid #ddd; margin: 14px 0;">' +
'<p style="margin: 0 0 8px 0;"><strong>Message:</strong></p>' +
'<div style="line-height: 1.4;">%s</div>' +
'</body>' +
'</html>',
[
Subject,
FormatDateTime('yyyy-mm-dd hh:nn AM/PM', Now),
Name,
Email,
Subject,
Body.Replace(#13#10, '<br>').Replace(#10, '<br>').Replace(#13, '<br>')
]
);
Message.Body.Text := HtmlBody;
......
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