Flipper Zero Documentation
1<style>
2 #main-column.w-full.max-w-\[760px\] {
3 max-width: unset;
4 }
5
6 .landing-wrapper {
7 margin: 0 1rem 1rem 1rem;
8 }
9
10 .landing-wrapper header>div:first-of-type {
11 width: 450px;
12 height: 190px;
13 margin-right: 3rem;
14 background-image: url(https://cdn.flipperzero.one/whiteFlatNew.svg);
15 background-size: contain;
16 background-repeat: no-repeat;
17 }
18
19 .landing-wrapper header>div:last-of-type>h1 {
20 font-size: 51px;
21 font-weight: 600;
22 color: #afafaf;
23 }
24
25 .landing-wrapper header>div:last-of-type>p {
26 font-size: 24px;
27 }
28
29 @media (max-width: 400px) {
30 .landing-wrapper .text-5xl {
31 font-size: 2.7rem;
32 }
33 }
34</style>
35
36<div class="landing-wrapper flex flex-col items-center">
37 <style>
38 .landing-wrapper {
39 white-space: initial;
40 }
41
42 .landing-wrapper>.header>div:first-of-type {
43 width: 400px;
44 height: 175px;
45 margin-right: 3rem;
46 background-image: url(https://cdn.flipperzero.one/whiteFlatNew.svg);
47 background-size: contain;
48 background-repeat: no-repeat;
49 background-position: center;
50 }
51
52 .landing-wrapper>.header {
53 max-width: 1242px;
54 }
55
56 .landing-wrapper>.grid {
57 grid-template-columns: 1fr 1fr 1fr;
58 grid-gap: 1.5rem;
59 margin-top: 2.5rem;
60 }
61
62 .landing-wrapper>.grid>.category {
63 max-width: 400px;
64 padding: 1.5rem 1rem 1.5rem 1.5rem;
65 border-radius: 7px;
66 border: 1px solid #AFAFAF;
67 transition-duration: 300ms;
68 cursor: pointer;
69 }
70
71 .landing-wrapper>.grid>.category:hover {
72 border-color: transparent;
73 box-shadow: 0px 4px 16px 1px #cbcbcb5e;
74 }
75
76 .landing-wrapper>.grid>.category>div:first-of-type {
77 width: 4.75rem;
78 height: 4rem;
79 margin-right: 1.5rem;
80 background-size: contain;
81 background-repeat: no-repeat;
82 background-position: center center;
83 image-rendering: pixelated;
84 }
85
86 .landing-wrapper>.grid>.category>div:last-of-type {
87 width: 3.5rem;
88 height: 100%;
89 background-image: url(https://cdn.flipperzero.one/docs-landing-chevron-down.png);
90 background-repeat: no-repeat;
91 background-size: 20px;
92 background-position: bottom 22% right;
93 }
94
95 .landing-wrapper>.grid>.category>div:nth-of-type(2) {
96 width: 100%;
97 }
98
99 .landing-wrapper>.grid>.category:hover>div:last-of-type {
100 background-image: url(https://cdn.flipperzero.one/docs-landing-chevron-down-black.png);
101 }
102
103 @media (max-width: 920px) {
104 .landing-wrapper>.grid {
105 grid-template-columns: 1fr 1fr;
106 }
107 }
108
109 @media (max-width: 780px) {
110 .landing-wrapper {
111 margin-top: 1rem;
112 }
113
114 .header {
115 flex-direction: column;
116 max-width: 90vw;
117 }
118
119 .landing-wrapper>.header>div:first-of-type {
120 width: 280px;
121 height: 125px;
122 margin: 0 0 1.5rem 0;
123 }
124
125 .landing-wrapper>.header>div:last-of-type {
126 text-align: center;
127 max-width: 80vw;
128 }
129 }
130
131 @media (max-width: 620px) {
132 .landing-wrapper {
133 margin-top: 1rem;
134 }
135
136 .landing-wrapper>.header>div:first-of-type {
137 width: 235px;
138 height: 100px;
139 }
140
141 .landing-wrapper>.grid {
142 grid-template-columns: 1fr;
143 }
144 }
145
146 @media (max-width: 375px) {
147 .landing-wrapper>.header>div:last-of-type>h1 {
148 font-size: 2.5rem;
149 }
150
151 .landing-wrapper>.header>div:last-of-type>p {
152 font-size: 1.15rem;
153 }
154 }
155 </style>
156 <div class="header flex items-center">
157 <div></div>
158 <div>
159 <h1 class="h1 font-bold text-5xl pb-4">
160 Flipper Zero Documentation
161 </h1>
162 <p class="text-xl">
163 Need help using your Flipper Zero?<br />
164 Discover user guides, developer documentation, schematics, blueprints, and more.
165 </p>
166 </div>
167 </div>
168 <div class="grid">
169 <div class="category flex items-center"
170 onclick="window.open('https://docs.flipperzero.one/basics/first-start', 'this')">
171 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-general.png);"></div>
172 <div>
173 <h4 class="text-xl font-bold text-gray-900">
174 Basics
175 </h4>
176 <p>
177 Learn how to update firmware, manage device controls, insert a microSD card, customize settings, and
178 troubleshoot issues.
179 </p>
180 </div>
181 <div></div>
182 </div>
183 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/sub-ghz', 'this')">
184 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-subghz.png)"></div>
185 <div>
186 <h4 class="text-xl font-bold text-gray-900">
187 Sub-GHz
188 </h4>
189 <p>
190 Engage with radio signals that operate at frequencies below 1 GHz. Control devices that use radio technology.
191 </p>
192 </div>
193 <div></div>
194 </div>
195 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/rfid', 'this')">
196 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-rfid.png)"></div>
197 <div>
198 <h4 class="text-xl font-bold text-gray-900">
199 125 kHz RFID
200 </h4>
201 <p>
202 Explore the technology behind low-frequency proximity cards and discover how to read, write, and emulate RFID
203 tags.
204 </p>
205 </div>
206 <div></div>
207 </div>
208 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/nfc', 'this')">
209 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-nfc.png)"></div>
210 <div>
211 <h4 class="text-xl font-bold text-gray-900">
212 NFC
213 </h4>
214 <p>
215 Discover the 13.56 MHz RFID technology, including reading, writing, and emulating NFC cards, extracting keys
216 and passwords.
217 </p>
218 </div>
219 <div></div>
220 </div>
221 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/infrared', 'this')">
222 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-infrared.png)"></div>
223 <div>
224 <h4 class="text-xl font-bold text-gray-900">
225 Infrared
226 </h4>
227 <p>
228 Understand infrared signals used in TVs, sound systems, projectors, and others, and discover how to read and
229 emulate remotes.
230 </p>
231 </div>
232 <div></div>
233 </div>
234 <div class="category flex items-center"
235 onclick="window.open('https://docs.flipperzero.one/gpio-and-modules', 'this')">
236 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-gpio.png)"></div>
237 <div>
238 <h4 class="text-xl font-bold text-gray-900">
239 GPIO & modules
240 </h4>
241 <p>
242 Learn about general-purpose input/output pins for connecting modules and how to use Flipper Zero as a USB to
243 UART/SPI/I2C converter.
244 </p>
245 </div>
246 <div></div>
247 </div>
248 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/ibutton', 'this')">
249 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-ibutton.png)"></div>
250 <div>
251 <h4 class="text-xl font-bold text-gray-900">
252 iButton
253 </h4>
254 <p>
255 Understand the 1-Wire technology to read, write, and emulate iButton electronic keys used in access control
256 systems.
257 </p>
258 </div>
259 <div></div>
260 </div>
261 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/bad-usb', 'this')">
262 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-badusb.png)"></div>
263 <div>
264 <h4 class="text-xl font-bold text-gray-900">
265 Bad USB
266 </h4>
267 <p>
268 Learn how to upload a Rubber Ducky script to a PC to emulate a keyboard that sends commands.
269 </p>
270 </div>
271 <div></div>
272 </div>
273 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/u2f', 'this')">
274 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-u2f.svg)"></div>
275 <div>
276 <h4 class="text-xl font-bold text-gray-900">
277 U2F
278 </h4>
279 <p>
280 Sign in to web accounts using Flipper Zero as the second authentication factor security key.
281 </p>
282 </div>
283 <div></div>
284 </div>
285 <div class="category flex items-center" onclick="window.open('https://docs.flipper.net/apps', 'this')">
286 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-modules.png)"></div>
287 <div>
288 <h4 class="text-xl font-bold text-gray-900">
289 Apps
290 </h4>
291 <p>
292 Explore an ever-growing collection of apps developed by the Flipper Zero community.
293 </p>
294 </div>
295 <div></div>
296 </div>
297 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/mobile-app', 'this')">
298 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-mobile.png)"></div>
299 <div>
300 <h4 class="text-xl font-bold text-gray-900">
301 Flipper Mobile App
302 </h4>
303 <p>
304 Learn about the mobile application that makes using Flipper Zero even more convenient.
305 </p>
306 </div>
307 <div></div>
308 </div>
309 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/qflipper', 'this')">
310 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-qflipper.svg)"></div>
311 <div>
312 <h4 class="text-xl font-bold text-gray-900">
313 qFlipper
314 </h4>
315 <p>
316 Understand how to use the desktop application for updating and repairing firmware and managing files.
317 </p>
318 </div>
319 <div></div>
320 </div>
321 <div class="category flex items-center" onclick="window.open('https://docs.flipperzero.one/development', 'this')">
322 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-develop.svg)"></div>
323 <div>
324 <h4 class="text-xl font-bold text-gray-900">
325 Development
326 </h4>
327 <p>
328 Dive into software and hardware development with developer documentation, schematics, and blueprints.
329 </p>
330 </div>
331 <div></div>
332 </div>
333 <div class="category flex items-center" onclick="window.open('https://docs.flipper.net/video-game-module', 'this')">
334 <div style="background-image: url(https://cdn.flipperzero.one/black-pixel-icon-vgm.svg)"></div>
335 <div>
336 <h4 class="text-xl font-bold text-gray-900">
337 Video Game Module
338 </h4>
339 <p>
340 Add new entertainment and development possibilities to your Flipper Zero with the Video Game Module.
341 </p>
342 </div>
343 <div></div>
344 </div>
345 </div>
346</div>
347
348<script>
349 window.name = 'this'
350 function loadLanding() {
351 document.querySelector('.ab-doc-name').style.display = 'none'
352 document.querySelector("#main-column").style.maxWidth = 'fit-content'
353 const sidebar = document.querySelector('.w-full.ab-space-content > div > .ab-right-column').parentElement
354
355 next.router.events.on('routeChangeComplete', () => {
356 if (location.pathname === '/') {
357 document.querySelector('.ab-doc-name').style.display = 'none'
358 sidebar.style.display = 'none'
359 } else {
360 document.querySelector("#main-column").style.maxWidth = ''
361 document.querySelector('.ab-doc-name').style.display = 'block'
362 sidebar.style.display = 'block'
363 }
364 })
365
366 if (location.pathname === '/') {
367 sidebar.style.display = 'none'
368 /* const header = document.querySelector("#ab-top-navbar")
369 if (!header) {
370 throw new Error('Header not found')
371 } */
372
373 const wrapper = document.querySelector('.landing-wrapper')
374 if (!wrapper) {
375 throw new Error('Wrapper not found')
376 }
377 wrapper.style.display = 'flex'
378 // header.after(wrapper)
379
380 document.querySelector("#main-column > div > div > div.flex.flex-col").style.display = 'none'
381
382 const iframe = document.querySelector('.landing-wrapper').parentElement
383 iframe.style.maxHeight = '100%'
384 iframe.style.height = '100%'
385 } else {
386 container.style.display = 'flex'
387 document.querySelector('.landing-wrapper').style.display = 'none'
388 }
389 }
390 loadLanding()
391
392 localStorage.setItem('oldHref', document.location.href)
393 function observe() {
394 const bodyList = document.querySelector("body")
395 const observer = new MutationObserver(function (mutations) {
396 mutations.forEach(function (mutation) {
397 if (localStorage.getItem('oldHref') !== document.location.href) {
398 localStorage.setItem('oldHref', document.location.href)
399 loadLanding()
400 }
401 })
402 })
403 observer.observe(bodyList, {
404 childList: true,
405 subtree: true
406 })
407 }
408 observe()
409</script>
ο»Ώ
ο»Ώ
