| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>🎓 Smart Academic Report Generator</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| padding: 20px; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .header { |
| text-align: center; |
| margin-bottom: 40px; |
| } |
| |
| .header-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 15px; |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| padding: 15px 30px; |
| border-radius: 50px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| margin-bottom: 20px; |
| } |
| |
| .header h1 { |
| font-size: 2.5em; |
| color: white; |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); |
| margin: 0; |
| } |
| |
| .header p { |
| color: rgba(255, 255, 255, 0.9); |
| font-size: 1.2em; |
| font-weight: 500; |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); |
| } |
| |
| .main-card { |
| background: white; |
| border-radius: 20px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| overflow: hidden; |
| } |
| |
| .form-content { |
| padding: 40px; |
| } |
| |
| .section { |
| padding: 30px; |
| border-radius: 15px; |
| margin-bottom: 30px; |
| border: 2px solid; |
| } |
| |
| .section.student { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| border-color: #667eea; |
| } |
| |
| .section.course { |
| background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); |
| border-color: #f6ad55; |
| } |
| |
| .section.report { |
| background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); |
| border-color: #48bb78; |
| } |
| |
| .section.formatting { |
| background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); |
| border-color: #e53e3e; |
| } |
| |
| .section-header { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 20px; |
| } |
| |
| .section-header h2 { |
| font-size: 1.5em; |
| color: #2d3748; |
| font-weight: 700; |
| margin: 0; |
| } |
| |
| .form-grid { |
| display: grid; |
| gap: 20px; |
| } |
| |
| .grid-2 { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .grid-3 { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| |
| .grid-4 { |
| grid-template-columns: repeat(4, 1fr); |
| } |
| |
| .form-group { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| label { |
| display: block; |
| margin-bottom: 8px; |
| font-size: 0.95em; |
| font-weight: 700; |
| color: #2d3748; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| input, select, textarea { |
| width: 100%; |
| padding: 12px 15px; |
| font-size: 1em; |
| border: 2px solid rgba(0, 0, 0, 0.1); |
| border-radius: 8px; |
| transition: all 0.3s; |
| background: rgba(255, 255, 255, 0.9); |
| font-family: inherit; |
| } |
| |
| input:focus, select:focus, textarea:focus { |
| outline: none; |
| border-color: #667eea; |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| } |
| |
| textarea { |
| min-height: 80px; |
| resize: vertical; |
| } |
| |
| .checkbox-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 15px; |
| margin-top: 20px; |
| } |
| |
| .checkbox-label { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 12px; |
| background: rgba(255, 255, 255, 0.6); |
| border-radius: 8px; |
| cursor: pointer; |
| transition: all 0.3s; |
| border: 2px solid transparent; |
| } |
| |
| .checkbox-label:hover { |
| border-color: #e53e3e; |
| } |
| |
| .checkbox-label input { |
| width: 18px; |
| height: 18px; |
| cursor: pointer; |
| } |
| |
| .checkbox-label span { |
| font-size: 0.95em; |
| font-weight: 600; |
| } |
| |
| .generate-btn { |
| width: 100%; |
| padding: 20px 40px; |
| font-size: 1.3em; |
| font-weight: 700; |
| color: white; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| border: none; |
| border-radius: 15px; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 15px; |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); |
| transition: all 0.3s; |
| margin-top: 20px; |
| } |
| |
| .generate-btn:hover { |
| transform: scale(1.02); |
| box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6); |
| } |
| |
| .generate-btn:disabled { |
| background: linear-gradient(135deg, #a0a0a0 0%, #808080 100%); |
| cursor: not-allowed; |
| transform: scale(0.98); |
| } |
| |
| .alert { |
| padding: 20px; |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| margin-top: 20px; |
| border: 2px solid; |
| } |
| |
| .alert.success { |
| background: linear-gradient(135deg, #9ae6b4 0%, #c6f6d5 100%); |
| border-color: #48bb78; |
| color: #22543d; |
| } |
| |
| .alert.error { |
| background: linear-gradient(135deg, #fc8181 0%, #feb2b2 100%); |
| border-color: #e53e3e; |
| color: #742a2a; |
| } |
| |
| .footer { |
| padding: 30px; |
| background: linear-gradient(135deg, #434343 0%, #000000 100%); |
| color: rgba(255, 255, 255, 0.8); |
| text-align: center; |
| } |
| |
| .spinner { |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
| |
| @media (max-width: 768px) { |
| .grid-2, .grid-3, .grid-4, .checkbox-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .header h1 { |
| font-size: 1.8em; |
| } |
| |
| .form-content { |
| padding: 20px; |
| } |
| |
| .section { |
| padding: 20px; |
| } |
| } |
| |
| .icon { |
| width: 24px; |
| height: 24px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| |
| <div class="header"> |
| <div class="header-badge"> |
| <svg class="icon" fill="white" viewBox="0 0 24 24"> |
| <path d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z"/> |
| </svg> |
| <h1>Smart Academic Report Generator</h1> |
| </div> |
| <p>Professional PhD-Level Reports in Minutes ✨</p> |
| </div> |
|
|
| |
| <div class="main-card"> |
| <form id="reportForm" class="form-content"> |
| |
| <div class="section student"> |
| <div class="section-header"> |
| <svg class="icon" fill="#667eea" viewBox="0 0 24 24"> |
| <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/> |
| </svg> |
| <h2>Student Information</h2> |
| </div> |
| <div class="form-grid grid-2"> |
| <div class="form-group"> |
| <label>Full Name *</label> |
| <input type="text" id="studentName" required placeholder="e.g., Md. Rahman Ahmed"> |
| </div> |
| <div class="form-group"> |
| <label>Student ID *</label> |
| <input type="text" id="studentId" required placeholder="e.g., 2023-1-60-001"> |
| </div> |
| <div class="form-group"> |
| <label>Department *</label> |
| <input type="text" id="department" required placeholder="e.g., Computer Science & Engineering"> |
| </div> |
| <div class="form-group"> |
| <label>University *</label> |
| <input type="text" id="university" required placeholder="e.g., East West University"> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="section course"> |
| <div class="section-header"> |
| <svg class="icon" fill="#f6ad55" viewBox="0 0 24 24"> |
| <path d="M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z"/> |
| </svg> |
| <h2>Course Information</h2> |
| </div> |
| <div class="form-grid grid-2"> |
| <div class="form-group"> |
| <label>Course Title *</label> |
| <input type="text" id="courseTitle" required placeholder="e.g., Artificial Intelligence"> |
| </div> |
| <div class="form-group"> |
| <label>Course Code *</label> |
| <input type="text" id="courseCode" required placeholder="e.g., CSE 366"> |
| </div> |
| <div class="form-group"> |
| <label>Instructor Name *</label> |
| <input type="text" id="teacherName" required placeholder="e.g., Dr. Sarah Johnson"> |
| </div> |
| <div class="form-group"> |
| <label>Designation</label> |
| <input type="text" id="teacherDesignation" placeholder="e.g., Associate Professor"> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="section report"> |
| <div class="section-header"> |
| <svg class="icon" fill="#48bb78" viewBox="0 0 24 24"> |
| <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/> |
| </svg> |
| <h2>Report Details</h2> |
| </div> |
| <div class="form-grid"> |
| <div class="form-grid grid-2"> |
| <div class="form-group"> |
| <label>Report Type *</label> |
| <select id="reportType"> |
| <option value="assignment">Assignment</option> |
| <option value="project">Project Report</option> |
| <option value="thesis">Thesis</option> |
| <option value="research">Research Paper</option> |
| <option value="case-study">Case Study</option> |
| <option value="lab-report">Lab Report</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Submission Date *</label> |
| <input type="date" id="submissionDate" required> |
| </div> |
| </div> |
| <div class="form-group"> |
| <label>Report Title *</label> |
| <input type="text" id="reportTitle" required placeholder="e.g., Deep Learning Applications in Medical Imaging"> |
| </div> |
| <div class="form-group"> |
| <label>Topic/Subject Area *</label> |
| <textarea id="topic" required placeholder="e.g., Analysis of convolutional neural networks for detecting lung cancer from CT scans"></textarea> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="section formatting"> |
| <div class="section-header"> |
| <svg class="icon" fill="#e53e3e" viewBox="0 0 24 24"> |
| <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> |
| </svg> |
| <h2>Document Settings</h2> |
| </div> |
| <div class="form-grid grid-3"> |
| <div class="form-group"> |
| <label>Font Family</label> |
| <select id="fontFamily"> |
| <option value="Times New Roman">Times New Roman</option> |
| <option value="Arial">Arial</option> |
| <option value="Calibri">Calibri</option> |
| <option value="Georgia">Georgia</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Font Size</label> |
| <select id="fontSize"> |
| <option value="11">11 pt</option> |
| <option value="12" selected>12 pt</option> |
| <option value="14">14 pt</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Line Spacing</label> |
| <select id="lineSpacing"> |
| <option value="1.0">Single</option> |
| <option value="1.5" selected>1.5 Lines</option> |
| <option value="2.0">Double</option> |
| </select> |
| </div> |
| </div> |
| <div class="checkbox-grid"> |
| <label class="checkbox-label"> |
| <input type="checkbox" id="includeAbstract" checked> |
| <span>Include Abstract</span> |
| </label> |
| <label class="checkbox-label"> |
| <input type="checkbox" id="includeTOC" checked> |
| <span>Table of Contents</span> |
| </label> |
| <label class="checkbox-label"> |
| <input type="checkbox" id="includeReferences" checked> |
| <span>References</span> |
| </label> |
| <label class="checkbox-label"> |
| <input type="checkbox" id="pageNumbers" checked> |
| <span>Page Numbers</span> |
| </label> |
| </div> |
| </div> |
|
|
| |
| <button type="submit" class="generate-btn" id="generateBtn"> |
| <svg class="icon" fill="white" viewBox="0 0 24 24"> |
| <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/> |
| </svg> |
| Generate Academic Report |
| </button> |
|
|
| |
| <div id="alertContainer"></div> |
| </form> |
|
|
| |
| <div class="footer"> |
| <p style="margin: 0 0 10px 0; font-size: 1.1em; font-weight: 600;"> |
| 🎓 Smart Academic Report Generator |
| </p> |
| <p style="margin: 0; font-size: 0.9em; opacity: 0.7;"> |
| Professional PhD-Level Reports • Auto Cover Page • Table of Contents • APA References |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('submissionDate').valueAsDate = new Date(); |
| |
| |
| document.getElementById('reportForm').addEventListener('submit', async function(e) { |
| e.preventDefault(); |
| |
| const generateBtn = document.getElementById('generateBtn'); |
| const alertContainer = document.getElementById('alertContainer'); |
| |
| |
| generateBtn.disabled = true; |
| generateBtn.innerHTML = ` |
| <svg class="icon spinner" fill="white" viewBox="0 0 24 24"> |
| <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/> |
| </svg> |
| Generating Your Professional Report... |
| `; |
| |
| |
| const formData = { |
| studentName: document.getElementById('studentName').value, |
| studentId: document.getElementById('studentId').value, |
| department: document.getElementById('department').value, |
| university: document.getElementById('university').value, |
| courseTitle: document.getElementById('courseTitle').value, |
| courseCode: document.getElementById('courseCode').value, |
| teacherName: document.getElementById('teacherName').value, |
| teacherDesignation: document.getElementById('teacherDesignation').value, |
| submissionDate: document.getElementById('submissionDate').value, |
| reportType: document.getElementById('reportType').value, |
| reportTitle: document.getElementById('reportTitle').value, |
| topic: document.getElementById('topic').value, |
| includeAbstract: document.getElementById('includeAbstract').checked, |
| includeTOC: document.getElementById('includeTOC').checked, |
| includeReferences: document.getElementById('includeReferences').checked, |
| pageNumbers: document.getElementById('pageNumbers').checked, |
| fontFamily: document.getElementById('fontFamily').value, |
| fontSize: document.getElementById('fontSize').value, |
| lineSpacing: document.getElementById('lineSpacing').value |
| }; |
| |
| |
| alertContainer.innerHTML = ` |
| <div class="alert success"> |
| <svg class="icon" fill="#2f855a" viewBox="0 0 24 24"> |
| <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> |
| </svg> |
| <div> |
| <strong style="font-size: 1.1em;">✨ Configuration Saved!</strong><br> |
| <small>To generate the actual DOCX file, please run:</small><br> |
| <code style="background: rgba(0,0,0,0.1); padding: 5px 10px; border-radius: 5px; display: inline-block; margin-top: 5px;"> |
| node generate-academic-report.js --config your-config.json |
| </code><br> |
| <small style="margin-top: 10px; display: block;"> |
| Your configuration has been prepared. Copy it to a JSON file and use the Node.js backend to generate the DOCX document. |
| </small> |
| </div> |
| </div> |
| `; |
| |
| |
| const configJson = JSON.stringify(formData, null, 2); |
| const blob = new Blob([configJson], { type: 'application/json' }); |
| const url = URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = 'academic-report-config.json'; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| URL.revokeObjectURL(url); |
| |
| |
| setTimeout(() => { |
| generateBtn.disabled = false; |
| generateBtn.innerHTML = ` |
| <svg class="icon" fill="white" viewBox="0 0 24 24"> |
| <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/> |
| </svg> |
| Generate Academic Report |
| `; |
| }, 2000); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
