File manager - Edit - /var/www/ratemypay_dev/resources/views/partials/generating.blade.php
Back
{{-- resources/views/dashboard/job-descriptions/generating.blade.php --}} <div id="loaderContainer" class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20" style="display: none;"> <div class="mx-auto px-6"> {{-- Wizard Container --}} <div class="bg-white rounded-[20px]"> {{-- Stepper --}} <x-job-descriptions.stepper :currentStep="2" /> {{-- Loading State --}} <div class="px-6 md:px-10 pb-10 bg-[#f9fafb] pt-8"> <div class="max-w-2xl mx-auto mt-8"> {{-- Card --}} <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 width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_705_5125)"> <path d="M8.28086 12.9167C8.20647 12.6283 8.05615 12.3651 7.84555 12.1545C7.63494 11.9439 7.37176 11.7936 7.08336 11.7192L1.97086 10.4009C1.88364 10.3761 1.80687 10.3236 1.75221 10.2512C1.69754 10.1789 1.66797 10.0907 1.66797 10C1.66797 9.90937 1.69754 9.82118 1.75221 9.74884C1.80687 9.6765 1.88364 9.62397 1.97086 9.59921L7.08336 8.28004C7.37166 8.20572 7.63477 8.05552 7.84537 7.84508C8.05596 7.63463 8.20634 7.37162 8.28086 7.08338L9.5992 1.97088C9.6237 1.88331 9.67618 1.80616 9.74863 1.75121C9.82108 1.69625 9.90951 1.6665 10.0004 1.6665C10.0914 1.6665 10.1798 1.69625 10.2523 1.75121C10.3247 1.80616 10.3772 1.88331 10.4017 1.97088L11.7192 7.08338C11.7936 7.37177 11.9439 7.63496 12.1545 7.84556C12.3651 8.05616 12.6283 8.20648 12.9167 8.28088L18.0292 9.59838C18.1171 9.62263 18.1946 9.67505 18.2499 9.74761C18.3052 9.82016 18.3351 9.90884 18.3351 10C18.3351 10.0912 18.3052 10.1799 18.2499 10.2525C18.1946 10.325 18.1171 10.3775 18.0292 10.4017L12.9167 11.7192C12.6283 11.7936 12.3651 11.9439 12.1545 12.1545C11.9439 12.3651 11.7936 12.6283 11.7192 12.9167L10.4009 18.0292C10.3764 18.1168 10.3239 18.1939 10.2514 18.2489C10.179 18.3038 10.0905 18.3336 9.99961 18.3336C9.90868 18.3336 9.82025 18.3038 9.7478 18.2489C9.67535 18.1939 9.62287 18.1168 9.59836 18.0292L8.28086 12.9167Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.668 2.5V5.83333" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18.3333 4.16663H15" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.33203 14.1666V15.8333" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4.16667 15H2.5" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> </g> <defs> <clipPath id="clip0_705_5125"> <rect width="20" height="20" fill="white"/> </clipPath> </defs> </svg> </div> <h3 class="text-xl font-bold text-gray-900 mb-6"> Crafting your job description... </h3> {{-- Steps Container --}} <div id="stepsContainer" class="space-y-3 mb-8 max-w-sm mx-auto flex flex-col items-center"> {{-- Steps will be dynamically inserted here --}} </div> {{-- Progress Bar --}} <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden"> <div id="progressBar" class="h-full bg-gradient-to-r from-[#2F3D7E] to-[#4a5db8] transition-all duration-300" style="width: 0%"> </div> </div> <p class="text-sm text-gray-400 mt-3"> This usually takes a few seconds... </p> </div> </div> </div> </div> </div> </div> {{-- Vanilla JavaScript Logic --}} <script> // Global loader controller JobDescriptionLoader = { // State variables progress: 0, currentStepIndex: 0, isRunning: false, redirectUrl: null, steps: [{ label: 'Analyzing role requirements...', done: false }, { label: 'Generating comprehensive content...', done: false }, { label: 'Finalizing job structure...', done: false } ], // Initialize the loader UI init() { this.renderSteps(); }, // Render steps in the DOM renderSteps() { const container = document.getElementById('stepsContainer'); if (!container) return; container.innerHTML = ''; this.steps.forEach((step, index) => { const stepDiv = document.createElement('div'); stepDiv.className = 'flex items-center gap-3'; stepDiv.id = `step-${index}`; // Status icon const iconSpan = document.createElement('div'); iconSpan.className = 'w-5 h-5 shrink-0'; if (step.done) { iconSpan.className += ' bg-green-500 rounded-full flex items-center justify-center'; iconSpan.innerHTML = '<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>'; } else if (index === this.currentStepIndex && this.isRunning) { iconSpan.className += ' border-2 border-[#2F3D7E] border-t-transparent rounded-full animate-spin'; } else { iconSpan.className += ' border-2 border-gray-200 rounded-full'; } // Label const labelSpan = document.createElement('span'); labelSpan.className = 'text-sm'; labelSpan.className += step.done ? 'text-gray-900' : 'text-gray-400'; labelSpan.textContent = step.label; stepDiv.appendChild(iconSpan); stepDiv.appendChild(labelSpan); container.appendChild(stepDiv); }); }, // Update a specific step's UI updateStepUI(index) { const stepDiv = document.getElementById(`step-${index}`); if (!stepDiv) return; const iconSpan = stepDiv.children[0]; const labelSpan = stepDiv.children[1]; const step = this.steps[index]; if (step.done) { iconSpan.className = 'w-5 h-5 bg-green-500 rounded-full flex items-center justify-center shrink-0'; iconSpan.innerHTML = '<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>'; labelSpan.className = 'text-sm text-gray-900'; } else if (index === this.currentStepIndex && this.isRunning) { iconSpan.className = 'w-5 h-5 border-2 border-[#2F3D7E] border-t-transparent rounded-full animate-spin shrink-0'; iconSpan.innerHTML = ''; labelSpan.className = 'text-sm text-gray-400'; } else { iconSpan.className = 'w-5 h-5 border-2 border-gray-200 rounded-full shrink-0'; iconSpan.innerHTML = ''; labelSpan.className = 'text-sm text-gray-400'; } }, // Update progress bar updateProgress(value) { this.progress = value; const progressBar = document.getElementById('progressBar'); if (progressBar) { progressBar.style.width = value + '%'; } }, // Reset all states reset() { this.progress = 0; this.currentStepIndex = 0; this.isRunning = false; this.steps.forEach(step => step.done = false); this.updateProgress(0); this.renderSteps(); }, // Sleep utility sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }, // Set redirect URL setRedirectUrl(url) { this.redirectUrl = url; }, // Main execution async runSteps() { this.isRunning = true; this.reset(); this.renderSteps(); // STEP 1 this.currentStepIndex = 0; this.updateProgress(10); this.updateStepUI(0); await this.sleep(1200); this.steps[0].done = true; this.updateProgress(33); this.updateStepUI(0); // STEP 2 this.currentStepIndex = 1; this.updateStepUI(1); await this.sleep(1500); this.steps[1].done = true; this.updateProgress(66); this.updateStepUI(1); // STEP 3 this.currentStepIndex = 2; this.updateStepUI(2); await this.sleep(1200); this.steps[2].done = true; this.updateProgress(100); this.updateStepUI(2); // Redirect after completion setTimeout(() => { if (this.redirectUrl) { window.location.href = this.redirectUrl; } this.isRunning = false; }, 600); }, // Public method to show and start the loader showAndStart(redirectUrl = null) { // Show the loader container const loaderContainer = document.getElementById('loaderContainer'); if (loaderContainer) { loaderContainer.style.display = 'block'; } creator const creatorContainer = document.getElementById('creator'); creatorContainer.style.display = "none"; // Set redirect URL if provided if (redirectUrl) { this.setRedirectUrl(redirectUrl); } // Scroll to top window.scrollTo(0, 0); // Start the animation if (!this.isRunning) { this.runSteps(); } }, // Hide the loader hide() { const loaderContainer = document.getElementById('loaderContainer'); if (loaderContainer) { loaderContainer.style.display = 'none'; } this.reset(); } }; // Initialize on page load document.addEventListener('DOMContentLoaded', () => { window.JobDescriptionLoader.init(); }); </script>
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings