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 ...@@ -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">
...@@ -27,7 +28,8 @@ ...@@ -27,7 +28,8 @@
</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">
...@@ -10,10 +11,10 @@ ...@@ -10,10 +11,10 @@
</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">
...@@ -61,6 +62,7 @@ ...@@ -61,6 +62,7 @@
</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">
...@@ -17,17 +18,18 @@ ...@@ -17,17 +18,18 @@
<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"
onclick="window.location.hash='#FRequestDemo';">
Request a Demo Request a Demo
</button> </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">
...@@ -67,8 +69,9 @@ ...@@ -67,8 +69,9 @@
</div> </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 --> <!-- 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">
...@@ -10,10 +11,10 @@ ...@@ -10,10 +11,10 @@
</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">
<!-- PUBLIC SAFETY BOX 1 --> <!-- PUBLIC SAFETY 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">
...@@ -202,6 +203,7 @@ ...@@ -202,6 +203,7 @@
</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">
...@@ -10,10 +11,10 @@ ...@@ -10,10 +11,10 @@
</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">
...@@ -53,6 +54,7 @@ ...@@ -53,6 +54,7 @@
</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> </div>
</main>
<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.
emSystemsWeb/css/App.css
...@@ -17,24 +17,37 @@ body { ...@@ -17,24 +17,37 @@ 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) */
/* Transition for navbar logo size */
.em-brand img { .em-brand img {
transition: max-height 0.3s ease; /* Smooth transition for logo size */ transition: max-height 0.3s ease;
max-height: 80px; /* Set a max-height for the logo */ max-height: 50px;
height: auto;
width: auto;
margin-top: 8px; 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 */ /* 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;
...@@ -54,33 +67,27 @@ body { ...@@ -54,33 +67,27 @@ body {
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;
} }
...@@ -92,18 +99,21 @@ body { ...@@ -92,18 +99,21 @@ body {
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,
.navbar-toggler:active,
.navbar-toggler.active {
outline: none; outline: none;
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);
background-color: #999999; 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,8 +222,14 @@ body { ...@@ -212,8 +222,14 @@ 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;
...@@ -222,6 +238,21 @@ body { ...@@ -222,6 +238,21 @@ body {
.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;
}
emSystemsWeb/emSystemsWebsite.dproj
...@@ -145,44 +145,56 @@ ...@@ -145,44 +145,56 @@
<DCCReference Include="Site.Footer.pas"/> <DCCReference Include="Site.Footer.pas"/>
<DCCReference Include="Site.Navbar.pas"/> <DCCReference Include="Site.Navbar.pas"/>
<None Include="css\App.css"/> <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> <ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_1</ResourceId> <ResourceId>JpgImage_1</ResourceId>
</None> </RcItem>
<None Include="images\table_with_computers.jpg"> <RcItem Include="images\computer_code.jpg">
<ResourceType>RCDATA</ResourceType> <ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_2</ResourceId> <ResourceId>JpgImage_2</ResourceId>
</None> </RcItem>
<None Include="images\EM_Logo2_Copy5-1024x173.png"> <RcItem Include="images\EM_Logo2_Copy5-1024x173.png">
<ResourceType>RCDATA</ResourceType> <ResourceType>RCDATA</ResourceType>
<ResourceId>PngImage_1</ResourceId> <ResourceId>PngImage_1</ResourceId>
</None> </RcItem>
<None Include="images\EM_Logo_White.png"> <RcItem Include="images\EM_Logo_2c66a0.png">
<ResourceType>RCDATA</ResourceType> <ResourceType>RCDATA</ResourceType>
<ResourceId>PngImage_2</ResourceId> <ResourceId>PngImage_2</ResourceId>
</None> </RcItem>
<None Include="images\EM_Logo_#2c66a0.png"> <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> <ResourceType>RCDATA</ResourceType>
<ResourceId>PngImage_3</ResourceId> <ResourceId>PngImage_3</ResourceId>
</None> </RcItem>
<None Include="images\EM_Logo_2c66a0.png"> <RcItem Include="images\honeycomb-new.png">
<ResourceType>RCDATA</ResourceType> <ResourceType>RCDATA</ResourceType>
<ResourceId>PngImage_4</ResourceId> <ResourceId>PngImage_4</ResourceId>
</None> </RcItem>
<None Include="images\pexels-luis-gomes-546819.jpg"> <RcItem Include="images\honeycomb.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_3</ResourceId>
</None>
<None Include="images\computer_code.jpg">
<ResourceType>RCDATA</ResourceType> <ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_4</ResourceId> <ResourceId>JpgImage_4</ResourceId>
</None> </RcItem>
<None Include="images\niagara.jpg"> <RcItem Include="images\laptop.jpg">
<ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_5</ResourceId>
</RcItem>
<RcItem Include="images\LogoAddress2.jpg">
<ResourceType>RCDATA</ResourceType> <ResourceType>RCDATA</ResourceType>
<ResourceId>JpgImage_6</ResourceId> <ResourceId>JpgImage_6</ResourceId>
</None> </RcItem>
<None Include="index.html"/> <RcItem Include="images\niagara.jpg">
<None Include="css\spinner.css"/> <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"> <BuildConfiguration Include="Base">
<Key>Base</Key> <Key>Base</Key>
</BuildConfiguration> </BuildConfiguration>
...@@ -267,19 +279,19 @@ ...@@ -267,19 +279,19 @@
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
...@@ -297,6 +309,18 @@ ...@@ -297,6 +309,18 @@
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <DeployFile LocalName="images\computer_code.jpg" Configuration="Debug" Class="ProjectFile">
<Platform Name="Win32"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
...@@ -309,67 +333,67 @@ ...@@ -309,67 +333,67 @@
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </DeployFile>
<DeployFile LocalName="images\niagara.jpg" Configuration="Release" Class="ProjectFile"> <DeployFile LocalName="images\laptop.jpg" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </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"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </DeployFile>
<DeployFile LocalName="index.html" Configuration="Debug" Class="ProjectFile"> <DeployFile LocalName="images\table_with_computers.jpg" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </DeployFile>
<DeployFile LocalName="index.html" Configuration="Release" Class="ProjectFile"> <DeployFile LocalName="index.html" Configuration="Debug" Class="ProjectFile">
<Platform Name="Win32"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
</Platform> </Platform>
</DeployFile> </DeployFile>
<DeployFile LocalName="test.html" Configuration="Release" Class="ProjectFile"> <DeployFile LocalName="index.html" Configuration="Release" Class="ProjectFile">
<Platform Name="Win32"> <Platform Name="Win32">
<RemoteDir>.\</RemoteDir> <RemoteDir>.\</RemoteDir>
<Overwrite>true</Overwrite> <Overwrite>true</Overwrite>
......
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