101 lines
11 KiB
XML
101 lines
11 KiB
XML
<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- Dark background like homepage -->
|
||
<rect width="1200" height="630" fill="#111827"/>
|
||
|
||
<!-- Subtle dot pattern background -->
|
||
<defs>
|
||
<pattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||
<circle cx="2" cy="2" r="1" fill="rgba(255, 255, 255, 0.15)" />
|
||
</pattern>
|
||
</defs>
|
||
<rect width="1200" height="630" fill="url(#dots)" opacity="0.1"/>
|
||
|
||
<!-- Left decorative elements - Diamond shapes and math operators -->
|
||
<g opacity="0.4">
|
||
<!-- Purple diamond (thousands) -->
|
||
<polygon points="150,120 180,150 150,180 120,150" fill="#c084fc" />
|
||
<!-- Gold diamond (hundreds) -->
|
||
<polygon points="150,220 180,250 150,280 120,250" fill="#fbbf24" />
|
||
<!-- Green diamond (tens) -->
|
||
<polygon points="150,320 180,350 150,380 120,350" fill="#4ade80" />
|
||
<!-- Blue diamond (ones) -->
|
||
<polygon points="150,420 180,450 150,480 120,450" fill="#60a5fa" />
|
||
</g>
|
||
|
||
<!-- Left math operators -->
|
||
<g opacity="0.35" fill="rgba(255, 255, 255, 0.8)">
|
||
<text x="80" y="100" font-family="Arial, sans-serif" font-size="42" font-weight="300">+</text>
|
||
<text x="240" y="190" font-family="Arial, sans-serif" font-size="42" font-weight="300">×</text>
|
||
<text x="70" y="290" font-family="Arial, sans-serif" font-size="42" font-weight="300">=</text>
|
||
<text x="250" y="390" font-family="Arial, sans-serif" font-size="42" font-weight="300">−</text>
|
||
</g>
|
||
|
||
<!-- Right decorative elements - Diamond shapes and math operators -->
|
||
<g opacity="0.4">
|
||
<!-- Purple diamond (thousands) -->
|
||
<polygon points="1050,120 1080,150 1050,180 1020,150" fill="#c084fc" />
|
||
<!-- Gold diamond (hundreds) -->
|
||
<polygon points="1050,220 1080,250 1050,280 1020,250" fill="#fbbf24" />
|
||
<!-- Green diamond (tens) -->
|
||
<polygon points="1050,320 1080,350 1050,380 1020,350" fill="#4ade80" />
|
||
<!-- Blue diamond (ones) -->
|
||
<polygon points="1050,420 1080,450 1050,480 1020,450" fill="#60a5fa" />
|
||
</g>
|
||
|
||
<!-- Right math operators -->
|
||
<g opacity="0.35" fill="rgba(255, 255, 255, 0.8)">
|
||
<text x="940" y="160" font-family="Arial, sans-serif" font-size="42" font-weight="300">÷</text>
|
||
<text x="1110" y="270" font-family="Arial, sans-serif" font-size="42" font-weight="300">+</text>
|
||
<text x="920" y="360" font-family="Arial, sans-serif" font-size="42" font-weight="300">×</text>
|
||
<text x="1120" y="480" font-family="Arial, sans-serif" font-size="42" font-weight="300">=</text>
|
||
</g>
|
||
|
||
<!-- Huge centered abacus from @soroban/abacus-react -->
|
||
<!-- AbacusReact 4 columns @ scale 3.5: width ~350px, height ~420px -->
|
||
<!-- Center horizontally: (1200-350)/2 = 425px -->
|
||
<!-- Center vertically in upper portion: abacus middle at ~225px, so start at 225-210 = 15px -->
|
||
<g transform="translate(425, 15)">
|
||
<defs><style>
|
||
/* CSS-based opacity system for hidden inactive beads */
|
||
.abacus-bead {
|
||
transition: opacity 0.2s ease-in-out;
|
||
}
|
||
|
||
/* Hidden inactive beads are invisible by default */
|
||
.hide-inactive-mode .abacus-bead.hidden-inactive {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Interactive abacus: When hovering over the abacus, hidden inactive beads become semi-transparent */
|
||
.abacus-svg.hide-inactive-mode.interactive:hover .abacus-bead.hidden-inactive {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* Interactive abacus: When hovering over a specific hidden inactive bead, it becomes fully visible */
|
||
.hide-inactive-mode.interactive .abacus-bead.hidden-inactive:hover {
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* Non-interactive abacus: Hidden inactive beads always stay at opacity 0 */
|
||
.abacus-svg.hide-inactive-mode:not(.interactive) .abacus-bead.hidden-inactive {
|
||
opacity: 0 !important;
|
||
}
|
||
</style></defs><rect x="38.5" y="0" width="10.5" height="420" fill="rgb(255, 255, 255)" stroke="rgb(200, 200, 200)" stroke-width="2" opacity="1"></rect><rect x="126" y="0" width="10.5" height="420" fill="rgb(255, 255, 255)" stroke="rgb(200, 200, 200)" stroke-width="2" opacity="1"></rect><rect x="213.5" y="0" width="10.5" height="420" fill="rgb(255, 255, 255)" stroke="rgb(200, 200, 200)" stroke-width="2" opacity="1"></rect><rect x="301" y="0" width="10.5" height="420" fill="rgb(255, 255, 255)" stroke="rgb(200, 200, 200)" stroke-width="2" opacity="1"></rect><rect x="22.75" y="105" width="304.5" height="7" fill="rgb(255, 255, 255)" stroke="rgb(200, 200, 200)" stroke-width="3" opacity="1"></rect><g class="abacus-bead inactive " transform="translate(14.350000000000001, 35)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#60a5fa" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(14.350000000000001, 115.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#60a5fa" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(14.350000000000001, 185.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#60a5fa" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(14.350000000000001, 229.25)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#60a5fa" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(14.350000000000001, 273)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#60a5fa" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(101.85, 35)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#4ade80" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(101.85, 115.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#4ade80" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(101.85, 159.25)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#4ade80" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(101.85, 229.25)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#4ade80" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(101.85, 273)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#4ade80" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(189.35, 35)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#fbbf24" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(189.35, 115.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#fbbf24" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(189.35, 159.25)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#fbbf24" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(189.35, 203)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#fbbf24" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(189.35, 273)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#fbbf24" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(276.85, 35)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#c084fc" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(276.85, 115.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#c084fc" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(276.85, 159.25)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#c084fc" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(276.85, 203)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#c084fc" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(276.85, 246.75)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="29.4,0 58.8,21 29.4,42 0,21" fill="#c084fc" stroke="#000" stroke-width="0.5"></polygon></g><rect x="0" y="0" width="87.5" height="420" fill="transparent" stroke="none" style="cursor:default;pointer-events:none"></rect><rect x="87.5" y="0" width="87.5" height="420" fill="transparent" stroke="none" style="cursor:default;pointer-events:none"></rect><rect x="175" y="0" width="87.5" height="420" fill="transparent" stroke="none" style="cursor:default;pointer-events:none"></rect><rect x="262.5" y="0" width="87.5" height="420" fill="transparent" stroke="none" style="cursor:default;pointer-events:none"></rect>
|
||
</g>
|
||
|
||
<!-- Title at bottom, horizontally and vertically centered in lower portion -->
|
||
<!-- Position at y=520 for vertical centering in bottom half -->
|
||
<text x="600" y="520" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="url(#title-gradient)" text-anchor="middle">
|
||
Abaci One
|
||
</text>
|
||
|
||
<!-- Gold gradient for title -->
|
||
<defs>
|
||
<linearGradient id="title-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" style="stop-color:#fbbf24;stop-opacity:1" />
|
||
<stop offset="50%" style="stop-color:#f59e0b;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#fbbf24;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|