Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| padding: 40px; | |
| background: #f2f2f2; | |
| } | |
| .container { | |
| background: #fff; | |
| padding: 30px; | |
| border-radius: 10px; | |
| width: 700px; | |
| margin: auto; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| } | |
| .header { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .profile-img { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| } | |
| .name-title { | |
| font-size: 24px; | |
| } | |
| .section { | |
| margin-top: 30px; | |
| } | |
| .section-title { | |
| font-size: 18px; | |
| color: #444; | |
| border-bottom: 1px solid #ddd; | |
| padding-bottom: 5px; | |
| } | |
| ul { | |
| padding-left: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| {% if photo_base64 %} | |
| <img src="data:image/png;base64,{{ photo_base64 }}" class="profile-img" /> | |
| {% endif %} | |
| <div class="name-title"> | |
| <strong>{{ name }}</strong><br> | |
| {{ job_title }}<br> | |
| {{ email }} | {{ phone }} | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title">Summary</div> | |
| <p>{{ summary }}</p> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title">Skills</div> | |
| <ul> | |
| {% for skill in skills %} | |
| <li>{{ skill }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title">Education</div> | |
| <ul> | |
| {% for edu in education %} | |
| <li>{{ edu }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title">Experience</div> | |
| <ul> | |
| {% for exp in experience %} | |
| <li>{{ exp }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |