PathAI-Smart-Roadmap-Generator/PathAI-Agent.html at main · Abhay-Sharma-coder/PathAI-Smart-Roadmap-Generator · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PathAI Pro | CTAE Hackathon Edition</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

</head>

<body class="min-h-screen p-4 flex flex-col items-center pb-24">

    <div class="max-w-3xl w-full glass-card rounded-3xl p-8 shadow-2xl mt-10 border border-purple-500/20">
        <header class="text-center mb-8">
            <h1 class="text-5xl font-extrabold gradient-text mb-2 tracking-tighter">PathAI Agent</h1>
            <p class="text-gray-400 text-sm font-medium tracking-wide uppercase">Advanced Learning Management System</p>
        </header>

        <div class="space-y-4 mb-8">
            <div class="flex gap-3">
                <input type="text" id="userPrompt" placeholder="What do you want to master today?" class="flex-grow p-4 rounded-2xl bg-gray-900 border border-gray-700 outline-none focus:border-purple-500 transition-all text-white placeholder-gray-500">
                <button onclick="clearData()" title="Reset Roadmap" class="px-5 bg-gray-800 rounded-2xl hover:bg-red-900/40 border border-gray-700 transition-all group">
                    <i class="fas fa-undo-alt text-gray-400 group-hover:text-red-400"></i>
                </button>
            </div>
            <button id="buildBtn" onclick="generatePath()" class="w-full py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl font-black text-lg hover:shadow-[0_0_20px_rgba(168,85,247,0.4)] transition-all flex items-center justify-center gap-3">
                <i class="fas fa-brain"></i> GENERATE SMART ROADMAP
            </button>
        </div>

        <div id="progressSection" class="hidden mb-10 p-6 bg-gray-900/60 rounded-3xl border border-gray-800 shadow-inner">
            <div class="flex justify-between items-end mb-3">
                <div>
                    <p class="text-[10px] font-black text-indigo-400 tracking-[0.2em] mb-1">CURRENT STATUS</p>
                    <h3 class="text-xl font-bold text-white" id="progressText">0% Completed</h3>
                </div>
                <i class="fas fa-chart-line text-indigo-500 text-xl"></i>
            </div>
            <div class="progress-container">
                <div id="progressBar"></div>
            </div>
        </div>

        <div id="loader" class="hidden text-center py-10">
            <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500 mb-4"></div>
            <p class="text-purple-400 font-bold animate-pulse">AI Agent is performing deep research... 🚀</p>
        </div>

        <div id="resultArea" class="hidden">
            <div id="downloadSection" class="rounded-3xl overflow-hidden">
                <div class="flex justify-between items-center mb-6 px-2">
                    <span class="text-xs font-black text-green-400 bg-green-400/10 px-3 py-1 rounded-full border border-green-400/20">
                        <i class="fas fa-check-double mr-2"></i> ROADMAP GENERATED
                    </span>
                    <button onclick="downloadPDF()" class="bg-indigo-600 hover:bg-indigo-700 px-5 py-2 rounded-xl text-xs font-black transition-all flex items-center gap-2">
                        <i class="fas fa-file-export"></i> PDF EXPORT
                    </button>
                </div>
                <div id="roadmapDisplay" class="space-y-6"></div>
            </div>
        </div>
    </div>

    <button onclick="toggleChat()" class="fixed bottom-8 right-8 w-16 h-16 bg-purple-600 rounded-full shadow-[0_10px_30px_rgba(0,0,0,0.5)] flex items-center justify-center text-2xl z-50 hover:scale-110 transition-all border-4 border-gray-900">
        <i class="fas fa-robot text-white"></i>
    </button>
    <div id="chatWindow" class="glass-card rounded-3xl p-5 shadow-2xl flex flex-col border border-purple-500/30 overflow-hidden" style="position: fixed; bottom: 100px; right: 20px; width: 340px; height: 480px; display: none; z-index: 100;">
        <div class="flex justify-between items-center mb-4 border-b border-gray-800 pb-3">
            <div class="flex items-center gap-2">
                <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                <span class="font-black text-sm text-purple-400 tracking-tighter">AI MENTOR LIVE</span>
            </div>
            <button onclick="toggleChat()" class="text-gray-500 hover:text-white"><i class="fas fa-times"></i></button>
        </div>
        <div id="chatBox" class="flex-grow overflow-y-auto mb-4 text-xs space-y-4 p-3 bg-gray-950/40 rounded-2xl custom-scrollbar">
            <div class="p-3 bg-gray-800/80 rounded-2xl text-indigo-200 border border-indigo-500/10">👋 Hello! I am your PathAI mentor. Start your journey and ask me any doubts!</div>
        </div>
        <div class="flex gap-2">
            <input type="text" id="chatInput" placeholder="Ask anything about the roadmap..." class="flex-grow p-4 rounded-2xl bg-gray-800 text-xs outline-none border border-gray-700 focus:border-purple-500">
            <button onclick="askDoubt()" class="bg-purple-600 px-5 rounded-2xl hover:bg-purple-700 transition-colors"><i class="fas fa-paper-plane text-white"></i></button>
        </div>
    </div>
</body>

</html>