dcovington
/
Purple_Envelop_Order_Site
1
0
Çatalla 0
Kod Konular 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

Changes in looks

master
Daniel Covington 5 gün önce
ebeveyn
c7687ee27f
işleme
9deee49df3
15 değiştirilmiş dosya ile 232 ekleme ve 156 silme
Birleşik Görünüm
Diff Seçenekleri
İstatistikleri Göster Yama Dosyasını İndir Diff Dosyasını İndir
  1. +9
    -1
      app/controllers/OrderApiController.asp
  2. +3
    -1
      app/controllers/OrderController.asp
  3. +8
    -2
      app/views/Home/index.asp
  4. +29
    -3
      app/views/shared/footer.asp
  5. +19
    -20
      app/views/shared/header.asp
  6. +163
    -128
      public/css/styles.css
  7. BIN
      public/images/KCI ELECTION printing (white).png
  8. BIN
      public/images/KCI ELECTION printing.png
  9. BIN
      public/images/KCI geo.png
  10. BIN
      public/images/KCI_design print mail.png
  11. BIN
      public/images/blurple.png
  12. BIN
      public/images/certified-election-mail-service-provider.png
  13. BIN
      public/images/swaggy backer.png
  14. BIN
      public/images/swaggy geo.png
  15. +1
    -1
      public/web.config

+ 9
- 1
app/controllers/OrderApiController.asp Dosyayı Görüntüle

@@ -1,4 +1,4 @@
<%
<%
' Auto-generated Controller: OrderApi ' Auto-generated Controller: OrderApi
' Generated on 7/28/2026 2:56:29 PM ' Generated on 7/28/2026 2:56:29 PM
' Generator: generateController.vbs v1.0 ' Generator: generateController.vbs v1.0
@@ -60,6 +60,7 @@ Class OrderApiController_Class
Exit Sub Exit Sub
End If End If



Dim csrfToken : csrfToken = Request.ServerVariables("HTTP_X_CSRF_TOKEN") Dim csrfToken : csrfToken = Request.ServerVariables("HTTP_X_CSRF_TOKEN")
If Not HTMLSecurity().IsValidAntiCSRFToken("Order.Continue", csrfToken) Then If Not HTMLSecurity().IsValidAntiCSRFToken("Order.Continue", csrfToken) Then
WriteJsonError "403 Forbidden", "Your form session expired. Please refresh the page and try again." WriteJsonError "403 Forbidden", "Your form session expired. Please refresh the page and try again."
@@ -113,6 +114,7 @@ Class OrderApiController_Class
End If End If
On Error GoTo 0 On Error GoTo 0



' Best-effort: the order is already safely persisted at this point, so an SMTP hiccup ' Best-effort: the order is already safely persisted at this point, so an SMTP hiccup
' should not turn a successful submission into a failed one. ' should not turn a successful submission into a failed one.
OrderMailer().SendOrderDetailsEmail order, model OrderMailer().SendOrderDetailsEmail order, model
@@ -131,3 +133,9 @@ Function OrderApiController()
Set OrderApiController = OrderApiController_Class__Singleton Set OrderApiController = OrderApiController_Class__Singleton
End Function End Function
%> %>







+ 3
- 1
app/controllers/OrderController.asp Dosyayı Görüntüle

@@ -1,4 +1,4 @@
<%
<%
Class OrderController_Class Class OrderController_Class
Private m_useLayout Private m_useLayout
Private m_title Private m_title
@@ -69,3 +69,5 @@ Function OrderController()
Set OrderController = OrderController_Class__Singleton Set OrderController = OrderController_Class__Singleton
End Function End Function
%> %>



+ 8
- 2
app/views/Home/index.asp Dosyayı Görüntüle

@@ -1,4 +1,4 @@
<section class="hero" style="padding: 48px 0; border-radius: var(--radius-lg); overflow: hidden;">
<section class="hero" style="padding: 48px 0; border-radius: var(--radius-lg); overflow: hidden;">
<div class="hero-grid" style="gap: 40px;"> <div class="hero-grid" style="gap: 40px;">
<div class="hero-copy"> <div class="hero-copy">
<span class="eyebrow">Election mail production made simple</span> <span class="eyebrow">Election mail production made simple</span>
@@ -136,7 +136,7 @@
</div> </div>
</section> </section>


<section class="cta-section" style="padding: 0 0 48px;">
<section class="cta-section" style="padding: 40px 0;">
<div class="cta-card"> <div class="cta-card">
<div> <div>
<span class="eyebrow">Need a custom production quote?</span> <span class="eyebrow">Need a custom production quote?</span>
@@ -145,3 +145,9 @@
<a class="button button-light" href="mailto:orders@example.com">Request pricing</a> <a class="button button-light" href="mailto:orders@example.com">Request pricing</a>
</div> </div>
</section> </section>







