From 19cba6165dcd74c06d732f1dc76b689fde508b5e Mon Sep 17 00:00:00 2001 From: Khang Date: Thu, 26 Sep 2024 10:17:19 +0000 Subject: [PATCH] Updates --- 404.html | 11 +- about.html | 11 +- ...les.0b0b256a.css => 0.styles.ba6b6b5c.css} | 2 +- assets/js/{1.45dd6829.js => 1.4b5570d5.js} | 2 +- assets/js/{10.8e7c9cea.js => 10.e1e89e0d.js} | 2 +- .../js/{101.0c2330f9.js => 100.e32dcd2e.js} | 2 +- .../js/{102.cb6b900c.js => 101.4f938d8c.js} | 2 +- .../js/{103.8c9b29d3.js => 102.ae356ac7.js} | 2 +- .../js/{100.6925ba8f.js => 103.67541094.js} | 2 +- assets/js/104.14567289.js | 1 - assets/js/104.80c9f5d1.js | 1 + assets/js/105.a2d9160e.js | 1 - assets/js/105.ee50a038.js | 1 + assets/js/106.83669c29.js | 1 - assets/js/106.8e403aa6.js | 1 + assets/js/107.1caa3abd.js | 1 - assets/js/107.abd398a4.js | 1 + assets/js/108.6b777408.js | 1 - assets/js/108.ffdbf6c0.js | 1 + assets/js/109.91324ba5.js | 1 - assets/js/109.da478c56.js | 1 + assets/js/{11.5f5929b1.js => 11.ff5643ec.js} | 2 +- assets/js/111.31e4c61e.js | 1 - assets/js/111.b0579977.js | 1 + .../js/{112.683dec3f.js => 112.586459ae.js} | 2 +- assets/js/{12.fad7ca11.js => 12.e92d4d15.js} | 2 +- assets/js/{13.e82454a6.js => 13.4834fdf3.js} | 2 +- assets/js/{14.56c3e314.js => 14.22a8b82a.js} | 2 +- assets/js/{15.dadf64aa.js => 15.2d4f2441.js} | 2 +- assets/js/{16.2d56e5cc.js => 16.7ba3320d.js} | 2 +- assets/js/{17.b75a05b9.js => 17.a9f08352.js} | 2 +- assets/js/{18.2bb66aec.js => 18.cf0ea5b4.js} | 2 +- assets/js/{19.2727b078.js => 19.ded391f8.js} | 2 +- assets/js/{20.23edec81.js => 20.349d8fb7.js} | 2 +- assets/js/{21.ede87204.js => 21.91fb08b0.js} | 2 +- assets/js/{22.b024a266.js => 22.5dc075a2.js} | 2 +- assets/js/{23.a0b15613.js => 23.9cc9a595.js} | 2 +- assets/js/{24.02ddfcc1.js => 24.9e2092be.js} | 2 +- assets/js/{25.a6b4cc63.js => 25.1515336d.js} | 2 +- assets/js/{26.7b1d1f92.js => 26.53873235.js} | 2 +- assets/js/{27.b75a2144.js => 27.727ad85a.js} | 2 +- assets/js/{28.86222a3a.js => 28.ed377c96.js} | 2 +- assets/js/29.808ab29f.js | 1 - assets/js/29.b294ce10.js | 1 + assets/js/{3.0c89a22c.js => 3.6c40dd93.js} | 2 +- assets/js/{30.aa1d03a6.js => 30.4875a2ff.js} | 2 +- assets/js/{31.a7f04307.js => 31.ad654102.js} | 2 +- assets/js/{32.cc6c63a5.js => 32.9fd1b495.js} | 2 +- assets/js/{33.44539619.js => 33.4f742fec.js} | 2 +- assets/js/{34.feda67f6.js => 34.cfd87b9e.js} | 2 +- assets/js/{36.87ba715d.js => 36.8909cbd4.js} | 2 +- assets/js/{37.e30c1c38.js => 37.8e93a923.js} | 2 +- assets/js/{38.e9d30e36.js => 38.90ecca65.js} | 2 +- assets/js/{39.5101a03e.js => 39.a59cf660.js} | 2 +- assets/js/{4.c5692acc.js => 4.fa4709e0.js} | 2 +- assets/js/{40.052deee0.js => 40.138be96c.js} | 2 +- assets/js/41.2b25f8f8.js | 1 - assets/js/41.9d54aced.js | 1 + assets/js/{42.a0ad79a3.js => 42.0eaeecd2.js} | 2 +- assets/js/{43.9c6dd98d.js => 43.6af75680.js} | 2 +- assets/js/{44.6953418b.js => 44.0496e1b3.js} | 2 +- assets/js/{45.0919b025.js => 45.524a38f0.js} | 2 +- assets/js/{46.07e3486f.js => 46.4d9b4fb1.js} | 2 +- assets/js/{47.bdfb9a15.js => 47.831eee50.js} | 2 +- assets/js/{48.8ae2004e.js => 48.ce5a8fa4.js} | 2 +- assets/js/{49.9bcf5a8a.js => 49.cab4177b.js} | 2 +- assets/js/{5.4ffac2c9.js => 5.58477e17.js} | 2 +- assets/js/{50.3352a58d.js => 50.6c7ad1c3.js} | 2 +- assets/js/{51.6d90143e.js => 51.3f9427b4.js} | 2 +- assets/js/{52.89dda4df.js => 52.fb285f68.js} | 2 +- assets/js/{53.55d6711a.js => 53.4becf30d.js} | 2 +- assets/js/{54.7f0c5d10.js => 54.94eda194.js} | 4 +- assets/js/{55.e3f80726.js => 55.601d2399.js} | 2 +- assets/js/{56.366893af.js => 56.24cacc39.js} | 2 +- assets/js/{57.9a90ee2f.js => 57.465e04d3.js} | 2 +- assets/js/{58.2cd4fc07.js => 58.435fdc61.js} | 2 +- assets/js/{59.28a7ce94.js => 59.199af566.js} | 2 +- assets/js/{60.fa4b3a04.js => 60.fc797b81.js} | 2 +- assets/js/{61.f1eae3cb.js => 61.c62f2052.js} | 2 +- assets/js/{62.5c038c0b.js => 62.f9cc0d6b.js} | 2 +- assets/js/{63.21c86402.js => 63.b844eaab.js} | 2 +- assets/js/64.82f96561.js | 1 + assets/js/64.ab4f8306.js | 1 - assets/js/{65.b2943811.js => 65.0770ca9a.js} | 2 +- assets/js/{66.110670e8.js => 66.0a3a7894.js} | 2 +- assets/js/{67.046e97ee.js => 67.90e59660.js} | 2 +- assets/js/{68.64849d14.js => 68.479e87a7.js} | 2 +- assets/js/{69.94760f37.js => 69.abd08dd0.js} | 2 +- assets/js/{7.b81e3de9.js => 7.36b4f231.js} | 2 +- assets/js/{70.4335bd31.js => 70.ba3545c1.js} | 2 +- assets/js/{72.46a34433.js => 72.74a481ba.js} | 2 +- assets/js/{74.8e3c0df5.js => 74.7c7ec879.js} | 2 +- assets/js/{76.c965bb1c.js => 76.b183bb39.js} | 2 +- assets/js/{78.4929267e.js => 78.aa02d2b1.js} | 2 +- assets/js/{79.5c033749.js => 79.907a8bb4.js} | 2 +- assets/js/{8.9b1fc29e.js => 8.eca48113.js} | 2 +- assets/js/{80.d0bdb191.js => 80.204a0fce.js} | 2 +- assets/js/{81.f84ec9b2.js => 81.513ac590.js} | 2 +- assets/js/{84.dae0e392.js => 84.228fed46.js} | 2 +- assets/js/{86.d1c6cd65.js => 86.3f84d782.js} | 2 +- assets/js/{87.93bd4667.js => 87.a92409c8.js} | 2 +- assets/js/{90.0a61a824.js => 88.8aee0609.js} | 2 +- assets/js/{89.880f4ceb.js => 89.ce254f8d.js} | 2 +- assets/js/{9.9a61a193.js => 9.3af597ac.js} | 2 +- assets/js/{88.f4ec8e5c.js => 90.b0267733.js} | 2 +- assets/js/91.db4694c7.js | 1 - assets/js/91.f1884b91.js | 1 + assets/js/92.8152aab2.js | 1 + assets/js/92.89fd32d6.js | 1 - assets/js/93.1dab45e8.js | 1 - assets/js/93.e150e858.js | 1 + assets/js/94.c0901cde.js | 1 + assets/js/94.eb26b624.js | 1 - assets/js/95.0d75ac36.js | 1 + assets/js/95.a42aaced.js | 1 - assets/js/96.283ab02a.js | 1 + assets/js/96.5a0536df.js | 1 - assets/js/97.4a0f9aa3.js | 1 + assets/js/97.c592e575.js | 1 - assets/js/98.bb351ba5.js | 1 - assets/js/98.e9bf083b.js | 1 + assets/js/99.52791374.js | 1 + assets/js/99.ce13b419.js | 1 - .../js/{app.2d1bad58.js => app.7eb2547e.js} | 10 +- blog/about-the-ads.html | 11 +- blog/building-visnalize-com.html | 11 +- blog/building-win7-simu.html | 11 +- blog/concealing-online-identity.html | 11 +- blog/from-codepen-to-app.html | 11 +- blog/from-side-project-to-side-hustle.html | 11 +- blog/game-stick-lite-4k-adding-games.html | 11 +- blog/index.html | 11 +- blog/load-any-websites-in-iframes.html | 11 +- blog/simulator-vs-emulator.html | 11 +- blog/tag/brick-1100/index.html | 11 +- blog/tag/index.html | 11 +- blog/tag/random/index.html | 11 +- blog/tag/review/index.html | 11 +- blog/tag/sharing/index.html | 11 +- blog/tag/technical/index.html | 11 +- blog/tag/tips/index.html | 11 +- blog/tag/tools/index.html | 11 +- blog/tag/win7-simu/index.html | 11 +- blog/visnalize-year-in-review-2023.html | 11 +- blog/why-side-hustle.html | 11 +- blog/win7-icons-viewer-downloader.html | 11 +- blog/win7-simu-file-explorer.html | 11 +- blog/win7-simu-mobile-devices.html | 11 +- blog/win7-simu-windows-media-center.html | 11 +- blog/win7-simu-year-in-review-2022.html | 11 +- blog/win7-ui-introduction.html | 11 +- blog/windows-resources.html | 11 +- brick1100/about.html | 11 +- brick1100/builders.html | 11 +- brick1100/changelog.html | 11 +- brick1100/deep-links.html | 11 +- brick1100/games.html | 11 +- brick1100/index.html | 11 +- brick1100/privacy.html | 11 +- contact.html | 11 +- feed.atom | 98 ++++++++-------- feed.json | 100 ++++++++-------- index.html | 11 +- rss.xml | 108 +++++++++--------- sitemap.xml | 2 +- win7simu/about.html | 11 +- win7simu/changelog.html | 11 +- win7simu/faq.html | 11 +- win7simu/index.html | 11 +- win7simu/privacy.html | 11 +- win7simu/simulated/bios.html | 11 +- win7simu/simulated/calculator.html | 11 +- win7simu/simulated/chrome.html | 11 +- win7simu/simulated/cmd.html | 11 +- win7simu/simulated/cpanel.html | 11 +- win7simu/simulated/fileexplorer.html | 11 +- win7simu/simulated/gadgets.html | 11 +- win7simu/simulated/ie.html | 11 +- win7simu/simulated/index.html | 11 +- win7simu/simulated/magnifier.html | 11 +- win7simu/simulated/media-player.html | 11 +- win7simu/simulated/minesweeper.html | 11 +- win7simu/simulated/notepad.html | 11 +- win7simu/simulated/paint.html | 11 +- win7simu/simulated/personalize.html | 11 +- win7simu/simulated/programs.html | 11 +- win7simu/simulated/purbleplace.html | 11 +- win7simu/simulated/recorder.html | 11 +- win7simu/simulated/snipping.html | 11 +- win7simu/simulated/solitaire.html | 11 +- win7simu/simulated/sticky.html | 11 +- win7simu/simulated/taskmgr.html | 11 +- win7simu/simulated/wmc.html | 11 +- win7simu/simulated/wordpad.html | 11 +- win7simu/themestudio/changelog.html | 11 +- win7simu/themestudio/in-depth-guide.html | 11 +- win7simu/themestudio/index.html | 11 +- win7simu/themestudio/quick-guide.html | 11 +- 198 files changed, 694 insertions(+), 622 deletions(-) rename assets/css/{0.styles.0b0b256a.css => 0.styles.ba6b6b5c.css} (94%) rename assets/js/{1.45dd6829.js => 1.4b5570d5.js} (89%) rename assets/js/{10.8e7c9cea.js => 10.e1e89e0d.js} (75%) rename assets/js/{101.0c2330f9.js => 100.e32dcd2e.js} (77%) rename assets/js/{102.cb6b900c.js => 101.4f938d8c.js} (77%) rename assets/js/{103.8c9b29d3.js => 102.ae356ac7.js} (77%) rename assets/js/{100.6925ba8f.js => 103.67541094.js} (77%) delete mode 100644 assets/js/104.14567289.js create mode 100644 assets/js/104.80c9f5d1.js delete mode 100644 assets/js/105.a2d9160e.js create mode 100644 assets/js/105.ee50a038.js delete mode 100644 assets/js/106.83669c29.js create mode 100644 assets/js/106.8e403aa6.js delete mode 100644 assets/js/107.1caa3abd.js create mode 100644 assets/js/107.abd398a4.js delete mode 100644 assets/js/108.6b777408.js create mode 100644 assets/js/108.ffdbf6c0.js delete mode 100644 assets/js/109.91324ba5.js create mode 100644 assets/js/109.da478c56.js rename assets/js/{11.5f5929b1.js => 11.ff5643ec.js} (94%) delete mode 100644 assets/js/111.31e4c61e.js create mode 100644 assets/js/111.b0579977.js rename assets/js/{112.683dec3f.js => 112.586459ae.js} (96%) rename assets/js/{12.fad7ca11.js => 12.e92d4d15.js} (90%) rename assets/js/{13.e82454a6.js => 13.4834fdf3.js} (92%) rename assets/js/{14.56c3e314.js => 14.22a8b82a.js} (97%) rename assets/js/{15.dadf64aa.js => 15.2d4f2441.js} (66%) rename assets/js/{16.2d56e5cc.js => 16.7ba3320d.js} (76%) rename assets/js/{17.b75a05b9.js => 17.a9f08352.js} (57%) rename assets/js/{18.2bb66aec.js => 18.cf0ea5b4.js} (57%) rename assets/js/{19.2727b078.js => 19.ded391f8.js} (95%) rename assets/js/{20.23edec81.js => 20.349d8fb7.js} (89%) rename assets/js/{21.ede87204.js => 21.91fb08b0.js} (60%) rename assets/js/{22.b024a266.js => 22.5dc075a2.js} (65%) rename assets/js/{23.a0b15613.js => 23.9cc9a595.js} (88%) rename assets/js/{24.02ddfcc1.js => 24.9e2092be.js} (72%) rename assets/js/{25.a6b4cc63.js => 25.1515336d.js} (75%) rename assets/js/{26.7b1d1f92.js => 26.53873235.js} (71%) rename assets/js/{27.b75a2144.js => 27.727ad85a.js} (68%) rename assets/js/{28.86222a3a.js => 28.ed377c96.js} (68%) delete mode 100644 assets/js/29.808ab29f.js create mode 100644 assets/js/29.b294ce10.js rename assets/js/{3.0c89a22c.js => 3.6c40dd93.js} (87%) rename assets/js/{30.aa1d03a6.js => 30.4875a2ff.js} (79%) rename assets/js/{31.a7f04307.js => 31.ad654102.js} (73%) rename assets/js/{32.cc6c63a5.js => 32.9fd1b495.js} (63%) rename assets/js/{33.44539619.js => 33.4f742fec.js} (72%) rename assets/js/{34.feda67f6.js => 34.cfd87b9e.js} (73%) rename assets/js/{36.87ba715d.js => 36.8909cbd4.js} (94%) rename assets/js/{37.e30c1c38.js => 37.8e93a923.js} (50%) rename assets/js/{38.e9d30e36.js => 38.90ecca65.js} (80%) rename assets/js/{39.5101a03e.js => 39.a59cf660.js} (82%) rename assets/js/{4.c5692acc.js => 4.fa4709e0.js} (83%) rename assets/js/{40.052deee0.js => 40.138be96c.js} (78%) delete mode 100644 assets/js/41.2b25f8f8.js create mode 100644 assets/js/41.9d54aced.js rename assets/js/{42.a0ad79a3.js => 42.0eaeecd2.js} (58%) rename assets/js/{43.9c6dd98d.js => 43.6af75680.js} (74%) rename assets/js/{44.6953418b.js => 44.0496e1b3.js} (83%) rename assets/js/{45.0919b025.js => 45.524a38f0.js} (72%) rename assets/js/{46.07e3486f.js => 46.4d9b4fb1.js} (61%) rename assets/js/{47.bdfb9a15.js => 47.831eee50.js} (61%) rename assets/js/{48.8ae2004e.js => 48.ce5a8fa4.js} (97%) rename assets/js/{49.9bcf5a8a.js => 49.cab4177b.js} (96%) rename assets/js/{5.4ffac2c9.js => 5.58477e17.js} (82%) rename assets/js/{50.3352a58d.js => 50.6c7ad1c3.js} (92%) rename assets/js/{51.6d90143e.js => 51.3f9427b4.js} (98%) rename assets/js/{52.89dda4df.js => 52.fb285f68.js} (98%) rename assets/js/{53.55d6711a.js => 53.4becf30d.js} (92%) rename assets/js/{54.7f0c5d10.js => 54.94eda194.js} (99%) rename assets/js/{55.e3f80726.js => 55.601d2399.js} (90%) rename assets/js/{56.366893af.js => 56.24cacc39.js} (95%) rename assets/js/{57.9a90ee2f.js => 57.465e04d3.js} (95%) rename assets/js/{58.2cd4fc07.js => 58.435fdc61.js} (89%) rename assets/js/{59.28a7ce94.js => 59.199af566.js} (89%) rename assets/js/{60.fa4b3a04.js => 60.fc797b81.js} (83%) rename assets/js/{61.f1eae3cb.js => 61.c62f2052.js} (82%) rename assets/js/{62.5c038c0b.js => 62.f9cc0d6b.js} (79%) rename assets/js/{63.21c86402.js => 63.b844eaab.js} (91%) create mode 100644 assets/js/64.82f96561.js delete mode 100644 assets/js/64.ab4f8306.js rename assets/js/{65.b2943811.js => 65.0770ca9a.js} (98%) rename assets/js/{66.110670e8.js => 66.0a3a7894.js} (99%) rename assets/js/{67.046e97ee.js => 67.90e59660.js} (98%) rename assets/js/{68.64849d14.js => 68.479e87a7.js} (99%) rename assets/js/{69.94760f37.js => 69.abd08dd0.js} (77%) rename assets/js/{7.b81e3de9.js => 7.36b4f231.js} (53%) rename assets/js/{70.4335bd31.js => 70.ba3545c1.js} (98%) rename assets/js/{72.46a34433.js => 72.74a481ba.js} (99%) rename assets/js/{74.8e3c0df5.js => 74.7c7ec879.js} (99%) rename assets/js/{76.c965bb1c.js => 76.b183bb39.js} (98%) rename assets/js/{78.4929267e.js => 78.aa02d2b1.js} (98%) rename assets/js/{79.5c033749.js => 79.907a8bb4.js} (81%) rename assets/js/{8.9b1fc29e.js => 8.eca48113.js} (79%) rename assets/js/{80.d0bdb191.js => 80.204a0fce.js} (99%) rename assets/js/{81.f84ec9b2.js => 81.513ac590.js} (80%) rename assets/js/{84.dae0e392.js => 84.228fed46.js} (99%) rename assets/js/{86.d1c6cd65.js => 86.3f84d782.js} (80%) rename assets/js/{87.93bd4667.js => 87.a92409c8.js} (99%) rename assets/js/{90.0a61a824.js => 88.8aee0609.js} (77%) rename assets/js/{89.880f4ceb.js => 89.ce254f8d.js} (77%) rename assets/js/{9.9a61a193.js => 9.3af597ac.js} (82%) rename assets/js/{88.f4ec8e5c.js => 90.b0267733.js} (77%) delete mode 100644 assets/js/91.db4694c7.js create mode 100644 assets/js/91.f1884b91.js create mode 100644 assets/js/92.8152aab2.js delete mode 100644 assets/js/92.89fd32d6.js delete mode 100644 assets/js/93.1dab45e8.js create mode 100644 assets/js/93.e150e858.js create mode 100644 assets/js/94.c0901cde.js delete mode 100644 assets/js/94.eb26b624.js create mode 100644 assets/js/95.0d75ac36.js delete mode 100644 assets/js/95.a42aaced.js create mode 100644 assets/js/96.283ab02a.js delete mode 100644 assets/js/96.5a0536df.js create mode 100644 assets/js/97.4a0f9aa3.js delete mode 100644 assets/js/97.c592e575.js delete mode 100644 assets/js/98.bb351ba5.js create mode 100644 assets/js/98.e9bf083b.js create mode 100644 assets/js/99.52791374.js delete mode 100644 assets/js/99.ce13b419.js rename assets/js/{app.2d1bad58.js => app.7eb2547e.js} (51%) diff --git a/404.html b/404.html index 6f42b764..9a8b2001 100644 --- a/404.html +++ b/404.html @@ -6,6 +6,8 @@ Visnalize + + - - - + +

404

That's a Four-Oh-Four.
Take me home. -
- +
+ diff --git a/about.html b/about.html index 4056cf03..ca52d20f 100644 --- a/about.html +++ b/about.html @@ -6,6 +6,8 @@ 🙋‍♂️ About Me | Visnalize + + - @@ -36,8 +37,8 @@ - - + +
Visnalize

# 🙋‍♂️ About Me

Howdy, glad to see that you are interested to know about me. I am a full-time software developer and a free-time app maker. I love all sorts of web technologies and visual-related stuff. I tend to spend all of my free time exploring and playing around with those things by making a lot of, probably silly, of-no-use apps, apps that are meant for entertainment, or simply to satisfy my hobby.

I am not good at math and problem solving, or positively speaking, just decent. I cannot build complex programs or software that appears to be useful to mankind, so I took the route that fits me best: to build apps for entertainment. If you would like, follow me on my journey to contribute to the world in my own way.

Tools I use:

# Visnalize

Visnalize is Visualize (not Visnalize) with the letter u upside down, my brand name of choice. I did not really care about the name when I first started and having little to no knowledge about branding or marketing, I just picked a name that was somewhat relevant to my interest and went with it, though the letter u upside down was a small intentional touch that has luckily helped me stand out from the crowd in terms of search engine results (opens new window).

The logo is also shamelessly created by myself using MS Paint and eventually on Figma.

# Contact

I am not actively available via direct messaging or chat apps like Discord, WhatsApp etc. You can reach me via email at hey@visnalize.com or with a little help from the form below:

Last Updated: 9/3/2024, 8:15:04 AM
- + (opens new window)

# 🙋‍♂️ About Me

Howdy, glad to see that you are interested to know about me. I am a full-time software developer and a free-time app maker. I love all sorts of web technologies and visual-related stuff. I tend to spend all of my free time exploring and playing around with those things by making a lot of, probably silly, of-no-use apps, apps that are meant for entertainment, or simply to satisfy my hobby.

I am not good at math and problem solving, or positively speaking, just decent. I cannot build complex programs or software that appears to be useful to mankind, so I took the route that fits me best: to build apps for entertainment. If you would like, follow me on my journey to contribute to the world in my own way.

Tools I use:

# Visnalize

Visnalize is Visualize (not Visnalize) with the letter u upside down, my brand name of choice. I did not really care about the name when I first started and having little to no knowledge about branding or marketing, I just picked a name that was somewhat relevant to my interest and went with it, though the letter u upside down was a small intentional touch that has luckily helped me stand out from the crowd in terms of search engine results (opens new window).

The logo is also shamelessly created by myself using MS Paint and eventually on Figma.

# Contact

I am not actively available via direct messaging or chat apps like Discord, WhatsApp etc. You can reach me via email at hey@visnalize.com or with a little help from the form below:

Last Updated: 9/3/2024, 8:15:04 AM
+ diff --git a/assets/css/0.styles.0b0b256a.css b/assets/css/0.styles.ba6b6b5c.css similarity index 94% rename from assets/css/0.styles.0b0b256a.css rename to assets/css/0.styles.ba6b6b5c.css index 421e9522..a1fc0997 100644 --- a/assets/css/0.styles.0b0b256a.css +++ b/assets/css/0.styles.ba6b6b5c.css @@ -1 +1 @@ -code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#1bb89b}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#1bb89b}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;-webkit-user-select:none;user-select:none;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}#app{transition:background .3s}.homepage .logo,.homepage>.home{padding:0;max-width:unset}.homepage .logo .footer,.homepage .logo .hero,.homepage>.home .footer,.homepage>.home .hero{display:none}.homepage .navbar{opacity:0;transform:translateY(-58px);transition:.3s}.homepage .navbar.show{opacity:1;transform:translateY(0)}.navbar{border:0;box-shadow:0 1px 1rem rgba(0,0,0,.08);transition:background .3s}.navbar .links{background:none!important}.navbar .search-box>input{border-color:transparent;border-radius:.5rem;background-color:#eee}.navbar .search-box>input.focused{background-color:transparent}.navbar .nav-item>a{height:2.4rem}.sidebar{transition:background .3s,transform .2s ease}.page{min-height:100vh;box-sizing:border-box}.nav-item>.dropdown-wrapper .nav-dropdown{border:0;box-shadow:0 .3rem .3rem rgba(0,0,0,.2)}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link{border-left:2px solid transparent;transition:.3s}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link.router-link-active{border-left-color:#1bb89b}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link:after{content:none}main{overflow-x:hidden}img[alt=win7simu]{width:45px;height:45px;vertical-align:bottom}.banner{margin:1rem 0;width:100%}.embed-responsive iframe{display:block;margin:auto;max-width:100%}.contains-task-list{list-style:none;padding:0}.contains-task-list input{margin:0 8px 0 0;transform:scale(1.2)}@media (max-width:719px){.nav-item>.dropdown-wrapper .nav-dropdown{box-shadow:none}}.nav-item:nth-child(2):before{content:"";position:absolute;z-index:-1;top:50%;left:30%;width:64px;height:64px;background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjU2NiAzLjU4NmE1IDUgMCAwMC0zLjUzIDYuMTI4bDMuNjM4IDEzLjUxOSA0LjgwNy01LjIyOSA2Ljc4MSAyLjExLTMuNjM3LTEzLjUxOGE1IDUgMCAwMC02LjEyOC0zLjUzbC0xLjkzMS41MnptLjA3NiA2LjU1Yy4wODMuMzA3LjA5NS41ODMuMDM2LjgzYTEuMjUgMS4yNSAwIDAxLS4zNC42MTkgMS4zOCAxLjM4IDAgMDEtLjYyMy4zNDljLS4yNS4wNjctLjQ4OS4wNy0uNzE4LjAxYTEuMjU0IDEuMjU0IDAgMDEtLjYwMy0uMzY1IDEuNjkgMS42OSAwIDAxLS4zODMtLjczNCAxLjY5NCAxLjY5NCAwIDAxLS4wMzctLjgyOWMuMDU3LS4yNDYuMTctLjQ1MS4zMzgtLjYxNy4xNjgtLjE2Ny4zNzctLjI4NC42MjYtLjM1MS4yNDgtLjA2Ny40ODctLjA3LjcxNi0uMDEuMjMuMDU5LjQzLjE4LjYwNC4zNjQuMTczLjE4My4zMDIuNDI4LjM4NC43MzV6bS0uNjAyLjE2M2ExLjMgMS4zIDAgMDAtLjIyNC0uNDc4LjcwNC43MDQgMCAwMC0uMzMyLS4yNDMuNjkyLjY5MiAwIDAwLS40MDQtLjAwNS42OTIuNjkyIDAgMDAtLjM0OC4yMDcuNzEyLjcxMiAwIDAwLS4xNjYuMzc3Yy0uMDIyLjE1Mi0uMDA2LjMyNy4wNDcuNTI2LjA1NC4xOTguMTI4LjM1Ny4yMjMuNDc4LjA5Ni4xMi4yMDcuMjAxLjMzMy4yNDMuMTI2LjA0MS4yNjEuMDQzLjQwNS4wMDRhLjY5Mi42OTIgMCAwMC4zNDctLjIwNi43MDQuNzA0IDAgMDAuMTY1LS4zNzcgMS4zIDEuMyAwIDAwLS4wNDYtLjUyNnptMS40MiAxLjEyNGwtLjc1Ni0yLjgxIDEuMTA4LS4yOTdjLjIxMy0uMDU4LjQwNi0uMDY2LjU3OC0uMDI1LjE3MS4wNC4zMTYuMTIyLjQzMy4yNDQuMTE4LjEyMS4yMDIuMjc1LjI1Mi40NjIuMDUuMTg2LjA1NS4zNjIuMDEzLjUyNmEuODYyLjg2MiAwIDAxLS4yNi40MjdjLS4xMzEuMTItLjMwNC4yMS0uNTIuMjY4bC0uNS4xMzQuMjQ2LjkxMS0uNTk0LjE2em0uNjI0LTEuNjU1bC0uNDAzLjEwOC0uMjUyLS45MzYuNC0uMTA4YS42MzMuNjMzIDAgMDEuMzAxLS4wMTguMzkuMzkgMCAwMS4yMTIuMTE4Yy4wNTYuMDYuMDk2LjEzNi4xMjIuMjMuMDI0LjA5Mi4wMjguMTc4LjAxLjI2YS40MDQuNDA0IDAgMDEtLjEyMy4yMS42Mi42MiAwIDAxLS4yNjcuMTM2em0xLjg3Ny45ODJsLS43NTYtMi44MSAxLjg5My0uNTA4LjEzMi40OS0xLjMuMzQ5LjE4LjY3IDEuMjAyLS4zMjQuMTMyLjQ5LTEuMjAxLjMyMy4xOC42NyAxLjMwNC0uMzUuMTMyLjQ5LTEuODk4LjUxem0zLjk1OS00LjA3OGwuNzU2IDIuODEtLjUxMy4xMzctMS42OTgtMS40MzktLjAyLjAwNi40NzUgMS43NjgtLjU5NC4xNi0uNzU2LTIuODEuNTIxLS4xNCAxLjY4OCAxLjQ0LjAyNS0uMDA2LS40NzUtMS43NjcuNTktLjE1OXptLTcuODQgMTAuM2wtLjc1Ny0yLjgwOSAxLjEyNS0uMzAyYy4yMDctLjA1Ni4zODctLjA3Mi41NDItLjA0OGEuNzExLjcxMSAwIDAxLjM4LjE3MmMuMDk4LjA4OS4xNjcuMjA0LjIwNC4zNDVhLjU4OC41ODggMCAwMS0uMTE0LjU1OS43Ny43NyAwIDAxLS4yMy4xOGwuMDA3LjAyOGEuNjY0LjY2NCAwIDAxLjYxNy4xODMuNzE2LjcxNiAwIDAxLjE4My4zMzMuNzU2Ljc1NiAwIDAxLS4wMDMuNDI5Ljc3NS43NzUgMCAwMS0uMjUxLjM2MyAxLjI4NCAxLjI4NCAwIDAxLS41MDQuMjQ0bC0xLjIuMzIzem0uNDYyLS42NDVsLjQ4NS0uMTNjLjE2NS0uMDQ1LjI3Ny0uMTA5LjMzNi0uMTkyYS4zMjguMzI4IDAgMDAuMDQ1LS4yODYuMzkuMzkgMCAwMC0uMTExLS4xOS4zOTYuMzk2IDAgMDAtLjE5OC0uMDk4LjU3LjU3IDAgMDAtLjI2LjAxNmwtLjQ5Ny4xMzQuMi43NDZ6bS0uMzA5LTEuMTQ4bC40NC0uMTE5YS41NDMuNTQzIDAgMDAuMjA2LS4xLjM3NC4zNzQgMCAwMC4xMTgtLjE2NC4zMzMuMzMzIDAgMDAuMDA1LS4yMDYuMzIuMzIgMCAwMC0uMTc1LS4yMTcuNDY1LjQ2NSAwIDAwLS4zMy0uMDFsLS40NS4xMi4xODYuNjk2em0yLjQgMS4xMDZsLS43NTYtMi44MDkgMS44OTMtLjUxLjEzMi40OS0xLjMuMzUuMTguNjcgMS4yMDItLjMyNC4xMzIuNDktMS4yMDEuMzIzLjE4LjY3IDEuMzA0LS4zNS4xMzIuNDktMS44OTguNTF6bTEuNjM0LTIuOTI3bC0uMTMyLS40OSAyLjMwNy0uNjIuMTMyLjQ5LS44Ni4yMy42MjQgMi4zMi0uNTg3LjE1OC0uNjI0LTIuMzItLjg2LjIzMnptMy40NTIgMS41NTlsLS42MzYuMTcxLjIxMy0zLjA3Ljc2Ni0uMjA2IDEuNzI0IDIuNTQ5LS42MzYuMTctLjM4LS41ODQtMS4wMTUuMjczLS4wMzYuNjk3em0uMTQ0LTIuMzYzbC42My45Ny0uNzEyLjE5Mi4wNi0xLjE1Ni4wMjItLjAwNnptLTUuNTktNi40NzZjLjUzMi0uMTQzLjg1NC0uNjcuNzE4LTEuMTc3LS4xMzYtLjUwNi0uNjgtLjgtMS4yMTMtLjY1Ny0uNTMzLjE0My0uODU1LjY3LS43MTggMS4xNzcuMTM2LjUwNy42NzkuOCAxLjIxMi42NTd6IiBmaWxsPSIjRUU0QjRCIi8+PC9zdmc+") no-repeat;background-size:100%}.is-dark body{color:#ededed;background:#1c1c1c}.is-dark .homepage section:first-child{background-image:url(/assets/home-bg-dark.jpg);background-color:transparent}.is-dark .navbar{background:#292929}.is-dark .navbar .links .dropdown-title{color:#ededed}.is-dark .navbar .links .nav-dropdown{background:#363636}.is-dark .navbar .links .nav-dropdown .dropdown-item h4{border-color:#434343}.is-dark .navbar .links .nav-link,.is-dark .navbar .site-name{color:#ededed}.is-dark .navbar .search-box input{background-color:hsla(0,0%,100%,.08);color:#eaeaea}.is-dark .sidebar{background:#212121;border-color:transparent}.is-dark .sidebar-link,.is-dark .sidebar .mobile-dropdown-title{color:#ededed}.is-dark .custom-block.tip{background:hsla(0,0%,100%,.08)}.is-dark .custom-block.warning{color:gold}.is-dark .custom-block.warning .custom-block-title{color:#ff0}.is-dark table td,.is-dark table th{border-color:#363636}.is-dark table tr:nth-child(2n){background:hsla(0,0%,100%,.08)}.is-dark h2{border-color:#434343}.is-dark code{color:#ededed;background-color:hsla(0,0%,100%,.08)}.is-dark .page-nav .inner{border-color:#434343}.is-dark .page-edit .last-updated .prefix{color:#ededed}.is-dark .page-edit .last-updated .time{color:#bebebe}.is-dark .content__default>footer{border-color:#434343;color:#eaeaea}.changelog h2{border:none;font-size:2rem;font-weight:700}.changelog .content__default ul:not(.social-share-list){margin-left:1rem}.changelog .sidebar .sidebar-sub-headers{padding-left:2.5rem;position:relative}.changelog .sidebar .sidebar-sub-headers:before{content:"";position:absolute;width:2px;height:100%;background:$$borderColor}.is-dark .changelog .sidebar .sidebar-sub-headers:before{background:#444}.changelog .sidebar .sidebar-sub-headers li a{padding-left:1rem}.tooltip{display:block!important;z-index:10000}.tooltip .tooltip-inner{background:#000;color:#fff;border-radius:6px;padding:5px 10px 4px}.tooltip .tooltip-arrow{width:0;height:0;border-style:solid;position:absolute;margin:5px;border-color:#000;z-index:1}.tooltip[x-placement^=top]{margin-bottom:5px}.tooltip[x-placement^=top] .tooltip-arrow{border-width:5px 5px 0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;bottom:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=bottom]{margin-top:5px}.tooltip[x-placement^=bottom] .tooltip-arrow{border-width:0 5px 5px;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important;top:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=right]{margin-left:5px}.tooltip[x-placement^=right] .tooltip-arrow{border-width:5px 5px 5px 0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important;left:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip[x-placement^=left]{margin-right:5px}.tooltip[x-placement^=left] .tooltip-arrow{border-width:5px 0 5px 5px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;right:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip.popover{$color:#f9f9f9}.tooltip.popover .popover-inner{background:$color;color:#000;padding:24px;border-radius:5px;box-shadow:0 5px 30px rgba(0,0,0,.1)}.tooltip.popover .popover-arrow{border-color:$color}.tooltip[aria-hidden=true]{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s}.tooltip[aria-hidden=false]{visibility:visible;opacity:1;transition:opacity .15s}#nprogress{pointer-events:none}#nprogress .bar{background:#1bb89b;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #1bb89b,0 0 5px #1bb89b;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#1bb89b transparent transparent #1bb89b;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}html{scroll-behavior:smooth}.social-share{position:relative;box-sizing:border-box}.social-share-list{list-style:none;padding:0;margin:0;line-height:1}.social-share-network{position:relative;display:inline-block;vertical-align:middle}.social-share-trigger{color:#6a8bad}.social-share-btn{position:relative;width:56px;height:56px;padding:0;border-radius:50%;font-size:32px;font-family:inherit;text-align:center;background:none;border:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:all .3s ease-out}.social-share-btn:not(.social-share-trigger){color:#545e66}.social-share-btn:not(.social-share-trigger):hover{background-color:hsla(0,0%,73.7%,.15)}.social-share-icon-svg svg{width:1em!important;height:1em!important;fill:currentColor!important;vertical-align:-.15em!important;overflow:hidden!important}.social-share-icon-img{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;background-repeat:no-repeat;background-position:50%;background-size:contain}.social-share-global{position:fixed;right:0;bottom:50%;z-index:99999;background-color:#fff;border:1px solid #efefef;border-right:none;border-radius:8px 0 0 8px;transform:translateY(50%);transition:all .3s ease-out;box-shadow:-2px 1px 6px rgba(0,0,0,.08)}.social-share-global .social-share-network{display:block}.social-share-global .social-share-btn{width:60px;height:60px;border-radius:5px;font-size:36px}.social-share-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.5);transition:all .3s ease-out;opacity:0}.social-share-overlay.show{opacity:1}.social-share-qrcode{display:block;border-radius:4px;overflow:hidden;box-shadow:0 0 4px rgba(0,0,0,.08)}@media screen and (max-width:719px){.social-share-btn{width:40px;height:40px;font-size:28px}.social-share-global{bottom:15%;border-radius:5px 0 0 5px;transform:translate(0);box-shadow:-1px 1px 3px rgba(0,0,0,.03)}.social-share-global .social-share-btn{width:40px;height:40px;font-size:28px;border-radius:3px}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#1bb89b;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #18a68b}.home .hero .action-button:hover{background-color:#1fd2b1}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#1bb89b}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#1bb89b}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #1bb89b;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#1bb89b}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #1ecdad}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-heading.clickable:hover{color:#1bb89b}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#1bb89b}a.sidebar-link.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.content__default[data-v-56d60325]{max-width:1200px}[data-v-56d60325] .page-edit{display:none}.ad-wrapper{max-width:740px;margin:0 auto}[data-v-93cd5b66] .page-edit{display:none}.content__default[data-v-3edf7ac0]{max-width:900px}[data-v-3edf7ac0] .page-edit{display:none}ins[data-v-3edf7ac0]{margin:2rem 0}.feature-links[data-v-3edf7ac0]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:2.5rem 1.5rem;list-style:none;padding:0;margin:0}.feature-links li[data-v-3edf7ac0]{flex:1 1 200px}.feature-links li a[data-v-3edf7ac0]{color:currentColor;display:block;text-align:center;transition:color .3s}.feature-links li a .image[data-v-3edf7ac0]{color:#eee;height:200px;overflow:hidden;border-radius:6px;box-shadow:0 .2rem .6rem rgba(0,0,0,.1);position:relative}.is-dark .feature-links li a .image[data-v-3edf7ac0]{color:#292929}.feature-links li a .image .iconify[data-v-3edf7ac0]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}.feature-links li a .image img[data-v-3edf7ac0]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top left;object-position:top left;transition:transform .3s ease-out;position:relative;z-index:1}.feature-links li a span[data-v-3edf7ac0]{display:block;margin-top:5px;font-size:1.2em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;text-transform:capitalize}.feature-links li a[data-v-3edf7ac0]:hover{color:#1bb89b;text-decoration:none}.feature-links li a:hover img[data-v-3edf7ac0]{transform:scale(1.06)}.content__default[data-v-41cc6025]{margin-bottom:-2.5rem}.ad-wrapper[data-v-41cc6025]{max-width:740px;margin:0 auto}.a-button[data-v-4ef368cc]{background:#545e66;border:0;border-radius:.2rem;box-shadow:0 4px #2c3e50;color:#fff;cursor:pointer;display:inline-block;font-size:1rem;padding:.6rem 1.8rem;transition:transform .2s,box-shadow .2s}.a-button[data-v-4ef368cc]:active{transform:translateY(4px);box-shadow:none}.a-button[data-v-4ef368cc]:hover{text-decoration:none!important}a[data-v-7233fed5]{display:flex;align-items:center;color:#2c3e50;transition:color .3s;margin-right:.5rem}.is-dark a[data-v-7233fed5]{color:#eaeaea}a[data-v-7233fed5]:hover{color:#1bb89b;text-decoration:none!important}a img[data-v-7233fed5]{width:2rem;height:2rem;margin-right:.25rem}button[data-v-00e9533b]{width:24px;height:24px;padding:12px;box-sizing:unset;background:#eee;border:none;border-radius:50%;color:#2c3e50;cursor:pointer;transition:all .2s}button[data-v-00e9533b]:hover{transform:scale(1.15)}button.active[data-v-00e9533b]{transform:scale(1.15);background:#1bb89b;color:#fff}.is-dark button[data-v-00e9533b]:not(.active){background:#292929;color:#aaa}.first-created[data-v-08d268a8]{display:flex;align-items:center;gap:4px}.adsbygoogle[data-ad-status=filled][data-v-653796b7]{margin:3rem 0;text-align:center}iconify-icon[data-v-d01ba734]{display:block}span[data-v-1f6ea1c9]{display:inline-flex;align-items:center;vertical-align:middle;margin-left:.25rem}.banner[data-v-2685687c]{margin:2rem auto}.page-edit[data-v-d53989e8]{padding:0}p[data-v-d53989e8]{text-align:right}b[data-v-d53989e8]{font-weight:500}.Vue-Toastification__container{z-index:9999;position:fixed;padding:4px;width:600px;box-sizing:border-box;display:flex;min-height:100%;color:#fff;flex-direction:column;pointer-events:none}@media only screen and (min-width:600px){.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:1em}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:1em;flex-direction:column-reverse}.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.top-left{left:1em}.Vue-Toastification__container.bottom-left .Vue-Toastification__toast,.Vue-Toastification__container.top-left .Vue-Toastification__toast{margin-right:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-left .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-left .Vue-Toastification__toast--rtl{margin-right:unset;margin-left:auto}}.Vue-Toastification__container.bottom-right,.Vue-Toastification__container.top-right{right:1em}.Vue-Toastification__container.bottom-right .Vue-Toastification__toast,.Vue-Toastification__container.top-right .Vue-Toastification__toast{margin-left:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-right .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-right .Vue-Toastification__toast--rtl{margin-left:unset;margin-right:auto}}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.top-center{left:50%;margin-left:-300px}.Vue-Toastification__container.bottom-center .Vue-Toastification__toast,.Vue-Toastification__container.top-center .Vue-Toastification__toast{margin-left:auto;margin-right:auto}}@media only screen and (max-width:600px){.Vue-Toastification__container{width:100vw;padding:0;left:0;margin:0}.Vue-Toastification__container .Vue-Toastification__toast{width:100%}.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:0}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:0;flex-direction:column-reverse}}.Vue-Toastification__toast{display:inline-flex;position:relative;max-height:800px;min-height:64px;box-sizing:border-box;margin-bottom:1rem;padding:22px 24px;border-radius:8px;box-shadow:0 1px 10px 0 rgba(0,0,0,.1),0 2px 15px 0 rgba(0,0,0,.05);justify-content:space-between;font-family:Lato,Helvetica,Roboto,Arial,sans-serif;max-width:600px;min-width:326px;pointer-events:auto;overflow:hidden;transform:translateZ(0);direction:ltr}.Vue-Toastification__toast--rtl{direction:rtl}.Vue-Toastification__toast--default{background-color:#1976d2;color:#fff}.Vue-Toastification__toast--info{background-color:#2196f3;color:#fff}.Vue-Toastification__toast--success{background-color:#4caf50;color:#fff}.Vue-Toastification__toast--error{background-color:#ff5252;color:#fff}.Vue-Toastification__toast--warning{background-color:#ffc107;color:#fff}@media only screen and (max-width:600px){.Vue-Toastification__toast{border-radius:0;margin-bottom:.5rem}}.Vue-Toastification__toast-body{flex:1;line-height:24px;font-size:16px;word-break:break-word;white-space:pre-wrap}.Vue-Toastification__toast-component-body{flex:1}.Vue-Toastification__toast.disable-transition{transition:none!important;animation:none!important}.Vue-Toastification__close-button{font-weight:700;font-size:24px;line-height:24px;background:transparent;outline:none;border:none;padding:0 0 0 10px;cursor:pointer;transition:.3s ease;align-items:center;color:#fff;opacity:.3;transition:visibility 0s,opacity .2s linear}.Vue-Toastification__close-button:focus,.Vue-Toastification__close-button:hover{opacity:1}.Vue-Toastification__toast:not(:hover) .Vue-Toastification__close-button.show-on-hover{opacity:0}.Vue-Toastification__toast--rtl .Vue-Toastification__close-button{padding-left:unset;padding-right:10px}@keyframes scale-x-frames{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Vue-Toastification__progress-bar{position:absolute;bottom:0;left:0;width:100%;height:5px;z-index:10000;background-color:hsla(0,0%,100%,.7);transform-origin:left;animation:scale-x-frames linear 1 forwards}.Vue-Toastification__toast--rtl .Vue-Toastification__progress-bar{right:0;left:unset;transform-origin:right}.Vue-Toastification__icon{margin:auto 18px auto 0;background:transparent;outline:none;border:none;padding:0;transition:.3s ease;align-items:center;width:20px;height:100%}.Vue-Toastification__toast--rtl .Vue-Toastification__icon{margin:auto 0 auto 18px}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceOutRight{40%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(1000px,0,0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Vue-Toastification__bounce-enter-active.bottom-left,.Vue-Toastification__bounce-enter-active.top-left{animation-name:bounceInLeft}.Vue-Toastification__bounce-enter-active.bottom-right,.Vue-Toastification__bounce-enter-active.top-right{animation-name:bounceInRight}.Vue-Toastification__bounce-enter-active.top-center{animation-name:bounceInDown}.Vue-Toastification__bounce-enter-active.bottom-center{animation-name:bounceInUp}.Vue-Toastification__bounce-leave-active.bottom-left,.Vue-Toastification__bounce-leave-active.top-left{animation-name:bounceOutLeft}.Vue-Toastification__bounce-leave-active.bottom-right,.Vue-Toastification__bounce-leave-active.top-right{animation-name:bounceOutRight}.Vue-Toastification__bounce-leave-active.top-center{animation-name:bounceOutUp}.Vue-Toastification__bounce-leave-active.bottom-center{animation-name:bounceOutDown}.Vue-Toastification__bounce-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes fadeOutTop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}@keyframes fadeOutLeft{0%{transform:translateX(0);opacity:1}to{transform:translateX(-50px);opacity:0}}@keyframes fadeOutBottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(50px);opacity:0}}@keyframes fadeOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(50px);opacity:0}}@keyframes fadeInLeft{0%{transform:translateX(-50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInRight{0%{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInTop{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInBottom{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.Vue-Toastification__fade-enter-active.bottom-left,.Vue-Toastification__fade-enter-active.top-left{animation-name:fadeInLeft}.Vue-Toastification__fade-enter-active.bottom-right,.Vue-Toastification__fade-enter-active.top-right{animation-name:fadeInRight}.Vue-Toastification__fade-enter-active.top-center{animation-name:fadeInTop}.Vue-Toastification__fade-enter-active.bottom-center{animation-name:fadeInBottom}.Vue-Toastification__fade-leave-active.bottom-left,.Vue-Toastification__fade-leave-active.top-left{animation-name:fadeOutLeft}.Vue-Toastification__fade-leave-active.bottom-right,.Vue-Toastification__fade-leave-active.top-right{animation-name:fadeOutRight}.Vue-Toastification__fade-leave-active.top-center{animation-name:fadeOutTop}.Vue-Toastification__fade-leave-active.bottom-center{animation-name:fadeOutBottom}.Vue-Toastification__fade-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes slideInBlurredLeft{0%{transform:translateX(-1000px) scaleX(2.5) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredTop{0%{transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredRight{0%{transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredBottom{0%{transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideOutBlurredTop{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 0;filter:blur(0);opacity:1}to{transform:translateY(-1000px) scaleY(2) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredBottom{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateY(1000px) scaleY(2) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredLeft{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(-1000px) scaleX(2) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}}@keyframes slideOutBlurredRight{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(1000px) scaleX(2) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}}.Vue-Toastification__slideBlurred-enter-active.bottom-left,.Vue-Toastification__slideBlurred-enter-active.top-left{animation-name:slideInBlurredLeft}.Vue-Toastification__slideBlurred-enter-active.bottom-right,.Vue-Toastification__slideBlurred-enter-active.top-right{animation-name:slideInBlurredRight}.Vue-Toastification__slideBlurred-enter-active.top-center{animation-name:slideInBlurredTop}.Vue-Toastification__slideBlurred-enter-active.bottom-center{animation-name:slideInBlurredBottom}.Vue-Toastification__slideBlurred-leave-active.bottom-left,.Vue-Toastification__slideBlurred-leave-active.top-left{animation-name:slideOutBlurredLeft}.Vue-Toastification__slideBlurred-leave-active.bottom-right,.Vue-Toastification__slideBlurred-leave-active.top-right{animation-name:slideOutBlurredRight}.Vue-Toastification__slideBlurred-leave-active.top-center{animation-name:slideOutBlurredTop}.Vue-Toastification__slideBlurred-leave-active.bottom-center{animation-name:slideOutBlurredBottom}.Vue-Toastification__slideBlurred-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}.Vue-Toastification__toast--default{background:#292929;box-shadow:none;color:#eaeaea}.Vue-Toastification__close-button{color:#eaeaea}.Vue-Toastification__icon{display:none}.site-settings[data-v-39672356]{position:fixed;right:0;bottom:0;width:64px;height:64px}.toggle[data-v-39672356]{width:100%;height:100%;padding:20% 54% 54% 20%;background:none;border:none;border-radius:50%;cursor:pointer;background:#1bb89b;transition:transform .2s;color:#fff}.site-settings:hover .toggle[data-v-39672356],.toggle.active[data-v-39672356]{transform:scale(1.2)}.toggle[data-v-39672356] iconify-icon{margin-top:-16px;margin-left:8px}ul[data-v-39672356]{position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;list-style:none;display:flex;z-index:-1;transform:scale(0)}ul li[data-v-39672356]{position:absolute}ul li[data-v-39672356]:first-child{transform:translateX(-150%)}ul li[data-v-39672356]:nth-child(2){transform:translate(-100%,-100%)}ul li[data-v-39672356]:last-child{transform:translateY(-150%)}.access[data-v-54c781ee]{margin:2rem 0;text-align:center}.access a[data-v-54c781ee]{display:inline-block;margin:.6rem;transition:transform .2s}.access a[data-v-54c781ee]:hover{transform:scale(1.05)}.blog-links[data-v-35f506a6]{display:grid;gap:3rem 2rem;list-style:none;padding:0}.blog-links>li[data-v-35f506a6]{border-radius:1rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.is-dark .blog-links>li[data-v-35f506a6]{background:#1f1f1f}.blog-links a[data-v-35f506a6]{display:flex;flex-direction:column;color:currentColor;font-weight:unset}.blog-links a[data-v-35f506a6]>:not(.blog-image){padding:0 1rem}.blog-links a .blog-image[data-v-35f506a6]{height:250px;overflow:hidden}.blog-links a .blog-image img[data-v-35f506a6]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease-out}.blog-links a .first-created[data-v-35f506a6]{font-size:.9rem}.blog-links a h2[data-v-35f506a6]{border-bottom:none;transition:color .3s}.blog-links a[data-v-35f506a6]:hover{text-decoration:none}.blog-links a:hover img[data-v-35f506a6]{transform:scale(1.06)}.blog-links a:hover h2[data-v-35f506a6]{color:#1bb89b}@media (min-width:720px){.blog-links[data-v-35f506a6]{grid-template-columns:1fr 1fr}}@media (min-width:960px){.blog-links[data-v-35f506a6]{grid-template-columns:1fr 1fr 1fr}}.blog-meta[data-v-37d0b7b8]{display:flex;flex-wrap:wrap;justify-content:space-between}div[data-v-13b53e33]{display:flex;align-items:center}div svg[data-v-13b53e33]{width:1rem;height:1rem}ul[data-v-13b53e33]{list-style:none;display:flex;padding:1rem .5rem;font-size:.85rem}ul a[data-v-13b53e33]{background:#eee;border-radius:.4rem;color:currentColor;font-weight:400;padding:.3rem .4rem;margin:0 .2rem}ul a[data-v-13b53e33]:hover{text-decoration:underline}.is-dark ul a[data-v-13b53e33]{background:#292929}nav[data-v-7c5b105f]{display:flex;flex-wrap:wrap;justify-content:center;margin:2rem 0}nav a[data-v-7c5b105f]{background:#eee;border-radius:1rem;color:currentColor;margin:.3rem;padding:.6rem;min-width:4rem;text-align:center}nav a.router-link-exact-active[data-v-7c5b105f]{color:#fff;background:#1bb89b}nav a[data-v-7c5b105f]:hover{text-decoration:none!important}.is-dark nav a[data-v-7c5b105f]:not(.router-link-exact-active){background:#292929}@media (min-width:420px){nav a[data-v-7c5b105f]{margin:.5rem;padding:1rem}}section[data-v-a37ba0d0]{margin:0 auto;max-width:740px;padding:2rem 2.5rem}div[data-v-43263439]{margin:.5rem 0}input[data-v-43263439],textarea[data-v-43263439]{outline:none;padding:.5rem 1rem;width:100%;font-size:100%;font-family:inherit;box-sizing:border-box;border-radius:6px;border:1px solid #aaa}input[data-v-43263439]:focus,textarea[data-v-43263439]:focus{border-color:#1bb89b}input.error[data-v-43263439],textarea.error[data-v-43263439]{border-color:red}textarea[data-v-43263439]{height:200px;resize:vertical}.link-buttons[data-v-fe445868]{margin:0 auto 1.8rem;padding:0;list-style:none;display:flex;justify-content:center}.link-buttons a[data-v-fe445868]{display:block;min-width:64px;padding:12px;margin:0 4px;border-radius:8px;box-sizing:border-box;transition-property:transform,box-shadow;transition-duration:.2s;background:#eee;box-shadow:0 3px #d0d0d0;border-bottom:2px solid #d0d0d0}.link-buttons a[data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a img[data-v-fe445868]{display:block;margin:auto;width:auto}.link-buttons a[data-social=twitter][data-v-fe445868]{background:#1da1f2;box-shadow:0 3px #2f81be;border-bottom:2px solid #2f81be}.link-buttons a[data-social=twitter][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=github][data-v-fe445868]{background:#333;box-shadow:0 3px #000;border-bottom:2px solid #000}.link-buttons a[data-social=github][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=youtube][data-v-fe445868]{background:red;box-shadow:0 3px #900;border-bottom:2px solid #900}.link-buttons a[data-social=youtube][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}footer[data-v-fe445868]{border-top:1px solid #eaecef;color:#2c3e50;padding:2.5rem;text-align:center}.is-dark footer[data-v-fe445868]{border-color:#444;color:#eaeaea}.home .footer{padding:0}ul[data-v-59795e29]{list-style:none;margin:0;padding:0}li[data-v-59795e29]{border:1px solid;border-radius:4px;box-sizing:border-box;text-align:center;margin:12px 4px;padding:0 16px;width:100%}h2[data-v-59795e29]{border:0;margin-bottom:0;padding:0}@media (min-width:720px){ul[data-v-59795e29]{display:flex}}.social[data-v-4bc0a2be]{display:flex;align-items:center;justify-content:flex-end}.is-dark .social[data-v-4bc0a2be] .social-share .social-share-btn{color:#8c8c8c}.social[data-v-4bc0a2be] .social-share .social-share-btn:hover{color:#1bb89b}.social[data-v-4bc0a2be] .social-share .social-share-btn{width:2.5rem;height:2.5rem;font-size:1.5rem}.social[data-v-4bc0a2be] .social-share .social-share-btn>span,section[data-v-568d8f4c]{display:flex;align-items:center;justify-content:center}section[data-v-568d8f4c]{background-image:url(/assets/home-bg.jpg);background-color:#1596f2;background-size:cover;background-attachment:fixed;transition:background .3s;height:100vh;max-height:900px;min-height:500px;box-sizing:border-box;flex-direction:column;position:relative}h1[data-v-568d8f4c]{font-weight:400}button[data-v-568d8f4c]{background:none;border:0;display:block;cursor:pointer;position:relative}button span[data-v-568d8f4c]{display:block;color:#fff;font-size:1.5rem;text-align:center;text-shadow:0 1px 2px #000}button span[data-v-568d8f4c]:first-child{width:150px;height:150px}button span:first-child img[data-v-568d8f4c]{width:100%;height:100%}h1[data-v-568d8f4c]{padding:1rem 2rem;margin:0;color:#fff;text-align:center;text-shadow:0 1px 2px #000;max-width:600px;font-size:3.5rem}.indicator[data-v-568d8f4c]{border:2px solid #fff;border-radius:24px;width:24px;height:36px;position:absolute;bottom:12px}.indicator[data-v-568d8f4c]:before{content:"";position:absolute;width:4px;height:6px;background:#fff;border-radius:2px;top:10%;left:calc(50% - 2px);animation:scroll-down-568d8f4c 1.5s infinite}@media (max-width:640px){h1[data-v-568d8f4c]{font-size:2rem}}@keyframes scroll-down-568d8f4c{0%{opacity:.2;transform:translateY(0)}to{opacity:1;transform:translateY(8px)}}div[data-v-e7a7a3f0]{width:180px;height:200px;flex-shrink:0;overflow:hidden;border-radius:50%}div>iframe[data-v-e7a7a3f0]{border:0;width:180px;height:300px}div[data-v-e7a7a3f0],img[data-v-e7a7a3f0]{margin-right:2rem}.right div[data-v-e7a7a3f0],.right img[data-v-e7a7a3f0]{margin-right:0;margin-left:2rem}@media (max-width:640px){div[data-v-e7a7a3f0],img[data-v-e7a7a3f0]{margin:0!important}}ul[data-v-65ae56a6]{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}li[data-v-65ae56a6]{background:rgba(0,0,0,.05);border-radius:1rem;padding:3rem;position:relative}li[data-v-65ae56a6]:before{content:"\201C";display:block;font-family:serif;font-size:16rem;opacity:.1;position:absolute;top:-6rem;left:.5rem}li .content[data-v-65ae56a6]{font-style:italic;margin-bottom:2rem}li figure[data-v-65ae56a6]{margin:0;display:flex;align-items:center}li figure img[data-v-65ae56a6]{border-radius:50%}li figcaption[data-v-65ae56a6]{margin-left:2rem}li figcaption .author[data-v-65ae56a6]{font-size:1.2rem;font-weight:700}.is-dark li[data-v-65ae56a6]{background:#292929}@media (max-width:959px){ul[data-v-65ae56a6]{grid-template-columns:none}}@media (max-width:419px){li[data-v-65ae56a6]{padding:2rem}}section[data-v-06508d2a]{padding:8rem 4rem}section>div[data-v-06508d2a]{align-items:center;display:flex;justify-content:center;margin:auto;max-width:1024px}section article>h2[data-v-06508d2a]{border:0;margin-top:0;font-size:2.5rem}section article>p[data-v-06508d2a]{text-align:justify;max-width:640px}section article>footer[data-v-06508d2a]{text-align:right}section article>footer>a[data-v-06508d2a]{display:inline-block;font-size:1rem;padding:.4rem 1.5rem}section article>footer>a[data-v-06508d2a]:not(:first-child){margin-left:8%}section.right>div>[data-v-06508d2a]:first-child{order:1}section.right article>footer[data-v-06508d2a]{text-align:left}section.right article>footer>a[data-v-06508d2a]:not(:first-child){margin-right:8%}section.center footer[data-v-06508d2a],section.center h2[data-v-06508d2a]{text-align:center}section.is-dark[data-v-06508d2a]{background:rgba(0,0,0,.05)}@media (max-width:640px){section[data-v-06508d2a]{padding:4rem 2rem}section>div[data-v-06508d2a]{flex-direction:column}section>div article>footer[data-v-06508d2a],section>div article>h2[data-v-06508d2a]{text-align:center}section.right>div [data-v-06508d2a]:first-child{order:unset}section.right article>footer[data-v-06508d2a],section.right article>h2[data-v-06508d2a]{text-align:center}}ul[data-v-145d0661]{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0 0 1rem;padding:0}li[data-v-145d0661]{background:#fff;border-radius:.75rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);overflow:hidden}li:hover img[data-v-145d0661]{transform:scale(1.4)}.is-dark li[data-v-145d0661]{background:#292929}span[data-v-145d0661]{display:block;overflow:hidden}span[data-v-145d0661]:last-child{color:#2c3e50;padding:.5rem 1rem;text-align:center}.is-dark span[data-v-145d0661]:last-child{color:#eaeaea}img[data-v-145d0661]{display:block;transform:scale(1.35);transition:transform .3s ease-out}@media (max-width:959px){ul[data-v-145d0661]{grid-template-columns:repeat(2,1fr)}}@media (max-width:719px){ul[data-v-145d0661]{grid-template-columns:none}}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}.theme-code-block[data-v-759a7d02]{display:none}.theme-code-block__active[data-v-759a7d02]{display:block}.theme-code-block>pre[data-v-759a7d02]{background-color:orange}.theme-code-group__nav[data-v-deefee04]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-deefee04]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-deefee04]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-deefee04]{border-bottom:1px solid #42b983}.pre-blank[data-v-deefee04]{color:#42b983} \ No newline at end of file +code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#1bb89b}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#1bb89b}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;-webkit-user-select:none;user-select:none;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}#app{transition:background .3s}.homepage .logo,.homepage>.home{padding:0;max-width:unset}.homepage .logo .footer,.homepage .logo .hero,.homepage>.home .footer,.homepage>.home .hero{display:none}.homepage .navbar{opacity:0;transform:translateY(-58px);transition:.3s}.homepage .navbar.show{opacity:1;transform:translateY(0)}.navbar{border:0;box-shadow:0 1px 1rem rgba(0,0,0,.08);transition:background .3s}.navbar .links{background:none!important}.navbar .search-box>input{border-color:transparent;border-radius:.5rem;background-color:#eee}.navbar .search-box>input.focused{background-color:transparent}.navbar .nav-item>a{height:2.4rem}.sidebar{transition:background .3s,transform .2s ease}.page{min-height:100vh;box-sizing:border-box}.nav-item>.dropdown-wrapper .nav-dropdown{border:0;box-shadow:0 .3rem .3rem rgba(0,0,0,.2)}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link{border-left:2px solid transparent;transition:.3s}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link.router-link-active{border-left-color:#1bb89b}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link:after{content:none}main{overflow-x:hidden}img[alt=win7simu]{width:45px;height:45px;vertical-align:bottom}.banner{margin:1rem 0;width:100%}.embed-responsive iframe{display:block;margin:auto;max-width:100%}.contains-task-list{list-style:none;padding:0}.contains-task-list input{margin:0 8px 0 0;transform:scale(1.2)}@media (max-width:719px){.nav-item>.dropdown-wrapper .nav-dropdown{box-shadow:none}}.nav-item:nth-child(2):before{content:"";position:absolute;z-index:-1;top:50%;left:30%;width:64px;height:64px;background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjU2NiAzLjU4NmE1IDUgMCAwMC0zLjUzIDYuMTI4bDMuNjM4IDEzLjUxOSA0LjgwNy01LjIyOSA2Ljc4MSAyLjExLTMuNjM3LTEzLjUxOGE1IDUgMCAwMC02LjEyOC0zLjUzbC0xLjkzMS41MnptLjA3NiA2LjU1Yy4wODMuMzA3LjA5NS41ODMuMDM2LjgzYTEuMjUgMS4yNSAwIDAxLS4zNC42MTkgMS4zOCAxLjM4IDAgMDEtLjYyMy4zNDljLS4yNS4wNjctLjQ4OS4wNy0uNzE4LjAxYTEuMjU0IDEuMjU0IDAgMDEtLjYwMy0uMzY1IDEuNjkgMS42OSAwIDAxLS4zODMtLjczNCAxLjY5NCAxLjY5NCAwIDAxLS4wMzctLjgyOWMuMDU3LS4yNDYuMTctLjQ1MS4zMzgtLjYxNy4xNjgtLjE2Ny4zNzctLjI4NC42MjYtLjM1MS4yNDgtLjA2Ny40ODctLjA3LjcxNi0uMDEuMjMuMDU5LjQzLjE4LjYwNC4zNjQuMTczLjE4My4zMDIuNDI4LjM4NC43MzV6bS0uNjAyLjE2M2ExLjMgMS4zIDAgMDAtLjIyNC0uNDc4LjcwNC43MDQgMCAwMC0uMzMyLS4yNDMuNjkyLjY5MiAwIDAwLS40MDQtLjAwNS42OTIuNjkyIDAgMDAtLjM0OC4yMDcuNzEyLjcxMiAwIDAwLS4xNjYuMzc3Yy0uMDIyLjE1Mi0uMDA2LjMyNy4wNDcuNTI2LjA1NC4xOTguMTI4LjM1Ny4yMjMuNDc4LjA5Ni4xMi4yMDcuMjAxLjMzMy4yNDMuMTI2LjA0MS4yNjEuMDQzLjQwNS4wMDRhLjY5Mi42OTIgMCAwMC4zNDctLjIwNi43MDQuNzA0IDAgMDAuMTY1LS4zNzcgMS4zIDEuMyAwIDAwLS4wNDYtLjUyNnptMS40MiAxLjEyNGwtLjc1Ni0yLjgxIDEuMTA4LS4yOTdjLjIxMy0uMDU4LjQwNi0uMDY2LjU3OC0uMDI1LjE3MS4wNC4zMTYuMTIyLjQzMy4yNDQuMTE4LjEyMS4yMDIuMjc1LjI1Mi40NjIuMDUuMTg2LjA1NS4zNjIuMDEzLjUyNmEuODYyLjg2MiAwIDAxLS4yNi40MjdjLS4xMzEuMTItLjMwNC4yMS0uNTIuMjY4bC0uNS4xMzQuMjQ2LjkxMS0uNTk0LjE2em0uNjI0LTEuNjU1bC0uNDAzLjEwOC0uMjUyLS45MzYuNC0uMTA4YS42MzMuNjMzIDAgMDEuMzAxLS4wMTguMzkuMzkgMCAwMS4yMTIuMTE4Yy4wNTYuMDYuMDk2LjEzNi4xMjIuMjMuMDI0LjA5Mi4wMjguMTc4LjAxLjI2YS40MDQuNDA0IDAgMDEtLjEyMy4yMS42Mi42MiAwIDAxLS4yNjcuMTM2em0xLjg3Ny45ODJsLS43NTYtMi44MSAxLjg5My0uNTA4LjEzMi40OS0xLjMuMzQ5LjE4LjY3IDEuMjAyLS4zMjQuMTMyLjQ5LTEuMjAxLjMyMy4xOC42NyAxLjMwNC0uMzUuMTMyLjQ5LTEuODk4LjUxem0zLjk1OS00LjA3OGwuNzU2IDIuODEtLjUxMy4xMzctMS42OTgtMS40MzktLjAyLjAwNi40NzUgMS43NjgtLjU5NC4xNi0uNzU2LTIuODEuNTIxLS4xNCAxLjY4OCAxLjQ0LjAyNS0uMDA2LS40NzUtMS43NjcuNTktLjE1OXptLTcuODQgMTAuM2wtLjc1Ny0yLjgwOSAxLjEyNS0uMzAyYy4yMDctLjA1Ni4zODctLjA3Mi41NDItLjA0OGEuNzExLjcxMSAwIDAxLjM4LjE3MmMuMDk4LjA4OS4xNjcuMjA0LjIwNC4zNDVhLjU4OC41ODggMCAwMS0uMTE0LjU1OS43Ny43NyAwIDAxLS4yMy4xOGwuMDA3LjAyOGEuNjY0LjY2NCAwIDAxLjYxNy4xODMuNzE2LjcxNiAwIDAxLjE4My4zMzMuNzU2Ljc1NiAwIDAxLS4wMDMuNDI5Ljc3NS43NzUgMCAwMS0uMjUxLjM2MyAxLjI4NCAxLjI4NCAwIDAxLS41MDQuMjQ0bC0xLjIuMzIzem0uNDYyLS42NDVsLjQ4NS0uMTNjLjE2NS0uMDQ1LjI3Ny0uMTA5LjMzNi0uMTkyYS4zMjguMzI4IDAgMDAuMDQ1LS4yODYuMzkuMzkgMCAwMC0uMTExLS4xOS4zOTYuMzk2IDAgMDAtLjE5OC0uMDk4LjU3LjU3IDAgMDAtLjI2LjAxNmwtLjQ5Ny4xMzQuMi43NDZ6bS0uMzA5LTEuMTQ4bC40NC0uMTE5YS41NDMuNTQzIDAgMDAuMjA2LS4xLjM3NC4zNzQgMCAwMC4xMTgtLjE2NC4zMzMuMzMzIDAgMDAuMDA1LS4yMDYuMzIuMzIgMCAwMC0uMTc1LS4yMTcuNDY1LjQ2NSAwIDAwLS4zMy0uMDFsLS40NS4xMi4xODYuNjk2em0yLjQgMS4xMDZsLS43NTYtMi44MDkgMS44OTMtLjUxLjEzMi40OS0xLjMuMzUuMTguNjcgMS4yMDItLjMyNC4xMzIuNDktMS4yMDEuMzIzLjE4LjY3IDEuMzA0LS4zNS4xMzIuNDktMS44OTguNTF6bTEuNjM0LTIuOTI3bC0uMTMyLS40OSAyLjMwNy0uNjIuMTMyLjQ5LS44Ni4yMy42MjQgMi4zMi0uNTg3LjE1OC0uNjI0LTIuMzItLjg2LjIzMnptMy40NTIgMS41NTlsLS42MzYuMTcxLjIxMy0zLjA3Ljc2Ni0uMjA2IDEuNzI0IDIuNTQ5LS42MzYuMTctLjM4LS41ODQtMS4wMTUuMjczLS4wMzYuNjk3em0uMTQ0LTIuMzYzbC42My45Ny0uNzEyLjE5Mi4wNi0xLjE1Ni4wMjItLjAwNnptLTUuNTktNi40NzZjLjUzMi0uMTQzLjg1NC0uNjcuNzE4LTEuMTc3LS4xMzYtLjUwNi0uNjgtLjgtMS4yMTMtLjY1Ny0uNTMzLjE0My0uODU1LjY3LS43MTggMS4xNzcuMTM2LjUwNy42NzkuOCAxLjIxMi42NTd6IiBmaWxsPSIjRUU0QjRCIi8+PC9zdmc+") no-repeat;background-size:100%}.is-dark body{color:#ededed;background:#1c1c1c}.is-dark .homepage section:first-child{background-image:url(/assets/home-bg-dark.jpg);background-color:transparent}.is-dark .navbar{background:#292929}.is-dark .navbar .links .dropdown-title{color:#ededed}.is-dark .navbar .links .nav-dropdown{background:#363636}.is-dark .navbar .links .nav-dropdown .dropdown-item h4{border-color:#434343}.is-dark .navbar .links .nav-link,.is-dark .navbar .site-name{color:#ededed}.is-dark .navbar .search-box input{background-color:hsla(0,0%,100%,.08);color:#eaeaea}.is-dark .sidebar{background:#212121;border-color:transparent}.is-dark .sidebar-link,.is-dark .sidebar .mobile-dropdown-title{color:#ededed}.is-dark .custom-block.tip{background:hsla(0,0%,100%,.08)}.is-dark .custom-block.warning{color:gold}.is-dark .custom-block.warning .custom-block-title{color:#ff0}.is-dark table td,.is-dark table th{border-color:#363636}.is-dark table tr:nth-child(2n){background:hsla(0,0%,100%,.08)}.is-dark h2{border-color:#434343}.is-dark code{color:#ededed;background-color:hsla(0,0%,100%,.08)}.is-dark .page-nav .inner{border-color:#434343}.is-dark .page-edit .last-updated .prefix{color:#ededed}.is-dark .page-edit .last-updated .time{color:#bebebe}.is-dark .content__default>footer{border-color:#434343;color:#eaeaea}.changelog h2{border:none;font-size:2rem;font-weight:700}.changelog .content__default ul:not(.social-share-list){margin-left:1rem}.changelog .sidebar .sidebar-sub-headers{padding-left:2.5rem;position:relative}.changelog .sidebar .sidebar-sub-headers:before{content:"";position:absolute;width:2px;height:100%;background:$$borderColor}.is-dark .changelog .sidebar .sidebar-sub-headers:before{background:#444}.changelog .sidebar .sidebar-sub-headers li a{padding-left:1rem}.tooltip{display:block!important;z-index:10000}.tooltip .tooltip-inner{background:#000;color:#fff;border-radius:6px;padding:5px 10px 4px}.tooltip .tooltip-arrow{width:0;height:0;border-style:solid;position:absolute;margin:5px;border-color:#000;z-index:1}.tooltip[x-placement^=top]{margin-bottom:5px}.tooltip[x-placement^=top] .tooltip-arrow{border-width:5px 5px 0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;bottom:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=bottom]{margin-top:5px}.tooltip[x-placement^=bottom] .tooltip-arrow{border-width:0 5px 5px;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important;top:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=right]{margin-left:5px}.tooltip[x-placement^=right] .tooltip-arrow{border-width:5px 5px 5px 0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important;left:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip[x-placement^=left]{margin-right:5px}.tooltip[x-placement^=left] .tooltip-arrow{border-width:5px 0 5px 5px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;right:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip.popover{$color:#f9f9f9}.tooltip.popover .popover-inner{background:$color;color:#000;padding:24px;border-radius:5px;box-shadow:0 5px 30px rgba(0,0,0,.1)}.tooltip.popover .popover-arrow{border-color:$color}.tooltip[aria-hidden=true]{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s}.tooltip[aria-hidden=false]{visibility:visible;opacity:1;transition:opacity .15s}#nprogress{pointer-events:none}#nprogress .bar{background:#1bb89b;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #1bb89b,0 0 5px #1bb89b;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#1bb89b transparent transparent #1bb89b;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}html{scroll-behavior:smooth}.social-share{position:relative;box-sizing:border-box}.social-share-list{list-style:none;padding:0;margin:0;line-height:1}.social-share-network{position:relative;display:inline-block;vertical-align:middle}.social-share-trigger{color:#6a8bad}.social-share-btn{position:relative;width:56px;height:56px;padding:0;border-radius:50%;font-size:32px;font-family:inherit;text-align:center;background:none;border:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:all .3s ease-out}.social-share-btn:not(.social-share-trigger){color:#545e66}.social-share-btn:not(.social-share-trigger):hover{background-color:hsla(0,0%,73.7%,.15)}.social-share-icon-svg svg{width:1em!important;height:1em!important;fill:currentColor!important;vertical-align:-.15em!important;overflow:hidden!important}.social-share-icon-img{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;background-repeat:no-repeat;background-position:50%;background-size:contain}.social-share-global{position:fixed;right:0;bottom:50%;z-index:99999;background-color:#fff;border:1px solid #efefef;border-right:none;border-radius:8px 0 0 8px;transform:translateY(50%);transition:all .3s ease-out;box-shadow:-2px 1px 6px rgba(0,0,0,.08)}.social-share-global .social-share-network{display:block}.social-share-global .social-share-btn{width:60px;height:60px;border-radius:5px;font-size:36px}.social-share-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.5);transition:all .3s ease-out;opacity:0}.social-share-overlay.show{opacity:1}.social-share-qrcode{display:block;border-radius:4px;overflow:hidden;box-shadow:0 0 4px rgba(0,0,0,.08)}@media screen and (max-width:719px){.social-share-btn{width:40px;height:40px;font-size:28px}.social-share-global{bottom:15%;border-radius:5px 0 0 5px;transform:translate(0);box-shadow:-1px 1px 3px rgba(0,0,0,.03)}.social-share-global .social-share-btn{width:40px;height:40px;font-size:28px;border-radius:3px}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#1bb89b;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #18a68b}.home .hero .action-button:hover{background-color:#1fd2b1}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#1bb89b}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#1bb89b}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #1bb89b;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#1bb89b}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #1ecdad}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-heading.clickable:hover{color:#1bb89b}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#1bb89b}a.sidebar-link.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.content__default[data-v-56d60325]{max-width:1200px}[data-v-56d60325] .page-edit{display:none}.ad-wrapper{max-width:740px;margin:0 auto}[data-v-93cd5b66] .page-edit{display:none}.content__default[data-v-3edf7ac0]{max-width:900px}[data-v-3edf7ac0] .page-edit{display:none}ins[data-v-3edf7ac0]{margin:2rem 0}.feature-links[data-v-3edf7ac0]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:2.5rem 1.5rem;list-style:none;padding:0;margin:0}.feature-links li[data-v-3edf7ac0]{flex:1 1 200px}.feature-links li a[data-v-3edf7ac0]{color:currentColor;display:block;text-align:center;transition:color .3s}.feature-links li a .image[data-v-3edf7ac0]{color:#eee;height:200px;overflow:hidden;border-radius:6px;box-shadow:0 .2rem .6rem rgba(0,0,0,.1);position:relative}.is-dark .feature-links li a .image[data-v-3edf7ac0]{color:#292929}.feature-links li a .image .iconify[data-v-3edf7ac0]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}.feature-links li a .image img[data-v-3edf7ac0]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top left;object-position:top left;transition:transform .3s ease-out;position:relative;z-index:1}.feature-links li a span[data-v-3edf7ac0]{display:block;margin-top:5px;font-size:1.2em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;text-transform:capitalize}.feature-links li a[data-v-3edf7ac0]:hover{color:#1bb89b;text-decoration:none}.feature-links li a:hover img[data-v-3edf7ac0]{transform:scale(1.06)}.content__default[data-v-41cc6025]{margin-bottom:-2.5rem}.ad-wrapper[data-v-41cc6025]{max-width:740px;margin:0 auto}.a-button[data-v-4ef368cc]{background:#545e66;border:0;border-radius:.2rem;box-shadow:0 4px #2c3e50;color:#fff;cursor:pointer;display:inline-block;font-size:1rem;padding:.6rem 1.8rem;transition:transform .2s,box-shadow .2s}.a-button[data-v-4ef368cc]:active{transform:translateY(4px);box-shadow:none}.a-button[data-v-4ef368cc]:hover{text-decoration:none!important}a[data-v-7233fed5]{display:flex;align-items:center;color:#2c3e50;transition:color .3s;margin-right:.5rem}.is-dark a[data-v-7233fed5]{color:#eaeaea}a[data-v-7233fed5]:hover{color:#1bb89b;text-decoration:none!important}a img[data-v-7233fed5]{width:2rem;height:2rem;margin-right:.25rem}button[data-v-00e9533b]{width:24px;height:24px;padding:12px;box-sizing:unset;background:#eee;border:none;border-radius:50%;color:#2c3e50;cursor:pointer;transition:all .2s}button[data-v-00e9533b]:hover{transform:scale(1.15)}button.active[data-v-00e9533b]{transform:scale(1.15);background:#1bb89b;color:#fff}.is-dark button[data-v-00e9533b]:not(.active){background:#292929;color:#aaa}.first-created[data-v-08d268a8]{display:flex;align-items:center;gap:4px}.adsbygoogle[data-ad-status=filled][data-v-653796b7]{margin:3rem 0;text-align:center}iconify-icon[data-v-d01ba734]{display:block}span[data-v-1f6ea1c9]{display:inline-flex;align-items:center;vertical-align:middle;margin-left:.25rem}.banner[data-v-2685687c]{margin:2rem auto}.page-edit[data-v-d53989e8]{padding:0}p[data-v-d53989e8]{text-align:right}b[data-v-d53989e8]{font-weight:500}.Vue-Toastification__container{z-index:9999;position:fixed;padding:4px;width:600px;box-sizing:border-box;display:flex;min-height:100%;color:#fff;flex-direction:column;pointer-events:none}@media only screen and (min-width:600px){.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:1em}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:1em;flex-direction:column-reverse}.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.top-left{left:1em}.Vue-Toastification__container.bottom-left .Vue-Toastification__toast,.Vue-Toastification__container.top-left .Vue-Toastification__toast{margin-right:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-left .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-left .Vue-Toastification__toast--rtl{margin-right:unset;margin-left:auto}}.Vue-Toastification__container.bottom-right,.Vue-Toastification__container.top-right{right:1em}.Vue-Toastification__container.bottom-right .Vue-Toastification__toast,.Vue-Toastification__container.top-right .Vue-Toastification__toast{margin-left:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-right .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-right .Vue-Toastification__toast--rtl{margin-left:unset;margin-right:auto}}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.top-center{left:50%;margin-left:-300px}.Vue-Toastification__container.bottom-center .Vue-Toastification__toast,.Vue-Toastification__container.top-center .Vue-Toastification__toast{margin-left:auto;margin-right:auto}}@media only screen and (max-width:600px){.Vue-Toastification__container{width:100vw;padding:0;left:0;margin:0}.Vue-Toastification__container .Vue-Toastification__toast{width:100%}.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:0}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:0;flex-direction:column-reverse}}.Vue-Toastification__toast{display:inline-flex;position:relative;max-height:800px;min-height:64px;box-sizing:border-box;margin-bottom:1rem;padding:22px 24px;border-radius:8px;box-shadow:0 1px 10px 0 rgba(0,0,0,.1),0 2px 15px 0 rgba(0,0,0,.05);justify-content:space-between;font-family:Lato,Helvetica,Roboto,Arial,sans-serif;max-width:600px;min-width:326px;pointer-events:auto;overflow:hidden;transform:translateZ(0);direction:ltr}.Vue-Toastification__toast--rtl{direction:rtl}.Vue-Toastification__toast--default{background-color:#1976d2;color:#fff}.Vue-Toastification__toast--info{background-color:#2196f3;color:#fff}.Vue-Toastification__toast--success{background-color:#4caf50;color:#fff}.Vue-Toastification__toast--error{background-color:#ff5252;color:#fff}.Vue-Toastification__toast--warning{background-color:#ffc107;color:#fff}@media only screen and (max-width:600px){.Vue-Toastification__toast{border-radius:0;margin-bottom:.5rem}}.Vue-Toastification__toast-body{flex:1;line-height:24px;font-size:16px;word-break:break-word;white-space:pre-wrap}.Vue-Toastification__toast-component-body{flex:1}.Vue-Toastification__toast.disable-transition{transition:none!important;animation:none!important}.Vue-Toastification__close-button{font-weight:700;font-size:24px;line-height:24px;background:transparent;outline:none;border:none;padding:0 0 0 10px;cursor:pointer;transition:.3s ease;align-items:center;color:#fff;opacity:.3;transition:visibility 0s,opacity .2s linear}.Vue-Toastification__close-button:focus,.Vue-Toastification__close-button:hover{opacity:1}.Vue-Toastification__toast:not(:hover) .Vue-Toastification__close-button.show-on-hover{opacity:0}.Vue-Toastification__toast--rtl .Vue-Toastification__close-button{padding-left:unset;padding-right:10px}@keyframes scale-x-frames{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Vue-Toastification__progress-bar{position:absolute;bottom:0;left:0;width:100%;height:5px;z-index:10000;background-color:hsla(0,0%,100%,.7);transform-origin:left;animation:scale-x-frames linear 1 forwards}.Vue-Toastification__toast--rtl .Vue-Toastification__progress-bar{right:0;left:unset;transform-origin:right}.Vue-Toastification__icon{margin:auto 18px auto 0;background:transparent;outline:none;border:none;padding:0;transition:.3s ease;align-items:center;width:20px;height:100%}.Vue-Toastification__toast--rtl .Vue-Toastification__icon{margin:auto 0 auto 18px}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceOutRight{40%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(1000px,0,0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Vue-Toastification__bounce-enter-active.bottom-left,.Vue-Toastification__bounce-enter-active.top-left{animation-name:bounceInLeft}.Vue-Toastification__bounce-enter-active.bottom-right,.Vue-Toastification__bounce-enter-active.top-right{animation-name:bounceInRight}.Vue-Toastification__bounce-enter-active.top-center{animation-name:bounceInDown}.Vue-Toastification__bounce-enter-active.bottom-center{animation-name:bounceInUp}.Vue-Toastification__bounce-leave-active.bottom-left,.Vue-Toastification__bounce-leave-active.top-left{animation-name:bounceOutLeft}.Vue-Toastification__bounce-leave-active.bottom-right,.Vue-Toastification__bounce-leave-active.top-right{animation-name:bounceOutRight}.Vue-Toastification__bounce-leave-active.top-center{animation-name:bounceOutUp}.Vue-Toastification__bounce-leave-active.bottom-center{animation-name:bounceOutDown}.Vue-Toastification__bounce-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes fadeOutTop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}@keyframes fadeOutLeft{0%{transform:translateX(0);opacity:1}to{transform:translateX(-50px);opacity:0}}@keyframes fadeOutBottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(50px);opacity:0}}@keyframes fadeOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(50px);opacity:0}}@keyframes fadeInLeft{0%{transform:translateX(-50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInRight{0%{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInTop{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInBottom{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.Vue-Toastification__fade-enter-active.bottom-left,.Vue-Toastification__fade-enter-active.top-left{animation-name:fadeInLeft}.Vue-Toastification__fade-enter-active.bottom-right,.Vue-Toastification__fade-enter-active.top-right{animation-name:fadeInRight}.Vue-Toastification__fade-enter-active.top-center{animation-name:fadeInTop}.Vue-Toastification__fade-enter-active.bottom-center{animation-name:fadeInBottom}.Vue-Toastification__fade-leave-active.bottom-left,.Vue-Toastification__fade-leave-active.top-left{animation-name:fadeOutLeft}.Vue-Toastification__fade-leave-active.bottom-right,.Vue-Toastification__fade-leave-active.top-right{animation-name:fadeOutRight}.Vue-Toastification__fade-leave-active.top-center{animation-name:fadeOutTop}.Vue-Toastification__fade-leave-active.bottom-center{animation-name:fadeOutBottom}.Vue-Toastification__fade-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes slideInBlurredLeft{0%{transform:translateX(-1000px) scaleX(2.5) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredTop{0%{transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredRight{0%{transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredBottom{0%{transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideOutBlurredTop{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 0;filter:blur(0);opacity:1}to{transform:translateY(-1000px) scaleY(2) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredBottom{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateY(1000px) scaleY(2) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredLeft{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(-1000px) scaleX(2) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}}@keyframes slideOutBlurredRight{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(1000px) scaleX(2) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}}.Vue-Toastification__slideBlurred-enter-active.bottom-left,.Vue-Toastification__slideBlurred-enter-active.top-left{animation-name:slideInBlurredLeft}.Vue-Toastification__slideBlurred-enter-active.bottom-right,.Vue-Toastification__slideBlurred-enter-active.top-right{animation-name:slideInBlurredRight}.Vue-Toastification__slideBlurred-enter-active.top-center{animation-name:slideInBlurredTop}.Vue-Toastification__slideBlurred-enter-active.bottom-center{animation-name:slideInBlurredBottom}.Vue-Toastification__slideBlurred-leave-active.bottom-left,.Vue-Toastification__slideBlurred-leave-active.top-left{animation-name:slideOutBlurredLeft}.Vue-Toastification__slideBlurred-leave-active.bottom-right,.Vue-Toastification__slideBlurred-leave-active.top-right{animation-name:slideOutBlurredRight}.Vue-Toastification__slideBlurred-leave-active.top-center{animation-name:slideOutBlurredTop}.Vue-Toastification__slideBlurred-leave-active.bottom-center{animation-name:slideOutBlurredBottom}.Vue-Toastification__slideBlurred-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}.Vue-Toastification__toast--default{background:#292929;box-shadow:none;color:#eaeaea}.Vue-Toastification__close-button{color:#eaeaea}.Vue-Toastification__icon{display:none}.site-settings[data-v-39672356]{position:fixed;right:0;bottom:0;width:64px;height:64px}.toggle[data-v-39672356]{width:100%;height:100%;padding:20% 54% 54% 20%;background:none;border:none;border-radius:50%;cursor:pointer;background:#1bb89b;transition:transform .2s;color:#fff}.site-settings:hover .toggle[data-v-39672356],.toggle.active[data-v-39672356]{transform:scale(1.2)}.toggle[data-v-39672356] iconify-icon{margin-top:-16px;margin-left:8px}ul[data-v-39672356]{position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;list-style:none;display:flex;z-index:-1;transform:scale(0)}ul li[data-v-39672356]{position:absolute}ul li[data-v-39672356]:first-child{transform:translateX(-150%)}ul li[data-v-39672356]:nth-child(2){transform:translate(-100%,-100%)}ul li[data-v-39672356]:last-child{transform:translateY(-150%)}.access[data-v-54c781ee]{margin:2rem 0;text-align:center}.access a[data-v-54c781ee]{display:inline-block;margin:.6rem;transition:transform .2s}.access a[data-v-54c781ee]:hover{transform:scale(1.05)}.blog-links[data-v-35f506a6]{display:grid;gap:3rem 2rem;list-style:none;padding:0}.blog-links>li[data-v-35f506a6]{border-radius:1rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.is-dark .blog-links>li[data-v-35f506a6]{background:#1f1f1f}.blog-links a[data-v-35f506a6]{display:flex;flex-direction:column;color:currentColor;font-weight:unset}.blog-links a[data-v-35f506a6]>:not(.blog-image){padding:0 1rem}.blog-links a .blog-image[data-v-35f506a6]{height:250px;overflow:hidden}.blog-links a .blog-image img[data-v-35f506a6]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease-out}.blog-links a .first-created[data-v-35f506a6]{font-size:.9rem}.blog-links a h2[data-v-35f506a6]{border-bottom:none;transition:color .3s}.blog-links a[data-v-35f506a6]:hover{text-decoration:none}.blog-links a:hover img[data-v-35f506a6]{transform:scale(1.06)}.blog-links a:hover h2[data-v-35f506a6]{color:#1bb89b}@media (min-width:720px){.blog-links[data-v-35f506a6]{grid-template-columns:1fr 1fr}}@media (min-width:960px){.blog-links[data-v-35f506a6]{grid-template-columns:1fr 1fr 1fr}}.blog-meta[data-v-37d0b7b8]{display:flex;flex-wrap:wrap;justify-content:space-between}div[data-v-13b53e33]{display:flex;align-items:center}div svg[data-v-13b53e33]{width:1rem;height:1rem}ul[data-v-13b53e33]{list-style:none;display:flex;padding:1rem .5rem;font-size:.85rem}ul a[data-v-13b53e33]{background:#eee;border-radius:.4rem;color:currentColor;font-weight:400;padding:.3rem .4rem;margin:0 .2rem}ul a[data-v-13b53e33]:hover{text-decoration:underline}.is-dark ul a[data-v-13b53e33]{background:#292929}nav[data-v-7c5b105f]{display:flex;flex-wrap:wrap;justify-content:center;margin:2rem 0}nav a[data-v-7c5b105f]{background:#eee;border-radius:1rem;color:currentColor;margin:.3rem;padding:.6rem;min-width:4rem;text-align:center}nav a.router-link-exact-active[data-v-7c5b105f]{color:#fff;background:#1bb89b}nav a[data-v-7c5b105f]:hover{text-decoration:none!important}.is-dark nav a[data-v-7c5b105f]:not(.router-link-exact-active){background:#292929}@media (min-width:420px){nav a[data-v-7c5b105f]{margin:.5rem;padding:1rem}}section[data-v-a37ba0d0]{margin:0 auto;max-width:740px;padding:2rem 2.5rem}div[data-v-43263439]{margin:.5rem 0}input[data-v-43263439],textarea[data-v-43263439]{outline:none;padding:.5rem 1rem;width:100%;font-size:100%;font-family:inherit;box-sizing:border-box;border-radius:6px;border:1px solid #aaa}input[data-v-43263439]:focus,textarea[data-v-43263439]:focus{border-color:#1bb89b}input.error[data-v-43263439],textarea.error[data-v-43263439]{border-color:red}textarea[data-v-43263439]{height:200px;resize:vertical}ul[data-v-59795e29]{list-style:none;margin:0;padding:0}li[data-v-59795e29]{border:1px solid;border-radius:4px;box-sizing:border-box;text-align:center;margin:12px 4px;padding:0 16px;width:100%}h2[data-v-59795e29]{border:0;margin-bottom:0;padding:0}@media (min-width:720px){ul[data-v-59795e29]{display:flex}}.link-buttons[data-v-fe445868]{margin:0 auto 1.8rem;padding:0;list-style:none;display:flex;justify-content:center}.link-buttons a[data-v-fe445868]{display:block;min-width:64px;padding:12px;margin:0 4px;border-radius:8px;box-sizing:border-box;transition-property:transform,box-shadow;transition-duration:.2s;background:#eee;box-shadow:0 3px #d0d0d0;border-bottom:2px solid #d0d0d0}.link-buttons a[data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a img[data-v-fe445868]{display:block;margin:auto;width:auto}.link-buttons a[data-social=twitter][data-v-fe445868]{background:#1da1f2;box-shadow:0 3px #2f81be;border-bottom:2px solid #2f81be}.link-buttons a[data-social=twitter][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=github][data-v-fe445868]{background:#333;box-shadow:0 3px #000;border-bottom:2px solid #000}.link-buttons a[data-social=github][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=youtube][data-v-fe445868]{background:red;box-shadow:0 3px #900;border-bottom:2px solid #900}.link-buttons a[data-social=youtube][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}footer[data-v-fe445868]{border-top:1px solid #eaecef;color:#2c3e50;padding:2.5rem;text-align:center}.is-dark footer[data-v-fe445868]{border-color:#444;color:#eaeaea}.home .footer{padding:0}.social[data-v-4bc0a2be]{display:flex;align-items:center;justify-content:flex-end}.is-dark .social[data-v-4bc0a2be] .social-share .social-share-btn{color:#8c8c8c}.social[data-v-4bc0a2be] .social-share .social-share-btn:hover{color:#1bb89b}.social[data-v-4bc0a2be] .social-share .social-share-btn{width:2.5rem;height:2.5rem;font-size:1.5rem}.social[data-v-4bc0a2be] .social-share .social-share-btn>span,section[data-v-568d8f4c]{display:flex;align-items:center;justify-content:center}section[data-v-568d8f4c]{background-image:url(/assets/home-bg.jpg);background-color:#1596f2;background-size:cover;background-attachment:fixed;transition:background .3s;height:100vh;max-height:900px;min-height:500px;box-sizing:border-box;flex-direction:column;position:relative}h1[data-v-568d8f4c]{font-weight:400}button[data-v-568d8f4c]{background:none;border:0;display:block;cursor:pointer;position:relative}button span[data-v-568d8f4c]{display:block;color:#fff;font-size:1.5rem;text-align:center;text-shadow:0 1px 2px #000}button span[data-v-568d8f4c]:first-child{width:150px;height:150px}button span:first-child img[data-v-568d8f4c]{width:100%;height:100%}h1[data-v-568d8f4c]{padding:1rem 2rem;margin:0;color:#fff;text-align:center;text-shadow:0 1px 2px #000;max-width:600px;font-size:3.5rem}.indicator[data-v-568d8f4c]{border:2px solid #fff;border-radius:24px;width:24px;height:36px;position:absolute;bottom:12px}.indicator[data-v-568d8f4c]:before{content:"";position:absolute;width:4px;height:6px;background:#fff;border-radius:2px;top:10%;left:calc(50% - 2px);animation:scroll-down-568d8f4c 1.5s infinite}@media (max-width:640px){h1[data-v-568d8f4c]{font-size:2rem}}@keyframes scroll-down-568d8f4c{0%{opacity:.2;transform:translateY(0)}to{opacity:1;transform:translateY(8px)}}ul[data-v-65ae56a6]{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}li[data-v-65ae56a6]{background:rgba(0,0,0,.05);border-radius:1rem;padding:3rem;position:relative}li[data-v-65ae56a6]:before{content:"\201C";display:block;font-family:serif;font-size:16rem;opacity:.1;position:absolute;top:-6rem;left:.5rem}li .content[data-v-65ae56a6]{font-style:italic;margin-bottom:2rem}li figure[data-v-65ae56a6]{margin:0;display:flex;align-items:center}li figure img[data-v-65ae56a6]{border-radius:50%}li figcaption[data-v-65ae56a6]{margin-left:2rem}li figcaption .author[data-v-65ae56a6]{font-size:1.2rem;font-weight:700}.is-dark li[data-v-65ae56a6]{background:#292929}@media (max-width:959px){ul[data-v-65ae56a6]{grid-template-columns:none}}@media (max-width:419px){li[data-v-65ae56a6]{padding:2rem}}div[data-v-e7a7a3f0]{width:180px;height:200px;flex-shrink:0;overflow:hidden;border-radius:50%}div>iframe[data-v-e7a7a3f0]{border:0;width:180px;height:300px}div[data-v-e7a7a3f0],img[data-v-e7a7a3f0]{margin-right:2rem}.right div[data-v-e7a7a3f0],.right img[data-v-e7a7a3f0]{margin-right:0;margin-left:2rem}@media (max-width:640px){div[data-v-e7a7a3f0],img[data-v-e7a7a3f0]{margin:0!important}}section[data-v-06508d2a]{padding:8rem 4rem}section>div[data-v-06508d2a]{align-items:center;display:flex;justify-content:center;margin:auto;max-width:1024px}section article>h2[data-v-06508d2a]{border:0;margin-top:0;font-size:2.5rem}section article>p[data-v-06508d2a]{text-align:justify;max-width:640px}section article>footer[data-v-06508d2a]{text-align:right}section article>footer>a[data-v-06508d2a]{display:inline-block;font-size:1rem;padding:.4rem 1.5rem}section article>footer>a[data-v-06508d2a]:not(:first-child){margin-left:8%}section.right>div>[data-v-06508d2a]:first-child{order:1}section.right article>footer[data-v-06508d2a]{text-align:left}section.right article>footer>a[data-v-06508d2a]:not(:first-child){margin-right:8%}section.center footer[data-v-06508d2a],section.center h2[data-v-06508d2a]{text-align:center}section.is-dark[data-v-06508d2a]{background:rgba(0,0,0,.05)}@media (max-width:640px){section[data-v-06508d2a]{padding:4rem 2rem}section>div[data-v-06508d2a]{flex-direction:column}section>div article>footer[data-v-06508d2a],section>div article>h2[data-v-06508d2a]{text-align:center}section.right>div [data-v-06508d2a]:first-child{order:unset}section.right article>footer[data-v-06508d2a],section.right article>h2[data-v-06508d2a]{text-align:center}}ul[data-v-145d0661]{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0 0 1rem;padding:0}li[data-v-145d0661]{background:#fff;border-radius:.75rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);overflow:hidden}li:hover img[data-v-145d0661]{transform:scale(1.4)}.is-dark li[data-v-145d0661]{background:#292929}span[data-v-145d0661]{display:block;overflow:hidden}span[data-v-145d0661]:last-child{color:#2c3e50;padding:.5rem 1rem;text-align:center}.is-dark span[data-v-145d0661]:last-child{color:#eaeaea}img[data-v-145d0661]{display:block;transform:scale(1.35);transition:transform .3s ease-out}@media (max-width:959px){ul[data-v-145d0661]{grid-template-columns:repeat(2,1fr)}}@media (max-width:719px){ul[data-v-145d0661]{grid-template-columns:none}}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}.theme-code-block[data-v-759a7d02]{display:none}.theme-code-block__active[data-v-759a7d02]{display:block}.theme-code-block>pre[data-v-759a7d02]{background-color:orange}.theme-code-group__nav[data-v-deefee04]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-deefee04]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-deefee04]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-deefee04]{border-bottom:1px solid #42b983}.pre-blank[data-v-deefee04]{color:#42b983} \ No newline at end of file diff --git a/assets/js/1.45dd6829.js b/assets/js/1.4b5570d5.js similarity index 89% rename from assets/js/1.45dd6829.js rename to assets/js/1.4b5570d5.js index 702fef90..7eeb3b1e 100644 --- a/assets/js/1.45dd6829.js +++ b/assets/js/1.4b5570d5.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{316:function(t,e,n){"use strict";n.d(e,"d",(function(){return s})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return r})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return b}));n(61);const s=/#.*$/,i=/\.(md|html)$/,a=/\/$/,r=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(s,"").replace(i,"")}function l(t){return r.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(l(t))return t;const e=t.match(s),n=e?e[0]:"",i=o(t);return a.test(i)?t:i+".html"+n}function p(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(s);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const s=t.charAt(0);if("/"===s)return t;if("?"===s||"#"===s)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;tfunction t(e,n,s,i=1){if("string"==typeof e)return d(n,e,s);if(Array.isArray(e))return Object.assign(d(n,e[0],s),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,s),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,s,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function g(t){const e=m(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},318:function(t,e,n){"use strict";n.r(e);var s=n(316),i={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(s.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(s.g)(this.link)||Object(s.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(s.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(s.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},a=n(16),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n "+t._s(t.item.text)+"\n "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null).exports,o={name:"Home",components:{NavLink:r},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},l=(n(382),Object(a.a)(o,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v("\n "+t._s(t.data.heroText||t.$title||"Hello")+"\n ")]):t._e(),t._v(" "),null!==t.data.tagline?e("p",{staticClass:"description"},[t._v("\n "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(n,s){return e("div",{key:s,staticClass:"feature"},[e("h2",[t._v(t._s(n.title))]),t._v(" "),e("p",[t._v(t._s(n.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v("\n "+t._s(t.data.footer)+"\n ")]):e("Content",{staticClass:"footer",attrs:{"slot-key":"footer"}})],1)}),[],!1,null,null,null).exports),u=(n(61),n(127)),c=n.n(u),h=(t,e,n=null)=>{let s=c()(e,"title","");return c()(e,"frontmatter.tags")&&(s+=" "+e.frontmatter.tags.join(" ")),n&&(s+=" "+n),p(t,s)};const p=(t,e)=>{const n=t=>t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),s=new RegExp("[^\0-]"),i=t.split(/\s+/g).map(t=>t.trim()).filter(t=>!!t);if(s.test(t))return i.some(t=>e.toLowerCase().indexOf(t)>-1);{const s=t.endsWith(" ");return new RegExp(i.map((t,e)=>i.length!==e+1||s?`(?=.*\\b${n(t)}\\b)`:`(?=.*\\b${n(t)})`).join("")+".+","gi").test(e)}};var d={name:"SearchBox",data:()=>({query:"",focused:!1,focusIndex:0,placeholder:void 0}),computed:{showSuggestions(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions(){const t=this.query.trim().toLowerCase();if(!t)return;const{pages:e}=this.$site,n=this.$site.themeConfig.searchMaxSuggestions||5,s=this.$localePath,i=[];for(let a=0;a=n);a++){const r=e[a];if(this.getPageLocalePath(r)===s&&this.isSearchable(r))if(h(t,r))i.push(r);else if(r.headers)for(let e=0;e=n);e++){const n=r.headers[e];n.title&&h(t,r,n.title)&&i.push(Object.assign({},r,{path:r.path+"#"+n.slug,header:n}))}}return i},alignRight(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath(t){for(const e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable(t){let e=null;return null===e||(e=Array.isArray(e)?e:new Array(e),e.filter(e=>t.path.match(e)).length>0)},onHotkey(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown(){this.showSuggestions&&(this.focusIndex "+t._s(n.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(384),Object(a.a)({},(function(){var t=this,e=t._self._c;return e("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[e("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[e("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null).exports),m=n(378),b=n(128),v=n.n(b),k={name:"DropdownLink",components:{NavLink:r,DropdownTransition:m.a},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>v()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},_=(n(386),{name:"NavLinks",components:{NavLink:r,DropdownLink:Object(a.a)(k,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,s){return e("li",{key:n.link||s,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n "+t._s(n.text)+"\n ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(s){return e("li",{key:s.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:s},on:{focusout:function(e){t.isLastItemOfArray(s,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,s=this.$site.themeConfig.locales||{},i={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(t).map(i=>{const a=t[i],r=s[i]&&s[i].label||a.lang;let o;return a.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,i),n.some(t=>t.path===o)||(o=i)),{text:r,link:o}})};return[...this.userNav,i]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(s.j)(t),{items:(t.items||[]).map(s.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;return t?/^https?:/.test(t)?t:"https://github.com/"+t:null},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n({linksWrapMaxWidth:null}),computed:{algolia(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName}},mounted(){const t=parseInt(C(this.$el,"paddingLeft"))+parseInt(C(this.$el,"paddingRight")),e=()=>{document.documentElement.clientWidth<719?this.linksWrapMaxWidth=null:this.linksWrapMaxWidth=this.$el.offsetWidth-t-(this.$refs.siteName&&this.$refs.siteName.offsetWidth||0)};e(),window.addEventListener("resize",e,!1)}},$=(n(388),Object(a.a)(L,(function(){var t=this,e=t._self._c;return e("header",{staticClass:"navbar"},[e("SidebarButton",{on:{"toggle-sidebar":function(e){return t.$emit("toggle-sidebar")}}}),t._v(" "),e("RouterLink",{staticClass:"home-link",attrs:{to:t.$localePath}},[t.$site.themeConfig.logo?e("img",{staticClass:"logo",attrs:{src:t.$withBase(t.$site.themeConfig.logo),alt:t.$siteTitle}}):t._e(),t._v(" "),t.$siteTitle?e("span",{ref:"siteName",staticClass:"site-name",class:{"can-hide":t.$site.themeConfig.logo}},[t._v(t._s(t.$siteTitle))]):t._e()]),t._v(" "),e("div",{staticClass:"links",style:t.linksWrapMaxWidth?{"max-width":t.linksWrapMaxWidth+"px"}:{}},[t.isAlgoliaSearch?e("AlgoliaSearchBox",{attrs:{options:t.algolia}}):!1!==t.$site.themeConfig.search&&!1!==t.$page.frontmatter.search?e("SearchBox"):t._e(),t._v(" "),e("NavLinks",{staticClass:"can-hide"})],1)],1)}),[],!1,null,null,null).exports),y=n(334),w=n.n(y),O={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=w()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:n="",docsBranch:s="master",docsRepo:i=e}=this.$site.themeConfig;return t&&i&&this.$page.relativePath?this.createEditLink(e,i,n,s,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,n,i,a){if(/bitbucket.org/.test(e)){return e.replace(s.a,"")+"/src"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a+`?mode=edit&spa=0&at=${i}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(s.a,"")+"/-/edit"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a}return(s.i.test(e)?e:"https://github.com/"+e).replace(s.a,"")+"/edit"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a}}},S=(n(389),Object(a.a)(O,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null).exports),I=n(390),j=n.n(I),N={name:"PageNav",props:["sidebarItems"],computed:{prev(){return P(T.PREV,this)},next(){return P(T.NEXT,this)}}};const T={NEXT:{resolveLink:function(t,e){return A(t,e,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,e){return A(t,e,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function P(t,{$themeConfig:e,$page:n,$route:i,$site:a,sidebarItems:r}){const{resolveLink:o,getThemeLinkConfig:l,getPageLinkConfig:u}=t,c=l(e),h=u(n),p=w()(h)?c:h;return!1===p?void 0:j()(p)?Object(s.k)(a.pages,p,i.path):o(n,r)}function A(t,e,n){const s=[];!function t(e,n){for(let s=0,i=e.length;s({isSidebarOpen:!1}),computed:{shouldShowNavbar(){const{themeConfig:t}=this.$site,{frontmatter:e}=this.$page;return!1!==e.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar(){const{frontmatter:t}=this.$page;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems(){return Object(s.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses(){const t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted(){this.$router.afterEach(()=>{this.isSidebarOpen=!1})},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)},onTouchStart(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd(t){const e=t.changedTouches[0].clientX-this.touchStart.x,n=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),G=Object(a.a)(U,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?e("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),e("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),e("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?e("Home"):e("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.default=G.exports},327:function(t,e,n){},328:function(t,e,n){},329:function(t,e,n){},330:function(t,e,n){},331:function(t,e,n){},332:function(t,e,n){},333:function(t,e,n){},334:function(t,e){t.exports=function(t){return null==t}},335:function(t,e,n){},336:function(t,e,n){},337:function(t,e,n){},338:function(t,e,n){},339:function(t,e,n){},340:function(t,e,n){},377:function(t,e,n){"use strict";n.r(e);var s=n(316),i={name:"SidebarGroup",components:{DropdownTransition:n(378).a},props:["item","open","collapsable","depth"],beforeCreate(){this.$options.components.SidebarLinks=n(377).default},methods:{isActive:s.e}},a=(n(393),n(16)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;function o(t,e,n,s,i){const a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:s,"sidebar-link":!0}};return i>2&&(a.style={"padding-left":i+"rem"}),t("RouterLink",a,n)}function l(t,e,n,i,a,r=1){return!e||r>a?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(s.e)(i,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,u,e.level-1),l(t,e.children,n,i,a,r+1)])}))}var u={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:i,$themeConfig:a,$themeLocaleConfig:r},props:{item:u,sidebarDepth:c}}){const h=Object(s.e)(i,u.path),p="auto"===u.type?h||u.children.some(t=>Object(s.e)(i,u.basePath+"#"+t.slug)):h,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):o(t,u.path,u.title||u.path,p),f=[e.frontmatter.sidebarDepth,c,r.sidebarDepth,a.sidebarDepth,1].find(t=>void 0!==t),g=r.displayAllHeaders||a.displayAllHeaders;if("auto"===u.type)return[d,l(t,u.children,u.basePath,i,f)];if((p||g)&&u.headers&&!s.d.test(u.path)){return[d,l(t,Object(s.c)(u.headers),u.path,i,f)]}return d}};n(394);function c(t,e){if("group"===e.type){const n=e.path&&Object(s.e)(t,e.path),i=e.children.some(e=>"group"===e.type?c(t,e):"page"===e.type&&Object(s.e)(t,e.path));return n||i}return!1}var h={name:"SidebarLinks",components:{SidebarGroup:r,SidebarLink:Object(a.a)(u,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route(){this.refreshIndex()}},created(){this.refreshIndex()},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},p=Object(a.a)(h,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,s){return e("li",{key:s},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:s===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(s)}}}):e("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=p.exports},378:function(t,e,n){"use strict";var s={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(385),n(16)),a=Object(i.a)(s,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=a.exports},382:function(t,e,n){"use strict";n(327)},383:function(t,e,n){"use strict";n(328)},384:function(t,e,n){"use strict";n(329)},385:function(t,e,n){"use strict";n(330)},386:function(t,e,n){"use strict";n(331)},387:function(t,e,n){"use strict";n(332)},388:function(t,e,n){"use strict";n(333)},389:function(t,e,n){"use strict";n(335)},390:function(t,e,n){var s=n(17),i=n(4),a=n(10);t.exports=function(t){return"string"==typeof t||!i(t)&&a(t)&&"[object String]"==s(t)}},391:function(t,e,n){"use strict";n(336)},392:function(t,e,n){"use strict";n(337)},393:function(t,e,n){"use strict";n(338)},394:function(t,e,n){"use strict";n(339)},395:function(t,e,n){"use strict";n(340)}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{315:function(t,e,n){"use strict";n.d(e,"d",(function(){return s})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return r})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return b}));n(61);const s=/#.*$/,i=/\.(md|html)$/,a=/\/$/,r=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(s,"").replace(i,"")}function l(t){return r.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(l(t))return t;const e=t.match(s),n=e?e[0]:"",i=o(t);return a.test(i)?t:i+".html"+n}function p(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(s);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const s=t.charAt(0);if("/"===s)return t;if("?"===s||"#"===s)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;tfunction t(e,n,s,i=1){if("string"==typeof e)return d(n,e,s);if(Array.isArray(e))return Object.assign(d(n,e[0],s),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,s),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,s,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function g(t){const e=m(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},317:function(t,e,n){"use strict";n.r(e);var s=n(315),i={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(s.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(s.g)(this.link)||Object(s.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(s.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(s.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},a=n(16),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n "+t._s(t.item.text)+"\n "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null).exports,o={name:"Home",components:{NavLink:r},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},l=(n(381),Object(a.a)(o,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v("\n "+t._s(t.data.heroText||t.$title||"Hello")+"\n ")]):t._e(),t._v(" "),null!==t.data.tagline?e("p",{staticClass:"description"},[t._v("\n "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(n,s){return e("div",{key:s,staticClass:"feature"},[e("h2",[t._v(t._s(n.title))]),t._v(" "),e("p",[t._v(t._s(n.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v("\n "+t._s(t.data.footer)+"\n ")]):e("Content",{staticClass:"footer",attrs:{"slot-key":"footer"}})],1)}),[],!1,null,null,null).exports),u=(n(61),n(126)),c=n.n(u),h=(t,e,n=null)=>{let s=c()(e,"title","");return c()(e,"frontmatter.tags")&&(s+=" "+e.frontmatter.tags.join(" ")),n&&(s+=" "+n),p(t,s)};const p=(t,e)=>{const n=t=>t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),s=new RegExp("[^\0-]"),i=t.split(/\s+/g).map(t=>t.trim()).filter(t=>!!t);if(s.test(t))return i.some(t=>e.toLowerCase().indexOf(t)>-1);{const s=t.endsWith(" ");return new RegExp(i.map((t,e)=>i.length!==e+1||s?`(?=.*\\b${n(t)}\\b)`:`(?=.*\\b${n(t)})`).join("")+".+","gi").test(e)}};var d={name:"SearchBox",data:()=>({query:"",focused:!1,focusIndex:0,placeholder:void 0}),computed:{showSuggestions(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions(){const t=this.query.trim().toLowerCase();if(!t)return;const{pages:e}=this.$site,n=this.$site.themeConfig.searchMaxSuggestions||5,s=this.$localePath,i=[];for(let a=0;a=n);a++){const r=e[a];if(this.getPageLocalePath(r)===s&&this.isSearchable(r))if(h(t,r))i.push(r);else if(r.headers)for(let e=0;e=n);e++){const n=r.headers[e];n.title&&h(t,r,n.title)&&i.push(Object.assign({},r,{path:r.path+"#"+n.slug,header:n}))}}return i},alignRight(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath(t){for(const e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable(t){let e=null;return null===e||(e=Array.isArray(e)?e:new Array(e),e.filter(e=>t.path.match(e)).length>0)},onHotkey(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown(){this.showSuggestions&&(this.focusIndex "+t._s(n.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(383),Object(a.a)({},(function(){var t=this,e=t._self._c;return e("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[e("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[e("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null).exports),m=n(377),b=n(127),v=n.n(b),k={name:"DropdownLink",components:{NavLink:r,DropdownTransition:m.a},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>v()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},_=(n(385),{name:"NavLinks",components:{NavLink:r,DropdownLink:Object(a.a)(k,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,s){return e("li",{key:n.link||s,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n "+t._s(n.text)+"\n ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(s){return e("li",{key:s.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:s},on:{focusout:function(e){t.isLastItemOfArray(s,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,s=this.$site.themeConfig.locales||{},i={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(t).map(i=>{const a=t[i],r=s[i]&&s[i].label||a.lang;let o;return a.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,i),n.some(t=>t.path===o)||(o=i)),{text:r,link:o}})};return[...this.userNav,i]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(s.j)(t),{items:(t.items||[]).map(s.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;return t?/^https?:/.test(t)?t:"https://github.com/"+t:null},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n({linksWrapMaxWidth:null}),computed:{algolia(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName}},mounted(){const t=parseInt(C(this.$el,"paddingLeft"))+parseInt(C(this.$el,"paddingRight")),e=()=>{document.documentElement.clientWidth<719?this.linksWrapMaxWidth=null:this.linksWrapMaxWidth=this.$el.offsetWidth-t-(this.$refs.siteName&&this.$refs.siteName.offsetWidth||0)};e(),window.addEventListener("resize",e,!1)}},$=(n(387),Object(a.a)(L,(function(){var t=this,e=t._self._c;return e("header",{staticClass:"navbar"},[e("SidebarButton",{on:{"toggle-sidebar":function(e){return t.$emit("toggle-sidebar")}}}),t._v(" "),e("RouterLink",{staticClass:"home-link",attrs:{to:t.$localePath}},[t.$site.themeConfig.logo?e("img",{staticClass:"logo",attrs:{src:t.$withBase(t.$site.themeConfig.logo),alt:t.$siteTitle}}):t._e(),t._v(" "),t.$siteTitle?e("span",{ref:"siteName",staticClass:"site-name",class:{"can-hide":t.$site.themeConfig.logo}},[t._v(t._s(t.$siteTitle))]):t._e()]),t._v(" "),e("div",{staticClass:"links",style:t.linksWrapMaxWidth?{"max-width":t.linksWrapMaxWidth+"px"}:{}},[t.isAlgoliaSearch?e("AlgoliaSearchBox",{attrs:{options:t.algolia}}):!1!==t.$site.themeConfig.search&&!1!==t.$page.frontmatter.search?e("SearchBox"):t._e(),t._v(" "),e("NavLinks",{staticClass:"can-hide"})],1)],1)}),[],!1,null,null,null).exports),y=n(333),w=n.n(y),O={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=w()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:n="",docsBranch:s="master",docsRepo:i=e}=this.$site.themeConfig;return t&&i&&this.$page.relativePath?this.createEditLink(e,i,n,s,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,n,i,a){if(/bitbucket.org/.test(e)){return e.replace(s.a,"")+"/src"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a+`?mode=edit&spa=0&at=${i}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(s.a,"")+"/-/edit"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a}return(s.i.test(e)?e:"https://github.com/"+e).replace(s.a,"")+"/edit"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a}}},S=(n(388),Object(a.a)(O,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null).exports),I=n(389),j=n.n(I),N={name:"PageNav",props:["sidebarItems"],computed:{prev(){return P(T.PREV,this)},next(){return P(T.NEXT,this)}}};const T={NEXT:{resolveLink:function(t,e){return A(t,e,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,e){return A(t,e,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function P(t,{$themeConfig:e,$page:n,$route:i,$site:a,sidebarItems:r}){const{resolveLink:o,getThemeLinkConfig:l,getPageLinkConfig:u}=t,c=l(e),h=u(n),p=w()(h)?c:h;return!1===p?void 0:j()(p)?Object(s.k)(a.pages,p,i.path):o(n,r)}function A(t,e,n){const s=[];!function t(e,n){for(let s=0,i=e.length;s({isSidebarOpen:!1}),computed:{shouldShowNavbar(){const{themeConfig:t}=this.$site,{frontmatter:e}=this.$page;return!1!==e.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar(){const{frontmatter:t}=this.$page;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems(){return Object(s.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses(){const t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted(){this.$router.afterEach(()=>{this.isSidebarOpen=!1})},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)},onTouchStart(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd(t){const e=t.changedTouches[0].clientX-this.touchStart.x,n=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),G=Object(a.a)(U,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?e("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),e("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),e("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?e("Home"):e("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.default=G.exports},326:function(t,e,n){},327:function(t,e,n){},328:function(t,e,n){},329:function(t,e,n){},330:function(t,e,n){},331:function(t,e,n){},332:function(t,e,n){},333:function(t,e){t.exports=function(t){return null==t}},334:function(t,e,n){},335:function(t,e,n){},336:function(t,e,n){},337:function(t,e,n){},338:function(t,e,n){},339:function(t,e,n){},376:function(t,e,n){"use strict";n.r(e);var s=n(315),i={name:"SidebarGroup",components:{DropdownTransition:n(377).a},props:["item","open","collapsable","depth"],beforeCreate(){this.$options.components.SidebarLinks=n(376).default},methods:{isActive:s.e}},a=(n(392),n(16)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;function o(t,e,n,s,i){const a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:s,"sidebar-link":!0}};return i>2&&(a.style={"padding-left":i+"rem"}),t("RouterLink",a,n)}function l(t,e,n,i,a,r=1){return!e||r>a?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(s.e)(i,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,u,e.level-1),l(t,e.children,n,i,a,r+1)])}))}var u={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:i,$themeConfig:a,$themeLocaleConfig:r},props:{item:u,sidebarDepth:c}}){const h=Object(s.e)(i,u.path),p="auto"===u.type?h||u.children.some(t=>Object(s.e)(i,u.basePath+"#"+t.slug)):h,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):o(t,u.path,u.title||u.path,p),f=[e.frontmatter.sidebarDepth,c,r.sidebarDepth,a.sidebarDepth,1].find(t=>void 0!==t),g=r.displayAllHeaders||a.displayAllHeaders;if("auto"===u.type)return[d,l(t,u.children,u.basePath,i,f)];if((p||g)&&u.headers&&!s.d.test(u.path)){return[d,l(t,Object(s.c)(u.headers),u.path,i,f)]}return d}};n(393);function c(t,e){if("group"===e.type){const n=e.path&&Object(s.e)(t,e.path),i=e.children.some(e=>"group"===e.type?c(t,e):"page"===e.type&&Object(s.e)(t,e.path));return n||i}return!1}var h={name:"SidebarLinks",components:{SidebarGroup:r,SidebarLink:Object(a.a)(u,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route(){this.refreshIndex()}},created(){this.refreshIndex()},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},p=Object(a.a)(h,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,s){return e("li",{key:s},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:s===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(s)}}}):e("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=p.exports},377:function(t,e,n){"use strict";var s={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(384),n(16)),a=Object(i.a)(s,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=a.exports},381:function(t,e,n){"use strict";n(326)},382:function(t,e,n){"use strict";n(327)},383:function(t,e,n){"use strict";n(328)},384:function(t,e,n){"use strict";n(329)},385:function(t,e,n){"use strict";n(330)},386:function(t,e,n){"use strict";n(331)},387:function(t,e,n){"use strict";n(332)},388:function(t,e,n){"use strict";n(334)},389:function(t,e,n){var s=n(17),i=n(4),a=n(10);t.exports=function(t){return"string"==typeof t||!i(t)&&a(t)&&"[object String]"==s(t)}},390:function(t,e,n){"use strict";n(335)},391:function(t,e,n){"use strict";n(336)},392:function(t,e,n){"use strict";n(337)},393:function(t,e,n){"use strict";n(338)},394:function(t,e,n){"use strict";n(339)}}]); \ No newline at end of file diff --git a/assets/js/10.8e7c9cea.js b/assets/js/10.e1e89e0d.js similarity index 75% rename from assets/js/10.8e7c9cea.js rename to assets/js/10.e1e89e0d.js index 5b7a7f1e..fe62d30e 100644 --- a/assets/js/10.8e7c9cea.js +++ b/assets/js/10.e1e89e0d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{322:function(t,e){t.exports={DOMAIN:"visnalize.com",ORIGIN:"https://visnalize.com"}},325:function(t,e,n){"use strict";n.d(e,"a",(function(){return o}));n(62);var a=n(322);function o(t,e){if(!t||!e)throw new Error("imageUrl and options are required");const n=Object.entries(e).map(([t,e])=>void 0===e?"":`${t}=${e}`).filter(Boolean).join(","),o=encodeURIComponent(/^(https?:|mailto:|tel:)/.test(t)?t:`${a.ORIGIN}${t}`);return`${a.ORIGIN}/cdn-cgi/image/${n}/${o}`}},343:function(t,e,n){},398:function(t,e,n){"use strict";n(343)},492:function(t,e,n){"use strict";n.r(e);var a=n(318),o=n(325),r={components:{ParentLayout:a.default},computed:{features(){const t=this.$site.pages.filter(({path:t})=>t.includes(this.$page.path)&&t!==this.$page.path);return t.sort((t,e)=>{const n=t.frontmatter.version||"0.0.0";return(e.frontmatter.version||"0.0.0").localeCompare(n,void 0,{numeric:!0,sensitivity:"base"})}),t}},methods:{transform:t=>Object(o.a)(t,{width:450})}},i=(n(398),n(16)),s=Object(i.a)(r,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([{key:"page-top",fn:function(){return[e("div",{staticClass:"theme-default-content content__default"},[e("h1",[t._v("Win7 Simu simulated apps")]),t._v(" "),e("a-sponsor-ad",{attrs:{format:"banner"}}),t._v(" "),e("ul",{staticClass:"feature-links"},t._l(t.features,(function(n){return e("li",{key:n.path},[e("router-link",{attrs:{to:n.path}},[e("span",{staticClass:"image"},[e("a-icon",{attrs:{icon:"ic:outline-image",width:"48",height:"48"}}),t._v(" "),e("img",{attrs:{src:t.transform(n.frontmatter.image),alt:n.title}})],1),t._v(" "),e("span",[t._v(t._s(n.title))])])],1)})),0)],1)]},proxy:!0},{key:"page-bottom",fn:function(){return[e("m-footer")]},proxy:!0}])})}),[],!1,null,"3edf7ac0",null);e.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{321:function(t,e){t.exports={DOMAIN:"visnalize.com",ORIGIN:"https://visnalize.com"}},324:function(t,e,n){"use strict";n.d(e,"a",(function(){return o}));n(62);var a=n(321);function o(t,e){if(!t||!e)throw new Error("imageUrl and options are required");const n=Object.entries(e).map(([t,e])=>void 0===e?"":`${t}=${e}`).filter(Boolean).join(","),o=encodeURIComponent(/^(https?:|mailto:|tel:)/.test(t)?t:`${a.ORIGIN}${t}`);return`${a.ORIGIN}/cdn-cgi/image/${n}/${o}`}},342:function(t,e,n){},397:function(t,e,n){"use strict";n(342)},491:function(t,e,n){"use strict";n.r(e);var a=n(317),o=n(324),r={components:{ParentLayout:a.default},computed:{features(){const t=this.$site.pages.filter(({path:t})=>t.includes(this.$page.path)&&t!==this.$page.path);return t.sort((t,e)=>{const n=t.frontmatter.version||"0.0.0";return(e.frontmatter.version||"0.0.0").localeCompare(n,void 0,{numeric:!0,sensitivity:"base"})}),t}},methods:{transform:t=>Object(o.a)(t,{width:450})}},i=(n(397),n(16)),s=Object(i.a)(r,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([{key:"page-top",fn:function(){return[e("div",{staticClass:"theme-default-content content__default"},[e("h1",[t._v("Win7 Simu simulated apps")]),t._v(" "),e("a-sponsor-ad",{attrs:{format:"banner"}}),t._v(" "),e("ul",{staticClass:"feature-links"},t._l(t.features,(function(n){return e("li",{key:n.path},[e("router-link",{attrs:{to:n.path}},[e("span",{staticClass:"image"},[e("a-icon",{attrs:{icon:"ic:outline-image",width:"48",height:"48"}}),t._v(" "),e("img",{attrs:{src:t.transform(n.frontmatter.image),alt:n.title}})],1),t._v(" "),e("span",[t._v(t._s(n.title))])])],1)})),0)],1)]},proxy:!0},{key:"page-bottom",fn:function(){return[e("m-footer")]},proxy:!0}])})}),[],!1,null,"3edf7ac0",null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/101.0c2330f9.js b/assets/js/100.e32dcd2e.js similarity index 77% rename from assets/js/101.0c2330f9.js rename to assets/js/100.e32dcd2e.js index 9e023b82..179f6fc6 100644 --- a/assets/js/101.0c2330f9.js +++ b/assets/js/100.e32dcd2e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{576:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{576:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/102.cb6b900c.js b/assets/js/101.4f938d8c.js similarity index 77% rename from assets/js/102.cb6b900c.js rename to assets/js/101.4f938d8c.js index 413a968d..8f8c2a8b 100644 --- a/assets/js/102.cb6b900c.js +++ b/assets/js/101.4f938d8c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{579:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{577:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/103.8c9b29d3.js b/assets/js/102.ae356ac7.js similarity index 77% rename from assets/js/103.8c9b29d3.js rename to assets/js/102.ae356ac7.js index 08480275..4e3ac476 100644 --- a/assets/js/103.8c9b29d3.js +++ b/assets/js/102.ae356ac7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{580:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{578:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/100.6925ba8f.js b/assets/js/103.67541094.js similarity index 77% rename from assets/js/100.6925ba8f.js rename to assets/js/103.67541094.js index 2930dae4..c82319c0 100644 --- a/assets/js/100.6925ba8f.js +++ b/assets/js/103.67541094.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{578:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{579:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/104.14567289.js b/assets/js/104.14567289.js deleted file mode 100644 index 9cc8c795..00000000 --- a/assets/js/104.14567289.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{581:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/104.80c9f5d1.js b/assets/js/104.80c9f5d1.js new file mode 100644 index 00000000..10133d51 --- /dev/null +++ b/assets/js/104.80c9f5d1.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{580:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/105.a2d9160e.js b/assets/js/105.a2d9160e.js deleted file mode 100644 index 098cdb46..00000000 --- a/assets/js/105.a2d9160e.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{582:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/105.ee50a038.js b/assets/js/105.ee50a038.js new file mode 100644 index 00000000..2600c2a0 --- /dev/null +++ b/assets/js/105.ee50a038.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{581:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/106.83669c29.js b/assets/js/106.83669c29.js deleted file mode 100644 index fb47df6d..00000000 --- a/assets/js/106.83669c29.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{583:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/106.8e403aa6.js b/assets/js/106.8e403aa6.js new file mode 100644 index 00000000..7c87e575 --- /dev/null +++ b/assets/js/106.8e403aa6.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{582:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/107.1caa3abd.js b/assets/js/107.1caa3abd.js deleted file mode 100644 index 76db5a63..00000000 --- a/assets/js/107.1caa3abd.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{584:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/107.abd398a4.js b/assets/js/107.abd398a4.js new file mode 100644 index 00000000..d8db5fcf --- /dev/null +++ b/assets/js/107.abd398a4.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{583:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/108.6b777408.js b/assets/js/108.6b777408.js deleted file mode 100644 index b3ab372f..00000000 --- a/assets/js/108.6b777408.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{585:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/108.ffdbf6c0.js b/assets/js/108.ffdbf6c0.js new file mode 100644 index 00000000..0a860930 --- /dev/null +++ b/assets/js/108.ffdbf6c0.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{584:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/109.91324ba5.js b/assets/js/109.91324ba5.js deleted file mode 100644 index 5f10bee2..00000000 --- a/assets/js/109.91324ba5.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{592:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/109.da478c56.js b/assets/js/109.da478c56.js new file mode 100644 index 00000000..c5a89597 --- /dev/null +++ b/assets/js/109.da478c56.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{585:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/11.5f5929b1.js b/assets/js/11.ff5643ec.js similarity index 94% rename from assets/js/11.5f5929b1.js rename to assets/js/11.ff5643ec.js index b317d4ac..acd106d8 100644 --- a/assets/js/11.5f5929b1.js +++ b/assets/js/11.ff5643ec.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{400:function(e,t,a){e.exports=a.p+"assets/img/ad-networks.647b5d83.png"},401:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-admob.4883adfe.png"},402:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-adsense.457df8d7.png"},403:function(e,t,a){e.exports=a.p+"assets/img/my-ad-formats.1b93ee12.png"},532:function(e,t,a){"use strict";a.r(t);var o=a(16),s=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"about-the-ads-and-how-i-implement-them"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#about-the-ads-and-how-i-implement-them"}},[e._v("#")]),e._v(" About the ads and how I implement them")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1546142711-1e28c0540deb?auto=format&fit=crop&w=740&q=80",alt:"Ad promo"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Fredrick Suwandi via "),t("a",{attrs:{href:"https://unsplash.com/photos/csXTAyTiESo",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Ads, the thing we all hate as when we are trying to enjoy something, they appear and kill the whole experience. Yes, I said \"we\" because I myself also hate it, but let's be honest and admit the fact that they generate incomes and one can hardly fight against this temptation, or even go too far as abusing it to earn as much as possible when this power is given and may be used at one's will. Admittedly, I'm that type of guy. Or if you are one of the nice people in my audience, you may consider me having some morals left for not flooding your screen with ads.")]),e._v(" "),t("p",[e._v("Sounds more like a confession than a blog so far, eh? Let's put that aside because, in this blog, I would like to share my experience with the Ads implementation in the different versions of my "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(".")],1),e._v(" "),t("h2",{attrs:{id:"choosing-the-ad-network"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#choosing-the-ad-network"}},[e._v("#")]),e._v(" Choosing the Ad Network")]),e._v(" "),t("p",[t("img",{attrs:{src:a(400),alt:"Ad Networks - AdMob, AppLovin, Adsense"}})]),e._v(" "),t("p",[e._v("Probably the least thing that bothered me when I came up with the idea to implement ads in my simulator. Despite a vast range of ad networks available, I just went straight for "),t("a",{attrs:{href:"https://admob.google.com/home/",target:"_blank",rel:"noopener noreferrer"}},[e._v("AdMob"),t("OutboundLink")],1),e._v(" due to its dominating presence all around the world. Indeed it's dominating for various reasons. From the registration to implementation, it was incredibly easy that I hardly found any time struggling with it. The documentation is well structured and provides all the instructions I would ever need. It even offered the mediation feature which combines the AdMob network with other third-party ad networks I registered, and picks the highest paid ad among these networks and display to the users, my revenue is then further boosted (well, not so much as you're imagining).")]),e._v(" "),t("p",[e._v("So yea, AdMob had been my partner for more than a year, until a couple of months ago... an "),t("strong",[e._v("ad serving limit")]),e._v(" was put down on my account. This would not be surprising as I had faced this issue twice before, each time only lasted for around 2 weeks to 1 month, but this time, it has been 4 months, without any notifications or simply a freaking reason. I mean, literally, every time an ad serving limit was placed and lifted, I do not have any idea what was the reason. And this time it was over my patience limit and I decided to switch to a new partner for real. After several searches and comparisons, I decided to pick "),t("a",{attrs:{href:"https://www.applovin.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("AppLovin"),t("OutboundLink")],1),e._v(" due to its ease of registration and a similar implementation method to AdMob. I'll just wait and see how it performs from here on.")]),e._v(" "),t("p",[e._v("For this website, I again went straight for "),t("a",{attrs:{href:"https://www.google.com/adsense/start/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Adsense"),t("OutboundLink")],1),e._v(", which is more or less a blood-related brother of AdMob. It has the same pros and is much simpler to register compared to other available vendors on the market due to the fact that page views/number of visitors per month are not considered but only your content that matters, as registration criteria. But hopefully, it won't end up the same way as AdMob.")]),e._v(" "),t("p",[e._v("Aside from these choices of mine, there are many more if you search them up, but of course, each one requires a different method for registration and the complexity depends on your region/location, and obviously your content as well. It's also important to note the revenue yielded from each is also varied.")]),e._v(" "),t("h2",{attrs:{id:"picking-the-ad-format"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picking-the-ad-format"}},[e._v("#")]),e._v(" Picking the Ad Format")]),e._v(" "),t("h3",{attrs:{id:"mobile-app"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mobile-app"}},[e._v("#")]),e._v(" Mobile App")]),e._v(" "),t("p",[e._v("Each ad network offers a different set of ad formats that you can implement. But in general, the most basic ones are "),t("strong",[e._v("Banner")]),e._v(", "),t("strong",[e._v("Interstitial")]),e._v(" and "),t("strong",[e._v("Rewarded")]),e._v(". Other formats just get their behaviors altered out of these base formats. Just understanding these 3 is already sufficient to pick the ones suitable for your app.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(401),alt:"AdMob Ad Formats"}})]),e._v(" "),t("p",[e._v("To pick the ad format for your own, it's obviously also important to know which one provides more revenue, hence for your reference, it is: "),t("strong",[e._v("Rewarded > Interstitial > Banner")]),e._v(". Rewarded ads bring the most revenue out of these, as when a user opt-in to watch an ad in exchange for something in-app, it is usually a 30-second or longer video ad. While Interstitial ads are a bit less in terms of revenue, they are still much more compared to Banners, but they also come with the paid price of user experience and are much of a means for abusing or suffocating the user with ads.")]),e._v(" "),t("p",[e._v("For my "),t("strong",[e._v("Win7 Simu")]),e._v(", I picked Banner and Interstitial as these two are more suitable with my app's tech and easier to implement.")]),e._v(" "),t("h3",{attrs:{id:"website"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#website"}},[e._v("#")]),e._v(" Website")]),e._v(" "),t("p",[e._v("For this website and the web version of "),t("strong",[e._v("Win7 Simu")]),e._v(", so far I have only considered and implemented "),t("strong",[e._v("Adsense")]),e._v(", therefore I'm only aware of the below ad formats from Adsense.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(402),alt:"Adsense Ad Formats"}})]),e._v(" "),t("p",[e._v("However, out of these 4, I only needed to use "),t("strong",[e._v("Display Ad")]),e._v(", which is also the format recommended by Google. The Display ad offers a responsive size that works anywhere you might cram it to, but of course the space should not be too small, otherwise there will be no ad available for serving. It's also possible to let Adsense setup the ads for you without any manual work by enabling the "),t("strong",[e._v("Auto Ads")]),e._v(", but personally, I prefer doing things by my own for which I will have full controls.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"implementing-ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-ads"}},[e._v("#")]),e._v(" Implementing ads")]),e._v(" "),t("p",[e._v("In this section, I'm not going into so much detail as to how to implement the ads in coding or something like how to write a framework component for placing Ads (there are already plenty of such tutorials and guides which are far more helpful than I can explain), but rather how the ads are being implemented in my products, the "),t("strong",[e._v("Win7 Simu")]),e._v(" app and "),t("strong",[e._v("this website")]),e._v(", and potentially any "),t("RouterLink",{attrs:{to:"/brick1100/about.html"}},[e._v("future product")]),e._v(" I may release.")],1),e._v(" "),t("h3",{attrs:{id:"win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu"}},[e._v("#")]),e._v(" Win7 Simu")]),e._v(" "),t("p",[e._v("So as mentioned above, due to the nature of my app, I picked Banner and Interstitial as my ad formats to implement.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(403),alt:"Win7 Simu's ad formats"}})]),e._v(" "),t("p",[e._v("The banner ad was placed at the top of the screen, with a refresh rate set to auto - typically a new ad is served after around 25 to 30 seconds. This one earned me a few cents everyday and I would say that's a fairly good amount to be happy about. However, considered that it occupied quite some space at the top which can prevent the user from enjoying an OS in fullscreen and poorly affect the experience, I decided to make a sacrifice by removing it from the app. Therefore, from "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html#2-16-0"}},[e._v("v2.16.0")]),e._v(" onwards, the banner ads are gone and you may enjoy the app to your fullest.")],1),e._v(" "),t("p",[e._v("The interstitial ad is still kept as a motivation for me to constantly maintain and work on the project, and also bring you more cool updates. And I didn't forget to carefully consider the frequency and placement for this type of ad so that you won't be interrupted so much and get annoyed. But of course, no matter what I try, I fully understand that there are always people who prefer criticism and will never be happy with such effort. I sure hope if you are not one of these people, please understand and keep supporting me.")]),e._v(" "),t("h3",{attrs:{id:"this-website"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#this-website"}},[e._v("#")]),e._v(" This website")]),e._v(" "),t("p",[e._v("You're probably seeing a few ads already in this blog post, and you can trust me when I say this is as many as I wanted to implement, not more. I used the responsive display ads by Adsense and tried to place the ads in the least intrusive way that hopefully blend with your reading experience. One last useful hint for those who also want to implement Adsense in their Vuepress blogs just like mine, you can refer to my site's source code which I made public "),t("a",{attrs:{href:"https://github.com/Visnalize/visnalize.github.io/tree/dev",target:"_blank",rel:"noopener noreferrer"}},[e._v("on Github"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("And this would be all I wanted to share in this blog, hope you had a good time reading it and somehow got some useful pieces of info with you as well.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{399:function(e,t,a){e.exports=a.p+"assets/img/ad-networks.647b5d83.png"},400:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-admob.4883adfe.png"},401:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-adsense.457df8d7.png"},402:function(e,t,a){e.exports=a.p+"assets/img/my-ad-formats.1b93ee12.png"},531:function(e,t,a){"use strict";a.r(t);var o=a(16),s=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"about-the-ads-and-how-i-implement-them"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#about-the-ads-and-how-i-implement-them"}},[e._v("#")]),e._v(" About the ads and how I implement them")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1546142711-1e28c0540deb?auto=format&fit=crop&w=740&q=80",alt:"Ad promo"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Fredrick Suwandi via "),t("a",{attrs:{href:"https://unsplash.com/photos/csXTAyTiESo",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Ads, the thing we all hate as when we are trying to enjoy something, they appear and kill the whole experience. Yes, I said \"we\" because I myself also hate it, but let's be honest and admit the fact that they generate incomes and one can hardly fight against this temptation, or even go too far as abusing it to earn as much as possible when this power is given and may be used at one's will. Admittedly, I'm that type of guy. Or if you are one of the nice people in my audience, you may consider me having some morals left for not flooding your screen with ads.")]),e._v(" "),t("p",[e._v("Sounds more like a confession than a blog so far, eh? Let's put that aside because, in this blog, I would like to share my experience with the Ads implementation in the different versions of my "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(".")],1),e._v(" "),t("h2",{attrs:{id:"choosing-the-ad-network"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#choosing-the-ad-network"}},[e._v("#")]),e._v(" Choosing the Ad Network")]),e._v(" "),t("p",[t("img",{attrs:{src:a(399),alt:"Ad Networks - AdMob, AppLovin, Adsense"}})]),e._v(" "),t("p",[e._v("Probably the least thing that bothered me when I came up with the idea to implement ads in my simulator. Despite a vast range of ad networks available, I just went straight for "),t("a",{attrs:{href:"https://admob.google.com/home/",target:"_blank",rel:"noopener noreferrer"}},[e._v("AdMob"),t("OutboundLink")],1),e._v(" due to its dominating presence all around the world. Indeed it's dominating for various reasons. From the registration to implementation, it was incredibly easy that I hardly found any time struggling with it. The documentation is well structured and provides all the instructions I would ever need. It even offered the mediation feature which combines the AdMob network with other third-party ad networks I registered, and picks the highest paid ad among these networks and display to the users, my revenue is then further boosted (well, not so much as you're imagining).")]),e._v(" "),t("p",[e._v("So yea, AdMob had been my partner for more than a year, until a couple of months ago... an "),t("strong",[e._v("ad serving limit")]),e._v(" was put down on my account. This would not be surprising as I had faced this issue twice before, each time only lasted for around 2 weeks to 1 month, but this time, it has been 4 months, without any notifications or simply a freaking reason. I mean, literally, every time an ad serving limit was placed and lifted, I do not have any idea what was the reason. And this time it was over my patience limit and I decided to switch to a new partner for real. After several searches and comparisons, I decided to pick "),t("a",{attrs:{href:"https://www.applovin.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("AppLovin"),t("OutboundLink")],1),e._v(" due to its ease of registration and a similar implementation method to AdMob. I'll just wait and see how it performs from here on.")]),e._v(" "),t("p",[e._v("For this website, I again went straight for "),t("a",{attrs:{href:"https://www.google.com/adsense/start/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Adsense"),t("OutboundLink")],1),e._v(", which is more or less a blood-related brother of AdMob. It has the same pros and is much simpler to register compared to other available vendors on the market due to the fact that page views/number of visitors per month are not considered but only your content that matters, as registration criteria. But hopefully, it won't end up the same way as AdMob.")]),e._v(" "),t("p",[e._v("Aside from these choices of mine, there are many more if you search them up, but of course, each one requires a different method for registration and the complexity depends on your region/location, and obviously your content as well. It's also important to note the revenue yielded from each is also varied.")]),e._v(" "),t("h2",{attrs:{id:"picking-the-ad-format"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picking-the-ad-format"}},[e._v("#")]),e._v(" Picking the Ad Format")]),e._v(" "),t("h3",{attrs:{id:"mobile-app"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mobile-app"}},[e._v("#")]),e._v(" Mobile App")]),e._v(" "),t("p",[e._v("Each ad network offers a different set of ad formats that you can implement. But in general, the most basic ones are "),t("strong",[e._v("Banner")]),e._v(", "),t("strong",[e._v("Interstitial")]),e._v(" and "),t("strong",[e._v("Rewarded")]),e._v(". Other formats just get their behaviors altered out of these base formats. Just understanding these 3 is already sufficient to pick the ones suitable for your app.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(400),alt:"AdMob Ad Formats"}})]),e._v(" "),t("p",[e._v("To pick the ad format for your own, it's obviously also important to know which one provides more revenue, hence for your reference, it is: "),t("strong",[e._v("Rewarded > Interstitial > Banner")]),e._v(". Rewarded ads bring the most revenue out of these, as when a user opt-in to watch an ad in exchange for something in-app, it is usually a 30-second or longer video ad. While Interstitial ads are a bit less in terms of revenue, they are still much more compared to Banners, but they also come with the paid price of user experience and are much of a means for abusing or suffocating the user with ads.")]),e._v(" "),t("p",[e._v("For my "),t("strong",[e._v("Win7 Simu")]),e._v(", I picked Banner and Interstitial as these two are more suitable with my app's tech and easier to implement.")]),e._v(" "),t("h3",{attrs:{id:"website"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#website"}},[e._v("#")]),e._v(" Website")]),e._v(" "),t("p",[e._v("For this website and the web version of "),t("strong",[e._v("Win7 Simu")]),e._v(", so far I have only considered and implemented "),t("strong",[e._v("Adsense")]),e._v(", therefore I'm only aware of the below ad formats from Adsense.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(401),alt:"Adsense Ad Formats"}})]),e._v(" "),t("p",[e._v("However, out of these 4, I only needed to use "),t("strong",[e._v("Display Ad")]),e._v(", which is also the format recommended by Google. The Display ad offers a responsive size that works anywhere you might cram it to, but of course the space should not be too small, otherwise there will be no ad available for serving. It's also possible to let Adsense setup the ads for you without any manual work by enabling the "),t("strong",[e._v("Auto Ads")]),e._v(", but personally, I prefer doing things by my own for which I will have full controls.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"implementing-ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-ads"}},[e._v("#")]),e._v(" Implementing ads")]),e._v(" "),t("p",[e._v("In this section, I'm not going into so much detail as to how to implement the ads in coding or something like how to write a framework component for placing Ads (there are already plenty of such tutorials and guides which are far more helpful than I can explain), but rather how the ads are being implemented in my products, the "),t("strong",[e._v("Win7 Simu")]),e._v(" app and "),t("strong",[e._v("this website")]),e._v(", and potentially any "),t("RouterLink",{attrs:{to:"/brick1100/about.html"}},[e._v("future product")]),e._v(" I may release.")],1),e._v(" "),t("h3",{attrs:{id:"win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu"}},[e._v("#")]),e._v(" Win7 Simu")]),e._v(" "),t("p",[e._v("So as mentioned above, due to the nature of my app, I picked Banner and Interstitial as my ad formats to implement.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(402),alt:"Win7 Simu's ad formats"}})]),e._v(" "),t("p",[e._v("The banner ad was placed at the top of the screen, with a refresh rate set to auto - typically a new ad is served after around 25 to 30 seconds. This one earned me a few cents everyday and I would say that's a fairly good amount to be happy about. However, considered that it occupied quite some space at the top which can prevent the user from enjoying an OS in fullscreen and poorly affect the experience, I decided to make a sacrifice by removing it from the app. Therefore, from "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html#2-16-0"}},[e._v("v2.16.0")]),e._v(" onwards, the banner ads are gone and you may enjoy the app to your fullest.")],1),e._v(" "),t("p",[e._v("The interstitial ad is still kept as a motivation for me to constantly maintain and work on the project, and also bring you more cool updates. And I didn't forget to carefully consider the frequency and placement for this type of ad so that you won't be interrupted so much and get annoyed. But of course, no matter what I try, I fully understand that there are always people who prefer criticism and will never be happy with such effort. I sure hope if you are not one of these people, please understand and keep supporting me.")]),e._v(" "),t("h3",{attrs:{id:"this-website"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#this-website"}},[e._v("#")]),e._v(" This website")]),e._v(" "),t("p",[e._v("You're probably seeing a few ads already in this blog post, and you can trust me when I say this is as many as I wanted to implement, not more. I used the responsive display ads by Adsense and tried to place the ads in the least intrusive way that hopefully blend with your reading experience. One last useful hint for those who also want to implement Adsense in their Vuepress blogs just like mine, you can refer to my site's source code which I made public "),t("a",{attrs:{href:"https://github.com/Visnalize/visnalize.github.io/tree/dev",target:"_blank",rel:"noopener noreferrer"}},[e._v("on Github"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("And this would be all I wanted to share in this blog, hope you had a good time reading it and somehow got some useful pieces of info with you as well.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/111.31e4c61e.js b/assets/js/111.31e4c61e.js deleted file mode 100644 index 33cb5bcf..00000000 --- a/assets/js/111.31e4c61e.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{587:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/111.b0579977.js b/assets/js/111.b0579977.js new file mode 100644 index 00000000..8e64756e --- /dev/null +++ b/assets/js/111.b0579977.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{589:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/112.683dec3f.js b/assets/js/112.586459ae.js similarity index 96% rename from assets/js/112.683dec3f.js rename to assets/js/112.586459ae.js index 9903bd2f..2e632e39 100644 --- a/assets/js/112.683dec3f.js +++ b/assets/js/112.586459ae.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{588:function(e,t,a){"use strict";a.r(t);var s=a(16),r=Object(s.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"theme-studio-changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-studio-changelog"}},[e._v("#")]),e._v(" Theme Studio Changelog")]),e._v(" "),t("m-social-links",{attrs:{hideCommentCount:""}}),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"all-versions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#all-versions"}},[e._v("#")]),e._v(" All versions")]),e._v(" "),t("h3",{attrs:{id:"_1-2-0-jul-10-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-2-0-jul-10-2023"}},[e._v("#")]),e._v(" 1.2.0 (Jul 10, 2023)")]),e._v(" "),t("ul",[t("li",[e._v("Add link to video tutorials")]),e._v(" "),t("li",[e._v("Improve theme viewing by creators")]),e._v(" "),t("li",[e._v("Creators can now edit/overwrite their published themes")])]),e._v(" "),t("h3",{attrs:{id:"_1-1-0-mar-13-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-1-0-mar-13-2023"}},[e._v("#")]),e._v(" 1.1.0 (Mar 13, 2023)")]),e._v(" "),t("ul",[t("li",[e._v("Search public themes by author")]),e._v(" "),t("li",[e._v("View theme's properties")])]),e._v(" "),t("h3",{attrs:{id:"_1-0-0-feb-19-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-0-0-feb-19-2023"}},[e._v("#")]),e._v(" 1.0.0 (Feb 19, 2023)")]),e._v(" "),t("ul",[t("li",[e._v("Load and edit theme source code")]),e._v(" "),t("li",[e._v("Save themes locally or publish to cloud storage")]),e._v(" "),t("li",[e._v("Explore public themes - search by name, sort by date/use")]),e._v(" "),t("li",[e._v("Apply themes")])])],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{587:function(e,t,a){"use strict";a.r(t);var s=a(16),r=Object(s.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"theme-studio-changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-studio-changelog"}},[e._v("#")]),e._v(" Theme Studio Changelog")]),e._v(" "),t("m-social-links",{attrs:{hideCommentCount:""}}),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"all-versions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#all-versions"}},[e._v("#")]),e._v(" All versions")]),e._v(" "),t("h3",{attrs:{id:"_1-2-0-jul-10-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-2-0-jul-10-2023"}},[e._v("#")]),e._v(" 1.2.0 (Jul 10, 2023)")]),e._v(" "),t("ul",[t("li",[e._v("Add link to video tutorials")]),e._v(" "),t("li",[e._v("Improve theme viewing by creators")]),e._v(" "),t("li",[e._v("Creators can now edit/overwrite their published themes")])]),e._v(" "),t("h3",{attrs:{id:"_1-1-0-mar-13-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-1-0-mar-13-2023"}},[e._v("#")]),e._v(" 1.1.0 (Mar 13, 2023)")]),e._v(" "),t("ul",[t("li",[e._v("Search public themes by author")]),e._v(" "),t("li",[e._v("View theme's properties")])]),e._v(" "),t("h3",{attrs:{id:"_1-0-0-feb-19-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-0-0-feb-19-2023"}},[e._v("#")]),e._v(" 1.0.0 (Feb 19, 2023)")]),e._v(" "),t("ul",[t("li",[e._v("Load and edit theme source code")]),e._v(" "),t("li",[e._v("Save themes locally or publish to cloud storage")]),e._v(" "),t("li",[e._v("Explore public themes - search by name, sort by date/use")]),e._v(" "),t("li",[e._v("Apply themes")])])],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/12.fad7ca11.js b/assets/js/12.e92d4d15.js similarity index 90% rename from assets/js/12.fad7ca11.js rename to assets/js/12.e92d4d15.js index b8670477..5864df5e 100644 --- a/assets/js/12.fad7ca11.js +++ b/assets/js/12.e92d4d15.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{405:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},406:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},407:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},408:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},537:function(e,t,a){"use strict";a.r(t);var o=a(16),r=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-to-add-more-games-to-game-stick-lite-4k"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-add-more-games-to-game-stick-lite-4k"}},[e._v("#")]),e._v(" How to add more games to Game Stick Lite 4K")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/game-stick-4k-lite.jpg",alt:"Game Stick Lite 4K"}})]),e._v(" "),t("p",[e._v("Recently, I have had a chance to get my hands on a Game Stick Lite 4K, a USB stick-like device with two controllers and a bunch of pre-installed games that you can play on your TV. It is a fantastic option for those who want to play their childhood games on a big screen without owning a fancy console or a computer, as it is very affordable (typically around $20 - $40) and easy to set up. Though there are a lot of games pre-installed, some of your childhood favorites might be missing or are not available in your language. In this post, I will show you how to add more games to the Game Stick Lite 4K to enjoy more of your childhood games.")]),e._v(" "),t("h2",{attrs:{id:"prerequisites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prerequisites"}},[e._v("#")]),e._v(" Prerequisites")]),e._v(" "),t("ul",[t("li",[e._v("A Game Stick Lite 4K (apparently)")]),e._v(" "),t("li",[e._v("A computer or laptop with internet connection")]),e._v(" "),t("li",[e._v("A MicroSD card reader (even your smartphone can be used as a card reader)")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("ul",[t("li",[t("p",[e._v("Have the game ROMs you want to play ready (you can find these easily by searching on the internet). Optionally, download a cover image for each game. The cover image should be in the "),t("code",[e._v(".png")]),e._v(" format and have the same name as the game ROM file. The cover image may then be displayed when you select the game to play.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(405),alt:"Game ROMs and cover images"}})])]),e._v(" "),t("li",[t("p",[e._v("Remove the MicroSD card from the game stick and insert it into your computer or laptop using a MicroSD card reader.")])]),e._v(" "),t("li",[t("p",[e._v("At the root of the SD card, you will see a "),t("code",[e._v("game")]),e._v(" folder, this is where all the games are stored. Games are grouped by the console they belong to. For instance, all the NES games are stored in the "),t("code",[e._v("fc")]),e._v(" folder, all the GameboyColor games are stored in the "),t("code",[e._v("gbc")]),e._v(" folder, Atari games in the "),t("code",[e._v("atari")]),e._v(" folder, and so on.")])]),e._v(" "),t("li",[t("p",[e._v("Copy your game ROMs (and their cover images) to the respective folders. Note that the ROM format should match with what is already available in the folder.")])]),e._v(" "),t("li",[t("p",[e._v("Install "),t("a",{attrs:{href:"https://sqlitebrowser.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("DB4S"),t("OutboundLink")],1),e._v(" (SQLite Database Browser) on your computer or laptop.")])]),e._v(" "),t("li",[t("p",[e._v("Back to the root of the SD card, open the "),t("code",[e._v("games.db")]),e._v(" file with DB4S (you might need to copy the file to your computer first if you are using a smartphone as a card reader).")])]),e._v(" "),t("li",[t("p",[e._v("Here, a list of tables in the game database will be displayed, you only need to care about the tables "),t("code",[e._v("tbl_en")]),e._v(" and "),t("code",[e._v("tbl_game")]),e._v(" where you will modify to add your games.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(406),alt:"Open games.db file using DB4S"}})])]),e._v(" "),t("li",[t("p",[e._v('Click on the "Browse Data" tab and select the '),t("code",[e._v("tbl_en")]),e._v(' table from the dropdown. Choose "Insert a new record" and add your game titles. Make sure the game titles match the names of the ROM files you added earlier.')]),e._v(" "),t("p",[t("img",{attrs:{src:a(407),alt:"Browse Data tab"}})])]),e._v(" "),t("li",[t("p",[e._v("Then select the "),t("code",[e._v("tbl_game")]),e._v(" table from the dropdown. Start adding your game data here following the existing format and structure. Also make sure the game titles match the names of the ROM files you added earlier.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(408),alt:"Insert game data"}})])])]),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Warning")]),e._v(" "),t("p",[e._v("Be very careful when modifying the game database. Any mistake will cause the game stick to not work properly. Always make a backup of the "),t("code",[e._v("games.db")]),e._v(" file before making any changes.")])]),e._v(" "),t("ul",[t("li",[e._v("Save your changes (and replace the "),t("code",[e._v("games.db")]),e._v(" file on the SD card if you copied it to your computer earlier).")]),e._v(" "),t("li",[e._v("Safely remove the MicroSD card from your computer or laptop and insert it back into the game stick.")]),e._v(" "),t("li",[e._v("Turn on the game stick and enjoy your games!")])]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{406:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},407:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},408:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},409:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},536:function(e,t,a){"use strict";a.r(t);var o=a(16),r=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-to-add-more-games-to-game-stick-lite-4k"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-add-more-games-to-game-stick-lite-4k"}},[e._v("#")]),e._v(" How to add more games to Game Stick Lite 4K")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/game-stick-4k-lite.jpg",alt:"Game Stick Lite 4K"}})]),e._v(" "),t("p",[e._v("Recently, I have had a chance to get my hands on a Game Stick Lite 4K, a USB stick-like device with two controllers and a bunch of pre-installed games that you can play on your TV. It is a fantastic option for those who want to play their childhood games on a big screen without owning a fancy console or a computer, as it is very affordable (typically around $20 - $40) and easy to set up. Though there are a lot of games pre-installed, some of your childhood favorites might be missing or are not available in your language. In this post, I will show you how to add more games to the Game Stick Lite 4K to enjoy more of your childhood games.")]),e._v(" "),t("h2",{attrs:{id:"prerequisites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prerequisites"}},[e._v("#")]),e._v(" Prerequisites")]),e._v(" "),t("ul",[t("li",[e._v("A Game Stick Lite 4K (apparently)")]),e._v(" "),t("li",[e._v("A computer or laptop with internet connection")]),e._v(" "),t("li",[e._v("A MicroSD card reader (even your smartphone can be used as a card reader)")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("ul",[t("li",[t("p",[e._v("Have the game ROMs you want to play ready (you can find these easily by searching on the internet). Optionally, download a cover image for each game. The cover image should be in the "),t("code",[e._v(".png")]),e._v(" format and have the same name as the game ROM file. The cover image may then be displayed when you select the game to play.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(406),alt:"Game ROMs and cover images"}})])]),e._v(" "),t("li",[t("p",[e._v("Remove the MicroSD card from the game stick and insert it into your computer or laptop using a MicroSD card reader.")])]),e._v(" "),t("li",[t("p",[e._v("At the root of the SD card, you will see a "),t("code",[e._v("game")]),e._v(" folder, this is where all the games are stored. Games are grouped by the console they belong to. For instance, all the NES games are stored in the "),t("code",[e._v("fc")]),e._v(" folder, all the GameboyColor games are stored in the "),t("code",[e._v("gbc")]),e._v(" folder, Atari games in the "),t("code",[e._v("atari")]),e._v(" folder, and so on.")])]),e._v(" "),t("li",[t("p",[e._v("Copy your game ROMs (and their cover images) to the respective folders. Note that the ROM format should match with what is already available in the folder.")])]),e._v(" "),t("li",[t("p",[e._v("Install "),t("a",{attrs:{href:"https://sqlitebrowser.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("DB4S"),t("OutboundLink")],1),e._v(" (SQLite Database Browser) on your computer or laptop.")])]),e._v(" "),t("li",[t("p",[e._v("Back to the root of the SD card, open the "),t("code",[e._v("games.db")]),e._v(" file with DB4S (you might need to copy the file to your computer first if you are using a smartphone as a card reader).")])]),e._v(" "),t("li",[t("p",[e._v("Here, a list of tables in the game database will be displayed, you only need to care about the tables "),t("code",[e._v("tbl_en")]),e._v(" and "),t("code",[e._v("tbl_game")]),e._v(" where you will modify to add your games.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(407),alt:"Open games.db file using DB4S"}})])]),e._v(" "),t("li",[t("p",[e._v('Click on the "Browse Data" tab and select the '),t("code",[e._v("tbl_en")]),e._v(' table from the dropdown. Choose "Insert a new record" and add your game titles. Make sure the game titles match the names of the ROM files you added earlier.')]),e._v(" "),t("p",[t("img",{attrs:{src:a(408),alt:"Browse Data tab"}})])]),e._v(" "),t("li",[t("p",[e._v("Then select the "),t("code",[e._v("tbl_game")]),e._v(" table from the dropdown. Start adding your game data here following the existing format and structure. Also make sure the game titles match the names of the ROM files you added earlier.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(409),alt:"Insert game data"}})])])]),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Warning")]),e._v(" "),t("p",[e._v("Be very careful when modifying the game database. Any mistake will cause the game stick to not work properly. Always make a backup of the "),t("code",[e._v("games.db")]),e._v(" file before making any changes.")])]),e._v(" "),t("ul",[t("li",[e._v("Save your changes (and replace the "),t("code",[e._v("games.db")]),e._v(" file on the SD card if you copied it to your computer earlier).")]),e._v(" "),t("li",[e._v("Safely remove the MicroSD card from your computer or laptop and insert it back into the game stick.")]),e._v(" "),t("li",[e._v("Turn on the game stick and enjoy your games!")])]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/13.e82454a6.js b/assets/js/13.4834fdf3.js similarity index 92% rename from assets/js/13.e82454a6.js rename to assets/js/13.4834fdf3.js index a41dce51..07d34c09 100644 --- a/assets/js/13.e82454a6.js +++ b/assets/js/13.4834fdf3.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{411:function(e,t,o){e.exports=o.p+"assets/img/win7simu-iframe-browser.ddc0ac3e.png"},412:function(e,t,o){e.exports=o.p+"assets/img/iframe-example.2e94f1f8.png"},413:function(e,t,o){e.exports=o.p+"assets/img/install-requestly-edge.b2cce739.png"},414:function(e,t,o){e.exports=o.p+"assets/img/import-win7simu-requestly-rules.a4498b88.png"},539:function(e,t,o){"use strict";o.r(t);var s=o(16),i=Object(s.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-to-get-iframes-to-load-any-websites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-get-iframes-to-load-any-websites"}},[e._v("#")]),e._v(" How to get iframes to load any websites")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/load-any-websites-in-iframes.png",alt:"The infinite iframe"}})]),e._v(" "),t("center",[t("a-button",{attrs:{href:"#step-by-step-guide"}},[e._v("Jump to the guide")])],1),e._v(" "),t("p",[e._v("As mentioned in my previous post regarding "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#iframe-issue"}},[e._v("the issue")]),e._v(" that the Win7 Simu's web browsers (using "),t("code",[e._v("iframes")]),e._v(') have been suffering from, I have been trying hard to come up with a way to solve it, from all the "google-ing", digging the source code of potential solutions, to a lot of trials and failures, I have finally come to the solutions that work. These solutions do not dismiss the issue completely, but they just seem to work better, in one way or another, than the earlier approach using a proxy server.')],1),e._v(" "),t("p",[e._v("In this post, I'm gonna share the solution I have come to for the "),t("strong",[e._v("Web")]),e._v(" version of Win7 Simu. The solution for the "),t("strong",[e._v("Android")]),e._v(" platform is different and may be shared in another post.")]),e._v(" "),t("h2",{attrs:{id:"the-scenario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-scenario"}},[e._v("#")]),e._v(" The scenario")]),e._v(" "),t("p",[t("img",{attrs:{src:o(411),alt:"Cannot load website in iframe"}})]),e._v(" "),t("p",[e._v("As I have shared in the previous "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("blog post")]),e._v(", Win7 Simu is made up of web techs, and "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",target:"_blank",rel:"noopener noreferrer"}},[e._v("iframe"),t("OutboundLink")],1),e._v(" has been the technique of choice to simulate a web browser's functionalities due to its similar capabilities. To put it simply, iframe is capable of embedding one website into another, allowing controlling the embedded website to some extent. However, due to security risks, the website owners may restrict this capability or not allow the embedding to happen at all, by setting the "),t("code",[e._v("X-Frame-Options")]),e._v(" header to "),t("code",[e._v("sameorigin")]),e._v(" and/or specifying the "),t("code",[e._v("Content-Security-Policy")]),e._v(" header constraint on the response received by requests to load their website.")],1),e._v(" "),t("p",[e._v("For example, if an iframe wants to load a Google search page at "),t("code",[e._v("https://google.com")]),e._v(", it will make a request to that URL, Google will respond to the request with the necessary data to present itself as a web page, including the "),t("code",[e._v("X-Frame-Options")]),e._v(" and/or "),t("code",[e._v("Content-Security-Policy")]),e._v(" headers in the response. If the iframe receives the "),t("code",[e._v("X-Frame-Options")]),e._v(" with the "),t("code",[e._v("sameorigin")]),e._v(" value, or with some cross-origin restriction rules in the "),t("code",[e._v("Content-Security-Policy")]),e._v(", the web page cannot be shown in the iframe.")]),e._v(" "),t("p",[t("img",{attrs:{src:o(412),alt:"Iframe example"}})]),e._v(" "),t("p",[t("em",[e._v("(Illustration poorly crafted using "),t("a",{attrs:{href:"https://excalidraw.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Excalidraw"),t("OutboundLink")],1),e._v(")")])]),e._v(" "),t("p",[e._v("And this is a common practice for the majority of websites, they don't owe you anything to let you run loose and potentially cause damage to their business.")]),e._v(" "),t("p",[e._v("So I'm out of luck then? There is no way to simulate a web browser's functionalities in a web environment? Well, more or less. With the problem identified, there is still a chance to come up with a solution, and the solution I have come to is "),t("strong",[e._v("intercepting the response")]),e._v(" to remove these two headers so that the iframe can load any website normally. For this, a browser extension is required as it is the only possible way to intercept requests/responses coming through the user's web browser without much security concern. Follow the below steps to implement this solution on your device.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide is not applicable for Android. If you are using the Android version, skip it to save some minutes of your life 😇")])]),e._v(" "),t("h3",{attrs:{id:"_1-install-requestly-browser-extension"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-install-requestly-browser-extension"}},[e._v("#")]),e._v(" 1. Install Requestly browser extension")]),e._v(" "),t("ul",[t("li",[e._v("Visit "),t("a",{attrs:{href:"https://requestly.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Requestly home page"),t("OutboundLink")],1)]),e._v(" "),t("li",[e._v("Download the extension for your browser of choice, eg. pick the Chrome version of the extension if you are using Chrome, Firefox extension for Firefox, Edge add-on for Edge etc.")])]),e._v(" "),t("p",[t("img",{attrs:{src:o(413),alt:"Install Requestly on Edge"}})]),e._v(" "),t("h3",{attrs:{id:"_2-import-the-predefined-rules"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-import-the-predefined-rules"}},[e._v("#")]),e._v(" 2. Import the predefined rules")]),e._v(" "),t("ul",[t("li",[e._v("Download "),t("a",{attrs:{href:"/assets/win7-simu-requestly.json",download:""}},[e._v("this JSON file")]),e._v(" which contains the Requestly rules to make Win7 Simu's web browers capable of loading any websites ("),t("em",[e._v("file last updated: June 12, 2024")]),e._v(")")]),e._v(" "),t("li",[e._v("Go to "),t("a",{attrs:{href:"https://app.requestly.io/rules/my-rules",target:"_blank",rel:"noopener noreferrer"}},[e._v("Requestly app page"),t("OutboundLink")],1)]),e._v(" "),t("li",[e._v("Upload the JSON file to import the rules.")])]),e._v(" "),t("p",[t("img",{attrs:{src:o(414),alt:"Import Win7 Simu Requestly rules"}})]),e._v(" "),t("h3",{attrs:{id:"_3-enjoy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3-enjoy"}},[e._v("#")]),e._v(" 3. Enjoy")]),e._v(" "),t("p",[e._v("There is no step 3. From now on, you should be able to view any websites in Win7 Simu's web browsers without problems.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{410:function(e,t,o){e.exports=o.p+"assets/img/win7simu-iframe-browser.ddc0ac3e.png"},411:function(e,t,o){e.exports=o.p+"assets/img/iframe-example.2e94f1f8.png"},412:function(e,t,o){e.exports=o.p+"assets/img/install-requestly-edge.b2cce739.png"},413:function(e,t,o){e.exports=o.p+"assets/img/import-win7simu-requestly-rules.a4498b88.png"},537:function(e,t,o){"use strict";o.r(t);var s=o(16),i=Object(s.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-to-get-iframes-to-load-any-websites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-get-iframes-to-load-any-websites"}},[e._v("#")]),e._v(" How to get iframes to load any websites")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/load-any-websites-in-iframes.png",alt:"The infinite iframe"}})]),e._v(" "),t("center",[t("a-button",{attrs:{href:"#step-by-step-guide"}},[e._v("Jump to the guide")])],1),e._v(" "),t("p",[e._v("As mentioned in my previous post regarding "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#iframe-issue"}},[e._v("the issue")]),e._v(" that the Win7 Simu's web browsers (using "),t("code",[e._v("iframes")]),e._v(') have been suffering from, I have been trying hard to come up with a way to solve it, from all the "google-ing", digging the source code of potential solutions, to a lot of trials and failures, I have finally come to the solutions that work. These solutions do not dismiss the issue completely, but they just seem to work better, in one way or another, than the earlier approach using a proxy server.')],1),e._v(" "),t("p",[e._v("In this post, I'm gonna share the solution I have come to for the "),t("strong",[e._v("Web")]),e._v(" version of Win7 Simu. The solution for the "),t("strong",[e._v("Android")]),e._v(" platform is different and may be shared in another post.")]),e._v(" "),t("h2",{attrs:{id:"the-scenario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-scenario"}},[e._v("#")]),e._v(" The scenario")]),e._v(" "),t("p",[t("img",{attrs:{src:o(410),alt:"Cannot load website in iframe"}})]),e._v(" "),t("p",[e._v("As I have shared in the previous "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("blog post")]),e._v(", Win7 Simu is made up of web techs, and "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",target:"_blank",rel:"noopener noreferrer"}},[e._v("iframe"),t("OutboundLink")],1),e._v(" has been the technique of choice to simulate a web browser's functionalities due to its similar capabilities. To put it simply, iframe is capable of embedding one website into another, allowing controlling the embedded website to some extent. However, due to security risks, the website owners may restrict this capability or not allow the embedding to happen at all, by setting the "),t("code",[e._v("X-Frame-Options")]),e._v(" header to "),t("code",[e._v("sameorigin")]),e._v(" and/or specifying the "),t("code",[e._v("Content-Security-Policy")]),e._v(" header constraint on the response received by requests to load their website.")],1),e._v(" "),t("p",[e._v("For example, if an iframe wants to load a Google search page at "),t("code",[e._v("https://google.com")]),e._v(", it will make a request to that URL, Google will respond to the request with the necessary data to present itself as a web page, including the "),t("code",[e._v("X-Frame-Options")]),e._v(" and/or "),t("code",[e._v("Content-Security-Policy")]),e._v(" headers in the response. If the iframe receives the "),t("code",[e._v("X-Frame-Options")]),e._v(" with the "),t("code",[e._v("sameorigin")]),e._v(" value, or with some cross-origin restriction rules in the "),t("code",[e._v("Content-Security-Policy")]),e._v(", the web page cannot be shown in the iframe.")]),e._v(" "),t("p",[t("img",{attrs:{src:o(411),alt:"Iframe example"}})]),e._v(" "),t("p",[t("em",[e._v("(Illustration poorly crafted using "),t("a",{attrs:{href:"https://excalidraw.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Excalidraw"),t("OutboundLink")],1),e._v(")")])]),e._v(" "),t("p",[e._v("And this is a common practice for the majority of websites, they don't owe you anything to let you run loose and potentially cause damage to their business.")]),e._v(" "),t("p",[e._v("So I'm out of luck then? There is no way to simulate a web browser's functionalities in a web environment? Well, more or less. With the problem identified, there is still a chance to come up with a solution, and the solution I have come to is "),t("strong",[e._v("intercepting the response")]),e._v(" to remove these two headers so that the iframe can load any website normally. For this, a browser extension is required as it is the only possible way to intercept requests/responses coming through the user's web browser without much security concern. Follow the below steps to implement this solution on your device.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide is not applicable for Android. If you are using the Android version, skip it to save some minutes of your life 😇")])]),e._v(" "),t("h3",{attrs:{id:"_1-install-requestly-browser-extension"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-install-requestly-browser-extension"}},[e._v("#")]),e._v(" 1. Install Requestly browser extension")]),e._v(" "),t("ul",[t("li",[e._v("Visit "),t("a",{attrs:{href:"https://requestly.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Requestly home page"),t("OutboundLink")],1)]),e._v(" "),t("li",[e._v("Download the extension for your browser of choice, eg. pick the Chrome version of the extension if you are using Chrome, Firefox extension for Firefox, Edge add-on for Edge etc.")])]),e._v(" "),t("p",[t("img",{attrs:{src:o(412),alt:"Install Requestly on Edge"}})]),e._v(" "),t("h3",{attrs:{id:"_2-import-the-predefined-rules"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-import-the-predefined-rules"}},[e._v("#")]),e._v(" 2. Import the predefined rules")]),e._v(" "),t("ul",[t("li",[e._v("Download "),t("a",{attrs:{href:"/assets/win7-simu-requestly.json",download:""}},[e._v("this JSON file")]),e._v(" which contains the Requestly rules to make Win7 Simu's web browers capable of loading any websites ("),t("em",[e._v("file last updated: June 12, 2024")]),e._v(")")]),e._v(" "),t("li",[e._v("Go to "),t("a",{attrs:{href:"https://app.requestly.io/rules/my-rules",target:"_blank",rel:"noopener noreferrer"}},[e._v("Requestly app page"),t("OutboundLink")],1)]),e._v(" "),t("li",[e._v("Upload the JSON file to import the rules.")])]),e._v(" "),t("p",[t("img",{attrs:{src:o(413),alt:"Import Win7 Simu Requestly rules"}})]),e._v(" "),t("h3",{attrs:{id:"_3-enjoy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3-enjoy"}},[e._v("#")]),e._v(" 3. Enjoy")]),e._v(" "),t("p",[e._v("There is no step 3. From now on, you should be able to view any websites in Win7 Simu's web browsers without problems.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/14.56c3e314.js b/assets/js/14.22a8b82a.js similarity index 97% rename from assets/js/14.56c3e314.js rename to assets/js/14.22a8b82a.js index 95e249d9..5b55e347 100644 --- a/assets/js/14.56c3e314.js +++ b/assets/js/14.22a8b82a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{442:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},443:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},444:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},445:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},591:function(t,s,n){"use strict";n.r(s);var e=n(16),a=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"in-depth-guide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#in-depth-guide"}},[t._v("#")]),t._v(" In-depth guide")]),t._v(" "),s("m-social-links"),t._v(" "),s("p",[t._v("This page aims to walk you through "),s("strong",[t._v("Theme Studio")]),t._v(" in an in-depth manner, everything you need to know to craft your own themes for Win7 Simu. As a prerequisite, it is required that you have some ground knowledge of "),s("strong",[t._v("HTML")]),t._v(" and "),s("strong",[t._v("CSS")]),t._v(" to be able to follow along easier, otherwise, here are some good free resources to learn:")]),t._v(" "),s("ul",[s("li",[t._v("MDN ("),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/HTML",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("w3schools ("),s("a",{attrs:{href:"https://www.w3schools.com/html/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.w3schools.com/css/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("Sololearn ("),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/html-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/css-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("h2",{attrs:{id:"step-by-step"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step"}},[t._v("#")]),t._v(" Step-by-step")]),t._v(" "),s("h3",{attrs:{id:"writing-your-first-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writing-your-first-theme"}},[t._v("#")]),t._v(" Writing your first theme")]),t._v(" "),s("ul",[s("li",[t._v('From the main window, choose "Start a new project". A blank Theme Studio editor opens up.')]),t._v(" "),s("li",[t._v('Let\'s say I want to make a theme that only changes the appearance of the buttons, I will select the "Button" element.')]),t._v(" "),s("li",[t._v("In the Source code component, enter:")])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 6px 12px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:not(:disabled):hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default:hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("The button's CSS snippet above will take effect immediately in the Preview area and you should be able to see a new appearance of the buttons:")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(442),alt:"Guide - Write CSS"}})]),t._v(" "),s("ul",[s("li",[t._v('To temporarily experience the theme in action, click the "Apply" button. You should see the new appearance of the buttons everywhere, but note that this will only last for the current login session, if you logout or restart the simulator, the changes will be gone.')]),t._v(" "),s("li",[t._v('Once happy with it, you can save the theme by clicking the "Save" button. From the save popup, enter a desired Name, for the thumbnail (this is optional), there are 2 options available:\n'),s("ul",[s("li",[t._v("Take a screenshot - this will quickly capture a screenshot of your current screen.")]),t._v(" "),s("li",[t._v("Load from URL - this will load the image from the input URL.")])])])]),t._v(" "),s("p",[s("img",{attrs:{src:n(443),alt:"Guide - Save theme"}})]),t._v(" "),s("ul",[s("li",[t._v('Clicking "Save" again will save the theme locally on your device.')])]),t._v(" "),s("p",[t._v('After your theme is saved, you can find it under the "My Creations" tab of Theme Studio\'s explorer, from there, you may either "Load" it to resume editing, "Apply" to use it, or "Publish" it to the community.')]),t._v(" "),s("p",[s("img",{attrs:{src:n(444),alt:"Guide - Theme actions"}})]),t._v(" "),s("h3",{attrs:{id:"using-themes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-themes"}},[t._v("#")]),t._v(" Using themes")]),t._v(" "),s("ul",[s("li",[t._v('To use your created theme, right-click on it (hold your finger), and select "Apply" from the menu. You should now see the buttons\' appearance changed to the selected theme.')]),t._v(" "),s("li",[t._v("This change will last for as long as you decide to switch to another theme.")]),t._v(" "),s("li",[t._v('If you open up "Personalize", you will also notice that there is a new section for the selected theme as "Installed Theme", allowing you to switch between this and the native themes.')])]),t._v(" "),s("p",[s("img",{attrs:{src:n(445),alt:"Guide - Installed theme"}})]),t._v(" "),s("ul",[s("li",[t._v("This also applies to any public themes and templates that you use from Theme Studio.")])]),t._v(" "),s("h3",{attrs:{id:"publishing-your-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#publishing-your-theme"}},[t._v("#")]),t._v(" Publishing your theme")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This feature is only available with user accounts. Therefore, make sure you are logged-in in order to see it.")])]),t._v(" "),s("ul",[s("li",[t._v('If you want to share your theme with the community, you can publish it also by right-clicking on the theme (hold your finger), and selecting "Publish" from the menu. The theme will then be published under the "Public Gallery" tab.')]),t._v(" "),s("li",[t._v("As your theme is now publicly available, everyone has access to it. They can either load its source code to view and modify, or use it to apply to their Win7 Simu.")]),t._v(" "),s("li",[t._v("Likewise, you can also view, modify, or use any of the public themes.")]),t._v(" "),s("li",[t._v('If you wish to remove your theme from the public, simply select "Delete" also from the right-click menu, your theme will be then removed from the Public Gallery. However, keep in mind that anyone who has already loaded your theme onto their device will still keep a copy of it.')])]),t._v(" "),s("a-google-ad"),t._v(" "),s("h2",{attrs:{id:"common-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#common-selectors"}},[t._v("#")]),t._v(" Common selectors")]),t._v(" "),s("p",[t._v("The CSS snippet below includes some common selectors for certain elements that you may use to craft your theme:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Button **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A default button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:disabled")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Checkbox **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Context Menu **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a context menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menu > [role="menuitem"] > a,\n.winui-menu > [role="menuitem"] > button,\n.winui-menu > [role="menuitem"] > label,\n.winui-menu > [role="menuitem"][aria-haspopup="true"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The various child elements of a menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Desktop **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the background */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="computer"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the computer icon */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Dropdown **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown:focus")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A focused dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Menu Bar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menubar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar > [role="menuitem"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A child element of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar [role="menuitem"][aria-disabled]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled child element */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Radio **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Slider **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-runnable-track")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider track */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-thumb")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider thumb */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Tabs **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tablist"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-tabs .winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu's button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tabpanel"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab panel */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Taskbar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#start-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The start button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items > .taskbar-item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The individual taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-tray")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar tray */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Text Box **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("textarea.winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A multi-line textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Window **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The main window container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".titlebar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's title bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="minimize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's minimize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="maximize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's maximize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="close"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's close control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's content area */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .statusbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's status bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"background-and-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#background-and-icons"}},[t._v("#")]),t._v(" Background and icons")]),t._v(" "),s("p",[t._v("To change the background and the various icons using Theme Studio, you must comply with the following rules:")]),t._v(" "),s("ul",[s("li",[t._v("Use "),s("code",[t._v("--bg")]),t._v(" and "),s("code",[t._v("--icon")]),t._v(" "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",target:"_blank",rel:"noopener noreferrer"}},[t._v("variables"),s("OutboundLink")],1),t._v(" for the background and icons respectively.")]),t._v(" "),s("li",[t._v("Append "),s("code",[t._v("!important")]),t._v(" after each rule for the change to take effect.")]),t._v(" "),s("li",[t._v("Target the corresponding "),s("a",{attrs:{href:"#program-ids"}},[t._v("program ID")]),t._v(" with "),s("code",[t._v('[data-icon=""]')]),t._v(" to change its icon.")])]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the desktop background to Windows XP Azul */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://i.redd.it/0ohv3srxzb631.jpg"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="themestudio"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the icon of Theme Studio */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://cdn-icons-png.flaticon.com/256/5447/5447297.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"program-ids"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#program-ids"}},[t._v("#")]),t._v(" Program IDs")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This list is incomplete and subject to change (more to be added) in the future updates.")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("computer")])]),t._v(" "),s("li",[s("code",[t._v("bin")])]),t._v(" "),s("li",[s("code",[t._v("about")])]),t._v(" "),s("li",[s("code",[t._v("calc")])]),t._v(" "),s("li",[s("code",[t._v("chrome")])]),t._v(" "),s("li",[s("code",[t._v("cmd")])]),t._v(" "),s("li",[s("code",[t._v("games")])]),t._v(" "),s("li",[s("code",[t._v("ie")])]),t._v(" "),s("li",[s("code",[t._v("notepad")])]),t._v(" "),s("li",[s("code",[t._v("snipping")])]),t._v(" "),s("li",[s("code",[t._v("paint")])]),t._v(" "),s("li",[s("code",[t._v("player")])]),t._v(" "),s("li",[s("code",[t._v("sticky")])]),t._v(" "),s("li",[s("code",[t._v("camera")])]),t._v(" "),s("li",[s("code",[t._v("recorder")])]),t._v(" "),s("li",[s("code",[t._v("wordpad")])]),t._v(" "),s("li",[s("code",[t._v("run")])]),t._v(" "),s("li",[s("code",[t._v("magnifier")])]),t._v(" "),s("li",[s("code",[t._v("themestudio")])]),t._v(" "),s("li",[s("code",[t._v("installer")])]),t._v(" "),s("li",[s("code",[t._v("bsod")])])])],1)}),[],!1,null,null,null);s.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{434:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},435:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},436:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},437:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},588:function(t,s,n){"use strict";n.r(s);var e=n(16),a=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"in-depth-guide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#in-depth-guide"}},[t._v("#")]),t._v(" In-depth guide")]),t._v(" "),s("m-social-links"),t._v(" "),s("p",[t._v("This page aims to walk you through "),s("strong",[t._v("Theme Studio")]),t._v(" in an in-depth manner, everything you need to know to craft your own themes for Win7 Simu. As a prerequisite, it is required that you have some ground knowledge of "),s("strong",[t._v("HTML")]),t._v(" and "),s("strong",[t._v("CSS")]),t._v(" to be able to follow along easier, otherwise, here are some good free resources to learn:")]),t._v(" "),s("ul",[s("li",[t._v("MDN ("),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/HTML",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("w3schools ("),s("a",{attrs:{href:"https://www.w3schools.com/html/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.w3schools.com/css/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("Sololearn ("),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/html-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/css-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("h2",{attrs:{id:"step-by-step"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step"}},[t._v("#")]),t._v(" Step-by-step")]),t._v(" "),s("h3",{attrs:{id:"writing-your-first-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writing-your-first-theme"}},[t._v("#")]),t._v(" Writing your first theme")]),t._v(" "),s("ul",[s("li",[t._v('From the main window, choose "Start a new project". A blank Theme Studio editor opens up.')]),t._v(" "),s("li",[t._v('Let\'s say I want to make a theme that only changes the appearance of the buttons, I will select the "Button" element.')]),t._v(" "),s("li",[t._v("In the Source code component, enter:")])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 6px 12px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:not(:disabled):hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default:hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("The button's CSS snippet above will take effect immediately in the Preview area and you should be able to see a new appearance of the buttons:")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(434),alt:"Guide - Write CSS"}})]),t._v(" "),s("ul",[s("li",[t._v('To temporarily experience the theme in action, click the "Apply" button. You should see the new appearance of the buttons everywhere, but note that this will only last for the current login session, if you logout or restart the simulator, the changes will be gone.')]),t._v(" "),s("li",[t._v('Once happy with it, you can save the theme by clicking the "Save" button. From the save popup, enter a desired Name, for the thumbnail (this is optional), there are 2 options available:\n'),s("ul",[s("li",[t._v("Take a screenshot - this will quickly capture a screenshot of your current screen.")]),t._v(" "),s("li",[t._v("Load from URL - this will load the image from the input URL.")])])])]),t._v(" "),s("p",[s("img",{attrs:{src:n(435),alt:"Guide - Save theme"}})]),t._v(" "),s("ul",[s("li",[t._v('Clicking "Save" again will save the theme locally on your device.')])]),t._v(" "),s("p",[t._v('After your theme is saved, you can find it under the "My Creations" tab of Theme Studio\'s explorer, from there, you may either "Load" it to resume editing, "Apply" to use it, or "Publish" it to the community.')]),t._v(" "),s("p",[s("img",{attrs:{src:n(436),alt:"Guide - Theme actions"}})]),t._v(" "),s("h3",{attrs:{id:"using-themes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-themes"}},[t._v("#")]),t._v(" Using themes")]),t._v(" "),s("ul",[s("li",[t._v('To use your created theme, right-click on it (hold your finger), and select "Apply" from the menu. You should now see the buttons\' appearance changed to the selected theme.')]),t._v(" "),s("li",[t._v("This change will last for as long as you decide to switch to another theme.")]),t._v(" "),s("li",[t._v('If you open up "Personalize", you will also notice that there is a new section for the selected theme as "Installed Theme", allowing you to switch between this and the native themes.')])]),t._v(" "),s("p",[s("img",{attrs:{src:n(437),alt:"Guide - Installed theme"}})]),t._v(" "),s("ul",[s("li",[t._v("This also applies to any public themes and templates that you use from Theme Studio.")])]),t._v(" "),s("h3",{attrs:{id:"publishing-your-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#publishing-your-theme"}},[t._v("#")]),t._v(" Publishing your theme")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This feature is only available with user accounts. Therefore, make sure you are logged-in in order to see it.")])]),t._v(" "),s("ul",[s("li",[t._v('If you want to share your theme with the community, you can publish it also by right-clicking on the theme (hold your finger), and selecting "Publish" from the menu. The theme will then be published under the "Public Gallery" tab.')]),t._v(" "),s("li",[t._v("As your theme is now publicly available, everyone has access to it. They can either load its source code to view and modify, or use it to apply to their Win7 Simu.")]),t._v(" "),s("li",[t._v("Likewise, you can also view, modify, or use any of the public themes.")]),t._v(" "),s("li",[t._v('If you wish to remove your theme from the public, simply select "Delete" also from the right-click menu, your theme will be then removed from the Public Gallery. However, keep in mind that anyone who has already loaded your theme onto their device will still keep a copy of it.')])]),t._v(" "),s("a-google-ad"),t._v(" "),s("h2",{attrs:{id:"common-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#common-selectors"}},[t._v("#")]),t._v(" Common selectors")]),t._v(" "),s("p",[t._v("The CSS snippet below includes some common selectors for certain elements that you may use to craft your theme:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Button **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A default button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:disabled")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Checkbox **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Context Menu **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a context menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menu > [role="menuitem"] > a,\n.winui-menu > [role="menuitem"] > button,\n.winui-menu > [role="menuitem"] > label,\n.winui-menu > [role="menuitem"][aria-haspopup="true"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The various child elements of a menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Desktop **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the background */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="computer"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the computer icon */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Dropdown **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown:focus")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A focused dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Menu Bar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menubar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar > [role="menuitem"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A child element of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar [role="menuitem"][aria-disabled]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled child element */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Radio **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Slider **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-runnable-track")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider track */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-thumb")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider thumb */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Tabs **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tablist"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-tabs .winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu's button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tabpanel"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab panel */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Taskbar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#start-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The start button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items > .taskbar-item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The individual taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-tray")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar tray */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Text Box **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("textarea.winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A multi-line textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Window **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The main window container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".titlebar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's title bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="minimize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's minimize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="maximize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's maximize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="close"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's close control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's content area */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .statusbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's status bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"background-and-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#background-and-icons"}},[t._v("#")]),t._v(" Background and icons")]),t._v(" "),s("p",[t._v("To change the background and the various icons using Theme Studio, you must comply with the following rules:")]),t._v(" "),s("ul",[s("li",[t._v("Use "),s("code",[t._v("--bg")]),t._v(" and "),s("code",[t._v("--icon")]),t._v(" "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",target:"_blank",rel:"noopener noreferrer"}},[t._v("variables"),s("OutboundLink")],1),t._v(" for the background and icons respectively.")]),t._v(" "),s("li",[t._v("Append "),s("code",[t._v("!important")]),t._v(" after each rule for the change to take effect.")]),t._v(" "),s("li",[t._v("Target the corresponding "),s("a",{attrs:{href:"#program-ids"}},[t._v("program ID")]),t._v(" with "),s("code",[t._v('[data-icon=""]')]),t._v(" to change its icon.")])]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the desktop background to Windows XP Azul */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://i.redd.it/0ohv3srxzb631.jpg"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="themestudio"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the icon of Theme Studio */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://cdn-icons-png.flaticon.com/256/5447/5447297.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"program-ids"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#program-ids"}},[t._v("#")]),t._v(" Program IDs")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This list is incomplete and subject to change (more to be added) in the future updates.")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("computer")])]),t._v(" "),s("li",[s("code",[t._v("bin")])]),t._v(" "),s("li",[s("code",[t._v("about")])]),t._v(" "),s("li",[s("code",[t._v("calc")])]),t._v(" "),s("li",[s("code",[t._v("chrome")])]),t._v(" "),s("li",[s("code",[t._v("cmd")])]),t._v(" "),s("li",[s("code",[t._v("games")])]),t._v(" "),s("li",[s("code",[t._v("ie")])]),t._v(" "),s("li",[s("code",[t._v("notepad")])]),t._v(" "),s("li",[s("code",[t._v("snipping")])]),t._v(" "),s("li",[s("code",[t._v("paint")])]),t._v(" "),s("li",[s("code",[t._v("player")])]),t._v(" "),s("li",[s("code",[t._v("sticky")])]),t._v(" "),s("li",[s("code",[t._v("camera")])]),t._v(" "),s("li",[s("code",[t._v("recorder")])]),t._v(" "),s("li",[s("code",[t._v("wordpad")])]),t._v(" "),s("li",[s("code",[t._v("run")])]),t._v(" "),s("li",[s("code",[t._v("magnifier")])]),t._v(" "),s("li",[s("code",[t._v("themestudio")])]),t._v(" "),s("li",[s("code",[t._v("installer")])]),t._v(" "),s("li",[s("code",[t._v("bsod")])])])],1)}),[],!1,null,null,null);s.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/15.dadf64aa.js b/assets/js/15.2d4f2441.js similarity index 66% rename from assets/js/15.dadf64aa.js rename to assets/js/15.2d4f2441.js index 257616cc..d3a7377f 100644 --- a/assets/js/15.dadf64aa.js +++ b/assets/js/15.2d4f2441.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{320:function(t,n,r){"use strict";function s(t,n="-"){return t.split(n).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}function i(t){return t.charAt(0).toLowerCase()+t.slice(1)}r.d(n,"b",(function(){return s})),r.d(n,"a",(function(){return i}))},361:function(t,n,r){},464:function(t,n,r){"use strict";r(361)},517:function(t,n,r){"use strict";r.r(n);var s=r(320),i={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:s.b}},o=(r(464),r(16)),e=Object(o.a)(i,(function(){var t=this,n=t._self._c;return n("div",[t.showIcon?n("a-icon",{attrs:{icon:"mdi:tag-outline",width:"16"}}):t._e(),t._v(" "),n("ul",t._l(t._tags,(function(r){return n("li",{key:r},[n("router-link",{attrs:{to:`/blog/tag/${r}/`}},[t._v("\n "+t._s(t.pascalize(r))+"\n ")])],1)})),0)],1)}),[],!1,null,"13b53e33",null);n.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{319:function(t,n,r){"use strict";function s(t,n="-"){return t.split(n).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}function i(t){return t.charAt(0).toLowerCase()+t.slice(1)}r.d(n,"b",(function(){return s})),r.d(n,"a",(function(){return i}))},360:function(t,n,r){},463:function(t,n,r){"use strict";r(360)},516:function(t,n,r){"use strict";r.r(n);var s=r(319),i={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:s.b}},o=(r(463),r(16)),e=Object(o.a)(i,(function(){var t=this,n=t._self._c;return n("div",[t.showIcon?n("a-icon",{attrs:{icon:"mdi:tag-outline",width:"16"}}):t._e(),t._v(" "),n("ul",t._l(t._tags,(function(r){return n("li",{key:r},[n("router-link",{attrs:{to:`/blog/tag/${r}/`}},[t._v("\n "+t._s(t.pascalize(r))+"\n ")])],1)})),0)],1)}),[],!1,null,"13b53e33",null);n.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/16.2d56e5cc.js b/assets/js/16.7ba3320d.js similarity index 76% rename from assets/js/16.2d56e5cc.js rename to assets/js/16.7ba3320d.js index 6a6fae07..908d7d24 100644 --- a/assets/js/16.2d56e5cc.js +++ b/assets/js/16.7ba3320d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{320:function(t,e,n){"use strict";function a(t,e="-"){return t.split(e).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}function o(t){return t.charAt(0).toLowerCase()+t.slice(1)}n.d(e,"b",(function(){return a})),n.d(e,"a",(function(){return o}))},341:function(t,e,n){},396:function(t,e,n){"use strict";n(341)},490:function(t,e,n){"use strict";n.r(e);var a=n(318),o=n(320),r={components:{ParentLayout:a.default},computed:{tags(){return[{path:"/blog/",name:"All"},...this.$tag.list.map(t=>({path:t.path,name:Object(o.b)(t.name)}))]},blogs(){return(this.$currentTag?this.$currentTag.pages:this.$site.pages.filter(({path:t})=>/blog\/.+/.test(t)&&!/blog\/tag/.test(t))).sort((t,e)=>e.firstCreatedTimestamp-t.firstCreatedTimestamp)}}},s=(n(396),n(16)),u=Object(s.a)(r,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([{key:"page-top",fn:function(){return[e("div",{staticClass:"theme-default-content content__default"},[e("h1",[t._v("📝 Blog")]),t._v(" "),e("m-blog-tag-nav",{attrs:{tags:t.tags}}),t._v(" "),e("a-sponsor-ad",{attrs:{format:"banner"}}),t._v(" "),e("m-blog-links",{attrs:{blogs:t.blogs}}),t._v(" "),e("a-google-ad")],1)]},proxy:!0},{key:"page-bottom",fn:function(){return[e("m-footer")]},proxy:!0}])})}),[],!1,null,"56d60325",null);e.default=u.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{319:function(t,e,n){"use strict";function a(t,e="-"){return t.split(e).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}function o(t){return t.charAt(0).toLowerCase()+t.slice(1)}n.d(e,"b",(function(){return a})),n.d(e,"a",(function(){return o}))},340:function(t,e,n){},395:function(t,e,n){"use strict";n(340)},489:function(t,e,n){"use strict";n.r(e);var a=n(317),o=n(319),r={components:{ParentLayout:a.default},computed:{tags(){return[{path:"/blog/",name:"All"},...this.$tag.list.map(t=>({path:t.path,name:Object(o.b)(t.name)}))]},blogs(){return(this.$currentTag?this.$currentTag.pages:this.$site.pages.filter(({path:t})=>/blog\/.+/.test(t)&&!/blog\/tag/.test(t))).sort((t,e)=>e.firstCreatedTimestamp-t.firstCreatedTimestamp)}}},s=(n(395),n(16)),u=Object(s.a)(r,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([{key:"page-top",fn:function(){return[e("div",{staticClass:"theme-default-content content__default"},[e("h1",[t._v("📝 Blog")]),t._v(" "),e("m-blog-tag-nav",{attrs:{tags:t.tags}}),t._v(" "),e("a-sponsor-ad",{attrs:{format:"banner"}}),t._v(" "),e("m-blog-links",{attrs:{blogs:t.blogs}}),t._v(" "),e("a-google-ad")],1)]},proxy:!0},{key:"page-bottom",fn:function(){return[e("m-footer")]},proxy:!0}])})}),[],!1,null,"56d60325",null);e.default=u.exports}}]); \ No newline at end of file diff --git a/assets/js/17.b75a05b9.js b/assets/js/17.a9f08352.js similarity index 57% rename from assets/js/17.b75a05b9.js rename to assets/js/17.a9f08352.js index 8032cec0..01c1f88e 100644 --- a/assets/js/17.b75a05b9.js +++ b/assets/js/17.a9f08352.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[17,47],{315:function(n,t,o){},317:function(n,t,o){"use strict";o(315)},319:function(n,t,o){"use strict";o.r(t);var e={components:{ParentLayout:o(318).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(o(317),o(16)),l=Object(s.a)(e,(function(){var n=this,t=n._self._c;return t("parent-layout",{scopedSlots:n._u([n.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[t("a-sponsor-ad")]},proxy:!0},n.noComments?null:{key:"page-bottom",fn:function(){return[t("div",{staticClass:"ad-wrapper"},[t("a-google-ad")],1),n._v(" "),t("m-comments")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);t.default=l.exports},494:function(n,t,o){"use strict";o.r(t);var e={components:{Visnalize:o(319).default}},s=o(16),l=Object(s.a)(e,(function(){return(0,this._self._c)("visnalize",{attrs:{noSideAds:""}})}),[],!1,null,null,null);t.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[17,47],{314:function(n,t,o){},316:function(n,t,o){"use strict";o(314)},318:function(n,t,o){"use strict";o.r(t);var e={components:{ParentLayout:o(317).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(o(316),o(16)),l=Object(s.a)(e,(function(){var n=this,t=n._self._c;return t("parent-layout",{scopedSlots:n._u([n.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[t("a-sponsor-ad")]},proxy:!0},n.noComments?null:{key:"page-bottom",fn:function(){return[t("div",{staticClass:"ad-wrapper"},[t("a-google-ad")],1),n._v(" "),t("m-comments")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);t.default=l.exports},493:function(n,t,o){"use strict";o.r(t);var e={components:{Visnalize:o(318).default}},s=o(16),l=Object(s.a)(e,(function(){return(0,this._self._c)("visnalize",{attrs:{noSideAds:""}})}),[],!1,null,null,null);t.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/18.2bb66aec.js b/assets/js/18.cf0ea5b4.js similarity index 57% rename from assets/js/18.2bb66aec.js rename to assets/js/18.cf0ea5b4.js index ed23108a..df3db18a 100644 --- a/assets/js/18.2bb66aec.js +++ b/assets/js/18.cf0ea5b4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18,47],{315:function(n,t,o){},317:function(n,t,o){"use strict";o(315)},319:function(n,t,o){"use strict";o.r(t);var e={components:{ParentLayout:o(318).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(o(317),o(16)),l=Object(s.a)(e,(function(){var n=this,t=n._self._c;return t("parent-layout",{scopedSlots:n._u([n.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[t("a-sponsor-ad")]},proxy:!0},n.noComments?null:{key:"page-bottom",fn:function(){return[t("div",{staticClass:"ad-wrapper"},[t("a-google-ad")],1),n._v(" "),t("m-comments")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);t.default=l.exports},495:function(n,t,o){"use strict";o.r(t);var e={components:{Visnalize:o(319).default}},s=o(16),l=Object(s.a)(e,(function(){return(0,this._self._c)("visnalize",{attrs:{noComments:""}})}),[],!1,null,null,null);t.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[18,47],{314:function(n,t,o){},316:function(n,t,o){"use strict";o(314)},318:function(n,t,o){"use strict";o.r(t);var e={components:{ParentLayout:o(317).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(o(316),o(16)),l=Object(s.a)(e,(function(){var n=this,t=n._self._c;return t("parent-layout",{scopedSlots:n._u([n.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[t("a-sponsor-ad")]},proxy:!0},n.noComments?null:{key:"page-bottom",fn:function(){return[t("div",{staticClass:"ad-wrapper"},[t("a-google-ad")],1),n._v(" "),t("m-comments")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);t.default=l.exports},494:function(n,t,o){"use strict";o.r(t);var e={components:{Visnalize:o(318).default}},s=o(16),l=Object(s.a)(e,(function(){return(0,this._self._c)("visnalize",{attrs:{noComments:""}})}),[],!1,null,null,null);t.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/19.2727b078.js b/assets/js/19.ded391f8.js similarity index 95% rename from assets/js/19.2727b078.js rename to assets/js/19.ded391f8.js index 345dfd4c..644a5ba4 100644 --- a/assets/js/19.2727b078.js +++ b/assets/js/19.ded391f8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{415:function(e,t,a){e.exports=a.p+"assets/img/visnalize-com-growth.67fc9dc7.jpg"},416:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-growth.6ba88ded.jpg"},417:function(e,t,a){e.exports=a.p+"assets/img/brick-1100-growth.cd8f231c.jpg"},541:function(e,t,a){"use strict";a.r(t);var r=a(16),i=Object(r.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"visnalize-year-in-review-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize-year-in-review-2023"}},[e._v("#")]),e._v(" Visnalize year in review - 2023")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Streetwindy via "),t("a",{attrs:{href:"https://unsplash.com/photos/fireworks-display-over-city-buildings-during-night-time-rYIrNpFFilI",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v('Last year, I initiated a habit of writing a "year in review" post for '),t("RouterLink",{attrs:{to:"/blog/win7-simu-year-in-review-2022.html"}},[e._v("Win7 Simu")]),e._v(". It was a great way to reflect on the year and see what I have accomplished. I decided to do it again this year, however, this time I will write about Visnalize as a whole, since we now have more than one product, it will probably be more interesting to have a look at a bigger picture.")],1),e._v(" "),t("p",[e._v("Let's not waste any more time and get right into it.")]),e._v(" "),t("h2",{attrs:{id:"the-amazing-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[e._v("#")]),e._v(" The amazing numbers")]),e._v(" "),t("h3",{attrs:{id:"visnalize-com"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize-com"}},[e._v("#")]),e._v(" Visnalize(.com)")]),e._v(" "),t("p",[t("img",{attrs:{src:a(415),alt:"Visnalize.com's growth"}})]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("6")]),e._v(" new blog posts published")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("800")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("1700")]),e._v(" daily page views")]),e._v(" "),t("li",[e._v("A total of "),t("strong",[e._v("$950")]),e._v(" in revenue (all from AdSense)")])]),e._v(" "),t("h3",{attrs:{id:"win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu"}},[e._v("#")]),e._v(" "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")])],1),e._v(" "),t("p",[t("img",{attrs:{src:a(416),alt:"Win7 Simu's growth"}})]),e._v(" "),t("p",[t("strong",[e._v("Android only")])]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("10.8M")]),e._v(" users downloaded the app from "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[e._v("Google Play"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("strong",[e._v("670K")]),e._v(" active devices that still have the app installed")]),e._v(" "),t("li",[t("strong",[e._v("42.4K")]),e._v(" users gave an average rating of "),t("strong",[e._v("4.18/5")])]),e._v(" "),t("li",[t("strong",[e._v("20K")]),e._v(" users left a review")])]),e._v(" "),t("p",[t("strong",[e._v("Both versions")])]),e._v(" "),t("ul",[t("li",[e._v("An average of "),t("strong",[e._v("50K")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("A user spent an average of "),t("strong",[e._v("14 mins")]),e._v(" with the app")]),e._v(" "),t("li",[t("strong",[e._v("2.3M")]),e._v(" accounts created in the app")]),e._v(" "),t("li",[t("strong",[e._v("18")]),e._v(" version updates were released")]),e._v(" "),t("li",[t("strong",[e._v("$9.8K")]),e._v(" gross revenue from ads")]),e._v(" "),t("li",[t("strong",[e._v("$3.1K")]),e._v(" gross revenue from in-app purchases")]),e._v(" "),t("li",[t("strong",[e._v("$303")]),e._v(" gross revenue from partnerships")])]),e._v(" "),t("h3",{attrs:{id:"brick-1100-beta"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#brick-1100-beta"}},[e._v("#")]),e._v(" "),t("RouterLink",{attrs:{to:"/brick1100/about.html"}},[e._v("Brick 1100")]),e._v(" (Beta)")],1),e._v(" "),t("p",[t("img",{attrs:{src:a(417),alt:"Brick 1100's growth"}})]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("9.2K")]),e._v(" users downloaded the app from "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.brick1100",target:"_blank",rel:"noopener noreferrer"}},[e._v("Google Play"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("strong",[e._v("1.8K")]),e._v(" active devices that still have the app installed")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("200")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("A user spent an average of "),t("strong",[e._v("7 mins")]),e._v(" with the app")]),e._v(" "),t("li",[t("strong",[e._v("300")]),e._v(" accounts created in the app")]),e._v(" "),t("li",[t("strong",[e._v("8")]),e._v(" version updates were released")]),e._v(" "),t("li",[t("strong",[e._v("$22")]),e._v(" gross revenue from ads")])]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"other-accomplishments"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#other-accomplishments"}},[e._v("#")]),e._v(" Other accomplishments")]),e._v(" "),t("h3",{attrs:{id:"a-new-collaborator-for-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-new-collaborator-for-win7-simu"}},[e._v("#")]),e._v(" A new collaborator for Win7 Simu")]),e._v(" "),t("p",[e._v("Since November of this year, you must have noticed Win7 Simu has been receiving several major UI enhancements and new themes. This is all thanks to "),t("a",{attrs:{href:"https://github.com/hohaicongthuan",target:"_blank",rel:"noopener noreferrer"}},[e._v("Thuan"),t("OutboundLink")],1),e._v(", a new collaborator that I had the pleasure to welcome and onboard to the Win7 Simu project. Thuan is a computer enthusiast, freelance developer and has a special interest in game development. Although he has little experience with the tech stack behind Win7 Simu, he has been able to quickly pick up the pace and contribute to the project without much guidance required. I am more than happy to have him onboard and look forward to continuing our collaboration in the future.")]),e._v(" "),t("h3",{attrs:{id:"new-feedback-channels-for-brick-1100"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-feedback-channels-for-brick-1100"}},[e._v("#")]),e._v(" New feedback channels for Brick 1100")]),e._v(" "),t("p",[e._v("With the new beta release of Brick 1100, I have set up a new "),t("a",{attrs:{href:"https://discord.gg/6AQDnZa4Xm",target:"_blank",rel:"noopener noreferrer"}},[e._v("Discord server"),t("OutboundLink")],1),e._v(" for the community to hang out, discuss all things Brick 1100-related, and provide feedback to make Brick 1100 a better app. Additionally, there is also this "),t("a",{attrs:{href:"/brick1100/feedback"}},[e._v("feedback forum")]),e._v(" for those who don't want to use or are not familiar with Discord can provide feedback and suggestions, easily and anonymously without much hassle.")]),e._v(" "),t("h3",{attrs:{id:"a-new-chapter-in-life"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-new-chapter-in-life"}},[e._v("#")]),e._v(" A new chapter in life")]),e._v(" "),t("p",[e._v("I don't share my personal identity online much, but this is a big one so I make it an exception. In the early of 2023, I got married to my beautiful wife and later in the year, we welcomed our first child into the world, a healthy and handsome baby boy. It was a life-changing experience and a feeling that I can't describe in words. I am thankful to life for everything that I was given.")]),e._v(" "),t("h2",{attrs:{id:"looking-out-to-2024"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2024"}},[e._v("#")]),e._v(" Looking out to 2024")]),e._v(" "),t("p",[e._v("The coming year will be different in many ways, there will be new challenges, busy schedules, trying to balance out the time for family and work, and everything in between. I am unsure how much time I will be able to dedicate to Visnalize, bringing out more cool features and updates for Win7 Simu and launching the first production release of Brick 1100, but I will try my best to keep the projects going and make them better.")]),e._v(" "),t("p",[e._v("As always, I thank you for all your love and support so far, and I hope you will continue your support for me in the future. Happy new year and see you in 2024! 🎉")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{414:function(e,t,a){e.exports=a.p+"assets/img/visnalize-com-growth.67fc9dc7.jpg"},415:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-growth.6ba88ded.jpg"},416:function(e,t,a){e.exports=a.p+"assets/img/brick-1100-growth.cd8f231c.jpg"},541:function(e,t,a){"use strict";a.r(t);var r=a(16),i=Object(r.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"visnalize-year-in-review-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize-year-in-review-2023"}},[e._v("#")]),e._v(" Visnalize year in review - 2023")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Streetwindy via "),t("a",{attrs:{href:"https://unsplash.com/photos/fireworks-display-over-city-buildings-during-night-time-rYIrNpFFilI",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v('Last year, I initiated a habit of writing a "year in review" post for '),t("RouterLink",{attrs:{to:"/blog/win7-simu-year-in-review-2022.html"}},[e._v("Win7 Simu")]),e._v(". It was a great way to reflect on the year and see what I have accomplished. I decided to do it again this year, however, this time I will write about Visnalize as a whole, since we now have more than one product, it will probably be more interesting to have a look at a bigger picture.")],1),e._v(" "),t("p",[e._v("Let's not waste any more time and get right into it.")]),e._v(" "),t("h2",{attrs:{id:"the-amazing-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[e._v("#")]),e._v(" The amazing numbers")]),e._v(" "),t("h3",{attrs:{id:"visnalize-com"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize-com"}},[e._v("#")]),e._v(" Visnalize(.com)")]),e._v(" "),t("p",[t("img",{attrs:{src:a(414),alt:"Visnalize.com's growth"}})]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("6")]),e._v(" new blog posts published")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("800")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("1700")]),e._v(" daily page views")]),e._v(" "),t("li",[e._v("A total of "),t("strong",[e._v("$950")]),e._v(" in revenue (all from AdSense)")])]),e._v(" "),t("h3",{attrs:{id:"win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu"}},[e._v("#")]),e._v(" "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")])],1),e._v(" "),t("p",[t("img",{attrs:{src:a(415),alt:"Win7 Simu's growth"}})]),e._v(" "),t("p",[t("strong",[e._v("Android only")])]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("10.8M")]),e._v(" users downloaded the app from "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[e._v("Google Play"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("strong",[e._v("670K")]),e._v(" active devices that still have the app installed")]),e._v(" "),t("li",[t("strong",[e._v("42.4K")]),e._v(" users gave an average rating of "),t("strong",[e._v("4.18/5")])]),e._v(" "),t("li",[t("strong",[e._v("20K")]),e._v(" users left a review")])]),e._v(" "),t("p",[t("strong",[e._v("Both versions")])]),e._v(" "),t("ul",[t("li",[e._v("An average of "),t("strong",[e._v("50K")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("A user spent an average of "),t("strong",[e._v("14 mins")]),e._v(" with the app")]),e._v(" "),t("li",[t("strong",[e._v("2.3M")]),e._v(" accounts created in the app")]),e._v(" "),t("li",[t("strong",[e._v("18")]),e._v(" version updates were released")]),e._v(" "),t("li",[t("strong",[e._v("$9.8K")]),e._v(" gross revenue from ads")]),e._v(" "),t("li",[t("strong",[e._v("$3.1K")]),e._v(" gross revenue from in-app purchases")]),e._v(" "),t("li",[t("strong",[e._v("$303")]),e._v(" gross revenue from partnerships")])]),e._v(" "),t("h3",{attrs:{id:"brick-1100-beta"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#brick-1100-beta"}},[e._v("#")]),e._v(" "),t("RouterLink",{attrs:{to:"/brick1100/about.html"}},[e._v("Brick 1100")]),e._v(" (Beta)")],1),e._v(" "),t("p",[t("img",{attrs:{src:a(416),alt:"Brick 1100's growth"}})]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("9.2K")]),e._v(" users downloaded the app from "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.brick1100",target:"_blank",rel:"noopener noreferrer"}},[e._v("Google Play"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("strong",[e._v("1.8K")]),e._v(" active devices that still have the app installed")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("200")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("A user spent an average of "),t("strong",[e._v("7 mins")]),e._v(" with the app")]),e._v(" "),t("li",[t("strong",[e._v("300")]),e._v(" accounts created in the app")]),e._v(" "),t("li",[t("strong",[e._v("8")]),e._v(" version updates were released")]),e._v(" "),t("li",[t("strong",[e._v("$22")]),e._v(" gross revenue from ads")])]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"other-accomplishments"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#other-accomplishments"}},[e._v("#")]),e._v(" Other accomplishments")]),e._v(" "),t("h3",{attrs:{id:"a-new-collaborator-for-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-new-collaborator-for-win7-simu"}},[e._v("#")]),e._v(" A new collaborator for Win7 Simu")]),e._v(" "),t("p",[e._v("Since November of this year, you must have noticed Win7 Simu has been receiving several major UI enhancements and new themes. This is all thanks to "),t("a",{attrs:{href:"https://github.com/hohaicongthuan",target:"_blank",rel:"noopener noreferrer"}},[e._v("Thuan"),t("OutboundLink")],1),e._v(", a new collaborator that I had the pleasure to welcome and onboard to the Win7 Simu project. Thuan is a computer enthusiast, freelance developer and has a special interest in game development. Although he has little experience with the tech stack behind Win7 Simu, he has been able to quickly pick up the pace and contribute to the project without much guidance required. I am more than happy to have him onboard and look forward to continuing our collaboration in the future.")]),e._v(" "),t("h3",{attrs:{id:"new-feedback-channels-for-brick-1100"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-feedback-channels-for-brick-1100"}},[e._v("#")]),e._v(" New feedback channels for Brick 1100")]),e._v(" "),t("p",[e._v("With the new beta release of Brick 1100, I have set up a new "),t("a",{attrs:{href:"https://discord.gg/6AQDnZa4Xm",target:"_blank",rel:"noopener noreferrer"}},[e._v("Discord server"),t("OutboundLink")],1),e._v(" for the community to hang out, discuss all things Brick 1100-related, and provide feedback to make Brick 1100 a better app. Additionally, there is also this "),t("a",{attrs:{href:"/brick1100/feedback"}},[e._v("feedback forum")]),e._v(" for those who don't want to use or are not familiar with Discord can provide feedback and suggestions, easily and anonymously without much hassle.")]),e._v(" "),t("h3",{attrs:{id:"a-new-chapter-in-life"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-new-chapter-in-life"}},[e._v("#")]),e._v(" A new chapter in life")]),e._v(" "),t("p",[e._v("I don't share my personal identity online much, but this is a big one so I make it an exception. In the early of 2023, I got married to my beautiful wife and later in the year, we welcomed our first child into the world, a healthy and handsome baby boy. It was a life-changing experience and a feeling that I can't describe in words. I am thankful to life for everything that I was given.")]),e._v(" "),t("h2",{attrs:{id:"looking-out-to-2024"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2024"}},[e._v("#")]),e._v(" Looking out to 2024")]),e._v(" "),t("p",[e._v("The coming year will be different in many ways, there will be new challenges, busy schedules, trying to balance out the time for family and work, and everything in between. I am unsure how much time I will be able to dedicate to Visnalize, bringing out more cool features and updates for Win7 Simu and launching the first production release of Brick 1100, but I will try my best to keep the projects going and make them better.")]),e._v(" "),t("p",[e._v("As always, I thank you for all your love and support so far, and I hope you will continue your support for me in the future. Happy new year and see you in 2024! 🎉")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/20.23edec81.js b/assets/js/20.349d8fb7.js similarity index 89% rename from assets/js/20.23edec81.js rename to assets/js/20.349d8fb7.js index 7b8d1831..dcc4712f 100644 --- a/assets/js/20.23edec81.js +++ b/assets/js/20.349d8fb7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{424:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},425:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},426:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},548:function(t,e,r){"use strict";r.r(e);var a=r(16),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"win7-simu-year-in-review-2022"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-year-in-review-2022"}},[t._v("#")]),t._v(" Win7 Simu year in review - 2022")]),t._v(" "),e("m-blog-meta"),t._v(" "),e("p",[e("img",{attrs:{src:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),t._v(" "),e("p",[e("em",[t._v("Cover image by Tron Le via "),e("a",{attrs:{href:"https://unsplash.com/photos/sjlU-PBXFHg",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unsplash"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Another year passed by, how was it for you? Hope you had a wonderful year. For Win7 Simu, 2022 was amazing. For a hobby project that was started out just "),e("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[t._v("for fun and learning")]),t._v(", it definitely has been growing surprisingly thanks to "),e("s",[t._v("my effort")]),t._v(" the love and support from you all. So in this post, let us have a look back at some amazing numbers that Win7 Simu achieved in 2022.")],1),t._v(" "),e("h2",{attrs:{id:"the-amazing-numbers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[t._v("#")]),t._v(" The amazing numbers")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("4.3M")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Google Play"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("30K")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://appgallery.huawei.com/app/C106588347",target:"_blank",rel:"noopener noreferrer"}},[t._v("Huawei AppGallery"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("29K")]),t._v(" users gave an average rating of "),e("strong",[t._v("4.1/5")])]),t._v(" "),e("li",[e("strong",[t._v("15K")]),t._v(" users left a review")]),t._v(" "),e("li",[e("strong",[t._v("500K")]),t._v(" accounts created in the app")]),t._v(" "),e("li",[e("strong",[t._v("13")]),t._v(" version updates were released")]),t._v(" "),e("li",[e("strong",[t._v("50")]),t._v(" contributors helped out with the translations on "),e("a",{attrs:{href:"https://crowdin.com/project/win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Crowdin"),e("OutboundLink")],1)])]),t._v(" "),e("h2",{attrs:{id:"other-interesting-statistics"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#other-interesting-statistics"}},[t._v("#")]),t._v(" Other interesting statistics")]),t._v(" "),e("h3",{attrs:{id:"countries-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#countries-overview"}},[t._v("#")]),t._v(" Countries overview")]),t._v(" "),e("p",[e("img",{attrs:{src:r(424),alt:"top countries"}})]),t._v(" "),e("h3",{attrs:{id:"devices-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#devices-overview"}},[t._v("#")]),t._v(" Devices overview")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Operating systems")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("Device categories")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("img",{attrs:{src:r(425),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(426),alt:"device categories"}})])])])]),t._v(" "),e("h2",{attrs:{id:"looking-out-to-2023"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2023"}},[t._v("#")]),t._v(" Looking out to 2023")]),t._v(" "),e("p",[t._v("I hope Win7 Simu has been doing a good job in contributing to a wonderful year for you. Please keep supporting it and continue to look forward to more updates rolling out, with more stunning features and stability. Wishing all the best to you and your family. Happy New year! 🎉")]),t._v(" "),e("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{421:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},422:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},423:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},546:function(t,e,r){"use strict";r.r(e);var a=r(16),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"win7-simu-year-in-review-2022"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-year-in-review-2022"}},[t._v("#")]),t._v(" Win7 Simu year in review - 2022")]),t._v(" "),e("m-blog-meta"),t._v(" "),e("p",[e("img",{attrs:{src:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),t._v(" "),e("p",[e("em",[t._v("Cover image by Tron Le via "),e("a",{attrs:{href:"https://unsplash.com/photos/sjlU-PBXFHg",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unsplash"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Another year passed by, how was it for you? Hope you had a wonderful year. For Win7 Simu, 2022 was amazing. For a hobby project that was started out just "),e("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[t._v("for fun and learning")]),t._v(", it definitely has been growing surprisingly thanks to "),e("s",[t._v("my effort")]),t._v(" the love and support from you all. So in this post, let us have a look back at some amazing numbers that Win7 Simu achieved in 2022.")],1),t._v(" "),e("h2",{attrs:{id:"the-amazing-numbers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[t._v("#")]),t._v(" The amazing numbers")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("4.3M")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Google Play"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("30K")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://appgallery.huawei.com/app/C106588347",target:"_blank",rel:"noopener noreferrer"}},[t._v("Huawei AppGallery"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("29K")]),t._v(" users gave an average rating of "),e("strong",[t._v("4.1/5")])]),t._v(" "),e("li",[e("strong",[t._v("15K")]),t._v(" users left a review")]),t._v(" "),e("li",[e("strong",[t._v("500K")]),t._v(" accounts created in the app")]),t._v(" "),e("li",[e("strong",[t._v("13")]),t._v(" version updates were released")]),t._v(" "),e("li",[e("strong",[t._v("50")]),t._v(" contributors helped out with the translations on "),e("a",{attrs:{href:"https://crowdin.com/project/win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Crowdin"),e("OutboundLink")],1)])]),t._v(" "),e("h2",{attrs:{id:"other-interesting-statistics"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#other-interesting-statistics"}},[t._v("#")]),t._v(" Other interesting statistics")]),t._v(" "),e("h3",{attrs:{id:"countries-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#countries-overview"}},[t._v("#")]),t._v(" Countries overview")]),t._v(" "),e("p",[e("img",{attrs:{src:r(421),alt:"top countries"}})]),t._v(" "),e("h3",{attrs:{id:"devices-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#devices-overview"}},[t._v("#")]),t._v(" Devices overview")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Operating systems")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("Device categories")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("img",{attrs:{src:r(422),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(423),alt:"device categories"}})])])])]),t._v(" "),e("h2",{attrs:{id:"looking-out-to-2023"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2023"}},[t._v("#")]),t._v(" Looking out to 2023")]),t._v(" "),e("p",[t._v("I hope Win7 Simu has been doing a good job in contributing to a wonderful year for you. Please keep supporting it and continue to look forward to more updates rolling out, with more stunning features and stability. Wishing all the best to you and your family. Happy New year! 🎉")]),t._v(" "),e("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/21.ede87204.js b/assets/js/21.91fb08b0.js similarity index 60% rename from assets/js/21.ede87204.js rename to assets/js/21.91fb08b0.js index 891f076e..0e2a920a 100644 --- a/assets/js/21.ede87204.js +++ b/assets/js/21.91fb08b0.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{374:function(t,e,n){},478:function(t,e,n){"use strict";n(374)},593:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(478),n(16)),l=Object(p.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{373:function(t,e,n){},477:function(t,e,n){"use strict";n(373)},592:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(477),n(16)),l=Object(p.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/22.b024a266.js b/assets/js/22.5dc075a2.js similarity index 65% rename from assets/js/22.b024a266.js rename to assets/js/22.5dc075a2.js index 1d199bd2..f7df9a84 100644 --- a/assets/js/22.b024a266.js +++ b/assets/js/22.5dc075a2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{375:function(t,e,a){},479:function(t,e,a){"use strict";a(375)},528:function(t,e,a){"use strict";a.r(e);var s={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(a(479),a(16)),n=Object(i.a)(s,(function(){return(0,this._self._c)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"759a7d02",null);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{374:function(t,e,a){},478:function(t,e,a){"use strict";a(374)},527:function(t,e,a){"use strict";a.r(e);var s={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(a(478),a(16)),n=Object(i.a)(s,(function(){return(0,this._self._c)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"759a7d02",null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/23.a0b15613.js b/assets/js/23.9cc9a595.js similarity index 88% rename from assets/js/23.a0b15613.js rename to assets/js/23.9cc9a595.js index fa503e97..fa3b5530 100644 --- a/assets/js/23.a0b15613.js +++ b/assets/js/23.9cc9a595.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{376:function(e,t,a){},480:function(e,t,a){"use strict";a(376)},529:function(e,t,a){"use strict";a.r(t);var o={name:"CodeGroup",data:()=>({codeTabs:[],activeCodeTabIndex:-1}),watch:{activeCodeTabIndex(e){this.activateCodeTab(e)}},mounted(){this.loadTabs()},methods:{changeCodeTab(e){this.activeCodeTabIndex=e},loadTabs(){this.codeTabs=(this.$slots.default||[]).filter(e=>Boolean(e.componentOptions)).map((e,t)=>(""===e.componentOptions.propsData.active&&(this.activeCodeTabIndex=t),{title:e.componentOptions.propsData.title,elm:e.elm})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab(e){this.codeTabs.forEach(e=>{e.elm&&e.elm.classList.remove("theme-code-block__active")}),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},s=(a(480),a(16)),c=Object(s.a)(o,(function(){var e=this,t=e._self._c;return t("ClientOnly",[t("div",{staticClass:"theme-code-group"},[t("div",{staticClass:"theme-code-group__nav"},[t("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(a,o){return t("li",{key:a.title,staticClass:"theme-code-group__li"},[t("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n "+e._s(a.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?t("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{375:function(e,t,a){},479:function(e,t,a){"use strict";a(375)},528:function(e,t,a){"use strict";a.r(t);var o={name:"CodeGroup",data:()=>({codeTabs:[],activeCodeTabIndex:-1}),watch:{activeCodeTabIndex(e){this.activateCodeTab(e)}},mounted(){this.loadTabs()},methods:{changeCodeTab(e){this.activeCodeTabIndex=e},loadTabs(){this.codeTabs=(this.$slots.default||[]).filter(e=>Boolean(e.componentOptions)).map((e,t)=>(""===e.componentOptions.propsData.active&&(this.activeCodeTabIndex=t),{title:e.componentOptions.propsData.title,elm:e.elm})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab(e){this.codeTabs.forEach(e=>{e.elm&&e.elm.classList.remove("theme-code-block__active")}),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},s=(a(479),a(16)),c=Object(s.a)(o,(function(){var e=this,t=e._self._c;return t("ClientOnly",[t("div",{staticClass:"theme-code-group"},[t("div",{staticClass:"theme-code-group__nav"},[t("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(a,o){return t("li",{key:a.title,staticClass:"theme-code-group__li"},[t("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n "+e._s(a.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?t("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]); \ No newline at end of file diff --git a/assets/js/24.02ddfcc1.js b/assets/js/24.9e2092be.js similarity index 72% rename from assets/js/24.02ddfcc1.js rename to assets/js/24.9e2092be.js index be695f34..071bec76 100644 --- a/assets/js/24.02ddfcc1.js +++ b/assets/js/24.9e2092be.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{345:function(t,n,r){},446:function(t,n,r){"use strict";r(345)},497:function(t,n,r){"use strict";r.r(n);var e={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(446),r(16)),a=Object(s.a)(e,(function(){var t=this,n=t._self._c;return t.href&&!t.isExternal?n("router-link",{staticClass:"a-button",attrs:{to:t.href}},[t._t("default")],2):t.href&&t.isExternal?n("a",{staticClass:"a-button",attrs:{href:t.href,target:"_blank"}},[t._t("default")],2):n("button",{staticClass:"a-button",on:{click:function(n){return t.$emit("click")}}},[t._t("default")],2)}),[],!1,null,"4ef368cc",null);n.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{344:function(t,n,r){},445:function(t,n,r){"use strict";r(344)},496:function(t,n,r){"use strict";r.r(n);var e={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(445),r(16)),a=Object(s.a)(e,(function(){var t=this,n=t._self._c;return t.href&&!t.isExternal?n("router-link",{staticClass:"a-button",attrs:{to:t.href}},[t._t("default")],2):t.href&&t.isExternal?n("a",{staticClass:"a-button",attrs:{href:t.href,target:"_blank"}},[t._t("default")],2):n("button",{staticClass:"a-button",on:{click:function(n){return t.$emit("click")}}},[t._t("default")],2)}),[],!1,null,"4ef368cc",null);n.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/25.a6b4cc63.js b/assets/js/25.1515336d.js similarity index 75% rename from assets/js/25.a6b4cc63.js rename to assets/js/25.1515336d.js index e5e49410..fd777ddf 100644 --- a/assets/js/25.a6b4cc63.js +++ b/assets/js/25.1515336d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{346:function(s,t,n){},447:function(s,t,n){"use strict";n(346)},499:function(s,t,n){"use strict";n.r(t);var i={data(){return{id:this.$route.path}},mounted(){const s=document.createElement("script");s.id="dsq-count-scr",s.src="//visnalize.disqus.com/count.js",s.async=!0,document.body.appendChild(s)}},c=(n(447),n(16)),a=Object(c.a)(i,(function(){var s=this._self._c;return s("a",{staticClass:"social-comment",attrs:{href:"#comments"}},[s("img",{attrs:{src:"https://c.disquscdn.com/next/ef5ca81/marketing/assets/img/brand/disqus-social-icon-dark.svg",alt:"disqus"}}),this._v(" "),s("span",{staticClass:"disqus-comment-count",attrs:{"data-disqus-identifier":this.id}})])}),[],!1,null,"7233fed5",null);t.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{345:function(s,t,n){},446:function(s,t,n){"use strict";n(345)},498:function(s,t,n){"use strict";n.r(t);var i={data(){return{id:this.$route.path}},mounted(){const s=document.createElement("script");s.id="dsq-count-scr",s.src="//visnalize.disqus.com/count.js",s.async=!0,document.body.appendChild(s)}},c=(n(446),n(16)),a=Object(c.a)(i,(function(){var s=this._self._c;return s("a",{staticClass:"social-comment",attrs:{href:"#comments"}},[s("img",{attrs:{src:"https://c.disquscdn.com/next/ef5ca81/marketing/assets/img/brand/disqus-social-icon-dark.svg",alt:"disqus"}}),this._v(" "),s("span",{staticClass:"disqus-comment-count",attrs:{"data-disqus-identifier":this.id}})])}),[],!1,null,"7233fed5",null);t.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/26.7b1d1f92.js b/assets/js/26.53873235.js similarity index 71% rename from assets/js/26.7b1d1f92.js rename to assets/js/26.53873235.js index 25ade00a..cdeb385b 100644 --- a/assets/js/26.7b1d1f92.js +++ b/assets/js/26.53873235.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{347:function(t,e,i){},448:function(t,e,i){"use strict";i(347)},500:function(t,e,i){"use strict";i.r(e);var n={props:{label:String,icon:String,iconSize:String},computed:{size(){return this.iconSize||"24"}}},o=(i(448),i(16)),c=Object(o.a)(n,(function(){var t=this,e=t._self._c;return e("button",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:t.label,offset:8},expression:"{ content: label, offset: 8 }"}],attrs:{title:t.label},on:{click:function(e){return t.$emit("click")}}},[e("a-icon",{attrs:{icon:t.icon,width:t.size,height:t.size}})],1)}),[],!1,null,"00e9533b",null);e.default=c.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{346:function(t,e,i){},447:function(t,e,i){"use strict";i(346)},499:function(t,e,i){"use strict";i.r(e);var n={props:{label:String,icon:String,iconSize:String},computed:{size(){return this.iconSize||"24"}}},o=(i(447),i(16)),c=Object(o.a)(n,(function(){var t=this,e=t._self._c;return e("button",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:t.label,offset:8},expression:"{ content: label, offset: 8 }"}],attrs:{title:t.label},on:{click:function(e){return t.$emit("click")}}},[e("a-icon",{attrs:{icon:t.icon,width:t.size,height:t.size}})],1)}),[],!1,null,"00e9533b",null);e.default=c.exports}}]); \ No newline at end of file diff --git a/assets/js/27.b75a2144.js b/assets/js/27.727ad85a.js similarity index 68% rename from assets/js/27.b75a2144.js rename to assets/js/27.727ad85a.js index 356d901c..59fc6d77 100644 --- a/assets/js/27.b75a2144.js +++ b/assets/js/27.727ad85a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{348:function(t,e,i){},449:function(t,e,i){"use strict";i(348)},501:function(t,e,i){"use strict";i.r(e);var s={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},a=(i(449),i(16)),r=Object(a.a)(s,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("a-icon",{attrs:{icon:"mdi:clock-outline",width:"16",height:"16"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"08d268a8",null);e.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{347:function(t,e,i){},448:function(t,e,i){"use strict";i(347)},500:function(t,e,i){"use strict";i.r(e);var s={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},a=(i(448),i(16)),r=Object(a.a)(s,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("a-icon",{attrs:{icon:"mdi:clock-outline",width:"16",height:"16"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"08d268a8",null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/28.86222a3a.js b/assets/js/28.ed377c96.js similarity index 68% rename from assets/js/28.86222a3a.js rename to assets/js/28.ed377c96.js index 708a633a..dbccf91e 100644 --- a/assets/js/28.86222a3a.js +++ b/assets/js/28.ed377c96.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{349:function(t,a,o){},450:function(t,a,o){"use strict";o(349)},503:function(t,a,o){"use strict";o.r(a);o(61);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},n=(o(450),o(16)),e=Object(n.a)(s,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"653796b7",null);a.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{348:function(t,a,o){},449:function(t,a,o){"use strict";o(348)},502:function(t,a,o){"use strict";o.r(a);o(61);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},n=(o(449),o(16)),e=Object(n.a)(s,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"653796b7",null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/29.808ab29f.js b/assets/js/29.808ab29f.js deleted file mode 100644 index 7df0a78e..00000000 --- a/assets/js/29.808ab29f.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{350:function(i,n,t){},451:function(i,n,t){"use strict";t(350)},504:function(i,n,t){"use strict";t.r(n);var s={},c=(t(451),t(16)),o=Object(c.a)(s,(function(){return(0,this._self._c)("iconify-icon",this._g(this._b({},"iconify-icon",this.$attrs,!1),this.$listeners))}),[],!1,null,"d01ba734",null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/29.b294ce10.js b/assets/js/29.b294ce10.js new file mode 100644 index 00000000..3a6a9bb3 --- /dev/null +++ b/assets/js/29.b294ce10.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{349:function(i,n,t){},450:function(i,n,t){"use strict";t(349)},503:function(i,n,t){"use strict";t.r(n);var s={},c=(t(450),t(16)),o=Object(c.a)(s,(function(){return(0,this._self._c)("iconify-icon",this._g(this._b({},"iconify-icon",this.$attrs,!1),this.$listeners))}),[],!1,null,"d01ba734",null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/3.0c89a22c.js b/assets/js/3.6c40dd93.js similarity index 87% rename from assets/js/3.0c89a22c.js rename to assets/js/3.6c40dd93.js index ee6afc28..a9a763cd 100644 --- a/assets/js/3.0c89a22c.js +++ b/assets/js/3.6c40dd93.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{321:function(t,e,n){"use strict";n.d(e,"a",(function(){return p})),n.d(e,"b",(function(){return l})),n.d(e,"c",(function(){return m})),n.d(e,"d",(function(){return s})),n.d(e,"e",(function(){return u}));var a=n(458);var i=n(379);const r=["","X","Y","Z"],s={x:"translateX",y:"translateY",z:"translateZ"},o={syntax:"",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},c={translate:{syntax:"",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:o,scale:{syntax:"",initialValue:1,toDefaultUnit:a.b},skew:o},u=new Map,l=t=>"--motion-"+t,h=["x","y","z"];["translate","scale","rotate","skew"].forEach(t=>{r.forEach(e=>{h.push(t+e),u.set(l(t+e),c[t])})});const f=(t,e)=>h.indexOf(t)-h.indexOf(e),d=new Set(h),m=t=>d.has(t),p=(t,e)=>{s[e]&&(e=s[e]);const{transforms:n}=Object(i.a)(t);var a,r;r=e,-1===(a=n).indexOf(r)&&a.push(r),t.style.transform=y(n)},y=t=>t.sort(f).reduce(g,"").trim(),g=(t,e)=>`${t} ${e}(var(${l(e)}))`},323:function(t,e,n){"use strict";function a(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}n.d(e,"a",(function(){return a}))},324:function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));var a=n(321);function i(t){return a.d[t]&&(t=a.d[t]),Object(a.c)(t)?Object(a.b)(t):t}},355:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"number"==typeof t},356:function(t,e,n){"use strict";n.d(e,"a",(function(){return r}));var a=n(458),i=n(485);function r(t,e){var n;let r=(null==e?void 0:e.toDefaultUnit)||a.b;const s=t[t.length-1];if(Object(i.a)(s)){const t=(null===(n=s.match(/(-?[\d.]+)([a-z%]*)/))||void 0===n?void 0:n[2])||"";t&&(r=e=>e+t)}return r}},379:function(t,e,n){"use strict";n.d(e,"a",(function(){return r})),n.d(e,"b",(function(){return s}));class a{setAnimation(t){this.animation=t,null==t||t.finished.then(()=>this.clearAnimation()).catch(()=>{})}clearAnimation(){this.animation=this.generator=void 0}}const i=new WeakMap;function r(t){return i.has(t)||i.set(t,{transforms:[],values:new Map}),i.get(t)}function s(t,e){return t.has(e)||t.set(e,new a),t.get(e)}},458:function(t,e,n){"use strict";n.d(e,"a",(function(){return a})),n.d(e,"b",(function(){return i}));const a=()=>{},i=t=>t},459:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"function"==typeof t},484:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a={ms:t=>1e3*t,s:t=>t/1e3}},485:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"string"==typeof t},486:function(t,e,n){"use strict";n.d(e,"a",(function(){return Y}));const a={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"};var i=n(484),r=n(458);function s(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}const o=t=>t(),c=(t,e,n=a.duration)=>new Proxy({animations:t.map(o).filter(Boolean),duration:n,options:e},u),u={get:(t,e)=>{const n=t.animations[0];switch(e){case"duration":return t.duration;case"currentTime":return i.a.s((null==n?void 0:n[e])||0);case"playbackRate":case"playState":return null==n?void 0:n[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(l)).catch(r.a)),t.finished;case"stop":return()=>{t.animations.forEach(t=>s(t))};case"forEachNative":return e=>{t.animations.forEach(n=>e(n,t))};default:return void 0===(null==n?void 0:n[e])?void 0:()=>t.animations.forEach(t=>t[e]())}},set:(t,e,n)=>{switch(e){case"currentTime":n=i.a.ms(n);case"currentTime":case"playbackRate":for(let a=0;at.finished,h=t=>"object"==typeof t&&Boolean(t.createAnimation);var f=n(355);const d=t=>Array.isArray(t)&&!Object(f.a)(t[0]),m=(t,e,n)=>-n*t+n*e+t,p=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function y(t,e){const n=t[t.length-1];for(let a=1;a<=e;a++){const i=p(0,e,a);t.push(m(n,1,i))}}const g=(t,e,n)=>Math.min(Math.max(n,t),e);function b(t,e=function(t){const e=[0];return y(e,t-1),e}(t.length),n=r.b){const a=t.length,i=a-e.length;return i>0&&y(e,i),i=>{let r=0;for(;r{const a=e-t;return((n-t)%a+a)%a+t})(0,t.length,e)]:t}(n,r)(s),m(t[r],t[r+1],s)}}const v=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function O(t,e,n,a){if(t===e&&n===a)return r.b;const i=e=>function(t,e,n,a,i){let r,s,o=0;do{s=e+(n-e)/2,r=v(s,a,i)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:v(i(t),e,a)}var j=n(459);const w=t=>Array.isArray(t)&&Object(f.a)(t[0]),T={ease:O(.25,.1,.25,1),"ease-in":O(.42,0,1,1),"ease-in-out":O(.42,0,.58,1),"ease-out":O(0,0,.58,1)},S=/\((.*?)\)/;function M(t){if(Object(j.a)(t))return t;if(w(t))return O(...t);if(T[t])return T[t];if(t.startsWith("steps")){const e=S.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>n=>{const a=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,i="end"===e?Math.floor(a):Math.ceil(a);return g(0,1,i/t)})(parseFloat(t[0]),t[1].trim())}}return r.b}class D{constructor(t,e=[0,1],{easing:n,duration:i=a.duration,delay:s=a.delay,endDelay:o=a.endDelay,repeat:c=a.repeat,offset:u,direction:l="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=r.b,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise((t,e)=>{this.resolve=t,this.reject=e}),n=n||a.easing,h(n)){const t=n.createAnimation(e);n=t.easing,e=t.keyframes||e,i=t.duration||i}this.repeat=c,this.easing=d(n)?r.b:M(n),this.updateDuration(i);const f=b(e,u,d(n)?n.map(M):r.b);this.tick=e=>{var n;s=s;let a=0;a=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=a,a/=1e3,a=Math.max(a-s,0),"finished"===this.playState&&void 0===this.pauseTime&&(a=this.totalDuration);const i=a/this.duration;let r=Math.floor(i),c=i%1;!c&&i>=1&&(c=1),1===c&&r--;const u=r%2;("reverse"===l||"alternate"===l&&u||"alternate-reverse"===l&&!u)&&(c=1-c);const h=a>=this.totalDuration?1:Math.min(c,1),d=f(this.easing(h));t(d);void 0===this.pauseTime&&("finished"===this.playState||a>=this.totalDuration+o)?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,d)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}var A=n(379),k=n(321);const x=t=>t.startsWith("--"),R=new Set;const E=(t,e)=>document.createElement("div").animate(t,e),P={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{E({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(E({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{E({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},$={},q={};for(const t in P)q[t]=()=>(void 0===$[t]&&($[t]=P[t]()),$[t]);const V=(t,e)=>Object(j.a)(t)?q.linearEasing()?`linear(${((t,e)=>{let n="";const a=Math.round(e/.015);for(let e=0;e`cubic-bezier(${t}, ${e}, ${n}, ${a})`;var U=n(324);const C=(t,e)=>{e=Object(U.a)(e);let n=x(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=k.e.get(e);t&&(n=t.initialValue)}return n},I=(t,e,n)=>{e=Object(U.a)(e),x(e)?t.style.setProperty(e,n):t.style[e]=n};var W=n(356);function _(t,e,n,o={},c){const u=window.__MOTION_DEV_TOOLS_RECORD,l=!1!==o.record&&u;let m,{duration:p=a.duration,delay:y=a.delay,endDelay:g=a.endDelay,repeat:b=a.repeat,easing:v=a.easing,direction:O,offset:w,allowWebkitAcceleration:T=!1}=o;const S=Object(A.a)(t),M=Object(k.c)(e);let D=q.waapi();M&&Object(k.a)(t,e);const E=Object(U.a)(e),P=Object(A.b)(S.values,E),$=k.e.get(E);return s(P.animation,!(h(v)&&P.generator)&&!1!==o.record),()=>{const a=()=>{var e,n;return null!==(n=null!==(e=C(t,E))&&void 0!==e?e:null==$?void 0:$.initialValue)&&void 0!==n?n:0};let s=function(t,e){for(let n=0;nArray.isArray(t)?t:[t])(n),a);const S=Object(W.a)(s,$);if(h(v)){const t=v.createAnimation(s,"opacity"!==e,a,E,P);v=t.easing,s=t.keyframes||s,p=t.duration||p}if(x(E)&&(q.cssRegisterProperty()?function(t){if(!R.has(t)){R.add(t);try{const{syntax:e,initialValue:n}=k.e.has(t)?k.e.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(E):D=!1),M&&!q.linearEasing()&&(Object(j.a)(v)||d(v)&&v.some(j.a))&&(D=!1),D){$&&(s=s.map(t=>Object(f.a)(t)?$.toDefaultUnit(t):t)),1!==s.length||q.partialKeyframes()&&!l||s.unshift(a());const e={delay:i.a.ms(y),duration:i.a.ms(p),endDelay:i.a.ms(g),easing:d(v)?void 0:V(v,p),direction:O,iterations:b+1,fill:"both"};m=t.animate({[E]:s,offset:w,easing:d(v)?v.map(t=>V(t,p)):void 0},e),m.finished||(m.finished=new Promise((t,e)=>{m.onfinish=t,m.oncancel=e}));const n=s[s.length-1];m.finished.then(()=>{I(t,E,n),m.cancel()}).catch(r.a),T||(m.playbackRate=1.000001)}else if(c&&M)s=s.map(t=>"string"==typeof t?parseFloat(t):t),1===s.length&&s.unshift(parseFloat(a())),m=new c(e=>{I(t,E,S?S(e):e)},s,Object.assign(Object.assign({},o),{duration:p,easing:v}));else{const e=s[s.length-1];I(t,E,$&&Object(f.a)(e)?$.toDefaultUnit(e):e)}return l&&u(t,e,s,{duration:p,delay:y,easing:v,repeat:b,offset:w},"motion-one"),P.setAnimation(m),m}}const z=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);var N=n(323);function B(t,e,n){return Object(j.a)(t)?t(e,n):t}const J=(K=D,function(t,e,n={}){const a=(t=Object(N.a)(t)).length,i=[];for(let r=0;r{const n=new D(t,[0,1],e);return n.finished.catch(()=>{}),n}],e,e.duration)}function Y(t,e,n){return(Object(j.a)(t)?X:J)(t,e,n)}},487:function(t,e,n){"use strict";n.d(e,"a",(function(){return y}));var a=n(484);const i=100,r=10,s=1;function o(t,e,n){const a=Math.max(e-5,0);return i=n-t(a),(r=e-a)?i*(1e3/r):0;var i,r}var c=n(458);var u=n(355),l=n(485),h=n(356),f=n(321),d=n(324);function m(t){return Object(u.a)(t)&&!isNaN(t)}function p(t){return Object(l.a)(t)?parseFloat(t):t}const y=function(t){const e=new WeakMap;return(n={})=>{const a=new Map,i=(e=0,i=100,r=0,s=!1)=>{const o=`${e}-${i}-${r}-${s}`;return a.has(o)||a.set(o,t(Object.assign({from:e,to:i,velocity:r,restSpeed:s?.05:2,restDistance:s?.01:.5},n))),a.get(o)},r=(t,n)=>(e.has(t)||e.set(t,function(t,e=c.b){let n=void 0,a=10,i=t(0);const r=[e(i.current)];for(;!i.done&&a<1e4;)i=t(a),r.push(e(i.done?i.target:i.current)),void 0===n&&i.hasReachedTarget&&(n=a),a+=10;const s=a-10;return 1===r.length&&r.push(i.current),{keyframes:r,duration:s/1e3,overshootDuration:(null!=n?n:s)/1e3}}(t,n)),e.get(t));return{createAnimation:(t,e=!0,n,a,s)=>{let u,l,y,g=0,b=c.b;const v=t.length;if(e){b=Object(h.a)(t,a?f.e.get(Object(d.a)(a)):void 0);if(y=p(t[v-1]),v>1&&null!==t[0])l=p(t[0]);else{const t=null==s?void 0:s.generator;if(t){const{animation:e,generatorStartTime:n}=s,a=(null==e?void 0:e.startTime)||n||0,i=(null==e?void 0:e.currentTime)||performance.now()-a,r=t(i).current;l=r,g=o(e=>t(e).current,i,r)}else n&&(l=p(n()))}}if(m(l)&&m(y)){const t=i(l,y,g,null==a?void 0:a.includes("scale"));u=Object.assign(Object.assign({},r(t,b)),{easing:"linear"}),s&&(s.generator=t,s.generatorStartTime=performance.now())}if(!u){u={easing:"ease",duration:r(i(0,100)).overshootDuration}}return u}}}}(({stiffness:t=i,damping:e=r,mass:n=s,from:c=0,to:u=1,velocity:l=0,restSpeed:h=2,restDistance:f=.5}={})=>{l=l?a.a.s(l):0;const d={done:!1,hasReachedTarget:!1,current:c,target:u},m=u-c,p=Math.sqrt(t/n)/1e3,y=((t=i,e=r,n=s)=>e/(2*Math.sqrt(t*n)))(t,e,n);let g;if(y<1){const t=p*Math.sqrt(1-y*y);g=e=>u-Math.exp(-y*p*e)*((y*p*m-l)/t*Math.sin(t*e)+m*Math.cos(t*e))}else g=t=>u-Math.exp(-p*t)*(m+(p*m-l)*t);return t=>{d.current=g(t);const e=0===t?l:o(g,t,d.current),n=Math.abs(e)<=h,a=Math.abs(u-d.current)<=f;var i,r,s;return d.done=n&&a,d.hasReachedTarget=(i=c,r=u,s=d.current,i=r||i>r&&s<=r),d}})}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{320:function(t,e,n){"use strict";n.d(e,"a",(function(){return p})),n.d(e,"b",(function(){return l})),n.d(e,"c",(function(){return m})),n.d(e,"d",(function(){return s})),n.d(e,"e",(function(){return u}));var a=n(457);var i=n(378);const r=["","X","Y","Z"],s={x:"translateX",y:"translateY",z:"translateZ"},o={syntax:"",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},c={translate:{syntax:"",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:o,scale:{syntax:"",initialValue:1,toDefaultUnit:a.b},skew:o},u=new Map,l=t=>"--motion-"+t,h=["x","y","z"];["translate","scale","rotate","skew"].forEach(t=>{r.forEach(e=>{h.push(t+e),u.set(l(t+e),c[t])})});const f=(t,e)=>h.indexOf(t)-h.indexOf(e),d=new Set(h),m=t=>d.has(t),p=(t,e)=>{s[e]&&(e=s[e]);const{transforms:n}=Object(i.a)(t);var a,r;r=e,-1===(a=n).indexOf(r)&&a.push(r),t.style.transform=y(n)},y=t=>t.sort(f).reduce(g,"").trim(),g=(t,e)=>`${t} ${e}(var(${l(e)}))`},322:function(t,e,n){"use strict";function a(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}n.d(e,"a",(function(){return a}))},323:function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));var a=n(320);function i(t){return a.d[t]&&(t=a.d[t]),Object(a.c)(t)?Object(a.b)(t):t}},354:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"number"==typeof t},355:function(t,e,n){"use strict";n.d(e,"a",(function(){return r}));var a=n(457),i=n(484);function r(t,e){var n;let r=(null==e?void 0:e.toDefaultUnit)||a.b;const s=t[t.length-1];if(Object(i.a)(s)){const t=(null===(n=s.match(/(-?[\d.]+)([a-z%]*)/))||void 0===n?void 0:n[2])||"";t&&(r=e=>e+t)}return r}},378:function(t,e,n){"use strict";n.d(e,"a",(function(){return r})),n.d(e,"b",(function(){return s}));class a{setAnimation(t){this.animation=t,null==t||t.finished.then(()=>this.clearAnimation()).catch(()=>{})}clearAnimation(){this.animation=this.generator=void 0}}const i=new WeakMap;function r(t){return i.has(t)||i.set(t,{transforms:[],values:new Map}),i.get(t)}function s(t,e){return t.has(e)||t.set(e,new a),t.get(e)}},457:function(t,e,n){"use strict";n.d(e,"a",(function(){return a})),n.d(e,"b",(function(){return i}));const a=()=>{},i=t=>t},458:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"function"==typeof t},483:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a={ms:t=>1e3*t,s:t=>t/1e3}},484:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"string"==typeof t},485:function(t,e,n){"use strict";n.d(e,"a",(function(){return Y}));const a={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"};var i=n(483),r=n(457);function s(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}const o=t=>t(),c=(t,e,n=a.duration)=>new Proxy({animations:t.map(o).filter(Boolean),duration:n,options:e},u),u={get:(t,e)=>{const n=t.animations[0];switch(e){case"duration":return t.duration;case"currentTime":return i.a.s((null==n?void 0:n[e])||0);case"playbackRate":case"playState":return null==n?void 0:n[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(l)).catch(r.a)),t.finished;case"stop":return()=>{t.animations.forEach(t=>s(t))};case"forEachNative":return e=>{t.animations.forEach(n=>e(n,t))};default:return void 0===(null==n?void 0:n[e])?void 0:()=>t.animations.forEach(t=>t[e]())}},set:(t,e,n)=>{switch(e){case"currentTime":n=i.a.ms(n);case"currentTime":case"playbackRate":for(let a=0;at.finished,h=t=>"object"==typeof t&&Boolean(t.createAnimation);var f=n(354);const d=t=>Array.isArray(t)&&!Object(f.a)(t[0]),m=(t,e,n)=>-n*t+n*e+t,p=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function y(t,e){const n=t[t.length-1];for(let a=1;a<=e;a++){const i=p(0,e,a);t.push(m(n,1,i))}}const g=(t,e,n)=>Math.min(Math.max(n,t),e);function b(t,e=function(t){const e=[0];return y(e,t-1),e}(t.length),n=r.b){const a=t.length,i=a-e.length;return i>0&&y(e,i),i=>{let r=0;for(;r{const a=e-t;return((n-t)%a+a)%a+t})(0,t.length,e)]:t}(n,r)(s),m(t[r],t[r+1],s)}}const v=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function O(t,e,n,a){if(t===e&&n===a)return r.b;const i=e=>function(t,e,n,a,i){let r,s,o=0;do{s=e+(n-e)/2,r=v(s,a,i)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:v(i(t),e,a)}var j=n(458);const w=t=>Array.isArray(t)&&Object(f.a)(t[0]),T={ease:O(.25,.1,.25,1),"ease-in":O(.42,0,1,1),"ease-in-out":O(.42,0,.58,1),"ease-out":O(0,0,.58,1)},S=/\((.*?)\)/;function M(t){if(Object(j.a)(t))return t;if(w(t))return O(...t);if(T[t])return T[t];if(t.startsWith("steps")){const e=S.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>n=>{const a=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,i="end"===e?Math.floor(a):Math.ceil(a);return g(0,1,i/t)})(parseFloat(t[0]),t[1].trim())}}return r.b}class D{constructor(t,e=[0,1],{easing:n,duration:i=a.duration,delay:s=a.delay,endDelay:o=a.endDelay,repeat:c=a.repeat,offset:u,direction:l="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=r.b,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise((t,e)=>{this.resolve=t,this.reject=e}),n=n||a.easing,h(n)){const t=n.createAnimation(e);n=t.easing,e=t.keyframes||e,i=t.duration||i}this.repeat=c,this.easing=d(n)?r.b:M(n),this.updateDuration(i);const f=b(e,u,d(n)?n.map(M):r.b);this.tick=e=>{var n;s=s;let a=0;a=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=a,a/=1e3,a=Math.max(a-s,0),"finished"===this.playState&&void 0===this.pauseTime&&(a=this.totalDuration);const i=a/this.duration;let r=Math.floor(i),c=i%1;!c&&i>=1&&(c=1),1===c&&r--;const u=r%2;("reverse"===l||"alternate"===l&&u||"alternate-reverse"===l&&!u)&&(c=1-c);const h=a>=this.totalDuration?1:Math.min(c,1),d=f(this.easing(h));t(d);void 0===this.pauseTime&&("finished"===this.playState||a>=this.totalDuration+o)?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,d)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}var A=n(378),k=n(320);const x=t=>t.startsWith("--"),R=new Set;const E=(t,e)=>document.createElement("div").animate(t,e),P={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{E({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(E({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{E({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},$={},q={};for(const t in P)q[t]=()=>(void 0===$[t]&&($[t]=P[t]()),$[t]);const V=(t,e)=>Object(j.a)(t)?q.linearEasing()?`linear(${((t,e)=>{let n="";const a=Math.round(e/.015);for(let e=0;e`cubic-bezier(${t}, ${e}, ${n}, ${a})`;var U=n(323);const C=(t,e)=>{e=Object(U.a)(e);let n=x(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=k.e.get(e);t&&(n=t.initialValue)}return n},I=(t,e,n)=>{e=Object(U.a)(e),x(e)?t.style.setProperty(e,n):t.style[e]=n};var W=n(355);function _(t,e,n,o={},c){const u=window.__MOTION_DEV_TOOLS_RECORD,l=!1!==o.record&&u;let m,{duration:p=a.duration,delay:y=a.delay,endDelay:g=a.endDelay,repeat:b=a.repeat,easing:v=a.easing,direction:O,offset:w,allowWebkitAcceleration:T=!1}=o;const S=Object(A.a)(t),M=Object(k.c)(e);let D=q.waapi();M&&Object(k.a)(t,e);const E=Object(U.a)(e),P=Object(A.b)(S.values,E),$=k.e.get(E);return s(P.animation,!(h(v)&&P.generator)&&!1!==o.record),()=>{const a=()=>{var e,n;return null!==(n=null!==(e=C(t,E))&&void 0!==e?e:null==$?void 0:$.initialValue)&&void 0!==n?n:0};let s=function(t,e){for(let n=0;nArray.isArray(t)?t:[t])(n),a);const S=Object(W.a)(s,$);if(h(v)){const t=v.createAnimation(s,"opacity"!==e,a,E,P);v=t.easing,s=t.keyframes||s,p=t.duration||p}if(x(E)&&(q.cssRegisterProperty()?function(t){if(!R.has(t)){R.add(t);try{const{syntax:e,initialValue:n}=k.e.has(t)?k.e.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(E):D=!1),M&&!q.linearEasing()&&(Object(j.a)(v)||d(v)&&v.some(j.a))&&(D=!1),D){$&&(s=s.map(t=>Object(f.a)(t)?$.toDefaultUnit(t):t)),1!==s.length||q.partialKeyframes()&&!l||s.unshift(a());const e={delay:i.a.ms(y),duration:i.a.ms(p),endDelay:i.a.ms(g),easing:d(v)?void 0:V(v,p),direction:O,iterations:b+1,fill:"both"};m=t.animate({[E]:s,offset:w,easing:d(v)?v.map(t=>V(t,p)):void 0},e),m.finished||(m.finished=new Promise((t,e)=>{m.onfinish=t,m.oncancel=e}));const n=s[s.length-1];m.finished.then(()=>{I(t,E,n),m.cancel()}).catch(r.a),T||(m.playbackRate=1.000001)}else if(c&&M)s=s.map(t=>"string"==typeof t?parseFloat(t):t),1===s.length&&s.unshift(parseFloat(a())),m=new c(e=>{I(t,E,S?S(e):e)},s,Object.assign(Object.assign({},o),{duration:p,easing:v}));else{const e=s[s.length-1];I(t,E,$&&Object(f.a)(e)?$.toDefaultUnit(e):e)}return l&&u(t,e,s,{duration:p,delay:y,easing:v,repeat:b,offset:w},"motion-one"),P.setAnimation(m),m}}const z=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);var N=n(322);function B(t,e,n){return Object(j.a)(t)?t(e,n):t}const J=(K=D,function(t,e,n={}){const a=(t=Object(N.a)(t)).length,i=[];for(let r=0;r{const n=new D(t,[0,1],e);return n.finished.catch(()=>{}),n}],e,e.duration)}function Y(t,e,n){return(Object(j.a)(t)?X:J)(t,e,n)}},486:function(t,e,n){"use strict";n.d(e,"a",(function(){return y}));var a=n(483);const i=100,r=10,s=1;function o(t,e,n){const a=Math.max(e-5,0);return i=n-t(a),(r=e-a)?i*(1e3/r):0;var i,r}var c=n(457);var u=n(354),l=n(484),h=n(355),f=n(320),d=n(323);function m(t){return Object(u.a)(t)&&!isNaN(t)}function p(t){return Object(l.a)(t)?parseFloat(t):t}const y=function(t){const e=new WeakMap;return(n={})=>{const a=new Map,i=(e=0,i=100,r=0,s=!1)=>{const o=`${e}-${i}-${r}-${s}`;return a.has(o)||a.set(o,t(Object.assign({from:e,to:i,velocity:r,restSpeed:s?.05:2,restDistance:s?.01:.5},n))),a.get(o)},r=(t,n)=>(e.has(t)||e.set(t,function(t,e=c.b){let n=void 0,a=10,i=t(0);const r=[e(i.current)];for(;!i.done&&a<1e4;)i=t(a),r.push(e(i.done?i.target:i.current)),void 0===n&&i.hasReachedTarget&&(n=a),a+=10;const s=a-10;return 1===r.length&&r.push(i.current),{keyframes:r,duration:s/1e3,overshootDuration:(null!=n?n:s)/1e3}}(t,n)),e.get(t));return{createAnimation:(t,e=!0,n,a,s)=>{let u,l,y,g=0,b=c.b;const v=t.length;if(e){b=Object(h.a)(t,a?f.e.get(Object(d.a)(a)):void 0);if(y=p(t[v-1]),v>1&&null!==t[0])l=p(t[0]);else{const t=null==s?void 0:s.generator;if(t){const{animation:e,generatorStartTime:n}=s,a=(null==e?void 0:e.startTime)||n||0,i=(null==e?void 0:e.currentTime)||performance.now()-a,r=t(i).current;l=r,g=o(e=>t(e).current,i,r)}else n&&(l=p(n()))}}if(m(l)&&m(y)){const t=i(l,y,g,null==a?void 0:a.includes("scale"));u=Object.assign(Object.assign({},r(t,b)),{easing:"linear"}),s&&(s.generator=t,s.generatorStartTime=performance.now())}if(!u){u={easing:"ease",duration:r(i(0,100)).overshootDuration}}return u}}}}(({stiffness:t=i,damping:e=r,mass:n=s,from:c=0,to:u=1,velocity:l=0,restSpeed:h=2,restDistance:f=.5}={})=>{l=l?a.a.s(l):0;const d={done:!1,hasReachedTarget:!1,current:c,target:u},m=u-c,p=Math.sqrt(t/n)/1e3,y=((t=i,e=r,n=s)=>e/(2*Math.sqrt(t*n)))(t,e,n);let g;if(y<1){const t=p*Math.sqrt(1-y*y);g=e=>u-Math.exp(-y*p*e)*((y*p*m-l)/t*Math.sin(t*e)+m*Math.cos(t*e))}else g=t=>u-Math.exp(-p*t)*(m+(p*m-l)*t);return t=>{d.current=g(t);const e=0===t?l:o(g,t,d.current),n=Math.abs(e)<=h,a=Math.abs(u-d.current)<=f;var i,r,s;return d.done=n&&a,d.hasReachedTarget=(i=c,r=u,s=d.current,i=r||i>r&&s<=r),d}})}}]); \ No newline at end of file diff --git a/assets/js/30.aa1d03a6.js b/assets/js/30.4875a2ff.js similarity index 79% rename from assets/js/30.aa1d03a6.js rename to assets/js/30.4875a2ff.js index 0786b190..56693432 100644 --- a/assets/js/30.aa1d03a6.js +++ b/assets/js/30.4875a2ff.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{351:function(t,i,n){},452:function(t,i,n){"use strict";n(351)},506:function(t,i,n){"use strict";n.r(i);var o={props:{icon:String,list:Boolean},computed:{data(){return"android"===this.icon?{name:"Android",icon:"logos:google-play-icon"}:"ios"===this.icon?{name:"iOS",icon:"logos:apple-app-store"}:"diamond"===this.icon?{name:"Premium feature",icon:"noto:gem-stone"}:void 0}}},a=(n(452),n(16)),e=Object(a.a)(o,(function(){var t=this._self._c;return this.list?t("span",[t("a-icon",{attrs:{icon:this.data.icon,width:"20",height:"20"}}),this._v(" "),t("span",[this._v(this._s(this.data.name))])],1):t("span",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:this.data.name,offset:4},expression:"{ content: data.name, offset: 4 }"}]},[t("a-icon",{attrs:{icon:this.data.icon,width:"20",height:"20"}})],1)}),[],!1,null,"1f6ea1c9",null);i.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{350:function(t,i,n){},451:function(t,i,n){"use strict";n(350)},506:function(t,i,n){"use strict";n.r(i);var o={props:{icon:String,list:Boolean},computed:{data(){return"android"===this.icon?{name:"Android",icon:"logos:google-play-icon"}:"ios"===this.icon?{name:"iOS",icon:"logos:apple-app-store"}:"diamond"===this.icon?{name:"Premium feature",icon:"noto:gem-stone"}:void 0}}},a=(n(451),n(16)),e=Object(a.a)(o,(function(){var t=this._self._c;return this.list?t("span",[t("a-icon",{attrs:{icon:this.data.icon,width:"20",height:"20"}}),this._v(" "),t("span",[this._v(this._s(this.data.name))])],1):t("span",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:this.data.name,offset:4},expression:"{ content: data.name, offset: 4 }"}]},[t("a-icon",{attrs:{icon:this.data.icon,width:"20",height:"20"}})],1)}),[],!1,null,"1f6ea1c9",null);i.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/31.a7f04307.js b/assets/js/31.ad654102.js similarity index 73% rename from assets/js/31.a7f04307.js rename to assets/js/31.ad654102.js index 73d1ac92..45ca6aa8 100644 --- a/assets/js/31.a7f04307.js +++ b/assets/js/31.ad654102.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{352:function(t,s,n){},453:function(t,s,n){"use strict";n(352)},508:function(t,s,n){"use strict";n.r(s);const r={banner:1,square:2};var e={props:{format:{type:String,default:"square"}},computed:{adUnitId(){return r[this.format]}}},i=(n(453),n(16)),a=Object(i.a)(e,(function(){var t=this._self._c;return t("div",{class:this.format,attrs:{id:"127550-"+this.adUnitId}},[t("script",{tag:"component",attrs:{src:"//ads.themoneytizer.com/s/gen.js?type="+this.adUnitId}}),this._v(" "),t("script",{tag:"component",attrs:{src:"//ads.themoneytizer.com/s/requestform.js?siteId=127550&formatId="+this.adUnitId}})],1)}),[],!1,null,"2685687c",null);s.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{351:function(t,s,n){},452:function(t,s,n){"use strict";n(351)},507:function(t,s,n){"use strict";n.r(s);const r={banner:1,square:2};var e={props:{format:{type:String,default:"square"}},computed:{adUnitId(){return r[this.format]}}},i=(n(452),n(16)),a=Object(i.a)(e,(function(){var t=this._self._c;return t("div",{class:this.format,attrs:{id:"127550-"+this.adUnitId}},[t("script",{tag:"component",attrs:{src:"//ads.themoneytizer.com/s/gen.js?type="+this.adUnitId}}),this._v(" "),t("script",{tag:"component",attrs:{src:"//ads.themoneytizer.com/s/requestform.js?siteId=127550&formatId="+this.adUnitId}})],1)}),[],!1,null,"2685687c",null);s.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/32.cc6c63a5.js b/assets/js/32.9fd1b495.js similarity index 63% rename from assets/js/32.cc6c63a5.js rename to assets/js/32.9fd1b495.js index c2992a27..b85cb9c8 100644 --- a/assets/js/32.cc6c63a5.js +++ b/assets/js/32.9fd1b495.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{353:function(t,s,a){},454:function(t,s,a){"use strict";a(353)},511:function(t,s,a){"use strict";a.r(s);var i={},e=(a(454),a(16)),n=Object(e.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"page-edit"},[t("div",{staticClass:"last-updated"},[t("span",{staticClass:"prefix"},[this._v("Last Updated:")]),this._v(" "),t("span",{staticClass:"time"},[this._v(this._s(this.$page.lastUpdated))])])])}),[],!1,null,"d53989e8",null);s.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{352:function(t,s,a){},453:function(t,s,a){"use strict";a(352)},510:function(t,s,a){"use strict";a.r(s);var i={},e=(a(453),a(16)),n=Object(e.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"page-edit"},[t("div",{staticClass:"last-updated"},[t("span",{staticClass:"prefix"},[this._v("Last Updated:")]),this._v(" "),t("span",{staticClass:"time"},[this._v(this._s(this.$page.lastUpdated))])])])}),[],!1,null,"d53989e8",null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/33.44539619.js b/assets/js/33.4f742fec.js similarity index 72% rename from assets/js/33.44539619.js rename to assets/js/33.4f742fec.js index c7b8e929..1fb54956 100644 --- a/assets/js/33.44539619.js +++ b/assets/js/33.4f742fec.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{354:function(t,e,n){},457:function(t,e,n){"use strict";n(354)},512:function(t,e,n){"use strict";n.r(e);var o=n(455),a=(n(456),{data:()=>({toast:null}),mounted(){this.toast=Object(o.b)({draggable:!1,timeout:!1,position:o.a.BOTTOM_LEFT})},methods:{getContent(){const t=this.$createElement;return t("a",{attrs:{href:"https://www.gamezop.com/?id=4032",target:"_blank"},style:"display: flex; align-items: center; color: #fff; text-align: center;"},[t("img",{attrs:{src:"/assets/gz-icon.gif",alt:"Gamezop",width:"48"},style:"margin-right: 8px"}),t("span",["Bored? Check out some fun games!",t("i",{style:"margin-top: 4px; display: block; font-size: 0.8em; color: #aaa"},["(From our partner ",t("span",{style:"color: #fff"},["Gamezop"]),")"])])])}}}),s=(n(457),n(16)),i=Object(s.a)(a,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{353:function(t,e,n){},456:function(t,e,n){"use strict";n(353)},511:function(t,e,n){"use strict";n.r(e);var o=n(454),a=(n(455),{data:()=>({toast:null}),mounted(){this.toast=Object(o.b)({draggable:!1,timeout:!1,position:o.a.BOTTOM_LEFT})},methods:{getContent(){const t=this.$createElement;return t("a",{attrs:{href:"https://www.gamezop.com/?id=4032",target:"_blank"},style:"display: flex; align-items: center; color: #fff; text-align: center;"},[t("img",{attrs:{src:"/assets/gz-icon.gif",alt:"Gamezop",width:"48"},style:"margin-right: 8px"}),t("span",["Bored? Check out some fun games!",t("i",{style:"margin-top: 4px; display: block; font-size: 0.8em; color: #aaa"},["(From our partner ",t("span",{style:"color: #fff"},["Gamezop"]),")"])])])}}}),s=(n(456),n(16)),i=Object(s.a)(a,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/34.feda67f6.js b/assets/js/34.cfd87b9e.js similarity index 73% rename from assets/js/34.feda67f6.js rename to assets/js/34.cfd87b9e.js index 6a842588..10da3756 100644 --- a/assets/js/34.feda67f6.js +++ b/assets/js/34.cfd87b9e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{357:function(t,s,o){},460:function(t,s,o){"use strict";o(357)},513:function(t,s,o){"use strict";o.r(s);var i=o(486),e=o(487),n={data:()=>({showControls:!1}),watch:{showControls(t){Object(i.a)(this.$refs.controls,{scale:t?1:0},{easing:Object(e.a)({stiffness:300,damping:20})})}},mounted(){this.showControls="/"!==this.$route.path},methods:{toggle(){this.showControls=!this.showControls}}},l=(o(460),o(16)),c=Object(l.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"site-settings"},[t("a-control",{class:["toggle",{active:this.showControls}],attrs:{label:"Site Settings",icon:this.showControls?"humbleicons:times":"ic:outline-settings",iconSize:"32"},on:{click:this.toggle}}),this._v(" "),t("ul",{ref:"controls"},[t("li",[t("a-theme-toggle")],1),this._v(" "),t("li",[t("a-text-to-speech")],1),this._v(" "),t("li",[t("a-back-to-top")],1)])],1)}),[],!1,null,"39672356",null);s.default=c.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{356:function(t,s,o){},459:function(t,s,o){"use strict";o(356)},512:function(t,s,o){"use strict";o.r(s);var i=o(485),e=o(486),n={data:()=>({showControls:!1}),watch:{showControls(t){Object(i.a)(this.$refs.controls,{scale:t?1:0},{easing:Object(e.a)({stiffness:300,damping:20})})}},mounted(){this.showControls="/"!==this.$route.path},methods:{toggle(){this.showControls=!this.showControls}}},l=(o(459),o(16)),c=Object(l.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"site-settings"},[t("a-control",{class:["toggle",{active:this.showControls}],attrs:{label:"Site Settings",icon:this.showControls?"humbleicons:times":"ic:outline-settings",iconSize:"32"},on:{click:this.toggle}}),this._v(" "),t("ul",{ref:"controls"},[t("li",[t("a-theme-toggle")],1),this._v(" "),t("li",[t("a-text-to-speech")],1),this._v(" "),t("li",[t("a-back-to-top")],1)])],1)}),[],!1,null,"39672356",null);s.default=c.exports}}]); \ No newline at end of file diff --git a/assets/js/36.87ba715d.js b/assets/js/36.8909cbd4.js similarity index 94% rename from assets/js/36.87ba715d.js rename to assets/js/36.8909cbd4.js index f4e5821c..2080083d 100644 --- a/assets/js/36.87ba715d.js +++ b/assets/js/36.8909cbd4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{371:function(e,t,o){},475:function(e,t,o){"use strict";o(371)},525:function(e,t,o){"use strict";o.r(t);const a=[{image:"https://play-lh.googleusercontent.com/a-/ALV-UjXB4VKtTl-B8FXhulUUDaEhgh9zMqzH85KctsnEMZQYPyc=s50",author:"Cip",date:"September 23, 2023",content:"That's what I call a real Windows Simulator, it is exactly like Windows 7 but on mobile! I really like it and I gave 5 STARS beacuse of it! I hope you make really awesome updates on this game without no doubt! Thanks for reading this!"},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjV7c71QQ1XkrJlnWZl7hzOqvajsFWmWUUum2rSYmunD5Vo=s50",author:"Aldree Syafiq",date:"March 24, 2023",content:"Best Windows Simulator ever! If you want to change from a phone to a PC then this app is for you. It has more than just Windows 7, it also has Win8, Win8.1, WinXp, Win11, Win10, WinVista, Win95, Win3.1, Win2000, and MacOS. There are ads but they don't really pop out too often which makes things better. There are some features that requires ads to unlock but its ok. In overall, 10/10."},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjXbYQwGITwYMZ6Qp032fAolpeeiolVEZDtx7jB0IVlS8A=s50",author:"Leox",date:"January 14, 2022",content:'Omg! It works!!! Thank you so much for bringing our childhood memories back! 🥺💓🙏 I really like the game "Purble Place". A huge respect for giving us strong nostalgia vibes about our childhood so much!.💖💓💖😁 Thank you so much guys~!💖💖💖💖💖💖💖💖'},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjVdAXU2dB_gSdXh1xnHhR6U_vW6bzibXPnU_rWBe1paAbc=s50",author:"The Gaelic gladiator",date:"December 16, 2021",content:"I actually posted a review on this about a year back but the app has changed a lot it's gone from 4* - 5* originally it was very minimal and you couldn't really do anything but now it's full of features and the themes are brilliant in fact you should just call it windows simulator cause with just the click of a button you have a different windows version."},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjUQK3pNlNqOycbRStQThmjHxaoYfUcvWPpT0PTvx9hPgX4=s50",author:"Jephe Mendoza",date:"August 20, 2021",content:"I absolutely love this game. Nice animations, good amount of programs, able to play .mp4 files, 2 browsers, and the childhood games!"},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjVwH0ozTDkOMR1kNBxQ8QUBB8yCtQSzJhcZMGp8YSLo8B0=s50",author:"Railey Dean Tiamson",date:"November 7, 2020",content:"I love this simulator! This app made me feel the best experience of Windows 7! My computer is Windows 10, but no need to downgrade, I will use this app to use Windows 7. It has the cool programs like Games, Internet Explorer, Paint, Notepad, Calculator, Snipping Tool and Windows Media Player, I recommend u to download this!"}];var n={data:()=>({reviews:a})},s=(o(475),o(16)),i=Object(s.a)(n,(function(){var e=this,t=e._self._c;return t("ul",e._l(e.reviews,(function(o,a){return t("li",{key:a},[t("div",{staticClass:"content"},[e._v(e._s(o.content))]),e._v(" "),t("figure",[t("img",{attrs:{src:o.image,alt:o.author}}),e._v(" "),t("figcaption",[t("div",{staticClass:"author"},[e._v(e._s(o.author))]),e._v(" "),t("div",{staticClass:"date"},[e._v(e._s(o.date))])])])])})),0)}),[],!1,null,"65ae56a6",null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{369:function(e,t,o){},473:function(e,t,o){"use strict";o(369)},523:function(e,t,o){"use strict";o.r(t);const a=[{image:"https://play-lh.googleusercontent.com/a-/ALV-UjXB4VKtTl-B8FXhulUUDaEhgh9zMqzH85KctsnEMZQYPyc=s50",author:"Cip",date:"September 23, 2023",content:"That's what I call a real Windows Simulator, it is exactly like Windows 7 but on mobile! I really like it and I gave 5 STARS beacuse of it! I hope you make really awesome updates on this game without no doubt! Thanks for reading this!"},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjV7c71QQ1XkrJlnWZl7hzOqvajsFWmWUUum2rSYmunD5Vo=s50",author:"Aldree Syafiq",date:"March 24, 2023",content:"Best Windows Simulator ever! If you want to change from a phone to a PC then this app is for you. It has more than just Windows 7, it also has Win8, Win8.1, WinXp, Win11, Win10, WinVista, Win95, Win3.1, Win2000, and MacOS. There are ads but they don't really pop out too often which makes things better. There are some features that requires ads to unlock but its ok. In overall, 10/10."},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjXbYQwGITwYMZ6Qp032fAolpeeiolVEZDtx7jB0IVlS8A=s50",author:"Leox",date:"January 14, 2022",content:'Omg! It works!!! Thank you so much for bringing our childhood memories back! 🥺💓🙏 I really like the game "Purble Place". A huge respect for giving us strong nostalgia vibes about our childhood so much!.💖💓💖😁 Thank you so much guys~!💖💖💖💖💖💖💖💖'},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjVdAXU2dB_gSdXh1xnHhR6U_vW6bzibXPnU_rWBe1paAbc=s50",author:"The Gaelic gladiator",date:"December 16, 2021",content:"I actually posted a review on this about a year back but the app has changed a lot it's gone from 4* - 5* originally it was very minimal and you couldn't really do anything but now it's full of features and the themes are brilliant in fact you should just call it windows simulator cause with just the click of a button you have a different windows version."},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjUQK3pNlNqOycbRStQThmjHxaoYfUcvWPpT0PTvx9hPgX4=s50",author:"Jephe Mendoza",date:"August 20, 2021",content:"I absolutely love this game. Nice animations, good amount of programs, able to play .mp4 files, 2 browsers, and the childhood games!"},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjVwH0ozTDkOMR1kNBxQ8QUBB8yCtQSzJhcZMGp8YSLo8B0=s50",author:"Railey Dean Tiamson",date:"November 7, 2020",content:"I love this simulator! This app made me feel the best experience of Windows 7! My computer is Windows 10, but no need to downgrade, I will use this app to use Windows 7. It has the cool programs like Games, Internet Explorer, Paint, Notepad, Calculator, Snipping Tool and Windows Media Player, I recommend u to download this!"}];var n={data:()=>({reviews:a})},s=(o(473),o(16)),i=Object(s.a)(n,(function(){var e=this,t=e._self._c;return t("ul",e._l(e.reviews,(function(o,a){return t("li",{key:a},[t("div",{staticClass:"content"},[e._v(e._s(o.content))]),e._v(" "),t("figure",[t("img",{attrs:{src:o.image,alt:o.author}}),e._v(" "),t("figcaption",[t("div",{staticClass:"author"},[e._v(e._s(o.author))]),e._v(" "),t("div",{staticClass:"date"},[e._v(e._s(o.date))])])])])})),0)}),[],!1,null,"65ae56a6",null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/37.e30c1c38.js b/assets/js/37.8e93a923.js similarity index 50% rename from assets/js/37.e30c1c38.js rename to assets/js/37.8e93a923.js index 15e8fdc8..6fe090b7 100644 --- a/assets/js/37.e30c1c38.js +++ b/assets/js/37.8e93a923.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{372:function(t,n,s){},476:function(t,n,s){"use strict";s(372)},526:function(t,n,s){"use strict";s.r(n);var i={props:{layout:String}},u=(s(476),s(16)),o=Object(u.a)(i,(function(){var t=this._self._c;return t("section",{class:this.layout},[t("div",[this._t("default")],2)])}),[],!1,null,"06508d2a",null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{371:function(t,n,s){},475:function(t,n,s){"use strict";s(371)},525:function(t,n,s){"use strict";s.r(n);var i={props:{layout:String}},u=(s(475),s(16)),o=Object(u.a)(i,(function(){var t=this._self._c;return t("section",{class:this.layout},[t("div",[this._t("default")],2)])}),[],!1,null,"06508d2a",null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/38.e9d30e36.js b/assets/js/38.90ecca65.js similarity index 80% rename from assets/js/38.e9d30e36.js rename to assets/js/38.90ecca65.js index 434b6dee..3b67ea0d 100644 --- a/assets/js/38.e9d30e36.js +++ b/assets/js/38.90ecca65.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{373:function(t,s,e){},477:function(t,s,e){"use strict";e(373)},527:function(t,s,e){"use strict";e.r(s);const i=new URLSearchParams({key:"AIzaSyDdLD0KGCsVWEu0cx6NrxllWT2qkFhfNg8",playlistId:"UUUq46NBY_oz46QLmyuCPxGQ",part:"snippet",maxResults:9});var n={data:()=>({videos:[]}),async mounted(){const t=await fetch("https://www.googleapis.com/youtube/v3/playlistItems?"+i).then(t=>t.json());this.videos=t.items.map(t=>({title:t.snippet.title,thumbnail:t.snippet.thumbnails.high.url,url:"https://youtu.be/"+t.snippet.resourceId.videoId}))}},a=(e(477),e(16)),l=Object(a.a)(n,(function(){var t=this,s=t._self._c;return s("ul",t._l(t.videos,(function(e,i){return s("li",{key:i},[s("a",{attrs:{href:e.url,target:"_blank",title:e.title}},[s("span",{staticClass:"thumbnail"},[s("img",{attrs:{src:e.thumbnail,alt:e.title}})]),t._v(" "),s("span",[t._v(t._s(e.title))])])])})),0)}),[],!1,null,"145d0661",null);s.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{372:function(t,s,e){},476:function(t,s,e){"use strict";e(372)},526:function(t,s,e){"use strict";e.r(s);const i=new URLSearchParams({key:"AIzaSyDdLD0KGCsVWEu0cx6NrxllWT2qkFhfNg8",playlistId:"UUUq46NBY_oz46QLmyuCPxGQ",part:"snippet",maxResults:9});var n={data:()=>({videos:[]}),async mounted(){const t=await fetch("https://www.googleapis.com/youtube/v3/playlistItems?"+i).then(t=>t.json());this.videos=t.items.map(t=>({title:t.snippet.title,thumbnail:t.snippet.thumbnails.high.url,url:"https://youtu.be/"+t.snippet.resourceId.videoId}))}},a=(e(476),e(16)),l=Object(a.a)(n,(function(){var t=this,s=t._self._c;return s("ul",t._l(t.videos,(function(e,i){return s("li",{key:i},[s("a",{attrs:{href:e.url,target:"_blank",title:e.title}},[s("span",{staticClass:"thumbnail"},[s("img",{attrs:{src:e.thumbnail,alt:e.title}})]),t._v(" "),s("span",[t._v(t._s(e.title))])])])})),0)}),[],!1,null,"145d0661",null);s.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/39.5101a03e.js b/assets/js/39.a59cf660.js similarity index 82% rename from assets/js/39.5101a03e.js rename to assets/js/39.a59cf660.js index 16a179e1..5676fe36 100644 --- a/assets/js/39.5101a03e.js +++ b/assets/js/39.a59cf660.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{358:function(s,e,t){},461:function(s,e,t){"use strict";t(358)},514:function(s,e,t){"use strict";t.r(e);const i={win7simu:["https://play.google.com/store/apps/details?id=com.visnalize.win7simu","https://win7simu.visnalize.com"],brick1100:["https://play.google.com/store/apps/details?id=com.visnalize.brick1100","https://apps.apple.com/us/app/brick-1100/id6554000754"]};var a={props:{app:{type:String,required:!0}},computed:{links(){return i[this.app]}},methods:{getImageProps(s){const e={height:100};return s.includes("google.com")?(e.alt="Play Store",e.src="/assets/access-google.svg"):s.includes("apple.com")?(e.alt="App Store",e.src="/assets/access-apple.svg"):(e.alt="Web App",e.src="/assets/access-web.svg"),e}}},c=(t(461),t(16)),p=Object(c.a)(a,(function(){var s=this,e=s._self._c;return e("div",{staticClass:"access"},s._l(s.links,(function(t){return e("a",{key:t,attrs:{href:t,target:"_blank"}},[e("img",s._b({},"img",s.getImageProps(t),!1))])})),0)}),[],!1,null,"54c781ee",null);e.default=p.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{357:function(s,e,t){},460:function(s,e,t){"use strict";t(357)},513:function(s,e,t){"use strict";t.r(e);const i={win7simu:["https://play.google.com/store/apps/details?id=com.visnalize.win7simu","https://win7simu.visnalize.com"],brick1100:["https://play.google.com/store/apps/details?id=com.visnalize.brick1100","https://apps.apple.com/us/app/brick-1100/id6554000754"]};var a={props:{app:{type:String,required:!0}},computed:{links(){return i[this.app]}},methods:{getImageProps(s){const e={height:100};return s.includes("google.com")?(e.alt="Play Store",e.src="/assets/access-google.svg"):s.includes("apple.com")?(e.alt="App Store",e.src="/assets/access-apple.svg"):(e.alt="Web App",e.src="/assets/access-web.svg"),e}}},c=(t(460),t(16)),p=Object(c.a)(a,(function(){var s=this,e=s._self._c;return e("div",{staticClass:"access"},s._l(s.links,(function(t){return e("a",{key:t,attrs:{href:t,target:"_blank"}},[e("img",s._b({},"img",s.getImageProps(t),!1))])})),0)}),[],!1,null,"54c781ee",null);e.default=p.exports}}]); \ No newline at end of file diff --git a/assets/js/4.c5692acc.js b/assets/js/4.fa4709e0.js similarity index 83% rename from assets/js/4.c5692acc.js rename to assets/js/4.fa4709e0.js index bd9d94ff..9258d3b3 100644 --- a/assets/js/4.c5692acc.js +++ b/assets/js/4.fa4709e0.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{427:function(t,a,s){t.exports=s.p+"assets/img/snake-intro.eb93ba77.png"},428:function(t,a,s){t.exports=s.p+"assets/img/snake-gameplay.17189f88.png"},429:function(t,a,s){t.exports=s.p+"assets/img/brick-intro.9af9d339.png"},430:function(t,a,s){t.exports=s.p+"assets/img/brick-gameplay.e2169365.png"},431:function(t,a,s){t.exports=s.p+"assets/img/dino-intro.0794c934.png"},432:function(t,a,s){t.exports=s.p+"assets/img/dino-gameplay.12ab28dc.png"},433:function(t,a,s){t.exports=s.p+"assets/img/monogram-intro.835a6b4b.png"},434:function(t,a,s){t.exports=s.p+"assets/img/monogram-gameplay.bcc4ca97.png"},555:function(t,a,s){"use strict";s.r(a);var e=s(16),r=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"brick-1100-games"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#brick-1100-games"}},[t._v("#")]),t._v(" Brick 1100 Games")]),t._v(" "),a("m-social-links"),t._v(" "),a("h2",{attrs:{id:"snake"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#snake"}},[t._v("#")]),t._v(" Snake")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(427),alt:"Snake intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(428),alt:"Snake gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Make the snake grow longer by directing it to the food. The longer the snake gets, the more points you score.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" - move clockwise\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" - move counter-clockwise\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"2"}}),t._v(" - move up\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"8"}}),t._v(" - move down\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"4"}}),t._v(" - move left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"6"}}),t._v(" - move right\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"brick-breaker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#brick-breaker"}},[t._v("#")]),t._v(" Brick Breaker")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(429),alt:"Brick breaker intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(430),alt:"Brick breaker gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Clear the screen by breaking all the bricks with the ball to advance to the next level.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" / "),a("a-key",{attrs:{s:"1"}}),t._v(" / "),a("a-key",{attrs:{s:"4"}}),t._v(" / "),a("a-key",{attrs:{s:"7"}}),t._v(" - move paddle left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" / "),a("a-key",{attrs:{s:"3"}}),t._v(" / "),a("a-key",{attrs:{s:"6"}}),t._v(" / "),a("a-key",{attrs:{s:"9"}}),t._v(" - move paddle right\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"chrome-dino"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chrome-dino"}},[t._v("#")]),t._v(" Chrome Dino")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(431),alt:"Chrome Dino intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(432),alt:"Chrome Dino gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Control the T-Rex to overcome obstacles. The longer you survive, the higher your score.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" / "),a("a-key",{attrs:{s:"2"}}),t._v(" - jump\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" / "),a("a-key",{attrs:{s:"8"}}),t._v(" - duck\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"monogram"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#monogram"}},[t._v("#")]),t._v(" Monogram")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(433),alt:"Monogram intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(434),alt:"Monogram gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Leave blank or fill the grid cells until a pixel image appears to advance to the next level.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"2"}}),t._v(" - move the cursor up\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"8"}}),t._v(" - move the cursor down\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"4"}}),t._v(" - move the cursor left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"6"}}),t._v(" - move the cursor right\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" - move the cursor to the previous cell\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" - move the cursor to the next cell\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"5"}}),t._v(" - toggle cell fill\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"aste"}}),t._v(" - toggle cell hints (shows the number of filled cells in the row/column)\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"0"}}),t._v(" - reset the grid\n")],1)])])],1)}),[],!1,null,null,null);a.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{426:function(t,a,s){t.exports=s.p+"assets/img/snake-intro.eb93ba77.png"},427:function(t,a,s){t.exports=s.p+"assets/img/snake-gameplay.17189f88.png"},428:function(t,a,s){t.exports=s.p+"assets/img/brick-intro.9af9d339.png"},429:function(t,a,s){t.exports=s.p+"assets/img/brick-gameplay.e2169365.png"},430:function(t,a,s){t.exports=s.p+"assets/img/dino-intro.0794c934.png"},431:function(t,a,s){t.exports=s.p+"assets/img/dino-gameplay.12ab28dc.png"},432:function(t,a,s){t.exports=s.p+"assets/img/monogram-intro.835a6b4b.png"},433:function(t,a,s){t.exports=s.p+"assets/img/monogram-gameplay.bcc4ca97.png"},554:function(t,a,s){"use strict";s.r(a);var e=s(16),r=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"brick-1100-games"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#brick-1100-games"}},[t._v("#")]),t._v(" Brick 1100 Games")]),t._v(" "),a("m-social-links"),t._v(" "),a("h2",{attrs:{id:"snake"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#snake"}},[t._v("#")]),t._v(" Snake")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(426),alt:"Snake intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(427),alt:"Snake gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Make the snake grow longer by directing it to the food. The longer the snake gets, the more points you score.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" - move clockwise\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" - move counter-clockwise\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"2"}}),t._v(" - move up\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"8"}}),t._v(" - move down\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"4"}}),t._v(" - move left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"6"}}),t._v(" - move right\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"brick-breaker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#brick-breaker"}},[t._v("#")]),t._v(" Brick Breaker")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(428),alt:"Brick breaker intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(429),alt:"Brick breaker gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Clear the screen by breaking all the bricks with the ball to advance to the next level.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" / "),a("a-key",{attrs:{s:"1"}}),t._v(" / "),a("a-key",{attrs:{s:"4"}}),t._v(" / "),a("a-key",{attrs:{s:"7"}}),t._v(" - move paddle left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" / "),a("a-key",{attrs:{s:"3"}}),t._v(" / "),a("a-key",{attrs:{s:"6"}}),t._v(" / "),a("a-key",{attrs:{s:"9"}}),t._v(" - move paddle right\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"chrome-dino"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chrome-dino"}},[t._v("#")]),t._v(" Chrome Dino")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(430),alt:"Chrome Dino intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(431),alt:"Chrome Dino gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Control the T-Rex to overcome obstacles. The longer you survive, the higher your score.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" / "),a("a-key",{attrs:{s:"2"}}),t._v(" - jump\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" / "),a("a-key",{attrs:{s:"8"}}),t._v(" - duck\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"monogram"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#monogram"}},[t._v("#")]),t._v(" Monogram")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(432),alt:"Monogram intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(433),alt:"Monogram gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Leave blank or fill the grid cells until a pixel image appears to advance to the next level.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"2"}}),t._v(" - move the cursor up\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"8"}}),t._v(" - move the cursor down\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"4"}}),t._v(" - move the cursor left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"6"}}),t._v(" - move the cursor right\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" - move the cursor to the previous cell\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" - move the cursor to the next cell\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"5"}}),t._v(" - toggle cell fill\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"aste"}}),t._v(" - toggle cell hints (shows the number of filled cells in the row/column)\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"0"}}),t._v(" - reset the grid\n")],1)])])],1)}),[],!1,null,null,null);a.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/40.052deee0.js b/assets/js/40.138be96c.js similarity index 78% rename from assets/js/40.052deee0.js rename to assets/js/40.138be96c.js index 1aa1730a..32edd266 100644 --- a/assets/js/40.052deee0.js +++ b/assets/js/40.138be96c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{359:function(t,a,e){},462:function(t,a,e){"use strict";e(359)},515:function(t,a,e){"use strict";e.r(a);var r={props:{blogs:Array},methods:{getImage(t){var a;return null===(a=t.frontmatter.meta.find(t=>"image"===t.itemprop))||void 0===a?void 0:a.content}}},s=(e(462),e(16)),n=Object(s.a)(r,(function(){var t=this,a=t._self._c;return a("ul",{staticClass:"blog-links"},t._l(t.blogs,(function(e){return a("li",{key:e.key},[a("router-link",{attrs:{to:e.path}},[a("span",{staticClass:"blog-image"},[a("img",{attrs:{src:t.getImage(e),alt:e.title}})]),t._v(" "),a("h2",[t._v(t._s(e.title))]),t._v(" "),a("a-created",{attrs:{date:e.firstCreated}}),t._v(" "),a("p",[t._v(t._s(e.frontmatter.description))])],1),t._v(" "),a("m-blog-tag-list",{attrs:{tags:e.frontmatter.tag}})],1)})),0)}),[],!1,null,"35f506a6",null);a.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{358:function(t,a,e){},461:function(t,a,e){"use strict";e(358)},514:function(t,a,e){"use strict";e.r(a);var r={props:{blogs:Array},methods:{getImage(t){var a;return null===(a=t.frontmatter.meta.find(t=>"image"===t.itemprop))||void 0===a?void 0:a.content}}},s=(e(461),e(16)),n=Object(s.a)(r,(function(){var t=this,a=t._self._c;return a("ul",{staticClass:"blog-links"},t._l(t.blogs,(function(e){return a("li",{key:e.key},[a("router-link",{attrs:{to:e.path}},[a("span",{staticClass:"blog-image"},[a("img",{attrs:{src:t.getImage(e),alt:e.title}})]),t._v(" "),a("h2",[t._v(t._s(e.title))]),t._v(" "),a("a-created",{attrs:{date:e.firstCreated}}),t._v(" "),a("p",[t._v(t._s(e.frontmatter.description))])],1),t._v(" "),a("m-blog-tag-list",{attrs:{tags:e.frontmatter.tag}})],1)})),0)}),[],!1,null,"35f506a6",null);a.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/41.2b25f8f8.js b/assets/js/41.2b25f8f8.js deleted file mode 100644 index 00714b31..00000000 --- a/assets/js/41.2b25f8f8.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{360:function(t,n,s){},463:function(t,n,s){"use strict";s(360)},516:function(t,n,s){"use strict";s.r(n);var i={},c=(s(463),s(16)),a=Object(c.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"blog-meta"},[t("a-created"),this._v(" "),t("m-social-links")],1)}),[],!1,null,"37d0b7b8",null);n.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/41.9d54aced.js b/assets/js/41.9d54aced.js new file mode 100644 index 00000000..a6be7c1f --- /dev/null +++ b/assets/js/41.9d54aced.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{359:function(t,n,s){},462:function(t,n,s){"use strict";s(359)},515:function(t,n,s){"use strict";s.r(n);var i={},c=(s(462),s(16)),a=Object(c.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"blog-meta"},[t("a-created"),this._v(" "),t("m-social-links")],1)}),[],!1,null,"37d0b7b8",null);n.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/42.a0ad79a3.js b/assets/js/42.0eaeecd2.js similarity index 58% rename from assets/js/42.a0ad79a3.js rename to assets/js/42.0eaeecd2.js index d458b4d4..99509e0b 100644 --- a/assets/js/42.a0ad79a3.js +++ b/assets/js/42.0eaeecd2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{362:function(n,t,r){},465:function(n,t,r){"use strict";r(362)},518:function(n,t,r){"use strict";r.r(t);var s={props:{current:String,tags:Array}},u=(r(465),r(16)),a=Object(u.a)(s,(function(){var n=this,t=n._self._c;return t("nav",n._l(n.tags,(function(r){return t("router-link",{key:r.path,attrs:{to:r.path}},[n._v("\n "+n._s(r.name)+"\n ")])})),1)}),[],!1,null,"7c5b105f",null);t.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{361:function(n,t,r){},464:function(n,t,r){"use strict";r(361)},517:function(n,t,r){"use strict";r.r(t);var s={props:{current:String,tags:Array}},u=(r(464),r(16)),a=Object(u.a)(s,(function(){var n=this,t=n._self._c;return t("nav",n._l(n.tags,(function(r){return t("router-link",{key:r.path,attrs:{to:r.path}},[n._v("\n "+n._s(r.name)+"\n ")])})),1)}),[],!1,null,"7c5b105f",null);t.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/43.9c6dd98d.js b/assets/js/43.6af75680.js similarity index 74% rename from assets/js/43.9c6dd98d.js rename to assets/js/43.6af75680.js index 3cf46029..84220572 100644 --- a/assets/js/43.9c6dd98d.js +++ b/assets/js/43.6af75680.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{363:function(t,e,s){},466:function(t,e,s){"use strict";s(363)},519:function(t,e,s){"use strict";s.r(e);var i={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},n=(s(466),s(16)),r=Object(n.a)(i,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"a37ba0d0",null);e.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{362:function(t,e,s){},465:function(t,e,s){"use strict";s(362)},518:function(t,e,s){"use strict";s.r(e);var i={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},n=(s(465),s(16)),r=Object(n.a)(i,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"a37ba0d0",null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/44.6953418b.js b/assets/js/44.0496e1b3.js similarity index 83% rename from assets/js/44.6953418b.js rename to assets/js/44.0496e1b3.js index f0464392..dc29d0e2 100644 --- a/assets/js/44.6953418b.js +++ b/assets/js/44.0496e1b3.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{364:function(e,t,r){},467:function(e,t,r){"use strict";r(364)},520:function(e,t,r){"use strict";r.r(t);r(61);var n={data:()=>({errors:[]}),methods:{send({target:e}){let{subject:t,content:r}=e;if(this.errors=[],!t.value)return this.errors.push("subject");if(!r.value)return this.errors.push("content");t=encodeURIComponent(t.value),r=encodeURIComponent(r.value);const n=document.createElement("a");n.href=`mailto:hey@visnalize.com?subject=${t}&body=${r}`,n.target="_blank",n.click(),this.errors=[]}}},s=(r(467),r(16)),o=Object(s.a)(n,(function(){var e=this,t=e._self._c;return t("form",{on:{submit:function(t){return t.preventDefault(),e.send.apply(null,arguments)}}},[t("div",[t("input",{class:{error:e.errors.includes("subject")},attrs:{type:"text",name:"subject",placeholder:"Subject",required:""}})]),e._v(" "),t("div",[t("textarea",{class:{error:e.errors.includes("content")},attrs:{name:"content",placeholder:"Content",required:""}})]),e._v(" "),t("div",[t("a-button",{attrs:{type:"submit"}},[e._v("Send")])],1)])}),[],!1,null,"43263439",null);t.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{363:function(e,t,r){},466:function(e,t,r){"use strict";r(363)},519:function(e,t,r){"use strict";r.r(t);r(61);var n={data:()=>({errors:[]}),methods:{send({target:e}){let{subject:t,content:r}=e;if(this.errors=[],!t.value)return this.errors.push("subject");if(!r.value)return this.errors.push("content");t=encodeURIComponent(t.value),r=encodeURIComponent(r.value);const n=document.createElement("a");n.href=`mailto:hey@visnalize.com?subject=${t}&body=${r}`,n.target="_blank",n.click(),this.errors=[]}}},s=(r(466),r(16)),o=Object(s.a)(n,(function(){var e=this,t=e._self._c;return t("form",{on:{submit:function(t){return t.preventDefault(),e.send.apply(null,arguments)}}},[t("div",[t("input",{class:{error:e.errors.includes("subject")},attrs:{type:"text",name:"subject",placeholder:"Subject",required:""}})]),e._v(" "),t("div",[t("textarea",{class:{error:e.errors.includes("content")},attrs:{name:"content",placeholder:"Content",required:""}})]),e._v(" "),t("div",[t("a-button",{attrs:{type:"submit"}},[e._v("Send")])],1)])}),[],!1,null,"43263439",null);t.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/45.0919b025.js b/assets/js/45.524a38f0.js similarity index 72% rename from assets/js/45.0919b025.js rename to assets/js/45.524a38f0.js index b8ec8d4b..488b7522 100644 --- a/assets/js/45.0919b025.js +++ b/assets/js/45.524a38f0.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{367:function(t,e,r){},471:function(t,e,r){"use strict";r(367)},522:function(t,e,r){"use strict";r.r(e);var i={computed:{features:()=>[{title:"Learn & Play",text:"A simple code playground for you to learn CSS"},{title:"Publish & Share",text:"Take pride in your creativity and share with others"},{title:"Admire & Enjoy",text:"Enjoy the creative crafts made by others"}]}},n=(r(471),r(16)),o=Object(n.a)(i,(function(){var t=this,e=t._self._c;return e("ul",t._l(t.features,(function(r){return e("li",{key:r.title},[e("h2",[t._v(t._s(r.title))]),t._v(" "),e("p",[t._v(t._s(r.text))])])})),0)}),[],!1,null,"59795e29",null);e.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{364:function(t,e,r){},467:function(t,e,r){"use strict";r(364)},520:function(t,e,r){"use strict";r.r(e);var i={computed:{features:()=>[{title:"Learn & Play",text:"A simple code playground for you to learn CSS"},{title:"Publish & Share",text:"Take pride in your creativity and share with others"},{title:"Admire & Enjoy",text:"Enjoy the creative crafts made by others"}]}},n=(r(467),r(16)),o=Object(n.a)(i,(function(){var t=this,e=t._self._c;return e("ul",t._l(t.features,(function(r){return e("li",{key:r.title},[e("h2",[t._v(t._s(r.title))]),t._v(" "),e("p",[t._v(t._s(r.text))])])})),0)}),[],!1,null,"59795e29",null);e.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/46.07e3486f.js b/assets/js/46.4d9b4fb1.js similarity index 61% rename from assets/js/46.07e3486f.js rename to assets/js/46.4d9b4fb1.js index 50164d39..376c648e 100644 --- a/assets/js/46.07e3486f.js +++ b/assets/js/46.4d9b4fb1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{368:function(t,n,e){},472:function(t,n,e){"use strict";e(368)},523:function(t,n,e){"use strict";e.r(n);var i={props:{hideCommentCount:Boolean,hideShareLinks:Boolean}},s=(e(472),e(16)),o=Object(s.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"social"},[this.hideCommentCount?this._e():t("a-comment-count"),this._v(" "),this.hideShareLinks?this._e():t("social-share")],1)}),[],!1,null,"4bc0a2be",null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{367:function(t,n,e){},471:function(t,n,e){"use strict";e(367)},522:function(t,n,e){"use strict";e.r(n);var i={props:{hideCommentCount:Boolean,hideShareLinks:Boolean}},s=(e(471),e(16)),o=Object(s.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"social"},[this.hideCommentCount?this._e():t("a-comment-count"),this._v(" "),this.hideShareLinks?this._e():t("social-share")],1)}),[],!1,null,"4bc0a2be",null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/47.bdfb9a15.js b/assets/js/47.831eee50.js similarity index 61% rename from assets/js/47.bdfb9a15.js rename to assets/js/47.831eee50.js index 2832b25f..66e2f11f 100644 --- a/assets/js/47.bdfb9a15.js +++ b/assets/js/47.831eee50.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{315:function(n,o,t){},317:function(n,o,t){"use strict";t(315)},319:function(n,o,t){"use strict";t.r(o);var e={components:{ParentLayout:t(318).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(t(317),t(16)),a=Object(s.a)(e,(function(){var n=this,o=n._self._c;return o("parent-layout",{scopedSlots:n._u([n.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[o("a-sponsor-ad")]},proxy:!0},n.noComments?null:{key:"page-bottom",fn:function(){return[o("div",{staticClass:"ad-wrapper"},[o("a-google-ad")],1),n._v(" "),o("m-comments")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);o.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{314:function(n,o,t){},316:function(n,o,t){"use strict";t(314)},318:function(n,o,t){"use strict";t.r(o);var e={components:{ParentLayout:t(317).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(t(316),t(16)),a=Object(s.a)(e,(function(){var n=this,o=n._self._c;return o("parent-layout",{scopedSlots:n._u([n.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[o("a-sponsor-ad")]},proxy:!0},n.noComments?null:{key:"page-bottom",fn:function(){return[o("div",{staticClass:"ad-wrapper"},[o("a-google-ad")],1),n._v(" "),o("m-comments")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);o.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/48.8ae2004e.js b/assets/js/48.ce5a8fa4.js similarity index 97% rename from assets/js/48.8ae2004e.js rename to assets/js/48.ce5a8fa4.js index e58e41e5..801a870a 100644 --- a/assets/js/48.8ae2004e.js +++ b/assets/js/48.ce5a8fa4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{409:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},410:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},538:function(e,t,a){"use strict";a.r(t);var o=a(16),i=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"turning-my-side-project-into-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#turning-my-side-project-into-a-side-hustle"}},[e._v("#")]),e._v(" Turning my side project into a side hustle")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ=",alt:"Side hustle cash"}})]),e._v(" "),t("p",[e._v("Today is November 11, 2023, it has been a year since I wrote my previous blog post "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("sharing how I built Win7 Simu")]),e._v(" to celebrate a milestone of 5M Google Play downloads. We are now at "),t("strong",[e._v("10M downloads")]),e._v(" and again, to celebrate this milestone, I decided to sit down and write another blog post to share about how this "),t("s",[e._v("silly")]),e._v(" side project has turned into a side hustle and has been generating a decent amount of recurring revenue for me since. Yes, we are talking about "),t("em",[e._v("money")]),e._v(" here, a sensitive topic, but somehow I feel that it may be interesting, with some of the learnings that I have had along the way may be useful to you. However, bear in mind that what you are about to read is "),t("strong",[e._v("subjective")]),e._v(" and based on my own experience, so you are welcome to read with a grain of salt.")],1),e._v(" "),t("h2",{attrs:{id:"the-beginning"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-beginning"}},[e._v("#")]),e._v(" The beginning")]),e._v(" "),t("h3",{attrs:{id:"the-idea-that-started-it-all"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-idea-that-started-it-all"}},[e._v("#")]),e._v(" The idea that started it all")]),e._v(" "),t("p",[e._v("I highly recommend reading "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("my previous post")]),e._v(" first if you haven't to get to know more about this silly project and how it started, but if you don't want to, here is a brief summary:")],1),e._v(" "),t("p",[e._v("I had an idea of cloning Windows 7 UI to the web way back in mid-2019, to learn about front-end development. It was merely a code playground for me to learn and experiment and was rewritten a couple of times. The last rewrite attempt was in early 2020 using certain "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[e._v("popular web techs")]),e._v(" at that time, and I decided to publish it to Google Play as an Android app. It somehow got popular and has received a lot of downloads and positive feedback. Since then, I have been pushing it further by rolling out new features and updates regularly.")],1),e._v(" "),t("p",[e._v("Till now, the app has had a total of "),t("strong",[e._v("10M downloads")]),e._v(" and approximately "),t("strong",[e._v("50K daily active users")]),e._v(", which can be easily considered a success for a side project. But do you know what makes it appear even more successful to me? It's the fact that it also generates some recurring revenue, monthly, stably, and kind of passively.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(409),alt:"Win7 Simu's daily active users stats"}})]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"building-the-surroundings"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#building-the-surroundings"}},[e._v("#")]),e._v(" Building the surroundings")]),e._v(" "),t("p",[e._v("After recognizing its potential, I decided to invest more time and effort into the project. With Win7 Simu at the center, I started to build the surroundings, things that I believe would help me grow this project into a brand and eventually turn it into a side hustle. Below are a couple of things that I have done so far.")]),e._v(" "),t("p",[t("strong",[e._v("Homepage + Blog")]),e._v(" ("),t("em",[t("strong",[e._v("visnalize.com")])]),e._v(") - this idea came to me as Google Play required me to provide a privacy policy URL for the app when I tried publishing it to their store. I decided to build a simple homepage for it with little to no content at the beginning, but it has been growing since then, from an average of barely 300 to more than 1000 daily active users. The homepage is now the place where I share more about my projects, the stories behind and some of the learnings I have had along the way.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(410),alt:"Homepage daily active users stats"}})]),e._v(" "),t("p",[t("em",[e._v("Homepage daily active users growth over time")])]),e._v(" "),t("p",[t("a",{attrs:{href:"https://www.youtube.com/@visnalize",target:"_blank",rel:"noopener noreferrer"}},[t("strong",[e._v("YouTube channel")]),t("OutboundLink")],1),e._v(" - this idea, again, came to me only as Google Play required me to provide a YouTube trailer video for the app. Although I have had this channel for a while, I didn't really use it until then. After the trailer video for Win7 Simu, I started to upload more videos, still mostly revolving around the app, but also some other kinds of content that I think would be interesting to the viewers, but none of them has been seen as successful as the Win7 Simu-related ones. Since the beginning, the channel has been growing steadily, currently with more than 7200 subscribers and 100K+ monthly views. If you are interested, here is a video sharing more in-depth about the channel's growth:")]),e._v(" "),t("p"),t("div",{staticClass:"embed-responsive embed-responsive-16by9"},[t("iframe",{staticClass:"embed-responsive-item youtube-player",attrs:{type:"text/html",width:"640",height:"390",src:"https://www.youtube.com/embed/s6LfrKvq8n4",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p"),e._v(" "),t("p",[t("strong",[e._v("Social networks")]),e._v(" ("),t("a",{attrs:{href:"https://github.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://twitter.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Twitter"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://www.facebook.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Facebook"),t("OutboundLink")],1),e._v(") - at some point after growing the homepage and the YouTube channel to a certain extent, I decided to expand to other social networks to gain more exposure and reach more people. Although the growth has been slow and the results are gloomy looking, I believe it is still worth the effort as it is not too time-consuming and the potential is still there.")]),e._v(" "),t("h2",{attrs:{id:"a-diverse-revenue-model"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-diverse-revenue-model"}},[e._v("#")]),e._v(" A diverse revenue model")]),e._v(" "),t("p",[e._v("Let's get to the main topic of this post, the revenue model. I have been trying out different ways to monetize the project, and here are some of them.")]),e._v(" "),t("h3",{attrs:{id:"ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ads"}},[e._v("#")]),e._v(" Ads")]),e._v(" "),t("blockquote",[t("p",[t("em",[e._v("Recommended read: "),t("RouterLink",{attrs:{to:"/blog/about-the-ads.html"}},[e._v("About the ads and how I implement them")])],1)])]),e._v(" "),t("p",[e._v("Due to the nature of the project, I thought that ads would be the most suitable way to monetize it. For the app version of Win7 Simu, I started out with "),t("strong",[e._v("Google Admob")]),e._v(", which appears to be the most popular ad network for mobile apps, however, due to certain issues with the network, I switched to "),t("strong",[e._v("Applovin")]),e._v(", which has been working well so far. For its web version, I have been using "),t("strong",[e._v("Google Adsense")]),e._v(" and it has been working well so far. Although at the beginning, I also had some problems setting it up due to the fact that Adsense is not designed and supported for web apps, but I managed to find a way around it by getting this homepage approved first, then I can serve ads on the web app as well, thanks to it being hosted on a subdomain of this homepage.")]),e._v(" "),t("p",[e._v("Some time later, I tried out the mediation feature of Applovin, which allows me to serve ads from whichever ad network that offers the highest eCPM (effective cost per mille) rate. Since using mediation, I have been seeing a significant boost in revenue by partnering with several external ad networks such as "),t("strong",[e._v("VDO.AI")]),e._v(", "),t("strong",[e._v("Appbroda")]),e._v(", and even "),t("strong",[e._v("Admob")]),e._v(", which I was unable to use their service as the primary platform. And until now, ads have been the main source of revenue for this project.")]),e._v(" "),t("p",[e._v("Aside from the mobile and web versions of Win7 Simu, I have also been serving ads on the homepage and turning on monetization for the YouTube channel. Although the revenue from these sources is not much, it is still a great addition to the overall revenue.")]),e._v(" "),t("h3",{attrs:{id:"subscriptions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#subscriptions"}},[e._v("#")]),e._v(" Subscriptions")]),e._v(" "),t("p",[e._v("After seeing the positive revenue outputs from ads, and having received much feedback from users, I added a subscription feature to Win7 Simu's app version using "),t("strong",[e._v("Google Play Billing")]),e._v(" to allow users to experience the app without interruption by removing ads. The subscription is simple, having only 2 options available: monthly and yearly, with affordable prices. I honestly never expected it to be well-received, but it turned out to be working well, with a decent amount of subscribers and recurring revenue so far.")]),e._v(" "),t("p",[e._v("Likewise, I also added a subscription feature to the web version of Win7 Simu via "),t("strong",[e._v("Patreon")]),e._v(", which is a popular platform for creators to get paid by their fans/users. Despite the outlook not looking as positive as the app version, I still learned something there, and the experience can be useful for future projects.")]),e._v(" "),t("h3",{attrs:{id:"partnerships"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#partnerships"}},[e._v("#")]),e._v(" Partnerships")]),e._v(" "),t("p",[e._v("The last revenue source that I have had my hands on is new and unique in its own way (or rather unpopular in my opinion). It is a partnership with "),t("strong",[e._v("Gamezop")]),e._v(', a gaming platform that any websites/web apps can integrate to bring casual games for their users. The so-called "integration" is rather simple in my case, all I needed to do was just add a banner/icon in my app that leads to the Gamezop platform where my users can play a wide range of casual games. Half of the ad revenue generated from the platform would then be shared with me. The shared revenue is nowhere near the amount that I get from the main revenue source, but it still has been decently and consistently contributing to the overall revenue.')]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"disclosing-the-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disclosing-the-numbers"}},[e._v("#")]),e._v(" Disclosing the numbers")]),e._v(" "),t("p",[e._v('"I don\'t give a sh*t about your story, just show me the numbers" - if that is what you are thinking, then I will cut to the chase and show you the numbers. Below is a list of the MRR (monthly recurring revenue) breakdown for all of the revenue sources that I have mentioned above from the latest month (October 2023).')]),e._v(" "),t("ul",[t("li",[e._v("Ads:\n"),t("ul",[t("li",[e._v("Applovin: "),t("strong",[e._v("~400$")])]),e._v(" "),t("li",[e._v("Admob: "),t("strong",[e._v("~300$")])]),e._v(" "),t("li",[e._v("VDO: "),t("strong",[e._v("~60$")])]),e._v(" "),t("li",[e._v("Appbroda: "),t("strong",[e._v("~40$")])]),e._v(" "),t("li",[e._v("Adsense: "),t("strong",[e._v("~300$")])])])]),e._v(" "),t("li",[e._v("Subscriptions:\n"),t("ul",[t("li",[e._v("In-app purchase: "),t("strong",[e._v("~200$")])]),e._v(" "),t("li",[e._v("Patreon: "),t("strong",[e._v("1.67$")])])])]),e._v(" "),t("li",[e._v("Partnership (Gamezop): "),t("strong",[e._v("~20$")])])]),e._v(" "),t("p",[e._v("In total, after subtracting all the costs and expenses, the MRR is around "),t("strong",[e._v("1000$")]),e._v(".")]),e._v(" "),t("h2",{attrs:{id:"final-thoughts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#final-thoughts"}},[e._v("#")]),e._v(" Final thoughts")]),e._v(" "),t("p",[e._v("So how do you feel about that number? Is it a lot? Is it just a little? The answer likely depends on from which part of the world you are looking at it, but for me, it is a lot, especially for something that I started out as a side project for learning. With that said, it is still unlikely that I will receive this exact amount every month, there might be ups and downs, there might be happy days when I receive more, and there might be a chance I lose it all like waking up from a sweet dream, but I am still happy with what I have achieved so far.")]),e._v(" "),t("p",[e._v("A few key takeaways that you may find useful from my story:")]),e._v(" "),t("ul",[t("li",[e._v("I was lucky to be able to turn my learning process into a side project, and eventually a side hustle.")]),e._v(" "),t("li",[e._v("I diversified the revenue sources to minimize the risk of losing it all and to maximize the potential of earning more.")]),e._v(" "),t("li",[e._v("I kept grinding and pushing it further, even when I didn't feel like it, and it paid off.")]),e._v(" "),t("li",[e._v("I was, I am, and I will still learning, and applying what I learned to make good use of every opportunity.")])]),e._v(" "),t("p",[e._v("And as I said at the beginning of this post, this is a very subjective story, what worked out for me may not work out for you, and even this little success might not repeat itself for my other projects. But I hope through this post, you have learned something new and useful, and I wish you all the best with your projects.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{404:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},405:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},535:function(e,t,a){"use strict";a.r(t);var o=a(16),i=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"turning-my-side-project-into-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#turning-my-side-project-into-a-side-hustle"}},[e._v("#")]),e._v(" Turning my side project into a side hustle")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ=",alt:"Side hustle cash"}})]),e._v(" "),t("p",[e._v("Today is November 11, 2023, it has been a year since I wrote my previous blog post "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("sharing how I built Win7 Simu")]),e._v(" to celebrate a milestone of 5M Google Play downloads. We are now at "),t("strong",[e._v("10M downloads")]),e._v(" and again, to celebrate this milestone, I decided to sit down and write another blog post to share about how this "),t("s",[e._v("silly")]),e._v(" side project has turned into a side hustle and has been generating a decent amount of recurring revenue for me since. Yes, we are talking about "),t("em",[e._v("money")]),e._v(" here, a sensitive topic, but somehow I feel that it may be interesting, with some of the learnings that I have had along the way may be useful to you. However, bear in mind that what you are about to read is "),t("strong",[e._v("subjective")]),e._v(" and based on my own experience, so you are welcome to read with a grain of salt.")],1),e._v(" "),t("h2",{attrs:{id:"the-beginning"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-beginning"}},[e._v("#")]),e._v(" The beginning")]),e._v(" "),t("h3",{attrs:{id:"the-idea-that-started-it-all"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-idea-that-started-it-all"}},[e._v("#")]),e._v(" The idea that started it all")]),e._v(" "),t("p",[e._v("I highly recommend reading "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("my previous post")]),e._v(" first if you haven't to get to know more about this silly project and how it started, but if you don't want to, here is a brief summary:")],1),e._v(" "),t("p",[e._v("I had an idea of cloning Windows 7 UI to the web way back in mid-2019, to learn about front-end development. It was merely a code playground for me to learn and experiment and was rewritten a couple of times. The last rewrite attempt was in early 2020 using certain "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[e._v("popular web techs")]),e._v(" at that time, and I decided to publish it to Google Play as an Android app. It somehow got popular and has received a lot of downloads and positive feedback. Since then, I have been pushing it further by rolling out new features and updates regularly.")],1),e._v(" "),t("p",[e._v("Till now, the app has had a total of "),t("strong",[e._v("10M downloads")]),e._v(" and approximately "),t("strong",[e._v("50K daily active users")]),e._v(", which can be easily considered a success for a side project. But do you know what makes it appear even more successful to me? It's the fact that it also generates some recurring revenue, monthly, stably, and kind of passively.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(404),alt:"Win7 Simu's daily active users stats"}})]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"building-the-surroundings"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#building-the-surroundings"}},[e._v("#")]),e._v(" Building the surroundings")]),e._v(" "),t("p",[e._v("After recognizing its potential, I decided to invest more time and effort into the project. With Win7 Simu at the center, I started to build the surroundings, things that I believe would help me grow this project into a brand and eventually turn it into a side hustle. Below are a couple of things that I have done so far.")]),e._v(" "),t("p",[t("strong",[e._v("Homepage + Blog")]),e._v(" ("),t("em",[t("strong",[e._v("visnalize.com")])]),e._v(") - this idea came to me as Google Play required me to provide a privacy policy URL for the app when I tried publishing it to their store. I decided to build a simple homepage for it with little to no content at the beginning, but it has been growing since then, from an average of barely 300 to more than 1000 daily active users. The homepage is now the place where I share more about my projects, the stories behind and some of the learnings I have had along the way.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(405),alt:"Homepage daily active users stats"}})]),e._v(" "),t("p",[t("em",[e._v("Homepage daily active users growth over time")])]),e._v(" "),t("p",[t("a",{attrs:{href:"https://www.youtube.com/@visnalize",target:"_blank",rel:"noopener noreferrer"}},[t("strong",[e._v("YouTube channel")]),t("OutboundLink")],1),e._v(" - this idea, again, came to me only as Google Play required me to provide a YouTube trailer video for the app. Although I have had this channel for a while, I didn't really use it until then. After the trailer video for Win7 Simu, I started to upload more videos, still mostly revolving around the app, but also some other kinds of content that I think would be interesting to the viewers, but none of them has been seen as successful as the Win7 Simu-related ones. Since the beginning, the channel has been growing steadily, currently with more than 7200 subscribers and 100K+ monthly views. If you are interested, here is a video sharing more in-depth about the channel's growth:")]),e._v(" "),t("p"),t("div",{staticClass:"embed-responsive embed-responsive-16by9"},[t("iframe",{staticClass:"embed-responsive-item youtube-player",attrs:{type:"text/html",width:"640",height:"390",src:"https://www.youtube.com/embed/s6LfrKvq8n4",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p"),e._v(" "),t("p",[t("strong",[e._v("Social networks")]),e._v(" ("),t("a",{attrs:{href:"https://github.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://twitter.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Twitter"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://www.facebook.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Facebook"),t("OutboundLink")],1),e._v(") - at some point after growing the homepage and the YouTube channel to a certain extent, I decided to expand to other social networks to gain more exposure and reach more people. Although the growth has been slow and the results are gloomy looking, I believe it is still worth the effort as it is not too time-consuming and the potential is still there.")]),e._v(" "),t("h2",{attrs:{id:"a-diverse-revenue-model"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-diverse-revenue-model"}},[e._v("#")]),e._v(" A diverse revenue model")]),e._v(" "),t("p",[e._v("Let's get to the main topic of this post, the revenue model. I have been trying out different ways to monetize the project, and here are some of them.")]),e._v(" "),t("h3",{attrs:{id:"ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ads"}},[e._v("#")]),e._v(" Ads")]),e._v(" "),t("blockquote",[t("p",[t("em",[e._v("Recommended read: "),t("RouterLink",{attrs:{to:"/blog/about-the-ads.html"}},[e._v("About the ads and how I implement them")])],1)])]),e._v(" "),t("p",[e._v("Due to the nature of the project, I thought that ads would be the most suitable way to monetize it. For the app version of Win7 Simu, I started out with "),t("strong",[e._v("Google Admob")]),e._v(", which appears to be the most popular ad network for mobile apps, however, due to certain issues with the network, I switched to "),t("strong",[e._v("Applovin")]),e._v(", which has been working well so far. For its web version, I have been using "),t("strong",[e._v("Google Adsense")]),e._v(" and it has been working well so far. Although at the beginning, I also had some problems setting it up due to the fact that Adsense is not designed and supported for web apps, but I managed to find a way around it by getting this homepage approved first, then I can serve ads on the web app as well, thanks to it being hosted on a subdomain of this homepage.")]),e._v(" "),t("p",[e._v("Some time later, I tried out the mediation feature of Applovin, which allows me to serve ads from whichever ad network that offers the highest eCPM (effective cost per mille) rate. Since using mediation, I have been seeing a significant boost in revenue by partnering with several external ad networks such as "),t("strong",[e._v("VDO.AI")]),e._v(", "),t("strong",[e._v("Appbroda")]),e._v(", and even "),t("strong",[e._v("Admob")]),e._v(", which I was unable to use their service as the primary platform. And until now, ads have been the main source of revenue for this project.")]),e._v(" "),t("p",[e._v("Aside from the mobile and web versions of Win7 Simu, I have also been serving ads on the homepage and turning on monetization for the YouTube channel. Although the revenue from these sources is not much, it is still a great addition to the overall revenue.")]),e._v(" "),t("h3",{attrs:{id:"subscriptions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#subscriptions"}},[e._v("#")]),e._v(" Subscriptions")]),e._v(" "),t("p",[e._v("After seeing the positive revenue outputs from ads, and having received much feedback from users, I added a subscription feature to Win7 Simu's app version using "),t("strong",[e._v("Google Play Billing")]),e._v(" to allow users to experience the app without interruption by removing ads. The subscription is simple, having only 2 options available: monthly and yearly, with affordable prices. I honestly never expected it to be well-received, but it turned out to be working well, with a decent amount of subscribers and recurring revenue so far.")]),e._v(" "),t("p",[e._v("Likewise, I also added a subscription feature to the web version of Win7 Simu via "),t("strong",[e._v("Patreon")]),e._v(", which is a popular platform for creators to get paid by their fans/users. Despite the outlook not looking as positive as the app version, I still learned something there, and the experience can be useful for future projects.")]),e._v(" "),t("h3",{attrs:{id:"partnerships"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#partnerships"}},[e._v("#")]),e._v(" Partnerships")]),e._v(" "),t("p",[e._v("The last revenue source that I have had my hands on is new and unique in its own way (or rather unpopular in my opinion). It is a partnership with "),t("strong",[e._v("Gamezop")]),e._v(', a gaming platform that any websites/web apps can integrate to bring casual games for their users. The so-called "integration" is rather simple in my case, all I needed to do was just add a banner/icon in my app that leads to the Gamezop platform where my users can play a wide range of casual games. Half of the ad revenue generated from the platform would then be shared with me. The shared revenue is nowhere near the amount that I get from the main revenue source, but it still has been decently and consistently contributing to the overall revenue.')]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"disclosing-the-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disclosing-the-numbers"}},[e._v("#")]),e._v(" Disclosing the numbers")]),e._v(" "),t("p",[e._v('"I don\'t give a sh*t about your story, just show me the numbers" - if that is what you are thinking, then I will cut to the chase and show you the numbers. Below is a list of the MRR (monthly recurring revenue) breakdown for all of the revenue sources that I have mentioned above from the latest month (October 2023).')]),e._v(" "),t("ul",[t("li",[e._v("Ads:\n"),t("ul",[t("li",[e._v("Applovin: "),t("strong",[e._v("~400$")])]),e._v(" "),t("li",[e._v("Admob: "),t("strong",[e._v("~300$")])]),e._v(" "),t("li",[e._v("VDO: "),t("strong",[e._v("~60$")])]),e._v(" "),t("li",[e._v("Appbroda: "),t("strong",[e._v("~40$")])]),e._v(" "),t("li",[e._v("Adsense: "),t("strong",[e._v("~300$")])])])]),e._v(" "),t("li",[e._v("Subscriptions:\n"),t("ul",[t("li",[e._v("In-app purchase: "),t("strong",[e._v("~200$")])]),e._v(" "),t("li",[e._v("Patreon: "),t("strong",[e._v("1.67$")])])])]),e._v(" "),t("li",[e._v("Partnership (Gamezop): "),t("strong",[e._v("~20$")])])]),e._v(" "),t("p",[e._v("In total, after subtracting all the costs and expenses, the MRR is around "),t("strong",[e._v("1000$")]),e._v(".")]),e._v(" "),t("h2",{attrs:{id:"final-thoughts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#final-thoughts"}},[e._v("#")]),e._v(" Final thoughts")]),e._v(" "),t("p",[e._v("So how do you feel about that number? Is it a lot? Is it just a little? The answer likely depends on from which part of the world you are looking at it, but for me, it is a lot, especially for something that I started out as a side project for learning. With that said, it is still unlikely that I will receive this exact amount every month, there might be ups and downs, there might be happy days when I receive more, and there might be a chance I lose it all like waking up from a sweet dream, but I am still happy with what I have achieved so far.")]),e._v(" "),t("p",[e._v("A few key takeaways that you may find useful from my story:")]),e._v(" "),t("ul",[t("li",[e._v("I was lucky to be able to turn my learning process into a side project, and eventually a side hustle.")]),e._v(" "),t("li",[e._v("I diversified the revenue sources to minimize the risk of losing it all and to maximize the potential of earning more.")]),e._v(" "),t("li",[e._v("I kept grinding and pushing it further, even when I didn't feel like it, and it paid off.")]),e._v(" "),t("li",[e._v("I was, I am, and I will still learning, and applying what I learned to make good use of every opportunity.")])]),e._v(" "),t("p",[e._v("And as I said at the beginning of this post, this is a very subjective story, what worked out for me may not work out for you, and even this little success might not repeat itself for my other projects. But I hope through this post, you have learned something new and useful, and I wish you all the best with your projects.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/49.9bcf5a8a.js b/assets/js/49.cab4177b.js similarity index 96% rename from assets/js/49.9bcf5a8a.js rename to assets/js/49.cab4177b.js index 37cc3fc0..b107b7ab 100644 --- a/assets/js/49.9bcf5a8a.js +++ b/assets/js/49.cab4177b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{420:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},421:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},546:function(e,t,o){"use strict";o.r(t);var i=o(16),a=Object(i.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"implementing-file-explorer-in-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-file-explorer-in-win7-simu"}},[e._v("#")]),e._v(" Implementing File Explorer in Win7 Simu")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80",alt:"Files and folders"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Viktor Talashuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/05HLFQu8bFw",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[t("strong",[e._v("File Explorer")]),e._v(" has always been one of the vital features in any operating system, as a Windows simulator, to no surprise that it's also among the most demanded features to be added in Win7 Simu. However, I have been procrastinating its implementation as, besides my skillset limitations, there are quite a lot of complexities and technical constraints involved. Now that I have finally been able to implement it properly, let's read through some technical decisions I made and how it deviates from the actual File Explorer of Windows.")]),e._v(" "),t("h2",{attrs:{id:"some-difficulties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-difficulties"}},[e._v("#")]),e._v(" Some difficulties")]),e._v(" "),t("ul",[t("li",[t("em",[e._v("Self-skillset limitation")]),e._v(" - as this simulator has been a work of a one-man development team, sometimes it is tough when you get stuck and there is nobody to support, or at least just to talk it out")]),e._v(" "),t("li",[t("em",[e._v("Work-life balance disruption")]),e._v(" - as I have a family and a 9-to-5 job, trying to find a time slot in between for hobbyist projects is tough")]),e._v(" "),t("li",[t("em",[e._v("Disheartening moments")]),e._v(" - having to spend a long long time working on something out of your capability, and stay committed to it is also tough")]),e._v(" "),t("li",[t("em",[e._v("Too many unknowns")]),e._v(" - libraries, frameworks, techs, platforms, devices, or even just the languages you are not in control may slow you down, kill your time and still you couldn't figure out how to resolve the issue.")])]),e._v(" "),t("p",[e._v("Yes, those are, but not all the difficulties I have been dealing with when developing the File Explorer functionalities, or in general, this simulator. Just a little bit of a sharing before we get into the technical stuff, so you may know that there is no shortcut to achievements.")]),e._v(" "),t("p",[e._v("Despite only a few capabilities being rolled out for the File Explorer in "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html#_3-0-0-may-20-2023"}},[e._v("v3.0.0")]),e._v(", it actually took me months to come up, put the stuff together, and do thorough testing before releasing to you. It was not easy, at all, with several late nights and weekends burned onto it, having to face constant challenges and struggling to break through my own limits. However, the hard work finally paid off, it has come to fruition 😌")],1),e._v(" "),t("h2",{attrs:{id:"implementing-the-file-explorer-functionalities"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-the-file-explorer-functionalities"}},[e._v("#")]),e._v(" Implementing the File Explorer functionalities")]),e._v(" "),t("p",[t("img",{attrs:{src:o(420),alt:"Win7 Simu File Explorer"}})]),e._v(" "),t("p",[e._v("In v3.0.0, the minimum viable version of File Explorer supports basic operations on files and folders such as creating, opening, editing, renaming, moving, copying, and pasting. And an integral part of this is the trash/delete mechanism which is also supported. As the simulator has to support both Web and Android platforms, there are some challenges to solve for each, and the implementation approach also differs. I will break down some key notes for each.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"implementation-for-android"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementation-for-android"}},[e._v("#")]),e._v(" Implementation for Android")]),e._v(" "),t("p",[e._v("With Android already having its own file management system to help organize and manage data from memory cards, I only needed to leverage this capability and hook up to Win7 Simu. However, as easy as it may sound, for someone who has very little knowledge of any programming languages other than JavaScript, it was time-consuming to be able to write a simple piece of code that just works without many issues.")]),e._v(" "),t("p",[e._v("Anyway, the key thing I'm trying to get across here is that, as an operating system, Android has its own way of organizing files and folders, where there is no concept of disk drives or the like as in Windows. And to make it worse, even the different Android versions have a slight difference to handle this among themselves 🤦‍♂️ Therefore, to mimic the disk-drive-driven structure, I needed to build a tree hierarchy from the app directory (a user-friendly path is something like: "),t("code",[e._v("Android/data/win7simu.visnalize.com/files")]),e._v("), which does not require any permission to perform read/write operations on, in case you are doubtful to grant this app access to your data. To put it simply, the app directory acts as the File Explorer system root, with the path hierarchy as follows:")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("Android/data/win7simu.visnalize.com/files\n└── computer/\n └── drive0/\n ├── Program Files/\n ├── Users/\n │ ├── Guest\n │ │ ├── AppData\n │ │ │ └── Roaming\n │ │ │ └── Visnalize\n │ │ │ └── Windows\n │ │ │ └── RecycleBin\n │ │ ├── Downloads\n │ │ ├── Music\n │ │ └── Videos\n │ └── \n │ ├── AppData\n │ ├── Desktop\n │ └── ...\n └── Windows/\n")])])]),t("p",[e._v("Moreover, there is a separate Android drive where you can access all the data available from the root of the memory card. However, due to the strict permission policies, an app is only allowed a certain level of access to the data outside of that app's directory, especially on later Android versions, so please do not expect the Win7 Simu's File Explorer to be as robust as the system default one. Ultimately, its sole purpose is not to be a complete functional emulator, but just to experience, to explore certain limited simulated features of Windows 7.")]),e._v(" "),t("h3",{attrs:{id:"implementation-for-web"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementation-for-web"}},[e._v("#")]),e._v(" Implementation for Web")]),e._v(" "),t("p",[e._v("For the Web, the approach was literally built from the ground up, with the IndexedDB API utilized as the source for storing the item paths and organizing them into a hierarchical tree. "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API",target:"_blank",rel:"noopener noreferrer"}},[e._v("IndexedDB"),t("OutboundLink")],1),e._v(" is a powerful solution that allows storing large amounts of data with high-performance search capability based on indexed keys. If you're a curious person with some coding experience, you may check out the web version of Win7 Simu from the dev tools and you may see something like this:")]),e._v(" "),t("p",[t("img",{attrs:{src:o(421),alt:"Win7 Simu File Explorer structure in IndexedDB"}})]),e._v(" "),t("p",[e._v("That is how the File Explorer is structured under the hood from the IndexedDB view. Each file/folder's path corresponds to an index key, with the value containing the metadata and content of that item. For every operation performed against this structure, such as creating, modifying or deleting an item... a corresponding path or key reacts to it. The whole structure is then processed and displayed accordingly on the File Explorer interface.")]),e._v(" "),t("p",[e._v("And of course, be cautious not to mess with it, otherwise, you will lose all your data (hopefully not so important, but I guess who would put important stuff in a simulator, right?).")]),e._v(" "),t("h2",{attrs:{id:"so-what-s-next"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#so-what-s-next"}},[e._v("#")]),e._v(" So, what's next")]),e._v(" "),t("p",[e._v("As the released version of the File Explorer is roughly just a minimum viable version, there are still plenty of rooms for improvements and addon features, namely:")]),e._v(" "),t("ul",[t("li",[e._v("Support multiple item selection")]),e._v(" "),t("li",[e._v("Support quick navigation from the address bar")]),e._v(" "),t("li",[e._v("Support files/folders search")]),e._v(" "),t("li",[e._v("Support sorting items, various view modes (thumbnail, list, details)")]),e._v(" "),t("li",[e._v("Support storage allocation, add volumes, modify drive labels")])]),e._v(" "),t("p",[e._v("And many more that, depending on the number of demands and requests, I might get my hands onto them, some may get implemented very soon, late or will never get implemented at all.")]),e._v(" "),t("p",[e._v("If you enjoy my work and it has somehow helped you in any way, get in touch with me via my email, or simply leave a comment to let me know, that will definitely lift my spirit and encourage me, or even better, become a financial supporter (via "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Patreon"),t("OutboundLink")],1),e._v(" or Play Store IAP) so I can constantly invest more time in it and roll out more cool features. Again, thank you for your support and stay tuned for more updates. ✌")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{417:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},418:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},544:function(e,t,o){"use strict";o.r(t);var i=o(16),a=Object(i.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"implementing-file-explorer-in-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-file-explorer-in-win7-simu"}},[e._v("#")]),e._v(" Implementing File Explorer in Win7 Simu")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80",alt:"Files and folders"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Viktor Talashuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/05HLFQu8bFw",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[t("strong",[e._v("File Explorer")]),e._v(" has always been one of the vital features in any operating system, as a Windows simulator, to no surprise that it's also among the most demanded features to be added in Win7 Simu. However, I have been procrastinating its implementation as, besides my skillset limitations, there are quite a lot of complexities and technical constraints involved. Now that I have finally been able to implement it properly, let's read through some technical decisions I made and how it deviates from the actual File Explorer of Windows.")]),e._v(" "),t("h2",{attrs:{id:"some-difficulties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-difficulties"}},[e._v("#")]),e._v(" Some difficulties")]),e._v(" "),t("ul",[t("li",[t("em",[e._v("Self-skillset limitation")]),e._v(" - as this simulator has been a work of a one-man development team, sometimes it is tough when you get stuck and there is nobody to support, or at least just to talk it out")]),e._v(" "),t("li",[t("em",[e._v("Work-life balance disruption")]),e._v(" - as I have a family and a 9-to-5 job, trying to find a time slot in between for hobbyist projects is tough")]),e._v(" "),t("li",[t("em",[e._v("Disheartening moments")]),e._v(" - having to spend a long long time working on something out of your capability, and stay committed to it is also tough")]),e._v(" "),t("li",[t("em",[e._v("Too many unknowns")]),e._v(" - libraries, frameworks, techs, platforms, devices, or even just the languages you are not in control may slow you down, kill your time and still you couldn't figure out how to resolve the issue.")])]),e._v(" "),t("p",[e._v("Yes, those are, but not all the difficulties I have been dealing with when developing the File Explorer functionalities, or in general, this simulator. Just a little bit of a sharing before we get into the technical stuff, so you may know that there is no shortcut to achievements.")]),e._v(" "),t("p",[e._v("Despite only a few capabilities being rolled out for the File Explorer in "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html#_3-0-0-may-20-2023"}},[e._v("v3.0.0")]),e._v(", it actually took me months to come up, put the stuff together, and do thorough testing before releasing to you. It was not easy, at all, with several late nights and weekends burned onto it, having to face constant challenges and struggling to break through my own limits. However, the hard work finally paid off, it has come to fruition 😌")],1),e._v(" "),t("h2",{attrs:{id:"implementing-the-file-explorer-functionalities"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-the-file-explorer-functionalities"}},[e._v("#")]),e._v(" Implementing the File Explorer functionalities")]),e._v(" "),t("p",[t("img",{attrs:{src:o(417),alt:"Win7 Simu File Explorer"}})]),e._v(" "),t("p",[e._v("In v3.0.0, the minimum viable version of File Explorer supports basic operations on files and folders such as creating, opening, editing, renaming, moving, copying, and pasting. And an integral part of this is the trash/delete mechanism which is also supported. As the simulator has to support both Web and Android platforms, there are some challenges to solve for each, and the implementation approach also differs. I will break down some key notes for each.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"implementation-for-android"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementation-for-android"}},[e._v("#")]),e._v(" Implementation for Android")]),e._v(" "),t("p",[e._v("With Android already having its own file management system to help organize and manage data from memory cards, I only needed to leverage this capability and hook up to Win7 Simu. However, as easy as it may sound, for someone who has very little knowledge of any programming languages other than JavaScript, it was time-consuming to be able to write a simple piece of code that just works without many issues.")]),e._v(" "),t("p",[e._v("Anyway, the key thing I'm trying to get across here is that, as an operating system, Android has its own way of organizing files and folders, where there is no concept of disk drives or the like as in Windows. And to make it worse, even the different Android versions have a slight difference to handle this among themselves 🤦‍♂️ Therefore, to mimic the disk-drive-driven structure, I needed to build a tree hierarchy from the app directory (a user-friendly path is something like: "),t("code",[e._v("Android/data/win7simu.visnalize.com/files")]),e._v("), which does not require any permission to perform read/write operations on, in case you are doubtful to grant this app access to your data. To put it simply, the app directory acts as the File Explorer system root, with the path hierarchy as follows:")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("Android/data/win7simu.visnalize.com/files\n└── computer/\n └── drive0/\n ├── Program Files/\n ├── Users/\n │ ├── Guest\n │ │ ├── AppData\n │ │ │ └── Roaming\n │ │ │ └── Visnalize\n │ │ │ └── Windows\n │ │ │ └── RecycleBin\n │ │ ├── Downloads\n │ │ ├── Music\n │ │ └── Videos\n │ └── \n │ ├── AppData\n │ ├── Desktop\n │ └── ...\n └── Windows/\n")])])]),t("p",[e._v("Moreover, there is a separate Android drive where you can access all the data available from the root of the memory card. However, due to the strict permission policies, an app is only allowed a certain level of access to the data outside of that app's directory, especially on later Android versions, so please do not expect the Win7 Simu's File Explorer to be as robust as the system default one. Ultimately, its sole purpose is not to be a complete functional emulator, but just to experience, to explore certain limited simulated features of Windows 7.")]),e._v(" "),t("h3",{attrs:{id:"implementation-for-web"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementation-for-web"}},[e._v("#")]),e._v(" Implementation for Web")]),e._v(" "),t("p",[e._v("For the Web, the approach was literally built from the ground up, with the IndexedDB API utilized as the source for storing the item paths and organizing them into a hierarchical tree. "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API",target:"_blank",rel:"noopener noreferrer"}},[e._v("IndexedDB"),t("OutboundLink")],1),e._v(" is a powerful solution that allows storing large amounts of data with high-performance search capability based on indexed keys. If you're a curious person with some coding experience, you may check out the web version of Win7 Simu from the dev tools and you may see something like this:")]),e._v(" "),t("p",[t("img",{attrs:{src:o(418),alt:"Win7 Simu File Explorer structure in IndexedDB"}})]),e._v(" "),t("p",[e._v("That is how the File Explorer is structured under the hood from the IndexedDB view. Each file/folder's path corresponds to an index key, with the value containing the metadata and content of that item. For every operation performed against this structure, such as creating, modifying or deleting an item... a corresponding path or key reacts to it. The whole structure is then processed and displayed accordingly on the File Explorer interface.")]),e._v(" "),t("p",[e._v("And of course, be cautious not to mess with it, otherwise, you will lose all your data (hopefully not so important, but I guess who would put important stuff in a simulator, right?).")]),e._v(" "),t("h2",{attrs:{id:"so-what-s-next"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#so-what-s-next"}},[e._v("#")]),e._v(" So, what's next")]),e._v(" "),t("p",[e._v("As the released version of the File Explorer is roughly just a minimum viable version, there are still plenty of rooms for improvements and addon features, namely:")]),e._v(" "),t("ul",[t("li",[e._v("Support multiple item selection")]),e._v(" "),t("li",[e._v("Support quick navigation from the address bar")]),e._v(" "),t("li",[e._v("Support files/folders search")]),e._v(" "),t("li",[e._v("Support sorting items, various view modes (thumbnail, list, details)")]),e._v(" "),t("li",[e._v("Support storage allocation, add volumes, modify drive labels")])]),e._v(" "),t("p",[e._v("And many more that, depending on the number of demands and requests, I might get my hands onto them, some may get implemented very soon, late or will never get implemented at all.")]),e._v(" "),t("p",[e._v("If you enjoy my work and it has somehow helped you in any way, get in touch with me via my email, or simply leave a comment to let me know, that will definitely lift my spirit and encourage me, or even better, become a financial supporter (via "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Patreon"),t("OutboundLink")],1),e._v(" or Play Store IAP) so I can constantly invest more time in it and roll out more cool features. Again, thank you for your support and stay tuned for more updates. ✌")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/5.4ffac2c9.js b/assets/js/5.58477e17.js similarity index 82% rename from assets/js/5.4ffac2c9.js rename to assets/js/5.58477e17.js index c7f1a53a..9829de53 100644 --- a/assets/js/5.4ffac2c9.js +++ b/assets/js/5.58477e17.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{436:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},437:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},438:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},439:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},440:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},441:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},590:function(e,t,s){"use strict";s.r(t);var a=s(16),r=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[e._v("#")]),e._v(" Getting started")]),e._v(" "),t("m-social-links"),e._v(" "),t("h2",{attrs:{id:"user-interface"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-interface"}},[e._v("#")]),e._v(" User interface")]),e._v(" "),t("h3",{attrs:{id:"theme-editor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-editor"}},[e._v("#")]),e._v(" Theme Editor")]),e._v(" "),t("p",[t("img",{attrs:{src:s(436),alt:"Theme Studio's editor interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's editor interface is designed to be simple and easy to use, with only 3 components:")]),e._v(" "),t("ul",[t("li",[e._v("Elements navigation - the navigation panel of elements with built-in previews for a quick glimpse of the styling changes.")]),e._v(" "),t("li",[e._v("Source code editor - the main editor that allows you to style the elements using CSS.")]),e._v(" "),t("li",[e._v("Preview area - how the elements look after applying your styling changes.")])]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Miscellaneous element")]),e._v(" "),t("p",[e._v('The "Misc." element is a special element that doesn\'t have the Preview area. It is intended to support any other elements that are not shown on the Elements navigation, therefore you can use it to write any miscellaneous CSS here.')])]),e._v(" "),t("h3",{attrs:{id:"themes-explorer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes-explorer"}},[e._v("#")]),e._v(" Themes Explorer")]),e._v(" "),t("p",[t("img",{attrs:{src:s(437),alt:"Theme Studio's explorer interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's themes explorer consists of 3 tabs:")]),e._v(" "),t("ul",[t("li",[e._v("My Creations - where you can find your saved projects/themes on your device.")]),e._v(" "),t("li",[e._v("Public Gallery - where you can find all sorts of themes published by the community, you can also load their source code to your editor or apply to your Win7 Simu.")]),e._v(" "),t("li",[e._v("Templates - some available templates as base themes that you may select and get started easily.")])]),e._v(" "),t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start"}},[e._v("#")]),e._v(" Quick start")]),e._v(" "),t("p",[e._v("The quickest and easiest way to get started is to load the source code from an existing template:")]),e._v(" "),t("ol",[t("li",[e._v('From the main window, choose "Load an existing project"')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(438),alt:"Getting started"}})]),e._v(" "),t("ol",{attrs:{start:"2"}},[t("li",[e._v('Switch to the "Templates" tab, select a template by right-clicking (hold your finger) on it and choose "Load".')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(439),alt:"Getting started - Select template"}})]),e._v(" "),t("ol",{attrs:{start:"3"}},[t("li",[e._v("You should now be able to see the source code of your selected template, then you can start making changes using the editor to craft your own theme.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(440),alt:"Getting started - Edit template's source code"}})]),e._v(" "),t("ol",{attrs:{start:"4"}},[t("li",[e._v("Finally, you can save your project as a theme by entering the required information in the save popup. You can then resume editing from the current progress, or apply the theme to your Win7 Simu.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(441),alt:"Getting started - Save theme"}})])],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{438:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},439:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},440:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},441:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},442:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},443:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},590:function(e,t,s){"use strict";s.r(t);var a=s(16),r=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[e._v("#")]),e._v(" Getting started")]),e._v(" "),t("m-social-links"),e._v(" "),t("h2",{attrs:{id:"user-interface"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-interface"}},[e._v("#")]),e._v(" User interface")]),e._v(" "),t("h3",{attrs:{id:"theme-editor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-editor"}},[e._v("#")]),e._v(" Theme Editor")]),e._v(" "),t("p",[t("img",{attrs:{src:s(438),alt:"Theme Studio's editor interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's editor interface is designed to be simple and easy to use, with only 3 components:")]),e._v(" "),t("ul",[t("li",[e._v("Elements navigation - the navigation panel of elements with built-in previews for a quick glimpse of the styling changes.")]),e._v(" "),t("li",[e._v("Source code editor - the main editor that allows you to style the elements using CSS.")]),e._v(" "),t("li",[e._v("Preview area - how the elements look after applying your styling changes.")])]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Miscellaneous element")]),e._v(" "),t("p",[e._v('The "Misc." element is a special element that doesn\'t have the Preview area. It is intended to support any other elements that are not shown on the Elements navigation, therefore you can use it to write any miscellaneous CSS here.')])]),e._v(" "),t("h3",{attrs:{id:"themes-explorer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes-explorer"}},[e._v("#")]),e._v(" Themes Explorer")]),e._v(" "),t("p",[t("img",{attrs:{src:s(439),alt:"Theme Studio's explorer interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's themes explorer consists of 3 tabs:")]),e._v(" "),t("ul",[t("li",[e._v("My Creations - where you can find your saved projects/themes on your device.")]),e._v(" "),t("li",[e._v("Public Gallery - where you can find all sorts of themes published by the community, you can also load their source code to your editor or apply to your Win7 Simu.")]),e._v(" "),t("li",[e._v("Templates - some available templates as base themes that you may select and get started easily.")])]),e._v(" "),t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start"}},[e._v("#")]),e._v(" Quick start")]),e._v(" "),t("p",[e._v("The quickest and easiest way to get started is to load the source code from an existing template:")]),e._v(" "),t("ol",[t("li",[e._v('From the main window, choose "Load an existing project"')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(440),alt:"Getting started"}})]),e._v(" "),t("ol",{attrs:{start:"2"}},[t("li",[e._v('Switch to the "Templates" tab, select a template by right-clicking (hold your finger) on it and choose "Load".')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(441),alt:"Getting started - Select template"}})]),e._v(" "),t("ol",{attrs:{start:"3"}},[t("li",[e._v("You should now be able to see the source code of your selected template, then you can start making changes using the editor to craft your own theme.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(442),alt:"Getting started - Edit template's source code"}})]),e._v(" "),t("ol",{attrs:{start:"4"}},[t("li",[e._v("Finally, you can save your project as a theme by entering the required information in the save popup. You can then resume editing from the current progress, or apply the theme to your Win7 Simu.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(443),alt:"Getting started - Save theme"}})])],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/50.3352a58d.js b/assets/js/50.6c7ad1c3.js similarity index 92% rename from assets/js/50.3352a58d.js rename to assets/js/50.6c7ad1c3.js index fd544759..2bbb664c 100644 --- a/assets/js/50.3352a58d.js +++ b/assets/js/50.6c7ad1c3.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{418:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},419:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},545:function(e,t,s){"use strict";s.r(t);var a=s(16),i=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"win7-simu-versus-mobile-devices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-versus-mobile-devices"}},[e._v("#")]),e._v(" Win7 Simu versus mobile devices")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80",alt:"Apple devices"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Brandon Romanchuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/VXcJYnVjev8",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Recently, I have received some feedback about making Win7 Simu easily accessible on mobile devices for those who do not own an Android device and cannot grab the installer from the Google Play Store (primarily iOS users). Therefore, in this post, I'm gonna show you how you can install the web version of Win7 Simu on your mobile device and access it just like a native mobile app!")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide primarily aims at iOS users, however, Android and other mobile OSes in general might be able to achieve the same result with a similar method.")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("h3",{attrs:{id:"_1-open-win7-simu-with-safari"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-open-win7-simu-with-safari"}},[e._v("#")]),e._v(" 1. Open Win7 Simu with Safari")]),e._v(" "),t("p",[e._v("Safari is the default browser on iOS devices and the only browser that enables what we're trying to achieve. So, open up your Safari and navigate to the "),t("a",{attrs:{href:"https://win7simu.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Win7 Simu website"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("Click on the Share icon as shown in the screenshot below.")]),e._v(" "),t("p",[t("img",{attrs:{src:s(418),alt:"Safari share icon"}})]),e._v(" "),t("h3",{attrs:{id:"_2-add-to-home-screen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-add-to-home-screen"}},[e._v("#")]),e._v(" 2. Add to Home Screen")]),e._v(" "),t("p",[e._v('From the popup, scroll down until you see the "Add to Home Screen" option as shown in the screenshot below and tap it. Optionally, customize the name of the app by editing the text in the field provided.')]),e._v(" "),t("p",[t("img",{attrs:{src:s(419),alt:"Add to home screen"}})]),e._v(" "),t("h3",{attrs:{id:"_3-enjoy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3-enjoy"}},[e._v("#")]),e._v(" 3. Enjoy")]),e._v(" "),t("p",[e._v("Once that's done, you will see the Win7 Simu icon show up on your home screen. And that's it! You've successfully installed Win7 Simu from Safari. Now you can enjoy the app-like experience without the need to download it from the App Store.")]),e._v(" "),t("h2",{attrs:{id:"some-notes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-notes"}},[e._v("#")]),e._v(" Some notes")]),e._v(" "),t("p",[e._v("Despite the app-like experience, please keep in mind that it is just a website by nature, and therefore still has certain limitations as listed "),t("RouterLink",{attrs:{to:"/win7simu/about.html#web-version"}},[e._v("here")]),e._v(". However, the situation might change in the near future as the technology that empowers this capability receives more robust support from mobile vendors. So stay tuned and keep supporting me, either in spirit or "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("financial"),t("OutboundLink")],1),e._v(" 🤩")],1),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{424:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},425:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},547:function(e,t,s){"use strict";s.r(t);var a=s(16),i=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"win7-simu-versus-mobile-devices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-versus-mobile-devices"}},[e._v("#")]),e._v(" Win7 Simu versus mobile devices")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80",alt:"Apple devices"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Brandon Romanchuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/VXcJYnVjev8",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Recently, I have received some feedback about making Win7 Simu easily accessible on mobile devices for those who do not own an Android device and cannot grab the installer from the Google Play Store (primarily iOS users). Therefore, in this post, I'm gonna show you how you can install the web version of Win7 Simu on your mobile device and access it just like a native mobile app!")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide primarily aims at iOS users, however, Android and other mobile OSes in general might be able to achieve the same result with a similar method.")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("h3",{attrs:{id:"_1-open-win7-simu-with-safari"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-open-win7-simu-with-safari"}},[e._v("#")]),e._v(" 1. Open Win7 Simu with Safari")]),e._v(" "),t("p",[e._v("Safari is the default browser on iOS devices and the only browser that enables what we're trying to achieve. So, open up your Safari and navigate to the "),t("a",{attrs:{href:"https://win7simu.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Win7 Simu website"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("Click on the Share icon as shown in the screenshot below.")]),e._v(" "),t("p",[t("img",{attrs:{src:s(424),alt:"Safari share icon"}})]),e._v(" "),t("h3",{attrs:{id:"_2-add-to-home-screen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-add-to-home-screen"}},[e._v("#")]),e._v(" 2. Add to Home Screen")]),e._v(" "),t("p",[e._v('From the popup, scroll down until you see the "Add to Home Screen" option as shown in the screenshot below and tap it. Optionally, customize the name of the app by editing the text in the field provided.')]),e._v(" "),t("p",[t("img",{attrs:{src:s(425),alt:"Add to home screen"}})]),e._v(" "),t("h3",{attrs:{id:"_3-enjoy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3-enjoy"}},[e._v("#")]),e._v(" 3. Enjoy")]),e._v(" "),t("p",[e._v("Once that's done, you will see the Win7 Simu icon show up on your home screen. And that's it! You've successfully installed Win7 Simu from Safari. Now you can enjoy the app-like experience without the need to download it from the App Store.")]),e._v(" "),t("h2",{attrs:{id:"some-notes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-notes"}},[e._v("#")]),e._v(" Some notes")]),e._v(" "),t("p",[e._v("Despite the app-like experience, please keep in mind that it is just a website by nature, and therefore still has certain limitations as listed "),t("RouterLink",{attrs:{to:"/win7simu/about.html#web-version"}},[e._v("here")]),e._v(". However, the situation might change in the near future as the technology that empowers this capability receives more robust support from mobile vendors. So stay tuned and keep supporting me, either in spirit or "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("financial"),t("OutboundLink")],1),e._v(" 🤩")],1),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/51.6d90143e.js b/assets/js/51.3f9427b4.js similarity index 98% rename from assets/js/51.6d90143e.js rename to assets/js/51.3f9427b4.js index 878aab59..157f9963 100644 --- a/assets/js/51.6d90143e.js +++ b/assets/js/51.3f9427b4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{422:function(t,a,s){t.exports=s.p+"assets/img/wmc-homescreen-win7simu.d3a11197.png"},423:function(t,a,s){t.exports=s.p+"assets/img/wmc-homescreen-original.23635b07.png"},547:function(t,a,s){"use strict";s.r(a);var e=s(16),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"implementing-windows-media-center-in-win7-simu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#implementing-windows-media-center-in-win7-simu"}},[t._v("#")]),t._v(" Implementing Windows Media Center in Win7 Simu")]),t._v(" "),a("m-blog-meta"),t._v(" "),a("p",[a("img",{attrs:{src:"/assets/covers/win7-simu-windows-media-center.jpg",alt:"Windows Media Center Intro"}})]),t._v(" "),a("p",[a("strong",[t._v("Windows Media Center")]),t._v(" (WMC for short) is a media player program created and first introduced to Windows XP Media Center Edition in 2002 by Microsoft. It can play slide shows, music, videos, CDs, and DVDs, you can even watch live TV and record it. For many of us, it was part of childhood bringing back a lot of memories from the good old days.")]),t._v(" "),a("p",[t._v("Unfortunately, shortly after the release of WMC in Windows 7 in 2009, Microsoft no longer worked on it and eventually it was announced discontinued on Windows 10. It was devastating to see a such good program with a stunning user interface go.")]),t._v(" "),a("p",[t._v("Of course, with the joy of bringing back the nostalgia, we would love to bring WMC back in Win7 Simu.")]),t._v(" "),a("h2",{attrs:{id:"the-scope"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-scope"}},[t._v("#")]),t._v(" The Scope")]),t._v(" "),a("p",[t._v("The original WMC in Windows 7 can do many things like playing live TV, slide shows, music, video, CD, DVD and more. Because Win7 Simu is a simulator built on the "),a("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[t._v("web technologies")]),t._v(", we're not going to replicate the whole program and this project is obviously not intended to replace the original.")],1),t._v(" "),a("p",[t._v("For that reason, the scope of the project will be implementing a basic version of WMC that lets you browse your favorite photos, and play music and videos. Basically, it will be a stripped-down version of the original.")]),t._v(" "),a("h2",{attrs:{id:"the-implementation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-implementation"}},[t._v("#")]),t._v(" The Implementation")]),t._v(" "),a("h3",{attrs:{id:"resource-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#resource-files"}},[t._v("#")]),t._v(" Resource Files")]),t._v(" "),a("p",[t._v("Most of the resource files are extracted from the "),a("code",[t._v(".DLL")]),t._v(" files in the original WMC. It contains everything we need to faithfully recreate WMC so we don't have to make everything from scratch (hope we will not get in trouble for using those resource files 👀).")]),t._v(" "),a("p",[t._v("We didn't use the font files in the original because those files are huge, it'll bloat the app install size up which we don't want.")]),t._v(" "),a("h3",{attrs:{id:"the-intro-screen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-intro-screen"}},[t._v("#")]),t._v(" The Intro Screen")]),t._v(" "),a("p",[t._v("The intro screen might be the most time-consuming part because of the sheer amount of animation keyframes it has, though it's not too difficult to implement it.")]),t._v(" "),a("p",[t._v("Inside the resource files, there are "),a("a",{attrs:{href:"https://learn.microsoft.com/en-us/previous-versions/windows/desktop/windows-media-center-sdk/bb189388(v=msdn.10)",target:"_blank",rel:"noopener noreferrer"}},[a("code",[t._v(".MCML")]),a("OutboundLink")],1),t._v(" files that describe a lot of the animation keyframes so we just had to translate it to the equivalents in CSS, though it still needed a lot of adjustments.")]),t._v(" "),a("p",[t._v("Here is what an animation in the "),a("code",[t._v(".MCML")]),t._v(" looks like. The animation has a name and a bunch of following keyframes and it's fairly straightforward to translate it to CSS.")]),t._v(" "),a("div",{staticClass:"language-xml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-xml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Animation")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Launch.Text.MotionBlur"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Keyframes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ScaleKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("3.0, 3.0, 1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Interpolation")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("EaseIn, 2.0, 0.80"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ScaleKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0,1.0, 1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ScaleKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.85,0.85, 1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ScaleKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.7"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.75, 0.75, 1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.133"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Interpolation")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("SCurve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.833"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.75"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Interpolation")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("SCurve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.7"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.00"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("PositionKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("50,600,0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Interpolation")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("EaseIn, 2.0, 0.80"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("PositionKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0,200,0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("PositionKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0,170,0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("PositionKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.7"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0,150,0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Lucky for us, Microsoft still keeps the documentation of the "),a("a",{attrs:{href:"https://learn.microsoft.com/en-us/previous-versions/windows/desktop/windows-media-center-sdk/ms818424(v=msdn.10)",target:"_blank",rel:"noopener noreferrer"}},[t._v("Windows Media Center SDK"),a("OutboundLink")],1),t._v(" so we, at least, have something to reference.")]),t._v(" "),a("h3",{attrs:{id:"the-home-screen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-home-screen"}},[t._v("#")]),t._v(" The Home Screen")]),t._v(" "),a("p",[t._v("The home screen might be one of the challenging parts when making WMC. There are a lot of animations and masking, and magnifying effects (I don't know what it's called, alright). We couldn't understand most of the information in the "),a("code",[t._v(".MCML")]),t._v(" files to recreate it so we decided to use the power of observation and use what we can use in CSS and go with our guts.")]),t._v(" "),a("p",[t._v("The result home screen is quite good and comparable to the original, in our opinion. Though it doesn't look like a 1-to-1 replication.")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"center"}},[t._v("WMC Home Screen in Win7 Simu")]),t._v(" "),a("th",{staticStyle:{"text-align":"center"}},[t._v("Original WMC Home Screen")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"center"}},[a("img",{attrs:{src:s(422),alt:"Windows Media Center Home Screen in Win7 Simu"}})]),t._v(" "),a("td",{staticStyle:{"text-align":"center"}},[a("img",{attrs:{src:s(423),alt:"Original Windows Media Center Home Screen in Windows 7"}})])])])]),t._v(" "),a("h3",{attrs:{id:"the-photos-videos-libraries"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-photos-videos-libraries"}},[t._v("#")]),t._v(" The Photos + Videos Libraries")]),t._v(" "),a("p",[t._v("The WMC in Win7 Simu searches for photos in "),a("code",[t._v("C:\\Users\\\\Pictures")]),t._v(" (for now) and displays all the photos and folders it found. Each thumbnail can be easily rendered by getting the blob URL of the image and using it in the "),a("code",[t._v("")]),t._v(" tag. The downside of this approach is that it might be slow if the image is too large.")]),t._v(" "),a("p",[t._v("For the video library, it's a tad trickier. Each video thumbnail is an HTML5 "),a("code",[t._v("