📁 File Manager

Dosya Düzenle: index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Service Expired</title>

*{box-sizing:border-box}
    html,body{
      height:100%;
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:
        radial-gradient(1200px 600px at 10% 10%, rgba(255,107,107,0.06), transparent 8%),
        radial-gradient(900px 500px at 90% 90%, rgba(91,109,255,0.04), transparent 8%),
        var(--bg);
      color: #e6eef8;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }

.card{
      width:100%;
      max-width:var(--maxw);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:var(--radius);
      padding:32px;
      display:grid;
      grid-template-columns: 220px 1fr;
      gap:28px;
      align-items:center;
      box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.03);
      backdrop-filter: blur(6px);
    }

/* left area: icon */
    .card-hero{
      background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:12px;
      padding:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:160px;
      box-shadow: inset 0 -6px 18px rgba(0,0,0,0.4);
    }
    .icon-wrap{
      width:120px;
      height:120px;
      border-radius:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: linear-gradient(135deg, rgba(255,107,107,0.14), rgba(255,107,107,0.06));
      border: 1px solid rgba(255,107,107,0.12);
      box-shadow: 0 8px 30px rgba(255,107,107,0.06);
    }
    .icon-wrap svg{ width:68px; height:68px; }

/* right area: content */
    .card-body{
      padding:6px 0;
    }
    .title{
      font-size:22px;
      font-weight:var(--fw-heading);
      margin:0 0 6px 0;
      letter-spacing:-0.2px;
    }
    .subtitle{
      margin:0 0 16px 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }

.details{
      background:var(--glass);
      border-radius:10px;
      padding:12px 14px;
      display:flex;
      gap:12px;
      align-items:center;
      border:1px solid rgba(255,255,255,0.02);
      margin-bottom:18px;
    }
    .details b{ display:block; font-size:13px; color:#fff; }
    .details span{ font-size:13px; color:var(--muted) }

.actions{ display:flex; gap:12px; flex-wrap:wrap; }
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 16px;
      border-radius:10px;
      text-decoration:none;
      font-weight:600;
      font-size:14px;
      cursor:pointer;
      border:1px solid transparent;
      transition: transform .14s ease, box-shadow .14s ease;
      user-select:none;
    }
    .btn:active{ transform: translateY(1px) }
    .btn-primary{
      background: linear-gradient(90deg,var(--accent), #ff8b6b);
      color: #071022;
      box-shadow: 0 8px 26px rgba(255,107,107,0.14);
    }
    .btn-outline{
      background:transparent;
      color:var(--muted);
      border:1px solid rgba(255,255,255,0.04);
    }

.small{
      font-size:13px;
      color:var(--muted);
      margin-top:12px;
    }

/* responsive */
    @media (max-width:720px){
      .card{ grid-template-columns: 1fr; padding:20px; gap:18px; }
      .card-hero{ min-height:120px; }
      .icon-wrap{ width:84px; height:84px; border-radius:16px; }
      .title{ font-size:20px }
    }
  </style>
</head>
<body>

<section class="card-body" aria-labelledby="page-title">
      <h1 id="page-title" class="title">Service Expired</h1>
      <p class="subtitle">The service tied to this account or domain has expired. To continue using the features, please renew your subscription or contact support for help.</p>

<div class="details" role="status" aria-live="polite">
        <div>
          <b>Status</b>
          <span>Expired</span>
        </div>
        <div style="margin-left:8px;">
          <b>Account</b>
          <span>example@domain.com</span>
        </div>
        <div style="margin-left:auto; text-align:right;">
          <b>Expired on</b>
          <span>Oct 31, 2025</span>
        </div>
      </div>

<div class="actions" role="group" aria-label="Renewal actions">
        
        <a class="btn btn-primary" href="https://yourdomain.com/renew" title="Renew Service">
          
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 10v6a2 2 0 0 1-2 2H7" stroke="#071022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M7 14l4-4 4 4" stroke="#071022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Renew Now
        </a>

<a class="btn btn-outline" href="mailto:support@yourdomain.com" title="Contact Support">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 8.5l8.5 5L20 8.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
            <rect x="3" y="5.5" width="18" height="13" rx="2" stroke="currentColor" stroke-width="1.2"/>
          </svg>
          Contact Support
        </a>

<p class="small">If you recently renewed and are still seeing this message, please clear your cache or sign out and sign back in. For billing questions contact <a href="mailto:billing@yourdomain.com" style="color:inherit; text-decoration:underline;">billing@yourdomain.com</a>.</p>
    </section>
  </main>

</body>
</html>

İptal