

JavaScript simulation of an iPad - rafaelc
http://alexw.me/ipad/

======
solipsist
This is extremely impressive! It always surprises me how far people can go
with web scripting languages like JavaScript and CSS. In fact, it reminds me
of the iPhone icons made purely out of CSS[1]

Anyways, for anyone who is interested, the only two apps that work are
_Safari_ and _Maps_.

And for anyone who can't access it, here are the features:

    
    
         In the meanwhie, you are welcome to checkout my blog : alexw.me
         You can also fork this at https://github.com/altryne/Ipad-Simulator
         and hack on this and do cool stuff because open souce rulez
    
         Things that work :
    
         -Moving Screens left and right with "spring" effect
    
         -Dock icons have css3 "reflection" ;)
    
         -All icons have css3 rounded corners and shadow similar to Ipads
    
         -Search works almost identically to the ios. (using modified jquery live-search)
    
         -Lock screen effect with returning lock
    
         -Home button works (exits apps, goes to first page,
          return from sleep mode,exits edit mode)
    
         -Sleep button puts iPad in sleep mode
    
         -Edit Mode: click and hold on any app for 2 seconds to enable edit mode
    
            °Edit mode icons shake in chrome (using css animation)
    
            °Move apps from place to place in edit mode
    
            °Move apps to another page
    
            °Move apps to dock
    
            °Delete Apps
    

All he/she needs to add is multitasking and I think the app (or should I say,
operating system) is complete!

[1] - <http://graphicpeel.com/cssiosicons>

~~~
monos

        This is extremely impressive! It always surprises me how 
        far people can go with web scripting languages like
        JavaScript and CSS.
    

I hate to be the one who pisses on this nice looking project... but you guys
do realize that this is not a "simulation of an ipad".

This a couple of jQuery plugins and ~200 LOC of JavaScript to make it look
like the iPad interface.

Did anyone actually look at the code?

I'm not even sure I understand what the point of this is.

~~~
solipsist
>but you guys do realize that this is not a "simulation of an ipad"

How is it not? Regardless of the code, doesn't it perfectly emulate some key
features of iOS? Understanding the point is another argument...

------
christophe971
Surprisingly enough, it does work on the iPad. It is slow as hell of course,
with a real problem of adjusting to the screen size, but it works !

~~~
dools
Yeah i just loaded this in my iPad. Reminds me of browserling.com. We put an
iPad in your iPad.

~~~
epochwolf
So you can touch while you touch?

------
shadowpwner
I thought this was pretty cool at first, then I checked the useragent of the
Safari browser on the simulated iPad:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10
(KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Now I'm seriously impressed.

~~~
altryne
thanx, then you would probably like to hear that it tried to remove all flash
also, and replace it with the blue lego thingie :)

~~~
maushu
Brilliant touch, I laughed when I noticed it. Shame that drag and drop doesn't
scroll the page.

------
jonknee
It's minor, but there is no messaging app on the iPad...

------
code_duck
Yeah, he did a great job with this! I saw it on forrst a while back (
<http://forrst.com/posts/iPad_simulator_with_jQuery_Css3-CTA> ). I love how
the browser works.

------
ronnier
Slightly similar (framing content inside of images to mimic other
environments), I just added a boss key to viewtext.org to view web pages in a
window that looks like Visual Studio. I plan on adding other environments
soon.

Example:

[http://viewtext.org/article?url=http://weblog.raganwald.com/...](http://viewtext.org/article?url=http://weblog.raganwald.com/2006/06/my-
favourite-interview-question.html&format=visualstudio2010)

------
comex
Font is wrong, app names are in the wrong case, "slide to unlock" bar/text is
_way_ wrong, icons are wrong...

Why would you simulate some things (search, SpringBoard animations) with a
very high level of detail, but completely neglect others?

------
haxplorer
Nothing other than maps works.

~~~
beej71
Nonsense! The browser running the iPad Simulation works! :)

Well, kinda.

------
wikirobot
it is impressive but I saw one similar to it a while back here :
<http://sachleen.com/iPad/> he also has a few other simulations

~~~
solipsist
This seems to be merely a web app that changes a photo when you press
different areas of it. It's cool, but no where near as interactive as the
alexw.me one IMO.

------
bound008
alarm clock doesn't work. how ironic.

------
phlee
Flash works!

------
ot
iPad simulator inside Safari inside iPad simulator doesn't work :(

~~~
henry81
yes it does :)

~~~
ot
Doesn't work for me :-/ It shows the unstyled text. Using chrome 9 beta

~~~
acangiano
Remove the www.

------
stretchwithme
oops. Chrome no like.

"Warning: Suspected phishing site!"

------
isak2
Cool. But why?

~~~
dshankar
Why NOT? This is a very cool CSS/Javascript hack, I love it

------
OwlHuntr
pretty cool! hope it comes out well

------
rman666
No USB port on this one either!

------
oliverdamian
good job!

------
geekytenny
very nice

------
stretchwithme
cool app of the day!

