LogAnalyzer/history.html at main · Harsh-pa-thak/LogAnalyzer · 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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LogAI — Analysis History</title>
    <meta name="description" content="View your past log analysis reports on LogAI.">

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg">

    <!-- Fonts -->
    <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:ital,opsz,wght@0,14..32,300..700;1,14..32,300..700&family=JetBrains+Mono:wght@400;500&display=swap"
        rel="stylesheet">

    <!-- Anti-FOUC: apply saved theme instantly before any paint -->
    <script>
        document.documentElement.setAttribute(
            'data-theme',
            localStorage.getItem('logai_theme') || 'dark'
        );
    </script>

    <!-- Base styles -->
    <link rel="stylesheet" href="style.css">
    <!-- Page-specific styles -->
    <link rel="stylesheet" href="css/history.css">

    <!-- Markdown + Syntax highlight -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>

<body>

    <!-- ── APP LOADER ─────────────────────────────────────────────────── -->
    <div id="appLoader">
        <div class="loader-content">
            <div class="loader-logo-ring"></div>
            <h2>Loading History…</h2>
        </div>
    </div>

    <!-- ── HISTORY PAGE ───────────────────────────────────────────────── -->
    <div id="historyPage" class="hidden">
        <div class="app-container">

            <!-- ── SIDEBAR ────────────────────────────────────────────── -->
            <aside class="sidebar">
                <div class="brand">
                    <div class="logo-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                            <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <h1>LogAI</h1>
                </div>

                <nav>
                    <a href="index.html" id="navDashboard"><span>Dashboard</span></a>
                    <a href="history.html" class="active" id="navHistory"><span>History</span></a>
                    <a href="settings.html" id="navSettings"><span>Settings</span></a>
                </nav>


            </aside>

            <!-- ── MAIN CONTENT ────────────────────────────────────────── -->
            <main class="main-content">
                <header class="top-bar">
                    <h2>Analysis History</h2>
                    <div class="user-profile" id="userProfile">
                        <span id="userEmail" class="user-email-text"></span>
                        <div class="avatar" id="userAvatar" role="button" aria-label="User menu">AU</div>
                        <div class="user-dropdown" id="userDropdown">
                            <button class="dropdown-item" id="logoutBtn">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    <polyline points="16 17 21 12 16 7" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    <line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                Sign out
                            </button>
                        </div>
                    </div>
                </header>

                <div class="content-wrapper">
                    <section class="history-section">
                        <div class="card history-card">
                            <div class="card-header">
                                <h3>Analysis History</h3>
                                <span class="history-count" id="historyCount"></span>
                            </div>
                            <div class="card-body history-body">
                                <input type="text" class="history-search" id="historySearch"
                                    placeholder="🔍  Search by filename…">

                                <!-- Loading skeleton -->
                                <div id="historySkeleton">
                                    <div class="history-skeleton-item"></div>
                                    <div class="history-skeleton-item"></div>
                                    <div class="history-skeleton-item"></div>
                                </div>

                                <!-- Empty state -->
                                <div id="historyEmpty" class="history-empty hidden">
                                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
                                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <polyline points="14 2 14 8 20 8" stroke="currentColor" stroke-width="1.5"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <p>No analyses yet.</p>
                                    <span>Run your first log analysis to see it here.</span>
                                </div>

                                <!-- History list -->
                                <div id="historyList" class="history-list"></div>
                            </div>
                        </div>
                    </section>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script src="settings.js"></script>
    <script src="history.js"></script>
</body>

</html>