Windows 10 simulation in HTML5, jQuery and CSS3

[Deleted User]

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.

jamie1130

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?

[Deleted User]

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.

Win98Rocks

Very nice. Did you recreate all of this or did you copy source code?

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

[Deleted User]

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)

whistler2250

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.

[Deleted User]

Link 404's.

whistler2250

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

HorseBatteryStaple

I actually found a use for this site...
I use it as a text editor in my amazon kindle!

[Deleted User]

Is everything working as expected?

HorseBatteryStaple

I don't remember...
sorry!

TheWindowsComputer

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

[Deleted User]

@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.

TheWindowsComputer

@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

saiet

Corrections to 'windows.js'

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

[Deleted User]

@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'.

saiet

@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

droem

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

[Deleted User]

@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.

[Deleted User]

@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.

[Deleted User]

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

[Deleted User]

@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.)

eduardokramerbr

@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.

[Deleted User]

@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.

eduardokramerbr

@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?

[Deleted User]

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.

MacInTosh

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

jahmed2345

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.

[Deleted User]

@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.