# Web3 Ontwerp: Cyberpunk en Technologische Uitstraling

## 🎨 Visuele Richtlijnen voor Web3-Design

Op basis van de zoekresultaten heb ik een uitgebreid Web3-ontwerp ontwikkeld met een cyberpunk/technologische uitstraling die perfect past bij het gedecentraliseerde karakter van Web3.

### 🌌 Kleurenschema en Stijl
- **Donkere achtergronden** (#0a0a1a, #12122a) met **felcontrasterende neonaccenten** in:
  - **Paars** (#a239ea) voor primaire elementen
  - **Cyaan** (#00e5ff) voor secundaire accenten
  - **Magenta** (#ff00ff) voor highlights en calls-to-action
  - **Groen** (#00ff9d) voor success states en bevestigingen

- **Diepte en dimensie** creëren met:
  - Gradient overlays (radial gradients met kleurpunten)
  - Glow effects (box-shadow met neonkleuren)
  - Dunne borders met neonkleuren (1-2px)

### ⚡ Typografie en Iconografie
- **Monospace lettertypes** voor technologische uitstraling
- **Dikke font-weights** voor headers (700-800)
- **Pixel-art iconen** of lineaire iconsets
- **Animaties**:
  - Pulsende effecten voor belangrijke elementen
  - Glow animations voor knoppen en cards
  - Text shimmer effects voor headers

### 🧩 Layout Principes
- **Geometrische vormen** en scherpe hoeken (8px border-radius)
- **Layered design** met overlapping elements
- **Asymmetrische layouts** voor dynamisch gevoel
- **Ruimtegebruik**: genoeg whitespace maar compacte elementen

## 💻 Component Bibliotheek

### Knoppen en Inputs
```css
.web3-btn {
  background: transparent;
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--border-radius);
  padding: 12px 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.web3-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.2), transparent);
  transition: var(--transition);
}

.web3-btn:hover::before {
  left: 100%;
}

.web3-btn-primary {
  background-color: var(--accent-purple);
  border-color: var(--accent-purple);
  box-shadow: 0 0 15px rgba(162, 57, 234, 0.5);
}

.web3-input {
  background-color: rgba(22, 22, 58, 0.7);
  border: 1px solid var(--accent-purple);
  border-radius: var(--border-radius);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 1rem;
  transition: var(--transition);
}

.web3-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
```

### Cards en Containers
```css
.web3-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(162, 57, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.web3-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
  opacity: 0.7;
}

.web3-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(162, 57, 234, 0.3);
}
```

### Navigatie en Header
```css
.web3-header {
  background-color: var(--secondary-bg);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0 15px rgba(162, 57, 234, 0.5);
  border-bottom: 1px solid var(--accent-purple);
}

.web3-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.web3-logo {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(45deg, var(--accent-cyan), var(--accent-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(162, 57, 234, 0.5);
}
```

## 🎭 Specifieke Web3 Elementen

### Wallet Connect Interface
```html
<div class="web3-card wallet-connect">
  <h3 class="web3-card-title">Connect Wallet</h3>
  <div class="wallet-options">
    <button class="web3-btn wallet-option">
      <i class="wallet-icon metamask"></i>
      MetaMask
    </button>
    <button class="web3-btn wallet-option">
      <i class="wallet-icon coinbase"></i>
      Coinbase Wallet
    </button>
    <button class="web3-btn wallet-option">
      <i class="wallet-icon walletconnect"></i>
      WalletConnect
    </button>
  </div>
  <p class="wallet-note">Web3 wallets give you access to the decentralized web</p>
</div>
```

### Blockchain Netwerk Status
```html
<div class="network-status">
  <div class="status-indicator"></div>
  <span class="network-name">Ethereum Mainnet</span>
  <span class="block-number">Block #15463245</span>
</div>
```

### Token Balances en NFTs
```html
<div class="web3-card assets-card">
  <h3 class="web3-card-title">Digital Assets</h3>
  <div class="token-list">
    <div class="token-item">
      <div class="token-icon">ETH</div>
      <div class="token-info">
        <span class="token-name">Ethereum</span>
        <span class="token-balance">2.45 ETH</span>
      </div>
      <span class="token-value">$4,325.60</span>
    </div>
  </div>
  <div class="nft-grid">
    <div class="nft-item">
      <img src="nft-image.jpg" alt="NFT" class="nft-image">
      <div class="nft-info">
        <span class="nft-name">CyberPunk #4521</span>
        <span class="nft-collection">CryptoPunks</span>
      </div>
    </div>
  </div>
</div>
```

## 📱 Responsive Design Kenmerken

### Mobile First Approach
```css
@media (max-width: 768px) {
  .web3-nav {
    flex-direction: column;
    gap: 1rem;
  }
  
  .web3-card {
    padding: 1rem;
  }
  
  .wallet-options {
    grid-template-columns: 1fr;
  }
}
```

### Grid System voor Web3 Components
```css
.dapp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (max-width: 1024px) {
  .dapp-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
```

## 🛠️ Web3-specifieke Functionaliteiten

### Smart Contract Interacties
```html
<div class="contract-interaction">
  <h4>Smart Contract Interaction</h4>
  <div class="contract-address">
    <span>Contract: 0x742d35Cc6634C0532925a3b844Bc454e4438f44e</span>
    <button class="web3-btn copy-btn">Copy</button>
  </div>
  <div class="contract-methods">
    <select class="web3-input method-select">
      <option>Select Method</option>
      <option>transfer</option>
      <option>approve</option>
      <option>balanceOf</option>
    </select>
    <div class="method-params">
      <input type="text" class="web3-input" placeholder="Parameter values">
    </div>
    <button class="web3-btn btn-primary">Execute</button>
  </div>
</div>
```

### Transaction Status
```html
<div class="transaction-status">
  <div class="tx-hash">
    <span>TX: 0x4f4c4c5f474f465f4d4f4f4e5f3839393839393839</span>
    <a href="#" class="tx-link">View on Explorer</a>
  </div>
  <div class="tx-progress">
    <div class="progress-bar">
      <div class="progress-fill" style="width: 75%"></div>
    </div>
    <span class="tx-status">Confirming (12/16)</span>
  </div>
</div>
```

## 🌐 Complete Page Voorbeeld

```html
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web3 DApp - Cyberpunk Interface</title>
    <style>
        :root {
            --primary-bg: #0a0a1a;
            --secondary-bg: #12122a;
            --card-bg: #16163a;
            --accent-purple: #a239ea;
            --accent-cyan: #00e5ff;
            --accent-magenta: #ff00ff;
            --accent-green: #00ff9d;
            --text-primary: #ffffff;
            --text-secondary: #b3b3cc;
            --border-radius: 8px;
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }

        body {
            background-color: var(--primary-bg);
            color: var(--text-primary);
            line-height: 1.6;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(162, 57, 234, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 90% 70%, rgba(0, 229, 255, 0.1) 0%, transparent 20%);
        }

        .web3-header {
            background-color: var(--secondary-bg);
            padding: 1rem 2rem;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 0 15px rgba(162, 57, 234, 0.5);
            border-bottom: 1px solid var(--accent-purple);
        }

        .web3-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .web3-logo {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(45deg, var(--accent-cyan), var(--accent-purple));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(162, 57, 234, 0.5);
        }

        .web3-btn {
            background: transparent;
            color: var(--accent-cyan);
            border: 1px solid var(--accent-cyan);
            border-radius: var(--border-radius);
            padding: 0.8rem 1.5rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            cursor: pointer;
        }

        .web3-btn:hover {
            background-color: rgba(0, 229, 255, 0.1);
        }

        .web3-btn-primary {
            background-color: var(--accent-purple);
            color: var(--text-primary);
            border-color: var(--accent-purple);
        }

        .web3-btn-primary:hover {
            background-color: rgba(162, 57, 234, 0.8);
            box-shadow: 0 0 15px rgba(162, 57, 234, 0.5);
        }

        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .dapp-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }

        .web3-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(162, 57, 234, 0.3);
            position: relative;
            overflow: hidden;
        }

        .web3-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
        }

        .web3-card-title {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            background: linear-gradient(45deg, var(--accent-cyan), var(--accent-purple));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        @media (max-width: 768px) {
            .web3-nav {
                flex-direction: column;
                gap: 1rem;
            }
            
            .dapp-grid {
                grid-template-columns: 1fr;
            }
        }

        @keyframes glow {
            0% { box-shadow: 0 0 5px var(--accent-purple); }
            50% { box-shadow: 0 0 20px var(--accent-purple); }
            100% { box-shadow: 0 0 5px var(--accent-purple); }
        }

        .glow-effect {
            animation: glow 2s infinite;
        }
    </style>
</head>
<body>
    <header class="web3-header">
        <nav class="web3-nav">
            <div class="web3-logo">Web3DApp</div>
            <div class="nav-links">
                <button class="web3-btn">Dashboard</button>
                <button class="web3-btn">NFTs</button>
                <button class="web3-btn">DeFi</button>
                <button class="web3-btn">Governance</button>
            </div>
            <button class="web3-btn web3-btn-primary">Connect Wallet</button>
        </nav>
    </header>

    <div class="container">
        <div class="dapp-grid">
            <div class="web3-card">
                <h3 class="web3-card-title">Portfolio Value</h3>
                <p class="balance">3.45 ETH</p>
                <p class="value">$6,245.80</p>
            </div>
            
            <div class="web3-card">
                <h3 class="web3-card-title">Recent Transactions</h3>
                <div class="transaction-list">
                    <div class="transaction-item">
                        <span class="tx-type">Received</span>
                        <span class="tx-amount">+0.5 ETH</span>
                    </div>
                </div>
            </div>
            
            <div class="web3-card">
                <h3 class="web3-card-title">Network Status</h3>
                <div class="network-info">
                    <span class="status-dot"></span>
                    <span class="network-name">Ethereum Mainnet</span>
                </div>
                <div class="block-info">
                    <span>Block: #15463245</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
```

Dit ontwerp combineert de technologische vooruitgang van Web3 met een cyberpunk-esthetiek die perfect past bij het gedecentraliseerde karakter van blockchain-toepassingen. De donkere thema's met felle neonaccenten creëren een visuele identiteit die zowel futuristisch als functioneel is.