html-builder.ts RawHistoryFolder
1export class HTMLBuilder {
2 static createBaseHTML(): string {
3 return `
4<!DOCTYPE html>
5<html lang="en">
6<head>
7 <meta charset="UTF-8">
8 <meta name="viewport" content="width=device-width, initial-scale=1.0">
9 <title>Dumber Browser</title>
10 <style>
11 ${this.getStyles()}
12 </style>
13</head>
14<body>
15 <div class="container">
16 <div class="history-section">
17 <h2 class="section-title">Recent History</h2>
18 <div id="historyList" class="history-list">
19 <div class="loading">Loading history...</div>
20 </div>
21 </div>
22
23 <div class="shortcuts-section">
24 <h2 class="section-title">Search Shortcuts</h2>
25 <div id="shortcuts" class="shortcuts-grid">
26 <div class="loading">Loading shortcuts...</div>
27 </div>
28 </div>
29 </div>
30 <script type="module" src="./main.js"></script>
31</body>
32</html>`;
33 }
34
35 private static getStyles(): string {
36 return `
37 * {
38 margin: 0;
39 padding: 0;
40 box-sizing: border-box;
41 }
42
43 body {
44 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
45 background: #1a1a1a;
46 color: #ffffff;
47 height: 100vh;
48 display: flex;
49 flex-direction: column;
50 }
51
52 .container {
53 flex: 1;
54 display: flex;
55 max-width: 1200px;
56 margin: 0 auto;
57 width: 100%;
58 padding: 2rem;
59 gap: 2rem;
60 }
61
62 .history-section {
63 flex: 1;
64 min-height: 0;
65 }
66
67 .shortcuts-section {
68 flex: 1;
69 min-height: 0;
70 }
71
72 .section-title {
73 font-size: 1.5rem;
74 margin-bottom: 1rem;
75 color: #ffffff;
76 border-bottom: 2px solid #404040;
77 padding-bottom: 0.5rem;
78 }
79
80 .history-list {
81 overflow-y: auto;
82 max-height: calc(100vh - 8rem);
83 }
84
85 .history-item {
86 padding: 0.75rem;
87 margin-bottom: 0.5rem;
88 background: #2d2d2d;
89 border-radius: 6px;
90 cursor: pointer;
91 transition: background 0.2s;
92 border-left: 3px solid #404040;
93 }
94
95 .history-item:hover {
96 background: #3d3d3d;
97 border-left-color: #0066cc;
98 }
99
100 .history-url {
101 font-size: 0.9rem;
102 color: #cccccc;
103 margin-bottom: 0.25rem;
104 word-break: break-all;
105 }
106
107 .history-title {
108 font-size: 0.8rem;
109 color: #888;
110 overflow: hidden;
111 text-overflow: ellipsis;
112 white-space: nowrap;
113 }
114
115 .shortcuts-grid {
116 display: grid;
117 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
118 gap: 1rem;
119 max-height: calc(100vh - 8rem);
120 overflow-y: auto;
121 }
122
123 .shortcut {
124 padding: 1rem;
125 background: #2d2d2d;
126 border: 2px solid #404040;
127 border-radius: 8px;
128 cursor: pointer;
129 transition: all 0.2s;
130 text-align: center;
131 }
132
133 .shortcut:hover {
134 background: #3d3d3d;
135 border-color: #0066cc;
136 transform: translateY(-2px);
137 }
138
139 .shortcut-key {
140 font-weight: bold;
141 color: #0066cc;
142 margin-bottom: 0.5rem;
143 font-size: 1.1rem;
144 }
145
146 .shortcut-desc {
147 color: #888;
148 font-size: 0.9rem;
149 }
150
151 .loading {
152 padding: 2rem;
153 text-align: center;
154 color: #888;
155 }
156
157 .empty-state {
158 padding: 3rem 2rem;
159 text-align: center;
160 color: #666;
161 }
162
163 .empty-state h3 {
164 margin-bottom: 1rem;
165 color: #888;
166 }
167
168 @media (max-width: 768px) {
169 .container {
170 flex-direction: column;
171 padding: 1rem;
172 }
173
174 .shortcuts-grid {
175 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
176 }
177 }
178 `;
179 }
180}