Skip to content

feat(navbar): navbar + copy #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 23, 2025
Merged

feat(navbar): navbar + copy #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a4d443
feat(navbar): navbar + copy
carlagn Jul 23, 2025
8a10818
feat(navbar): navbar + copy
carlagn Jul 23, 2025
9894446
Merge branch 'main' into feat/navbar-copy
mhessdev Jul 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 36 additions & 20 deletions claim-db-worker/src/templates/claim-success-template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { footer } from "./footer-template";
import { navbar } from "./navbar-template";

export function getClaimSuccessHtml(projectID: string) {
return `
<!DOCTYPE html>
Expand All @@ -13,17 +16,26 @@ export function getClaimSuccessHtml(projectID: string) {
margin: 0;
padding: 0;
min-height: 100vh;
background: url('/hero-background.svg') no-repeat center center fixed;
background: url('/hero-background.svg') no-repeat center center, linear-gradient(180deg, #090A15 0%, rgba(9, 10, 21, 0.5) 19.02%, rgba(9, 10, 21, 0.5) 74%, rgba(9, 10, 21, 0.95) 100%);
background-size: cover;
color: #fff;
font-family: 'Barlow', system-ui, sans-serif;
display: flex;
align-items: center;
justify-content: center;
overscroll-behavior: none;
justify-content: space-between;
flex-direction: column;
min-height: 100vh;
}
.container {
text-align: center;
display: flex;
flex-direction: column;
min-height: 50vh;
height: 100%;
align-items: center;
justify-content: space-between;
}

.title {
font-size: 4rem;
font-weight: 700;
Expand Down Expand Up @@ -109,26 +121,30 @@ export function getClaimSuccessHtml(projectID: string) {
</style>
</head>
<body>
${navbar()}
<div class="container">
<div>
<img src="/prisma-postgres-logo.svg" alt="Prisma Postgres Logo" width="250" height="100">
</div>
<div class="title">Congratulations!</div>
<div class="message">You have successfully claimed your database</div>
<a class="success-btn" href="https://console.prisma.io/" target="_blank" rel="noopener">
Go use your database
<img src="/arrow-up.svg" alt="Arrow up" class="arrow-up-icon">
</a>
<div class="db-img-container">
<img src="/db-img.svg" alt="Database Success" class="db-img">
<span class="checkmark-icon">
<svg width="48" height="48" viewBox="0 0 64 64" fill="none" aria-hidden="true">
<circle cx="32" cy="32" r="28" fill="#5eead4"/>
<path d="M20 34l8 8 16-16" stroke="#222B32" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<div class="content">
<div>
<img src="/prisma-postgres-logo.svg" alt="Prisma Postgres Logo" width="250" height="100">
</div>
<div class="title">Congratulations!</div>
<div class="message">You have successfully claimed your database</div>
<a class="success-btn" href="https://console.prisma.io/" target="_blank" rel="noopener">
Go use your database
<img src="/arrow-up.svg" alt="Arrow up" class="arrow-up-icon">
</a>
<div class="db-img-container">
<img src="/db-img.svg" alt="Database Success" class="db-img">
<span class="checkmark-icon">
<svg width="48" height="48" viewBox="0 0 64 64" fill="none" aria-hidden="true">
<circle cx="32" cy="32" r="28" fill="#5eead4"/>
<path d="M20 34l8 8 16-16" stroke="#222B32" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
</div>
</div>
${footer()}
</body>
</html>
`;
Expand Down
17 changes: 15 additions & 2 deletions claim-db-worker/src/templates/claim-template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { footer } from "./footer-template";
import { navbar } from "./navbar-template";

// claim-db-worker/src/claim-template.ts
export function getClaimHtml(projectID: string, authUrl: string) {
return `<!DOCTYPE html>
Expand All @@ -19,8 +22,18 @@ export function getClaimHtml(projectID: string, authUrl: string) {
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-direction: column;
min-height: 100vh;
}
.container {
text-align: center;
display: flex;
flex-direction: column;
min-height: 50vh;
height: 100%;
align-items: center;
justify-content: center;
justify-content: space-between;
}
.logo {
display: flex;
Expand Down Expand Up @@ -102,7 +115,7 @@ export function getClaimHtml(projectID: string, authUrl: string) {
Claim database
<img src="/arrow-right.svg" alt="Arrow Right" class="arrow-right-icon">
</button>
<div class="message subtext">*your <span style="font-weight:700;">database will expire after 24hrs</span> unless you <span style="text-decoration:underline;">authenticate</span></div>
<div class="message subtext">*your <span style="font-weight:700;">database will expire after 24 hours</span> unless you <span style="text-decoration:underline;">authenticate</span></div>
</div>
<script>
document.getElementById('claim-btn').addEventListener('click', function() {
Expand Down
53 changes: 33 additions & 20 deletions claim-db-worker/src/templates/error-template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { footer } from "./footer-template";
import { navbar } from "./navbar-template";

export function getErrorHtml(title: string, message: string, details?: string) {
return `
<!DOCTYPE html>
Expand All @@ -11,18 +14,24 @@ export function getErrorHtml(title: string, message: string, details?: string) {
body {
margin: 0;
padding: 0;
min-height: 100vh;
background: url('/hero-background.svg') no-repeat center center fixed;
background-size: cover;
color: #fff;
font-family: 'Barlow', system-ui, sans-serif;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
flex-direction: column;
min-height: 100vh;
}

.container {
text-align: center;
display: flex;
flex-direction: column;
min-height: 50vh;
height: 100%;
align-items: center;
justify-content: space-between;
}

.error-header {
Expand Down Expand Up @@ -77,26 +86,30 @@ export function getErrorHtml(title: string, message: string, details?: string) {
</style>
</head>
<body>
${navbar()}
<div class="container">
<div class="error-header">
<span class="error-x" aria-label="Error">
<svg width="64" height="64" viewBox="0 0 96 96" fill="none" aria-hidden="true" style="display: block">
<circle cx="48" cy="48" r="40" fill="#FC8181" />
<line x1="34" y1="34" x2="62" y2="62" stroke="#222B32" stroke-width="8" stroke-linecap="round" />
<line x1="62" y1="34" x2="34" y2="62" stroke="#222B32" stroke-width="8" stroke-linecap="round" />
</svg>
</span>
<span class="title">${title}</span>
<div class="content">
<div class="error-header">
<span class="error-x" aria-label="Error">
<svg width="64" height="64" viewBox="0 0 96 96" fill="none" aria-hidden="true" style="display: block">
<circle cx="48" cy="48" r="40" fill="#FC8181" />
<line x1="34" y1="34" x2="62" y2="62" stroke="#222B32" stroke-width="8" stroke-linecap="round" />
<line x1="62" y1="34" x2="34" y2="62" stroke="#222B32" stroke-width="8" stroke-linecap="round" />
</svg>
</span>
<span class="title">${title}</span>
</div>
<div class="message">${message}</div>
${
details
? `
<pre class="error-details"><code>${details}</code></pre>
`
: ''
}
</div>
<div class="message">${message}</div>
${
details
? `
<pre class="error-details"><code>${details}</code></pre>
`
: ''
}
</div>
${footer()}
</body>
</html>

Expand Down
65 changes: 65 additions & 0 deletions claim-db-worker/src/templates/footer-template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
export function footer() {
return `
<style>
footer {
width: 100vw;
padding: 0 16px;
margin-top: auto;
}
.social-links {
display: flex;
gap: 16px;
}
.footer-content, .footer-copyright {
max-width: 1240px;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.footer-copyright {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid #2D3748;
}
.footer-copyright .compliance-logos {
display: flex;
gap: 56px;
}
</style>

<footer>
<div class="footer-content">
<a target="_blank" rel="opener noferrer" href="https://prisma.io">
<img src="/logo-dark.svg" alt="Prisma logo" />
</a>
<div class="social-links">
<a href="https://pris.ly/discord" target="_blank" rel="opener noferrer">
<img src="/discord.svg" width="30" height="30" alt="Discord logo" />
</a>
<a href="https://pris.ly/x" target="_blank" rel="opener noferrer">
<img src="/xtwitter.svg" width="30" height="30" alt="Twitter/X logo" />
</a>
<a href="https://pris.ly/youtube" target="_blank" rel="opener noferrer">
<img src="/youtube.svg" width="30" height="30" alt="Youtube logo" />
</a>
<a href="https://pris.ly/whatsapp" target="_blank" rel="opener noferrer">
<img src="/whatsapp.svg" width="30" height="30" alt="Whatsapp logo" />
</a>
<a href="https://pris.ly/github" target="_blank" rel="opener noferrer">
<img src="/github.svg" width="30" height="30" alt="Github logo" />
</a>
</div>
</div>
<div class="footer-copyright">
<span>© 2024 Prisma Data, Inc.</span>
<div class="compliance-logos">
<img src="/gdpr.svg" alt="GDPR Logo" width="35" height="35" />
<img src="/hipaa.svg" alt="HIPAA Logo" width="62" height="30" />
<img src="/iso27.svg" alt="ISO27 Logo" width="73" height="27" />
<img src="/soc2.svg" alt="SOC2 Logo" width="60" height="28" />
</div>
</div>
</footer>
`
}
77 changes: 5 additions & 72 deletions claim-db-worker/src/templates/homepage-template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { getTerminalAnimationHtml } from './terminal-animation-template';
import { footer } from './footer-template';
import { navbar } from './navbar-template';

export function getHomepageHtml() {
return `
Expand Down Expand Up @@ -340,46 +341,10 @@ export function getHomepageHtml() {
gap: 75px;
padding-bottom: 133px;
}

footer {
width: 100vw;
padding: 0 16px;
}
.social-links {
display: flex;
gap: 16px;
}
.footer-content, .footer-copyright {
max-width: 1240px;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.footer-copyright {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid #2D3748;
}
.footer-copyright .compliance-logos {
display: flex;
gap: 56px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar-content">
<a target="_blank" rel="opener noferrer" href="https://prisma.io"><img src="/logo-dark.svg" alt="Prisma logo" /></a>
<div class="nav-links">
<a target="_blank" rel="opener noferrer" href="http://github.com/prisma"><img src="/github.svg" alt="github" width="31" height="31"/></a>
<div class="btn-group">
<a class="btn" href="https://console.prisma.io/login" target="_blank" rel="opener noferrer">Login</a>
<a class="btn primary" href="https://console.prisma.io/sign-up" target="_blank" rel="opner noferrer">Sign up</a>
</div>
</div>
</div>
</nav>
${navbar()}
<div class="header-container">
<div class="header-subtitle">
<img src="/prisma-postgres-logo.svg" alt="Prisma Postgres Logo" width="250" />
Expand All @@ -396,7 +361,7 @@ export function getHomepageHtml() {
<img src="/copy-icon.svg" alt="Copy Icon" width="20" height="20" />
</button>
</div>
<p class="description">your <b>database will expire after 24hrs</b> unless you claim it</p>
<p class="description">your <b>database will expire after 24 hours</b> unless you claim it</p>
</div>
<div class="section-container">
<section class="steps-options">
Expand Down Expand Up @@ -454,39 +419,7 @@ export function getHomepageHtml() {
</div>
</section>
</div>
<footer>
<div class="footer-content">
<a target="_blank" rel="opener noferrer" href="https://prisma.io">
<img src="/logo-dark.svg" alt="Prisma logo" />
</a>
<div class="social-links">
<a href="https://pris.ly/discord" target="_blank" rel="opener noferrer">
<img src="/discord.svg" width="30" height="30" alt="Discord logo" />
</a>
<a href="https://pris.ly/x" target="_blank" rel="opener noferrer">
<img src="/xtwitter.svg" width="30" height="30" alt="Twitter/X logo" />
</a>
<a href="https://pris.ly/youtube" target="_blank" rel="opener noferrer">
<img src="/youtube.svg" width="30" height="30" alt="Youtube logo" />
</a>
<a href="https://pris.ly/whatsapp" target="_blank" rel="opener noferrer">
<img src="/whatsapp.svg" width="30" height="30" alt="Whatsapp logo" />
</a>
<a href="https://pris.ly/github" target="_blank" rel="opener noferrer">
<img src="/github.svg" width="30" height="30" alt="Github logo" />
</a>
</div>
</div>
<div class="footer-copyright">
<span>© 2024 Prisma Data, Inc.</span>
<div class="compliance-logos">
<img src="/gdpr.svg" alt="GDPR Logo" width="35" height="35" />
<img src="/hipaa.svg" alt="HIPAA Logo" width="62" height="30" />
<img src="/iso27.svg" alt="ISO27 Logo" width="73" height="27" />
<img src="/soc2.svg" alt="SOC2 Logo" width="60" height="28" />
</div>
</div>
</footer>
${footer()}
</body>
<script>
document.addEventListener('DOMContentLoaded', function () {
Expand Down
Loading
Loading