Untitled
unknown
plain_text
2 months ago
7.7 kB
2
Indexable
<div class="grid"> <div class="col-12"> <p-card> <div class="field grid"> <p-avatar [image]="candidate.profilePic" size="large" shape="circle" ></p-avatar> <div class="col-12 md:col-10"> <div class="flex flex-column"> <h2 class="m-0 text-xl font-semibold">{{ candidate.name }}</h2> </div> </div> </div> <div class="field grid"> <div class="flex align-items-center w-full"> <div class="col-3"> <span class="relative align-items-center mr-3 block"> <label for="lastname4" class="col-12 mb-2 md:col-4 md:mb-0"> <i class="pi pi-cog text-gray-500"></i> Commitment</label > </span> </div> <div class="col-9"> <div class="chip p-2 col-6 md:col-8 sm:col-12"> <span class="text-700 font-semibold block">Full-time at ${{ candidate.fullTimePrice }} / month</span> <span class="text-700">Starts in 2 weeks</span> </div> </div> </div> </div> <div class="field grid"> <div class="flex align-items-center w-full"> <div class="col-3"> <span class="relative align-items-center mr-3 block"> <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0"> <i class="pi pi-calendar text-gray-500"></i> Expert in</label > </span> </div> <div class="col-9"> <div class="p-2"> <span *ngFor="let skill of candidate.technicalSkills" class="chip mr-2 p-2"> {{ skill }} </span> </div> </div> </div> </div> <div class="card"> <p-tabs value="0" scrollable> <p-tablist> <ng-template #previcon> <i class="pi pi-minus"></i> </ng-template> <p-tab value="interview" (click)="scrollToSection('interview')"> <i class="pi pi-video text-gray-500"></i> <span class="font-bold whitespace-nowrap">AI interview</span> </p-tab> <p-tab value="works" (click)="scrollToSection('work-experience')"> <i class="pi pi-briefcase text-gray-500"></i> <span class="font-bold whitespace-nowrap">Experince</span> </p-tab> <p-tab value="education" (click)="scrollToSection('education')"> <i class="pi pi-graduation-cap text-gray-500"></i> <span class="font-bold whitespace-nowrap">Education</span> </p-tab> <ng-template #nexticon> <i class="pi pi-plus"></i> </ng-template> </p-tablist> </p-tabs> </div> <div class="content"> <div id="interview" class="section mt-4"> <h3>AI Interview</h3> <div class="video-container"> <video width="100%" controls> <source type="video/mp4" /> Your browser does not support the video tag. </video> </div> </div> <div class="transcription-container mt-5"> <!-- <div *ngFor=" let item of expanded ? candidate.interviews[0].transcript : candidate.interviews[0].transcript.slice(0, 3); let i = index " > <div class="grid dialogue"> <div class="col-fixed" style="width: 100px"> <div class="timestamp"> {{ item.relative_timestamp }} </div> </div> <div class="col"> <div class="transcription-text"> {{ item.dialogue }} </div> </div> </div> </div> <a *ngIf="!expanded" (click)="expanded = true" class="show-more" >Show more</a > <a *ngIf="expanded" (click)="expanded = false" class="show-less" >Show less</a > --> <div class="text-container"> <div [ngClass]="{ 'collapsed': !expanded }"> <div class="grid dialogue" *ngFor="let item of candidate.interviews[0].transcript"> <div class="col-fixed" style="width: 100px"> <div class="timestamp"> {{ item.relative_timestamp }} </div> </div> <div class="col"> <div class="transcription-text"> {{ item.dialogue }} </div> </div> </div> </div> <a class="show-more text-center" (click)="expanded = !expanded"> {{ expanded ? 'Show less' : 'Show more' }} </a> </div> </div> <div id="work-experience" class="work-experience"> <h2>Work Experience</h2> <p-timeline [value]="candidate.workExperience"> <!-- Marker Template (Logo + Job Title) --> <ng-template #marker let-event> <div class="marker-container"> <img [src]="event.companyLogo" [alt]="event.company" class="company-logo" /> </div> </ng-template> <!-- Content Template (Details + Duration + Description) --> <ng-template pTemplate="content" let-event> <div class="timeline-event"> <div class="header"> <h3 class="role"> {{ event.role }} <span class="badge">{{ event.company }}</span> </h3> <p class="duration"> {{ event.startDate }} - {{ event.endDate }} </p> </div> <p class="description">{{ event.description }}</p> </div> </ng-template> </p-timeline> </div> <section id="education" class="section"> <div id="work-experience" class="work-experience"> <h2>Education</h2> <p-timeline [value]="candidate.education" align="left"> <!-- Marker Template (Logo + Job Title) --> <ng-template #marker let-event> <div class="marker-container"> <img [src]="event.schoolLogo" [alt]="event.school" class="company-logo" /> </div> </ng-template> <!-- Content Template (Details + Duration + Description) --> <ng-template pTemplate="content" let-event> <div class="timeline-event"> <div class="header"> <h3 class="role"> {{ event.degree }} </h3> <p class="duration"> {{ event.startDate }} - {{ event.endDate }} </p> </div> <p class="description">{{ event.school }}</p> </div> </ng-template> </p-timeline> </div> </section> </div> </p-card> </div> </div>
Editor is loading...
Leave a Comment