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 508 additions and 170 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="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">
......@@ -27,7 +28,8 @@
</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">
<!-- 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">
......@@ -10,10 +11,10 @@
</div>
</div>
</div>
</div>
</div>
<!--MAIN CONTAINER-->
<div class="container-main">
<!--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">
......@@ -61,6 +62,7 @@
</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">
<!-- 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">
......@@ -17,17 +18,18 @@
<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">
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>
<!--MAIN CONTAINER-->
<div class="container-main">
<!--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">
......@@ -67,8 +69,9 @@
</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">
<!-- 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">
......@@ -10,10 +11,10 @@
</div>
</div>
</div>
</div>
</div>
<!--MAIN CONTAINER-->
<div class="container-main">
<!--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">
......@@ -202,6 +203,7 @@
</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">
<!-- 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">
......@@ -10,10 +11,10 @@
</div>
</div>
</div>
</div>
</div>
<!--MAIN CONTAINER-->
<div class="container-main">
<!--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">
......@@ -53,6 +54,7 @@
</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>
</div>
</main>
<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.
emSystemsWeb/css/App.css
......@@ -17,24 +17,37 @@ body {
/* 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;
width: 100%;
z-index: 1030;
}
/* Transition for navbar logo size */
/* Logo sizing (default + smooth transition) */
.em-brand img {
transition: max-height 0.3s ease; /* Smooth transition for logo size */
max-height: 80px; /* Set a max-height for the logo */
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;
}
/* 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 */
transition: color 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.085em;
font-size: 1rem;
......@@ -54,33 +67,27 @@ body {
padding-bottom: 0.5rem;
}
/* Smaller logo when scrolled */
.em-brand img.scrolled-logo {
max-height: 40px;
}
/* Adjust padding for nav links when scrolled */
.navbar.scrolled .nav-link {
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;
}
.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 */
background-color: #495057;
color: #ffffff;
}
.em-navbar-wrap .navbar .navbar-nav .dropdown-menu .dropdown-item:active {
background-color: #2c66a0; /* Highlights color for active state */
background-color: #2c66a0;
color: #ffffff;
}
......@@ -92,18 +99,21 @@ body {
transition: background-color 0.3s ease, box-shadow 0.3s ease;
background-color: #2c66a0;
}
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.active {
.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 */
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,8 +222,14 @@ body {
margin-bottom: 1rem;
}
/****************************************************************************************/
/* btn-primary */
.btn-primary {
background-color: #000;
background-color: #212529;
border-color: #000;
color: #fff;
width: 175px;
......@@ -222,6 +238,21 @@ body {
.btn-primary:hover {
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;
}
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