905 lines
No EOL
25 KiB
Text
905 lines
No EOL
25 KiB
Text
@model SendQuestionnaireViewModel
|
||
@{
|
||
ViewData["Title"] = "Send Questionnaire";
|
||
}
|
||
|
||
<style>
|
||
/* Modern Design System with Advanced Visual Effects */
|
||
@@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||
|
||
:root {
|
||
--primary-color: #6366f1;
|
||
--primary-light: #8b5cf6;
|
||
--primary-dark: #4338ca;
|
||
--primary-ultra: #3730a3;
|
||
--success-color: #10b981;
|
||
--success-light: #34d399;
|
||
--success-dark: #059669;
|
||
--info-color: #06b6d4;
|
||
--info-light: #22d3ee;
|
||
--info-dark: #0891b2;
|
||
--warning-color: #f59e0b;
|
||
--warning-light: #fbbf24;
|
||
--warning-dark: #d97706;
|
||
--danger-color: #ef4444;
|
||
--danger-light: #fca5a5;
|
||
--danger-dark: #dc2626;
|
||
--gray-50: #f8fafc;
|
||
--gray-100: #f1f5f9;
|
||
--gray-200: #e2e8f0;
|
||
--gray-300: #cbd5e1;
|
||
--gray-400: #94a3b8;
|
||
--gray-500: #64748b;
|
||
--gray-600: #475569;
|
||
--gray-700: #334155;
|
||
--gray-800: #1e293b;
|
||
--gray-900: #0f172a;
|
||
/* Advanced Shadows */
|
||
--shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
|
||
--shadow-ultra: 0 32px 64px -12px rgba(0, 0, 0, 0.25);
|
||
--shadow-floating: 0 20px 40px -8px rgba(99, 102, 241, 0.2);
|
||
--shadow-premium: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 80px rgba(99, 102, 241, 0.1);
|
||
/* Border Radius */
|
||
--border-radius-sm: 12px;
|
||
--border-radius-md: 16px;
|
||
--border-radius-lg: 24px;
|
||
--border-radius-xl: 32px;
|
||
--border-radius-2xl: 40px;
|
||
/* Animations */
|
||
--ease-premium: cubic-bezier(0.23, 1, 0.32, 1);
|
||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||
}
|
||
|
||
* {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
padding: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 3rem 1rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
|
||
|
||
/* Premium Glass Morphism Header */
|
||
.page-header {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: var(--border-radius-2xl);
|
||
box-shadow: var(--shadow-premium);
|
||
padding: 3rem;
|
||
margin-bottom: 3rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
animation: slideDown 0.8s var(--ease-premium);
|
||
}
|
||
|
||
.page-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 6px;
|
||
background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color), var(--warning-color), var(--primary-light) );
|
||
background-size: 200% 100%;
|
||
animation: gradientFlow 3s ease-in-out infinite;
|
||
}
|
||
|
||
@@keyframes gradientFlow {
|
||
0%, 100%
|
||
|
||
{
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
}
|
||
|
||
.page-header::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||
animation: shimmer 4s ease-in-out infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@@keyframes shimmer {
|
||
0%, 100%
|
||
|
||
{
|
||
transform: rotate(0deg) scale(0.8);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
50% {
|
||
transform: rotate(180deg) scale(1.2);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2rem;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.header-icon {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--info-color) 100%);
|
||
color: white;
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: var(--border-radius-lg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2.25rem;
|
||
box-shadow: var(--shadow-floating);
|
||
position: relative;
|
||
animation: iconPulse 3s ease-in-out infinite;
|
||
}
|
||
|
||
.header-icon::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -2px;
|
||
left: -2px;
|
||
right: -2px;
|
||
bottom: -2px;
|
||
background: linear-gradient(45deg, var(--primary-color), var(--info-color), var(--success-color), var(--primary-color));
|
||
border-radius: var(--border-radius-lg);
|
||
z-index: -1;
|
||
background-size: 300% 300%;
|
||
animation: borderFlow 3s ease infinite;
|
||
}
|
||
|
||
@@keyframes iconPulse {
|
||
0%, 100%
|
||
|
||
{
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
}
|
||
|
||
@@keyframes borderFlow {
|
||
0%, 100%
|
||
|
||
{
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
}
|
||
|
||
.header-text h1 {
|
||
font-size: 3rem;
|
||
font-weight: 900;
|
||
background: linear-gradient(135deg, var(--gray-800) 0%, var(--primary-color) 50%, var(--info-color) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin: 0 0 0.75rem;
|
||
line-height: 1.2;
|
||
animation: textShimmer 4s ease-in-out infinite;
|
||
}
|
||
|
||
@@keyframes textShimmer {
|
||
0%, 100%
|
||
|
||
{
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
}
|
||
|
||
.header-subtitle {
|
||
color: var(--gray-700);
|
||
font-size: 1.25rem;
|
||
font-weight: 500;
|
||
line-height: 1.6;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Premium Info Cards */
|
||
.info-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 2rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.info-card {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: var(--border-radius-xl);
|
||
padding: 2rem;
|
||
box-shadow: var(--shadow-floating);
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.4s var(--ease-premium);
|
||
animation: slideUp 0.8s var(--ease-premium);
|
||
}
|
||
|
||
.info-card:nth-child(1) {
|
||
animation-delay: 0.2s;
|
||
animation-fill-mode: both;
|
||
}
|
||
|
||
.info-card:nth-child(2) {
|
||
animation-delay: 0.4s;
|
||
animation-fill-mode: both;
|
||
}
|
||
|
||
.info-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--info-color), var(--success-color));
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.info-card:hover {
|
||
transform: translateY(-8px) scale(1.02);
|
||
box-shadow: var(--shadow-ultra);
|
||
background: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.info-card:hover::before {
|
||
height: 6px;
|
||
background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
|
||
}
|
||
|
||
.info-card h4 {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: var(--gray-800);
|
||
margin: 0 0 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.info-card-icon {
|
||
background: linear-gradient(135deg, var(--info-color), var(--info-light));
|
||
color: white;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.125rem;
|
||
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
|
||
}
|
||
|
||
/* Ultra-Premium Form Card */
|
||
.form-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(30px);
|
||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
border-radius: var(--border-radius-2xl);
|
||
box-shadow: var(--shadow-premium);
|
||
overflow: hidden;
|
||
position: relative;
|
||
animation: slideUp 0.8s var(--ease-premium) 0.6s both;
|
||
}
|
||
|
||
.form-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 6px;
|
||
background: linear-gradient(90deg, var(--success-color), var(--info-color), var(--primary-color), var(--warning-color), var(--success-color) );
|
||
background-size: 200% 100%;
|
||
animation: gradientFlow 4s ease-in-out infinite;
|
||
}
|
||
|
||
.form-header {
|
||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 50%, rgba(6, 182, 212, 0.05) 100% );
|
||
padding: 3rem;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
position: relative;
|
||
}
|
||
|
||
.form-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.5rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.form-icon {
|
||
background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%);
|
||
color: white;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: var(--border-radius-lg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.75rem;
|
||
box-shadow: var(--shadow-floating);
|
||
position: relative;
|
||
animation: iconBounce 2s ease-in-out infinite;
|
||
}
|
||
|
||
@@keyframes iconBounce {
|
||
0%, 100%
|
||
|
||
{
|
||
transform: translateY(0);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
}
|
||
|
||
.form-title h2 {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--gray-800), var(--primary-color));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin: 0;
|
||
}
|
||
|
||
.form-body {
|
||
padding: 3rem;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
/* Ultra-Premium Form Groups */
|
||
.form-group {
|
||
margin-bottom: 2.5rem;
|
||
position: relative;
|
||
}
|
||
|
||
.form-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Beautiful Labels */
|
||
.control-label {
|
||
display: block;
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
color: var(--gray-800);
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
padding-left: 2.5rem;
|
||
}
|
||
|
||
.control-label i {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
|
||
color: white;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1rem;
|
||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
|
||
}
|
||
|
||
.control-label::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -6px;
|
||
left: 2.5rem;
|
||
width: 60px;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--primary-color), var(--info-color));
|
||
border-radius: 2px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Premium Form Controls */
|
||
.form-control {
|
||
width: 100%;
|
||
padding: 1.25rem 1.5rem;
|
||
border: 2px solid rgba(203, 213, 225, 0.6);
|
||
border-radius: var(--border-radius-lg);
|
||
font-size: 1.125rem;
|
||
font-weight: 500;
|
||
color: var(--gray-800);
|
||
background: rgba(255, 255, 255, 0.8);
|
||
backdrop-filter: blur(10px);
|
||
transition: all 0.3s var(--ease-premium);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
}
|
||
|
||
.form-control:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 8px 25px rgba(99, 102, 241, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.05);
|
||
transform: translateY(-2px) scale(1.01);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
}
|
||
|
||
.form-control:disabled {
|
||
background: linear-gradient(135deg, var(--info-color), var(--info-light));
|
||
color: white;
|
||
border: none;
|
||
cursor: not-allowed;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-floating);
|
||
}
|
||
|
||
.form-control:disabled:focus {
|
||
transform: none;
|
||
box-shadow: var(--shadow-floating);
|
||
}
|
||
|
||
/* Special Textarea */
|
||
textarea.form-control {
|
||
min-height: 140px;
|
||
resize: vertical;
|
||
line-height: 1.7;
|
||
font-family: 'JetBrains Mono', 'Monaco', monospace;
|
||
background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.9));
|
||
border-color: var(--info-color);
|
||
}
|
||
|
||
textarea.form-control:focus {
|
||
border-color: var(--info-dark);
|
||
box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15), 0 8px 25px rgba(6, 182, 212, 0.2);
|
||
}
|
||
|
||
/* DateTime Input */
|
||
.datetime-input {
|
||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 191, 36, 0.05));
|
||
border-color: var(--warning-color);
|
||
}
|
||
|
||
.datetime-input:focus {
|
||
border-color: var(--warning-dark);
|
||
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15), 0 8px 25px rgba(245, 158, 11, 0.2);
|
||
}
|
||
|
||
/* Ultra-Premium Submit Button */
|
||
.btn-submit {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--info-color) 100%);
|
||
color: white;
|
||
border: none;
|
||
padding: 1.5rem 3rem;
|
||
border-radius: var(--border-radius-xl);
|
||
font-weight: 800;
|
||
font-size: 1.25rem;
|
||
transition: all 0.4s var(--ease-premium);
|
||
box-shadow: var(--shadow-floating);
|
||
position: relative;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
min-width: 250px;
|
||
justify-content: center;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.btn-submit::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent );
|
||
transition: left 0.6s ease;
|
||
}
|
||
|
||
.btn-submit::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
transition: width 0.6s ease, height 0.6s ease;
|
||
}
|
||
|
||
.btn-submit:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.btn-submit:hover::after {
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
|
||
.btn-submit:hover {
|
||
background: linear-gradient(135deg, var(--primary-light) 0%, var(--info-color) 50%, var(--success-color) 100%);
|
||
transform: translateY(-6px) scale(1.05);
|
||
box-shadow: var(--shadow-ultra);
|
||
}
|
||
|
||
.btn-submit:active {
|
||
transform: translateY(-2px) scale(1.02);
|
||
}
|
||
|
||
.btn-submit i {
|
||
font-size: 1.5rem;
|
||
z-index: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.btn-submit span {
|
||
z-index: 1;
|
||
position: relative;
|
||
}
|
||
|
||
/* Validation Styling */
|
||
.text-danger {
|
||
color: var(--danger-color);
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
margin-top: 0.75rem;
|
||
display: block;
|
||
background: rgba(239, 68, 68, 0.1);
|
||
padding: 0.5rem 0.75rem;
|
||
border-radius: var(--border-radius-sm);
|
||
border-left: 4px solid var(--danger-color);
|
||
}
|
||
|
||
.input-validation-error {
|
||
border-color: var(--danger-color) !important;
|
||
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
|
||
animation: shake 0.5s ease-in-out;
|
||
}
|
||
|
||
@@keyframes shake {
|
||
0%, 100%
|
||
|
||
{
|
||
transform: translateX(0);
|
||
}
|
||
|
||
25% {
|
||
transform: translateX(-5px);
|
||
}
|
||
|
||
75% {
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
}
|
||
|
||
/* Helper Text */
|
||
.helper-text {
|
||
margin-top: 0.75rem;
|
||
font-size: 0.875rem;
|
||
color: var(--gray-600);
|
||
background: rgba(248, 250, 252, 0.8);
|
||
padding: 0.75rem 1rem;
|
||
border-radius: var(--border-radius-sm);
|
||
border-left: 3px solid var(--info-color);
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
/* Animations */
|
||
@@keyframes slideDown {
|
||
from
|
||
|
||
{
|
||
opacity: 0;
|
||
transform: translateY(-50px) scale(0.95);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
}
|
||
|
||
@@keyframes slideUp {
|
||
from
|
||
|
||
{
|
||
opacity: 0;
|
||
transform: translateY(50px) scale(0.95);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
}
|
||
|
||
/* Alert Styling */
|
||
.alert {
|
||
border-radius: var(--border-radius-lg);
|
||
padding: 1.25rem 1.5rem;
|
||
margin-bottom: 2rem;
|
||
border: none;
|
||
box-shadow: var(--shadow-floating);
|
||
animation: slideDown 0.6s var(--ease-premium);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.alert-success {
|
||
background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%);
|
||
color: white;
|
||
}
|
||
|
||
.alert-danger {
|
||
background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-light) 100%);
|
||
color: white;
|
||
}
|
||
|
||
/* Responsive Design */
|
||
@@media (max-width: 768px) {
|
||
.container
|
||
|
||
{
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.page-header {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.header-content {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.header-text h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.form-body {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.form-header {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.btn-submit {
|
||
width: 100%;
|
||
}
|
||
|
||
.info-cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
}
|
||
|
||
/* Loading States */
|
||
.btn-submit.loading {
|
||
background: var(--gray-400);
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
.btn-submit.loading::after {
|
||
content: "";
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid transparent;
|
||
border-top-color: currentColor;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-left: 0.75rem;
|
||
}
|
||
|
||
@@keyframes spin {
|
||
0%
|
||
|
||
{
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
|
||
}
|
||
</style>
|
||
|
||
<div class="container">
|
||
|
||
|
||
<!-- Success/Error Messages -->
|
||
@if (TempData["Success"] != null)
|
||
{
|
||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||
<i class="bi bi-check-circle-fill"></i> @TempData["Success"]
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">×</button>
|
||
</div>
|
||
}
|
||
|
||
@if (TempData["Error"] != null)
|
||
{
|
||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||
<i class="bi bi-exclamation-triangle-fill"></i> @TempData["Error"]
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">×</button>
|
||
</div>
|
||
}
|
||
|
||
<!-- Premium Page Header -->
|
||
<div class="page-header">
|
||
<div class="header-content">
|
||
<div class="header-icon">
|
||
<i class="bi bi-rocket-takeoff-fill"></i>
|
||
</div>
|
||
<div class="header-text">
|
||
<h1>Send Questionnaire</h1>
|
||
<p class="header-subtitle">Distribute your questionnaire with style and precision to multiple recipients</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Premium Info Cards -->
|
||
|
||
|
||
<!-- Ultra-Premium Form -->
|
||
<div class="form-card">
|
||
<div class="form-header">
|
||
<div class="form-title">
|
||
<div class="form-icon">
|
||
<i class="bi bi-envelope-paper-heart-fill"></i>
|
||
</div>
|
||
<h2>Questionnaire Distribution Center</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-body">
|
||
<form asp-action="SendQuestionnaire">
|
||
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
|
||
|
||
<!-- Questionnaire Selection -->
|
||
<div class="form-group">
|
||
<label asp-for="QuestionnaireId" class="control-label">
|
||
<i class="bi bi-clipboard-data-fill"></i>
|
||
Selected Questionnaire
|
||
</label>
|
||
<input type="text" class="form-control" value="@ViewBag.questionnaireName" disabled />
|
||
|
||
</div>
|
||
|
||
<!-- Email Addresses -->
|
||
<div class="form-group">
|
||
<label asp-for="Emails" class="control-label">
|
||
<i class="bi bi-people-fill"></i>
|
||
Email Recipients
|
||
</label>
|
||
<textarea asp-for="Emails"
|
||
class="form-control"
|
||
placeholder="Enter email addresses separated by commas
|
||
|
||
Example:
|
||
john.doe@company.com, jane.smith@organization.org, user@domain.com
|
||
|
||
💡 Tip: You can paste from Excel, CSV, or any text format"
|
||
rows="5"></textarea>
|
||
|
||
<div class="helper-text">
|
||
<i class="bi bi-info-circle-fill me-2"></i>
|
||
<strong>Pro Tip:</strong> Copy and paste email lists from Excel, Google Sheets, or any text document. The system will automatically format them correctly.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Expiration Date -->
|
||
<div class="form-group">
|
||
<label asp-for="ExpirationDateTime" class="control-label">
|
||
<i class="bi bi-calendar-event-fill"></i>
|
||
Survey Expiration
|
||
</label>
|
||
<input asp-for="ExpirationDateTime"
|
||
class="form-control datetime-input"
|
||
type="datetime-local"
|
||
min="@DateTime.Now.ToString("yyyy-MM-ddTHH:mm")" />
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Hidden Fields -->
|
||
<input type="hidden" asp-for="QuestionnaireId" />
|
||
|
||
<!-- Ultra-Premium Submit Button -->
|
||
<div class="form-group text-center">
|
||
<button type="submit" class="btn-submit">
|
||
<i class="bi bi-send-fill"></i>
|
||
<span>Send Survey</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Basic form interactions
|
||
const form = document.querySelector('form');
|
||
const submitBtn = document.querySelector('.btn-submit');
|
||
const expirationInput = document.querySelector('input[name="ExpirationDateTime"]');
|
||
|
||
// Auto-dismiss alerts
|
||
const alerts = document.querySelectorAll('.alert');
|
||
alerts.forEach(alert => {
|
||
setTimeout(() => {
|
||
alert.style.opacity = '0';
|
||
alert.style.transform = 'translateY(-30px) scale(0.95)';
|
||
setTimeout(() => alert.remove(), 400);
|
||
}, 6000);
|
||
});
|
||
|
||
// Form submission with loading state
|
||
if (form && submitBtn) {
|
||
form.addEventListener('submit', function() {
|
||
submitBtn.disabled = true;
|
||
submitBtn.classList.add('loading');
|
||
submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i><span>Sending...</span>';
|
||
});
|
||
}
|
||
|
||
// Set default expiration (30 days from now)
|
||
if (expirationInput && !expirationInput.value) {
|
||
const defaultDate = new Date();
|
||
defaultDate.setDate(defaultDate.getDate() + 30);
|
||
defaultDate.setHours(9, 0, 0, 0);
|
||
expirationInput.value = defaultDate.toISOString().slice(0, 16);
|
||
}
|
||
});
|
||
</script> |