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

   1 <%!
   2         section = "screens"
   3         javascript = 'gallery.min.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>
  23     </div>
  24 </div>
  25
  26 <div id="content">
  27
  28 <h2>Latest Video</h2>
  29
  30 <div id="screencasts">
  31     <div class="video clearfix">
  32         <a href="http://www.youtube.com/watch?v=pKfP7Ws-CN8" title="Watch i3 screencast v3.δ on YouTube">
  33         <img src="/img/screencast-3.d.thumb.png" width="240" height="150" border="0" alt="Screencast thumbnail" style="float: left">
  34         </a>
  35         <div style="float: left">
  36             <strong>Screencast of v3.δ</strong>
  37             <p>
  38             This video (5 min) shows the basic features of i3:
  39             </p>
  40             <ul>
  41                 <li>Layouts, Focus, Moving, Workspaces</li>
  42                 <li>dmenu, Floating Windows, Resizing</li>
  43                 <li>Window Borders, Urgency Hint, i3lock, i3status</li>
  44             </ul>
  45             <p>
  46             <a href="http://www.youtube.com/watch?v=pKfP7Ws-CN8">Watch it on YouTube</a> or <a href="/screenshots/screencast-3.d.mkv">download it (2.5 MB)</a>.
  47             </p>
  48         </div>
  49     </div>
  50 </div>
  51
  52 <h2>Screenshots</h2>
  53
  54 <p>
  55 To get a quick impression of i3, have a look at these screenshots.
  56 </p>
  57
  58 <div class="screenshots clearfix">
  59 <%
  60         screens = [
  61                 [
  62                   "/screenshots/i3-1.png",
  63                   "/screenshots/i3-1.thumb.png",
  64                   "Vimperator, VIM, MPlayer, dzen2"
  65                 ],
  66                 [
  67                   "/screenshots/i3-2.png",
  68                   "/screenshots/i3-2.thumb.png",
  69                   "Vimperator, VIM, xpdf, bc"
  70                 ],
  71                 [
  72                   "/screenshots/i3-3.png",
  73                   "/screenshots/i3-3.thumb.png",
  74                   "PCManFM, ROXTerm, evince"
  75                 ],
  76                 [
  77                   "/screenshots/i3-4.png",
  78                   "/screenshots/i3-4.thumb.png",
  79                   "i3 logo out of terminals"
  80                 ],
  81                 [
  82                   "/screenshots/i3-6.png",
  83                   "/screenshots/i3-6.thumb.png",
  84                   "VIM, zsh, i3status (FreeBSD)"
  85                 ],
  86                 [
  87                   "/screenshots/i3-7.png",
  88                   "/screenshots/i3-7.thumb.png",
  89                   "GIMP, urxvt (both floating)"
  90                 ],
  91                 [
  92                   "/screenshots/i3-5.png",
  93                   "/screenshots/i3-5.thumb.png",
  94                   "mc, xosview, MPlayer, irssi, gajim"
  95                 ],
  96                 [
  97                   "/screenshots/i3-8.jpg",
  98                   "/screenshots/i3-8.thumb.jpg",
  99                   "git, synergy, htop, urxvt"
 100                 ],
 101                 [
 102                   "/screenshots/i3-9.png",
 103                   "/screenshots/i3-9.thumb.png",
 104                   "VIM, git, MPlayer, i3bar"
 105                 ]
 106
 107         ]
 108
 109         c = 0
 110 %>
 111 % for link, thumb, description in screens:
 112
 113     <div class="shot">
 114         <a href="${link}"><img src="${thumb}" width="240" alt="(Screenshot) ${description}"></a><br>
 115         <span>${description}</span>
 116     </div>
 117
 118 <% c += 1 %>
 119 % if (c % 3) == 0:
 120 <br>
 121 % endif
 122 % endfor
 123
 124 </div>
 125
 126 </div>