diff --git a/404.html b/404.html index e96625b4..ce8da609 100644 --- a/404.html +++ b/404.html @@ -20,13 +20,13 @@ - +

404

That's a Four-Oh-Four.
Take me home.
- + diff --git a/about.html b/about.html index 78382172..5da4ba04 100644 --- a/about.html +++ b/about.html @@ -35,7 +35,7 @@ - + @@ -65,6 +65,8 @@ Games
  • Deep Links +
  • + Builders
    • 📝 Blog
    @@ -103,6 +105,8 @@ Games
  • Deep Links +
  • + Builders
    • 📝 Blog
    @@ -116,6 +120,6 @@ (opens new window)
  • Twitter (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:

    - + diff --git a/assets/img/builder.97bb33a5.jpg b/assets/img/builder.97bb33a5.jpg new file mode 100644 index 00000000..aa189108 Binary files /dev/null and b/assets/img/builder.97bb33a5.jpg differ diff --git a/assets/js/10.a03baa40.js b/assets/js/10.d8cc8e02.js similarity index 96% rename from assets/js/10.a03baa40.js rename to assets/js/10.d8cc8e02.js index ab0f4b60..ca65219b 100644 --- a/assets/js/10.a03baa40.js +++ b/assets/js/10.d8cc8e02.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{292:function(t,e){t.exports={DOMAIN:"visnalize.com",ORIGIN:"https://visnalize.com"}},295:function(t,e,n){"use strict";n.d(e,"a",(function(){return r}));n(107);var a=n(292);function r(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(","),r=/^(https?:|mailto:|tel:)/.test(t)?t:`${a.ORIGIN}${t}`;return`${a.ORIGIN}/cdn-cgi/image/${n}/${r}`}},313:function(t,e,n){},366:function(t,e,n){"use strict";n(313)},458:function(t,e,n){"use strict";n.r(e);var a=n(288),r=n(295),o={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(r.a)(t,{width:450})}},s=(n(366),n(13)),i=Object(s.a)(o,(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("v-icon",{attrs:{name:"image"}}),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,"1e21e726",null);e.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{292:function(t,e){t.exports={DOMAIN:"visnalize.com",ORIGIN:"https://visnalize.com"}},295:function(t,e,n){"use strict";n.d(e,"a",(function(){return r}));n(107);var a=n(292);function r(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(","),r=/^(https?:|mailto:|tel:)/.test(t)?t:`${a.ORIGIN}${t}`;return`${a.ORIGIN}/cdn-cgi/image/${n}/${r}`}},313:function(t,e,n){},366:function(t,e,n){"use strict";n(313)},459:function(t,e,n){"use strict";n.r(e);var a=n(288),r=n(295),o={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(r.a)(t,{width:450})}},s=(n(366),n(13)),i=Object(s.a)(o,(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("v-icon",{attrs:{name:"image"}}),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,"1e21e726",null);e.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/100.c0fe4537.js b/assets/js/100.56ff1d06.js similarity index 100% rename from assets/js/100.c0fe4537.js rename to assets/js/100.56ff1d06.js diff --git a/assets/js/104.c6a7e48f.js b/assets/js/101.99326dc8.js similarity index 77% rename from assets/js/104.c6a7e48f.js rename to assets/js/101.99326dc8.js index 0c3ba604..4de1bdb6 100644 --- a/assets/js/104.c6a7e48f.js +++ b/assets/js/101.99326dc8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{546:function(t,n,s){"use strict";s.r(n);var e=s(13),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],{545:function(t,n,s){"use strict";s.r(n);var e=s(13),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/101.ef53365c.js b/assets/js/102.e2778eae.js similarity index 77% rename from assets/js/101.ef53365c.js rename to assets/js/102.e2778eae.js index 631483c3..591203ec 100644 --- a/assets/js/101.ef53365c.js +++ b/assets/js/102.e2778eae.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{544:function(t,n,s){"use strict";s.r(n);var e=s(13),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],{546:function(t,n,s){"use strict";s.r(n);var e=s(13),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.59aef23b.js b/assets/js/103.d933132e.js similarity index 77% rename from assets/js/102.59aef23b.js rename to assets/js/103.d933132e.js index 5f499814..4b2fc341 100644 --- a/assets/js/102.59aef23b.js +++ b/assets/js/103.d933132e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{545:function(t,n,s){"use strict";s.r(n);var e=s(13),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],{547:function(t,n,s){"use strict";s.r(n);var e=s(13),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.4b8da166.js b/assets/js/104.f7f2586e.js similarity index 77% rename from assets/js/103.4b8da166.js rename to assets/js/104.f7f2586e.js index 791ec425..ccf55a6b 100644 --- a/assets/js/103.4b8da166.js +++ b/assets/js/104.f7f2586e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{548:function(t,n,s){"use strict";s.r(n);var e=s(13),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([[104],{548:function(t,n,s){"use strict";s.r(n);var e=s(13),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.a9f49fc6.js b/assets/js/105.a9f49fc6.js deleted file mode 100644 index 48662cc2..00000000 --- a/assets/js/105.a9f49fc6.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{547:function(t,n,s){"use strict";s.r(n);var e=s(13),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.eb5eaa18.js b/assets/js/105.eb5eaa18.js new file mode 100644 index 00000000..2471c0e0 --- /dev/null +++ b/assets/js/105.eb5eaa18.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{549:function(t,n,s){"use strict";s.r(n);var e=s(13),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.12f21946.js b/assets/js/106.12f21946.js deleted file mode 100644 index a21a6ec4..00000000 --- a/assets/js/106.12f21946.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{549:function(t,n,s){"use strict";s.r(n);var e=s(13),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.c92c1fb3.js b/assets/js/106.c92c1fb3.js new file mode 100644 index 00000000..34e652bb --- /dev/null +++ b/assets/js/106.c92c1fb3.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{550:function(t,n,s){"use strict";s.r(n);var e=s(13),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.13e76395.js b/assets/js/107.13e76395.js new file mode 100644 index 00000000..acff02c3 --- /dev/null +++ b/assets/js/107.13e76395.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{551:function(t,n,s){"use strict";s.r(n);var e=s(13),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.e7fd7433.js b/assets/js/107.e7fd7433.js deleted file mode 100644 index fbab4ac9..00000000 --- a/assets/js/107.e7fd7433.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{550:function(t,n,s){"use strict";s.r(n);var e=s(13),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.050e4ffa.js b/assets/js/108.050e4ffa.js deleted file mode 100644 index 61d6db0f..00000000 --- a/assets/js/108.050e4ffa.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{551:function(t,n,s){"use strict";s.r(n);var e=s(13),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.dd71b877.js b/assets/js/108.dd71b877.js new file mode 100644 index 00000000..666de5ae --- /dev/null +++ b/assets/js/108.dd71b877.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{552:function(t,n,s){"use strict";s.r(n);var e=s(13),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.3565a6dd.js b/assets/js/109.3565a6dd.js new file mode 100644 index 00000000..c33b9b06 --- /dev/null +++ b/assets/js/109.3565a6dd.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{553:function(t,n,s){"use strict";s.r(n);var e=s(13),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.554b86d7.js b/assets/js/11.e8c24f4e.js similarity index 99% rename from assets/js/11.554b86d7.js rename to assets/js/11.e8c24f4e.js index 29347e01..39b21b48 100644 --- a/assets/js/11.554b86d7.js +++ b/assets/js/11.e8c24f4e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{368:function(e,t,a){e.exports=a.p+"assets/img/ad-networks.647b5d83.png"},369:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-admob.4883adfe.png"},370:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-adsense.457df8d7.png"},371:function(e,t,a){e.exports=a.p+"assets/img/my-ad-formats.1b93ee12.png"},496:function(e,t,a){"use strict";a.r(t);var o=a(13),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(368),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(369),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(370),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(371),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],{368:function(e,t,a){e.exports=a.p+"assets/img/ad-networks.647b5d83.png"},369:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-admob.4883adfe.png"},370:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-adsense.457df8d7.png"},371:function(e,t,a){e.exports=a.p+"assets/img/my-ad-formats.1b93ee12.png"},497:function(e,t,a){"use strict";a.r(t);var o=a(13),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(368),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(369),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(370),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(371),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/109.8a429c85.js b/assets/js/110.76768d12.js similarity index 96% rename from assets/js/109.8a429c85.js rename to assets/js/110.76768d12.js index b9ec974f..fd55caac 100644 --- a/assets/js/109.8a429c85.js +++ b/assets/js/110.76768d12.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{552:function(e,t,a){"use strict";a.r(t);var s=a(13),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([[110],{554:function(e,t,a){"use strict";a.r(t);var s=a(13),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.4c21be42.js b/assets/js/12.075b6713.js similarity index 98% rename from assets/js/12.4c21be42.js rename to assets/js/12.075b6713.js index 67457c3a..fd710964 100644 --- a/assets/js/12.4c21be42.js +++ b/assets/js/12.075b6713.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{379:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},380:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},381:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},382:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},503:function(e,t,a){"use strict";a.r(t);var o=a(13),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(379),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(380),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(381),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(382),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],{379:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},380:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},381:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},382:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},505:function(e,t,a){"use strict";a.r(t);var o=a(13),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(379),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(380),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(381),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(382),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.9bac9862.js b/assets/js/13.9310fb23.js similarity index 99% rename from assets/js/13.9bac9862.js rename to assets/js/13.9310fb23.js index e1953e9d..3a03b5c9 100644 --- a/assets/js/13.9bac9862.js +++ b/assets/js/13.9310fb23.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{375:function(e,t,o){e.exports=o.p+"assets/img/win7simu-iframe-browser.ddc0ac3e.png"},376:function(e,t,o){e.exports=o.p+"assets/img/iframe-example.2e94f1f8.png"},377:function(e,t,o){e.exports=o.p+"assets/img/install-requestly-edge.b2cce739.png"},378:function(e,t,o){e.exports=o.p+"assets/img/import-win7simu-requestly-rules.a4498b88.png"},502:function(e,t,o){"use strict";o.r(t);var s=o(13),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(375),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(376),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(377),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(378),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],{375:function(e,t,o){e.exports=o.p+"assets/img/win7simu-iframe-browser.ddc0ac3e.png"},376:function(e,t,o){e.exports=o.p+"assets/img/iframe-example.2e94f1f8.png"},377:function(e,t,o){e.exports=o.p+"assets/img/install-requestly-edge.b2cce739.png"},378:function(e,t,o){e.exports=o.p+"assets/img/import-win7simu-requestly-rules.a4498b88.png"},503:function(e,t,o){"use strict";o.r(t);var s=o(13),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(375),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(376),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(377),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(378),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.5a4bebf5.js b/assets/js/14.e679322a.js similarity index 98% rename from assets/js/14.5a4bebf5.js rename to assets/js/14.e679322a.js index 1ff4a8aa..ccaff060 100644 --- a/assets/js/14.5a4bebf5.js +++ b/assets/js/14.e679322a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{403:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},404:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},405:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},406:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},553:function(t,s,n){"use strict";n.r(s);var e=n(13),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(403),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(404),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(405),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(406),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],{404:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},405:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},406:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},407:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},555:function(t,s,n){"use strict";n.r(s);var e=n(13),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(404),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(405),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(406),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(407),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.89869fd2.js b/assets/js/15.8c4d9616.js similarity index 86% rename from assets/js/15.89869fd2.js rename to assets/js/15.8c4d9616.js index 74543292..fd4e5096 100644 --- a/assets/js/15.89869fd2.js +++ b/assets/js/15.8c4d9616.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{290: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 o(t){return t.charAt(0).toLowerCase()+t.slice(1)}r.d(n,"b",(function(){return s})),r.d(n,"a",(function(){return o}))},329:function(t,n,r){},430:function(t,n,r){"use strict";r(329)},481:function(t,n,r){"use strict";r.r(n);var s=r(290),o={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:s.b}},a=(r(430),r(13)),e=Object(a.a)(o,(function(){var t=this,n=t._self._c;return n("div",[t.showIcon?n("v-icon",{attrs:{name:"tag"}}):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,"051d57d2",null);n.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{290: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 o(t){return t.charAt(0).toLowerCase()+t.slice(1)}r.d(n,"b",(function(){return s})),r.d(n,"a",(function(){return o}))},329:function(t,n,r){},431:function(t,n,r){"use strict";r(329)},482:function(t,n,r){"use strict";r.r(n);var s=r(290),o={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:s.b}},a=(r(431),r(13)),e=Object(a.a)(o,(function(){var t=this,n=t._self._c;return n("div",[t.showIcon?n("v-icon",{attrs:{name:"tag"}}):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,"051d57d2",null);n.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/16.41bafecb.js b/assets/js/16.873f447a.js similarity index 95% rename from assets/js/16.41bafecb.js rename to assets/js/16.873f447a.js index 6fef0e11..d375c042 100644 --- a/assets/js/16.41bafecb.js +++ b/assets/js/16.873f447a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{290: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}))},311:function(t,e,n){},364:function(t,e,n){"use strict";n(311)},456:function(t,e,n){"use strict";n.r(e);var a=n(288),o=n(290),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(364),n(13)),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,"4718630c",null);e.default=u.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{290: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}))},311:function(t,e,n){},364:function(t,e,n){"use strict";n(311)},457:function(t,e,n){"use strict";n.r(e);var a=n(288),o=n(290),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(364),n(13)),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,"4718630c",null);e.default=u.exports}}]); \ No newline at end of file diff --git a/assets/js/17.7a7451d9.js b/assets/js/17.fef93b8e.js similarity index 92% rename from assets/js/17.7a7451d9.js rename to assets/js/17.fef93b8e.js index 53f8c6ee..9262e80c 100644 --- a/assets/js/17.7a7451d9.js +++ b/assets/js/17.fef93b8e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[17,45],{285:function(n,t,o){},287:function(n,t,o){"use strict";o(285)},289:function(n,t,o){"use strict";o.r(t);var e={components:{ParentLayout:o(288).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(o(287),o(13)),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},460:function(n,t,o){"use strict";o.r(t);var e={components:{Visnalize:o(289).default}},s=o(13),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,45],{285:function(n,t,o){},287:function(n,t,o){"use strict";o(285)},289:function(n,t,o){"use strict";o.r(t);var e={components:{ParentLayout:o(288).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(o(287),o(13)),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},461:function(n,t,o){"use strict";o.r(t);var e={components:{Visnalize:o(289).default}},s=o(13),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.b2445b44.js b/assets/js/18.e9d4b226.js similarity index 92% rename from assets/js/18.b2445b44.js rename to assets/js/18.e9d4b226.js index 039b433c..094eeeae 100644 --- a/assets/js/18.b2445b44.js +++ b/assets/js/18.e9d4b226.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18,45],{285:function(n,t,o){},287:function(n,t,o){"use strict";o(285)},289:function(n,t,o){"use strict";o.r(t);var e={components:{ParentLayout:o(288).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(o(287),o(13)),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},461:function(n,t,o){"use strict";o.r(t);var e={components:{Visnalize:o(289).default}},s=o(13),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,45],{285:function(n,t,o){},287:function(n,t,o){"use strict";o(285)},289:function(n,t,o){"use strict";o.r(t);var e={components:{ParentLayout:o(288).default},props:{noSideAds:Boolean,noComments:Boolean}},s=(o(287),o(13)),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},462:function(n,t,o){"use strict";o.r(t);var e={components:{Visnalize:o(289).default}},s=o(13),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/20.0ab3c780.js b/assets/js/20.86167153.js similarity index 89% rename from assets/js/20.0ab3c780.js rename to assets/js/20.86167153.js index 68ba35c0..2f60c789 100644 --- a/assets/js/20.0ab3c780.js +++ b/assets/js/20.86167153.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{390:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},391:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},392:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},511:function(t,e,r){"use strict";r.r(e);var a=r(13),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(390),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(391),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(392),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],{392:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},393:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},394:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},515:function(t,e,r){"use strict";r.r(e);var a=r(13),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(392),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(393),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(394),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.f68cdd0d.js b/assets/js/21.9e50342a.js similarity index 73% rename from assets/js/21.f68cdd0d.js rename to assets/js/21.9e50342a.js index 733b4312..41d93402 100644 --- a/assets/js/21.f68cdd0d.js +++ b/assets/js/21.9e50342a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{342:function(t,e,n){},444:function(t,e,n){"use strict";n(342)},556: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(444),n(13)),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],{342:function(t,e,n){},445:function(t,e,n){"use strict";n(342)},558: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(445),n(13)),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.758b6c7c.js b/assets/js/22.23889ebe.js similarity index 77% rename from assets/js/22.758b6c7c.js rename to assets/js/22.23889ebe.js index 98acea06..86d196c6 100644 --- a/assets/js/22.758b6c7c.js +++ b/assets/js/22.23889ebe.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{343:function(t,e,a){},445:function(t,e,a){"use strict";a(343)},492: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(445),a(13)),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],{343:function(t,e,a){},446:function(t,e,a){"use strict";a(343)},493: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(446),a(13)),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.c6ff42e5.js b/assets/js/23.ccd45243.js similarity index 92% rename from assets/js/23.c6ff42e5.js rename to assets/js/23.ccd45243.js index 6987f2ae..add11b90 100644 --- a/assets/js/23.c6ff42e5.js +++ b/assets/js/23.ccd45243.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{344:function(e,t,a){},446:function(e,t,a){"use strict";a(344)},493: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(446),a(13)),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],{344:function(e,t,a){},447:function(e,t,a){"use strict";a(344)},494: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(447),a(13)),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.9e060bce.js b/assets/js/24.e4b97f41.js similarity index 81% rename from assets/js/24.9e060bce.js rename to assets/js/24.e4b97f41.js index 93df6a95..34b6b546 100644 --- a/assets/js/24.9e060bce.js +++ b/assets/js/24.e4b97f41.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{315:function(t,n,r){},414:function(t,n,r){"use strict";r(315)},462:function(t,n,r){"use strict";r.r(n);var e={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(414),r(13)),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],{315:function(t,n,r){},415:function(t,n,r){"use strict";r(315)},464:function(t,n,r){"use strict";r.r(n);var e={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(415),r(13)),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.d73f5eb2.js b/assets/js/25.469b4331.js similarity index 83% rename from assets/js/25.d73f5eb2.js rename to assets/js/25.469b4331.js index 5aef58f1..ecc11682 100644 --- a/assets/js/25.d73f5eb2.js +++ b/assets/js/25.469b4331.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{316:function(s,t,n){},415:function(s,t,n){"use strict";n(316)},465: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(415),n(13)),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],{316:function(s,t,n){},416:function(s,t,n){"use strict";n(316)},466: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(416),n(13)),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.e0af232a.js b/assets/js/26.5be505b7.js similarity index 73% rename from assets/js/26.e0af232a.js rename to assets/js/26.5be505b7.js index f2070e16..bd31a836 100644 --- a/assets/js/26.e0af232a.js +++ b/assets/js/26.5be505b7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{317:function(n,t,i){},416:function(n,t,i){"use strict";i(317)},466:function(n,t,i){"use strict";i.r(t);var c={props:{label:String,icon:String}},e=(i(416),i(13)),l=Object(e.a)(c,(function(){var n=this,t=n._self._c;return t("button",{attrs:{"aria-label":n.label,title:n.label},on:{click:function(t){return n.$emit("click")}}},[t("v-icon",{attrs:{name:n.icon}})],1)}),[],!1,null,"0f94617e",null);t.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{317:function(n,t,i){},417:function(n,t,i){"use strict";i(317)},467:function(n,t,i){"use strict";i.r(t);var c={props:{label:String,icon:String}},e=(i(417),i(13)),l=Object(e.a)(c,(function(){var n=this,t=n._self._c;return t("button",{attrs:{"aria-label":n.label,title:n.label},on:{click:function(t){return n.$emit("click")}}},[t("v-icon",{attrs:{name:n.icon}})],1)}),[],!1,null,"0f94617e",null);t.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/27.660c3544.js b/assets/js/27.0c1e5a31.js similarity index 77% rename from assets/js/27.660c3544.js rename to assets/js/27.0c1e5a31.js index 7b62c59a..cf5fcf19 100644 --- a/assets/js/27.660c3544.js +++ b/assets/js/27.0c1e5a31.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{318:function(t,e,s){},417:function(t,e,s){"use strict";s(318)},467:function(t,e,s){"use strict";s.r(e);var a={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},i=(s(417),s(13)),r=Object(i.a)(a,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("v-icon",{attrs:{name:"clock"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"026804f3",null);e.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{318:function(t,e,s){},418:function(t,e,s){"use strict";s(318)},468:function(t,e,s){"use strict";s.r(e);var a={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},i=(s(418),s(13)),r=Object(i.a)(a,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("v-icon",{attrs:{name:"clock"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"026804f3",null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/28.66be490a.js b/assets/js/28.f062768f.js similarity index 79% rename from assets/js/28.66be490a.js rename to assets/js/28.f062768f.js index 7d760882..8f65c846 100644 --- a/assets/js/28.66be490a.js +++ b/assets/js/28.f062768f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{319:function(t,a,o){},418:function(t,a,o){"use strict";o(319)},469:function(t,a,o){"use strict";o.r(a);o(48);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},n=(o(418),o(13)),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],{319:function(t,a,o){},419:function(t,a,o){"use strict";o(319)},470:function(t,a,o){"use strict";o.r(a);o(48);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},n=(o(419),o(13)),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.8acd4b82.js b/assets/js/29.e7007ba8.js similarity index 82% rename from assets/js/29.8acd4b82.js rename to assets/js/29.e7007ba8.js index 28011e9e..1e802651 100644 --- a/assets/js/29.8acd4b82.js +++ b/assets/js/29.e7007ba8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{320:function(t,s,n){},419:function(t,s,n){"use strict";n(320)},472: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(419),n(13)),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([[29],{320:function(t,s,n){},420:function(t,s,n){"use strict";n(320)},474: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(420),n(13)),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/3.98263004.js b/assets/js/3.4893d81c.js similarity index 93% rename from assets/js/3.98263004.js rename to assets/js/3.4893d81c.js index e793ddff..f705389c 100644 --- a/assets/js/3.98263004.js +++ b/assets/js/3.4893d81c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{291: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(424);var i=n(347);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)}))`},293: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}))},294:function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));var a=n(291);function i(t){return a.d[t]&&(t=a.d[t]),Object(a.c)(t)?Object(a.b)(t):t}},323:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"number"==typeof t},324:function(t,e,n){"use strict";n.d(e,"a",(function(){return r}));var a=n(424),i=n(451);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}},347: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)}},424: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},425:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"function"==typeof t},450:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a={ms:t=>1e3*t,s:t=>t/1e3}},451:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"string"==typeof t},452: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(450),r=n(424);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(323);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(425);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(347),k=n(291);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(294);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(324);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(293);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)}},453:function(t,e,n){"use strict";n.d(e,"a",(function(){return y}));var a=n(450);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(424);var u=n(323),l=n(451),h=n(324),f=n(291),d=n(294);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],{291: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(425);var i=n(347);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)}))`},293: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}))},294:function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));var a=n(291);function i(t){return a.d[t]&&(t=a.d[t]),Object(a.c)(t)?Object(a.b)(t):t}},323:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"number"==typeof t},324:function(t,e,n){"use strict";n.d(e,"a",(function(){return r}));var a=n(425),i=n(452);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}},347: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)}},425: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},426:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"function"==typeof t},451:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a={ms:t=>1e3*t,s:t=>t/1e3}},452:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));const a=t=>"string"==typeof t},453: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(451),r=n(425);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(323);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(426);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(347),k=n(291);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(294);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(324);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(293);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)}},454:function(t,e,n){"use strict";n.d(e,"a",(function(){return y}));var a=n(451);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(425);var u=n(323),l=n(452),h=n(324),f=n(291),d=n(294);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.7dc98681.js b/assets/js/30.7377b4b0.js similarity index 75% rename from assets/js/30.7dc98681.js rename to assets/js/30.7377b4b0.js index 6e4cd3f5..87d0115e 100644 --- a/assets/js/30.7dc98681.js +++ b/assets/js/30.7377b4b0.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{321:function(t,s,a){},420:function(t,s,a){"use strict";a(321)},475:function(t,s,a){"use strict";a.r(s);var i={},e=(a(420),a(13)),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([[30],{321:function(t,s,a){},421:function(t,s,a){"use strict";a(321)},476:function(t,s,a){"use strict";a.r(s);var i={},e=(a(421),a(13)),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/31.240c7570.js b/assets/js/31.2bddfaf9.js similarity index 79% rename from assets/js/31.240c7570.js rename to assets/js/31.2bddfaf9.js index 6b76ec2a..1d3a9174 100644 --- a/assets/js/31.240c7570.js +++ b/assets/js/31.2bddfaf9.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{322:function(t,e,n){},423:function(t,e,n){"use strict";n(322)},476:function(t,e,n){"use strict";n.r(e);var o=n(421),a=(n(422),{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(423),n(13)),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([[31],{322:function(t,e,n){},424:function(t,e,n){"use strict";n(322)},477:function(t,e,n){"use strict";n.r(e);var o=n(422),a=(n(423),{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(424),n(13)),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/32.3a23af09.js b/assets/js/32.98dc3084.js similarity index 80% rename from assets/js/32.3a23af09.js rename to assets/js/32.98dc3084.js index 86b3a074..f208d902 100644 --- a/assets/js/32.3a23af09.js +++ b/assets/js/32.98dc3084.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{325:function(t,s,o){},426:function(t,s,o){"use strict";o(325)},477:function(t,s,o){"use strict";o.r(s);var i=o(452),e=o(453),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}}},a=(o(426),o(13)),l=Object(a.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"site-settings"},[t("button",{staticClass:"toggle",class:{active:this.showControls},attrs:{"aria-label":"Site Settings"},on:{click:this.toggle}},[t("v-icon",{attrs:{name:this.showControls?"x":"settings"}})],1),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,null,"b4971ba2",null);s.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{325:function(t,s,o){},427:function(t,s,o){"use strict";o(325)},478:function(t,s,o){"use strict";o.r(s);var i=o(453),e=o(454),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}}},a=(o(427),o(13)),l=Object(a.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"site-settings"},[t("button",{staticClass:"toggle",class:{active:this.showControls},attrs:{"aria-label":"Site Settings"},on:{click:this.toggle}},[t("v-icon",{attrs:{name:this.showControls?"x":"settings"}})],1),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,null,"b4971ba2",null);s.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/33.455e4582.js b/assets/js/33.f15d941e.js similarity index 75% rename from assets/js/33.455e4582.js rename to assets/js/33.f15d941e.js index 084aa452..22d68993 100644 --- a/assets/js/33.455e4582.js +++ b/assets/js/33.f15d941e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{338:function(t,s,i){},440:function(t,s,i){"use strict";i(338)},488:function(t,s,i){"use strict";i.r(s);var r={props:{src:String,title:String},computed:{isUrl(){return this.src.startsWith("https://")}}},e=(i(440),i(13)),n=Object(e.a)(r,(function(){var t=this._self._c;return this.isUrl?t("div",[t("iframe",{attrs:{title:this.title,src:this.src}})]):t("img",{attrs:{src:this.src,alt:this.title,width:"180",height:"180"}})}),[],!1,null,"e7a7a3f0",null);s.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{338:function(t,s,i){},441:function(t,s,i){"use strict";i(338)},489:function(t,s,i){"use strict";i.r(s);var r={props:{src:String,title:String},computed:{isUrl(){return this.src.startsWith("https://")}}},e=(i(441),i(13)),n=Object(e.a)(r,(function(){var t=this._self._c;return this.isUrl?t("div",[t("iframe",{attrs:{title:this.title,src:this.src}})]):t("img",{attrs:{src:this.src,alt:this.title,width:"180",height:"180"}})}),[],!1,null,"e7a7a3f0",null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/34.3fd048ca.js b/assets/js/34.bd864f8b.js similarity index 96% rename from assets/js/34.3fd048ca.js rename to assets/js/34.bd864f8b.js index 841a45f8..aacf1479 100644 --- a/assets/js/34.3fd048ca.js +++ b/assets/js/34.bd864f8b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{339:function(e,t,o){},441:function(e,t,o){"use strict";o(339)},489: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(441),o(13)),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([[34],{339:function(e,t,o){},442:function(e,t,o){"use strict";o(339)},490: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(442),o(13)),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/35.fd510266.js b/assets/js/35.e7a51b46.js similarity index 66% rename from assets/js/35.fd510266.js rename to assets/js/35.e7a51b46.js index a2336474..e15ebddb 100644 --- a/assets/js/35.fd510266.js +++ b/assets/js/35.e7a51b46.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{340:function(t,n,s){},442:function(t,n,s){"use strict";s(340)},490:function(t,n,s){"use strict";s.r(n);var i={props:{layout:String}},u=(s(442),s(13)),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([[35],{340:function(t,n,s){},443:function(t,n,s){"use strict";s(340)},491:function(t,n,s){"use strict";s.r(n);var i={props:{layout:String}},u=(s(443),s(13)),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/36.b0a85034.js b/assets/js/36.1c346439.js similarity index 86% rename from assets/js/36.b0a85034.js rename to assets/js/36.1c346439.js index 816d0174..eb828ecb 100644 --- a/assets/js/36.b0a85034.js +++ b/assets/js/36.1c346439.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{341:function(t,s,e){},443:function(t,s,e){"use strict";e(341)},491: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(443),e(13)),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([[36],{341:function(t,s,e){},444:function(t,s,e){"use strict";e(341)},492: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(444),e(13)),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/37.efdbc298.js b/assets/js/37.9e1c9178.js similarity index 86% rename from assets/js/37.efdbc298.js rename to assets/js/37.9e1c9178.js index 64252a9b..623224bc 100644 --- a/assets/js/37.efdbc298.js +++ b/assets/js/37.9e1c9178.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{326:function(s,t,e){},427:function(s,t,e){"use strict";e(326)},478:function(s,t,e){"use strict";e.r(t);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"]};var a={props:{app:{type:String,required:!0}},computed:{links(){return i[this.app]}},methods:{getImageProps(s){const t={width:300};return s.includes("play.google.com")?(t.alt="Play Store",t.src="/assets/access-store.png"):(t.alt="Web App",t.src="/assets/access-web.png"),t}}},n=(e(427),e(13)),o=Object(n.a)(a,(function(){var s=this,t=s._self._c;return t("div",{staticClass:"access"},s._l(s.links,(function(e){return t("a",{key:e,attrs:{href:e,target:"_blank"}},[t("img",s._b({},"img",s.getImageProps(e),!1))])})),0)}),[],!1,null,"17f3a2e1",null);t.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{326:function(s,t,e){},428:function(s,t,e){"use strict";e(326)},479:function(s,t,e){"use strict";e.r(t);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"]};var a={props:{app:{type:String,required:!0}},computed:{links(){return i[this.app]}},methods:{getImageProps(s){const t={width:300};return s.includes("play.google.com")?(t.alt="Play Store",t.src="/assets/access-store.png"):(t.alt="Web App",t.src="/assets/access-web.png"),t}}},n=(e(428),e(13)),o=Object(n.a)(a,(function(){var s=this,t=s._self._c;return t("div",{staticClass:"access"},s._l(s.links,(function(e){return t("a",{key:e,attrs:{href:e,target:"_blank"}},[t("img",s._b({},"img",s.getImageProps(e),!1))])})),0)}),[],!1,null,"17f3a2e1",null);t.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/38.d113d8a5.js b/assets/js/38.263842b0.js similarity index 85% rename from assets/js/38.d113d8a5.js rename to assets/js/38.263842b0.js index 11934341..bc5a2f42 100644 --- a/assets/js/38.d113d8a5.js +++ b/assets/js/38.263842b0.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{327:function(t,a,e){},428:function(t,a,e){"use strict";e(327)},479: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(428),e(13)),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([[38],{327:function(t,a,e){},429:function(t,a,e){"use strict";e(327)},480: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(429),e(13)),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/39.5a096972.js b/assets/js/39.d2ee2b6b.js similarity index 66% rename from assets/js/39.5a096972.js rename to assets/js/39.d2ee2b6b.js index 97c2ec2b..5cc39329 100644 --- a/assets/js/39.5a096972.js +++ b/assets/js/39.d2ee2b6b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{328:function(t,n,s){},429:function(t,n,s){"use strict";s(328)},480:function(t,n,s){"use strict";s.r(n);var i={},c=(s(429),s(13)),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 +(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{328:function(t,n,s){},430:function(t,n,s){"use strict";s(328)},481:function(t,n,s){"use strict";s.r(n);var i={},c=(s(430),s(13)),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/4.cae2a299.js b/assets/js/4.7172deec.js similarity index 84% rename from assets/js/4.cae2a299.js rename to assets/js/4.7172deec.js index 5c7c4c8d..3048f8f8 100644 --- a/assets/js/4.cae2a299.js +++ b/assets/js/4.7172deec.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{395:function(t,a,s){t.exports=s.p+"assets/img/snake-intro.eb93ba77.png"},396:function(t,a,s){t.exports=s.p+"assets/img/snake-gameplay.17189f88.png"},397:function(t,a,s){t.exports=s.p+"assets/img/brick-intro.9af9d339.png"},398:function(t,a,s){t.exports=s.p+"assets/img/brick-gameplay.e2169365.png"},399:function(t,a,s){t.exports=s.p+"assets/img/dino-intro.0794c934.png"},400:function(t,a,s){t.exports=s.p+"assets/img/dino-gameplay.12ab28dc.png"},401:function(t,a,s){t.exports=s.p+"assets/img/monogram-intro.835a6b4b.png"},402:function(t,a,s){t.exports=s.p+"assets/img/monogram-gameplay.bcc4ca97.png"},518:function(t,a,s){"use strict";s.r(a);var e=s(13),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(395),alt:"Snake intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(396),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(397),alt:"Brick breaker intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(398),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(399),alt:"Chrome Dino intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(400),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(401),alt:"Monogram intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(402),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],{396:function(t,a,s){t.exports=s.p+"assets/img/snake-intro.eb93ba77.png"},397:function(t,a,s){t.exports=s.p+"assets/img/snake-gameplay.17189f88.png"},398:function(t,a,s){t.exports=s.p+"assets/img/brick-intro.9af9d339.png"},399:function(t,a,s){t.exports=s.p+"assets/img/brick-gameplay.e2169365.png"},400:function(t,a,s){t.exports=s.p+"assets/img/dino-intro.0794c934.png"},401:function(t,a,s){t.exports=s.p+"assets/img/dino-gameplay.12ab28dc.png"},402:function(t,a,s){t.exports=s.p+"assets/img/monogram-intro.835a6b4b.png"},403:function(t,a,s){t.exports=s.p+"assets/img/monogram-gameplay.bcc4ca97.png"},518:function(t,a,s){"use strict";s.r(a);var e=s(13),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(396),alt:"Snake intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(397),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(398),alt:"Brick breaker intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(399),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(400),alt:"Chrome Dino intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(401),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(402),alt:"Monogram intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(403),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.ba31ef42.js b/assets/js/40.841d74b8.js similarity index 72% rename from assets/js/40.ba31ef42.js rename to assets/js/40.841d74b8.js index 04d02dc4..d89eeb15 100644 --- a/assets/js/40.ba31ef42.js +++ b/assets/js/40.841d74b8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{330:function(n,t,r){},431:function(n,t,r){"use strict";r(330)},482:function(n,t,r){"use strict";r.r(t);var s={props:{current:String,tags:Array}},u=(r(431),r(13)),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([[40],{330:function(n,t,r){},432:function(n,t,r){"use strict";r(330)},483:function(n,t,r){"use strict";r.r(t);var s={props:{current:String,tags:Array}},u=(r(432),r(13)),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/41.c0680caa.js b/assets/js/41.1556847b.js similarity index 82% rename from assets/js/41.c0680caa.js rename to assets/js/41.1556847b.js index f77bd40e..51637f87 100644 --- a/assets/js/41.c0680caa.js +++ b/assets/js/41.1556847b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{331:function(t,e,s){},432:function(t,e,s){"use strict";s(331)},483: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(432),s(13)),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([[41],{331:function(t,e,s){},433:function(t,e,s){"use strict";s(331)},484: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(433),s(13)),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/42.389ea041.js b/assets/js/42.45b45e52.js similarity index 88% rename from assets/js/42.389ea041.js rename to assets/js/42.45b45e52.js index 17517eba..1f0ac36b 100644 --- a/assets/js/42.389ea041.js +++ b/assets/js/42.45b45e52.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{332:function(e,t,r){},433:function(e,t,r){"use strict";r(332)},484:function(e,t,r){"use strict";r.r(t);r(48);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(433),r(13)),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([[42],{332:function(e,t,r){},434:function(e,t,r){"use strict";r(332)},485:function(e,t,r){"use strict";r.r(t);r(48);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(434),r(13)),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/43.ce1c9168.js b/assets/js/43.bbc54db2.js similarity index 81% rename from assets/js/43.ce1c9168.js rename to assets/js/43.bbc54db2.js index 3ce277b5..31fa99bd 100644 --- a/assets/js/43.ce1c9168.js +++ b/assets/js/43.bbc54db2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{333:function(t,e,r){},434:function(t,e,r){"use strict";r(333)},485: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(434),r(13)),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([[43],{333:function(t,e,r){},435:function(t,e,r){"use strict";r(333)},486: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(435),r(13)),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/44.60e928bf.js b/assets/js/44.0d391d0c.js similarity index 74% rename from assets/js/44.60e928bf.js rename to assets/js/44.0d391d0c.js index 22a279b8..a150dd03 100644 --- a/assets/js/44.60e928bf.js +++ b/assets/js/44.0d391d0c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{336:function(t,n,e){},438:function(t,n,e){"use strict";e(336)},487:function(t,n,e){"use strict";e.r(n);var i={props:{hideCommentCount:Boolean,hideShareLinks:Boolean}},s=(e(438),e(13)),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,"025be346",null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{336:function(t,n,e){},439:function(t,n,e){"use strict";e(336)},488:function(t,n,e){"use strict";e.r(n);var i={props:{hideCommentCount:Boolean,hideShareLinks:Boolean}},s=(e(439),e(13)),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,"025be346",null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/46.d2ad64fb.js b/assets/js/46.80a31ea2.js similarity index 99% rename from assets/js/46.d2ad64fb.js rename to assets/js/46.80a31ea2.js index b06d7dd9..54f86f8e 100644 --- a/assets/js/46.d2ad64fb.js +++ b/assets/js/46.80a31ea2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{373:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},374:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},501:function(e,t,a){"use strict";a.r(t);var o=a(13),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(373),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(374),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([[46],{373:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},374:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},502:function(e,t,a){"use strict";a.r(t);var o=a(13),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(373),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(374),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/47.52511ab3.js b/assets/js/47.58c74322.js similarity index 99% rename from assets/js/47.52511ab3.js rename to assets/js/47.58c74322.js index c6aa0e17..77b758d7 100644 --- a/assets/js/47.52511ab3.js +++ b/assets/js/47.58c74322.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{386:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},387:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},509:function(e,t,o){"use strict";o.r(t);var i=o(13),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(386),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(387),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([[47],{386:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},387:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},510:function(e,t,o){"use strict";o.r(t);var i=o(13),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(386),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(387),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/48.783d655f.js b/assets/js/48.9350caad.js similarity index 92% rename from assets/js/48.783d655f.js rename to assets/js/48.9350caad.js index 8c01c095..a057d5de 100644 --- a/assets/js/48.783d655f.js +++ b/assets/js/48.9350caad.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{388:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},389:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},510:function(e,t,s){"use strict";s.r(t);var a=s(13),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(388),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(389),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([[48],{390:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},391:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},512:function(e,t,s){"use strict";s.r(t);var a=s(13),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(390),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(391),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/49.ad5ebd4d.js b/assets/js/49.655d1b52.js similarity index 98% rename from assets/js/49.ad5ebd4d.js rename to assets/js/49.655d1b52.js index f7c15e99..164bfec0 100644 --- a/assets/js/49.ad5ebd4d.js +++ b/assets/js/49.655d1b52.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{393:function(t,a,s){t.exports=s.p+"assets/img/wmc-homescreen-win7simu.d3a11197.png"},394:function(t,a,s){t.exports=s.p+"assets/img/wmc-homescreen-original.23635b07.png"},512:function(t,a,s){"use strict";s.r(a);var e=s(13),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(393),alt:"Windows Media Center Home Screen in Win7 Simu"}})]),t._v(" "),a("td",{staticStyle:{"text-align":"center"}},[a("img",{attrs:{src:s(394),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("