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