dcovington
/
Purple_Envelop_Order_Site
1
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

Changes in looks

master
Daniel Covington 5日前
親
c7687ee27f
コミット
9deee49df3
15個のファイルの変更、232行の追加、156行の削除
分割表示
差分オプション
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード
  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. バイナリ
      public/images/KCI ELECTION printing (white).png
  8. バイナリ
      public/images/KCI ELECTION printing.png
  9. バイナリ
      public/images/KCI geo.png
  10. バイナリ
      public/images/KCI_design print mail.png
  11. バイナリ
      public/images/blurple.png
  12. バイナリ
      public/images/certified-election-mail-service-provider.png
  13. バイナリ
      public/images/swaggy backer.png
  14. バイナリ
      public/images/swaggy geo.png
  15. +1
    -1
      public/web.config

+ 9
- 1
app/controllers/OrderApiController.asp ファイルの表示

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


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


' 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.
OrderMailer().SendOrderDetailsEmail order, model
@@ -131,3 +133,9 @@ Function OrderApiController()
Set OrderApiController = OrderApiController_Class__Singleton
End Function
%>







+ 3
- 1
app/controllers/OrderController.asp ファイルの表示

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



+ 8
- 2
app/views/Home/index.asp ファイルの表示

@@ -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-copy">
<span class="eyebrow">Election mail production made simple</span>
@@ -136,7 +136,7 @@
</div>
</section>

<section class="cta-section" style="padding: 0 0 48px;">
<section class="cta-section" style="padding: 40px 0;">
<div class="cta-card">
<div>
<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>
</div>
</section>







+ 29
- 3
app/views/shared/footer.asp ファイルの表示

@@ -1,8 +1,34 @@
</div>
 </div>
</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>
</html>

+ 19
- 20
app/views/shared/header.asp ファイルの表示

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

<style>
main.routekit-main {
flex: 1 1 auto;
height: 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-top: 1.5rem;
padding-bottom: 2rem;
}
</style>
</head>
<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">
<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>

<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>

<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">
<a class="nav-link text-white" href="/home">Home</a>
</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>
</li>
</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>
</nav>

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









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

+ 163
- 128
public/css/styles.css ファイルの表示

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

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

body {
height: 100vh;
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
overflow: hidden;
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;
line-height: 1.6;
}
@@ -60,12 +70,18 @@ img {
}

.site-header {
position: sticky;
top: 0;
position: relative;
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 {
@@ -88,11 +104,12 @@ img {
display: grid;
place-items: center;
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;
font-weight: 800;
letter-spacing: -0.04em;
box-shadow: 0 8px 18px rgba(101, 41, 160, 0.24);
box-shadow: none;
}

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

.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 {
@@ -251,7 +261,7 @@ img {
}

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

.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-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-radius: 24px;
box-shadow: var(--shadow-lg);
@@ -316,7 +323,7 @@ img {

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

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

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


#request-order {
background: transparent;
}


.cta-card {
min-height: 250px;
display: flex;
@@ -813,7 +822,10 @@ details p {
color: white;
background:
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);
}

@@ -821,69 +833,94 @@ details p {
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;
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 {
display: flex;
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);
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 {
width: min(calc(100% - 32px), 500px);
padding: 0;
@@ -951,6 +988,7 @@ dialog::backdrop {

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

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

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

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

.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;
}
}

バイナリ
public/images/KCI ELECTION printing (white).png ファイルの表示

変更前 変更後
幅: 716  |  高さ: 868  |  サイズ: 57KB

バイナリ
public/images/KCI ELECTION printing.png ファイルの表示

変更前 変更後
幅: 730  |  高さ: 912  |  サイズ: 57KB

バイナリ
public/images/KCI geo.png ファイルの表示

変更前 変更後
幅: 2072  |  高さ: 266  |  サイズ: 93KB

バイナリ
public/images/KCI_design print mail.png ファイルの表示

変更前 変更後
幅: 343  |  高さ: 138  |  サイズ: 17KB

バイナリ
public/images/blurple.png ファイルの表示

変更前 変更後
幅: 567  |  高さ: 162  |  サイズ: 3.6KB

バイナリ
public/images/certified-election-mail-service-provider.png ファイルの表示

変更前 変更後
幅: 1800  |  高さ: 1800  |  サイズ: 520KB

バイナリ
public/images/swaggy backer.png ファイルの表示

変更前 変更後
幅: 1026  |  高さ: 630  |  サイズ: 108KB

バイナリ
public/images/swaggy geo.png ファイルの表示

変更前 変更後
幅: 900  |  高さ: 900  |  サイズ: 57KB

+ 1
- 1
public/web.config ファイルの表示

@@ -49,7 +49,7 @@
<add key="SmtpUsername" value="" />
<add key="SmtpPassword" value="" />
<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 -->
<add key="OrderTokenExpirationHours" value="24" />


書き込み プレビュー
読み込み中…
キャンセル
保存

Powered by TurnKey Linux.