VolariGlobal/MachineLearning
0
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta name="description"
8 content="Machine Learning Systems - An interactive PDF viewer for exploring machine learning systems concepts, architectures, and best practices.">
9 <meta name="keywords" content="machine learning, ML systems, AI, deep learning, MLOps">
10 <meta name="author" content="Machine Learning Systems">
11
12 <title>Machine Learning Systems | Interactive PDF Viewer</title>
13
14 <!-- Fonts -->
15 <link rel="preconnect" href="https://fonts.googleapis.com">
16 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17 <link
18 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap"
19 rel="stylesheet">
20
21 <!-- Styles -->
22 <link rel="stylesheet" href="styles.css">
23
24 <!-- PDF.js -->
25 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
26</head>
27
28<body>
29 <!-- Header -->
30 <header class="header">
31 <div class="header-content">
32 <div class="logo-section">
33 <div class="logo-icon">
34 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
35 <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"
36 stroke-linecap="round" stroke-linejoin="round" />
37 <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"
38 stroke-linejoin="round" />
39 <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"
40 stroke-linejoin="round" />
41 </svg>
42 </div>
43 <div class="logo-text">
44 <h1>Machine Learning Systems</h1>
45 <p class="subtitle">Interactive PDF Viewer</p>
46 </div>
47 </div>
48
49 <div class="header-actions">
50 <button class="btn-icon" id="themeToggle" title="Toggle theme">
51 <svg id="sunIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
52 <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" />
53 <path
54 d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22"
55 stroke="currentColor" stroke-width="2" stroke-linecap="round" />
56 </svg>
57 <svg id="moonIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
58 style="display: none;">
59 <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2"
60 stroke-linecap="round" stroke-linejoin="round" />
61 </svg>
62 </button>
63 <button class="btn-icon" id="searchBtn" title="Search (Ctrl+F)">
64 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
65 <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
66 <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
67 </svg>
68 </button>
69 <button class="btn-icon" id="fullscreenBtn" title="Fullscreen">
70 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
71 <path
72 d="M8 3H5C3.89543 3 3 3.89543 3 5V8M21 8V5C21 3.89543 20.1046 3 19 3H16M16 21H19C20.1046 21 21 20.1046 21 19V16M3 16V19C3 20.1046 3.89543 21 5 21H8"
73 stroke="currentColor" stroke-width="2" stroke-linecap="round" />
74 </svg>
75 </button>
76 <a href="Machine-Learning-Systems.pdf" download class="btn-primary">
77 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
78 <path d="M21 15V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V15"
79 stroke="currentColor" stroke-width="2" stroke-linecap="round" />
80 <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"
81 stroke-linejoin="round" />
82 <path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
83 </svg>
84 Download PDF
85 </a>
86 </div>
87 </div>
88 </header>
89
90 <!-- Main Content -->
91 <main class="main-container">
92 <!-- Sidebar -->
93 <aside class="sidebar" id="sidebar">
94 <div class="sidebar-header">
95 <h2>Navigation</h2>
96 <button class="btn-icon" id="closeSidebarBtn" title="Close sidebar">
97 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
98 <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
99 </svg>
100 </button>
101 </div>
102
103 <div class="page-info">
104 <div class="info-item">
105 <span class="info-label">Current Page</span>
106 <span class="info-value" id="currentPageDisplay">1</span>
107 </div>
108 <div class="info-item">
109 <span class="info-label">Total Pages</span>
110 <span class="info-value" id="totalPagesDisplay">-</span>
111 </div>
112 </div>
113
114 <div class="page-navigation">
115 <label for="pageInput">Go to Page</label>
116 <div class="page-input-group">
117 <input type="number" id="pageInput" min="1" placeholder="1">
118 <button class="btn-secondary" id="goToPageBtn">Go</button>
119 </div>
120 </div>
121
122 <div class="thumbnails" id="thumbnails">
123 <p class="loading-text">Loading pages...</p>
124 </div>
125 </aside>
126
127 <!-- PDF Viewer -->
128 <div class="viewer-container">
129 <button class="sidebar-toggle" id="sidebarToggle" title="Toggle sidebar">
130 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
131 <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
132 </svg>
133 </button>
134
135 <!-- Search Panel -->
136 <div class="search-panel" id="searchPanel">
137 <div class="search-input-group">
138 <input type="text" id="searchInput" placeholder="Search in PDF...">
139 <button class="btn-secondary" id="searchNextBtn">Next</button>
140 <button class="btn-secondary" id="searchPrevBtn">Previous</button>
141 <button class="btn-icon" id="closeSearchBtn">
142 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
143 <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2"
144 stroke-linecap="round" />
145 </svg>
146 </button>
147 </div>
148 <p class="search-results" id="searchResults"></p>
149 </div>
150
151 <!-- Controls -->
152 <div class="controls">
153 <div class="control-group">
154 <button class="btn-icon" id="prevPageBtn" title="Previous page (←)">
155 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
156 <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
157 stroke-linejoin="round" />
158 </svg>
159 </button>
160
161 <span class="page-indicator">
162 <span id="pageNum">1</span> / <span id="pageCount">-</span>
163 </span>
164
165 <button class="btn-icon" id="nextPageBtn" title="Next page (→)">
166 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
167 <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
168 stroke-linejoin="round" />
169 </svg>
170 </button>
171 </div>
172
173 <div class="control-group">
174 <button class="btn-icon" id="zoomOutBtn" title="Zoom out (-)">
175 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
176 <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
177 <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2"
178 stroke-linecap="round" />
179 <path d="M8 11H14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
180 </svg>
181 </button>
182
183 <span class="zoom-level" id="zoomLevel">100%</span>
184
185 <button class="btn-icon" id="zoomInBtn" title="Zoom in (+)">
186 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
187 <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
188 <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2"
189 stroke-linecap="round" />
190 <path d="M11 8V14M8 11H14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
191 </svg>
192 </button>
193
194 <button class="btn-icon" id="fitWidthBtn" title="Fit to width">
195 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
196 <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" />
197 <path d="M9 12H15M9 12L11 10M9 12L11 14M15 12L13 10M15 12L13 14" stroke="currentColor"
198 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
199 </svg>
200 </button>
201 </div>
202 </div>
203
204 <!-- Canvas Container -->
205 <div class="canvas-container" id="canvasContainer">
206 <div class="loading-overlay" id="loadingOverlay">
207 <div class="spinner"></div>
208 <p>Loading PDF...</p>
209 </div>
210 <canvas id="pdfCanvas"></canvas>
211 </div>
212 </div>
213 </main>
214
215 <!-- Scripts -->
216 <script src="script.js"></script>
217</body>
218
219</html>