
    ijM                        d Z ddlZddlZddlmZ ddlmZ ddlmZ  ed      Z	 ed      Z
e	j                  dd	       e
j                  dd	       d
ZdZdZdededefdZdedededefdZdedefdZd Zedk(  r e        yy)u   
Google Display Ad Generator - Angle A (정착지원금)
Design: #45 One Show 금융 럭셔리
Renders HTML templates with Playwright, resizes 300x250 with PIL.
    N)Path)sync_playwright)Imagez8/home/jay/workspace/output/google-ads/angle-A/productionz7/home/jay/workspace/output/google-ads/angle-A/templatesT)parentsexist_oku  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { width: 1200px; height: 628px; overflow: hidden; background: #0D0D0D; }

  .container {
    position: relative;
    width: 1200px;
    height: 628px;
    background: linear-gradient(135deg, #0D0D0D 0%, #1A1510 50%, #0D0D0D 100%);
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  /* Subtle radial glow center-left */
  .container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(197,165,90,0.07) 0%, transparent 70%);
    pointer-events: none;
  }

  .gold-line-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #C5A55A 30%, #C5A55A 70%, transparent 100%);
    z-index: 10;
  }
  .gold-line-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(197,165,90,0.4) 30%, rgba(197,165,90,0.4) 70%, transparent 100%);
    z-index: 10;
  }

  /* Tag top-right */
  .tag {
    position: absolute;
    top: 32px;
    right: 60px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.12em;
    z-index: 5;
  }

  /* Left panel — headline */
  .left-panel {
    position: relative;
    width: 580px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 48px 60px 60px;
    z-index: 5;
  }

  .eyebrow {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #C5A55A;
    letter-spacing: 0.25em;
    margin-bottom: 28px;
    text-transform: uppercase;
  }

  .headline {
    font-family: 'Noto Serif KR', serif;
    font-size: 84px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  /* Vertical divider */
  .vertical-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(197,165,90,0.5) 30%, rgba(197,165,90,0.5) 70%, transparent);
    flex-shrink: 0;
    align-self: stretch;
    margin: 60px 0;
  }

  /* Right panel — accent + CTA */
  .right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 60px 60px 64px;
    z-index: 5;
  }

  .accent-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
  }

  .accent-number {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 72px;
    font-weight: 900;
    color: #C5A55A;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    white-space: nowrap;
    background: linear-gradient(180deg, #E8D5A0 0%, #C5A55A 55%, #A8893C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .sub-text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 52px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 44px;
  }

  .cta-block {
    margin-top: auto;
  }

  .cta-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin-bottom: 20px;
  }

  .cta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 36px;
    color: #FFFFFF;
    white-space: nowrap;
  }
  .cta-brand { font-weight: 700; }
  .cta-separator { color: rgba(255,255,255,0.4); margin: 0 12px; }
  .cta-action { font-weight: 400; color: rgba(255,255,255,0.8); }
  .cta-arrow { color: #C5A55A; font-size: 40px; margin-left: 16px; }

  /* Decorative corner */
  .corner-tl {
    position: absolute;
    top: 24px; left: 24px;
    width: 32px; height: 32px;
    border-top: 2px solid rgba(197,165,90,0.5);
    border-left: 2px solid rgba(197,165,90,0.5);
  }
  .corner-br {
    position: absolute;
    bottom: 24px; right: 24px;
    width: 32px; height: 32px;
    border-bottom: 2px solid rgba(197,165,90,0.5);
    border-right: 2px solid rgba(197,165,90,0.5);
  }
</style>
</head>
<body>
<div class="container">
  <div class="gold-line-top"></div>
  <div class="gold-line-bottom"></div>
  <div class="corner-tl"></div>
  <div class="corner-br"></div>
  <div class="tag">T.O.P 사업단</div>

  <div class="left-panel">
    <div class="eyebrow">T.O.P 사업단 정착지원</div>
    <div class="headline">열심히는<br>하는데,<br>소득은<br>제자리?</div>
  </div>

  <div class="vertical-divider"></div>

  <div class="right-panel">
    <div class="accent-label">신입 정착지원금</div>
    <div class="accent-number">최대 1,000만원</div>
    <div class="sub-text">신입 정착지원금</div>
    <div class="cta-block">
      <div class="cta-divider"></div>
      <div class="cta-row">
        <span>
          <span class="cta-brand">T.O.P 사업단</span>
          <span class="cta-separator">|</span>
          <span class="cta-action">지금 신청하기</span>
        </span>
        <span class="cta-arrow">→</span>
      </div>
    </div>
  </div>
</div>
</body>
</html>u  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { width: 1200px; height: 1200px; overflow: hidden; background: #0D0D0D; }

  .container {
    position: relative;
    width: 1200px;
    height: 1200px;
    background: linear-gradient(160deg, #0D0D0D 0%, #1C1710 40%, #150F09 70%, #0D0D0D 100%);
  }

  /* Radial glow */
  .glow {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(ellipse, rgba(197,165,90,0.06) 0%, transparent 65%);
    pointer-events: none;
  }

  /* Gold top line */
  .gold-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, transparent 0%, #C5A55A 25%, #E8D5A0 50%, #C5A55A 75%, transparent 100%);
    z-index: 10;
  }

  /* Decorative corners */
  .corner { position: absolute; width: 48px; height: 48px; }
  .corner-tl { top: 36px; left: 36px; border-top: 2px solid rgba(197,165,90,0.6); border-left: 2px solid rgba(197,165,90,0.6); }
  .corner-tr { top: 36px; right: 36px; border-top: 2px solid rgba(197,165,90,0.6); border-right: 2px solid rgba(197,165,90,0.6); }
  .corner-bl { bottom: 36px; left: 36px; border-bottom: 2px solid rgba(197,165,90,0.6); border-left: 2px solid rgba(197,165,90,0.6); }
  .corner-br { bottom: 36px; right: 36px; border-bottom: 2px solid rgba(197,165,90,0.6); border-right: 2px solid rgba(197,165,90,0.6); }

  /* Tag */
  .tag {
    position: absolute;
    top: 40px; right: 72px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.15em;
    z-index: 5;
  }

  /* Top section: headline */
  .top-block {
    position: absolute;
    top: 120px;
    left: 72px; right: 72px;
    z-index: 5;
  }

  .eyebrow {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: #C5A55A;
    letter-spacing: 0.3em;
    margin-bottom: 36px;
    text-transform: uppercase;
  }

  .headline {
    font-family: 'Noto Serif KR', serif;
    font-size: 84px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  /* Horizontal divider */
  .h-divider {
    position: absolute;
    top: 50%;
    left: 72px; right: 72px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197,165,90,0.4) 20%, rgba(197,165,90,0.4) 80%, transparent);
    transform: translateY(-50%);
    z-index: 5;
  }

  /* Center: accent number block */
  .center-block {
    position: absolute;
    top: 50%;
    left: 72px; right: 72px;
    transform: translateY(-8%);
    z-index: 5;
    text-align: center;
  }

  .accent-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.2em;
    margin-bottom: 20px;
  }

  .accent-number {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 144px;
    font-weight: 900;
    color: #C5A55A;
    line-height: 1.0;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #E8D5A0 0%, #C5A55A 50%, #A8893C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
  }

  .sub-text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.02em;
  }

  /* Bottom CTA */
  .bottom-block {
    position: absolute;
    bottom: 72px;
    left: 72px; right: 72px;
    z-index: 5;
  }

  .cta-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin-bottom: 28px;
  }

  .cta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 40px;
    color: #FFFFFF;
  }
  .cta-brand { font-weight: 700; }
  .cta-separator { color: rgba(255,255,255,0.35); margin: 0 16px; }
  .cta-action { font-weight: 400; color: rgba(255,255,255,0.7); }
  .cta-arrow { color: #C5A55A; font-size: 48px; }

  /* Small decorative dots */
  .dot-row {
    position: absolute;
    bottom: 148px;
    left: 72px;
    display: flex;
    gap: 10px;
    z-index: 5;
  }
  .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(197,165,90,0.5);
  }
  .dot:first-child { background: #C5A55A; }
</style>
</head>
<body>
<div class="container">
  <div class="glow"></div>
  <div class="gold-line"></div>

  <div class="corner corner-tl"></div>
  <div class="corner corner-tr"></div>
  <div class="corner corner-bl"></div>
  <div class="corner corner-br"></div>

  <div class="tag">T.O.P 사업단</div>

  <div class="top-block">
    <div class="eyebrow">T.O.P 사업단 정착지원</div>
    <div class="headline">열심히는 하는데,<br>소득은 제자리?</div>
  </div>

  <div class="h-divider"></div>

  <div class="center-block">
    <div class="accent-label">신입 정착지원금</div>
    <div class="accent-number">최대 1,000만원</div>
    <div class="sub-text">신입 정착지원금</div>
  </div>

  <div class="dot-row">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>

  <div class="bottom-block">
    <div class="cta-divider"></div>
    <div class="cta-row">
      <span>
        <span class="cta-brand">T.O.P 사업단</span>
        <span class="cta-separator">|</span>
        <span class="cta-action">지금 신청하기</span>
      </span>
      <span class="cta-arrow">→</span>
    </div>
  </div>
</div>
</body>
</html>uf  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { width: 600px; height: 500px; overflow: hidden; background: #0D0D0D; }

  .container {
    position: relative;
    width: 600px;
    height: 500px;
    background: linear-gradient(145deg, #0D0D0D 0%, #1A1510 55%, #0D0D0D 100%);
  }

  .glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; height: 500px;
    background: radial-gradient(ellipse, rgba(197,165,90,0.08) 0%, transparent 65%);
    pointer-events: none;
  }

  /* Gold top line */
  .gold-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #C5A55A 25%, #E8D5A0 50%, #C5A55A 75%, transparent 100%);
    z-index: 10;
  }

  /* Corners */
  .corner { position: absolute; width: 20px; height: 20px; }
  .corner-tl { top: 16px; left: 16px; border-top: 1.5px solid rgba(197,165,90,0.55); border-left: 1.5px solid rgba(197,165,90,0.55); }
  .corner-tr { top: 16px; right: 16px; border-top: 1.5px solid rgba(197,165,90,0.55); border-right: 1.5px solid rgba(197,165,90,0.55); }
  .corner-bl { bottom: 16px; left: 16px; border-bottom: 1.5px solid rgba(197,165,90,0.55); border-left: 1.5px solid rgba(197,165,90,0.55); }
  .corner-br { bottom: 16px; right: 16px; border-bottom: 1.5px solid rgba(197,165,90,0.55); border-right: 1.5px solid rgba(197,165,90,0.55); }

  /* Tag */
  .tag {
    position: absolute;
    top: 22px; right: 24px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.1em;
    z-index: 5;
  }

  /* Top block */
  .top-block {
    position: absolute;
    top: 56px;
    left: 24px; right: 24px;
    z-index: 5;
  }

  .eyebrow {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #C5A55A;
    letter-spacing: 0.2em;
    margin-bottom: 14px;
  }

  .headline {
    font-family: 'Noto Serif KR', serif;
    font-size: 42px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  /* Center block */
  .center-block {
    position: absolute;
    top: 50%;
    left: 24px; right: 24px;
    transform: translateY(-20%);
    z-index: 5;
    text-align: center;
  }

  .accent-number {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 64px;
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #E8D5A0 0%, #C5A55A 60%, #A8893C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
  }

  .sub-text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.01em;
  }

  /* Bottom CTA */
  .bottom-block {
    position: absolute;
    bottom: 24px;
    left: 24px; right: 24px;
    z-index: 5;
  }

  .cta-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin-bottom: 14px;
  }

  .cta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 20px;
    color: #FFFFFF;
  }
  .cta-brand { font-weight: 700; }
  .cta-separator { color: rgba(255,255,255,0.35); margin: 0 8px; }
  .cta-action { font-weight: 400; color: rgba(255,255,255,0.7); }
  .cta-arrow { color: #C5A55A; font-size: 22px; }
</style>
</head>
<body>
<div class="container">
  <div class="glow"></div>
  <div class="gold-line"></div>

  <div class="corner corner-tl"></div>
  <div class="corner corner-tr"></div>
  <div class="corner corner-bl"></div>
  <div class="corner corner-br"></div>

  <div class="tag">T.O.P 사업단</div>

  <div class="top-block">
    <div class="eyebrow">T.O.P 사업단</div>
    <div class="headline">열심히는<br>하는데,<br>소득은 제자리?</div>
  </div>

  <div class="center-block">
    <div class="accent-number">최대 1,000만원</div>
    <div class="sub-text">신입 정착지원금</div>
  </div>

  <div class="bottom-block">
    <div class="cta-divider"></div>
    <div class="cta-row">
      <span>
        <span class="cta-brand">T.O.P 사업단</span>
        <span class="cta-separator">|</span>
        <span class="cta-action">지금 신청하기</span>
      </span>
      <span class="cta-arrow">→</span>
    </div>
  </div>
</div>
</body>
</html>filenamecontentreturnc                 Z    t         | z  }|j                  |d       t        d|        |S )Nzutf-8)encodingz  [template] wrote )TEMPLATE_DIR
write_textprint)r   r	   paths      W/home/jay/workspace/.worktrees/task-2116-dev1/output/google-ads/angle-A/generate_ads.pywrite_templater     s1    ("DOOGgO.	v
&'K    	html_pathout_pathwidthheightc           	          | j                  ||d       | j                  d| dd       | j                  d       | j                  t	        |      ddd||d	
       t        d| d| d| d       y )N)r   r   zfile://networkidlei0u  )
