Add shape prefix to symbol IDs, fix brand naming, add assets
- Symbol IDs now include shape for uniqueness: {shape}_{brand}_{mode}
e.g., text-only_paypal_lm, rectangle_visa_la, icon_mastercard_dm
- Fixed brand name inconsistencies:
- amazon_pay → amazon
- naverpay → naver_pay
- p24 → przelewy24
- direct_debit → bacs (unified BACS Direct Debit name)
- Added font assets (FontAwesome, Material Icons)
- Added MprIconsAssets and MprIconsConfig classes
- Updated preview.html with shape parameter support
- All 752 icons complete (38 payment × 4 shapes × 4 modes + 12 social × 3 shapes × 4 modes)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
119
preview.html
119
preview.html
@@ -143,11 +143,38 @@
|
||||
<h3>Square (logo in square frame) - Light Accent</h3>
|
||||
<div class="grid" id="payments-square-la"></div>
|
||||
|
||||
<h3>Square (logo in square frame) - Dark Accent on Dark Background</h3>
|
||||
<div class="grid" id="payments-square-da"></div>
|
||||
|
||||
<h3>Square (logo in square frame) - Light Mode (monochrome)</h3>
|
||||
<div class="grid" id="payments-square-lm"></div>
|
||||
|
||||
<h3>Square (logo in square frame) - Dark Mode (monochrome) on Dark Background</h3>
|
||||
<div class="grid" id="payments-square-dm"></div>
|
||||
|
||||
<h3>Rectangle (icon + brand text, 150×100) - Light Accent</h3>
|
||||
<div class="grid grid-wide" id="payments-rectangle-la"></div>
|
||||
|
||||
<h3>Rectangle (icon + brand text, 150×100) - Dark Accent on Dark Background</h3>
|
||||
<div class="grid grid-wide" id="payments-rectangle-da"></div>
|
||||
|
||||
<h3>Rectangle (icon + brand text, 150×100) - Light Mode (monochrome)</h3>
|
||||
<div class="grid grid-wide" id="payments-rectangle-lm"></div>
|
||||
|
||||
<h3>Rectangle (icon + brand text, 150×100) - Dark Mode (monochrome) on Dark Background</h3>
|
||||
<div class="grid grid-wide" id="payments-rectangle-dm"></div>
|
||||
|
||||
<h3>Text Only (brand name) - Light Accent</h3>
|
||||
<div class="grid grid-wide" id="payments-text-only-la"></div>
|
||||
|
||||
<h3>Text Only (brand name) - Dark Accent on Dark Background</h3>
|
||||
<div class="grid grid-wide" id="payments-text-only-da"></div>
|
||||
|
||||
<h3>Text Only (brand name) - Light Mode (monochrome)</h3>
|
||||
<div class="grid grid-wide" id="payments-text-only-lm"></div>
|
||||
|
||||
<h3>Text Only (brand name) - Dark Mode (monochrome) on Dark Background</h3>
|
||||
<div class="grid grid-wide" id="payments-text-only-dm"></div>
|
||||
</div>
|
||||
|
||||
<div id="socials" class="section">
|
||||
@@ -159,19 +186,43 @@
|
||||
<h3>Icon (logo mark only) - Dark Accent on Dark Background</h3>
|
||||
<div class="grid" id="socials-icon-da"></div>
|
||||
|
||||
<h3>Icon (logo mark only) - Light Mode (monochrome)</h3>
|
||||
<div class="grid" id="socials-icon-lm"></div>
|
||||
|
||||
<h3>Icon (logo mark only) - Dark Mode (monochrome) on Dark Background</h3>
|
||||
<div class="grid" id="socials-icon-dm"></div>
|
||||
|
||||
<h3>Full Logo (icon + brand text, 150×100) - Light Accent</h3>
|
||||
<div class="grid grid-wide" id="socials-full-logo-la"></div>
|
||||
|
||||
<h3>Full Logo (icon + brand text, 150×100) - Dark Accent on Dark Background</h3>
|
||||
<div class="grid grid-wide" id="socials-full-logo-da"></div>
|
||||
|
||||
<h3>Full Logo (icon + brand text, 150×100) - Light Mode (monochrome)</h3>
|
||||
<div class="grid grid-wide" id="socials-full-logo-lm"></div>
|
||||
|
||||
<h3>Full Logo (icon + brand text, 150×100) - Dark Mode (monochrome) on Dark Background</h3>
|
||||
<div class="grid grid-wide" id="socials-full-logo-dm"></div>
|
||||
|
||||
<h3>Text Only (brand name) - Light Accent</h3>
|
||||
<div class="grid grid-wide" id="socials-text-only-la"></div>
|
||||
|
||||
<h3>Text Only (brand name) - Dark Accent on Dark Background</h3>
|
||||
<div class="grid grid-wide" id="socials-text-only-da"></div>
|
||||
|
||||
<h3>Text Only (brand name) - Light Mode (monochrome)</h3>
|
||||
<div class="grid grid-wide" id="socials-text-only-lm"></div>
|
||||
|
||||
<h3>Text Only (brand name) - Dark Mode (monochrome) on Dark Background</h3>
|
||||
<div class="grid grid-wide" id="socials-text-only-dm"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const paymentBrands = [
|
||||
'afterpay', 'alipay', 'alma', 'amazon_pay', 'american_express', 'apple_pay',
|
||||
'afterpay', 'alipay', 'alma', 'amazon', 'american_express', 'apple_pay',
|
||||
'bacs', 'bancontact', 'bank', 'billie', 'blik', 'cartes_bancaires', 'cod',
|
||||
'credit_pay', 'eps', 'google_pay', 'ideal', 'jcb', 'kakao_pay', 'klarna',
|
||||
'link', 'mastercard', 'mobilepay', 'multibanco', 'naverpay', 'p24', 'payco',
|
||||
'link', 'mastercard', 'mobilepay', 'multibanco', 'naver_pay', 'przelewy24', 'payco',
|
||||
'paypal', 'pickup', 'point_of_sale', 'quote', 'revolut', 'samsung_pay', 'satispay',
|
||||
'sepa', 'twint', 'visa', 'wechat_pay'
|
||||
];
|
||||
@@ -181,7 +232,7 @@
|
||||
'outlook', 'paypal', 'reddit', 'tiktok', 'x', 'yahoo'
|
||||
];
|
||||
|
||||
function renderIcons(containerId, brands, spriteFile, suffix, size, isDark = false) {
|
||||
function renderIcons(containerId, brands, spriteFile, suffix, size, isDark = false, shape = 'icon') {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
@@ -208,9 +259,9 @@
|
||||
const symbolIds = Array.from(symbols).map(s => s.id);
|
||||
console.log(`[${containerId}] Found ${symbols.length} symbols:`, symbolIds);
|
||||
|
||||
// Render icons
|
||||
// Render icons - symbol ID format: {shape}_{brand}_{mode}
|
||||
brands.forEach(brand => {
|
||||
const id = `${brand}_${suffix}`;
|
||||
const id = `${shape}_${brand}_${suffix}`;
|
||||
const exists = symbolIds.includes(id);
|
||||
|
||||
if (!exists) {
|
||||
@@ -259,7 +310,7 @@
|
||||
}
|
||||
|
||||
// Render wide icons (150x100 aspect ratio)
|
||||
function renderIconsWide(containerId, brands, spriteFile, suffix, width, height, isDark = false) {
|
||||
function renderIconsWide(containerId, brands, spriteFile, suffix, width, height, isDark = false, shape = 'rectangle') {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
@@ -276,8 +327,9 @@
|
||||
const symbols = div.querySelectorAll('symbol');
|
||||
const symbolIds = Array.from(symbols).map(s => s.id);
|
||||
|
||||
// Symbol ID format: {shape}_{brand}_{mode}
|
||||
brands.forEach(brand => {
|
||||
const id = `${brand}_${suffix}`;
|
||||
const id = `${shape}_${brand}_${suffix}`;
|
||||
const exists = symbolIds.includes(id);
|
||||
|
||||
if (!exists) {
|
||||
@@ -342,20 +394,47 @@
|
||||
// Run debug after all sprites loaded
|
||||
setTimeout(debugInvisibleIcons, 2000);
|
||||
|
||||
// Payment icons
|
||||
renderIcons('payments-icon-la', paymentBrands, 'sprites/payments/icon-la.svg', 'la', 45);
|
||||
renderIcons('payments-icon-da', paymentBrands, 'sprites/payments/icon-da.svg', 'da', 45, true);
|
||||
renderIcons('payments-icon-lm', paymentBrands, 'sprites/payments/icon-lm.svg', 'lm', 45);
|
||||
renderIcons('payments-icon-dm', paymentBrands, 'sprites/payments/icon-dm.svg', 'dm', 45, true);
|
||||
renderIcons('payments-square-la', paymentBrands, 'sprites/payments/square-la.svg', 'la', 45);
|
||||
renderIconsWide('payments-rectangle-la', paymentBrands, 'sprites/payments/rectangle-la.svg', 'la', 150, 100);
|
||||
renderIconsWide('payments-text-only-la', paymentBrands, 'sprites/payments/text-only-la.svg', 'la', 150, 100);
|
||||
// Payment icons - Icon
|
||||
renderIcons('payments-icon-la', paymentBrands, 'sprites/payments/icon-la.svg', 'la', 45, false, 'icon');
|
||||
renderIcons('payments-icon-da', paymentBrands, 'sprites/payments/icon-da.svg', 'da', 45, true, 'icon');
|
||||
renderIcons('payments-icon-lm', paymentBrands, 'sprites/payments/icon-lm.svg', 'lm', 45, false, 'icon');
|
||||
renderIcons('payments-icon-dm', paymentBrands, 'sprites/payments/icon-dm.svg', 'dm', 45, true, 'icon');
|
||||
|
||||
// Social icons
|
||||
renderIcons('socials-icon-la', socialBrands, 'sprites/socials/icon-la.svg', 'la', 45);
|
||||
renderIcons('socials-icon-da', socialBrands, 'sprites/socials/icon-da.svg', 'da', 45, true);
|
||||
renderIconsWide('socials-full-logo-la', socialBrands, 'sprites/socials/full-logo-la.svg', 'la', 150, 100);
|
||||
renderIconsWide('socials-text-only-la', socialBrands, 'sprites/socials/text-only-la.svg', 'la', 150, 100);
|
||||
// Payment icons - Square
|
||||
renderIcons('payments-square-la', paymentBrands, 'sprites/payments/square-la.svg', 'la', 45, false, 'square');
|
||||
renderIcons('payments-square-da', paymentBrands, 'sprites/payments/square-da.svg', 'da', 45, true, 'square');
|
||||
renderIcons('payments-square-lm', paymentBrands, 'sprites/payments/square-lm.svg', 'lm', 45, false, 'square');
|
||||
renderIcons('payments-square-dm', paymentBrands, 'sprites/payments/square-dm.svg', 'dm', 45, true, 'square');
|
||||
|
||||
// Payment icons - Rectangle
|
||||
renderIconsWide('payments-rectangle-la', paymentBrands, 'sprites/payments/rectangle-la.svg', 'la', 150, 100, false, 'rectangle');
|
||||
renderIconsWide('payments-rectangle-da', paymentBrands, 'sprites/payments/rectangle-da.svg', 'da', 150, 100, true, 'rectangle');
|
||||
renderIconsWide('payments-rectangle-lm', paymentBrands, 'sprites/payments/rectangle-lm.svg', 'lm', 150, 100, false, 'rectangle');
|
||||
renderIconsWide('payments-rectangle-dm', paymentBrands, 'sprites/payments/rectangle-dm.svg', 'dm', 150, 100, true, 'rectangle');
|
||||
|
||||
// Payment icons - Text Only
|
||||
renderIconsWide('payments-text-only-la', paymentBrands, 'sprites/payments/text-only-la.svg', 'la', 150, 100, false, 'text-only');
|
||||
renderIconsWide('payments-text-only-da', paymentBrands, 'sprites/payments/text-only-da.svg', 'da', 150, 100, true, 'text-only');
|
||||
renderIconsWide('payments-text-only-lm', paymentBrands, 'sprites/payments/text-only-lm.svg', 'lm', 150, 100, false, 'text-only');
|
||||
renderIconsWide('payments-text-only-dm', paymentBrands, 'sprites/payments/text-only-dm.svg', 'dm', 150, 100, true, 'text-only');
|
||||
|
||||
// Social icons - Icon
|
||||
renderIcons('socials-icon-la', socialBrands, 'sprites/socials/icon-la.svg', 'la', 45, false, 'icon');
|
||||
renderIcons('socials-icon-da', socialBrands, 'sprites/socials/icon-da.svg', 'da', 45, true, 'icon');
|
||||
renderIcons('socials-icon-lm', socialBrands, 'sprites/socials/icon-lm.svg', 'lm', 45, false, 'icon');
|
||||
renderIcons('socials-icon-dm', socialBrands, 'sprites/socials/icon-dm.svg', 'dm', 45, true, 'icon');
|
||||
|
||||
// Social icons - Full Logo
|
||||
renderIconsWide('socials-full-logo-la', socialBrands, 'sprites/socials/full-logo-la.svg', 'la', 150, 100, false, 'full-logo');
|
||||
renderIconsWide('socials-full-logo-da', socialBrands, 'sprites/socials/full-logo-da.svg', 'da', 150, 100, true, 'full-logo');
|
||||
renderIconsWide('socials-full-logo-lm', socialBrands, 'sprites/socials/full-logo-lm.svg', 'lm', 150, 100, false, 'full-logo');
|
||||
renderIconsWide('socials-full-logo-dm', socialBrands, 'sprites/socials/full-logo-dm.svg', 'dm', 150, 100, true, 'full-logo');
|
||||
|
||||
// Social icons - Text Only
|
||||
renderIconsWide('socials-text-only-la', socialBrands, 'sprites/socials/text-only-la.svg', 'la', 150, 100, false, 'text-only');
|
||||
renderIconsWide('socials-text-only-da', socialBrands, 'sprites/socials/text-only-da.svg', 'da', 150, 100, true, 'text-only');
|
||||
renderIconsWide('socials-text-only-lm', socialBrands, 'sprites/socials/text-only-lm.svg', 'lm', 150, 100, false, 'text-only');
|
||||
renderIconsWide('socials-text-only-dm', socialBrands, 'sprites/socials/text-only-dm.svg', 'dm', 150, 100, true, 'text-only');
|
||||
|
||||
function showSection(name) {
|
||||
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
|
||||
|
||||
Reference in New Issue
Block a user