MOONy

✎ EDIT FILE

EDITING: download-plugin-pro-notice-single-file.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Download Plugin Pro Notice Mockup</title>
  <style>
    :root {
      --dp-notice-border: #e5e7eb;
      --dp-notice-accent: #f3b23d;
      --dp-notice-title: #1f2937;
      --dp-notice-text: #4b5563;
      --dp-notice-btn: #1f6fb2;
      --dp-notice-btn-hover: #175b90;
      --dp-notice-surface: #ffffff;
    }

body {
      margin: 0;
      padding: 24px;
      background: #f3f4f6;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--dp-notice-title);
    }

.notice-shell {
      max-width: 1440px;
      margin: 0 auto;
    }

.dp-notice {
      position: relative;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: var(--dp-notice-surface);
      border: 1px solid var(--dp-notice-border);
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      padding: 18px 56px 18px 18px;
    }

.dp-notice::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 5px;
      background: linear-gradient(180deg, #f3b23d 0%, #f7d27a 100%);
      border-radius: 4px 0 0 4px;
    }

.dp-notice-icon {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      border-radius: 50%;
      background: rgba(243, 178, 61, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #8a5a00;
      margin-top: 2px;
      font-weight: 700;
    }

.dp-notice-content {
      flex: 1 1 auto;
      min-width: 0;
    }

.dp-notice-title {
      font-size: 1.08rem;
      font-weight: 800;
      line-height: 1.3;
      margin: 0 0 10px;
      color: var(--dp-notice-title);
    }

.dp-notice-text {
      margin: 0;
      color: var(--dp-notice-text);
      font-size: 0.98rem;
      line-height: 1.6;
      width: 100%;
    }

.dp-notice-actions {
      margin-top: 14px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

.dp-btn-primary {
      background: var(--dp-notice-btn);
      border: 1px solid var(--dp-notice-btn);
      color: #fff;
      font-weight: 700;
      border-radius: 10px;
      padding: 10px 18px;
      text-decoration: none;
      display: inline-block;
    }

.dp-btn-primary:hover {
      background: var(--dp-notice-btn-hover);
      border-color: var(--dp-notice-btn-hover);
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="notice-shell">
    <div class="dp-notice" role="alert" aria-live="polite">
      <div class="dp-notice-icon">↑</div>
      <div class="dp-notice-content">
        <h2 class="dp-notice-title">Need full backups, imports, and recovery tools?</h2>
        <p class="dp-notice-text">
          Download Plugin Pro helps you back up your site, move content in and out, and restore things when you need them.
          It adds backup export and restore, CSV import and export, media ZIP import, and backup package recovery tools.
        </p>
        <div class="dp-notice-actions">
          <a href="https://theeventprime.com/checkout/?download_id=43730&edd_action=add_to_cart&edd_options[price_id][]=1" class="dp-btn-primary">Upgrade to Pro</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 download-plugin-pro-modal-single-file.html	HTML	9.8 KB	2026-05-08 08:09	EDIT
📄 download-plugin-pro-notice-single-file.html	HTML	3.3 KB	2026-05-08 08:09	EDIT