ZawaZawaテスト掲示板

テスト掲示板１ / 131

134 コメント

views

0 フォロー

131

取引確認

DEMO

Dear_Karina さんからの取引

¥98,000

このページは学習用のデモサイトです。

購入者が商品を受け取り、確認が完了すると、出品者へ売上が反映される流れを再現しています。

:warning: このページは実験・デザイン学習用です。
実際の送金・アカウント譲渡には使用できません。

受け取り確認

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Escrow Demo</title>

  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:sans-serif;
    }

    body{
      background:#0f172a;
      color:white;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:20px;
    }

    .card{
      width:100%;
      max-width:500px;
      background:#111827;
      border-radius:20px;
      padding:30px;
      box-shadow:0 0 30px rgba(0,0,0,0.4);
      border:1px solid rgba(255,255,255,0.08);
    }

    .top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:30px;
    }

    .badge{
      background:#16a34a;
      padding:6px 12px;
      border-radius:999px;
      font-size:12px;
      font-weight:bold;
    }

    h1{
      font-size:24px;
      margin-bottom:10px;
    }

    .amount{
      font-size:48px;
      font-weight:bold;
      color:#22c55e;
      margin:20px 0;
    }

    .info{
      background:#1e293b;
      padding:18px;
      border-radius:14px;
      line-height:1.7;
      font-size:14px;
      color:#cbd5e1;
    }

    .warning{
      margin-top:20px;
      background:#3f1d1d;
      border:1px solid #ef4444;
      color:#fecaca;
      padding:14px;
      border-radius:12px;
      font-size:13px;
    }

    button{
      width:100%;
      margin-top:25px;
      padding:16px;
      border:none;
      border-radius:14px;
      background:#2563eb;
      color:white;
      font-size:16px;
      font-weight:bold;
      cursor:pointer;
      transition:0.2s;
    }

    button:hover{
      background:#1d4ed8;
      transform:translateY(-2px);
    }

    .footer{
      margin-top:20px;
      text-align:center;
      font-size:12px;
      color:#94a3b8;
    }
  </style>
</head>

<body>

  <div class="card">

    <div class="top">
      <h2>取引確認</h2>
      <div class="badge">DEMO</div>
    </div>

    <h1>Dear_Karina さんからの取引</h1>

    <div class="amount">¥98,000</div>

    <div class="info">
      このページは学習用のデモサイトです。<br><br>

      購入者が商品を受け取り、確認が完了すると、
      出品者へ売上が反映される流れを再現しています。
    </div>

    <div class="warning">
      :warning: このページは実験・デザイン学習用です。<br>
      実際の送金・アカウント譲渡には使用できません。
    </div>

    <button onclick="completeDemo()">
      受け取り確認
    </button>

    <div class="footer">
      Escrow UI Demo © 2026
    </div>

  </div>

  <script>
    function completeDemo(){
      alert("デモ: 受け取り確認が完了しました。");
    }
  </script>

</body>
</html>

ソース表示通報 ...

ZawaZawaテスト掲示板

テスト掲示板１ / 131

取引確認

Dear_Karina さんからの取引

最新トピック