backup-tool/.superpowers/brainstorm/269331-1778521434/content/frontend-views.html

<h2>Frontend Views</h2>
<p class="subtitle">UI mockups for the three main views</p>

<div class="section">
  <h3>Dashboard View</h3>
  <div class="mockup">
    <div class="mockup-header">Dashboard</div>
    <div class="mockup-body">
      <div class="mock-nav">
        <span style="font-weight: bold;">🛡️ Backup Tool</span> | Dashboard | Backups | Settings
      </div>
      <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 20px 0;">
        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px; text-align: center;">
          <div style="font-size: 32px; font-weight: bold; color: #4CAF50;">12</div>
          <div style="color: #666;">Active Jobs</div>
        </div>
        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px; text-align: center;">
          <div style="font-size: 32px; font-weight: bold; color: #2196F3;">847</div>
          <div style="color: #666;">Total Backups</div>
        </div>
        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px; text-align: center;">
          <div style="font-size: 32px; font-weight: bold; color: #FF9800;">2.4 TB</div>
          <div style="color: #666;">Storage Used</div>
        </div>
        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px; text-align: center;">
          <div style="font-size: 32px; font-weight: bold; color: #f44336;">1</div>
          <div style="color: #666;">Failed (24h)</div>
        </div>
      </div>
      
      <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px;">
        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px;">
          <div style="font-weight: bold; margin-bottom: 10px;">Recent Backup Activity</div>
          <div style="display: flex; flex-direction: column; gap: 8px;">
            <div style="display: flex; justify-content: space-between; padding: 8px; background: #f5f5f5; border-radius: 4px;">
              <span>📁 Home Server Files</span>
              <span style="color: #4CAF50;">✓ Success</span>
              <span style="color: #666;">2 hours ago</span>
            </div>
            <div style="display: flex; justify-content: space-between; padding: 8px; background: #f5f5f5; border-radius: 4px;">
              <span>🗄️ Production DB</span>
              <span style="color: #4CAF50;">✓ Success</span>
              <span style="color: #666;">5 hours ago</span>
            </div>
            <div style="display: flex; justify-content: space-between; padding: 8px; background: #f5f5f5; border-radius: 4px;">
              <span>📁 Cloud Storage Sync</span>
              <span style="color: #f44336;">✗ Failed</span>
              <span style="color: #666;">1 day ago</span>
            </div>
          </div>
        </div>
        
        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px;">
          <div style="font-weight: bold; margin-bottom: 10px;">Storage Overview</div>
          <div style="height: 150px; background: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center;">
            [Pie Chart: Storage by Job]
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3>Backup View</h3>
  <div class="mockup">
    <div class="mockup-header">Backups</div>
    <div class="mockup-body">
      <div class="mock-nav">
        <span>🛡️ Backup Tool</span> | Dashboard | <span style="font-weight: bold;">Backups</span> | Settings
      </div>
      
      <div style="display: flex; justify-content: space-between; margin: 20px 0;">
        <div>
          <button class="mock-button">+ New Job</button>
          <button class="mock-button">+ New Source</button>
        </div>
        <div>
          <input class="mock-input" placeholder="Search jobs..." style="width: 200px;">
        </div>
      </div>
      
      <div style="border: 1px solid #ddd; border-radius: 6px; overflow: hidden;">
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; background: #f5f5f5; padding: 10px; font-weight: bold;">
          <div>Job Name</div>
          <div>Source</div>
          <div>Strategy</div>
          <div>Schedule</div>
          <div>Last Run</div>
          <div>Status</div>
        </div>
        
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; padding: 10px; border-top: 1px solid #eee;">
          <div>🏠 Home Server Files</div>
          <div>Local Path</div>
          <div><span style="background: #e3f2fd; padding: 2px 8px; border-radius: 12px; font-size: 12px;">Incremental</span></div>
          <div>Daily at 2 AM</div>
          <div>2 hours ago</div>
          <div><span style="color: #4CAF50;">● Active</span></div>
        </div>
        
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; padding: 10px; border-top: 1px solid #eee;">
          <div>🗄️ Production DB</div>
          <div>PostgreSQL</div>
          <div><span style="background: #fff3e0; padding: 2px 8px; border-radius: 12px; font-size: 12px;">Full</span></div>
          <div>Hourly</div>
          <div>5 hours ago</div>
          <div><span style="color: #4CAF50;">● Active</span></div>
        </div>
        
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; padding: 10px; border-top: 1px solid #eee;">
          <div>☁️ Cloud Storage Sync</div>
          <div>SSH (AWS)</div>
          <div><span style="background: #e3f2fd; padding: 2px 8px; border-radius: 12px; font-size: 12px;">Incremental</span></div>
          <div>Weekly (Sun)</div>
          <div>1 day ago</div>
          <div><span style="color: #f44336;">● Failed</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3>Settings View</h3>
  <div class="mockup">
    <div class="mockup-header">Settings</div>
    <div class="mockup-body">
      <div class="mock-nav">
        <span>🛡️ Backup Tool</span> | Dashboard | Backups | <span style="font-weight: bold;">Settings</span>
      </div>
      
      <div style="display: grid; grid-template-columns: 200px 1fr; gap: 20px; margin-top: 20px;">
        <div style="border-right: 1px solid #ddd; padding-right: 20px;">
          <div style="padding: 10px; background: #e3f2fd; border-radius: 4px; font-weight: bold;">General</div>
          <div style="padding: 10px;">Storage</div>
          <div style="padding: 10px;">Notifications</div>
          <div style="padding: 10px;">Security</div>
          <div style="padding: 10px;">Logs</div>
        </div>
        
        <div>
          <div style="margin-bottom: 20px;">
            <div style="font-weight: bold; margin-bottom: 8px;">Default Backup Location</div>
            <input class="mock-input" value="/var/backups/backup-tool" style="width: 300px;">
          </div>
          
          <div style="margin-bottom: 20px;">
            <div style="font-weight: bold; margin-bottom: 8px;">Retention Policy</div>
            <select class="mock-input" style="width: 200px;">
              <option>Keep all backups</option>
              <option>Keep last 30 days</option>
              <option selected>Keep last 10 versions</option>
            </select>
          </div>
          
          <div style="margin-bottom: 20px;">
            <div style="font-weight: bold; margin-bottom: 8px;">Compression</div>
            <label><input type="checkbox" checked> Enable compression (gzip)</label>
          </div>
          
          <div style="margin-bottom: 20px;">
            <div style="font-weight: bold; margin-bottom: 8px;">Encryption</div>
            <label><input type="checkbox"> Enable AES-256 encryption</label>
          </div>
          
          <div>
            <button class="mock-button">Save Changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>