Compare commits
3
Commits
b50e6e9280
...
d91c03002b
| Author | SHA1 | Date | |
|---|---|---|---|
 nobswebdev
|
d91c03002b | ||
|
nobswebdev
|
8d201527a9 | ||
|
nobswebdev
|
66d5744418 |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 192 KiB After Width: | Height: | Size: 704 KiB |
+43
-22
@@ -1,4 +1,3 @@
|
||||
|
||||
:root {
|
||||
--brand: #f78f1e;
|
||||
--brand-deep: #d96f12;
|
||||
@@ -13,6 +12,9 @@
|
||||
--muted: #8b9298;
|
||||
--max-width: 72rem;
|
||||
--header-height: 5rem;
|
||||
--notice-bar-height: 1.875rem;
|
||||
--site-header-height: calc(var(--header-height) + var(--notice-bar-height));
|
||||
--sticky-offset: calc((var(--site-header-height) + 0.5rem) * 0.5);
|
||||
--radius: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
}
|
||||
@@ -27,6 +29,10 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
main > section[id] {
|
||||
scroll-margin-top: var(--sticky-offset);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
@@ -35,7 +41,11 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text);
|
||||
@@ -68,7 +78,6 @@ a:hover {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
|
||||
.site-notice {
|
||||
padding-block: 0.375rem;
|
||||
text-align: center;
|
||||
@@ -145,7 +154,6 @@ a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -157,7 +165,10 @@ a:hover {
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
transition:
|
||||
background 0.15s,
|
||||
border-color 0.15s,
|
||||
color 0.15s;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
@@ -184,7 +195,6 @@ a:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
padding-block: clamp(3rem, 8vw, 6rem);
|
||||
@@ -196,8 +206,16 @@ a:hover {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% -20%, rgba(247, 143, 30, 0.18), transparent),
|
||||
radial-gradient(ellipse 50% 40% at 100% 50%, rgba(0, 154, 218, 0.1), transparent);
|
||||
radial-gradient(
|
||||
ellipse 80% 60% at 50% -20%,
|
||||
rgba(247, 143, 30, 0.18),
|
||||
transparent
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse 50% 40% at 100% 50%,
|
||||
rgba(0, 154, 218, 0.1),
|
||||
transparent
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -243,7 +261,7 @@ a:hover {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 0.75rem;
|
||||
margin: 0 0 1.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@@ -267,13 +285,13 @@ a:hover {
|
||||
}
|
||||
|
||||
.hero__sub {
|
||||
margin: 0 0 2rem;
|
||||
margin: 2rem 0 2rem;
|
||||
font-size: clamp(1rem, 2vw, 1.125rem);
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
.hero__actions-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
@@ -304,7 +322,6 @@ a:hover {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.section {
|
||||
padding-block: clamp(3rem, 6vw, 5rem);
|
||||
}
|
||||
@@ -326,7 +343,6 @@ a:hover {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
|
||||
.about p {
|
||||
margin: 0 0 1rem;
|
||||
max-width: 42rem;
|
||||
@@ -337,7 +353,6 @@ a:hover {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.pillars {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -382,7 +397,6 @@ a:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -404,7 +418,12 @@ a:hover {
|
||||
|
||||
.feature-card--lead {
|
||||
border-color: rgba(247, 143, 30, 0.4);
|
||||
background: linear-gradient(135deg, rgba(247, 143, 30, 0.08), rgba(0, 154, 218, 0.05), var(--surface));
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(247, 143, 30, 0.08),
|
||||
rgba(0, 154, 218, 0.05),
|
||||
var(--surface)
|
||||
);
|
||||
}
|
||||
|
||||
.feature-card__icon {
|
||||
@@ -441,7 +460,6 @@ a:hover {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@@ -493,7 +511,6 @@ a:hover {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
|
||||
.roadmap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@@ -529,7 +546,6 @@ a:hover {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -542,6 +558,14 @@ a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 40.01rem) {
|
||||
.gallery__item--last {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: center;
|
||||
width: calc((100% - 1.25rem) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__item {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -640,7 +664,6 @@ body:has(.lightbox:target) {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
|
||||
.cta-block {
|
||||
text-align: center;
|
||||
padding: 2.5rem 1.5rem;
|
||||
@@ -669,7 +692,6 @@ body:has(.lightbox:target) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -711,7 +733,6 @@ body:has(.lightbox:target) {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
|
||||
.site-footer {
|
||||
padding-block: 2rem 2.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
|
||||
+101
-62
@@ -5,9 +5,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="description"
|
||||
content="NullCart — free, self-hosted Monero shop. No JS, no buyer accounts. Sell on clearnet and Tor."
|
||||
content="NullCart - free, self-hosted, privacy-focused crypto shop. Sell on clearnet and Tor."
|
||||
/>
|
||||
<title>NullCart — Free self-hosted Monero shop</title>
|
||||
<title>NullCart - free self-hosted crypto shop</title>
|
||||
<link rel="icon" href="assets/favicon.png" type="image/png" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
@@ -60,7 +60,7 @@
|
||||
/>
|
||||
<div class="hero__content">
|
||||
<p class="hero__badge">Free & open source</p>
|
||||
<h1>Self-hosted Monero shop</h1>
|
||||
<h1>Self-hosted crypto shop</h1>
|
||||
<ul class="hero__highlights" aria-label="Key features">
|
||||
<li>Non-custodial</li>
|
||||
<li>No JS</li>
|
||||
@@ -68,10 +68,11 @@
|
||||
<li>Clearnet & Tor onion</li>
|
||||
</ul>
|
||||
<p class="hero__sub">
|
||||
Complete crypto e-commerce solution, with no third parties
|
||||
involved. Built with a mission to support the crypto economy.
|
||||
Complete, privacy-focused crypto e-commerce solution. Built with a
|
||||
mission to support the crypto economy.
|
||||
</p>
|
||||
<div class="hero__actions">
|
||||
<div class="hero__actions-row">
|
||||
<div class="link-group">
|
||||
<span class="link-group__label">Repository</span>
|
||||
<div class="repo-links">
|
||||
@@ -114,21 +115,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--border">
|
||||
<div class="container about">
|
||||
<h2 class="section__title">What is NullCart?</h2>
|
||||
<p>
|
||||
NullCart is an open-source, self-hosted shop for accepting Monero.
|
||||
Run it on your server with a non-custodial wallet, and sell on
|
||||
clearnet and Tor.
|
||||
</p>
|
||||
<p>
|
||||
Built for the Monero community — designed for a maximum privacy
|
||||
experience and full control over funds and infrastructure. Lower the
|
||||
barrier to selling with XMR and help grow the circular crypto
|
||||
economy.
|
||||
NullCart is a free, open-source crypto shop you host yourself. You
|
||||
run it on your server with built-in non-custodial wallets - no
|
||||
payment processors in the middle. Buyers pay in crypto without
|
||||
accounts, and the storefront runs without JavaScript. You manage
|
||||
products and orders from a merchant CMS, on clearnet and Tor.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -137,8 +135,7 @@
|
||||
<div class="container">
|
||||
<h2 class="section__title">Privacy features</h2>
|
||||
<p class="section__lead">
|
||||
Built for the Monero community — privacy at every layer of the buyer
|
||||
experience.
|
||||
Privacy at every layer of the buyer experience.
|
||||
</p>
|
||||
<ul class="pillars privacy-features">
|
||||
<li class="pillar">
|
||||
@@ -155,11 +152,11 @@
|
||||
</li>
|
||||
<li class="pillar">
|
||||
<span class="pillar__dot" aria-hidden="true"></span> Non-custodial
|
||||
wallet
|
||||
wallets
|
||||
</li>
|
||||
<li class="pillar">
|
||||
<span class="pillar__dot" aria-hidden="true"></span> XMR-only
|
||||
payments
|
||||
<span class="pillar__dot" aria-hidden="true"></span> Monero
|
||||
supported
|
||||
</li>
|
||||
<li class="pillar">
|
||||
<span class="pillar__dot" aria-hidden="true"></span> Zero
|
||||
@@ -193,7 +190,7 @@
|
||||
<div class="container">
|
||||
<h2 class="section__title">Features</h2>
|
||||
<p class="section__lead">
|
||||
Everything you need to sell digital and physical goods with Monero.
|
||||
Everything you need to sell digital and physical goods with crypto.
|
||||
</p>
|
||||
<div class="features-grid">
|
||||
<article class="feature-card feature-card--lead">
|
||||
@@ -214,12 +211,11 @@
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
No JavaScript needed — the buyer shop runs without client-side
|
||||
scripts
|
||||
No JavaScript on the buyer shop - no client-side scripts
|
||||
</li>
|
||||
<li>Works perfectly in Tor Browser strictest security mode</li>
|
||||
<li>Works in Tor Browser strictest security mode</li>
|
||||
<li>
|
||||
No sign-up, no profiles — orders opened with a private access
|
||||
No sign-up or profiles - orders open with a private access
|
||||
token
|
||||
</li>
|
||||
</ul>
|
||||
@@ -237,18 +233,19 @@
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 6v12M8 10h8M8 14h8" />
|
||||
</svg>
|
||||
<h3>Monero-native payments</h3>
|
||||
<h3>Direct crypto payments</h3>
|
||||
<p class="feature-card__lead">
|
||||
Built-in Monero integration. Zero third-party payment services.
|
||||
Built-in crypto wallets. No third-party payment services.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Direct XMR payments to your own wallet — no custodial gateway
|
||||
Payments go straight to your wallets - no custodial gateway
|
||||
</li>
|
||||
<li>
|
||||
Per-order addresses with QR codes; live rates, fiat display
|
||||
Per-order addresses with QR codes, live rates, and fiat
|
||||
display
|
||||
</li>
|
||||
<li>You hold the seed — funds never touch a middleman</li>
|
||||
<li>You hold the keys - funds never touch a middleman</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
@@ -266,7 +263,7 @@
|
||||
</svg>
|
||||
<h3>E-commerce features</h3>
|
||||
<p class="feature-card__lead">
|
||||
A full storefront for digital and physical goods — catalog,
|
||||
A full storefront for digital and physical goods - catalog,
|
||||
cart, checkout, and fulfillment.
|
||||
</p>
|
||||
<ul>
|
||||
@@ -275,15 +272,15 @@
|
||||
</li>
|
||||
<li>Shopping cart, checkout, and discount codes</li>
|
||||
<li>
|
||||
Auto-deliver digital goods; quote and collect shipping for
|
||||
physical orders
|
||||
Auto-deliver digital goods and quote shipping for physical
|
||||
orders
|
||||
</li>
|
||||
<li>
|
||||
Order tracking, live payment status, and per-order buyer chat
|
||||
</li>
|
||||
<li>Custom branding — your logo, favicon, and shop name</li>
|
||||
<li>Custom branding - your logo, favicon, and shop name</li>
|
||||
<li>
|
||||
Prices shown in fiat, paid in Monero with live exchange rates
|
||||
Prices shown in fiat, paid in crypto with live exchange rates
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
@@ -321,7 +318,7 @@
|
||||
<div class="container">
|
||||
<h2 class="section__title">How it works</h2>
|
||||
<p class="section__lead">
|
||||
Three steps from zero to selling with Monero.
|
||||
Three steps from zero to selling with crypto.
|
||||
</p>
|
||||
<ol class="steps">
|
||||
<li class="step">
|
||||
@@ -338,8 +335,8 @@
|
||||
<li class="step">
|
||||
<h3>Sell</h3>
|
||||
<p>
|
||||
Buyers pay in XMR; you fulfill orders, chat when needed, get
|
||||
notified via SimpleX.
|
||||
Buyers pay in crypto. You fulfill orders, chat when needed, and
|
||||
get notified via SimpleX.
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
@@ -362,14 +359,33 @@
|
||||
<div class="gallery__frame">
|
||||
<img
|
||||
src="assets/gallery/storefront.png"
|
||||
width="1508"
|
||||
height="902"
|
||||
width="1469"
|
||||
height="899"
|
||||
alt="Storefront product catalog"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<figcaption class="gallery__caption">
|
||||
Storefront — product catalog
|
||||
Storefront - product catalog
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery__item">
|
||||
<a
|
||||
class="gallery__link"
|
||||
href="#lightbox-cart"
|
||||
aria-label="View larger cart screenshot"
|
||||
>
|
||||
<div class="gallery__frame">
|
||||
<img
|
||||
src="assets/gallery/cart.png"
|
||||
width="1469"
|
||||
height="899"
|
||||
alt="Shopping cart"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<figcaption class="gallery__caption">
|
||||
Cart - shopping cart
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery__item">
|
||||
@@ -381,14 +397,14 @@
|
||||
<div class="gallery__frame">
|
||||
<img
|
||||
src="assets/gallery/checkout.png"
|
||||
width="1508"
|
||||
height="902"
|
||||
alt="Checkout with Monero QR code"
|
||||
width="1469"
|
||||
height="899"
|
||||
alt="Checkout with crypto QR code"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<figcaption class="gallery__caption">
|
||||
Checkout — XMR payment with QR code
|
||||
Checkout - crypto payment with QR code
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery__item">
|
||||
@@ -400,17 +416,17 @@
|
||||
<div class="gallery__frame">
|
||||
<img
|
||||
src="assets/gallery/order.png"
|
||||
width="1508"
|
||||
height="902"
|
||||
width="1469"
|
||||
height="899"
|
||||
alt="Order page with encrypted chat"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<figcaption class="gallery__caption">
|
||||
Order page — status and encrypted chat
|
||||
Order page - status and encrypted chat
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery__item">
|
||||
<figure class="gallery__item gallery__item--last">
|
||||
<a
|
||||
class="gallery__link"
|
||||
href="#lightbox-cms"
|
||||
@@ -446,8 +462,8 @@
|
||||
<img
|
||||
class="lightbox__img"
|
||||
src="assets/gallery/storefront.png"
|
||||
width="1508"
|
||||
height="902"
|
||||
width="1469"
|
||||
height="899"
|
||||
alt="Storefront product catalog"
|
||||
/>
|
||||
<a class="lightbox__close" href="#gallery" aria-label="Close"
|
||||
@@ -459,7 +475,7 @@
|
||||
class="lightbox"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Checkout with Monero QR code"
|
||||
aria-label="Checkout with crypto QR code"
|
||||
>
|
||||
<a
|
||||
class="lightbox__backdrop"
|
||||
@@ -469,9 +485,32 @@
|
||||
<img
|
||||
class="lightbox__img"
|
||||
src="assets/gallery/checkout.png"
|
||||
width="1508"
|
||||
height="902"
|
||||
alt="Checkout with Monero QR code"
|
||||
width="1469"
|
||||
height="899"
|
||||
alt="Checkout with crypto QR code"
|
||||
/>
|
||||
<a class="lightbox__close" href="#gallery" aria-label="Close"
|
||||
>×</a
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
id="lightbox-cart"
|
||||
class="lightbox"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Shopping cart"
|
||||
>
|
||||
<a
|
||||
class="lightbox__backdrop"
|
||||
href="#gallery"
|
||||
aria-label="Close"
|
||||
></a>
|
||||
<img
|
||||
class="lightbox__img"
|
||||
src="assets/gallery/cart.png"
|
||||
width="1469"
|
||||
height="899"
|
||||
alt="Shopping cart"
|
||||
/>
|
||||
<a class="lightbox__close" href="#gallery" aria-label="Close"
|
||||
>×</a
|
||||
@@ -492,8 +531,8 @@
|
||||
<img
|
||||
class="lightbox__img"
|
||||
src="assets/gallery/order.png"
|
||||
width="1508"
|
||||
height="902"
|
||||
width="1469"
|
||||
height="899"
|
||||
alt="Order page with encrypted chat"
|
||||
/>
|
||||
<a class="lightbox__close" href="#gallery" aria-label="Close"
|
||||
@@ -531,8 +570,8 @@
|
||||
<div class="cta-block">
|
||||
<h2>Live demo</h2>
|
||||
<p>
|
||||
Try a running NullCart shop — browse products, cart, and checkout
|
||||
flow. Test payments with stagenet Monero.
|
||||
Try a running NullCart shop. Browse products, cart, and checkout.
|
||||
Test payments on test networks.
|
||||
</p>
|
||||
<div class="repo-links repo-links--center">
|
||||
<a
|
||||
@@ -593,10 +632,10 @@
|
||||
</p>
|
||||
</li>
|
||||
<li class="roadmap__item">
|
||||
<h3>More privacy coins</h3>
|
||||
<h3>More cryptocurrencies</h3>
|
||||
<p>
|
||||
Support for additional privacy-focused cryptocurrencies beyond
|
||||
Monero.
|
||||
Support for more coins over time, with the same non-custodial
|
||||
wallet model.
|
||||
</p>
|
||||
</li>
|
||||
<li class="roadmap__item">
|
||||
@@ -611,7 +650,7 @@
|
||||
<div class="container">
|
||||
<h2 class="section__title">Contact</h2>
|
||||
<p class="section__lead">
|
||||
Questions, feedback, or collaboration — reach out.
|
||||
Questions, feedback, or collaboration - reach out.
|
||||
</p>
|
||||
<div class="contact-grid">
|
||||
<div class="contact-card">
|
||||
|
||||
Reference in New Issue
Block a user