171 lines
7.5 KiB
XML
171 lines
7.5 KiB
XML
<!---
|
|
- This file is part of the SplendidBear Websites' projects.
|
|
-
|
|
- Copyright (c) 2026 @ www.splendidbear.org
|
|
-
|
|
- For the full copyright and license information, please view the LICENSE
|
|
- file that was distributed with this source code.
|
|
-->
|
|
|
|
<svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<style>
|
|
.bg-dark { fill: #07090d; }
|
|
.bg-grid { fill: url(#gridPattern); }
|
|
.border-accent { stroke: rgba(35, 111, 135, 0.4); stroke-width: 2; fill: none; }
|
|
.shadow { filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4)); }
|
|
.title-text { font: bold 28px 'Rajdhani', sans-serif; fill: #fff; letter-spacing: 0.5px; }
|
|
.header-text { font: bold 16px 'Rajdhani', sans-serif; fill: #236f87; letter-spacing: 0.5px; }
|
|
.desc-text { font: 13px 'Rajdhani', sans-serif; fill: rgba(149, 207, 245, 0.7); letter-spacing: 0.3px; }
|
|
.divider-line { stroke: rgba(35, 111, 135, 0.25); stroke-width: 1.5; }
|
|
.divider-text { font: bold 12px 'Rajdhani', sans-serif; fill: rgba(35, 111, 135, 0.5); letter-spacing: 1px; text-transform: uppercase; }
|
|
.icon-color { fill: rgba(35, 111, 135, 0.9); }
|
|
.button-gradient { fill: url(#buttonGradient); }
|
|
.button-text { font: bold 13px 'Rajdhani', sans-serif; fill: #e0f4ff; letter-spacing: 1.5px; text-transform: uppercase; }
|
|
.glow { filter: drop-shadow(0 0 12px rgba(35, 111, 135, 0.3)); }
|
|
</style>
|
|
|
|
<!-- Grid Pattern Background -->
|
|
<pattern id="gridPattern" x="0" y="0" width="46" height="46" patternUnits="userSpaceOnUse">
|
|
<path d="M 46 0 L 0 0 0 46" fill="none" stroke="rgba(35, 111, 135, 0.08)" stroke-width="1"/>
|
|
</pattern>
|
|
|
|
<!-- Button Gradient -->
|
|
<linearGradient id="buttonGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#236f87;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#1a5068;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<!-- Icon Definitions -->
|
|
<g id="icon-link">
|
|
<path d="M 12 8 L 20 8 Q 22 8 22 10 L 22 16 Q 22 18 20 18 L 16 18 M 28 12 L 32 12 Q 34 12 34 14 L 34 20 Q 34 22 32 22 L 28 22 M 22 12 L 28 12"
|
|
stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
|
|
<g id="icon-users">
|
|
<circle cx="16" cy="10" r="3.5" fill="currentColor"/>
|
|
<path d="M 12 15 Q 12 13 16 13 Q 20 13 20 15 L 20 18 L 12 18 Z" fill="currentColor"/>
|
|
<circle cx="30" cy="10" r="3.5" fill="currentColor"/>
|
|
<path d="M 26 15 Q 26 13 30 13 Q 34 13 34 15 L 34 18 L 26 18 Z" fill="currentColor"/>
|
|
</g>
|
|
|
|
<g id="icon-search">
|
|
<circle cx="18" cy="18" r="8" stroke="currentColor" stroke-width="2" fill="none"/>
|
|
<line x1="26" y1="26" x2="32" y2="32" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</g>
|
|
|
|
<g id="icon-clipboard">
|
|
<rect x="12" y="8" width="16" height="24" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
|
|
<rect x="16" y="6" width="8" height="3" fill="currentColor"/>
|
|
<line x1="16" y1="14" x2="28" y2="14" stroke="currentColor" stroke-width="1.5"/>
|
|
<line x1="16" y1="18" x2="28" y2="18" stroke="currentColor" stroke-width="1.5"/>
|
|
<line x1="16" y1="22" x2="24" y2="22" stroke="currentColor" stroke-width="1.5"/>
|
|
</g>
|
|
</defs>
|
|
|
|
<!-- Main Background -->
|
|
<rect class="bg-dark" width="800" height="500"/>
|
|
<rect class="bg-grid" width="800" height="500"/>
|
|
|
|
<!-- Dialog Container -->
|
|
<g class="shadow">
|
|
<rect class="bg-dark" x="60" y="40" width="680" height="420" rx="12" class="shadow"/>
|
|
<rect class="border-accent" x="60" y="40" width="680" height="420" rx="12"/>
|
|
</g>
|
|
|
|
<!-- Dialog Header -->
|
|
<g>
|
|
<text x="100" y="85" class="title-text">We are waiting...</text>
|
|
<g transform="translate(720, 60)">
|
|
<!-- Close Button -->
|
|
<circle cx="0" cy="0" r="16" stroke="rgba(35, 111, 135, 0.3)" stroke-width="1" fill="none"/>
|
|
<line x1="-6" y1="-6" x2="6" y2="6" stroke="rgba(149, 207, 245, 0.55)" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="6" y1="-6" x2="-6" y2="6" stroke="rgba(149, 207, 245, 0.55)" stroke-width="2" stroke-linecap="round"/>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Option 1: Invite a Friend -->
|
|
<g>
|
|
<!-- Option Container -->
|
|
<rect x="80" y="120" width="280" height="280" rx="8" fill="rgba(35, 111, 135, 0.05)" stroke="rgba(35, 111, 135, 0.15)" stroke-width="1"/>
|
|
|
|
<!-- Icon -->
|
|
<g transform="translate(110, 145)">
|
|
<circle cx="0" cy="0" r="22" fill="rgba(35, 111, 135, 0.15)"/>
|
|
<g use="#icon-link" class="icon-color" transform="scale(1.8)"/>
|
|
</g>
|
|
|
|
<!-- Title -->
|
|
<text x="160" y="165" class="header-text">Invite a Friend</text>
|
|
|
|
<!-- Description -->
|
|
<text x="100" y="195" class="desc-text">Share this link with your opponent</text>
|
|
|
|
<!-- URL Box -->
|
|
<rect x="100" y="210" width="240" height="40" rx="6" fill="#d0e8f5" stroke="#7ab8d8" stroke-width="1"/>
|
|
<text x="118" y="237" style="font: 12px 'Courier New', monospace; fill: #1a4a6a; letter-spacing: 0.3px;">play.mineseeker.com/game-id</text>
|
|
|
|
<!-- Copy Button -->
|
|
<g class="glow">
|
|
<rect x="100" y="265" width="240" height="40" rx="5" class="button-gradient" stroke="#2e7a9a" stroke-width="1"/>
|
|
<g transform="translate(120, 285)">
|
|
<rect x="0" y="0" width="6" height="6" fill="#e0f4ff"/>
|
|
<rect x="2" y="2" width="4" height="4" fill="none" stroke="#e0f4ff" stroke-width="0.5"/>
|
|
</g>
|
|
<text x="140" y="287" class="button-text">Copy Link</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Divider OR -->
|
|
<g>
|
|
<line x1="400" y1="200" x2="400" y2="320" class="divider-line"/>
|
|
<circle cx="400" cy="260" r="18" fill="#07090d" stroke="rgba(35, 111, 135, 0.25)" stroke-width="1"/>
|
|
<text x="400" y="267" class="divider-text" text-anchor="middle">OR</text>
|
|
</g>
|
|
|
|
<!-- Option 2: Challenge a Player -->
|
|
<g>
|
|
<!-- Option Container -->
|
|
<rect x="440" y="120" width="280" height="280" rx="8" fill="rgba(35, 111, 135, 0.05)" stroke="rgba(35, 111, 135, 0.15)" stroke-width="1"/>
|
|
|
|
<!-- Icon -->
|
|
<g transform="translate(470, 145)">
|
|
<circle cx="0" cy="0" r="22" fill="rgba(35, 111, 135, 0.15)"/>
|
|
<g use="#icon-users" class="icon-color" transform="scale(1.5)"/>
|
|
</g>
|
|
|
|
<!-- Title -->
|
|
<text x="510" y="165" class="header-text">Challenge a Player</text>
|
|
|
|
<!-- Description -->
|
|
<text x="460" y="195" class="desc-text">Browse online players and challenge</text>
|
|
|
|
<!-- Browse Button -->
|
|
<g class="glow">
|
|
<rect x="460" y="265" width="240" height="40" rx="5" class="button-gradient" stroke="#2e7a9a" stroke-width="1"/>
|
|
<g transform="translate(480, 285)">
|
|
<!-- Search icon simplified -->
|
|
<circle cx="4" cy="4" r="3" fill="none" stroke="#e0f4ff" stroke-width="1"/>
|
|
<line x1="7" y1="7" x2="9" y2="9" stroke="#e0f4ff" stroke-width="1" stroke-linecap="round"/>
|
|
</g>
|
|
<text x="510" y="287" class="button-text">Browse Players</text>
|
|
</g>
|
|
|
|
<!-- Highlight: Players Online -->
|
|
<g>
|
|
<text x="460" y="230" class="desc-text" style="font-weight: bold;">5 players waiting</text>
|
|
<g transform="translate(680, 220)">
|
|
<circle r="6" fill="#236f87"/>
|
|
<circle cx="-8" cy="3" r="4" fill="rgba(35, 111, 135, 0.6)"/>
|
|
<circle cx="8" cy="3" r="4" fill="rgba(35, 111, 135, 0.6)"/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Bottom Info -->
|
|
<g>
|
|
<text x="100" y="435" style="font: 11px 'Rajdhani', sans-serif; fill: rgba(149, 207, 245, 0.35); letter-spacing: 0.5px;">Choose either option to start playing or find an opponent</text>
|
|
</g>
|
|
</svg>
|
|
|