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 689 additions and 354 deletions
emSystemsWeb/ConnectionModule.pas
...@@ -22,7 +22,7 @@ type ...@@ -22,7 +22,7 @@ type
procedure LoadConfig(loadedProc: TProc<Boolean>); procedure LoadConfig(loadedProc: TProc<Boolean>);
public public
const clientVersion = '1.0.0'; const clientVersion = '1.0.1';
procedure InitApp(readyProc: TProc); procedure InitApp(readyProc: TProc);
procedure SetClientConfig(callback: TVersionCheckCallback); procedure SetClientConfig(callback: TVersionCheckCallback);
end; end;
......
emSystemsWeb/EMSystemsWebsite.dpr
program emSystemsWebsite; program emSystemsWebsite;
{$R *.dres} {$R *.dres}
uses uses
......
emSystemsWeb/Site.Navbar.pas
...@@ -14,15 +14,15 @@ const ...@@ -14,15 +14,15 @@ const
'<div class="em-navbar-wrap">' + '<div class="em-navbar-wrap">' +
' <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow py-1 py-lg-2">' + ' <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow py-1 py-lg-2">' +
' <div class="container-fluid container-main">' + ' <div class="container-fluid container-main">' +
' <a class="navbar-brand em-brand" href="#FHome">' + ' <a class="navbar-brand em-brand me-auto" href="#FHome">' +
' <img src="images/EM_Logo_2c66a0.png" alt="EM_Logo" style="max-height: 50px;">' + ' <img src="images/EM_Logo_2c66a0.png" alt="EM_Logo"">' +
' </a>' + ' </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">' + ' 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">' +
' <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="#FHome">Home</a></li>' +
' <li class="nav-item"><a class="nav-link" href="#FAboutUs">About Us</a></li>' + ' <li class="nav-item"><a class="nav-link" href="#FAboutUs">About Us</a></li>' +
' <li class="nav-item dropdown">' + ' <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="container-fluid px-0">
<div class="hero-section-aboutus bg-dark text-white text-center"> <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"> <img src="images/niagara.jpg" alt="Our Story Image" class="img-fluid hero-image-aboutus">
<div class="hero-overlay-aboutus"> <div class="hero-overlay-aboutus">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-8 col-lg-6"> <!-- Adjust the column sizes as needed --> <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"> <div class="text-wrapper-aboutus mx-auto p-3 p-md-5 rounded shadow">
<h2>Our Story</h2> <h2>Our Story</h2>
<p class="fs-6"> <p class="fs-6">
EM Systems was established in the early 1990s as a software development group. Over the last 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 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 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 organizations across New York State rely on EM Systems applications to meet the needs of their
communities and communities and
customers. EM Systems prides itself in its ability to create custom software solutions to meet the customers. EM Systems prides itself in its ability to create custom software solutions to meet the
specific needs of specific needs of
our customers. Our goal is to create software which facilitates and enhances current business practices our customers. Our goal is to create software which facilitates and enhances current business practices
in a in a
reliable and efficient manner. Not only do we offer expert software development knowledge and skills but 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 we are also experienced in understanding and improving efficiency in current business processes and
practice. practice.
</p> </p>
</div>
</div>
</div> </div>
</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 ...@@ -9,7 +9,7 @@ uses
XData.Web.Connection, XData.Web.Client, Data.DB, Utils, XData.Web.Connection, XData.Web.Client, Data.DB, Utils,
XData.Web.JsonDataset, XData.Web.Dataset, Vcl.Grids, XData.Web.JsonDataset, XData.Web.Dataset, Vcl.Grids,
WEBLib.DBCtrls, WEBLib.DB, WEBLib.Grids, WEBLib.CDS, WEBLib.REST, 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; WEBLib.Toast, XData.Web.Request, XData.Web.Response;
type 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 --> <!-- HERO SECTION -->
<div class="container-fluid px-0"> <div class="container-fluid px-0">
<div class="page-hero-section bg-dark text-white text-center"> <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"> <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="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper"> <div class="text-wrapper">
<h1 class="display-4">Custom Software</h1> <h1 class="display-4">Custom Software</h1>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
<!--MAIN CONTAINER--> <!--MAIN CONTAINER-->
<div class="container-main"> <div class="container-main">
<div class="learn-boxes py-5"> <div class="learn-boxes py-5">
<!-- CUSTOM SOFTWARE BOX 1 --> <!-- CUSTOM SOFTWARE BOX 1 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded"> <div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12"> <div class="col-md-12">
<div class="p-3 text-center"> <div class="p-3 text-center">
<h2>AutoPark</h2> <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> <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> <div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<!-- CUSTOM SOFTWARE BOX 2 --> <div class="col-md-12">
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded"> <div class="p-3 text-center">
<div class="col-md-12"> <h2>Document Scanning Tools</h2>
<div class="p-3 text-center"> <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>
<h2>Document Scanning Tools</h2> </div>
<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> <!-- CUSTOM SOFTWARE BOX 3 -->
</div> <div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<!-- CUSTOM SOFTWARE BOX 3 --> <div class="col-md-12">
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded"> <div class="p-3 text-center">
<div class="col-md-12"> <h2>Document Management System</h2>
<div class="p-3 text-center"> <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>
<h2>Document Management System</h2> </div>
<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> <!-- CUSTOM SOFTWARE BOX 4 -->
</div> <div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<!-- CUSTOM SOFTWARE BOX 4 --> <div class="col-md-12">
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded"> <div class="p-3 text-center">
<div class="col-md-12"> <h2>Pawn Shop Pro</h2>
<div class="p-3 text-center"> <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>
<h2>Pawn Shop Pro</h2> </div>
<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> <!-- CUSTOM SOFTWARE BOX 5 -->
</div> <div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<!-- CUSTOM SOFTWARE BOX 5 --> <div class="col-md-12">
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded"> <div class="p-3 text-center">
<div class="col-md-12"> <h2>Employee Time Tracking</h2>
<div class="p-3 text-center"> <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>
<h2>Employee Time Tracking</h2> </div>
<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>
</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 --> <!-- HERO SECTION -->
<div class="container-fluid px-0"> <div class="container-fluid px-0">
<div class="hero-section bg-dark text-white text-center"> <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"> <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="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper"> <div class="text-wrapper">
<h1 class="display-4">Custom Software, Comprehensive Support</h1> <h1 class="display-4">Custom Software, Comprehensive Support</h1>
<!-- Constrain only the paragraph width --> <!-- Constrain only the paragraph width -->
<div class="mx-auto" style="max-width: 540px;"> <div class="mx-auto" style="max-width: 540px;">
<p class="lead fs-3 mb-0">Real connections. Reliable support. Software made for you.</p> <p class="lead fs-3 mb-0">Real connections. Reliable support. Software made for you.</p>
</div> </div>
<!-- Button sits outside the max-width block --> <!-- Button sits outside the max-width block -->
<div class="mt-5"> <div class="mt-5">
<button type="button" <button type="button"
id="btn_demo" id="btn_demo"
class="btn btn-lg rounded-pill fw-semibold text-white shadow px-4 px-sm-5 py-2"> class="btn btn-lg rounded-pill fw-semibold text-white shadow px-4 px-sm-5 py-2"
Request a Demo onclick="window.location.hash='#FRequestDemo';">
</button> Request a Demo
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<!--MAIN CONTAINER--> <!--MAIN CONTAINER-->
<div class="container-main"> <div class="container-main">
<!-- LEARN BOXES --> <!-- LEARN BOXES -->
<div class="learn-boxes"> <div class="learn-boxes">
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded"> <div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-6"> <div class="col-md-6">
<img src="images\honeycomb-new.png" alt="Logistics Image" class="img-fluid rounded"> <img src="images\honeycomb-new.png" alt="Logistics Image" class="img-fluid rounded">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="p-3 text-center"> <div class="p-3 text-center">
<h2>Integrated Public Safety Software</h2> <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> <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> <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> <div class="col-md-6">
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded flex-md-row-reverse"> <img src="images\bookshelves.jpg" alt="Storage Image" class="img-fluid rounded">
<div class="col-md-6"> </div>
<img src="images\bookshelves.jpg" alt="Storage Image" class="img-fluid rounded"> <div class="col-md-6">
</div> <div class="p-3 text-center">
<div class="col-md-6"> <h2>Records Management Notification System</h2>
<div class="p-3 text-center"> <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>
<h2>Records Management Notification System</h2> <a href="#FRecordsManagement" id="recordsmanagementlearn" class="btn btn-primary btn-black">Learn More</a>
<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> </div>
<a href="#FRecordsManagement" id="recordsmanagementlearn" class="btn btn-primary btn-black">Learn More</a> </div>
</div> </div>
</div> <div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
</div> <div class="col-md-6">
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded"> <img src="images\laptop.jpg" alt="Computer Image" class="img-fluid rounded">
<div class="col-md-6"> </div>
<img src="images\laptop.jpg" alt="Computer Image" class="img-fluid rounded"> <div class="col-md-6">
</div> <div class="p-3 text-center">
<div class="col-md-6"> <h2>Custom Software Development</h2>
<div class="p-3 text-center"> <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>
<h2>Custom Software Development</h2> <a href="#FCustomSoftware" id="customsoftwarelearn" class="btn btn-primary btn-black">Learn More</a>
<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> </div>
<a href="#FCustomSoftware" id="customsoftwarelearn" class="btn btn-primary btn-black">Learn More</a> </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 --> <!-- HERO SECTION -->
<div class="container-fluid px-0"> <div class="container-fluid px-0">
<div class="page-hero-section bg-dark text-white text-center" id="FRecordsManagement" tabindex="-1"> <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"> <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="hero-overlay d-flex justify-content-center align-items-center">
<div class="text-wrapper"> <div class="text-wrapper">
<h1 class="display-4">Records Management Notification System</h1> <h1 class="display-4">Records Management Notification System</h1>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
<!--MAIN CONTAINER--> <!--MAIN CONTAINER-->
<div class="container-main"> <div class="container-main">
<div class="learn-boxes py-5"> <div class="learn-boxes py-5">
<!-- RECORDS MANAGEMENT BOX 1 --> <!-- RECORDS MANAGEMENT BOX 1 -->
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded"> <div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<div class="col-md-12"> <div class="col-md-12">
<div class="p-3 text-center"> <div class="p-3 text-center">
<h2>Records Retention Notification</h2> <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 <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 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. it to fit your unique workflow requirements. It will improve efficiency and save money for your practice.
</p> </p>
</div>
</div>
</div> </div>
</div> <!-- RECORDS MANAGEMENT BOX 2 -->
</div> <div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded">
<!-- RECORDS MANAGEMENT BOX 2 --> <div class="col-md-12">
<div class="row mb-4 g-4 align-items-center bg-gray shadow-sm rounded"> <div class="p-3 text-center">
<div class="col-md-12"> <h2>Legal Hold Notices</h2>
<div class="p-3 text-center"> <p class="mx-auto" style="max-width: 850px;">TeleCare Connex is a completely integrated telemonitoring solution that includes wireless mobile devices
<h2>Legal Hold Notices</h2> for remote vital sign collection, and a web application for technicians and monitors to setup, enroll, and
<p class="mx-auto" style="max-width: 850px;">TeleCare Connex is a completely integrated telemonitoring solution that includes wireless mobile devices actively or passively track patient status and provide health information accordingly. This helps to reduce
for remote vital sign collection, and a web application for technicians and monitors to setup, enroll, and hospititalizations, promote good health with its participants and saves money.</p>
actively or passively track patient status and provide health information accordingly. This helps to reduce </div>
hospititalizations, promote good health with its participants and saves money.</p> </div>
</div> </div>
</div> <!-- RECORDS MANAGEMENT BOX 3 -->
</div> <div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded">
<!-- RECORDS MANAGEMENT BOX 3 --> <div class="col-md-12">
<div class="row mb-4 g-4 align-items-center bg-white shadow-sm rounded"> <div class="p-3 text-center">
<div class="col-md-12"> <h2>Freedom of Information Law (FOIL)</h2>
<div class="p-3 text-center"> <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
<h2>Freedom of Information Law (FOIL)</h2> leverages speech recognition technology to accurately transform speech to text and it allows formatting and
<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 editing of the text using voice commands. The audio is recorded and encoded to a small file size and saved
leverages speech recognition technology to accurately transform speech to text and it allows formatting and along with the text. The text (in html format) and audio can be configured to send to variety of destination
editing of the text using voice commands. The audio is recorded and encoded to a small file size and saved protocols (SMTP, FTP/S, HTTP/S) with a user specified host.</p>
along with the text. The text (in html format) and audio can be configured to send to variety of destination </div>
protocols (SMTP, FTP/S, HTTP/S) with a user specified host.</p> </div>
</div> </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 ...@@ -3,12 +3,14 @@ object FRequestDemo: TFRequestDemo
Height = 480 Height = 480
CSSLibrary = cssBootstrap CSSLibrary = cssBootstrap
ElementFont = efCSS ElementFont = efCSS
OnCreate = WebFormCreate
object lblReqPrefMethod: TWebLabel object lblReqPrefMethod: TWebLabel
Left = 54 Left = 54
Top = 138 Top = 138
Width = 96 Width = 225
Height = 15 Height = 15
Caption = 'lblReqPrefMethod' Caption = 'Please choose a preferred contact method.'
ElementID = 'lbl_req_pref_method'
ElementFont = efCSS ElementFont = efCSS
HeightStyle = ssAuto HeightStyle = ssAuto
HeightPercent = 100.000000000000000000 HeightPercent = 100.000000000000000000
...@@ -19,24 +21,27 @@ object FRequestDemo: TFRequestDemo ...@@ -19,24 +21,27 @@ object FRequestDemo: TFRequestDemo
Top = 62 Top = 62
Width = 121 Width = 121
Height = 22 Height = 22
ElementClassName = 'form-control' TabStop = False
ElementID = 'edt_req_name'
ElementFont = efCSS ElementFont = efCSS
HeightStyle = ssAuto HeightStyle = ssAuto
HeightPercent = 100.000000000000000000 HeightPercent = 100.000000000000000000
Text = 'edtReqName' ShowFocus = False
WidthPercent = 100.000000000000000000 WidthPercent = 100.000000000000000000
end end
object WebEdit2: TWebEdit object edtReqEmail: TWebEdit
Left = 196 Left = 196
Top = 62 Top = 62
Width = 121 Width = 121
Height = 22 Height = 22
TabStop = False
ChildOrder = 1 ChildOrder = 1
ElementClassName = 'form-control' ElementClassName = 'form-control'
ElementID = 'edt_req_email'
ElementFont = efCSS ElementFont = efCSS
HeightStyle = ssAuto HeightStyle = ssAuto
HeightPercent = 100.000000000000000000 HeightPercent = 100.000000000000000000
Text = 'edtReqEmail' ShowFocus = False
WidthPercent = 100.000000000000000000 WidthPercent = 100.000000000000000000
end end
object edtReqAgency: TWebEdit object edtReqAgency: TWebEdit
...@@ -44,59 +49,82 @@ object FRequestDemo: TFRequestDemo ...@@ -44,59 +49,82 @@ object FRequestDemo: TFRequestDemo
Top = 100 Top = 100
Width = 121 Width = 121
Height = 22 Height = 22
TabStop = False
ChildOrder = 2 ChildOrder = 2
ElementClassName = 'form-control' ElementID = 'edt_req_agency'
ElementFont = efCSS ElementFont = efCSS
HeightStyle = ssAuto HeightStyle = ssAuto
HeightPercent = 100.000000000000000000 HeightPercent = 100.000000000000000000
Text = 'edtReqAgency' ShowFocus = False
WidthPercent = 100.000000000000000000 WidthPercent = 100.000000000000000000
end end
object WebEdit4: TWebEdit object edtReqPhoneNumber: TWebEdit
Left = 50 Left = 50
Top = 100 Top = 100
Width = 121 Width = 121
Height = 22 Height = 22
TabStop = False
ChildOrder = 3 ChildOrder = 3
EditType = weNumeric
ElementClassName = 'form-control' ElementClassName = 'form-control'
ElementID = 'edt_req_phone_number'
ElementFont = efCSS ElementFont = efCSS
HeightStyle = ssAuto HeightStyle = ssAuto
HeightPercent = 100.000000000000000000 HeightPercent = 100.000000000000000000
Text = 'edtReqPhone' ShowFocus = False
WidthPercent = 100.000000000000000000 WidthPercent = 100.000000000000000000
end end
object req: TWebRadioButton object radReqPhone: TWebRadioButton
Left = 54 Left = 54
Top = 164 Top = 164
Width = 113 Width = 117
Height = 22 Height = 22
Caption = 'req' Caption = 'Phone'
Checked = False Checked = False
ChildOrder = 5 ChildOrder = 5
Color = clNone Color = clNone
ElementClassName = 'custom-control custom-radio' ElementID = 'rad_req_phone'
ElementButtonClassName = 'custom-control-input'
ElementLabelClassName = 'custom-control-label'
ElementFont = efCSS ElementFont = efCSS
HeightStyle = ssAuto HeightStyle = ssAuto
HeightPercent = 100.000000000000000000 HeightPercent = 100.000000000000000000
ShowFocus = False
WidthPercent = 100.000000000000000000 WidthPercent = 100.000000000000000000
end end
object WebRadioButton2: TWebRadioButton object radReqEmail: TWebRadioButton
Left = 196 Left = 196
Top = 164 Top = 164
Width = 113 Width = 121
Height = 22 Height = 22
Caption = 'WebRadioButton2' Caption = 'Email'
Checked = False Checked = False
ChildOrder = 6 ChildOrder = 6
Color = clNone Color = clNone
ElementClassName = 'custom-control custom-radio' ElementID = 'rad_req_email'
ElementButtonClassName = 'custom-control-input' ElementFont = efCSS
ElementLabelClassName = 'custom-control-label' 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 ElementFont = efCSS
HeightStyle = ssAuto HeightStyle = ssAuto
HeightPercent = 100.000000000000000000 HeightPercent = 100.000000000000000000
TabStop = False
WidthPercent = 100.000000000000000000 WidthPercent = 100.000000000000000000
OnClick = btnReqSendRequestClick
end
object xdwcRequestDemo: TXDataWebClient
Connection = DMConnection.ApiConnection
OnError = xdwcRequestDemoError
Left = 270
Top = 260
end end
end end
emSystemsWeb/View.RequestDemo.html
...@@ -2,42 +2,44 @@ ...@@ -2,42 +2,44 @@
<div id="site_nav"></div> <div id="site_nav"></div>
<!-- REQUEST DEMO SECTION --> <!-- 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="row justify-content-center">
<div class="col-12 col-md-10 col-lg-7"> <div class="col-12 col-md-10 col-lg-7">
<div class="card shadow-sm border-0"> <div class="card shadow-sm border-0">
<div class="card-body p-4 p-md-5"> <div class="card-body p-4 p-md-5">
<h2 class="mb-2 text-center">Request a Demo</h2> <h2 class="mb-2 text-center">Request a Demo</h2>
<p class="text-muted text-center mb-4"> <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> </p>
<form> <form id="frm_request_demo" novalidate>
<div class="row g-3"> <div class="row g-3">
<div class="col-md-6">
<label for="edt_req_name" class="form-label">Name*</label> <div class="col-12">
<input type="text" class="form-control" id="edt_req_name" required> <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>
<div class="col-md-6"> <div class="col-12 col-md-7">
<label for="edt_req_email" class="form-label">Email*</label> <label for="edt_req_email" class="form-label mb-1">Email</label>
<input type="email" class="form-control" id="edt_req_email" required> <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>
<div class="col-md-6"> <div class="col-12 col-md-5">
<label for="edt_req_phone_number" class="form-label">Phone Number</label> <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"> <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>
<div class="col-md-6"> <div class="col-12 col-md-6">
<label for="edt_req_agency" class="form-label">Agency</label> <label for="edt_req_agency" class="form-label mb-1">Agency</label>
<input type="text" class="form-control" id="edt_req_agency"> <input type="text" class="form-control" id="edt_req_agency">
</div> </div>
<div class="col-12 mt-2"> <div class="col-12">
<div id="lbl_req_pref_method" class="form-label mb-2"> <div id="lbl_req_pref_method" class="form-label mb-2">Preferred Contact Method*</div>
Preferred Contact Method
</div>
<div class="d-flex flex-column flex-sm-row gap-2 gap-sm-4"> <div class="d-flex flex-column flex-sm-row gap-2 gap-sm-4">
<div class="form-check"> <div class="form-check">
...@@ -50,25 +52,28 @@ ...@@ -50,25 +52,28 @@
<label class="form-check-label" for="rad_req_email">Email</label> <label class="form-check-label" for="rad_req_email">Email</label>
</div> </div>
</div> </div>
<div id="fb_req_pref" class="text-danger small mt-1 d-none">
Please choose a preferred contact method.
</div>
</div> </div>
<div class="col-12 mt-3"> <div class="col-12 mt-4">
<button type="button" class="btn btn-primary w-100 w-sm-auto px-4" id="btn_req_send_request"> <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 Send Request
</button> </button>
</div> </div>
<div class="col-12">
<div id="card_status_message" class="alert mt-3 d-none mb-0" role="alert"></div>
</div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</main> </div>
<div id="site_footer" class="mt-auto"></div> <div id="site_footer" class="mt-auto"></div>
</div> </div>
...@@ -80,20 +85,28 @@ ...@@ -80,20 +85,28 @@
</div> </div>
</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-dialog">
<div class="modal-content shadow-lg"> <div class="modal-content shadow-lg">
<div class="modal-header"> <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> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </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. Please contact EMSystems to solve the issue.
</div> </div>
<div class="modal-footer justify-content-center"> <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>
</div> </div>
</div> </div>
emSystemsWeb/View.RequestDemo.pas
...@@ -4,21 +4,32 @@ interface ...@@ -4,21 +4,32 @@ interface
uses uses
System.SysUtils, System.Classes, JS, Web, WEBLib.Graphics, WEBLib.Controls, 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 type
TFRequestDemo = class(TWebForm) TFRequestDemo = class(TWebForm)
edtReqName: TWebEdit; edtReqName: TWebEdit;
WebEdit2: TWebEdit; edtReqEmail: TWebEdit;
edtReqAgency: TWebEdit; edtReqAgency: TWebEdit;
WebEdit4: TWebEdit; edtReqPhoneNumber: TWebEdit;
lblReqPrefMethod: TWebLabel; lblReqPrefMethod: TWebLabel;
req: TWebRadioButton; radReqPhone: TWebRadioButton;
WebRadioButton2: TWebRadioButton; radReqEmail: TWebRadioButton;
btnReqSendRequest: TWebButton;
xdwcRequestDemo: TXDataWebClient;
procedure btnReqSendRequestClick(Sender: TObject);
procedure WebFormCreate(Sender: TObject);
procedure xdwcRequestDemoError(Error: TXDataClientError);
private private
{ Private declarations } function IsEmailValid(const email: string): Boolean;
public function PreferredMethod: string;
{ Public declarations } procedure NavScrollSizing;
procedure ClearFieldErrors;
procedure SetInvalid(const inputId: string);
procedure ShowFeedback(const feedbackId: string);
function ValidateRequest: Boolean;
procedure SendRequest;
end; end;
var var
...@@ -28,7 +39,193 @@ implementation ...@@ -28,7 +39,193 @@ implementation
{$R *.dfm} {$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 initialization
RegisterClass(TFRequestDemo); RegisterClass(TFRequestDemo);
end. end.
\ No newline at end of file
emSystemsWeb/css/App.css
...@@ -17,93 +17,103 @@ body { ...@@ -17,93 +17,103 @@ body {
/* NAVBAR */ /* NAVBAR */
.em-navbar-wrap .navbar { .em-navbar-wrap .navbar {
transition: padding-top 0.3s ease, padding-bottom 0.3s ease; /* Smooth transitions for padding */ transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 1030; 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 */ /* Smaller logo on phones */
.em-brand img { @media (max-width: 575.98px) {
transition: max-height 0.3s ease; /* Smooth transition for logo size */ .em-brand img {
max-height: 80px; /* Set a max-height for the logo */ max-height: 40px;
margin-top: 8px; margin-top: 6px;
}
} }
/* Nav link styles and transitions */ /* Nav link styles and transitions */
.em-navbar-wrap .navbar .navbar-nav .nav-link { .em-navbar-wrap .navbar .navbar-nav .nav-link {
transition: color 0.3s ease; /* Smooth transition for color change */ transition: color 0.3s ease;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.085em; letter-spacing: 0.085em;
font-size: 1rem; font-size: 1rem;
color: #FFFFFF; color: #FFFFFF;
} }
/* Hover and active state for nav links */ /* 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:hover .nav-link,
.em-navbar-wrap .navbar .navbar-nav .nav-item.active .nav-link { .em-navbar-wrap .navbar .navbar-nav .nav-item.active .nav-link {
color: #999999; color: #999999;
box-shadow: inset 0 -4px 0 0 #2c66a0; box-shadow: inset 0 -4px 0 0 #2c66a0;
} }
/* navbar changes when scrolled */ /* navbar changes when scrolled */
.em-navbar-wrap .navbar.scrolled { .em-navbar-wrap .navbar.scrolled {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
}
/* Smaller logo when scrolled */
.em-brand img.scrolled-logo {
max-height: 40px;
} }
/* Adjust padding for nav links when scrolled */ /* Adjust padding for nav links when scrolled */
.navbar.scrolled .nav-link { .navbar.scrolled .nav-link {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
/* navbar dropdown menu */ /* navbar dropdown menu */
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu { .em-navbar-wrap .navbar .navbar-nav .dropdown-menu {
background-color: #212529; /* Dark background to match the navbar */ background-color: #212529;
border: none; /* No border for a cleaner look */ border: none;
} }
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item { .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:hover,
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:focus { .em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:focus {
background-color: #495057; /* Slightly lighter background on hover/focus */ background-color: #495057;
color: #ffffff; color: #ffffff;
} }
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:active { .em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:active {
background-color: #2c66a0; /* Highlights color for active state */ background-color: #2c66a0;
color: #ffffff; color: #ffffff;
} }
/* navbar hamburger menu */ /* 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: #2c66a0; background-color: #2c66a0;
} }
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.active { .navbar-toggler:focus,
outline: none; .navbar-toggler:active,
border: none !important; .navbar-toggler.active {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); outline: none;
background-color: #999999; border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
background-color: #999999;
} }
.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;
background-color: #999999; background-color: #999999;
} }
/****************************************************************************************/ /****************************************************************************************/
/* HERO IMAGES */ /* HERO IMAGES */
...@@ -111,7 +121,7 @@ body { ...@@ -111,7 +121,7 @@ body {
position: relative; position: relative;
height: 50vh; /* Control the height of the hero section */ height: 50vh; /* Control the height of the hero section */
overflow: hidden; overflow: hidden;
margin-top: 45px; margin-top: 0px;
} }
.hero-image { .hero-image {
width: 100%; width: 100%;
...@@ -212,16 +222,37 @@ body { ...@@ -212,16 +222,37 @@ body {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
/****************************************************************************************/
/* btn-primary */
.btn-primary { .btn-primary {
background-color: #000; background-color: #212529;
border-color: #000; border-color: #000;
color: #fff; color: #fff;
width: 175px; width: 175px;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #333; background-color: #333;
border-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 { ...@@ -284,4 +315,29 @@ footer ul li a:focus {
max-width: 400px; 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;
}
emSystemsWebServer/bin/emSystemsWebServer.ini
[Settings] [Settings]
memoLogLevel=3 memoLogLevel=3
fileLogLevel=4 fileLogLevel=4
LogFileNum=35 LogFileNum=42
webClientVersion=1.0.0 webClientVersion=1.0.1
[SMTP] [SMTP]
Host=mail.em-sys.net Host=mail.em-sys.net
......
emSystemsWebServer/source/Api.ServiceImpl.pas
...@@ -61,17 +61,24 @@ begin ...@@ -61,17 +61,24 @@ begin
HtmlBody := Format( HtmlBody := Format(
'<html>' + '<html>' +
'<body style="font-family: Arial, sans-serif; font-size: 14px;">' + '<body style="font-family: Arial, sans-serif; font-size: 14px; color:#222;">' +
'<h2 style="color: #2E86C1;">New Contact Form Message from EM Systems Website</h2>' + '<h2 style="color: #2E86C1; margin: 0 0 12px 0;">New "%s" message from EM Systems Website</h2>' +
'<hr>' + '<p style="margin: 0 0 6px 0;"><strong>Submitted On:</strong> %s</p>' +
'<p><strong><u>Submitted On:</u></strong> %s</p>' + '<p style="margin: 0 0 6px 0;"><strong>From:</strong> %s &lt;%s&gt;</p>' +
'<p><strong><u>From:</u></strong> %s &lt;%s&gt;</p>' + '<p style="margin: 0 0 14px 0;"><strong>Subject:</strong> %s</p>' +
'<p><strong><u>Subject:</u></strong> %s</p>' + '<hr style="border:0; border-top:1px solid #ddd; margin: 14px 0;">' +
'<hr>' + '<p style="margin: 0 0 8px 0;"><strong>Message:</strong></p>' +
'<p style="margin-top: 20px;"><strong>Message:</strong></p>' + '<div style="line-height: 1.4;">%s</div>' +
'<p>%s</p>' + '</body>' +
'</body></html>', '</html>',
[FormatDateTime('yyyy-mm-dd hh:nn AM/PM', Now), Name, Email, Subject, Body.Replace(sLineBreak, '<br>')] [
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; 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