163 lines
13 KiB
HTML
163 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Add New ICard</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">IDPro</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Solutions</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
|
|
<div class="app-form"><h1>Start Your I-Card Transformation Journey</h1><h2>Your Contact Information</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></div></div><div class="form-group full-width"><label>Business Email</label><input id="email" type="email" placeholder="your.email@organization.com"></div><h2>Connect with Us</h2><div class="form-group full-width"><label>Phone Number (Optional)</label><input id="phone" type="tel" placeholder="e.g., +1 555-123-4567"></div><h2>Tell Us About Your I-Card Needs</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share details about your organization, number of I-cards needed, or specific features you're looking for. This helps us tailor your experience!"></textarea></div><button type="submit">Get Started Today</button></div>
|
|
<section id="form-instructions" style="padding: 60px 20px; background-color: #f9f9f9; color: #333; font-family: Arial, sans-serif;">
|
|
<div class="container" style="max-width: 960px; margin: 0 auto; background-color: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
|
|
<h2 style="font-size: 2.5em; color: #1a202c; text-align: center; margin-bottom: 40px;">Form Instructions & Guidelines</h2>
|
|
|
|
<div class="instruction-block" style="margin-bottom: 30px;">
|
|
<h3 style="font-size: 1.8em; color: #3b5998; margin-bottom: 15px;">1. Icard Detail Form</h3>
|
|
<p style="font-size: 1.1em; line-height: 1.6;">When creating or editing an Icard entry, please provide the following information:</p>
|
|
<ul style="list-style: disc; margin-left: 25px; padding-left: 0; font-size: 1.1em; line-height: 1.6;">
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">Icard Name:</strong> A unique and descriptive name for your Icard (e.g., "Batch 2024 Student ID", "Faculty Card 2023"). This name helps you identify the Icard later.</li>
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">Description:</strong> A brief explanation of the Icard's purpose or the group it's intended for (e.g., "Official ID for B.Tech CSE students, 2024 intake").</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="instruction-block" style="margin-bottom: 30px;">
|
|
<h3 style="font-size: 1.8em; color: #3b5998; margin-bottom: 15px;">2. Student Data Excel Upload</h3>
|
|
<p style="font-size: 1.1em; line-height: 1.6;">To ensure accurate data processing for your Icards, please prepare your student information in an Excel file (.xlsx or .xls) following these critical guidelines:</p>
|
|
<ul style="list-style: disc; margin-left: 25px; padding-left: 0; font-size: 1.1em; line-height: 1.6;">
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">First Row as Headers:</strong> The very first row of your Excel sheet must contain unique column headers. These headers will act as the "keys" that link your data to the Icard template.</li>
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">Key Naming Convention:</strong> Use clear, concise, and consistent names for your headers (e.g., `studentName`, `rollNumber`, `dateOfBirth`, `course`, `address`). Avoid special characters like `@`, `#`, `$`, `!`, etc., and prefer camelCase or PascalCase, or use spaces as needed if your template will exactly match them.</li>
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">Required Data:</strong> Ensure all necessary fields are present and correctly populated for each student. If a key in your template does not find a corresponding column or data, it will appear blank.</li>
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">Data Types:</strong> The system supports text, numbers, and dates. For dates, maintain a consistent format (e.g., YYYY-MM-DD or DD/MM/YYYY) across all entries.</li>
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">Empty Rows/Columns:</strong> Avoid entirely empty rows or columns within the data range you intend to upload.</li>
|
|
</ul>
|
|
<div class="example-tip" style="background-color: #e6f7ff; border-left: 5px solid #66b3ff; padding: 15px; margin-top: 20px; border-radius: 4px;">
|
|
<p style="font-style: italic; color: #0056b3; margin: 0;"><strong style="color: #0056b3;">Example Excel Headers:</strong> `Student Name`, `Roll No`, `Program`, `Date of Birth`, `Contact No`, `Address`</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instruction-block" style="margin-bottom: 30px;">
|
|
<h3 style="font-size: 1.8em; color: #3b5998; margin-bottom: 15px;">3. Icard Template Upload</h3>
|
|
<p style="font-size: 1.1em; line-height: 1.6;">Upload your Icard template file (e.g., DOCX, PDF with editable fields, or a custom format if specified). This template will serve as the design blueprint for all generated Icards.</p>
|
|
<ul style="list-style: disc; margin-left: 25px; padding-left: 0; font-size: 1.1em; line-height: 1.6;">
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">Placeholder Syntax:</strong> To mark where student-specific data should be inserted, use double curly braces `{{ }}` around your Excel column headers (keys).</li>
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">Exact Match:</strong> The placeholder name within your template must *exactly* match the corresponding column header in your Excel file. This includes case-sensitivity and any spaces or special characters used.</li>
|
|
<li style="margin-bottom: 8px;"><strong style="color: #555;">Image Placeholders:</strong> If your template supports dynamic image insertion (e.g., student photos), refer to specific system documentation for the correct image placeholder syntax and expected file naming conventions for images.</li>
|
|
</ul>
|
|
<div class="example-tip" style="background-color: #e6f7ff; border-left: 5px solid #66b3ff; padding: 15px; margin-top: 20px; border-radius: 4px;">
|
|
<p style="font-style: italic; color: #0056b3; margin: 0;"><strong style="color: #0056b3;">Example Template Content Snippet:</strong><br>
|
|
Name: {{Student Name}}<br>
|
|
Roll Number: {{Roll No}}<br>
|
|
Program: {{Program}}<br>
|
|
D.O.B: {{Date of Birth}}<br>
|
|
Contact: {{Contact No}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instruction-block" style="margin-bottom: 0;">
|
|
<h3 style="font-size: 1.8em; color: #3b5998; margin-bottom: 15px;">4. Conversion Process</h3>
|
|
<p style="font-size: 1.1em; line-height: 1.6;">After successfully uploading both your Excel student data and your Icard template, click the "Convert" button. The system will then initiate the following process:</p>
|
|
<ul style="list-style: disc; margin-left: 25px; padding-left: 0; font-size: 1.1em; line-height: 1.6;">
|
|
<li style="margin-bottom: 8px;">The system will read and fetch all data records from your uploaded Excel sheet, row by row.</li>
|
|
<li style="margin-bottom: 8px;">For each student record, it will create a new Icard instance.</li>
|
|
<li style="margin-bottom: 8px;">Inside each Icard instance, it will iterate through your Icard template and automatically replace every `{{placeholder}}` with the corresponding data value from the current student's row in the Excel sheet.</li>
|
|
<li style="margin-bottom: 8px;">Finally, it will generate individual, personalized Icards for each student based on the processed data and template.</li>
|
|
</ul>
|
|
<div class="example-tip" style="background-color: #fffbe6; border-left: 5px solid #ffd700; padding: 15px; margin-top: 20px; border-radius: 4px;">
|
|
<p style="font-style: italic; color: #8a6d3b; margin: 0;"><strong style="color: #8a6d3b;">Important Tip:</strong> Always perform a quick check of your generated Icards to ensure all data has been correctly mapped and appears as expected. Discrepancies often stem from mismatched Excel headers and template placeholders.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Template Preview Area</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
|
|
|
|
<section class="template-preview-section" aria-labelledby="templatePreviewHeading">
|
|
<header class="template-preview-header">
|
|
<h2 id="templatePreviewHeading">I-Card Template Preview: <span style="color: #007bff;">[iCardName]</span></h2>
|
|
<div class="actions">
|
|
<button type="button" class="btn-edit">Edit Template</button>
|
|
<button type="button" class="btn-save">Save & Continue</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="preview-grid">
|
|
<article class="preview-card" aria-label="I-Card Preview for Student 1">
|
|
<div class="preview-card-image">I-Card Template Layout</div>
|
|
<div class="preview-card-content">
|
|
<h3>Student Name: <span class="student-name">[StudentName 1]</span></h3>
|
|
<p>Roll No: [RollNo 1]</p>
|
|
<p>Class: [Class 1]</p>
|
|
<p>ID: [StudentID 1]</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="preview-card" aria-label="I-Card Preview for Student 2">
|
|
<div class="preview-card-image">I-Card Template Layout</div>
|
|
<div class="preview-card-content">
|
|
<h3>Student Name: <span class="student-name">[StudentName 2]</span></h3>
|
|
<p>Roll No: [RollNo 2]</p>
|
|
<p>Class: [Class 2]</p>
|
|
<p>ID: [StudentID 2]</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="preview-card" aria-label="I-Card Preview for Student 3">
|
|
<div class="preview-card-image">I-Card Template Layout</div>
|
|
<div class="preview-card-content">
|
|
<h3>Student Name: <span class="student-name">[StudentName 3]</span></h3>
|
|
<p>Roll No: [RollNo 3]</p>
|
|
<p>Class: [Class 3]</p>
|
|
<p>ID: [StudentID 3]</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="preview-card" aria-label="I-Card Preview for Student 4">
|
|
<div class="preview-card-image">I-Card Template Layout</div>
|
|
<div class="preview-card-content">
|
|
<h3>Student Name: <span class="student-name">[StudentName 4]</span></h3>
|
|
<p>Roll No: [RollNo 4]</p>
|
|
<p>Class: [Class 4]</p>
|
|
<p>ID: [StudentID 4]</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="preview-card" aria-label="I-Card Preview for Student 5">
|
|
<div class="preview-card-image">I-Card Template Layout</div>
|
|
<div class="preview-card-content">
|
|
<h3>Student Name: <span class="student-name">[StudentName 5]</span></h3>
|
|
<p>Roll No: [RollNo 5]</p>
|
|
<p>Class: [Class 5]</p>
|
|
<p>ID: [StudentID 5]</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="preview-card" aria-label="I-Card Preview for Student 6">
|
|
<div class="preview-card-image">I-Card Template Layout</div>
|
|
<div class="preview-card-content">
|
|
<h3>Student Name: <span class="student-name">[StudentName 6]</span></h3>
|
|
<p>Roll No: [RollNo 6]</p>
|
|
<p>Class: [Class 6]</p>
|
|
<p>ID: [StudentID 6]</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<nav class="pagination" aria-label="Template Preview Pagination">
|
|
<button type="button" disabled="" aria-label="Previous page">Previous</button>
|
|
<span>Page 1 of X</span>
|
|
<button type="button" aria-label="Next page">Next</button>
|
|
</nav>
|
|
</section>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |