503 lines
19 KiB
HTML
503 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ form.title }} - Embed</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
background: #f8f9fa;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.embed-container {
|
|
background: #f8f9fa;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.embed-form-wrapper {
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
.embed-form {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.embed-form .card {
|
|
border: none;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.embed-form .card-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
padding: 30px;
|
|
color: white;
|
|
}
|
|
|
|
.embed-form .card-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.embed-info {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.code-block {
|
|
background: #2d3748;
|
|
color: #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
overflow-x: auto;
|
|
position: relative;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.copy-btn {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: #4a5568;
|
|
border: none;
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: #2d3748;
|
|
}
|
|
|
|
.copy-btn.copied {
|
|
background: #48bb78;
|
|
}
|
|
|
|
.preview-iframe {
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
height: 600px;
|
|
background: white;
|
|
}
|
|
|
|
.tab-content {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
border: none;
|
|
background: #f7fafc;
|
|
color: #4a5568;
|
|
padding: 12px 24px;
|
|
margin-right: 8px;
|
|
border-radius: 8px 8px 0 0;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
background: white;
|
|
color: #2d3748;
|
|
border-bottom: 2px solid #667eea;
|
|
}
|
|
|
|
.nav-tabs .nav-link:hover {
|
|
background: #edf2f7;
|
|
}
|
|
|
|
.feature-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.feature-list li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.feature-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.feature-list i {
|
|
color: #48bb78;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.dimensions-info {
|
|
background: #f7fafc;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.responsive-options {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.responsive-option {
|
|
background: white;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.responsive-option:hover {
|
|
border-color: #667eea;
|
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.responsive-option.active {
|
|
border-color: #667eea;
|
|
background: #f0f4ff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="embed-container">
|
|
<div class="embed-form-wrapper">
|
|
<div class="embed-form">
|
|
<!-- Header -->
|
|
<div class="embed-info">
|
|
<div class="d-flex justify-content-between align-items-start mb-4">
|
|
<div>
|
|
<h1 class="h2 mb-2">
|
|
<i class="fas fa-code text-primary"></i> Embed Form
|
|
</h1>
|
|
<p class="text-muted mb-0">Get the embed code for "{{ form.title }}"</p>
|
|
</div>
|
|
<a href="{% url 'form_preview' form.id %}" target="_blank" class="btn btn-outline-primary">
|
|
<i class="fas fa-external-link-alt"></i> Preview Form
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="row text-center mb-4">
|
|
<div class="col-md-3">
|
|
<div class="p-3">
|
|
<h4 class="text-primary mb-1">{{ form.submissions.count }}</h4>
|
|
<small class="text-muted">Submissions</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="p-3">
|
|
<h4 class="text-success mb-1">{{ form.structure.wizards|length|default:0 }}</h4>
|
|
<small class="text-muted">Steps</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="p-3">
|
|
<h4 class="text-info mb-1">
|
|
{% if form.structure.wizards %}
|
|
{{ form.structure.wizards.0.fields|length|default:0 }}
|
|
{% else %}
|
|
0
|
|
{% endif %}
|
|
</h4>
|
|
<small class="text-muted">Fields</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="p-3">
|
|
<h4 class="text-warning mb-1">{{ form.created_at|date:"M d" }}</h4>
|
|
<small class="text-muted">Created</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<ul class="nav nav-tabs" id="embedTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="iframe-tab" data-bs-toggle="tab" data-bs-target="#iframe" type="button" role="tab">
|
|
<i class="fas fa-globe"></i> iFrame
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="popup-tab" data-bs-toggle="tab" data-bs-target="#popup" type="button" role="tab">
|
|
<i class="fas fa-external-link-alt"></i> Popup
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="inline-tab" data-bs-toggle="tab" data-bs-target="#inline" type="button" role="tab">
|
|
<i class="fas fa-code"></i> Inline
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="embedTabsContent">
|
|
<!-- iFrame Tab -->
|
|
<div class="tab-pane fade show active" id="iframe" role="tabpanel">
|
|
<h5 class="mb-3">iFrame Embed Code</h5>
|
|
<p class="text-muted">Embed this form directly into your website using an iframe.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyToClipboard(this, 'iframe-code')">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<code id="iframe-code"><iframe src="{{ request.build_absolute_uri }}{% url 'form_preview' form.id %}?embed=true"
|
|
width="100%"
|
|
height="600"
|
|
frameborder="0"
|
|
style="border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"></iframe></code>
|
|
</div>
|
|
|
|
<div class="dimensions-info">
|
|
<h6 class="mb-3">Responsive Options</h6>
|
|
<div class="responsive-options">
|
|
<div class="responsive-option active" onclick="selectResponsive(this, 'iframe', 'fixed')">
|
|
<strong>Fixed Height:</strong> 600px
|
|
<div class="text-muted small">Best for most websites</div>
|
|
</div>
|
|
<div class="responsive-option" onclick="selectResponsive(this, 'iframe', 'responsive')">
|
|
<strong>Responsive:</strong> Auto height
|
|
<div class="text-muted small">Adjusts to content height</div>
|
|
</div>
|
|
<div class="responsive-option" onclick="selectResponsive(this, 'iframe', 'full')">
|
|
<strong>Full Screen:</strong> 100vh
|
|
<div class="text-muted small">Takes full viewport height</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Popup Tab -->
|
|
<div class="tab-pane fade" id="popup" role="tabpanel">
|
|
<h5 class="mb-3">Popup Embed Code</h5>
|
|
<p class="text-muted">Add a button or link that opens the form in a modal popup.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyToClipboard(this, 'popup-code')">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<code id="popup-code"><button onclick="openFormPopup()" class="btn btn-primary">
|
|
Open Form
|
|
</button>
|
|
|
|
<script>
|
|
function openFormPopup() {
|
|
const modal = document.createElement('div');
|
|
modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;';
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.src = '{{ request.build_absolute_uri }}{% url 'form_preview' form.id %}?embed=true';
|
|
iframe.style.cssText = 'width: 90%; max-width: 800px; height: 80vh; border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);';
|
|
|
|
modal.appendChild(iframe);
|
|
document.body.appendChild(modal);
|
|
|
|
modal.onclick = function(e) {
|
|
if (e.target === modal) {
|
|
document.body.removeChild(modal);
|
|
}
|
|
};
|
|
}
|
|
</script></code>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<h6>Customization Options</h6>
|
|
<ul class="feature-list">
|
|
<li><i class="fas fa-check"></i> Custom button text and styling</li>
|
|
<li><i class="fas fa-check"></i> Trigger on page load or scroll</li>
|
|
<li><i class="fas fa-check"></i> Custom modal dimensions</li>
|
|
<li><i class="fas fa-check"></i> Close on outside click</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inline Tab -->
|
|
<div class="tab-pane fade" id="inline" role="tabpanel">
|
|
<h5 class="mb-3">Inline Embed Code</h5>
|
|
<p class="text-muted">Embed the form HTML directly into your page for maximum customization.</p>
|
|
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle"></i> <strong>Note:</strong> This option requires more technical knowledge but offers the best integration.
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyToClipboard(this, 'inline-code')">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<code id="inline-code"><!-- Form CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- Form Container -->
|
|
<div id="form-{{ form.id }}">
|
|
<div class="text-center py-5">
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
<p class="mt-3">Loading form...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Scripts -->
|
|
<script src="https://unpkg.com/preact@10.19.3/dist/preact.umd.js"></script>
|
|
<script src="https://unpkg.com/htm@3.1.1/dist/htm.umd.js"></script>
|
|
<script>
|
|
// Load form data and render
|
|
fetch('/recruitment/api/forms/{{ form.id }}/load/')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Render form using the form structure
|
|
console.log('Form data:', data);
|
|
// Implement form rendering logic here
|
|
})
|
|
.catch(error => console.error('Error loading form:', error));
|
|
</script></code>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<h6>Benefits of Inline Embed</h6>
|
|
<ul class="feature-list">
|
|
<li><i class="fas fa-check"></i> Full control over styling</li>
|
|
<li><i class="fas fa-check"></i> Better SEO integration</li>
|
|
<li><i class="fas fa-check"></i> Faster initial load</li>
|
|
<li><i class="fas fa-check"></i> Custom form handling</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Section -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-eye"></i> Live Preview
|
|
</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<iframe src="{% url 'form_preview' form.id %}?embed=true"
|
|
class="preview-iframe"
|
|
frameborder="0">
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
function copyToClipboard(button, elementId) {
|
|
const element = document.getElementById(elementId);
|
|
const text = element.textContent;
|
|
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
const originalText = button.innerHTML;
|
|
button.innerHTML = '<i class="fas fa-check"></i> Copied!';
|
|
button.classList.add('copied');
|
|
|
|
setTimeout(function() {
|
|
button.innerHTML = originalText;
|
|
button.classList.remove('copied');
|
|
}, 2000);
|
|
}).catch(function(err) {
|
|
console.error('Failed to copy text: ', err);
|
|
|
|
// Fallback for older browsers
|
|
const textArea = document.createElement("textarea");
|
|
textArea.value = text;
|
|
document.body.appendChild(textArea);
|
|
textArea.focus();
|
|
textArea.select();
|
|
|
|
try {
|
|
document.execCommand('copy');
|
|
button.innerHTML = '<i class="fas fa-check"></i> Copied!';
|
|
button.classList.add('copied');
|
|
|
|
setTimeout(function() {
|
|
button.innerHTML = '<i class="fas fa-copy"></i> Copy';
|
|
button.classList.remove('copied');
|
|
}, 2000);
|
|
} catch (err) {
|
|
console.error('Fallback copy failed: ', err);
|
|
}
|
|
|
|
document.body.removeChild(textArea);
|
|
});
|
|
}
|
|
|
|
function selectResponsive(element, type, option) {
|
|
// Remove active class from all options in this tab
|
|
const container = element.closest('.tab-pane');
|
|
container.querySelectorAll('.responsive-option').forEach(opt => {
|
|
opt.classList.remove('active');
|
|
});
|
|
|
|
// Add active class to selected option
|
|
element.classList.add('active');
|
|
|
|
// Update the embed code based on selection
|
|
updateEmbedCode(type, option);
|
|
}
|
|
|
|
function updateEmbedCode(type, option) {
|
|
const baseUrl = '{{ request.build_absolute_uri }}{% url "form_preview" form.id %}?embed=true';
|
|
let height = '600';
|
|
let style = 'border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);';
|
|
|
|
if (type === 'iframe') {
|
|
switch(option) {
|
|
case 'responsive':
|
|
height = 'auto';
|
|
style += ' min-height: 600px;';
|
|
break;
|
|
case 'full':
|
|
height = '100vh';
|
|
style += ' min-height: 100vh;';
|
|
break;
|
|
default:
|
|
// fixed height - already set
|
|
break;
|
|
}
|
|
|
|
const code = `<iframe src="${baseUrl}"
|
|
width="100%"
|
|
height="${height}"
|
|
frameborder="0"
|
|
style="${style}"></iframe>`;
|
|
|
|
document.getElementById('iframe-code').textContent = code;
|
|
}
|
|
}
|
|
|
|
// Initialize tooltips
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|