+ 29
- 3
app/views/shared/footer.asp Dosyayı Görüntüle

@@ -1,8 +1,34 @@
</div>
 </div>
</main> </main>


<!-- Bootstrap bundle (with Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<footer id="colophon" class="site-footer">
<div class="container footer-shell">
<div class="footer-compact-row">
<div class="footer-logo-inline">
<a href="/home" aria-label="KCI Election Printing home">
<img src="/images/KCI%20ELECTION%20printing%20(white).png" alt="KCI Election Printing" />
</a>
</div>

<div class="footer-inline-content">
<strong>Have Questions?</strong>
<span>Call <a href="tel:616-957-2120">616.957.2120</a></span>
<span>Email <a href="mailto:info@kentcommunications.com">info@kentcommunications.com</a></span>
<a href="/contact-us/">Contact Us</a>
</div>

<div class="footer-badge-inline">
<img src="/images/certified-election-mail-service-provider.png" alt="Certified Election Mail Service Provider" />
</div>
</div>


<div class="footer-bottom">
<span>&copy; <%= Year(Date()) %> KCI Election Printing</span>
<span>3901 E. Paris Ave SE, Grand Rapids, MI 49512</span>
</div>
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

+ 19
- 20
app/views/shared/header.asp Dosyayı Görüntüle

@@ -1,4 +1,4 @@
<!doctype html>
<!doctype html>
<% <%
Response.Charset = "utf-8" Response.Charset = "utf-8"
Response.CodePage = 65001 Response.CodePage = 65001
@@ -41,21 +41,21 @@ If Len(pageTitle) = 0 Then pageTitle = "Classic ASP Starter Template"


<style> <style>
main.routekit-main { main.routekit-main {
flex: 1 1 auto;
height: 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-top: 1.5rem; padding-top: 1.5rem;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Top navbar -->
<nav class="navbar navbar-expand-lg" style="background: var(--purple-950);">
<nav class="navbar navbar-expand-lg site-header">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand d-flex align-items-center gap-2" href="/" style="color: #fff;">
<span class="brand-mark" aria-hidden="true" style="width:36px;height:36px;font-size:0.85rem;">PE</span>
<span class="d-flex flex-column lh-sm">
<strong>Purple Envelope</strong>
<small class="text-white-50" style="font-size: 0.7rem;">Addressing &amp; Barcoding</small>
</span>
<a class="navbar-brand" href="/" aria-label="KCI Election Printing home">
<img src="/images/KCI%20ELECTION%20printing%20(white).png" alt="KCI Election Printing" style="height: 82px; width: auto; display: block;" />
</a> </a>


<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#rkMainNav" aria-controls="rkMainNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#rkMainNav" aria-controls="rkMainNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -63,7 +63,7 @@ If Len(pageTitle) = 0 Then pageTitle = "Classic ASP Starter Template"
</button> </button>


<div class="collapse navbar-collapse" id="rkMainNav"> <div class="collapse navbar-collapse" id="rkMainNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-white" href="/home">Home</a> <a class="nav-link text-white" href="/home">Home</a>
</li> </li>
@@ -74,20 +74,19 @@ If Len(pageTitle) = 0 Then pageTitle = "Classic ASP Starter Template"
<a class="nav-link text-white-50" href="/home#process">Process</a> <a class="nav-link text-white-50" href="/home#process">Process</a>
</li> </li>
</ul> </ul>

' Right-side area (e.g., user info / login)
' You can wire this up to your auth later.
<ul class="navbar-nav mb-2 mb-lg-0">
' <li class="nav-item">
' <a class="nav-link" href="/login">Login</a>
' </li>
</ul>
</div> </div>
</div> </div>
</nav> </nav>


<!-- Main container for views -->
<main class="routekit-main"> <main class="routekit-main">
<div class="container"> <div class="container">
<% Flash().ShowErrorsIfPresent : Flash().ShowSuccessIfPresent %>










<% Flash().ShowErrorsIfPresent : Flash().ShowSuccessIfPresent %>

+ 163
- 128
public/css/styles.css Dosyayı Görüntüle

@@ -1,4 +1,4 @@
:root {
:root {
--purple-950: #24103a; --purple-950: #24103a;
--purple-900: #32134f; --purple-900: #32134f;
--purple-800: #4d1d78; --purple-800: #4d1d78;
@@ -27,13 +27,23 @@
} }


html { html {
height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
} }


body { body {
height: 100vh;
min-height: 100vh;
margin: 0; margin: 0;
display: flex;
flex-direction: column;
overflow: hidden;
color: var(--ink); color: var(--ink);
background: var(--surface);
background:
url("/images/swaggy%20geo.png");
background-size: auto;
background-position: top left;
background-repeat: repeat;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6; line-height: 1.6;
} }
@@ -60,12 +70,18 @@ img {
} }


.site-header { .site-header {
position: sticky;
top: 0;
position: relative;
z-index: 50; z-index: 50;
background: rgba(255, 255, 255, 0.93);
border-bottom: 1px solid rgba(228, 220, 233, 0.8);
backdrop-filter: blur(16px);
flex: 0 0 auto;
background:
linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
url("/images/KCI%20geo.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: none;
backdrop-filter: none;
} }


.nav-wrap { .nav-wrap {
@@ -88,11 +104,12 @@ img {
display: grid; display: grid;
place-items: center; place-items: center;
color: white; color: white;
background: linear-gradient(135deg, var(--purple-800), var(--purple-500));
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 14px; border-radius: 14px;
font-weight: 800; font-weight: 800;
letter-spacing: -0.04em; letter-spacing: -0.04em;
box-shadow: 0 8px 18px rgba(101, 41, 160, 0.24);
box-shadow: none;
} }


.brand strong, .brand strong,
@@ -129,6 +146,8 @@ img {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center;
line-height: 1.2;
padding: 0 24px; padding: 0 24px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 999px; border-radius: 999px;
@@ -190,21 +209,12 @@ img {
} }


.hero::before { .hero::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
left: -260px;
bottom: -320px;
border: 70px solid rgba(124, 59, 192, 0.06);
border-radius: 50%;
content: none;
} }


.hero-grid {
display: grid;
grid-template-columns: 1.03fr 0.97fr;
align-items: center;
gap: 72px;

.hero-copy {
padding-left: 32px;
} }


.eyebrow { .eyebrow {
@@ -251,7 +261,7 @@ img {
} }


.trust-list li::before { .trust-list li::before {
content: "✓";
content: "\2713";
margin-right: 8px; margin-right: 8px;
color: var(--success); color: var(--success);
font-weight: 800; font-weight: 800;
@@ -265,14 +275,11 @@ img {
} }


.envelope-card { .envelope-card {
position: relative;
width: min(100%, 550px);
aspect-ratio: 1.56 / 1;
overflow: hidden;
padding: 38px;
min-height: 320px;
background-image: url("/images/back.png"); background-image: url("/images/back.png");
background-size: cover;
background-position: center;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
border: 1px solid rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.34);
border-radius: 24px; border-radius: 24px;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
@@ -316,7 +323,7 @@ img {


.service-strip { .service-strip {
color: white; color: white;
background: var(--purple-950);
background: #254B74;
} }


.service-strip-grid { .service-strip-grid {
@@ -798,11 +805,13 @@ details p {
font-size: 0.87rem; font-size: 0.87rem;
} }


.cta-section {
padding: 0 0 90px;
background: var(--surface-soft);


#request-order {
background: transparent;
} }



.cta-card { .cta-card {
min-height: 250px; min-height: 250px;
display: flex; display: flex;
@@ -813,7 +822,10 @@ details p {
color: white; color: white;
background: background:
radial-gradient(circle at 85% 20%, rgba(255,255,255,0.13), transparent 25%), radial-gradient(circle at 85% 20%, rgba(255,255,255,0.13), transparent 25%),
linear-gradient(135deg, var(--purple-950), var(--purple-700));
url("/images/blurple.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }


@@ -821,69 +833,94 @@ details p {
color: #d8bcea; color: #d8bcea;
} }


.cta-card h2 {
max-width: 700px;
margin: 10px 0 0;
font-size: clamp(1.8rem, 3vw, 2.8rem);
line-height: 1.1;
letter-spacing: -0.04em;
}


.site-footer {
padding: 65px 0 26px;
color: rgba(255,255,255,0.68);
background: #170b24;
}


.footer-grid {
display: grid;
grid-template-columns: 1.6fr repeat(3, 1fr);
gap: 48px;
.cta-card .button-light {
color: white;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.42);
box-shadow: none;
} }


.footer-grid > div {
.cta-card .button-light:hover {
background: rgba(255,255,255,0.22);
}
.site-footer {
flex: 0 0 auto;
padding: 6px 0 4px;
color: rgba(255,255,255,0.84);
background: #254B74;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
gap: 10px;
font-size: 0.78rem;
gap: 4px;
} }


.footer-grid > div:first-child {
padding-right: 50px;
.footer-compact-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
} }


.footer-grid strong {
color: white;
.footer-logo-inline img {
display: block;
width: 104px;
height: auto;
} }


.footer-brand {
color: white;
margin-bottom: 8px;
.footer-inline-content {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 12px;
font-size: 0.62rem;
line-height: 1.2;
} }


.footer-brand small {
color: rgba(255,255,255,0.5);
.footer-inline-content strong,
.footer-inline-content a,
.footer-bottom a {
color: white;
} }


.footer-grid p {
margin: 0;
.footer-inline-content a {
text-decoration: none;
} }


.footer-grid a:hover {
color: white;
.footer-badge-inline img {
display: block;
width: 104px;
height: auto;
} }


.footer-bottom { .footer-bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 30px;
margin-top: 45px;
padding-top: 24px;
gap: 8px;
padding-top: 3px;
border-top: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.1);
font-size: 0.72rem;
font-size: 0.52rem;
line-height: 1.2;
} }


@media (max-width: 820px) {
.footer-compact-row {
grid-template-columns: 1fr;
gap: 6px;
justify-items: start;
}

.footer-logo-inline img {
width: 78px;
}

.footer-bottom {
flex-direction: column;
}
}
dialog { dialog {
width: min(calc(100% - 32px), 500px); width: min(calc(100% - 32px), 500px);
padding: 0; padding: 0;
@@ -951,6 +988,7 @@ dialog::backdrop {


.hero-copy { .hero-copy {
max-width: 780px; max-width: 780px;
padding-left: 0;
} }


.hero-visual { .hero-visual {
@@ -971,8 +1009,9 @@ dialog::backdrop {
} }


.footer-grid { .footer-grid {
grid-template-columns: repeat(2, 1fr);
}
display: grid;
grid-template-columns: 1.6fr repeat(3, 1fr);
gap: 24px;
} }


@media (max-width: 720px) { @media (max-width: 720px) {
@@ -997,69 +1036,65 @@ dialog::backdrop {
} }


.envelope-card { .envelope-card {
padding: 24px;
border-radius: 18px;
}
min-height: 320px;
background-image: url("/images/back.png");
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
border: 1px solid rgba(255,255,255,0.34);
border-radius: 24px;
box-shadow: var(--shadow-lg);
transform: rotate(-3deg);
}



main.routekit-main {
flex: 1 1 auto;
height: 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
































.stat-card {
display: none;
}


.service-strip-grid,
.card-grid,
.process-grid,
.two-columns,
.option-grid,
.upload-grid,
.footer-grid {
grid-template-columns: 1fr;
}


.service-strip-grid > div {
min-height: 90px;
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,0.11);
}


.section {
padding: 74px 0;
}


.feature-card,
.process-step {
min-height: auto;
}


.process-step h3 {
margin-top: 25px;
}


.form-section {
padding: 25px 20px;
}


.option-card {
grid-template-columns: auto 1fr;
}


.option-card b {
grid-column: 2;
}


.cta-card {
min-height: 0;
align-items: flex-start;
flex-direction: column;
padding: 36px 26px;
border-radius: 22px;
}


.footer-grid > div:first-child {
padding-right: 0;
}


.footer-bottom {
align-items: flex-start;
flex-direction: column;
}
}

BIN
public/images/KCI ELECTION printing (white).png Dosyayı Görüntüle

Önce Sonra
Genişlik: 716  |  Yükseklik: 868  |  Boyut: 57KB

BIN
public/images/KCI ELECTION printing.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 730  |  Yükseklik: 912  |  Boyut: 57KB

BIN
public/images/KCI geo.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 2072  |  Yükseklik: 266  |  Boyut: 93KB

BIN
public/images/KCI_design print mail.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 343  |  Yükseklik: 138  |  Boyut: 17KB

BIN
public/images/blurple.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 567  |  Yükseklik: 162  |  Boyut: 3.6KB

BIN
public/images/certified-election-mail-service-provider.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 1800  |  Yükseklik: 1800  |  Boyut: 520KB

BIN
public/images/swaggy backer.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 1026  |  Yükseklik: 630  |  Boyut: 108KB

BIN
public/images/swaggy geo.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 900  |  Yükseklik: 900  |  Boyut: 57KB

+ 1
- 1
public/web.config Dosyayı Görüntüle

@@ -49,7 +49,7 @@
<add key="SmtpUsername" value="" /> <add key="SmtpUsername" value="" />
<add key="SmtpPassword" value="" /> <add key="SmtpPassword" value="" />
<add key="SmtpUseSSL" value="false" /> <add key="SmtpUseSSL" value="false" />
<add key="SmtpFromAddress" value="orders@example.com" />
<add key="SmtpFromAddress" value="no-reply@kentcommunications.com" />


<!-- Hours before an order continuation link (token) expires --> <!-- Hours before an order continuation link (token) expires -->
<add key="OrderTokenExpirationHours" value="24" /> <add key="OrderTokenExpirationHours" value="24" />


Yaz Önizleme
Yükleniyor…
İptal
Kaydet

Powered by TurnKey Linux.