-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
211 lines (196 loc) · 12.9 KB
/
Copy pathindex.html
File metadata and controls
211 lines (196 loc) · 12.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Engineering Admission Assistant | Professional AI Guidance</title>
<meta name="description"
content="Get professional AI assistance for engineering college admissions and B.Tech specializations.">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="app-container">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<div class="logo-area">
<h1 style="display: flex; align-items: center; gap: 0.5rem;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--accent-primary);"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
ENGG.ADMIT
</h1>
</div>
<nav style="margin-top: 2.5rem; flex: 1; display: flex; flex-direction: column;">
<div class="nav-group">
<p style="color: var(--text-muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; padding-left: 1rem;">
Navigation</p>
<ul class="nav-links">
<li><a href="#" id="nav-chat" class="nav-link active">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
Chat Assistant
</a></li>
<li><a href="#" id="nav-courses" class="nav-link">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
Available Courses
</a></li>
<li><a href="#" id="nav-scholarships" class="nav-link">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>
Scholarships
</a></li>
<li><a href="#" id="nav-journey" class="nav-link">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
Admission & Training
</a></li>
<li><a href="#" id="nav-docs" class="nav-link">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Required Documents
</a></li>
</ul>
</div>
<div class="nav-group" style="margin-top: 2.5rem;">
<p style="color: var(--text-muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; padding-left: 1rem;">
Demo Scenarios</p>
<ul class="scenario-list">
<li onclick="document.getElementById('user-input').value='Tell me about B.Tech'; handleSend()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="scenario-icon"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<span>"Tell me about B.Tech"</span>
</li>
<li onclick="document.getElementById('user-input').value='What about Placements?'; handleSend()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="scenario-icon"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<span>"What about Placements?"</span>
</li>
<li onclick="document.getElementById('user-input').value='Is there any Ragging?'; handleSend()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="scenario-icon"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<span>"Is there any Ragging?"</span>
</li>
<li onclick="document.getElementById('user-input').value='Tell me the Fees'; handleSend()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="scenario-icon"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<span>"Tell me the Fees"</span>
</li>
</ul>
</div>
</nav>
<div class="sidebar-footer">
<button class="helpdesk-btn" onclick="assistant.showDetails('support')">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
Contact Helpdesk
</button>
<div class="system-tag">Admissions Phase</div>
</div>
</aside>
<!-- Main Workspace -->
<main class="main-content">
<!-- News Ticker -->
<div class="news-ticker">
<div class="ticker-content" id="ticker-content">
<!-- Populated via JS -->
</div>
</div>
<header class="header">
<div class="status-indicator">
<span class="pulse"
style="display: inline-block; width: 8px; height: 8px; background: var(--accent-primary); border-radius: 50%; margin-right: 0.5rem;box-shadow: 0 0 10px var(--accent-primary);"></span>
<span>System Status: <strong style="color: var(--accent-primary);">Online</strong></span>
</div>
<div class="user-greeting">
<span>Welcome back, <strong id="display-name"
style="color: var(--accent-secondary);">Student</strong></span>
</div>
</header>
<!-- Chat View -->
<div id="chat-view" class="view-container">
<div class="chat-window" id="chat-window">
<!-- Welcome Message -->
<div class="message ai">
Hello! I am your <strong>Professional AI College Admission Support Assistant</strong>.
🎓<br><br>
I can help you with course information, eligibility, fee structures, and personalized
recommendations.<br><br>
To get started, could you please tell me about your <strong>12th stream</strong>, your
<strong>percentage</strong>, and your <strong>career goals</strong>?
</div>
</div>
<!-- Input Area pinned to Chat View -->
<div class="input-area">
<div class="input-wrapper">
<input type="text" id="user-input" placeholder="Type your message here..." autocomplete="off">
<button class="send-btn" id="send-btn">Send</button>
</div>
</div>
</div>
<!-- Dashboard View -->
<div id="dashboard-view" class="view-container view-hidden">
<!-- Section: Available Courses -->
<div id="section-courses" class="dashboard-section">
<h2 class="section-title">Available B.Tech Specializations</h2>
<div id="course-grid" class="course-grid">
<!-- Dynamic Course Cards -->
</div>
</div>
<!-- Section: Scholarships -->
<div id="section-scholarships" class="dashboard-section view-hidden">
<h2 class="section-title">Scholarships & Merit Awards</h2>
<div id="scholarship-grid" class="scholarship-grid">
<!-- Dynamic Scholarship Cards -->
</div>
</div>
<!-- Section: Admission & Training -->
<div id="section-admission" class="dashboard-section view-hidden">
<h2 class="section-title">Admission Process & Training</h2>
<div class="admission-content">
<div class="timeline-container">
<div class="vertical-timeline" id="admission-timeline">
<!-- Dynamic Timeline Steps -->
</div>
</div>
<div class="training-info">
<h3>Training & Placement Support</h3>
<ul id="training-list" class="professional-list">
<!-- Dynamic Training List -->
</ul>
</div>
</div>
</div>
<!-- Section: Required Documents -->
<div id="section-docs" class="dashboard-section view-hidden">
<h2 class="section-title">Required Documents Checklist</h2>
<div class="docs-container">
<div id="document-checklist" class="professional-checklist">
<!-- Dynamic Document Items -->
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Application Modal -->
<div class="modal-overlay" id="app-modal">
<div class="modal-content">
<h2 style="margin-bottom: 1.5rem; color: var(--accent-secondary);">Apply for Admission 2026</h2>
<form id="admission-form">
<div class="form-group">
<label>Full Name</label>
<input type="text" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label>B.Tech Specialization</label>
<select id="spec-select" required>
<!-- Populated via JS -->
</select>
</div>
<div class="form-group">
<label>12th Percentage (%)</label>
<input type="number" step="0.1" placeholder="e.g. 85.5" required>
</div>
<div style="display: flex; gap: 1rem; margin-top: 2rem;">
<button type="submit" class="send-btn" style="flex: 1;">Submit Application</button>
<button type="button" class="send-btn" id="close-modal"
style="background: var(--chat-bubble-ai); flex: 1;">Cancel</button>
</div>
</form>
</div>
</div>
<div class="toast-container" id="toast-container"></div>
<script src="data.js"></script>
<script src="config.js"></script>
<script src="app.js"></script>
</body>
</html>