AboutView.svelte raw

   1  <script>
   2      import { relayInfo as relayInfoStore, relayUrl } from './stores.js';
   3  
   4      export let show = false;
   5      export let version = "";
   6  
   7      import { createEventDispatcher } from 'svelte';
   8      const dispatch = createEventDispatcher();
   9  
  10      function close() {
  11          dispatch('close');
  12      }
  13  
  14      function handleKeydown(e) {
  15          if (e.key === 'Escape') close();
  16      }
  17  </script>
  18  
  19  <svelte:window on:keydown={handleKeydown} />
  20  
  21  {#if show}
  22      <!-- svelte-ignore a11y-click-events-have-key-events -->
  23      <!-- svelte-ignore a11y-no-static-element-interactions -->
  24      <div class="about-overlay" on:click={close}>
  25          <div class="about-modal" on:click|stopPropagation>
  26              <button class="close-btn" on:click={close}>x</button>
  27              <div class="about-content">
  28                  <div class="about-logo">smesh</div>
  29                  <div class="about-tagline">distributed operating system</div>
  30  
  31                  {#if version}
  32                      <div class="about-version">v{version}</div>
  33                  {/if}
  34  
  35                  {#if $relayInfoStore}
  36                      <div class="about-relay">
  37                          <div class="relay-name">{$relayInfoStore.name || 'Relay'}</div>
  38                          {#if $relayInfoStore.description}
  39                              <div class="relay-desc">{$relayInfoStore.description}</div>
  40                          {/if}
  41                          <div class="relay-url">{$relayUrl}</div>
  42                      </div>
  43                  {/if}
  44  
  45                  <div class="about-footer">
  46                      Powered by ORLY
  47                  </div>
  48              </div>
  49          </div>
  50      </div>
  51  {/if}
  52  
  53  <style>
  54      .about-overlay {
  55          position: fixed;
  56          top: 0;
  57          left: 0;
  58          right: 0;
  59          bottom: 0;
  60          background: rgba(0, 0, 0, 0.6);
  61          z-index: 2000;
  62          display: flex;
  63          align-items: center;
  64          justify-content: center;
  65      }
  66  
  67      .about-modal {
  68          background: var(--card-bg);
  69          border: 1px solid var(--border-color);
  70          border-radius: 12px;
  71          padding: 2em;
  72          max-width: 360px;
  73          width: 90%;
  74          text-align: center;
  75          position: relative;
  76      }
  77  
  78      .close-btn {
  79          position: absolute;
  80          top: 0.5em;
  81          right: 0.75em;
  82          background: none;
  83          border: none;
  84          color: var(--text-muted);
  85          font-size: 1.2rem;
  86          cursor: pointer;
  87          padding: 0.25em;
  88      }
  89  
  90      .close-btn:hover {
  91          color: var(--text-color);
  92      }
  93  
  94      .about-logo {
  95          font-size: 2rem;
  96          font-weight: 800;
  97          color: var(--primary);
  98          letter-spacing: 0.1em;
  99          margin-bottom: 0.2em;
 100      }
 101  
 102      .about-tagline {
 103          font-size: 0.85rem;
 104          color: var(--text-muted);
 105          margin-bottom: 1em;
 106      }
 107  
 108      .about-version {
 109          font-size: 0.75rem;
 110          color: var(--text-muted);
 111          margin-bottom: 1.5em;
 112          font-family: monospace;
 113      }
 114  
 115      .about-relay {
 116          background: var(--bg-color);
 117          border: 1px solid var(--border-color);
 118          border-radius: 8px;
 119          padding: 0.75em;
 120          margin-bottom: 1.5em;
 121      }
 122  
 123      .relay-name {
 124          font-weight: 600;
 125          font-size: 0.85rem;
 126          color: var(--text-color);
 127          margin-bottom: 0.25em;
 128      }
 129  
 130      .relay-desc {
 131          font-size: 0.75rem;
 132          color: var(--text-muted);
 133          margin-bottom: 0.25em;
 134      }
 135  
 136      .relay-url {
 137          font-size: 0.7rem;
 138          color: var(--text-muted);
 139          font-family: monospace;
 140      }
 141  
 142      .about-footer {
 143          font-size: 0.7rem;
 144          color: var(--text-muted);
 145      }
 146  </style>
 147