KernelBot/src/dashboard/database.html at main · KernelCode/KernelBot · GitHub

153 lines (140 loc) · 6.59 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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>KERNEL // Database Explorer</title>

<link rel="stylesheet" href="shared.css">

<link rel="stylesheet" href="database.css">

</head>

<body>

<canvas id="particle-canvas"></canvas>

<div class="scanlines"></div>

<nav class="sidebar">

<div class="sidebar-logo">

<svg viewBox="0 0 32 32" shape-rendering="crispEdges">

<path fill="rgba(57,255,20,0.35)" d="M10,2h10v2h-10z M8,4h2v2h-2z M6,6h2v4h-2z M4,10h2v8h-2z M6,18h2v2h-2z M8,20h2v2h-2z M10,22h14v2h-14z M24,18h2v4h-2z M26,8h2v10h-2z M24,6h2v2h-2z"/>

<path fill="rgba(57,255,20,0.6)" d="M12,8h8v2h-8z M10,10h2v10h-2z M20,10h2v6h-2z M18,18h2v2h-2z M12,20h6v2h-6z"/>

<path fill="#39ff14" d="M14,14h4v2h-2v2h-2z"/>

</svg>

</div>

<div class="sidebar-nav">

<a class="nav-item" href="/" title="Dashboard">

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>

<span class="nav-label">DASH</span>

</a>

<a class="nav-item" href="/agents.html" title="Agents">

<svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="3"/><circle cx="5" cy="19" r="3"/><circle cx="19" cy="19" r="3"/><path d="M12 8v4M7.5 17.2l3-4.2M16.5 17.2l-3-4.2"/></svg>

<span class="nav-label">AGENTS</span>

</a>

<a class="nav-item" href="/onboarding.html" title="Onboarding">

<svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>

<span class="nav-label">ONBOARD</span>

</a>

<a class="nav-item active" href="/database.html" title="Database">

<svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>

<span class="nav-label">DB</span>

</a>

<a class="nav-item" href="/chat.html" title="Chat">

<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>

<span class="nav-label">CHAT</span>

</a>

</div>

<div class="sidebar-gauges">

<div class="mini-gauge" id="sb-cpu">

<svg viewBox="0 0 38 38"><circle class="track" cx="19" cy="19" r="16"/><circle class="fill" cx="19" cy="19" r="16" stroke-dasharray="100.5" stroke-dashoffset="100.5"/></svg>

<div class="mini-gauge-label"><span class="val">--%</span><span class="lbl">CPU</span></div>

</div>

<div class="mini-gauge" id="sb-ram">

<svg viewBox="0 0 38 38"><circle class="track" cx="19" cy="19" r="16"/><circle class="fill" cx="19" cy="19" r="16" stroke-dasharray="100.5" stroke-dashoffset="100.5"/></svg>

<div class="mini-gauge-label"><span class="val">--%</span><span class="lbl">RAM</span></div>

</div>

<div class="sidebar-conn connected" id="conn-dot"></div>

</div>

</nav>

<header class="top-bar">

<div class="top-bar-left">

<span class="top-bar-title">KernelBot</span>

<span class="top-bar-sep">//</span>

<span class="top-bar-nav">

<a class="top-bar-nav-item" href="/">DASHBOARD</a>

<a class="top-bar-nav-item" href="/agents.html">AGENTS</a>

<a class="top-bar-nav-item" href="/onboarding.html">ONBOARDING</a>

<a class="top-bar-nav-item active" href="/database.html">DATABASE</a>

<a class="top-bar-nav-item" href="/chat.html">CHAT</a>

</span>

</div>

<div class="top-bar-right">

<span class="top-bar-conn" id="top-conn"></span>

<span><span class="val" id="hdr-status">ONLINE</span></span>

<span class="sep">//</span>

<span>UP <span class="val" id="hdr-uptime">--</span></span>

<span class="sep">//</span>

<span class="val" id="hdr-clock">--</span>

</div>

</header>

<div class="main db-main">

<div class="db-toolbar-bar">

<div class="db-toolbar-left">

<select class="db-table-select" id="table-select">

<option value="">-- SELECT TABLE --</option>

</select>

<input type="text" class="db-search" id="db-search" placeholder="Search rows..." />

</div>

<div class="db-toolbar-right">

<button class="db-action-btn download" id="btn-download" title="Download brain.sqlite">

<svg viewBox="0 0 24 24" width="14" height="14"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

DOWNLOAD

</button>

<button class="db-action-btn upload" id="btn-upload" title="Upload brain.sqlite">

<svg viewBox="0 0 24 24" width="14" height="14"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

UPLOAD

</button>

<input type="file" id="file-upload" accept=".sqlite,.db,.sqlite3" style="display:none" />

</div>

</div>

<div class="db-info-bar" id="db-info-bar">

<span class="db-info-text" id="db-info"></span>

<div class="db-pager">

<label class="db-per-page-label">ROWS:

<select class="db-per-page" id="per-page">

<option value="25">25</option>

<option value="50" selected>50</option>

<option value="100">100</option>

</select>

</label>

<button class="db-btn" id="btn-prev" disabled>PREV</button>

<span class="db-page" id="db-page">--</span>

<button class="db-btn" id="btn-next" disabled>NEXT</button>

</div>

</div>

<div class="db-grid-wrap" id="db-grid-wrap">

<div class="db-empty-state" id="db-empty">SELECT A TABLE TO EXPLORE</div>

</div>

</div>

<div class="db-modal-overlay" id="modal-overlay">

<div class="db-modal" id="row-modal">

<div class="db-modal-header">

<span class="db-modal-title" id="modal-title">ROW DETAIL</span>

<button class="db-modal-close" id="modal-close">×</button>

</div>

<div class="db-modal-body" id="modal-body"></div>

</div>

</div>

<div class="log-ticker" id="log-ticker">

<div class="ticker-label"><span class="dot-pulse"></span>LIVE</div>

<div class="ticker-track" id="ticker-track"></div>

</div>

<script src="shared.js"></script>

<script src="database.js"></script>

</body>

</html>