redesign: cyber/tech dark theme certificate - dark bg, hexagons, gold accents

app/services/certificate_service.py

@@ -220,25 +220,25 @@ def build_certificate_pdf(
     from reportlab.pdfgen import canvas
     import qrcode
     from qrcode.image.pil import PilImage
+    import math
 
     W, H = landscape(A4)
     buf = io.BytesIO()
     c = canvas.Canvas(buf, pagesize=landscape(A4))
 
-    # ── Modern color palette ──
-    DEEP_NAVY  = HexColor("#0B1426")
-    MID_NAVY   = HexColor("#162032")
-    GOLD       = HexColor("#D4A853")
-    GOLD_LIGHT = HexColor("#E8C97A")
-    TEAL       = HexColor("#0D9488")
-    TEXT_DARK  = HexColor("#0F172A")
-    TEXT_MED   = HexColor("#475569")
-    TEXT_LIGHT = HexColor("#94A3B8")
-    BG_LIGHT   = HexColor("#F8FAFC")
-    BORDER     = HexColor("#E2E8F0")
-    WHITE      = HexColor("#FFFFFF")
-
-    # Register Arabic font
+    # ── Cyber color palette ──
+    BG_DARK   = HexColor("#080E1A")
+    BG_MID    = HexColor("#0D1526")
+    BG_CARD   = HexColor("#111C33")
+    GOLD      = HexColor("#D4A853")
+    GOLD_DIM  = HexColor("#A8873A")
+    CYBER     = HexColor("#22D3EE")  # cyan accent
+    CYBER_DIM = HexColor("#0E7490")
+    TEXT_PRIMARY = HexColor("#F1F5F9")
+    TEXT_SECOND  = HexColor("#94A3B8")
+    TEXT_MUTED   = HexColor("#475569")
+    BORDER     = HexColor("#1E293B")
+
     ar_font, ar_font_bold = _ensure_arabic_font()
     en_font      = "Helvetica"
     en_font_bold = "Helvetica-Bold"
@@ -259,197 +259,223 @@ def build_certificate_pdf(
     def _tx(text):
         return _ar(text) if _is_ar(text) else text
 
-    # ── Clean white background ──
-    c.setFillColor(WHITE)
-    c.rect(0, 0, W, H, fill=1, stroke=0)
-
-    # subtle top accent line
+    # ── Background: dark gradient ──
+    for y in range(0, int(H), 3):
+        t = 1 - y / H
+        r = 0.03 + 0.05 * t
+        g = 0.05 + 0.07 * t
+        b = 0.10 + 0.12 * t
+        c.setFillColorRGB(min(r, 1), min(g, 1), min(b, 1))
+        c.rect(0, y, W, 3, fill=1, stroke=0)
+
+    # ── Decorative tech grid ──
+    c.setStrokeColor(HexColor("#1A2744"))
+    c.setLineWidth(0.15)
+    for x in range(0, int(W), 20):
+        c.line(x, 0, x, H)
+    for y in range(0, int(H), 20):
+        c.line(0, y, W, y)
+
+    # ── Decorative hexagons ──
+    def _hexagon(cx, cy, r, stroke_color=None, fill_color=None):
+        p = c.beginPath()
+        for i in range(6):
+            a = math.radians(60 * i - 90)
+            px = cx + r * math.cos(a)
+            py = cy + r * math.sin(a)
+            if i == 0:
+                p.moveTo(px, py)
+            else:
+                p.lineTo(px, py)
+        p.close()
+        if fill_color:
+            c.setFillColor(fill_color)
+            c.drawPath(p, fill=1, stroke=0)
+        if stroke_color:
+            c.setStrokeColor(stroke_color)
+            c.setLineWidth(0.3)
+            c.drawPath(p, fill=0, stroke=1)
+
+    _hexagon(W - 25*mm, H - 25*mm, 15*mm, stroke_color=HexColor("#1A2744"))
+    _hexagon(W - 35*mm, H - 15*mm, 8*mm, stroke_color=HexColor("#1A2744"))
+    _hexagon(35*mm, H - 20*mm, 10*mm, stroke_color=HexColor("#1A2744"))
+    _hexagon(W - 40*mm, 30*mm, 12*mm, stroke_color=HexColor("#1A2744"))
+
+    # ── Top gold accent bar ──
     c.setFillColor(GOLD)
-    c.rect(0, H - 1.2*mm, W, 1.2*mm, fill=1, stroke=0)
+    c.rect(0, H - 1.5*mm, W, 1.5*mm, fill=1, stroke=0)
 
-    # ── Sidebar (50 mm) — deep navy ──
-    BAR = 50 * mm
-    c.setFillColor(DEEP_NAVY)
-    c.rect(0, 0, BAR, H, fill=1, stroke=0)
+    # ── Main card (slightly lighter bg) ──
+    MARGIN = 10*mm
+    c.setFillColor(BG_CARD)
+    c.roundRect(MARGIN, MARGIN, W - 2*MARGIN, H - 2*MARGIN - 1.5*mm, 4*mm, fill=1, stroke=0)
 
-    # gold accent strip on sidebar right edge
-    c.setFillColor(GOLD)
-    c.rect(BAR - 1.2*mm, 0, 1.2*mm, H, fill=1, stroke=0)
+    # thin gold border on card
+    c.setStrokeColor(GOLD_DIM)
+    c.setLineWidth(0.3)
+    c.roundRect(MARGIN, MARGIN, W - 2*MARGIN, H - 2*MARGIN - 1.5*mm, 4*mm, fill=0, stroke=1)
 
-    # subtle gradient overlay on sidebar (lighter at top)
-    for i in range(40):
-        alpha = 0.03 * (1 - i / 40)
-        c.setFillColor(Color(1, 1, 1, alpha))
-        c.rect(0, H - i * 8*mm, BAR, 8*mm, fill=1, stroke=0)
+    # ── Inner content area ──
+    CX = W / 2
+    INNER_L = MARGIN + 12*mm
+    INNER_R = W - MARGIN - 12*mm
+    TOP = H - MARGIN - 16*mm
+    BOT = MARGIN + 14*mm
 
-    # ── Logo: ALPHA-LOGO.png ──
+    # ── Top left: ALPHA logo + brand ──
     if _LOGO_JPG_PATH and os.path.exists(_LOGO_JPG_PATH):
-        logo_size = 20 * mm
-        logo_y = H - 34 * mm
-        c.drawImage(_LOGO_JPG_PATH, (BAR - logo_size) / 2, logo_y,
+        logo_size = 16 * mm
+        c.drawImage(_LOGO_JPG_PATH, INNER_L, TOP - 2*mm,
                     width=logo_size, height=logo_size, preserveAspectRatio=True)
 
-    # ALPHA TEAM text
-    c.setFillColor(GOLD)
-    c.setFont(_font("bold"), 9)
-    c.drawCentredString(BAR/2, H - 44*mm, _tx("ALPHA TEAM"))
-    c.setFillColor(TEXT_LIGHT)
-    c.setFont(_font(), 6.5)
-    c.drawCentredString(BAR/2, H - 48*mm, _tx("CYBERSECURITY"))
+    c.setFillColor(TEXT_PRIMARY)
+    c.setFont(_font("bold"), 11)
+    c.drawString(INNER_L + 20*mm, TOP + 1*mm, _tx("ALPHA TEAM"))
+    c.setFillColor(TEXT_MUTED)
+    c.setFont(_font(), 7)
+    c.drawString(INNER_L + 20*mm, TOP - 5*mm, _tx("CYBERSECURITY"))
 
-    # sidebar divider — thin gold line
-    c.setStrokeColor(GOLD)
-    c.setLineWidth(0.3)
-    div_y = H - 56*mm
-    c.line(12*mm, div_y, BAR - 12*mm, div_y)
-
-    # sidebar bottom info
-    c.setFillColor(TEXT_LIGHT)
-    c.setFont(_font(), 5.5)
-    c.drawCentredString(BAR/2, 18*mm, _tx("CyberArena Platform"))
-    c.drawCentredString(BAR/2, 13*mm, _tx("cyberarena.app"))
-
-    # ── Main content area ──
-    CX = BAR + (W - BAR) / 2
-    RIGHT = W - 15*mm
-    TOP = H - 18*mm
-
-    # Header row: shield + CYBERARENA + subtitle
-    hdr_x = BAR + 16*mm
-    hdr_y = TOP + 2*mm
-
-    # small shield icon
-    c.setFillColor(DEEP_NAVY)
-    sp2 = c.beginPath()
-    sp2.moveTo(hdr_x, hdr_y + 5.5*mm)
-    sp2.lineTo(hdr_x + 3.5*mm, hdr_y + 3.5*mm)
-    sp2.lineTo(hdr_x + 3.5*mm, hdr_y + 0.5*mm)
-    sp2.lineTo(hdr_x + 1.5*mm, hdr_y - 1*mm)
-    sp2.lineTo(hdr_x, hdr_y + 0.5*mm)
-    sp2.lineTo(hdr_x - 1.5*mm, hdr_y - 1*mm)
-    sp2.lineTo(hdr_x - 3.5*mm, hdr_y + 0.5*mm)
-    sp2.lineTo(hdr_x - 3.5*mm, hdr_y + 3.5*mm)
-    sp2.close()
-    c.drawPath(sp2, fill=1, stroke=0)
-    c.setStrokeColor(GOLD)
-    c.setLineWidth(0.5)
-    c.rect(hdr_x - 1.2*mm, hdr_y + 0.5*mm, 2.4*mm, 2*mm, fill=0, stroke=1)
-    c.arc(hdr_x - 0.8*mm, hdr_y + 2*mm, hdr_x + 0.8*mm, hdr_y + 3.5*mm, 0, 180)
-
-    c.setFillColor(DEEP_NAVY)
-    c.setFont(_font("bold"), 13)
-    c.drawString(hdr_x + 6*mm, TOP, _tx("CYBERARENA"))
-    c.setFillColor(TEXT_LIGHT)
-    c.setFont(_font(), 7.5)
-    c.drawString(hdr_x + 6*mm, TOP - 4.5*mm, _tx("CERTIFICATE OF COMPLETION"))
-
-    # gold separator line under header
-    c.setStrokeColor(GOLD)
-    c.setLineWidth(0.6)
-    c.line(BAR + 12*mm, TOP - 8*mm, RIGHT, TOP - 8*mm)
+    # ── Top right: CYBERARENA brand ──
+    c.setFillColor(GOLD)
+    c.setFont(_font("bold"), 11)
+    c.drawRightString(INNER_R, TOP + 1*mm, _tx("CYBERARENA"))
+    c.setFillColor(TEXT_MUTED)
+    c.setFont(_font(), 7)
+    c.drawRightString(INNER_R, TOP - 5*mm, _tx("CERTIFICATE OF COMPLETION"))
+
+    # ── Gold divider ──
+    div_y = TOP - 12*mm
+    c.setStrokeColor(GOLD_DIM)
+    c.setLineWidth(0.4)
+    c.line(INNER_L, div_y, INNER_R, div_y)
+
+    # ── Cyber seal (large hexagon) ──
+    seal_cx = INNER_R - 5*mm
+    seal_cy = (TOP + BOT) / 2 + 15*mm
+    _hexagon(seal_cx, seal_cy, 18*mm, stroke_color=HexColor("#D4A853"), fill_color=HexColor("#0D1526"))
+    _hexagon(seal_cx, seal_cy, 14*mm, stroke_color=HexColor("#A8873A"))
+    _hexagon(seal_cx, seal_cy, 10*mm, stroke_color=HexColor("#D4A853"))
+    c.setFillColor(GOLD_DIM)
+    c.setFont(_font("bold"), 5)
+    c.drawCentredString(seal_cx, seal_cy - 2*mm, "✓")
+    c.setFont(_font(), 4.5)
+    c.drawCentredString(seal_cx, seal_cy - 6*mm, "VERIFIED")
+
+    # ── Title ──
+    cert_label = "شهادة إتمام" if lang == "ar" else "CERTIFICATE"
+    c.setFillColor(GOLD)
+    c.setFont(_font("bold"), 34)
+    c.drawCentredString(CX, TOP - 30*mm, _tx(cert_label))
 
-    # ── Title block ──
-    cert_label  = "شهادة إتمام" if lang == "ar" else "CERTIFICATE"
+    # subtitle
     cert_label2 = "في الأمن السيبراني" if lang == "ar" else "OF COMPLETION"
-
-    c.setFillColor(DEEP_NAVY)
-    c.setFont(_font("bold"), 32)
-    c.drawCentredString(CX, TOP - 30*mm, _tx(cert_label))
-    c.setFillColor(TEXT_MED)
-    c.setFont(_font(), 15)
+    c.setFillColor(TEXT_SECOND)
+    c.setFont(_font(), 13)
     c.drawCentredString(CX, TOP - 38*mm, _tx(cert_label2))
 
-    # modern divider — gold lines with diamond
-    div3_y = TOP - 44*mm
-    c.setStrokeColor(GOLD)
-    c.setLineWidth(0.7)
-    c.line(CX - 32*mm, div3_y, CX - 2.5*mm, div3_y)
-    c.line(CX + 2.5*mm, div3_y, CX + 32*mm, div3_y)
-    # diamond
+    # ── Gold diamond divider ──
+    div2_y = TOP - 44*mm
+    c.setStrokeColor(GOLD_DIM)
+    c.setLineWidth(0.5)
+    c.line(CX - 25*mm, div2_y, CX - 2.5*mm, div2_y)
+    c.line(CX + 2.5*mm, div2_y, CX + 25*mm, div2_y)
     c.setFillColor(GOLD)
     d2 = c.beginPath()
-    d2.moveTo(CX, div3_y + 2*mm)
-    d2.lineTo(CX + 2*mm, div3_y)
-    d2.lineTo(CX, div3_y - 2*mm)
-    d2.lineTo(CX - 2*mm, div3_y)
+    d2.moveTo(CX, div2_y + 1.8*mm)
+    d2.lineTo(CX + 1.8*mm, div2_y)
+    d2.lineTo(CX, div2_y - 1.8*mm)
+    d2.lineTo(CX - 1.8*mm, div2_y)
     d2.close()
     c.drawPath(d2, fill=1, stroke=0)
 
     # ── Body ──
-    # intro line
     intro = "نشهد بأن" if lang == "ar" else "This is to certify that"
-    c.setFillColor(TEXT_MED)
-    c.setFont(_font(), 10)
+    c.setFillColor(TEXT_SECOND)
+    c.setFont(_font(), 9)
     c.drawCentredString(CX, TOP - 56*mm, _tx(intro))
 
-    # user name (large, navy, bold)
+    # Name (large, gold)
     name = (user_name or "Trainee")[:60]
-    c.setFillColor(DEEP_NAVY)
-    c.setFont(_font_for(name, "bold"), 28)
-    c.drawCentredString(CX, TOP - 70*mm, _tx(name))
+    c.setFillColor(TEXT_PRIMARY)
+    c.setFont(_font_for(name, "bold"), 26)
+    c.drawCentredString(CX, TOP - 68*mm, _tx(name))
 
-    # gold underline under name
-    nw = c.stringWidth(_tx(name), _font_for(name, "bold"), 28)
+    # gold underline
+    nw = c.stringWidth(_tx(name), _font_for(name, "bold"), 26)
     c.setStrokeColor(GOLD)
-    c.setLineWidth(1.5)
-    c.line(CX - nw/2 - 2, TOP - 73*mm, CX + nw/2 + 2, TOP - 73*mm)
+    c.setLineWidth(1.2)
+    c.line(CX - nw/2 - 2, TOP - 71*mm, CX + nw/2 + 2, TOP - 71*mm)
+
+    # small cyber dots on underline
+    c.setFillColor(CYBER)
+    for dot_x in [CX - nw/2 - 3, CX + nw/2 + 3]:
+        c.circle(dot_x, TOP - 71*mm, 0.6*mm, fill=1, stroke=0)
 
     # body text
     body = "قد أتمّ بنجاح جميع التحديات التفاعلية والمختبرات العملية في مجال:" if lang == "ar" else "has successfully completed all interactive challenges and practical labs in"
-    c.setFillColor(TEXT_MED)
-    c.setFont(_font(), 10)
-    c.drawCentredString(CX, TOP - 86*mm, _tx(body))
+    c.setFillColor(TEXT_SECOND)
+    c.setFont(_font(), 9)
+    c.drawCentredString(CX, TOP - 84*mm, _tx(body))
 
-    # category (gold, bold)
+    # category badge
     cat_label = category_label(category, lang=lang)
+    # badge background
+    badge_w = c.stringWidth(_tx(cat_label), _font("bold"), 18) + 10*mm
+    c.setFillColor(BG_DARK)
+    c.roundRect(CX - badge_w/2, TOP - 99*mm - 3*mm, badge_w, 12*mm, 3*mm, fill=1, stroke=0)
+    c.setStrokeColor(GOLD_DIM)
+    c.setLineWidth(0.5)
+    c.roundRect(CX - badge_w/2, TOP - 99*mm - 3*mm, badge_w, 12*mm, 3*mm, fill=0, stroke=1)
     c.setFillColor(GOLD)
-    c.setFont(_font("bold"), 20)
-    c.drawCentredString(CX, TOP - 100*mm, _tx(cat_label))
+    c.setFont(_font("bold"), 18)
+    c.drawCentredString(CX, TOP - 99*mm, _tx(cat_label))
 
     # subtitle
-    c.setFillColor(TEXT_LIGHT)
-    c.setFont(_font_for(title), 8.5)
-    c.drawCentredString(CX, TOP - 107*mm, _tx(title))
+    c.setFillColor(TEXT_MUTED)
+    c.setFont(_font_for(title), 7.5)
+    c.drawCentredString(CX, TOP - 110*mm, _tx(title))
 
     # ── Bottom section ──
-    BOT = 14*mm
-
-    # thin separator above bottom
+    # divider
     c.setStrokeColor(BORDER)
     c.setLineWidth(0.3)
-    c.line(BAR + 12*mm, BOT + 38*mm, RIGHT, BOT + 38*mm)
+    c.line(INNER_L, BOT + 34*mm, INNER_R, BOT + 34*mm)
 
     # 1) QR code
     qr_payload = (CERT_VERIFY_BASE_URL or "https://cyberarena.app/verify") + "/verify?code=" + verify_code
-    qr = qrcode.QRCode(box_size=4, border=0)
+    qr = qrcode.QRCode(box_size=3, border=0)
     qr.add_data(qr_payload)
     qr.make(fit=True)
-    qr_img = qr.make_image(fill_color="#0B1426", back_color="white", image_factory=PilImage)
+    qr_img = qr.make_image(fill_color="#D4A853", back_color="#111C33", image_factory=PilImage)
     qr_path = os.path.join(tempfile.gettempdir(), f"ca_qr_{verify_code.replace(' ', '_')}.png")
     qr_img.save(qr_path, format="PNG")
-    qr_s = 20*mm
-    qr_x = BAR + 14*mm
-    c.drawImage(qr_path, qr_x, BOT + 2*mm, width=qr_s, height=qr_s, preserveAspectRatio=True, mask="auto")
-    c.setFillColor(DEEP_NAVY)
+    qr_s = 18*mm
+    qr_x = INNER_L
+    c.drawImage(qr_path, qr_x, BOT + 4*mm, width=qr_s, height=qr_s, preserveAspectRatio=True, mask="auto")
+    # qr border
+    c.setStrokeColor(BORDER)
+    c.setLineWidth(0.3)
+    c.roundRect(qr_x - 1*mm, BOT + 3*mm, qr_s + 2*mm, qr_s + 2*mm, 1.5*mm, fill=0, stroke=1)
+    c.setFillColor(TEXT_SECOND)
     qr_caption = "SCAN TO VERIFY" if lang == "en" else "امسح للتحقق"
-    c.setFont(_font_for(qr_caption, "bold"), 6.5)
-    c.drawCentredString(qr_x + qr_s/2, BOT - 1.5*mm, _tx(qr_caption))
-    c.setFont(_font_for(verify_code), 5.5)
-    c.setFillColor(TEXT_LIGHT)
-    c.drawCentredString(qr_x + qr_s/2, BOT - 5*mm, _tx(verify_code))
+    c.setFont(_font_for(qr_caption, "bold"), 6)
+    c.drawCentredString(qr_x + qr_s/2, BOT - 0.5*mm, _tx(qr_caption))
+    c.setFillColor(TEXT_MUTED)
+    c.setFont(_font_for(verify_code), 5)
+    c.drawCentredString(qr_x + qr_s/2, BOT - 4*mm, _tx(verify_code))
 
     # 2) Info rows
-    infox = BAR + (W - BAR) * 0.36
+    infox = INNER_L + 30*mm
     date_str = (_format_date_en(issue_date) if lang == "en" else _format_date_ar(issue_date)) or "—"
     info_items = [
-        ("ISSUE DATE" if lang == "en" else "تاريخ الإصدار", date_str, TEXT_DARK, 9),
-        ("CERTIFICATE ID" if lang == "en" else "رقم الشهادة", str(cert_id)[:28], TEXT_MED, 7),
+        ("ISSUE DATE" if lang == "en" else "تاريخ الإصدار", date_str, TEXT_PRIMARY, 8),
+        ("CERTIFICATE ID" if lang == "en" else "رقم الشهادة", str(cert_id)[:28], TEXT_SECOND, 7),
         ("VERIFICATION CODE" if lang == "en" else "رمز التحقق", verify_code, GOLD, 7),
     ]
     for i, (label, val, vcolor, vsize) in enumerate(info_items):
-        ypos = BOT + 28*mm - i * 9.5*mm
-        c.setFillColor(TEXT_LIGHT)
-        c.setFont(_font_for(label, "bold"), 6.5)
+        ypos = BOT + 27*mm - i * 8.5*mm
+        c.setFillColor(TEXT_MUTED)
+        c.setFont(_font_for(label, "bold"), 6)
         c.drawString(infox, ypos, _tx(label))
         c.setFillColor(vcolor)
         vfont = "Courier" if not _is_ar(val) and lang == "en" else _font_for(val)
@@ -457,24 +483,31 @@ def build_certificate_pdf(
         c.drawString(infox, ypos - 3.5*mm, _tx(val))
 
     # 3) Signature
-    sig_x = W - 30*mm
+    sig_x = INNER_R
     c.setStrokeColor(BORDER)
-    c.setLineWidth(0.4)
-    c.line(sig_x - 15*mm, BOT + 20*mm, sig_x + 15*mm, BOT + 20*mm)
+    c.setLineWidth(0.3)
+    c.line(sig_x - 18*mm, BOT + 20*mm, sig_x, BOT + 20*mm)
     sig_label1 = "Alpha Team Academic Board" if lang == "en" else "المجلس الأكاديمي"
     sig_label2 = "Alpha Team" if lang == "en" else "فريق ألفا"
-    c.setFillColor(TEXT_DARK)
-    c.setFont(_font_for(sig_label1, "bold"), 7)
-    c.drawCentredString(sig_x, BOT + 15*mm, _tx(sig_label1))
-    c.setFillColor(TEXT_LIGHT)
-    c.setFont(_font_for(sig_label2), 6)
-    c.drawCentredString(sig_x, BOT + 9*mm, _tx(sig_label2))
-
-    # ── Bottom accent bar ──
+    c.setFillColor(TEXT_SECOND)
+    c.setFont(_font_for(sig_label1, "bold"), 6.5)
+    c.drawRightString(sig_x, BOT + 15*mm, _tx(sig_label1))
+    c.setFillColor(TEXT_MUTED)
+    c.setFont(_font_for(sig_label2), 5.5)
+    c.drawRightString(sig_x, BOT + 9*mm, _tx(sig_label2))
+
+    # small gold star near seal
+    c.setFillColor(GOLD)
+    for i in range(3):
+        sx = seal_cx + 8*mm * math.cos(math.radians(120 * i - 30))
+        sy = seal_cy + 8*mm * math.sin(math.radians(120 * i - 30))
+        c.circle(sx, sy, 0.4*mm, fill=1, stroke=0)
+
+    # ── Bottom accent bars ──
     c.setFillColor(GOLD)
-    c.rect(0, 0, W, 1*mm, fill=1, stroke=0)
-    c.setFillColor(DEEP_NAVY)
-    c.rect(0, 1*mm, W, 0.4*mm, fill=1, stroke=0)
+    c.rect(0, 0, W, 0.8*mm, fill=1, stroke=0)
+    c.setFillColor(BG_DARK)
+    c.rect(0, 0.8*mm, W, 0.4*mm, fill=1, stroke=0)
 
     c.showPage()
     c.save()