Replace inline styles with CSS classes across template files
- Add comprehensive CSS classes to common.css for status messages, layouts, and styling - Remove all inline styles from shop_settings.j2 (16 instances) - Remove all inline styles from crypto_checkout.j2 (25 instances) - Remove all inline styles from cart_checkout.j2 (18 instances) - Remove all inline styles from cart.j2 (16 instances) New CSS classes added: - Status indicators: .status-message, .success-indicator, .error-indicator - Layout helpers: .inline-label, .full-width-input, .disabled-input - Crypto checkout: .crypto-logo, .payment-grid, .payment-buttons, .status-box - Cart styles: .cart-float-right, .cart-shop-name, .cart-total-amount - Notice boxes: .success-notice, .warning-notice, .warning-banner This improves maintainability, consistency, and enables better theming support. All conditional styling preserved using dynamic CSS class application.
This commit is contained in:
parent
6b222bbc6b
commit
10e0e83adf
5 changed files with 317 additions and 69 deletions
|
|
@ -1069,3 +1069,252 @@ div.message-ribbon {
|
|||
display: block;
|
||||
}
|
||||
/* hidden control area */
|
||||
|
||||
/* Status and message styling */
|
||||
.status-message {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.success-indicator {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.error-indicator {
|
||||
color: #d44;
|
||||
}
|
||||
|
||||
.note-text {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.inline-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.favicon-preview {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
/* Input field styling */
|
||||
.full-width-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.disabled-input {
|
||||
opacity: 0.5;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Crypto checkout styles */
|
||||
.crypto-logo {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-right: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.payment-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 20px;
|
||||
margin: 16px 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.crypto-address {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.payment-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.payment-button-row-1 {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.payment-button-cancel {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.status-box {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.confirmations-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qr-fallback {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.success-notice {
|
||||
background: #d1fae5;
|
||||
border: 1px solid #10b981;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.warning-notice {
|
||||
background: #fef3c7;
|
||||
border: 1px solid #f59e0b;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.monospace-address {
|
||||
font-family: monospace;
|
||||
background: #f0f0f0;
|
||||
padding: 8px;
|
||||
border-radius: 3px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.notice-list {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.notice-footer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Cart checkout styles */
|
||||
.disabled-crypto-button {
|
||||
background: #aaa !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.crypto-button-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.crypto-settings-link {
|
||||
color: #f59e0b;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.warning-banner {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.warning-banner-alt {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffc107;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.warning-banner p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.warning-banner h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.warning-banner-content {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.pending-quote-item {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.pending-quote-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.pending-quote-status {
|
||||
color: #666;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.view-quote-button {
|
||||
background: #17a2b8;
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.pending-quote-details {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Cart page styles */
|
||||
.cart-float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.cart-shop-grid-span {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.cart-shop-name {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cart-inline-form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cart-update-button {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.cart-total-section {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cart-total-grid-span {
|
||||
text-align: right;
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.cart-total-amount {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cart-public-link {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
{{ coupon.human_limit_per_customer }}
|
||||
</span>
|
||||
|
||||
<div style="float: right;">
|
||||
<div class="cart-float-right">
|
||||
<form method="post" action="/coupon/remove" onsubmit="submit.disabled = true; return true;">
|
||||
|
||||
<input
|
||||
|
|
@ -86,8 +86,8 @@
|
|||
|
||||
<section class="cart-left-grid well">
|
||||
|
||||
<div style="grid-column: span 3">
|
||||
<b style="font-size: 1.5em;">{{ shop.name }}</b>
|
||||
<div class="cart-shop-grid-span">
|
||||
<b class="cart-shop-name">{{ shop.name }}</b>
|
||||
</div>
|
||||
|
||||
{% for product, quantity in product_quantity_tuples %}
|
||||
|
|
@ -110,22 +110,22 @@
|
|||
</span>
|
||||
<br/>
|
||||
|
||||
<form action="/cart/{{ cart.uuid_str }}/quantity" method="POST" onsubmit="submit.disabled = true; return true;" style="display: inline;">
|
||||
<form action="/cart/{{ cart.uuid_str }}/quantity" method="POST" onsubmit="submit.disabled = true; return true;" class="cart-inline-form">
|
||||
{% include "snippets/csrf.j2" %}
|
||||
<input type="hidden" name="product_id" value="{{ product.uuid_str }}">
|
||||
quantity: <input type="text" name="quantity" class="mps-quantity" value="{{ "{:,}".format(product_quantity) }}">
|
||||
<input type="submit" id="submit" value="update" role="button" style="width: 80px;"/>
|
||||
<input type="submit" id="submit" value="update" role="button" class="cart-update-button"/>
|
||||
</form>
|
||||
<br/>
|
||||
|
||||
<form method="POST" action="{{ request.route_url('cart_remove_product', cart_id=cart.uuid_str) }}" style="display:inline;">
|
||||
<form method="POST" action="{{ request.route_url('cart_remove_product', cart_id=cart.uuid_str) }}" class="cart-inline-form">
|
||||
{% include "snippets/csrf.j2" %}
|
||||
<input type="hidden" name="product_id" value="{{ product.uuid_str }}">
|
||||
<button type="submit" class="cart-remove-link">remove</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style="text-align: right;">
|
||||
<div class="cart-total-section">
|
||||
<span class="opacity-60">{{ "{:,}".format(product_quantity) }} x ${{ "{:,.2f}".format(product.price) }}</span>
|
||||
<br/>
|
||||
<b>${{ "{:,.2f}".format(line_total) }}</b>
|
||||
|
|
@ -140,23 +140,23 @@
|
|||
<form action="{{ request.route_url('cart_handling_option', cart_id=cart.uuid_str) }}" method="POST">
|
||||
{% if request.shop_location.local_pickup %}
|
||||
<input type="radio" id="local_pickup" name="handling_option" value="local_pickup" {% if cart.handling_option == "local_pickup" %}checked{% endif %} required>
|
||||
<label for="local_pickup" style="display: inline;">Local Pickup (Free)</label><br>
|
||||
<label for="local_pickup" class="inline-label">Local Pickup (Free)</label><br>
|
||||
{% endif %}
|
||||
{% if request.shop_location.local_delivery %}
|
||||
<input type="radio" id="local_delivery" name="handling_option" value="local_delivery" {% if cart.handling_option == "local_delivery" %}checked{% endif %} required>
|
||||
<label for="local_delivery" style="display: inline;">
|
||||
<label for="local_delivery" class="inline-label">
|
||||
Local Delivery (${{ '{:,.2f}'.format(request.shop_location.local_delivery_rate or 0) }})
|
||||
</label><br>
|
||||
{% endif %}
|
||||
{% if request.shop_location.local_shipping %}
|
||||
<input type="radio" id="local_shipping" name="handling_option" value="local_shipping" {% if cart.handling_option == "local_shipping" %}checked{% endif %} required>
|
||||
<label for="local_shipping" style="display: inline;">
|
||||
<label for="local_shipping" class="inline-label">
|
||||
Local Shipping (${{ '{:,.2f}'.format(request.shop_location.local_shipping_rate or 0) }})
|
||||
</label><br>
|
||||
{% endif %}
|
||||
{% if request.shop_location.international_shipping %}
|
||||
<input type="radio" id="international_shipping" name="handling_option" value="international_shipping" {% if cart.handling_option == "international_shipping" %}checked{% endif %} required>
|
||||
<label for="international_shipping" style="display: inline;">
|
||||
<label for="international_shipping" class="inline-label">
|
||||
International Shipping (${{ '{:,.2f}'.format(request.shop_location.international_shipping_rate or 0) }})
|
||||
</label><br>
|
||||
{% endif %}
|
||||
|
|
@ -164,14 +164,14 @@
|
|||
</form>
|
||||
{% endif %}
|
||||
|
||||
<div style="text-align: right; grid-column: span 3">
|
||||
<div class="cart-total-grid-span">
|
||||
|
||||
{% if cart.is_discounted %}
|
||||
<b style="font-size: 1.5em;"><s>${{ '{:,.2f}'.format(cart.shop_totals[shop.uuid_str]) }}</s></b>
|
||||
<b class="cart-total-amount"><s>${{ '{:,.2f}'.format(cart.shop_totals[shop.uuid_str]) }}</s></b>
|
||||
<br/>
|
||||
<b class="discounted" style="font-size: 1.5em;">${{ '{:,.2f}'.format(discounted_shop_totals[shop.uuid_str]) }}</b>
|
||||
<b class="discounted cart-total-amount">${{ '{:,.2f}'.format(discounted_shop_totals[shop.uuid_str]) }}</b>
|
||||
{% else %}
|
||||
<b style="font-size: 1.5em;">${{ '{:,.2f}'.format(cart.shop_totals[shop.uuid_str]) }}</b>
|
||||
<b class="cart-total-amount">${{ '{:,.2f}'.format(cart.shop_totals[shop.uuid_str]) }}</b>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
|
@ -255,7 +255,7 @@
|
|||
|
||||
<br/>
|
||||
<br/>
|
||||
<span style="font-size: .8em;"><a href="{{ request.current_route_url() }}" target="_blank" ref="nofollow">Link to public cart</a></span>
|
||||
<span class="cart-public-link"><a href="{{ request.current_route_url() }}" target="_blank" ref="nofollow">Link to public cart</a></span>
|
||||
<br/>
|
||||
<br/>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -61,16 +61,16 @@
|
|||
{% if monero_enabled and xmr_processor_enabled and cart.requires_payment and cart.shop_product_dict|length == 1 %}
|
||||
<br/>
|
||||
{% if pending_crypto_quotes %}
|
||||
<button type="button" class="mps-button" style="background:#aaa; cursor:not-allowed;" disabled title="Complete or cancel your pending crypto payments first"><img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" style="width:32px; height:32px; margin-right:8px; vertical-align:middle;">Monero (XMR) - Complete Pending Payments First</button>
|
||||
<button type="button" class="mps-button disabled-crypto-button" disabled title="Complete or cancel your pending crypto payments first"><img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" class="crypto-button-icon">Monero (XMR) - Complete Pending Payments First</button>
|
||||
{% else %}
|
||||
<form method="POST" action="{{ request.route_url('crypto_xmr_start') }}">
|
||||
{% include "snippets/csrf.j2" %}
|
||||
<input type="hidden" name="cart_id" value="{{ cart.id }}" />
|
||||
<button type="submit" class="mps-button mps-button-green"><img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" style="width:32px; height:32px; margin-right:8px; vertical-align:middle;">Yes, Confirm Checkout with Monero (XMR)</button>
|
||||
<button type="submit" class="mps-button mps-button-green"><img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" class="crypto-button-icon">Yes, Confirm Checkout with Monero (XMR)</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% if not request.has_xmr_refund_address %}
|
||||
<a href="/u/settings/crypto" style="color:#f59e0b; text-decoration:none; display:block; margin-top:10px; font-size:14px;">
|
||||
<a href="/u/settings/crypto" class="crypto-settings-link">
|
||||
⚠️ Configure an XMR refund address to enable automatic refunds during payment errors.
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
@ -80,16 +80,16 @@
|
|||
{% if dogecoin_enabled and doge_processor_enabled and cart.requires_payment and cart.shop_product_dict|length == 1 %}
|
||||
<br/>
|
||||
{% if pending_crypto_quotes %}
|
||||
<button type="button" class="mps-button" style="background:#aaa; cursor:not-allowed;" disabled title="Complete or cancel your pending crypto payments first"><img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" style="width:32px; height:32px; margin-right:8px; vertical-align:middle;">Dogecoin (DOGE) - Complete Pending Payments First</button>
|
||||
<button type="button" class="mps-button disabled-crypto-button" disabled title="Complete or cancel your pending crypto payments first"><img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" class="crypto-button-icon">Dogecoin (DOGE) - Complete Pending Payments First</button>
|
||||
{% else %}
|
||||
<form method="POST" action="{{ request.route_url('crypto_doge_start') }}">
|
||||
{% include "snippets/csrf.j2" %}
|
||||
<input type="hidden" name="cart_id" value="{{ cart.id }}" />
|
||||
<button type="submit" class="mps-button mps-button-green"><img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" style="width:32px; height:32px; margin-right:8px; vertical-align:middle;">Yes, Confirm Checkout with Dogecoin (DOGE)</button>
|
||||
<button type="submit" class="mps-button mps-button-green"><img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" class="crypto-button-icon">Yes, Confirm Checkout with Dogecoin (DOGE)</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% if not request.has_doge_refund_address %}
|
||||
<a href="/u/settings/crypto" style="color:#f59e0b; text-decoration:none; display:block; margin-top:10px; font-size:14px;">
|
||||
<a href="/u/settings/crypto" class="crypto-settings-link">
|
||||
⚠️ Configure a DOGE refund address to enable automatic refunds during payment errors.
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
@ -98,8 +98,8 @@
|
|||
{# Show sync status messages for enabled but not synced crypto methods #}
|
||||
{% if monero_enabled and not monero_synced and cart.requires_payment and cart.shop_product_dict|length == 1 %}
|
||||
<br/>
|
||||
<div style="background:#fff3cd; border:1px solid #ffeaa7; padding:10px; border-radius:5px; color:#856404;">
|
||||
<p style="margin:0; font-size:14px;">
|
||||
<div class="warning-banner">
|
||||
<p>
|
||||
⏳ <strong>Monero (XMR) payments temporarily unavailable</strong><br/>
|
||||
The Monero wallet is still synchronizing with the blockchain. Please try again later.
|
||||
</p>
|
||||
|
|
@ -108,8 +108,8 @@
|
|||
|
||||
{% if dogecoin_enabled and not dogecoin_synced and cart.requires_payment and cart.shop_product_dict|length == 1 %}
|
||||
<br/>
|
||||
<div style="background:#fff3cd; border:1px solid #ffeaa7; padding:10px; border-radius:5px; color:#856404;">
|
||||
<p style="margin:0; font-size:14px;">
|
||||
<div class="warning-banner">
|
||||
<p>
|
||||
⏳ <strong>Dogecoin (DOGE) payments temporarily unavailable</strong><br/>
|
||||
The Dogecoin node is still synchronizing with the blockchain. Please try again later.
|
||||
</p>
|
||||
|
|
@ -123,15 +123,15 @@
|
|||
|
||||
{# Show pending crypto quotes if user has any #}
|
||||
{% if pending_crypto_quotes %}
|
||||
<div style="background:#fff3cd; border:1px solid #ffc107; border-radius:4px; padding:15px; margin:20px 0;">
|
||||
<h3 style="margin-top:0;">📋 {{ pending_crypto_quotes|length }} Pending Crypto Quote{{ 's' if pending_crypto_quotes|length != 1 else '' }}</h3>
|
||||
<p style="margin-bottom:15px;">You have {{ pending_crypto_quotes|length }} pending crypto payment{{ 's' if pending_crypto_quotes|length != 1 else '' }}:</p>
|
||||
<div class="warning-banner-alt">
|
||||
<h3>📋 {{ pending_crypto_quotes|length }} Pending Crypto Quote{{ 's' if pending_crypto_quotes|length != 1 else '' }}</h3>
|
||||
<p class="warning-banner-content">You have {{ pending_crypto_quotes|length }} pending crypto payment{{ 's' if pending_crypto_quotes|length != 1 else '' }}:</p>
|
||||
{% for quote in pending_crypto_quotes %}
|
||||
<div style="background:#f8f9fa; border:1px solid #dee2e6; border-radius:3px; padding:10px; margin:8px 0;">
|
||||
<div style="display:grid; grid-template-columns: 1fr auto; align-items:start;">
|
||||
<div class="pending-quote-item">
|
||||
<div class="pending-quote-grid">
|
||||
<div>
|
||||
<strong>{{ quote.coin_type }}</strong>
|
||||
<span style="color:#666; margin-left:10px;">
|
||||
<span class="pending-quote-status">
|
||||
{{ quote.status.title() }}
|
||||
{% if quote.current_confirmations > 0 %}
|
||||
({{ quote.confirmation_status }})
|
||||
|
|
@ -139,10 +139,10 @@
|
|||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ request.route_url('crypto_quote', payment_id=quote.id) }}" class="mps-button" style="background:#17a2b8; font-size:12px; padding:5px 10px;">View Quote</a>
|
||||
<a href="{{ request.route_url('crypto_quote', payment_id=quote.id) }}" class="mps-button view-quote-button">View Quote</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:12px; color:#666; margin-top:5px;">
|
||||
<div class="pending-quote-details">
|
||||
Amount: {{ '%.8f' % (quote.expected_amount / (1000000000000 if quote.coin_type == 'XMR' else 100000000)) }} {{ quote.coin_type }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
<section class="one-column">
|
||||
<h2>
|
||||
{% if coin_symbol == 'XMR' %}
|
||||
<img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" style="width:150px; height:150px; margin-right:15px; vertical-align:middle;">
|
||||
<img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" class="crypto-logo">
|
||||
{% elif coin_symbol == 'DOGE' %}
|
||||
<img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" style="width:150px; height:150px; margin-right:15px; vertical-align:middle;">
|
||||
<img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" class="crypto-logo">
|
||||
{% endif %}
|
||||
{{ coin_name }} ({{ coin_symbol }})
|
||||
</h2>
|
||||
|
|
@ -20,13 +20,13 @@
|
|||
{% endif %}
|
||||
|
||||
{% if status == 'pending' %}
|
||||
<div style="display: grid; grid-template-columns: auto 1fr; gap: 20px; margin: 16px 0; align-items: start;">
|
||||
<div class="payment-grid">
|
||||
<div>
|
||||
<div id="payment-qr"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p>Send exactly <b id="crypto-amount">{{ amount_fmt }}</b> {{ coin_symbol }} to this address:</p>
|
||||
<pre id="crypto-address" style="white-space:pre-wrap;word-wrap:break-word;">{{ address }}</pre>
|
||||
<pre id="crypto-address" class="crypto-address">{{ address }}</pre>
|
||||
<p>
|
||||
{% if expires_at %}
|
||||
Expires in: <span id="countdown" data-expires="{{ expires_at }}">--:--</span>
|
||||
|
|
@ -35,20 +35,20 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0;">
|
||||
<button class="mps-button mps-button-green" id="copy-amt" style="grid-row: 1;">Copy Amount</button>
|
||||
<button class="mps-button mps-button-green" id="copy-addr" style="grid-row: 1;">Copy Address</button>
|
||||
<a class="mps-button mps-button-green" href="{{ wallet_uri_scheme }}:{{ address }}?{% if coin_symbol == 'XMR' %}tx_amount{% else %}amount{% endif %}={{ amount_fmt }}" target="_blank" rel="noopener" style="grid-row: 1;">Open in Wallet</a>
|
||||
<button id="cancel-btn" onclick="cancelQuote('{{ payment_id }}')" class="mps-button mps-button-red" style="grid-column: 1 / -1; grid-row: 2;">Cancel Quote</button>
|
||||
<div class="payment-buttons">
|
||||
<button class="mps-button mps-button-green payment-button-row-1" id="copy-amt">Copy Amount</button>
|
||||
<button class="mps-button mps-button-green payment-button-row-1" id="copy-addr">Copy Address</button>
|
||||
<a class="mps-button mps-button-green payment-button-row-1" href="{{ wallet_uri_scheme }}:{{ address }}?{% if coin_symbol == 'XMR' %}tx_amount{% else %}amount{% endif %}={{ amount_fmt }}" target="_blank" rel="noopener">Open in Wallet</a>
|
||||
<button id="cancel-btn" onclick="cancelQuote('{{ payment_id }}')" class="mps-button mps-button-red payment-button-cancel">Cancel Quote</button>
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; margin: 10px 0;">
|
||||
<div class="status-box">
|
||||
<p><strong>Cart Total:</strong> ${{ '%.2f' % usd_total }}</p>
|
||||
<p><strong>Status:</strong> <span id="status">{{ status }}</span></p>
|
||||
<p id="confirmations" {% if status == 'pending' or status == 'expired' %}style="display:none;"{% endif %}>
|
||||
<p id="confirmations"{% if status == 'pending' or status == 'expired' %} class="confirmations-hidden"{% endif %}>
|
||||
<strong>Confirmations:</strong> <span id="current-confirmations">{{ current_confirmations or 0 }}</span> / <span id="required-confirmations">{{ confirmations_required or 0 }}</span>
|
||||
</p>
|
||||
<p><strong>Conversion Rate:</strong> ${{ '%.2f' % usd_per_crypto }} USD per {{ coin_symbol }}</p>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
});
|
||||
} catch (error) {
|
||||
console.error('QR Code generation failed:', error);
|
||||
qrContainer.innerHTML = '<div style="width:150px;height:150px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666;border:1px solid #ddd;">QR unavailable</div>';
|
||||
qrContainer.innerHTML = '<div class="qr-fallback">QR unavailable</div>';
|
||||
}
|
||||
{% endif %}
|
||||
}
|
||||
|
|
@ -536,15 +536,15 @@
|
|||
|
||||
|
||||
{% if has_refund_address %}
|
||||
<div style="background: #d1fae5; border: 1px solid #10b981; border-radius: 4px; padding: 15px; margin: 20px 0;">
|
||||
<div class="success-notice">
|
||||
<p><strong>✓ Refund address configured</strong></p>
|
||||
<p style="font-family: monospace; background: #f0f0f0; padding: 8px; border-radius: 3px; word-break: break-all;">{{ refund_address }}</p>
|
||||
<p class="monospace-address">{{ refund_address }}</p>
|
||||
{% if status == 'out-of-stock-refunded' %}
|
||||
<p><strong>📦 Out of Stock - Full Refund Issued</strong></p>
|
||||
<p>This item became unavailable after your payment. You received a full refund with no restocking fee since this was not your fault.</p>
|
||||
{% else %}
|
||||
<p>If you make a payment error, you'll receive an automatic refund minus a 9% restocking fee that covers network costs and prevents abuse.</p>
|
||||
<ul style="margin: 10px 0;">
|
||||
<ul class="notice-list">
|
||||
<li><strong>Overpayment:</strong> Fulfilled & excess refunded minus fee</li>
|
||||
<li><strong>Underpayment:</strong> Refunded minus fee</li>
|
||||
<li><strong>Late payment:</strong> Refunded minus fee if sent after the minute expiry</li>
|
||||
|
|
@ -554,14 +554,14 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px; padding: 15px; margin: 20px 0;">
|
||||
<div class="warning-notice">
|
||||
<p><strong>⚠️ No refund address configured</strong></p>
|
||||
{% if status == 'no-refund' %}
|
||||
<p><strong>📦 Out of Stock - No Refund Possible</strong></p>
|
||||
<p>This item became unavailable after your payment, but without a refund address configured, the funds were transferred to the shop's cold storage.</p>
|
||||
{% else %}
|
||||
<p>Without a refund address, all payment errors result in lost funds:</p>
|
||||
<ul style="margin: 10px 0;">
|
||||
<ul class="notice-list">
|
||||
<li><strong>Underpayments:</strong> Cannot be recovered</li>
|
||||
<li><strong>Overpayments:</strong> Cannot be recovered</li>
|
||||
<li><strong>Late payments:</strong> Cannot be recovered</li>
|
||||
|
|
@ -569,7 +569,7 @@
|
|||
<li><strong>Wrong address:</strong> Cannot be recovered</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
<p style="margin-top: 10px;">Consider cancelling and <a href="/u/settings/crypto" class="shop-theme-link-color">configuring a refund address</a> for future purchases.</p>
|
||||
<p class="notice-footer">Consider cancelling and <a href="/u/settings/crypto" class="shop-theme-link-color">configuring a refund address</a> for future purchases.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -132,8 +132,8 @@
|
|||
|
||||
<br />
|
||||
|
||||
<input type="checkbox" id="toggle-stripe" style="">
|
||||
<label for="toggle-stripe" style="display: inline;" >Show Public & Secret Stripe API Keys</label>
|
||||
<input type="checkbox" id="toggle-stripe">
|
||||
<label for="toggle-stripe" class="inline-label">Show Public & Secret Stripe API Keys</label>
|
||||
|
||||
<div class="hidden-control">
|
||||
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
<input type="submit" name="disable_stripe" class="payment-toggle-button disable" value="Disable Stripe" />
|
||||
{% else %}
|
||||
<input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Stripe" />
|
||||
<small style="color: #666;">Enter your API keys to re-enable Stripe payments</small>
|
||||
<small class="status-message">Enter your API keys to re-enable Stripe payments</small>
|
||||
{% endif %}
|
||||
|
||||
<br />
|
||||
|
|
@ -263,12 +263,12 @@
|
|||
<hr />
|
||||
|
||||
<input type="checkbox" id="show-crypto-wallets" onchange="toggleCryptoWallets()">
|
||||
<label for="show-crypto-wallets" style="display: inline;">Show wallet configuration forms</label>
|
||||
<label for="show-crypto-wallets" class="inline-label">Show wallet configuration forms</label>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<small style="color: #666;">
|
||||
<small class="note-text">
|
||||
Note: We cannot verify you control these addresses. Please double-check they're correct!
|
||||
Consider sending a small test amount from another wallet to verify.
|
||||
<br />
|
||||
|
|
@ -278,7 +278,7 @@
|
|||
<br />
|
||||
<br />
|
||||
|
||||
<div id="crypto-wallets" style="display: block;">
|
||||
<div id="crypto-wallets">
|
||||
|
||||
<h4>Monero (XMR) Configuration</h4>
|
||||
|
||||
|
|
@ -289,10 +289,9 @@
|
|||
name = "sweep_to_address"
|
||||
type = "text"
|
||||
id = "xmr_sweep_to_address_input"
|
||||
class = "mps-sweep-address"
|
||||
class = "mps-sweep-address full-width-input{% if xmr_processor and not xmr_processor.enabled %} disabled-input{% endif %}"
|
||||
value = "{% if xmr_processor %}{{ xmr_processor.sweep_to_address }}{% endif %}"
|
||||
placeholder = "Monero address to sweep funds to"
|
||||
style = "width: 100%;{% if xmr_processor and not xmr_processor.enabled %} opacity: 0.5; background-color: #f5f5f5;{% endif %}"
|
||||
{% if xmr_processor and not xmr_processor.enabled %}readonly{% endif %}
|
||||
{% if xmr_processor and xmr_processor.sweep_to_address %}required{% endif %}
|
||||
/>
|
||||
|
|
@ -305,13 +304,13 @@
|
|||
{% if xmr_processor.enabled %}
|
||||
<br />
|
||||
<br />
|
||||
<small style="color: green;">✓ Monero wallet configured and ready to accept payments</small>
|
||||
<small class="success-indicator">✓ Monero wallet configured and ready to accept payments</small>
|
||||
{% else %}
|
||||
<br />
|
||||
<br />
|
||||
<small style="color: #d44;">✗ Monero payments are currently disabled</small>
|
||||
<small class="error-indicator">✗ Monero payments are currently disabled</small>
|
||||
<br />
|
||||
<small style="color: #666;">
|
||||
<small class="status-message">
|
||||
Your cold wallet address is preserved but customers cannot select Monero as a payment method.
|
||||
</small>
|
||||
{% endif %}
|
||||
|
|
@ -326,7 +325,7 @@
|
|||
<input type="submit" name="disable" class="payment-toggle-button disable" value="Disable Monero" />
|
||||
{% else %}
|
||||
<input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Monero" />
|
||||
<small style="color: #666;">Re-enable Monero payments to update your cold wallet address</small>
|
||||
<small class="status-message">Re-enable Monero payments to update your cold wallet address</small>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<input type="submit" name="submit" class="mps-submit" value="Enable Monero Payments" />
|
||||
|
|
@ -351,7 +350,7 @@
|
|||
{% if doge_processor and doge_processor.sweep_to_address %}required{% endif %}
|
||||
value = "{% if doge_processor %}{{ doge_processor.sweep_to_address }}{% endif %}"
|
||||
placeholder = "Dogecoin address to sweep funds to (e.g. DQA4...)"
|
||||
style = "width: 100%;{% if doge_processor and not doge_processor.enabled %} opacity: 0.5; background-color: #f5f5f5;{% endif %}"
|
||||
class = "full-width-input{% if doge_processor and not doge_processor.enabled %} disabled-input{% endif %}"
|
||||
{% if doge_processor and not doge_processor.enabled %}readonly{% endif %}
|
||||
/>
|
||||
<br/>
|
||||
|
|
@ -363,11 +362,11 @@
|
|||
{% if doge_processor.enabled %}
|
||||
<br />
|
||||
<br />
|
||||
<small style="color: green;">✓ Dogecoin wallet configured and ready to accept payments</small>
|
||||
<small class="success-indicator">✓ Dogecoin wallet configured and ready to accept payments</small>
|
||||
{% else %}
|
||||
<br />
|
||||
<br />
|
||||
<small style="color: #d44;">✗ Dogecoin payments are currently disabled</small>
|
||||
<small class="error-indicator">✗ Dogecoin payments are currently disabled</small>
|
||||
<br />
|
||||
<br />
|
||||
<small>
|
||||
|
|
@ -389,7 +388,7 @@
|
|||
<input type="submit" name="disable" class="payment-toggle-button disable" value="Disable Dogecoin" />
|
||||
{% else %}
|
||||
<input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Dogecoin" />
|
||||
<small style="color: #666;">Re-enable Dogecoin payments to update your cold wallet address</small>
|
||||
<small class="status-message">Re-enable Dogecoin payments to update your cold wallet address</small>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<input type="submit" name="submit" class="mps-submit" value="Enable Dogecoin Payments" />
|
||||
|
|
@ -431,7 +430,7 @@
|
|||
<br />
|
||||
|
||||
<label for="logo-banner">favicon.ico</label>
|
||||
<a href="{{ get_endpoints["shop-favicon"] }}?ts={{ request.shop.updated_timestamp }}"><img src="{{ get_endpoints["shop-favicon"] }}?ts={{ request.shop.updated_timestamp }}" style="width: 32px;" /></a>
|
||||
<a href="{{ get_endpoints["shop-favicon"] }}?ts={{ request.shop.updated_timestamp }}"><img src="{{ get_endpoints["shop-favicon"] }}?ts={{ request.shop.updated_timestamp }}" class="favicon-preview" /></a>
|
||||
{% set signed_post = signed_posts["shop-favicon"] %}
|
||||
<form method="post" action="{{ signed_post["url"] }}" enctype="multipart/form-data" onsubmit="submit.disabled = true; return true;">
|
||||
{% for field_name, field_value in signed_post["fields"].items() %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue