git.sur5r.net Git - i3/i3.github.io/blob - screenshots/index.html.mako

   1 <%!
   2         section = "screens"
   3         javascript = 'gallery.min.2.js'
   4         require_jquery = True
   5         js_callback = 'initGallery();'
   6 %>
   7 <%inherit file="_templates/i3.mako" />
   8
   9 <div id="mask">
  10 </div>
  11
  12 <div id="loading">
  13 </div>
  14
  15 <div id="bigimg">
  16     <div id="maskouter">
  17         <div id="maskinner">
  18             <div id="imgleft">
  19             </div>
  20             <div id="imgright">
  21             </div>
  22             <div id="imgdesc">
  23             <span class="filename">i3-2.png</span>
  24             <span class="description">VIM, MPlayer</span>
  25             </div>
  26         </div>
  27     </div>
  28 </div>
  29
  30 <div id="content">
  31
  32 <h2>Latest Video</h2>
  33
  34 <div id="screencasts">
  35     <div class="video clearfix">
  36         <a href="http://www.youtube.com/watch?v=Wx0eNaGzAZU" title="Watch i3 screencast v4.1 on YouTube">
  37         <img src="/img/screencast-3.d.thumb.png" width="240" height="150" border="0" alt="Screencast thumbnail" style="float: left">
  38         </a>
  39         <div style="float: left">
  40             <strong>Screencast of v4.1</strong>
  41             <p>
  42             This video (5 min) shows the basic features of i3:
  43             </p>
  44             <ul>
  45                 <li>Layouts, Focus, Moving, Workspaces</li>
  46                 <li>dmenu, Floating Windows, Resizing</li>
  47             </ul>
  48             <p>
  49             <a href="http://www.youtube.com/watch?v=Wx0eNaGzAZU">Watch it on YouTube</a> or <a href="/screenshots/screencast-4.1.mp4">download it (18 MB)</a>.
  50             </p>
  51         </div>
  52     </div>
  53
  54     <br style="clear: both">
  55     <br>
  56
  57     <div class="video clearfix">
  58         <a href="http://www.youtube.com/watch?v=QnYN2CTb1hM" title="Watch i3 google tech talk on YouTube">
  59         <img src="/img/techtalk.thumb.jpg" width="240" height="135" border="0" alt="tech talk thumbnail" style="float: left">
  60         </a>
  61         <div style="float: left">
  62             <strong>Google Tech Talk about i3</strong>
  63             <p style="white-space: pre">This video (1 hour) is an introduction to i3, explaining our
  64 motivation, a bit of history, some cool features and how we
  65 develop.</p>
  66             <p>
  67             <a href="http://www.youtube.com/watch?v=QnYN2CTb1hM">Watch it on YouTube</a>
  68             </p>
  69         </div>
  70     </div>
  71 </div>
  72
  73 <h2>Screenshots</h2>
  74
  75 <p>
  76 To get a quick impression of i3, have a look at these screenshots.
  77 </p>
  78
  79 <div class="screenshots clearfix">
  80 <%
  81         screens = [
  82                 [
  83                   "/screenshots/i3-1.png",
  84                   "/screenshots/i3-1.thumb.png",
  85                   "Vimperator, VIM, MPlayer, dzen2"
  86                 ],
  87                 [
  88                   "/screenshots/i3-2.png",
  89                   "/screenshots/i3-2.thumb.png",
  90                   "Vimperator, VIM, xpdf, bc"
  91                 ],
  92                 [
  93                   "/screenshots/i3-3.png",
  94                   "/screenshots/i3-3.thumb.png",
  95                   "PCManFM, ROXTerm, evince"
  96                 ],
  97                 [
  98                   "/screenshots/i3-4.png",
  99                   "/screenshots/i3-4.thumb.png",
 100                   "i3 logo out of terminals"
 101                 ],
 102                 [
 103                   "/screenshots/i3-6.png",
 104                   "/screenshots/i3-6.thumb.png",
 105                   "VIM, zsh, i3status (FreeBSD)"
 106                 ],
 107                 [
 108                   "/screenshots/i3-7.png",
 109                   "/screenshots/i3-7.thumb.png",
 110                   "GIMP, urxvt (both floating)"
 111                 ],
 112                 [
 113                   "/screenshots/i3-5.png",
 114                   "/screenshots/i3-5.thumb.png",
 115                   "mc, xosview, MPlayer, irssi, gajim"
 116                 ],
 117                 [
 118                   "/screenshots/i3-8.jpg",
 119                   "/screenshots/i3-8.thumb.jpg",
 120                   "git, synergy, htop, urxvt"
 121                 ],
 122                 [
 123                   "/screenshots/i3-9.png",
 124                   "/screenshots/i3-9.thumb.png",
 125                   "VIM, git, MPlayer, i3bar"
 126                 ],
 127                 [
 128                   "/screenshots/i3-10.png",
 129                   "/screenshots/i3-10.thumb.png",
 130                   "Right-to-left titles"
 131                 ]
 132         ]
 133
 134         c = 0
 135 %>
 136 % for link, thumb, description in screens:
 137
 138     <div class="shot">
 139         <a href="${link}"><img src="${thumb}" width="240" alt="(Screenshot) ${description}"></a><br>
 140         <span>${description}</span>
 141     </div>
 142
 143 <% c += 1 %>
 144 % if (c % 3) == 0:
 145 <br>
 146 % endif
 147 % endfor
 148
 149 </div>
 150
 151 </div>