File manager - Edit - /var/www/ratemypay/resources/views/dashboard/job-descriptions/generating.blade.php
Back
{{-- resources/views/dashboard/job-descriptions/generating.blade.php - Step 2: Content Generation Loading --}} @extends('layouts.dashboard') @section('content') <div class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20"> <div class="md:max-w-[90%] max-w-[90%] mx-auto px-6"> {{-- Wizard Container --}} <div class="bg-white rounded-[20px] border border-gray-100 shadow-sm"> {{-- Stepper --}} <x-job-descriptions.stepper :currentStep="1" /> {{-- Loading State --}} <div class="px-6 md:px-10 pb-10" x-data="{ progress: 0, steps: [ { label: 'Analyzing role requirements...', done: false }, { label: 'Generating comprehensive content...', done: false }, { label: 'Aligning with job architecture...', done: false }, ], currentStepIndex: 0, init() { this.animateProgress(); }, async animateProgress() { const interval = setInterval(() => { if (this.progress < 95) { this.progress += Math.random() * 8; if (this.progress > 33 && this.currentStepIndex < 1) { this.steps[0].done = true; this.currentStepIndex = 1; } if (this.progress > 66 && this.currentStepIndex < 2) { this.steps[1].done = true; this.currentStepIndex = 2; } } }, 500); setTimeout(() => { clearInterval(interval); this.progress = 100; this.steps[2].done = true; setTimeout(() => { window.location.href = '{{ route("dashboard.job-descriptions.show", $jobDescription->id ?? 0) }}'; }, 800); }, 5000); } }"> {{-- Generation Card --}} <div class="max-w-2xl mx-auto mt-8"> <div class="bg-gradient-to-b from-gray-50 to-white border border-gray-200 rounded-2xl p-8 md:p-12 text-center"> {{-- Icon --}} <div class="w-20 h-20 bg-[#2F3D7E] rounded-full flex items-center justify-center mx-auto mb-6"> <svg class="w-10 h-10 text-white animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> </svg> </div> <h3 class="text-xl font-bold text-gray-900 mb-6">Crafting your job description...</h3> {{-- Steps Checklist --}} <div class="space-y-3 mb-8 text-left max-w-sm mx-auto"> <template x-for="(step, index) in steps" :key="index"> <div class="flex items-center gap-3"> <div x-show="!step.done && index === currentStepIndex" class="w-5 h-5 border-2 border-[#2F3D7E] border-t-transparent rounded-full animate-spin shrink-0"></div> <div x-show="!step.done && index !== currentStepIndex" class="w-5 h-5 border-2 border-gray-200 rounded-full shrink-0"></div> <div x-show="step.done" class="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center shrink-0"> <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /> </svg> </div> <span class="text-sm" :class="step.done ? 'text-gray-900' : 'text-gray-400'" x-text="step.label"></span> </div> </template> </div> {{-- Progress Bar --}} <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden"> <div class="h-full bg-gradient-to-r from-[#2F3D7E] to-[#4a5db8] rounded-full transition-all duration-500" :style="'width: ' + Math.min(progress, 100) + '%'"></div> </div> <p class="text-sm text-gray-400 mt-3">This usually takes a few seconds...</p> </div> {{-- What's Being Generated --}} <div class="mt-8 border border-gray-200 rounded-2xl p-6"> <h4 class="text-base font-bold text-gray-900 mb-4">What's being generated:</h4> <ul class="space-y-3"> <li class="flex items-start gap-3 text-sm text-gray-600"> <span class="w-1.5 h-1.5 bg-gray-400 rounded-full mt-1.5 shrink-0"></span> Compelling role summary tailored to your organization </li> <li class="flex items-start gap-3 text-sm text-gray-600"> <span class="w-1.5 h-1.5 bg-gray-400 rounded-full mt-1.5 shrink-0"></span> Key responsibilities aligned with the role level </li> <li class="flex items-start gap-3 text-sm text-gray-600"> <span class="w-1.5 h-1.5 bg-gray-400 rounded-full mt-1.5 shrink-0"></span> Required skills and technical competencies </li> <li class="flex items-start gap-3 text-sm text-gray-600"> <span class="w-1.5 h-1.5 bg-gray-400 rounded-full mt-1.5 shrink-0"></span> Education and experience qualifications </li> <li class="flex items-start gap-3 text-sm text-gray-600"> <span class="w-1.5 h-1.5 bg-gray-400 rounded-full mt-1.5 shrink-0"></span> Core competencies from your job architecture </li> </ul> </div> </div> </div> </div> </div> </div> @endsection
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings