Shark Tank Business Idea Submission – NEST FEST
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘IBM Plex Sans’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #4D1979 0%, #6B3FA0 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #4D1979 0%, #6B3FA0 100%);
color: white;
padding: 40px 30px;
text-align: center;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
font-weight: 700;
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
}
.form-container {
padding: 40px;
}
.progress-container {
margin-bottom: 30px;
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border: 1px solid #e9ecef;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, #4D1979 0%, #6B3FA0 100%);
border-radius: 4px;
transition: width 0.5s ease;
width: 0%;
}
.progress-text {
text-align: center;
font-size: 0.9rem;
color: #4D1979;
font-weight: 600;
}
.business-tips {
background: #f8f9fa;
border: 2px solid #4D1979;
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
}
.business-tips h4 {
color: #4D1979;
margin-bottom: 15px;
font-size: 1.1rem;
}
.tips-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.tip-item {
background: white;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #4D1979;
font-size: 0.9rem;
line-height: 1.4;
}
.example-section {
background: white;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #28a745;
font-size: 0.9rem;
line-height: 1.5;
}
@media (max-width: 768px) {
.tips-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.business-tips {
padding: 15px;
}
}
.intro {
background: #f8f9fa;
padding: 25px;
border-radius: 10px;
margin-bottom: 30px;
border-left: 5px solid #4D1979;
}
.intro h3 {
color: #4D1979;
margin-bottom: 15px;
font-size: 1.3rem;
}
.intro ul {
list-style: none;
padding-left: 0;
}
.intro li {
padding: 5px 0;
position: relative;
padding-left: 20px;
}
.intro li::before {
content: “✓”;
color: #28a745;
font-weight: bold;
position: absolute;
left: 0;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #555;
font-size: 1rem;
}
.required {
color: #4D1979;
}
input[type=”text”],
input[type=”email”],
input[type=”number”],
textarea,
select {
width: 100%;
padding: 15px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
font-family: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=”text”]:focus,
input[type=”email”]:focus,
input[type=”number”]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: #4D1979;
box-shadow: 0 0 0 3px rgba(77, 25, 121, 0.1);
transform: translateY(-2px);
}
textarea {
resize: vertical;
min-height: 120px;
}
.radio-group {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-top: 10px;
}
.radio-option {
display: flex;
align-items: center;
gap: 8px;
}
.radio-option input[type=”radio”] {
width: auto;
}
.captcha-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.captcha-question {
display: flex;
align-items: center;
gap: 15px;
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
border: 2px solid #e9ecef;
font-size: 1.1rem;
font-weight: 600;
}
.refresh-captcha {
background: #4D1979;
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
min-width: 44px;
}
.refresh-captcha:hover {
background: #6B3FA0;
transform: rotate(180deg);
}
#captcha {
max-width: 150px;
font-size: 1.1rem;
}
/* Enhanced mobile optimization */
input, textarea, select, button {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input, textarea {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* Prevent zoom on iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.progress-container {
margin-bottom: 25px;
padding: 15px;
}
.progress-text {
font-size: 0.8rem;
}
.quick-action-buttons {
flex-direction: column;
gap: 8px;
}
.ai-header {
flex-direction: column;
gap: 10px;
text-align: center;
}
.ai-input-container {
flex-direction: column;
}
.ai-send-btn {
width: 100%;
}
input[type=”text”],
input[type=”email”],
input[type=”number”],
textarea {
font-size: 16px;
}
}
#num1, #num2 {
color: #4D1979;
font-weight: 700;
}
.submit-btn {
background: linear-gradient(135deg, #4D1979 0%, #6B3FA0 100%);
color: white;
padding: 18px 40px;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
margin-top: 20px;
min-height: 50px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(77, 25, 121, 0.3);
}
.submit-btn:active {
transform: translateY(0);
}
.character-count {
font-size: 0.9rem;
color: #666;
text-align: right;
margin-top: 5px;
}
.success-message {
background: #d4edda;
color: #155724;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid #c3e6cb;
display: none;
}
.error-message {
background: #f8d7da;
color: #721c24;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid #f5c6cb;
display: none;
}
@media (max-width: 768px) {
.container {
margin: 10px;
border-radius: 10px;
}
.header {
padding: 30px 20px;
}
.header h1 {
font-size: 2rem;
}
.form-container {
padding: 30px 20px;
}
.radio-group {
flex-direction: column;
gap: 10px;
}
.captcha-question {
flex-direction: column;
align-items: flex-start;
text-align: center;
gap: 10px;
}
.refresh-captcha {
align-self: center;
}
input[type=”text”],
input[type=”email”],
input[type=”number”],
textarea {
padding: 18px 15px;
font-size: 16px;
}
.submit-btn {
padding: 20px 40px;
font-size: 1.2rem;
min-height: 56px;
}
}
@media (max-width: 480px) {
body {
padding: 10px;
}
.container {
margin: 0;
}
.header h1 {
font-size: 1.8rem;
}
.form-container {
padding: 20px 15px;
}
.intro {
padding: 20px;
}
}
function updateProgress() {
const form = document.getElementById(‘shark-tank-form’);
const requiredFields = form.querySelectorAll(‘[required]’);
const totalRequired = requiredFields.length;
let completedFields = 0;
requiredFields.forEach(field => {
if (field.type === ‘radio’) {
// For radio buttons, check if any in the group is selected
const radioGroup = form.querySelectorAll(`input[name=”${field.name}”]`);
const isSelected = Array.from(radioGroup).some(radio => radio.checked);
if (isSelected) completedFields++;
} else if (field.value.trim() !== ”) {
completedFields++;
}
});
const percentage = Math.round((completedFields / totalRequired) * 100);
document.getElementById(‘progress-fill’).style.width = percentage + ‘%’;
document.getElementById(‘progress-percentage’).textContent = percentage + ‘%’;
// Add visual feedback when form is complete
const progressContainer = document.querySelector(‘.progress-container’);
if (percentage === 100) {
progressContainer.style.background = ‘#d4edda’;
progressContainer.style.borderColor = ‘#c3e6cb’;
} else {
progressContainer.style.background = ‘#f8f9fa’;
progressContainer.style.borderColor = ‘#e9ecef’;
}
}
// Allow Enter key to send messages
document.addEventListener(‘DOMContentLoaded’, function() {
document.getElementById(‘ai-input’).addEventListener(‘keypress’, function(e) {
if (e.key === ‘Enter’) {
sendAIMessage();
}
});
});
function updateProgress() {
const form = document.getElementById(‘shark-tank-form’);
const requiredFields = form.querySelectorAll(‘[required]’);
const totalRequired = requiredFields.length;
let completedFields = 0;
requiredFields.forEach(field => {
if (field.type === ‘radio’) {
// For radio buttons, check if any in the group is selected
const radioGroup = form.querySelectorAll(`input[name=”${field.name}”]`);
const isSelected = Array.from(radioGroup).some(radio => radio.checked);
if (isSelected) completedFields++;
} else if (field.value.trim() !== ”) {
completedFields++;
}
});
const percentage = Math.round((completedFields / totalRequired) * 100);
document.getElementById(‘progress-fill’).style.width = percentage + ‘%’;
document.getElementById(‘progress-percentage’).textContent = percentage + ‘%’;
// Add visual feedback when form is complete
const progressContainer = document.querySelector(‘.progress-container’);
if (percentage === 100) {
progressContainer.style.background = ‘#d4edda’;
progressContainer.style.borderColor = ‘#c3e6cb’;
} else {
progressContainer.style.background = ‘#f8f9fa’;
progressContainer.style.borderColor = ‘#e9ecef’;
}
}
function updateCharCount(textareaId, countId, maxLength) {
const textarea = document.getElementById(textareaId);
const counter = document.getElementById(countId);
if (!textarea || !counter) return; // Safety check
const currentLength = textarea.value.length;
counter.textContent = `${currentLength}/${maxLength} characters`;
if (currentLength > maxLength * 0.9) {
counter.style.color = ‘#4D1979’;
} else {
counter.style.color = ‘#666’;
}
}
function handleSubmit(event) {
event.preventDefault();
// Get form data
const formData = new FormData(event.target);
const data = Object.fromEntries(formData);
// Basic validation
if (!data.student_name || !data.student_email || !data.major || !data.business_title || !data.business_description) {
showMessage(‘error’, ‘Please fill in all required fields.’);
return;
}
// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(data.student_email)) {
showMessage(‘error’, ‘Please enter a valid email address.’);
return;
}
// Captcha validation
const captchaAnswer = parseInt(data.captcha_answer);
const correctAnswer = parseInt(data.captcha_correct);
if (isNaN(captchaAnswer) || captchaAnswer !== correctAnswer) {
showMessage(‘error’, ‘Please solve the security question correctly.’);
generateCaptcha(); // Generate new question
return;
}
// Simulate form submission (replace with actual WordPress processing)
submitToWordPress(data);
}
function submitToWordPress(data) {
// Show loading state
const submitBtn = document.querySelector(‘.submit-btn’);
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = ‘Submitting…’;
submitBtn.disabled = true;
// Simulate API call (replace with actual WordPress AJAX)
setTimeout(() => {
// Reset button
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
// Show success message
showMessage(‘success’);
// Reset form
document.getElementById(‘shark-tank-form’).reset();
// Generate new captcha for next submission
generateCaptcha();
// Reset character counters
document.querySelectorAll(‘.character-count’).forEach(counter => {
counter.textContent = counter.textContent.replace(/\d+/, ‘0’);
counter.style.color = ‘#666’;
});
// Scroll to top
window.scrollTo({ top: 0, behavior: ‘smooth’ });
}, 2000);
}
function showMessage(type, customMessage = ”) {
const successMsg = document.getElementById(‘success-message’);
const errorMsg = document.getElementById(‘error-message’);
// Hide both messages first
successMsg.style.display = ‘none’;
errorMsg.style.display = ‘none’;
if (type === ‘success’) {
successMsg.style.display = ‘block’;
} else if (type === ‘error’) {
if (customMessage) {
errorMsg.querySelector(‘strong’).nextSibling.textContent = ‘ ‘ + customMessage;
}
errorMsg.style.display = ‘block’;
}
}
function generateCaptcha() {
const num1 = Math.floor(Math.random() * 10) + 1; // 1-10
const num2 = Math.floor(Math.random() * 10) + 1; // 1-10
const correctAnswer = num1 + num2;
document.getElementById(‘num1’).textContent = num1;
document.getElementById(‘num2’).textContent = num2;
document.getElementById(‘captcha-correct’).value = correctAnswer;
document.getElementById(‘captcha’).value = ”; // Clear previous answer
}
// Initialize character counters and captcha
document.addEventListener(‘DOMContentLoaded’, function() {
updateCharCount(‘business-description’, ‘desc-count’, 1000);
updateCharCount(‘problem-solved’, ‘problem-count’, 500);
updateCharCount(‘target-market’, ‘market-count’, 300);
updateCharCount(‘unique-value’, ‘unique-count’, 300);
updateCharCount(‘additional-info’, ‘additional-count’, 300);
generateCaptcha(); // Generate initial captcha
});
NEST FEST 