2008-05-12 Maciej Stachowiak <mjs@apple.com>
[WebKit-https.git] / WebKitSite / demos / transitions-and-transforms / no-style.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Leopard Features Demo - No Styles</title>
5 </head>
6 <body>
7
8 <h1>Leopard Features Demo</h1>
9
10 <ul id="features">
11 <li>
12   <h2 class="name">Stacks</h2>
13   <div class="picture"><img src="Stacks.png"></div>
14   <div class="description">
15     <b>Stacks</b> are Dock items that gives you fast access to a
16     folder of files. When you click a stack, the files within spring
17     from the Dock in a fan or a grid, depending on the number of items
18     (or the preference you set). Leopard starts you off with two
19     premade stacks: one for downloads and the other for documents.
20   </div>
21 </li>
22 <li>
23   <h2 class="name">Cover Flow</h2>
24   <div class="picture"><img src="Finder Coverflow.png"></div>
25   <div class="description">
26     <b>Cover Flow</b> lets you flip through your documents as easily
27     as you flip through album art in iTunes. Cover Flow displays each
28     file as a large preview of its first page, and you can click
29     through multipage documents or play movies. Now you can actually
30     see your files in the Finder - not just as icons, but as they
31     really look.
32   </div>
33 </li>
34 <li>
35   <h2 class="name">Quick Look</h2>
36   <div class="picture"><img src="Quick Look.png"></div>
37   <div class="description">
38     <b>Quick Look</b> works with nearly every file on your system,
39     including images, text files, PDF documents and movies. Just tap
40     the Space bar to see a file in Quick Look, or click the Quick Look
41     icon in the Finder window (if it's not there already, add it by
42     selecting Customize Toolbar from the View menu in the Finder).
43   </div>
44 </li>
45 <li>
46   <h2 class="name">Time Machine</h2>
47   <div class="picture"><img src="Time Machine.png"></div>
48   <div class="description">
49     <b>Time Machine</b> backs up your system files, applications,
50     accounts, preferences, music, photos, movies, and documents. But
51     what makes Time Machine different from other backup applications
52     is that it not only keeps a spare copy of every file, it remembers
53     how your system looked on a given day.
54   </div>
55 </li>
56 <li>
57   <h2 class="name">Mail Stationery</h2>
58   <div class="picture"><img src="Mail Stationery.png"></div>
59   <div class="description">
60     <b>Mail Statienery</b> features 30 professionally designed
61     templates that make a virtual keepsake out of every email you
62     send. From invitations to birthday greetings, stationery templates
63     feature coordinated layouts, fonts, colors, and drag-and-drop
64     photo placement from your iPhoto library - everything to help you
65     get your point across.
66   </div>
67 </li>
68 <li>
69   <h2 class="name">Spaces</h2>
70   <div class="picture"><img src="Spaces.png"></div>
71   <div class="description">
72     <b>Spaces</b> lets you group your application windows and banish
73     clutter completely. Leopard gives you a space for everything and
74     makes it easy to switch between your spaces. Start by simply
75     clicking the Spaces icon in the Dock.
76   </div>
77 </li>
78 </ul>
79
80 <script>
81 var selected = null;
82
83 for (var n = document.getElementById("features").firstChild; n; n = n.nextSibling) {
84     n.onclick = function() {
85         if (this == selected) {
86             selected.className = "";
87             selected = null;
88         } else if(selected) {
89             selected.className = "";
90             selected = this;
91             selected.className = "enabled";
92         } else {
93             selected = this;
94             selected.className = "enabled";
95         }
96     }
97 }
98 </script>
99 </body>
100 </html>