wait_untiltimeouti	  Fr   )xyr   r   )r   	full_pageclipz  [render]   z (r   ))set_viewport_sizegotowait_for_timeout
screenshotstrr   )pager   r   r   r   s        r   	render_adr'     sz    Uf=>II	{#uIM$OOX%AAX]io>pOq	M(2eWAfXQ
78r   src_pathdst_pathc                     t        j                  |       }|j                  dt         j                        }|j	                  |dd       t        d| d       y )N)i,     PNGT)optimizez  [resize]   z (300x250, from 600x500))r   openresizeLANCZOSsaver   )r(   r)   imgresizeds       r   resize_300x250r4     sH    
**X
CjjU]]3GLL54L0	M(#;
<=r   c                  ^   t        d       t        d       t        dt              } t        dt              }t        dt              }t        d       t
        dz  }t               5 }|j                  j                  dg d	
      }|j                  d      }|j                         }t        || t
        dz  dd       t        ||t
        dz  dd       t        |||dd       |j                          |j                          d d d        t        d       t        |t
        dz         |j                  d       t        d       t        t
        j!                  d            D ]2  }|j#                         j$                  dz  }	t        d| d|	dd       4 t                y # 1 sw Y   xY w)Nz'
=== Angle A Display Ads Generator ===
z[1/3] Writing HTML templates...zdisplay-1200x628.htmlzdisplay-1200x1200.htmlzdisplay-600x500.htmlz#
[2/3] Rendering with Playwright...zdisplay-300x250-2x.pngT)z--no-sandboxz--disable-setuid-sandboxz--disable-dev-shm-usagez--font-render-hinting=none)headlessargs   )device_scale_factorzdisplay-1200x628.pngi  it  zdisplay-1200x1200.pngiX  i  z(
[3/3] Resizing small banner with PIL...zdisplay-300x250.png)
missing_okz
=== Done! Output files: ===z*.pngi   z  z  (z.1fz KB))r   r   HTML_1200x628HTML_1200x1200HTML_600x500
OUTPUT_DIRr   chromiumlaunchnew_contextnew_pager'   closer4   unlinksortedglobstatst_size)
tpl_1200x628tpl_1200x1200tpl_600x500tmp_600x500pbrowsercontextr&   fsize_kbs
             r   mainrR     s   	
56 

+,"#:]KL"#;^LM"#9\JK 

01 77K		 a**## $ 
 %% ! & 
 !$z4J'JTSVW$z4K'KTSWX${cTWX). 

56;
-B BC $'	
)*JOOG,- ,&&(""T)1#ST*+, 
GC s   %BF##F,__main__)__doc__ossyspathlibr   playwright.sync_apir   PILr   r>   r   mkdirr;   r<   r=   r%   r   intr'   r4   rR   __name__ r   r   <module>r^      s    
 
  / LM
MN 
    -   4$  /[|`HnbS 3 4 9t 9t 9C 9 9>T >T >0f zF r   