Windows 10 simulation in HTML5, jQuery and CSS3

edited August 2017 in Programming
So I've created this Windoze 10 simulation in HTML5, jQuery, and CSS3. I've been wanting to post this for a while but never got around to it.

Here's the link: https://goo.gl/bxEHfo

Try dragging the windows around and using the File menu in Notepad.

Thoughts?

Note: If something isn't working, chances are I haven't added that functionality yet.

Comments

  • That's actually pretty cool. It kind of reminds me of a website I used to know of (can't find it now) that had a bunch of "virtual machines" that were really just static images with links in various places. Your site is more "useful" than what I remember about that other site. It was really just screenshots of various menus and programs. I've never thought about making something like you've done. Is it just a hobby, or what?
  • Yeah, it's just a hobby. I really don't have much time to work on it anymore, but I do have plans for it in the works.
  • Very nice. Did you recreate all of this or did you copy source code?

    Next step: Make it so it can run Win32 applications.
  • Win98Rocks wrote:
    Very nice. Did you recreate all of this or did you copy source code?

    Next step: Make it so it can run Win32 applications.

    It's in HTML, so no, I obviously had to recreate it from scratch. As a result, some things may not behave exactly like Windows (especially the window opening/closing animations, which I had to do using jQuery).

    Running Win32 applications? Probably not. If you really want to run Windows apps online, try these websites:
    https://online.cameyo.com/public
    http://www.turbo.net

    Windows browser testing sites:
    http://www.cloudinternetexplorer.com
    http://www.browserstack.com (MS Edge testing is free forever)
    http://www.browserling.com (My personal favorite)
  • I believe there is an online Windows 8 v2 simulation in html, javascript, and css, and I'm not sure where the original website went. However, I did find a deviant art link at http://ntim007.deviantart.com/art/Online-Windows-8-v2-335786776.
  • I happen to have the original files still on my computer, so I packed it up into a 7z file.
    Download Link:
    https://drive.google.com/file/d/0B5_XcFDFlHj4TzVGeUVYWXpXbkU/view?usp=sharing
  • I actually found a use for this site...
    I use it as a text editor in my amazon kindle!

  • Is everything working as expected?
  • I don't remember...
    sorry!

  • ...Pretty good for a first Windows 10 simulator.

  • @TheWindowsComputer said:
    ...Pretty good for a first Windows 10 simulator.

    It's not that much of a simulator. It's more like a recreation or replica.

  • @Erito17 said:

    @TheWindowsComputer said:
    ...Pretty good for a first Windows 10 simulator.

    It's not that much of a simulator. It's more like a recreation or replica.

    I see

  • Corrections to 'windows.js'

    Use this: var h = (h <= 9)? '0' + h : h; to display the time correctly

  • edited March 2018

    @saiet said:
    Corrections to 'windows.js'

    Use this: var h = (h <= 9)? '0' + h : h; to display the time correctly

    Thanks, but the USA localization of Windows 10 (what I'm basing it on) does not display a zero before single digit hours. So three o'clock PM is displayed as '3:00 PM' and not '03:00 PM'.

  • @Erito17 said:

    @saiet said:
    Corrections to 'windows.js'

    Use this: var h = (h <= 9)? '0' + h : h; to display the time correctly

    Thanks, but the USA localization of Windows 10 (what I'm basing it on) does not display a zero before single digit hours. So three o'clock PM is displayed as '3:00 PM' and not '03:00 PM'.

    Ohh, I'm working with your project, trying to make the start button functional, and I found something that could work ... I'm from Mexico

  • It would be cool if you added Cortana, or something like it. I wonder if you can embed personal buddy into HTML.

  • @droem said:
    It would be cool if you added Cortana, or something like it. I wonder if you can embed personal buddy into HTML.

    Perhaps something with dialogflow would work.

  • @saiet said:

    @Erito17 said:

    @saiet said:
    Corrections to 'windows.js'

    Use this: var h = (h <= 9)? '0' + h : h; to display the time correctly

    Thanks, but the USA localization of Windows 10 (what I'm basing it on) does not display a zero before single digit hours. So three o'clock PM is displayed as '3:00 PM' and not '03:00 PM'.

    Ohh, I'm working with your project, trying to make the start button functional, and I found something that could work ... I'm from Mexico

    Sure! Please share anything you find with me.

    Thanks.

  • Good news! The code is now in GitHub for all to see. Get a look at it here.

  • edited April 2018

    @Erito17 said:
    Good news! The code is now in GitHub for all to see. Get a look at it here.

    Also, here is a link to the newest version: https://nitinseshadri.github.io/win10css/
    Use this instead of the original appspot link, as that isn't updated that often.

    (Apologies for double post. It's been more than an hour since the previous post, so I couldn't edit it.)

  • @Erito17 said:

    @Erito17 said:
    Good news! The code is now in GitHub for all to see. Get a look at it here.

    Also, here is a link to the newest version: https://nitinseshadri.github.io/win10css/
    Use this instead of the original appspot link, as that isn't updated that often.

    (Apologies for double post. It's been more than an hour since the previous post, so I couldn't edit it.)

    Sounds great! These files are hosted on GitHub originally? So that appspot link is not updated often and I tested that site, I can't remember the day testing the site (I think it was Wednesday in my country (I'm from Brazil) for sure :)), I'll will use this link of the simulator in CSS3-based instead of the appspot link to this simulator.

  • @eduardokramerbr said:

    @Erito17 said:

    @Erito17 said:
    Good news! The code is now in GitHub for all to see. Get a look at it here.

    Also, here is a link to the newest version: https://nitinseshadri.github.io/win10css/
    Use this instead of the original appspot link, as that isn't updated that often.

    (Apologies for double post. It's been more than an hour since the previous post, so I couldn't edit it.)

    Sounds great! These files are hosted on GitHub originally? So that appspot link is not updated often and I tested that site, I can't remember the day testing the site (I think it was Wednesday in my country (I'm from Brazil) for sure :)), I'll will use this link of the simulator in CSS3-based instead of the appspot link to this simulator.

    The files were originally on appspot. I updated them (added new features) and re-posted to GitHub just a couple weeks ago. Don't use the appspot link anymore.

    BTW, it's been 3 years since I wrote the first line of code for this project. Most development was completed by 2 years ago with the last few months being bugfixes and updates.

  • @Erito17 said:

    @eduardokramerbr said:

    @Erito17 said:

    @Erito17 said:
    Good news! The code is now in GitHub for all to see. Get a look at it here.

    Also, here is a link to the newest version: https://nitinseshadri.github.io/win10css/
    Use this instead of the original appspot link, as that isn't updated that often.

    (Apologies for double post. It's been more than an hour since the previous post, so I couldn't edit it.)

    Sounds great! These files are hosted on GitHub originally? So that appspot link is not updated often and I tested that site, I can't remember the day testing the site (I think it was Wednesday in my country (I'm from Brazil) for sure :)), I'll will use this link of the simulator in CSS3-based instead of the appspot link to this simulator.

    The files were originally on appspot. I updated them (added new features) and re-posted to GitHub just a couple weeks ago. Don't use the appspot link anymore.

    BTW, it's been 3 years since I wrote the first line of code for this project. Most development was completed by 2 years ago with the last few months being bugfixes and updates.

    @Erito17 said:

    @eduardokramerbr said:

    @Erito17 said:

    @Erito17 said:
    Good news! The code is now in GitHub for all to see. Get a look at it here.

    Also, here is a link to the newest version: https://nitinseshadri.github.io/win10css/
    Use this instead of the original appspot link, as that isn't updated that often.

    (Apologies for double post. It's been more than an hour since the previous post, so I couldn't edit it.)

    Sounds great! These files are hosted on GitHub originally? So that appspot link is not updated often and I tested that site, I can't remember the day testing the site (I think it was Wednesday in my country (I'm from Brazil) for sure :)), I'll will use this link of the simulator in CSS3-based instead of the appspot link to this simulator.

    The files were originally on appspot. I updated them (added new features) and re-posted to GitHub just a couple weeks ago. Don't use the appspot link anymore.

    BTW, it's been 3 years since I wrote the first line of code for this project. Most development was completed by 2 years ago with the last few months being bugfixes and updates.

    It works on iOS (the version is 10.3.3) too, right?
    What language you wrote the code for this project @Erito17?

  • It's HTML so it should work on all modern browsers, and maybe some old ones. Last time I checked it still worked on IE7 to some extent.

  • Yes, very nice. But some features need to be done. :)

  • edited October 2018

    That is a great hobby Erito! This is actually pretty handy to make notes on the go! Great work. Here is a tip to help you with your upcoming web development projects. You can use cross browser testing tools to help you realize how the web page is rendered across different browser running on different OS over devices from various vendors. It will help you analyse your HTML5, jQuery and CSS3 so you can achieve a seamless web page, compatible across all browsers.

  • edited October 2018

    @jahmed2345 said:
    You can use cross browser testing tools to help you realize how the web page is rendered across different browser running on different OS over devices from various vendors.

    Yes, I've done this using Browserstack and other online tools. IIRC it worked fine on browsers as far back as IE7 and partially on IE6, thanks to my use of the HTML5Shiv shim.

Sign In or Register to comment.