-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
814 lines (797 loc) · 42.6 KB
/
index.html
File metadata and controls
814 lines (797 loc) · 42.6 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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Abyss Institute Online Learning System</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Inter", sans-serif;
background-color: #f0f9ff;
}
.chart-container {
position: relative;
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
height: 400px;
max-height: 50vh;
}
@media (min-width: 768px) {
.chart-container {
height: 500px;
}
}
.flowchart-node {
border: 2px solid #0a9396;
background-color: #e0fbfc;
color: #005f73;
padding: 1rem;
border-radius: 0.5rem;
text-align: center;
font-weight: 600;
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.flowchart-connector {
background-color: #0a9396;
position: absolute;
z-index: -1;
}
.timeline-item::before {
content: "";
position: absolute;
left: -2.75rem;
top: 50%;
transform: translateY(-50%);
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
background-color: #ee9b00;
border: 4px solid #f0f9ff;
}
</style>
</head>
<body class="text-gray-800">
<main class="container mx-auto p-4 md:p-8">
<header class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-black text-[#005F73] mb-2">
Digital Transformation Blueprint
</h1>
<p class="text-xl md:text-2xl font-semibold text-[#0A9396]">
A Bespoke Online Learning System for Abyss Institute of
Cosmetic Science
</p>
</header>
<section id="investment" class="mb-16">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-8">
The Core Investment at a Glance
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-lg text-center">
<h3 class="text-lg font-semibold text-[#CA6702] mb-2">
Total Development Cost
</h3>
<p class="text-4xl font-extrabold text-[#005F73]">
₹6 - ₹8 L
</p>
<p class="text-sm text-gray-500 mt-2">
A strategic investment in a custom, future-proof
platform.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center">
<h3 class="text-lg font-semibold text-[#CA6702] mb-2">
Projected Timeline
</h3>
<p class="text-4xl font-extrabold text-[#005F73]">
6-8 Months
</p>
<p class="text-sm text-gray-500 mt-2">
Phased rollout for efficient and timely delivery.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center">
<h3 class="text-lg font-semibold text-[#CA6702] mb-2">
Annual Operational Cost
</h3>
<p class="text-4xl font-extrabold text-[#005F73]">
₹1.5 L - ₹2 L
</p>
<p class="text-sm text-gray-500 mt-2">
For hosting, maintenance, and continuous
improvement.
</p>
</div>
</div>
</section>
<section id="cost-breakdown" class="mb-16">
<div class="bg-white p-6 rounded-lg shadow-lg">
<h2
class="text-3xl font-bold text-center text-[#005F73] mb-2"
>
Development Investment Breakdown
</h2>
<p class="text-center text-gray-600 mb-8">
This chart visualizes the estimated allocation of the
development budget across key project phases,
highlighting the focus on robust application and backend
development.
</p>
<div class="chart-container">
<canvas id="costBreakdownChart"></canvas>
</div>
</div>
</section>
<section id="timeline" class="mb-16">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-12">
Phased Project Rollout Timeline
</h2>
<div class="relative max-w-3xl mx-auto">
<div
class="absolute left-5 top-0 h-full w-1 bg-[#94D2BD] rounded"
></div>
<div class="space-y-12 pl-20">
<div class="relative timeline-item">
<h3 class="text-xl font-bold text-[#005F73]">
Phase 1: Discovery & Planning
</h3>
<p class="font-semibold text-[#CA6702]">
Duration: 0.5-1 Months
</p>
<p class="text-gray-600">
In-depth analysis of requirements, stakeholder
interviews, and creation of the project
blueprint and technical specifications.
</p>
</div>
<div class="relative timeline-item">
<h3 class="text-xl font-bold text-[#005F73]">
Phase 2: UI/UX Design & Prototyping
</h3>
<p class="font-semibold text-[#CA6702]">
Duration: 0.5-1 Months
</p>
<p class="text-gray-600">
Crafting intuitive user flows, wireframes, and
interactive prototypes for the mobile apps and
web dashboard.
</p>
</div>
<div class="relative timeline-item">
<h3 class="text-xl font-bold text-[#005F73]">
Phase 3: Core Development
</h3>
<p class="font-semibold text-[#CA6702]">
Duration: 4-5 Months
</p>
<p class="text-gray-600">
Building the backend infrastructure, APIs,
Flutter mobile applications, and the web-based
administrative dashboard.
</p>
</div>
<div class="relative timeline-item">
<h3 class="text-xl font-bold text-[#005F73]">
Phase 4: Testing & QA
</h3>
<p class="font-semibold text-[#CA6702]">
Duration: 0.5-1 Months
</p>
<p class="text-gray-600">
Rigorous testing for functionality, performance,
security, and compatibility across all devices
and platforms.
</p>
</div>
<div class="relative timeline-item">
<h3 class="text-xl font-bold text-[#005F73]">
Phase 5: Deployment & Launch
</h3>
<p class="font-semibold text-[#CA6702]">
Duration: 0.5-1 Month
</p>
<p class="text-gray-600">
Final server configuration, deployment to app
stores, and official launch of the live
platform.
</p>
</div>
</div>
</div>
</section>
<section id="architecture" class="mb-16">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-2">
Integrated System Architecture
</h2>
<p class="text-center text-gray-600 mb-12">
The system is built on a dual-platform architecture: a
central admin dashboard providing oversight and a versatile
mobile app serving all user groups.
</p>
<div class="relative max-w-4xl mx-auto p-8">
<div class="flex flex-col items-center">
<div class="flowchart-node w-full md:w-1/2">
Web-Based Admin Dashboard
</div>
<div
class="flowchart-connector"
style="
width: 2px;
height: 50px;
top: 100px;
left: 50%;
"
></div>
<div class="relative mt-20 w-full">
<div
class="flowchart-connector"
style="
width: 2px;
height: 50px;
top: -50px;
left: 50%;
"
></div>
<div
class="flowchart-connector"
style="
height: 2px;
width: 60%;
top: -50px;
left: 20%;
"
></div>
<div class="flex justify-center items-center mb-8">
<div class="flowchart-node w-full md:w-1/2">
Integrated Flutter Mobile App
</div>
</div>
<div
class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12 relative"
>
<div
class="flowchart-connector"
style="
width: 2px;
height: 30px;
top: -30px;
left: 16.66%;
"
></div>
<div
class="flowchart-connector"
style="
width: 2px;
height: 30px;
top: -30px;
left: 50%;
"
></div>
<div
class="flowchart-connector"
style="
width: 2px;
height: 30px;
top: -30px;
left: 83.33%;
"
></div>
<div class="flowchart-node">Students</div>
<div class="flowchart-node">Instructors</div>
<div class="flowchart-node">Parents</div>
</div>
</div>
</div>
</div>
</section>
<section id="features" class="mb-16">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-12">
Core Features Tailored by Role
</h2>
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold text-[#005F73] mb-4">
<span class="mr-2">🎓</span> Student
</h3>
<ul
class="space-y-2 text-gray-700 list-disc list-inside"
>
<li>Personalized Learning Paths</li>
<li>
Content Access (videos, PDFs, interactive
modules)
</li>
<li>Live Lecture Participation</li>
<li>Multimedia Assignment Submission</li>
<li>Real-time Progress Tracking</li>
<li>Communication Tools</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold text-[#005F73] mb-4">
<span class="mr-2">👨🏫</span> Instructor
</h3>
<ul
class="space-y-2 text-gray-700 list-disc list-inside"
>
<li>Course & Content Management</li>
<li>
Live Lecture Scheduling & delivery (with
recording options)
</li>
<li>Advanced Assignment Grading</li>
<li>Small Group Management Tools</li>
<li>Student Progress Monitoring</li>
<li>Communication Tools</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold text-[#005F73] mb-4">
<span class="mr-2">⚙️</span> Admin
</h3>
<ul
class="space-y-2 text-gray-700 list-disc list-inside"
>
<li>Comprehensive Reporting & Analytics</li>
<li>Course Tracking</li>
<li>Teacher Hours Monitoring</li>
<li>User & Role Management</li>
<li>Student Performance and Learning Analytics</li>
<li>Fees Collection and Accouting</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold text-[#005F73] mb-4">
<span class="mr-2">👨👩👧</span> Parent
</h3>
<ul
class="space-y-2 text-gray-700 list-disc list-inside"
>
<li>Secure Portal Access</li>
<li>Live Attendance Tracking</li>
<li>Syllabus Completion View</li>
<li>Student Performance Reports</li>
</ul>
</div>
</div>
</section>
<section id="benefits" class="mb-16">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-12">
Strategic Advantages for the Institute
</h2>
<div
class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"
>
<div
class="bg-white p-6 rounded-lg shadow-lg flex items-center"
>
<span class="text-4xl mr-4">🚀</span>
<div>
<h3 class="text-xl font-bold text-[#005F73]">
Enhanced Engagement
</h3>
<p class="text-gray-600">
Personalized learning and interactive tools
boost student motivation and outcomes.
</p>
</div>
</div>
<div
class="bg-white p-6 rounded-lg shadow-lg flex items-center"
>
<span class="text-4xl mr-4">📈</span>
<div>
<h3 class="text-xl font-bold text-[#005F73]">
Operational Efficiency
</h3>
<p class="text-gray-600">
Automation of administrative tasks frees up
valuable staff and instructor time.
</p>
</div>
</div>
<div
class="bg-white p-6 rounded-lg shadow-lg flex items-center"
>
<span class="text-4xl mr-4">💬</span>
<div>
<h3 class="text-xl font-bold text-[#005F73]">
Transparent Communication
</h3>
<p class="text-gray-600">
The parent portal fosters a strong, supportive
home-school partnership.
</p>
</div>
</div>
<div
class="bg-white p-6 rounded-lg shadow-lg flex items-center"
>
<span class="text-4xl mr-4">🏆</span>
<div>
<h3 class="text-xl font-bold text-[#005F73]">
Competitive Edge
</h3>
<p class="text-gray-600">
A cutting-edge platform positions the institute
as an innovative market leader.
</p>
</div>
</div>
</div>
</section>
<section id="lms-advantages" class="mb-16">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-12">
Why a Custom LMS is the Superior Choice
</h2>
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
Absolute Customization & Control
</h3>
<p class="text-gray-600">
Unlike generic systems, a custom LMS is designed to
perfectly match Abyss Institute's unique pedagogical
model, supporting its hands-on approach and small
student-to-teacher ratio from the ground up. You
retain complete ownership and control over all
student data, ensuring the highest level of privacy
and security.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
Future-Proof Scalability
</h3>
<p class="text-gray-600">
The platform can evolve with the institute’s future
needs, allowing for new features and capabilities to
be added as the institute grows. You are not limited
by a vendor’s product roadmap, guaranteeing
long-term relevance and adaptability.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
Long-Term Cost-Effectiveness
</h3>
<p class="text-gray-600">
While the upfront cost is a strategic investment, a
custom LMS eliminates recurring per-user licensing
fees and unnecessary features. It proves to be
significantly more cost-effective as your student
body expands, saving money that would otherwise go
to third-party vendors.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
Seamless Integration
</h3>
<p class="text-gray-600">
A bespoke solution can be seamlessly integrated with
the institute's existing student management,
payment, and marketing systems. This avoids the
clunky workarounds often required by pre-built
platforms and centralizes all data for efficient
management.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
Enhanced Operational Efficiency
</h3>
<p class="text-gray-600">
The system provides detailed reports and analytics
on learner progress and course completion,
automating administrative tasks and freeing up
valuable staff and instructor time for more
impactful activities.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">Superior Technical Support</h3>
<p class="text-gray-600">A custom-built solution means you receive dedicated, expert support from the team that knows the system inside and out. This guarantees faster resolutions and a more personalized service than relying on generic support from a large vendor.</p>
</div
</div>
</section>
<section id="student-gain" class="mb-16">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-12">
How a Custom Platform Drives Student Enrollment
</h2>
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
A Unique, Branded Experience
</h3>
<p class="text-gray-600">
An LMS that is fully branded and designed to reflect
the institute's values provides a professional,
exclusive experience that stands out from
competitors using generic, off-the-shelf software.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
Purpose-Built Interactive Learning
</h3>
<p class="text-gray-600">
We can build interactive tools specifically for your
curriculum, such as virtual labs, 3D simulations of
skin anatomy, or augmented reality modules, making
learning more immersive and exciting for students.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
Simplified, Frictionless Journey
</h3>
<p class="text-gray-600">
A custom-designed user interface will be intuitive
for both students and parents, streamlining
everything from course enrollment to progress
tracking. This creates a frictionless and positive
user experience that encourages more students to
join and stay active.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
Building Trust with Parent Portals
</h3>
<p class="text-gray-600">
Build trust and reputation with dedicated parent
portals that offer detailed, real-time insights into
student performance and attendance. This fosters
strong communication and accountability, making
parents confident in their choice of institute.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">
Valuable, Verifiable Certifications
</h3>
<p class="text-gray-600">
The custom platform can issue unique digital
certificates with verifiable credentials and the
institute's branding. Providing these recognized
qualifications boosts the credibility of your
courses, attracting students seeking to advance
their careers.
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-[#005F73] mb-2">Enhanced Community & Collaboration</h3>
<p class="text-gray-600">The platform can feature dedicated spaces for students to connect with peers and instructors through forums, group projects, and messaging. This strong sense of community can improve student satisfaction and act as a powerful draw for prospective students.</p>
</div>
</div>
</section>
<section id="user-flow" class="mb-16 text-center">
<h2 class="text-3xl font-bold text-[#005F73] mb-4">View User Flow Diagram</h2>
<p class="text-gray-600 mb-8 max-w-2xl mx-auto">This diagram illustrates the step-by-step user journey, from initial login to key interactions within the platform, for each user role.</p>
<a href="flow.svg" target="_blank" class="inline-block bg-orange-500 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:bg-orange-600 transition-colors duration-300">
Show User Flow Diagram
</a>
</section>
<section id="operational-cost-breakdown" class="mb-16">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-8">Annual Operational Cost Breakdown</h2>
<div class="bg-white p-6 rounded-lg shadow-lg">
<p class="text-center text-gray-600 mb-8">These costs cover the essential services required to maintain and scale the platform after launch, ensuring seamless operation and continuous improvement.</p>
<div class="chart-container mb-8">
<canvas id="operationalCostChart"></canvas>
</div>
<ul class="text-lg text-gray-700 space-y-2 max-w-2xl mx-auto list-disc list-inside">
<li><strong>Cloud Hosting & Infrastructure:</strong> Costs for servers, databases, and network resources to host the application and its data.</li>
<li><strong>Ongoing Maintenance & Updates:</strong> Regular security patches, bug fixes, and minor feature updates to keep the platform secure and efficient.</li>
<li><strong>Customer & Technical Support:</strong> Dedicated support for administrators, instructors, and students for any platform-related issues.</li>
<li><strong>API & Service Subscriptions:</strong> Costs for third-party services like payment gateways, live lecture tools, or other integrated APIs.</li>
<li><strong>Software Licenses:</strong> Licenses for specialized software and development tools used for platform maintenance.</li>
</ul>
</div>
</section>
<section id="app-preview" class="mb-16 text-center">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-8">Sneak Peek: Figma App Screenshots</h2>
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Get a glimpse of the clean, modern, and user-friendly design of the proposed mobile app, crafted for an exceptional user experience.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="flex flex-col items-center">
<h3 class="font-bold text-lg text-gray-700 mb-2">App Launch Splash Screen</h3>
<img src="splash.png" alt="Parent Portal Figma Preview" class="rounded-lg shadow-lg">
</div>
<div class="flex flex-col items-center">
<h3 class="font-bold text-lg text-gray-700 mb-2">Student Dashboard</h3>
<img src="Student.jpg" alt="Student Dashboard Figma Preview" class="rounded-lg shadow-lg">
</div>
<div class="flex flex-col items-center">
<h3 class="font-bold text-lg text-gray-700 mb-2">Lecture View</h3>
<img src="Student-1.jpg" alt="Instructor View Figma Preview" class="rounded-lg shadow-lg">
</div>
</div>
</section>
<section id="about-us" class="mb-16">
<h2 class="text-3xl font-bold text-center text-[#005F73] mb-8">Why Partner with TachyonByte Technologies?</h2>
<div class="bg-white p-8 rounded-lg shadow-lg">
<p class="text-lg text-gray-700 leading-relaxed mb-4">
At <strong>TachyonByte Technologies</strong>, we specialize in building bespoke, high-performance digital solutions that drive real-world results. Our team of experienced developers, designers, and strategists are committed to understanding your unique needs and translating them into a platform that not only meets but exceeds your expectations. We prioritize agile development methodologies, transparent communication, and a partnership-first approach to ensure your vision is brought to life flawlessly. By choosing us, you are investing in a dedicated team that is committed to your long-term success, guaranteeing a robust, scalable, and secure platform that will empower Abyss Institute for years to come.
</p>
<p class="text-lg text-gray-700 leading-relaxed">
Our track record of delivering complex, tailored solutions for clients in various sectors is a testament to our expertise. We don't just build software; we engineer transformative experiences that enhance operational efficiency, foster user engagement, and create a powerful competitive advantage. Partner with TachyonByte, and let's build the future of education together.
</p>
</div>
</section>
</main>
<footer class="text-center p-6 bg-[#005F73] text-white mt-8 columns-3">
<div class="col">For Abyss Institute of Cosmetic Science</div>
<p>Private and Confidential</p>
<div class="col">By TachyonByte Technologies Pvt Ltd</div>
</footer>
<script>
document.addEventListener("DOMContentLoaded", () => {
const wrapLabel = (label) => {
if (label.length <= 16) {
return label;
}
const words = label.split(" ");
const lines = [];
let currentLine = "";
for (const word of words) {
if ((currentLine + word).length > 16) {
lines.push(currentLine.trim());
currentLine = "";
}
currentLine += word + " ";
}
lines.push(currentLine.trim());
return lines.filter((line) => line);
};
const costBreakdownCtx = document
.getElementById("costBreakdownChart")
.getContext("2d");
const costData = {
labels: [
"UI/UX Design",
"Mobile App Development (Flutter)",
"Admin Dashboard Development (Web)",
"Backend Development & APIs",
"Integrations (Payment, Live, etc.)",
"Testing, PM, & Security",
].map(wrapLabel),
datasets: [
{
label: "Estimated Cost (in Lakh INR)",
data: [0.5, 2, 1.5, 1.5, 0.7, 0.5],
backgroundColor: [
"#0A9396",
"#94D2BD",
"#E9D8A6",
"#EE9B00",
"#CA6702",
"#BB3E03",
],
borderColor: "#FFFFFF",
borderWidth: 2,
},
],
};
new Chart(costBreakdownCtx, {
type: "bar",
data: costData,
options: {
indexAxis: "y",
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
beginAtZero: true,
title: {
display: true,
text: "Average Estimated Cost (Lakh INR)",
font: {
size: 14,
weight: "bold",
},
color: "#005F73",
},
},
y: {
ticks: {
color: "#005F73",
font: {
weight: "600",
},
},
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
callbacks: {
title: function (tooltipItems) {
const item = tooltipItems[0];
let label =
item.chart.data.labels[
item.dataIndex
];
if (Array.isArray(label)) {
return label.join(" ");
} else {
return label;
}
},
},
},
},
},
});
const operationalCostCtx = document.getElementById('operationalCostChart').getContext('2d');
const operationalCostData = {
labels: ['Cloud Hosting', 'Maintenance', 'Support', 'Third-Party Services', 'Software Licenses'],
datasets: [{
label: 'Estimated Annual Cost (Lakh INR)',
data: [8, 12, 6, 4, 3],
backgroundColor: [
'#0A9396',
'#94D2BD',
'#E9D8A6',
'#EE9B00',
'#CA6702'
],
hoverOffset: 4
}]
};
new Chart(operationalCostCtx, {
type: 'doughnut',
data: operationalCostData,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#005F73',
font: {
size: 14,
weight: 'bold'
}
}
},
tooltip: {
callbacks: {
label: function(context) {
let label = context.label || '';
if (label) {
label += ': ';
}
if (context.parsed) {
label += context.parsed + ' L';
}
return label;
}
}
}
}
}
});
});
</script>
</body>
</html>