app/views/download/html.erb

   1 <%
   2 def gradient(top, mid, btm)
   3   "  background: #{mid};\n" +
   4   "  background: -webkit-gradient(linear, left top, left bottom, from(#{top}), to(#{btm}));\n" +
   5   "  background: -moz-linear-gradient(top,  #{top},  #{btm});\n" +
   6   "  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{top}', endColorstr='#{btm}');"
   7 end
   8 %>
   9 <!DOCTYPE html>
  10 <html>
  11 <head>
  12 <style>
  13 body {
  14   font: 0.8em "DejaVu Sans", "Bitstream Vera Sans", Verdana, sans-serif;
  15   margin: 16px;
  16   margin-top: 0px;
  17   padding: 0;
  18 }
  19 .soo_line {
  20   color: #480;
  21   clear: both;
  22   border-bottom: 1px solid #CCC;
  23   padding-top: 10px;
  24   font-size: 1.1em;
  25   display: none;
  26 }
  27 .soo_line span {
  28   float: right;
  29   cursor: pointer;
  30 }
  31 .soo_line_visible {
  32   display: block;
  33 }
  34 .soo_button {
  35   display: block;
  36   float: left;
  37   cursor: pointer;
  38   border: 1px solid transparent;
  39   padding: 3px 5px;
  40   margin: 0 .5em 0 0;
  41   -moz-border-radius: 8px;
  42   border-radius: 8px;
  43 }
  44 .soo_button:hover, .soo_button_chosen {
  45   border: 1px solid #BE7;
  46 <%= gradient('#FCFCFC','#F0F0F0','#E4E4E4')%>
  47 }
  48 .soo_button p {
  49   font-size: 0.75em;
  50   text-align: center;
  51   margin: 0;
  52 }
  53 .soo_ymplink, .soo_pkglink {
  54   font-size: 0.85em;
  55   color: white;
  56   display: block;
  57   margin: 6px;
  58   line-height: 24px;
  59   font-weight: bolder;
  60   float: left;
  61   text-decoration: none;
  62   height: 24px;
  63   text-align: center;
  64   -moz-border-radius: 12px;
  65   border-radius: 12px;
  66   padding-left: 8px;
  67   padding-right: 8px;
  68 }
  69 .soo_ymplink {
  70 <%= gradient('#9D0','#7B0','#580') %>
  71   border: 1px solid #490;
  72   min-width: 112px;
  73 }
  74 .soo_pkglink {
  75 <%= gradient('#09D','#07B','#058') %>
  76   border: 1px solid #049;
  77   min-width: 64px;
  78 }
  79 pre {
  80   background: #EEE;
  81   border: 1px dotted #888;
  82   padding: 4px;
  83   margin-left: 2em;
  84   font-size: 1.2em;
  85   overflow-x: auto;
  86 }
  87 pre a {
  88   text-decoration: none;
  89   color: #008;
  90 }
  91 .soo_distro {
  92   display: none;
  93 }
  94 </style>
  95 <%= javascript_include_tag "http://static.opensuse.org/themes/bento/js/jquery.js" %>
  96 <script type="text/javascript">
  97 $(function(){
  98   $('.soo_button').click(function(){
  99     $('.soo_line').show();
 100     $('.soo_button').removeClass('soo_button_chosen');
 101     $(this).addClass('soo_button_chosen');
 102     $('.soo_distro').hide();
 103     $('.soo_distro_' + $(this).attr('id').replace('soo_button_','')).show();
 104   });
 105
 106   $('.soo_line span').click(function(){
 107       $('#' + $(this).attr('id').replace('toggle_', '')).toggle();
 108       $(this).text( $(this).text() == 'V' ? '>' : 'V');
 109   });
 110
 111 // try to detect distro via user agent
 112   if (navigator.userAgent.indexOf('CentOS') > 0 ) $('#soo_button_CentOS').click();
 113   if (navigator.userAgent.indexOf('Debian') > 0 ) $('#soo_button_Debian').click();
 114   if (navigator.userAgent.indexOf('Fedora') > 0 ) $('#soo_button_Fedora').click();
 115   if (navigator.userAgent.indexOf('Mandriva') > 0 ) $('#soo_button_Mandriva').click();
 116   if (navigator.userAgent.indexOf('Mageia') > 0 ) $('#soo_button_Mageia').click();
 117   if (navigator.userAgent.indexOf('Red Hat') > 0 ) $('#soo_button_RHEL').click();
 118   if (navigator.userAgent.indexOf('SUSE') > 0 ) $('#soo_button_openSUSE').click();
 119   if (navigator.userAgent.indexOf('buntu') > 0 ) $('#soo_button_Ubuntu').click();
 120 });
 121 </script>
 122 </head>
 123 <body>
 124
 125 <div class="soo_box">
 126   <p class="soo_line soo_line_visible">Select Your Operating System</p>
 127   <% @flavors.each do |flavor| %>
 128   <div class="soo_button" id="soo_button_<%= flavor %>"><img src="<%= image_path('download/' + flavor.downcase + '.png') %>" alt="<%= flavor %>" /><p><%= flavor %></p></div>
 129   <% end %>
 130 </div>
 131
 132 <div id="soo_ymp" class="soo_box">
 133   <p class="soo_line">Install using One Click Install<span id="soo_section_toggle_ymp">V</span></p>
 134   <div id="soo_section_ymp">
 135   <% @data.select {|k,v| v.has_key?(:ymp)}.each do |k,v| %>
 136   <a class="soo_ymplink soo_distro soo_distro_<%= v[:flavor] %>" href="<%= v[:ymp] %>"><%= k.gsub('_', ' ') %></a>
 137   <% end %>
 138   </div>
 139 </div>
 140
 141 <div id="soo_repo" class="soo_box">
 142   <p class="soo_line">Add repository and install manually<span id="soo_section_toggle_repo">V</span></p>
 143   <div id="soo_section_repo">
 144   <% @data.select {|k,v| v.has_key?(:repo)}.each do |k,v| %>
 145   <div class="soo_repoinfo soo_distro soo_distro_<%= v[:flavor] %>">
 146   <p>For <strong><%= k.gsub('_', ' ') %></strong> run the following as <strong>root</strong>:</p>
 147   <pre><%=
 148     case v[:flavor]
 149       when 'openSUSE', 'SLE'
 150         "zypper addrepo #{v[:repo]}#{@prj}.repo\nzypper refresh\nzypper install #{@pkg}"
 151       when 'CentOS', 'Fedora', 'RHEL'
 152         "cd /etc/yum/repos.d/\nwget #{v[:repo]}#{@prj}.repo\nyum update\nyum install #{@pkg}"
 153       when 'Debian', 'Ubuntu'
 154         "echo 'deb #{v[:repo]} ./' > /etc/apt/sources.list\napt-get update\napt-get install #{@pkg}"
 155       when 'Mageia', 'Mandriva'
 156         "urpmi.addmedia #{@prj} #{v[:repo]}\nurpmi.update -a\nurpmi #{@pkg}"
 157       else
 158         '?'
 159     end
 160   %></pre>
 161   </div>
 162   <% end %>
 163   </div>
 164 </div>
 165
 166 <div id="soo_pkg" class="soo_box">
 167   <p class="soo_line">Grab binary packages directly<span id="soo_section_toggle_pkg">V</span></p>
 168   <div id="soo_section_pkg">
 169   <table>
 170   <% @data.select {|k,v| v.has_key?(:pkg)}.each do |k,v| %>
 171   <tr class="soo_pkginfo soo_distro soo_distro_<%= v[:flavor] %>"><td>Packages for <strong><%= k.gsub('_', ' ') %></strong>:</td>
 172   <% v[:pkg].each do |k,v| %>
 173   <td><a class="soo_pkglink" href="<%= v %>"><%= k %></a></td>
 174   <% end %>
 175   </tr>
 176   <% end %>
 177   </table>
 178   </div>
 179 </div>
 180
 181 </body>
 182 </html>