Commit 0589eeca by Mac Stephens

figured out deploy, need server, build under project manager, do not follow video's advice

parent e4be26bf
...@@ -27,4 +27,5 @@ __history/ ...@@ -27,4 +27,5 @@ __history/
__recovery/ __recovery/
*.~* *.~*
*.stat *.stat
TMSWeb/ *.vscode/
*.TMSWeb/
object FNavbar: TFNavbar
Color = clWhite
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
FormStyle = fsNormal
Height = 114
Left = 0
TabOrder = 0
Top = 0
Width = 1082
object btnHome: TWebButton
Caption = 'HOME'
Color = clNone
ElementID = 'home'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 228
OnClick = btnHomeClick
Role = 'null'
TabOrder = 0
Top = 222
Width = 100
end
object btnCompliance: TWebButton
Caption = 'COMPLIANCE'
Color = clNone
ElementID = 'compliance'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 340
OnClick = btnComplianceClick
Role = 'null'
TabOrder = 0
Top = 222
Width = 100
end
object btnContactUs: TWebButton
Caption = 'WebButton3'
Color = clNone
ElementID = 'contactus'
ElementPosition = epRelative
Font.Charset = ANSI_CHARSET
Font.Color = clBlack
Font.Height = -11
Font.Name = 'Arial'
Font.Size = 8
Font.Style = []
Height = 25
Left = 452
OnClick = btnContactUsClick
Role = 'null'
TabOrder = 0
Top = 222
Width = 100
end
end
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="images/efxLogo.png" alt="EFX Currency Exchange" style="height: 40px;">
<!-- Adjust the height as needed -->
</a>
<!-- Toggler/collapsibe Button (for mobile view) -->
<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>
<!-- Navbar links -->
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" id="home" aria-current="page" href="#FHome">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" id="compliance" href="#FCompliance">COMPLIANCE</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">CONTACT US</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
unit Navbar;
interface
uses
System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Forms, Vcl.StdCtrls,
WEBLib.StdCtrls, Vcl.Controls, WEBLib.Dialogs, Vcl.Imaging.pngimage,
WEBLib.ExtCtrls, WEBLib.Controls, Web, JS, WEBLib.Menus;
type
TFNavbar = class(TWebForm)
btnContactUs: TWebButton;
btnCompliance: TWebButton;
btnHome: TWebButton;
[async]
procedure btnHomeClick(Sender: TObject);
procedure btnComplianceClick(Sender: TObject);
procedure WebFormClose(Sender: TObject; var Action: TCloseAction);
procedure btnContactUsClick(Sender: TObject);
public
end;
var
FNavbar: TFNavbar;
implementation
{$R *.dfm}
uses
View.Home, View.Compliance, View.ContactUs;
procedure TFNavbar.btnHomeClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFHome, FHome);
end;
procedure TFNavbar.btnComplianceClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFCompliance, FCompliance);
end;
procedure TFNavbar.btnContactUsClick(Sender: TObject);
begin
Close;
Application.CreateForm(TFContactUs, FContactUs);
end;
procedure TFNavbar.WebFormClose(Sender: TObject; var Action: TCloseAction);
begin
Action := caFree;
end;
initialization
RegisterClass(TFNavbar);
end.
This source diff could not be displayed because it is too large. You can view the blob instead.
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images/efxLogo.png" alt="EFX">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="compliance" href="#FCompliance">Compliance</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- HERO IMAGE -->
<div class="hero-image-compliance">
<img src="images/coins.jpg" alt="Hero Image" class="img-fluid">
</div>
<!-- CONTENT SECTION -->
<div class="content-section">
<div class="container-fluid px-0">
<div class="currencies-section shadow-sm text-center p-5 border-bottom">
<h2 class="efx-green mb-2">Compliance</h2>
<p class="middle-subtitle">efx is firmly committed to the fight against money laundering and terrorist financing.</p>
<p class="subtitle">At our discretion, or as in accordance with applicable law, you may be required to provide government issued photo identification in order to make a currency exchange transaction. Other restrictions may apply. Void where prohibited.</p>
</div>
</div>
</div>
<!-- DETAIL SECTION -->
<div class="container mt-5">
<div class="container">
<div class="row align-items-start">
<div class="col-md-4 mb-4 text-center">
<div class="mb-3">
<i class="fa-solid fa-eye fa-2xl"></i>
</div>
<h4>Anti-Money Laundering</h4>
<p>eFX has instituted anti-money laundering compliance programs, including compliance reviews, periodic training and testing of personnel, and third party review of its anti-money laundering procedures. Such anti-money laundering programs include screening of customer names and transactions through governmental and other database lists.</p>
</div>
<div class="col-md-4 mb-4 text-center"> <!-- Adjusted column size -->
<img src="images/efx-location.jpg" alt="Compliance" class="img-fluid rounded-circle shadow">
</div>
<div class="col-md-4 mb-4 text-center">
<div class="mb-3">
<i class="fa-solid fa-scale-balanced fa-2xl"></i>
</div>
<h4>U.S. Department of Treasury</h4>
<p>efx is registered with the United States Department of the Treasury Financial Crimes Enforcement Network as a money services business. efx also holds currency exchange licenses in states where a license for its currency exchange operations are required.</p>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-light text-center py-4">
<div class="container-fluid container-max">
<div class="row">
<div class="col-12 mb-3">
<a href="https://www.facebook.com/efxcurrency/" class="text-decoration-none me-2">
<i class="fa-brands fa-square-facebook fa-lg" style="color: #28b34c"></i>
</a>
<a href="https://twitter.com/efxCurrency/" class="text-decoration-none">
<i class="fa-brands fa-square-x-twitter fa-lg" style="color: #28b34c"></i>
</a>
</div>
<div class="col-12">
<p>©2024 copyright eFX. All rights reserved.</p>
<p>NMLS No. 981328</p>
</div>
</div>
</div>
</footer>
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images/efxLogo.png" alt="EFX">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="compliance" href="#FCompliance">Compliance</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- DETAIL SECTION -->
<div class="container mt-5">
<!-- Title and underline -->
<div class="row mb-4">
<div class="col">
<h1>Contact Us</h1>
<hr> <!-- This creates a horizontal line -->
</div>
</div>
<!-- Contact form and hours information -->
<div class="row mb-5">
<!-- Contact form column -->
<div class="col-md-6">
<h2>Send us a Message</h2>
<p>Get in contact with us for your currency needs!</p>
<form id="contactForm">
<div class="mb-3">
<label for="edtName" class="form-label">Your Name (required)</label>
<input type="text" class="form-control" id="edtName" required placeholder="John Doe">
</div>
<div class="mb-3">
<label for="edtEmail" class="form-label">Your Email (required)</label>
<input type="email" class="form-control" id="edtEmail" required placeholder="example@yourdomain.com">
</div>
<div class="mb-3">
<label for="edtSubject" class="form-label">Subject</label>
<input type="text" class="form-control" id="edtSubject" placeholder="Type the subject here.">
</div>
<div class="mb-3">
<label for="memoMessage" class="form-label">Your Message</label>
<textarea class="form-control" id="memoMessage" placeholder="Type your message here." rows="3"></textarea>
</div>
<button type="submit" id="btnSubmit"class="btn btn-primary">Send Email</button>
</form>
</div>
<!-- Hours information column -->
<div class="col-md-6">
<div class="hours-box">
<h3>EFX Currency Hours</h3>
<div class="location">
<i class="fas fa-map-pin fa-lg me-2"></i>
<div>
<h4>Niagara Falls</h4>
<p class="mb-0">Thursday – Monday: 11am – 4pm</p>
<p class="mt-2">Phone: (716) 297-4654</p>
</div>
</div>
<div class="location">
<i class="fas fa-map-pin fa-lg me-2"></i>
<div>
<h4>Buffalo</h4>
<p class="mb-0">Monday – Saturday: 11am – 4pm</p>
<p class="mt-2">Phone: (716) 681-8820</p>
</div>
</div>
<div class="location">
<i class="fas fa-map-pin fa-lg me-2"></i>
<div>
<h4>Rochester</h4>
<p class="mb-0">Monday: 9am – 1pm</p>
<p class="mb-0">Thursday: 11am – 4pm</p>
<p class="mb-0">Saturday: 9am – 1pm</p>
<p class="mt-2">Phone: (585) 445-8911</p>
</div>
</div>
<div class="location">
<i class="fas fa-map-pin fa-lg me-2"></i>
<div>
<h4>Syracuse</h4>
<p class="mb-0">Monday, Wednesday, Friday: 12pm – 4pm</p>
<p class="mt-2">Phone: (315) 565-4138</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-light text-center py-4">
<div class="container-fluid container-max">
<div class="row">
<div class="col-12 mb-3">
<a href="https://www.facebook.com/efxcurrency/" class="text-decoration-none me-2">
<i class="fa-brands fa-square-facebook fa-lg" style="color: #28b34c"></i>
</a>
<a href="https://twitter.com/efxCurrency/" class="text-decoration-none">
<i class="fa-brands fa-square-x-twitter fa-lg" style="color: #28b34c"></i>
</a>
</div>
<div class="col-12">
<p>©2024 copyright eFX. All rights reserved.</p>
<p>NMLS No. 981328</p>
</div>
</div>
</div>
</footer>
body {
font-family: "Raleway", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: #272727;
background-color: #f4f4f4;
padding-top: 70px;
box-sizing: border-box;
}
.container-max {
max-width: 1400px;
margin-right: auto;
margin-left: auto;
}
.efx-green {
color: #28b34c;
}
.em-navbar-wrap .navbar {
padding-top: 20;
padding-bottom: 20;
transition: height 0.3s ease-in-out;
position: fixed;
width: 100%;
z-index: 1030;
}
.em-brand img {
height: auto;
transition: height 0.3s ease-in-out;
}
.navbar-nav .nav-link {
text-transform: uppercase;
letter-spacing: 0.085em;
font-size: larger;
color: #999999;
padding-top: 37px;
padding-bottom: 37px;
height: 90px;
transition: padding 0.3s ease-in-out;
}
.navbar-nav .nav-item:hover .nav-link,
.navbar-nav .nav-item.active .nav-link {
color: #272727;
box-shadow: inset 0 -4px 0 0 #28a745;
}
@media (max-width: 992px) {
.navbar-nav .nav-link {
padding-top: 20px;
padding-bottom: 20px;
height: auto;
}
}
.em-navbar-wrap .navbar.scrolled {
padding-top: 0;
padding-bottom: 0;
height: 70px;
}
.em-brand img.scrolled-logo {
height: 30px;
}
.navbar.scrolled .nav-link {
padding-top: 25px;
padding-bottom: 25px;
}
.navbar-toggler {
outline: none !important;
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
background-color: #f8f9fa;
}
/* Ensures the hover effect is applied even when the element is focused */
.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: #f8f9fa;
}
/* Hover effect: inverse shadow and darker background */
.navbar-toggler:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; /* "Pressed in" look */
background-color: #e2e6ea;
}
/* Hero Image Styling */
.hero-image-home {
position: relative;
height: 500px;
overflow: hidden;
}
.hero-image-home img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.hero-image-compliance {
position: relative;
height: 400px;
overflow: hidden;
}
.hero-image-compliance img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
/* Currency Expert Box Styling */
.currency-expert-box {
position: absolute;
top: 30%;
left: 10%;
transform: translateX(-50%, -50%);
background-color: rgba(246, 246, 246, 0.9);
padding: 20px;
width: 30%;
max-width: 400px;
z-index: 2;
border-radius: 10px;
}
@media (max-width: 768px) {
.currency-expert-box {
width: 80%; /* Adjust width for smaller screens */
}
}
@media (max-width: 576px) {
.currency-expert-box {
width: 90%; /* Adjust width for even smaller screens */
padding: 15px; /* Adjust padding for smaller screens */
}
}
/* Content Section Styling */
.content-section {
position: relative;
z-index: 10;
background: #FFF;
margin-top: -2rem;
}
blockquote {
margin-top: 1em;
font-style: italic;
}
.middle-subtitle {
font-size: medium;
font-weight: bold;
}
.container.mt-5 {
margin-top: calc(5rem + 90px) !important;
}
.location-info {
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
margin-bottom: 2rem;
}
.location-info h3 {
margin-bottom: .5rem;
}
.location {
display: flex;
align-items: start; /* Aligns the icon with the top of the text */
margin-bottom: 1rem; /* Spacing between locations */
}
.location i.fas {
margin-top: 0.25rem; /* Adjust this value to fine-tune vertical alignment with h4 */
}
.location > div {
margin-left: 0.5rem; /* Space between icon and text */
}
.hours-box h3 {
margin-bottom: 1rem; /* Space below the section title */
}
.btn-primary {
background-color: #28a745;
border-color: #28a745;
}
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<noscript>Your browser does not support JavaScript!</noscript>
<link rel="icon" href="data:;base64,=">
<title>TMS Web Project</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/App.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&amp;family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&amp;display=swap" rel="stylesheet">
<script type="text/javascript" src="TMSWebTemplate.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 1,
'wght' 600,
'GRAD' 0,
'opsz' 24;
}
</style>
</head>
<body>
<script type="text/javascript">
rtl.run();
</script>
</body></html>
This source diff could not be displayed because it is too large. You can view the blob instead.
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images/efxLogo.png" alt="EFX">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="compliance" href="#FCompliance">Compliance</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- HERO IMAGE -->
<div class="hero-image-compliance">
<img src="images/coins.jpg" alt="Hero Image" class="img-fluid">
</div>
<!-- CONTENT SECTION -->
<div class="content-section">
<div class="container-fluid px-0">
<div class="currencies-section shadow-sm text-center p-5 border-bottom">
<h2 class="efx-green mb-2">Compliance</h2>
<p class="middle-subtitle">efx is firmly committed to the fight against money laundering and terrorist financing.</p>
<p class="subtitle">At our discretion, or as in accordance with applicable law, you may be required to provide government issued photo identification in order to make a currency exchange transaction. Other restrictions may apply. Void where prohibited.</p>
</div>
</div>
</div>
<!-- DETAIL SECTION -->
<div class="container mt-5">
<div class="container">
<div class="row align-items-start">
<div class="col-md-4 mb-4 text-center">
<div class="mb-3">
<i class="fa-solid fa-eye fa-2xl"></i>
</div>
<h4>Anti-Money Laundering</h4>
<p>eFX has instituted anti-money laundering compliance programs, including compliance reviews, periodic training and testing of personnel, and third party review of its anti-money laundering procedures. Such anti-money laundering programs include screening of customer names and transactions through governmental and other database lists.</p>
</div>
<div class="col-md-4 mb-4 text-center"> <!-- Adjusted column size -->
<img src="images/efx-location.jpg" alt="Compliance" class="img-fluid rounded-circle shadow">
</div>
<div class="col-md-4 mb-4 text-center">
<div class="mb-3">
<i class="fa-solid fa-scale-balanced fa-2xl"></i>
</div>
<h4>U.S. Department of Treasury</h4>
<p>efx is registered with the United States Department of the Treasury Financial Crimes Enforcement Network as a money services business. efx also holds currency exchange licenses in states where a license for its currency exchange operations are required.</p>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-light text-center py-4">
<div class="container-fluid container-max">
<div class="row">
<div class="col-12 mb-3">
<a href="https://www.facebook.com/efxcurrency/" class="text-decoration-none me-2">
<i class="fa-brands fa-square-facebook fa-lg" style="color: #28b34c"></i>
</a>
<a href="https://twitter.com/efxCurrency/" class="text-decoration-none">
<i class="fa-brands fa-square-x-twitter fa-lg" style="color: #28b34c"></i>
</a>
</div>
<div class="col-12">
<p>©2024 copyright eFX. All rights reserved.</p>
<p>NMLS No. 981328</p>
</div>
</div>
</div>
</footer>
<!--NAVBAR CONTAINER-->
<div class="em-navbar-wrap">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
<div class="container-fluid container-max">
<a class="navbar-brand em-brand" href="#FHome">
<img src="images/efxLogo.png" alt="EFX">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" id="home" href="#FHome">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="compliance" href="#FCompliance">Compliance</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contactus" href="#FContactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- DETAIL SECTION -->
<div class="container mt-5">
<!-- Title and underline -->
<div class="row mb-4">
<div class="col">
<h1>Contact Us</h1>
<hr> <!-- This creates a horizontal line -->
</div>
</div>
<!-- Contact form and hours information -->
<div class="row mb-5">
<!-- Contact form column -->
<div class="col-md-6">
<h2>Send us a Message</h2>
<p>Get in contact with us for your currency needs!</p>
<form id="contactForm">
<div class="mb-3">
<label for="edtName" class="form-label">Your Name (required)</label>
<input type="text" class="form-control" id="edtName" required placeholder="John Doe">
</div>
<div class="mb-3">
<label for="edtEmail" class="form-label">Your Email (required)</label>
<input type="email" class="form-control" id="edtEmail" required placeholder="example@yourdomain.com">
</div>
<div class="mb-3">
<label for="edtSubject" class="form-label">Subject</label>
<input type="text" class="form-control" id="edtSubject" placeholder="Type the subject here.">
</div>
<div class="mb-3">
<label for="memoMessage" class="form-label">Your Message</label>
<textarea class="form-control" id="memoMessage" placeholder="Type your message here." rows="3"></textarea>
</div>
<button type="submit" id="btnSubmit"class="btn btn-primary">Send Email</button>
</form>
</div>
<!-- Hours information column -->
<div class="col-md-6">
<div class="hours-box">
<h3>EFX Currency Hours</h3>
<div class="location">
<i class="fas fa-map-pin fa-lg me-2"></i>
<div>
<h4>Niagara Falls</h4>
<p class="mb-0">Thursday – Monday: 11am – 4pm</p>
<p class="mt-2">Phone: (716) 297-4654</p>
</div>
</div>
<div class="location">
<i class="fas fa-map-pin fa-lg me-2"></i>
<div>
<h4>Buffalo</h4>
<p class="mb-0">Monday – Saturday: 11am – 4pm</p>
<p class="mt-2">Phone: (716) 681-8820</p>
</div>
</div>
<div class="location">
<i class="fas fa-map-pin fa-lg me-2"></i>
<div>
<h4>Rochester</h4>
<p class="mb-0">Monday: 9am – 1pm</p>
<p class="mb-0">Thursday: 11am – 4pm</p>
<p class="mb-0">Saturday: 9am – 1pm</p>
<p class="mt-2">Phone: (585) 445-8911</p>
</div>
</div>
<div class="location">
<i class="fas fa-map-pin fa-lg me-2"></i>
<div>
<h4>Syracuse</h4>
<p class="mb-0">Monday, Wednesday, Friday: 12pm – 4pm</p>
<p class="mt-2">Phone: (315) 565-4138</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-light text-center py-4">
<div class="container-fluid container-max">
<div class="row">
<div class="col-12 mb-3">
<a href="https://www.facebook.com/efxcurrency/" class="text-decoration-none me-2">
<i class="fa-brands fa-square-facebook fa-lg" style="color: #28b34c"></i>
</a>
<a href="https://twitter.com/efxCurrency/" class="text-decoration-none">
<i class="fa-brands fa-square-x-twitter fa-lg" style="color: #28b34c"></i>
</a>
</div>
<div class="col-12">
<p>©2024 copyright eFX. All rights reserved.</p>
<p>NMLS No. 981328</p>
</div>
</div>
</div>
</footer>
body {
font-family: "Raleway", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: #272727;
background-color: #f4f4f4;
padding-top: 70px;
box-sizing: border-box;
}
.container-max {
max-width: 1400px;
margin-right: auto;
margin-left: auto;
}
.efx-green {
color: #28b34c;
}
.em-navbar-wrap .navbar {
padding-top: 20;
padding-bottom: 20;
transition: height 0.3s ease-in-out;
position: fixed;
width: 100%;
z-index: 1030;
}
.em-brand img {
height: auto;
transition: height 0.3s ease-in-out;
}
.navbar-nav .nav-link {
text-transform: uppercase;
letter-spacing: 0.085em;
font-size: larger;
color: #999999;
padding-top: 37px;
padding-bottom: 37px;
height: 90px;
transition: padding 0.3s ease-in-out;
}
.navbar-nav .nav-item:hover .nav-link,
.navbar-nav .nav-item.active .nav-link {
color: #272727;
box-shadow: inset 0 -4px 0 0 #28a745;
}
@media (max-width: 992px) {
.navbar-nav .nav-link {
padding-top: 20px;
padding-bottom: 20px;
height: auto;
}
}
.em-navbar-wrap .navbar.scrolled {
padding-top: 0;
padding-bottom: 0;
height: 70px;
}
.em-brand img.scrolled-logo {
height: 30px;
}
.navbar.scrolled .nav-link {
padding-top: 25px;
padding-bottom: 25px;
}
.navbar-toggler {
outline: none !important;
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
background-color: #f8f9fa;
}
/* Ensures the hover effect is applied even when the element is focused */
.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: #f8f9fa;
}
/* Hover effect: inverse shadow and darker background */
.navbar-toggler:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; /* "Pressed in" look */
background-color: #e2e6ea;
}
/* Hero Image Styling */
.hero-image-home {
position: relative;
height: 500px;
overflow: hidden;
}
.hero-image-home img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.hero-image-compliance {
position: relative;
height: 400px;
overflow: hidden;
}
.hero-image-compliance img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
/* Currency Expert Box Styling */
.currency-expert-box {
position: absolute;
top: 30%;
left: 10%;
transform: translateX(-50%, -50%);
background-color: rgba(246, 246, 246, 0.9);
padding: 20px;
width: 30%;
max-width: 400px;
z-index: 2;
border-radius: 10px;
}
@media (max-width: 768px) {
.currency-expert-box {
width: 80%; /* Adjust width for smaller screens */
}
}
@media (max-width: 576px) {
.currency-expert-box {
width: 90%; /* Adjust width for even smaller screens */
padding: 15px; /* Adjust padding for smaller screens */
}
}
/* Content Section Styling */
.content-section {
position: relative;
z-index: 10;
background: #FFF;
margin-top: -2rem;
}
blockquote {
margin-top: 1em;
font-style: italic;
}
.middle-subtitle {
font-size: medium;
font-weight: bold;
}
.container.mt-5 {
margin-top: calc(5rem + 90px) !important;
}
.location-info {
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
margin-bottom: 2rem;
}
.location-info h3 {
margin-bottom: .5rem;
}
.location {
display: flex;
align-items: start; /* Aligns the icon with the top of the text */
margin-bottom: 1rem; /* Spacing between locations */
}
.location i.fas {
margin-top: 0.25rem; /* Adjust this value to fine-tune vertical alignment with h4 */
}
.location > div {
margin-left: 0.5rem; /* Space between icon and text */
}
.hours-box h3 {
margin-bottom: 1rem; /* Space below the section title */
}
.btn-primary {
background-color: #28a745;
border-color: #28a745;
}
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<noscript>Your browser does not support JavaScript!</noscript>
<link rel="icon" href="data:;base64,=">
<title>TMS Web Project</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/App.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&amp;family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&amp;display=swap" rel="stylesheet">
<script type="text/javascript" src="TMSWebTemplate.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 1,
'wght' 600,
'GRAD' 0,
'opsz' 24;
}
</style>
</head>
<body>
<script type="text/javascript">
rtl.run();
</script>
</body></html>
...@@ -6,7 +6,6 @@ uses ...@@ -6,7 +6,6 @@ uses
View.Home in 'View.Home.pas' {FHome: TWebForm} {*.html}, View.Home in 'View.Home.pas' {FHome: TWebForm} {*.html},
View.Compliance in 'View.Compliance.pas' {FCompliance: TWebForm} {*.html}, View.Compliance in 'View.Compliance.pas' {FCompliance: TWebForm} {*.html},
View.ContactUs in 'View.ContactUs.pas' {FContactUs: TWebForm} {*.html}, View.ContactUs in 'View.ContactUs.pas' {FContactUs: TWebForm} {*.html},
Navbar in 'Navbar.pas' {FNavbar: TWebForm} {*.html},
uSmtpJsWrapper in 'uSmtpJsWrapper.pas'; uSmtpJsWrapper in 'uSmtpJsWrapper.pas';
{$R *.res} {$R *.res}
......
[Paths]
HtmlPath=C:\Projects\efxCurrencyExchangeWebsite\TMSWeb\Debug
HtmlFile=index.html
DefaultURL=http://localhost:8000/TMSWebTemplate
SingleInstance=0
Debug=0
DebugManager=C:\RADTools\TMSSoftware\TMS WEB Core RSXE14\Bin\Win32\TMSDBGManager.exe
URL=http://localhost:8000/$(ProjectName)
URLParams=
Browser=1
BrowserBin=
BrowserParams=
Electron=0
ElectronBuild=0
JSDebugger=1
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -13,13 +13,13 @@ class procedure TSmtpJsWrapper.Send(const ARecipient, AName, ASender, ASubject, ...@@ -13,13 +13,13 @@ class procedure TSmtpJsWrapper.Send(const ARecipient, AName, ASender, ASubject,
var var
LBody: string; LBody: string;
begin begin
Lbody := AName + #10 + ABody; LBody := AName + #10 + ABody;
// The PAS2JS compiler flag ignores the Delphi compliler, and uses the JavaScript compiler instead // The PAS2JS compiler flag ignores the Delphi compliler, and uses the JavaScript compiler instead
// This allows for the code to run without errors // This allows for the code to run without errors
{$IFDEF PAS2JS} {$IFDEF PAS2JS}
asm asm
Email.send({ Email.send({
SecureToken : "71904338-da05-4feb-8d19-b2dd7a0436ed", SecureToken : "...",
To : ARecipient, To : ARecipient,
From : ASender, From : ASender,
Subject : ASubject, Subject : ASubject,
......
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