MineSeeker/assets/images/waiting-dialog-design.svg

<!---
  - 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>