From d7046f5d38004ff20739798c18f5796c31676546 Mon Sep 17 00:00:00 2001
From: yorhel <yorhel@1fe2e327-d9db-4752-bcf7-ef0cb4a1748b>
Date: Sun, 13 Apr 2008 13:45:20 +0000
Subject: W00t, VNDB on SVN!

git-svn-id: svn://vndb.org/vndb@1 1fe2e327-d9db-4752-bcf7-ef0cb4a1748b
---
 static/files/def.js         | 239 +++++++++++++++
 static/files/dyna.js        | 579 +++++++++++++++++++++++++++++++++++
 static/files/footer.gif     | Bin 0 -> 91 bytes
 static/files/graph.png      | Bin 0 -> 601 bytes
 static/files/headerbg.jpg   | Bin 0 -> 6068 bytes
 static/files/headerbot.png  | Bin 0 -> 2343 bytes
 static/files/platforms.png  | Bin 0 -> 2353 bytes
 static/files/rss.png        | Bin 0 -> 735 bytes
 static/files/select.png     | Bin 0 -> 1165 bytes
 static/files/sidebarbg.jpg  | Bin 0 -> 3035 bytes
 static/files/sidebarbot.jpg | Bin 0 -> 1642 bytes
 static/files/sidebg.jpg     | Bin 0 -> 553 bytes
 static/files/style.css      | 729 ++++++++++++++++++++++++++++++++++++++++++++
 static/files/warning.png    | Bin 0 -> 2348 bytes
 14 files changed, 1547 insertions(+)
 create mode 100644 static/files/def.js
 create mode 100644 static/files/dyna.js
 create mode 100644 static/files/footer.gif
 create mode 100644 static/files/graph.png
 create mode 100644 static/files/headerbg.jpg
 create mode 100644 static/files/headerbot.png
 create mode 100644 static/files/platforms.png
 create mode 100644 static/files/rss.png
 create mode 100644 static/files/select.png
 create mode 100644 static/files/sidebarbg.jpg
 create mode 100644 static/files/sidebarbot.jpg
 create mode 100644 static/files/sidebg.jpg
 create mode 100644 static/files/style.css
 create mode 100644 static/files/warning.png

(limited to 'static')

diff --git a/static/files/def.js b/static/files/def.js
new file mode 100644
index 00000000..fcb98421
--- /dev/null
+++ b/static/files/def.js
@@ -0,0 +1,239 @@
+
+
+/*  G L O B A L   S T U F F  */
+
+function x(y){return document.getElementById(y)}
+function cl(o,f){if(x(o))x(o).onclick=f}
+function DOMLoad(y){var d=0;var f=function(){if(d++)return;y()};
+if(document.addEventListener)document.addEventListener("DOMCont"
++"entLoaded",f,false);document.write("<script id=_ie defer src="
++"javascript:void(0)><\/script>");document.getElementById('_ie')
+.onreadystatechange=function(){if(this.readyState=="complete")f()
+};if(/WebKit/i.test(navigator.userAgent))var t=setInterval(
+function(){if(/loaded|complete/.test(document.readyState)){
+clearInterval(t);f()}},10);window.onload=f;}
+
+
+
+
+/*   F O R M   S U B S  */
+
+var formsubs = [];
+function formhid() {
+  var i;
+  var j;
+  var l = document.forms[1].getElementsByTagName('a');
+  for(i=0; i<l.length; i++)
+    if(l[i].className.indexOf('s_') != -1) {
+      formsubs[ l[i].className.substr(l[i].className.indexOf('s_')+2) ] = 0;
+      l[i].onclick = function() {
+        formtoggle(this.className.substr(this.className.indexOf('s_')+2));
+        return false;
+      };
+    }
+
+  if(x('_hid') && x('_hid').value.length > 1) {
+    l = x('_hid').value.split(/,/);
+    for(i in formsubs) {
+      var inz=0;
+      for(j=0; j<l.length; j++)
+        if(l[j] == i)
+          inz = 1;
+      if(!inz)
+        formsubs[i] = !formsubs[i];
+    }
+  }
+}
+function formtoggle(n) {
+  formsubs[n] = !formsubs[n];
+  var i;
+  var l = document.forms[1].getElementsByTagName('a');
+  for(i=0; i<l.length; i++)
+    if(l[i].className.indexOf('s_'+n) != -1)
+      l[i].innerHTML = (formsubs[n] ? '&#9656;' : '&#9662;') + l[i].innerHTML.substr(1);
+
+  l = document.forms[1].getElementsByTagName('li');
+  for(i=0; i<l.length; i++)
+    if(l[i].className.indexOf('sf_'+n) != -1) {
+      if(formsubs[n])
+        l[i].className += ' formhid';
+      else
+        l[i].className = l[i].className.replace(/formhid/g, '');
+    }
+
+  if(x('_hid')) {
+    l = [];
+    for(i in formsubs)
+      if(!formsubs[i])
+        l[l.length] = i;
+    x('_hid').value = l.toString();
+  }
+}
+
+
+
+
+/*  D R O P D O W N   M E N U S  */
+
+
+var ddx;var ddy;var dds=null;
+function dropDown(e) {
+  e = e || window.event;
+  var tg = e.target || e.srcElement; // get target element
+  if(tg.nodeType == 3)
+    tg = tg.parentNode;
+  if(!dds && (tg.nodeName.toLowerCase() != 'a' || !tg.rel || tg.className.indexOf('dropdown') < 0))
+    return;
+  var mouseX = e.pageX || (e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
+  var mouseY = e.pageY || (e.clientY + document.body.scrollTop  + document.documentElement.scrollTop);
+  if(!dds) {
+    var obj = x(tg.rel);
+    ddx = mouseX-20;
+    ddy = mouseY+10;
+    obj.style.left = ddx+'px';
+    obj.style.top = ddy+'px';
+    dds = tg;
+  }
+  if(dds) {
+    var obj = x(dds.rel);
+    if((mouseX < ddx || mouseX > ddx+obj.offsetWidth || mouseY < ddy-20 || mouseY > ddy + obj.offsetHeight)
+        || (mouseY < ddy && tg.nodeName.toLowerCase() == 'a' && tg != dds)) {
+      obj.style.left = '-500px';
+      dds = null;
+    }
+    return;
+  }
+  return true;
+}
+
+
+
+
+/*  O N L O A D  */
+
+DOMLoad(function() {
+  var i;
+
+ // search box
+  i = x('searchfield');
+  i.onfocus = function () {
+    if(this.value == 'search') {
+      this.value = '';
+      this.style.color = '#000'; } };
+  i.onblur = function () {
+    if(this.value.length < 1) {
+      this.value = 'search';
+      this.style.color = '#999';} };
+
+ // browse categories
+  if(x('catsearch')) {
+    x('catsearch').onclick = function () {
+      var u = { i:'',e:'',l:'' };
+      var l = x('cat').getElementsByTagName('li');
+      var y;var j;
+      for(y=0;y<l.length;y++)
+        if((j = l[y].className.indexOf('cat_')) != -1) {
+          var k = l[y].className.substr(j+4, 3);
+          if(l[y].className.indexOf(' inc') != -1)
+            u.i += (u.i?',':'')+k;
+          if(l[y].className.indexOf(' exc') != -1)
+            u.e += (u.e?',':'')+k;
+        }
+      l = x('lfilter').getElementsByTagName('input');
+      for(y=0;y<l.length;y++)
+        if(l[y].checked)
+          u.l+=(u.l!=''?',':'')+l[y].name.substr(5);
+      var url = '/v/cat';
+      for (y in u)
+        if(u[y])
+          url+=(url.indexOf('?')<0?'?':';')+y+'='+u[y];
+      location.href=url;
+      return false;
+    };
+    var l = x('cat').getElementsByTagName('li');
+    for(i=0;i<l.length;i++)
+      if(l[i].className.indexOf('cat_') != -1)
+        l[i].onclick = function () {
+          try { document.selection.empty() } catch(e) { try { window.getSelection().collapse(this, 0) } catch(e) {} };
+          var sel = this.className.substr(this.className.indexOf('cat_'), 7);
+          this.className = this.className.indexOf(' inc') != -1 ? (sel+' exc') : this.className.indexOf(' exc') != -1 ? sel : (sel + ' inc');
+        };
+  }
+
+ // vnlist
+  cl('askcomment', function() {
+    this.href = this.href + '&amp;c=' + encodeURIComponent(prompt("Enter personal note (optional)", '')||'');
+    return true;
+  });
+
+ // mass-change vnlist status
+  if(x('vnlistchange')) {
+    x('vnlistchange').onchange = function() {
+      var val = this.options[this.selectedIndex].value;
+      if(val == '-3') 
+        return;
+      var l = document.getElementsByTagName('input');
+      var y; var ch=0;
+      for(y=0;y<l.length;y++)
+        if(l[y].type == 'checkbox' && l[y].checked)
+          ch++;
+      if(!ch)
+        return alert('Nothing selected...');
+      if(val == '-1' && !confirm('Are you sure you want to remove the selected items from your visual novel list?'))
+        return;
+      if(val == '-2')
+        x('comments').value = prompt('Enter personal note (leave blank to delete note)','')||'';
+      document.forms[1].submit();
+    }
+  }
+
+ // autocheck
+  cl('checkall', function () {
+    var l = document.getElementsByTagName('input');
+    var y;
+    for(y=0;y<l.length;y++)
+      if(l[y].type == 'checkbox' && l[y].name == this.name)
+        l[y].checked = this.checked;
+  });
+
+ // a few confirm popups
+  cl('idel', function () {
+    return confirm('Are you sure you want to delete this item?\n\nAll previous edits will be deleted, this action can not be reverted!') });
+//  cl('vhide', function () {
+//    return confirm('!WARNING!\nHiding a visual novel also DELETES the following information:\n - VN Relations of ALL revisions\n - VN lists\n - Votes\nThis is NOT recoverable!');  });
+  cl('massdel', function () {
+    return confirm('Are you sure you want to mass-delete all the selected changes?\n\nThis action can not be reverted!') });
+
+ // NSFW
+  cl('nsfw', function () {
+    this.src = this.className;
+    this.id = '';
+  });
+
+ // spam protection on all forms
+  if(document.forms.length > 1)
+    for(i=1; i<document.forms.length; i++)
+      document.forms[i].action = document.forms[i].action.replace(/\/nospam\?/,'');
+
+ // dropdown menus
+  var z = document.getElementsByTagName('a');
+  for(i=0;i<z.length;i++)
+    if(z[i].rel && z[i].className.indexOf('dropdown') >= 0) {
+      document.onmousemove = dropDown;
+      break;
+    }
+
+ // form-stuff
+  if(document.forms.length > 1)
+    formhid();
+
+ // init dyna
+//  if(x('vn_select') || x('md_select') || x('pd_select') || x('rl_select'))
+  if(window.dInit)
+    dInit();
+
+ // zebra-striped tables (client side!? yes... client side :3)
+  var sub = document.getElementsByTagName('tr');
+  for(i=1; i<sub.length; i+=2)
+    sub[i].style.backgroundColor = '#f5f5f5';
+});
diff --git a/static/files/dyna.js b/static/files/dyna.js
new file mode 100644
index 00000000..b4d64203
--- /dev/null
+++ b/static/files/dyna.js
@@ -0,0 +1,579 @@
+var med = {
+  cd:  'CD',
+  dvd: 'DVD',
+  gdr: 'GD-ROM',
+  blr: 'Blu-Ray disk',
+  'in':'Internet download',
+  pa:  'Patch',
+  otc: 'Other (console)'
+};
+var vrel = [
+  'Sequel',
+  'Prequel',
+  'Same setting',
+  'Alternative setting',
+  'Alternative version',
+  'Same characters',
+  'Side story',
+  'Parent story',
+  'Summary',
+  'Full story',
+  'Other'
+];
+
+var md;var pd;var rl;var vn;var ct;
+
+function dInit() {
+  md = x('md_select');
+  if(md) {
+    md.onclick = mdChangeSel;
+    mdLoad();
+    md.selectedIndex = 0;
+    mdChangeSel();
+  }
+  
+  pd = x('pd_select');
+  if(pd) {
+    pd.onclick = pdChangeSel;
+    pdLoad();
+    pd.selectedIndex = 0;
+    pdChangeSel();
+  }
+
+  rl = x('rl_select');
+  if(rl) {
+    rl.onclick = rlChangeSel;
+    rlLoad();
+    rl.selectedIndex = 0;
+    rlChangeSel();
+  }
+
+  vn = x('vn_select');
+  if(vn) {
+    vn.onclick = vnChangeSel;
+    vnLoad();
+    vn.selectedIndex = 0;
+    vnChangeSel();
+  }
+
+  ct = x('categories');
+  if(ct)
+    catLoad();
+}
+
+function qq(v) {
+  return v.replace(/&/g,"&amp;").replace(/</,"&lt;").replace(/>/,"&gt;").replace(/'/g,/*'*/ "\\'").replace(/"/g,/*"*/'&quot;');
+} 
+
+// small AJAX wapper
+var hr = false;
+function ajax(url, func) {
+  if(hr)
+    hr.abort();
+  hr = (window.ActiveXObject) ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
+  if(hr == null) {
+    alert("Your browse does not support the functionality this website requires.");
+    return;
+  }
+  hr.onreadystatechange = func;
+  hr.open('GET', url, true);
+  hr.send(null);
+}
+
+
+
+
+   /************************\
+   *        M E D I A       *
+   \************************/
+
+
+function mdChangeSel() {
+  var sel = md.options[md.selectedIndex || 0];
+  var o = x('md_conts');
+  var i;
+  if(sel.value == '0_new') {
+    var l = ''; var q = '<option value="0">Qty</option>';
+    for(i in med)
+      l += '<option value="'+i+'">'+med[i]+'</option>';
+    for(i=1;i<10;i++)
+      q += '<option value="'+i+'">'+i+'</option>';
+    o.innerHTML = '<select id="md_Q" name="md_Q" style="width: 50px;">'+q+'</select>'
+      + '<select id="md_S" name="md_S" style="width: 150px;">'+l+'</select>'
+      + '<br style="clear: both" />'
+      + '<button type="button" onclick="mdAddRem()">add/remove</button>'
+      + '<br />Qty is only required for CD & DVD';
+  } else {
+    o.innerHTML = 'Selected "' + sel.text + '"<br />'
+      + '<button type="button" onclick="mdAddRem(\'' + sel.value + '\')">remove</button>';
+  }
+}
+
+function mdAddRem(id) {
+  var i;
+  var d = 0;
+  var o = id ? null : x('md_S').options[x('md_S').selectedIndex];
+  var qty = id ? null : x('md_Q').options[x('md_Q').selectedIndex].value;
+  var v = id ? id : (o.value != 'cd' && o.value != 'dvd' && o.value != 'gdr' && o.value != 'blr' ? o.value : (o.value + '_' + qty));
+  for(i=0;i<md.options.length;i++)
+    if(md.options[i].value == v) {
+      md.options[i] = null;
+      d = 1;
+    }
+  if(!d && !id) {
+    if(v.indexOf('_') >= 0 && qty == 0) {
+      alert('Please specify the quantity');
+      return;
+    }
+    md.options[md.options.length] = new Option(mdString(qty, o.value), v);
+  }
+  else if(id) {
+    md.options[0].selected = true;
+    mdChangeSel();
+  }
+  mdSerialize();
+}
+
+function mdSerialize() {
+  var dest = x('media');
+  var str = '';
+  var i;
+  for(i=0;i<md.options.length;i++)
+    md.options[i].value != '0_new' && (str += (str.length>0 ? ',' : '') + md.options[i].value);
+  dest.value = str;
+}
+
+function mdLoad() {
+  var me = x('media').value.split(',');
+  var i, j;
+  for(i=0;i<me.length;i++) {
+    var m = me[i].split('_');
+    if(med[m[0]])
+      md.options[md.options.length] = new Option(mdString(m[1], m[0]), me[i]);
+  }
+}
+
+function mdString(qty, medium) {
+  if(medium != 'cd' && medium != 'dvd' && medium != 'gdr' && medium != 'blr')
+    return med[medium];
+  else
+    return qty + ' ' + med[medium] + (qty > 1 ? 's' : '');
+}
+
+
+
+
+
+
+   /************************\
+   *    P R O D U C E R S   *
+   \************************/
+
+
+function pdChangeSel() {
+  var sel = pd.options[pd.selectedIndex || 0];
+  var o = x('pd_conts');
+  var i;
+  if(sel.value == '0_new') {
+    o.innerHTML = '<input type="text" name="pd_S" id="pd_S" onkeyup="pdDoSearch(0)" onkeydown="return pdEnter(event)" style="width: 150px;" />'
+      + '<button type="button" onclick="pdDoSearch(1)" style="width: 55px;">Search!</button><br style="clear: both" />'
+      + '<span id="pd_R" style="display: block; width: 220px; height: 70px; overflow: auto"></span>'
+      + '<a href="/p/add" target="_blank">Add new producer</a>';
+    pdDoSearch('');
+  } else {
+    o.innerHTML = 'Selected "' + sel.text + '"<br />'
+      + '<button type="button" onclick="pdAddRem(\'' + sel.value + '\')">remove</button>';
+  }
+}
+
+function pdEnter(ev) {
+  var c = document.layers ? ev.which : document.all ? event.keyCode : ev.keyCode;
+  if(c == 13) {
+    pdDoSearch(0);
+    return false;
+  }
+  return true;
+}
+
+function pdDoSearch(f) {
+  var v = x('pd_S').value;
+  var d = x('pd_R');
+  if(v.length < 1)
+    d.innerHTML = 'Hint: type pX if you know the producer id.';
+  else {
+    if(f)
+      d.innerHTML = '...searching...';
+    ajax('/xml/producers.xml?q='+escape(v)+'&r='+(Math.floor(Math.random()*999)+1), function () {
+      if(!hr || hr.readyState != 4 || !hr.responseText)
+        return;
+      if(hr.status != 200)
+        return alert('Whoops, error! :(');
+      var items = hr.responseXML.getElementsByTagName('item');
+      if(!items || items.length < 1) {
+        d.innerHTML = 'No results';
+        return false;
+      }
+      var res = '';
+      var i,j;
+      for(i=0; i<items.length; i++) {
+        var id = items[i].getElementsByTagName('id')[0].firstChild.nodeValue;
+        var name = items[i].getElementsByTagName('name')[0].firstChild.nodeValue;
+        var cid = id + ',' + name;
+        var s = '';
+        for(j=0; j<pd.options.length; j++)
+          if(pd.options[j].value == cid)
+            s = ' checked="checked"';
+        res += '<input type="checkbox" id="pd_I'+id+'"'+s+' onclick="pdAddRem(\''+qq(cid)+'\', \''+qq(name)+'\')" />'
+          + '<label style="width: auto" for="pd_I'+id+'">'+name+'</label><br style="clear: left" />';
+      }
+      d.innerHTML = res;
+    });
+  } 
+}
+
+function pdAddRem(id, name) {
+  var i;
+  var d = 0;
+  for(i=0;i<pd.options.length;i++)
+    if(pd.options[i].value == id) {
+      pd.options[i] = null;
+      d = 1;
+    }
+  if(!d && name)
+    pd.options[pd.options.length] = new Option(name, id);
+  else if(!name) {
+    pd.options[0].selected = true;
+    pdChangeSel();
+  }
+  pdSerialize();
+}
+
+//  id,name|||id,name
+function pdSerialize() {
+  var dest = x('producers');
+  var str = '';
+  var i;
+  for(i=0;i<pd.options.length;i++)
+    pd.options[i].value != '0_new' && (str += (str.length>0 ? '|||' : '') + pd.options[i].value);
+  dest.value = str;
+}
+
+function pdLoad() {
+  var pds = x('producers').value.split('|||');
+  if(!pds[0])
+    return;
+  var i;
+  for(i=0;i<pds.length;i++)
+    pd.options[pd.options.length] = new Option(pds[i].split(',',2)[1], pds[i]);
+}
+
+
+
+
+
+
+
+
+   /************************\
+   *    R E L A T I O N S   *
+   \************************/
+
+
+var rlsel = ''; var rlname = '';
+function rlChangeSel() {
+  var sel = rl.options[rl.selectedIndex || 0];
+  var o = x('rl_conts');
+  var i;
+  rlsel = '';
+  var ops='';
+  for(i=0;i<vrel.length;i++)
+    ops += '<option value="'+i+'">'+vrel[i]+'</option>';
+  if(sel.value == '0_new') {
+    o.innerHTML = '<input type="text" name="rl_S" id="rl_S" onkeyup="rlDoSearch(0)" onkeydown="return rlEnter(event)" style="width: 150px;" />'
+      + '<button type="button" onclick="rlDoSearch(1)" style="width: 60px;">Search!</button><br style="clear: both" />'
+      + '<span id="rl_R" style="display: block; width: 250px; height: 70px; overflow: auto"></span>'
+      + '<select id="rl_L" name="rl_L" onchange="rlAddRem(0)"><option value="-1">...is a [..] of this visual novel</option>'+ops+'</select>';
+    rlDoSearch('');
+  } else {
+    o.innerHTML = sel.value.split(',', 3)[2] + '<br />'
+      + '<select id="rl_L" name="rl_L" onchange="rlAddRem(\''+qq(sel.value)+'\')">'
+      + '<option value="-1"> - change - </option>'+ops+'<option value="-2"> - remove relation - </option></select>';
+  }
+}
+
+function rlEnter(ev) {
+  var c = document.layers ? ev.which : document.all ? event.keyCode : ev.keyCode;
+  if(c == 13) {
+    rlDoSearch(0);
+    return false;
+  }
+  return true;
+}
+
+function rlDoSearch(f) {
+  var v = x('rl_S').value;
+  var d = x('rl_R');
+  if(v.length < 1)
+    d.innerHTML = 'Search for a visual novel to add a relation.<br /><br />'
+      + 'Hint: type vX if you know the VN id.';
+  else {
+    if(f)
+      d.innerHTML = '...searching...';
+    ajax('/xml/vn.xml?q='+escape(v)+'&r='+(Math.floor(Math.random()*999)+1), function () {
+      if(!hr || hr.readyState != 4 || !hr.responseText)
+        return;
+      if(hr.status != 200)
+        return alert('Whoops, error! :(');
+      rlsel = '';
+      var items = hr.responseXML.getElementsByTagName('item');
+      if(!items || items.length < 1) {
+        d.innerHTML = 'No results';
+        return false;
+      }
+      var res = '';
+      var i,j;
+      for(i=0; i<items.length; i++) {
+        var id = items[i].getElementsByTagName('id')[0].firstChild.nodeValue;
+        var title = items[i].getElementsByTagName('title')[0].firstChild.nodeValue;
+        var cid = id + ',' + title;
+        res += '<input type="radio" name="rl_rad" id="pd_I'+id+'" value="rl_I'+id+'" onclick="rlAddRem(\''+qq(cid)+'\', \''+qq(title)+'\')" />'
+             + '<label style="width: auto" for="rl_I'+id+'">'+title+'</label><br style="clear: left" />';
+      }
+      d.innerHTML = res;
+    });
+  } 
+}
+
+function rlAddRem(id, name) {
+  var i;
+  var rs = x('rl_L').selectedIndex;
+  if(id && name) {
+    rlsel = id;
+    rlname = name;
+  } else if(id) {
+    if(!rs)
+      return;
+    if(rs == x('rl_L').options.length-1) { // remove
+      for(i=0;i<rl.options.length;i++)
+        if(rl.options[i].value == id)
+          rl.options[i] = null;
+      rl.options[0].selected = true;
+    } else {
+      var cur = id.split(',', 3);
+      i = rl.selectedIndex;
+      rs--;
+      rl.options[i] = new Option(vrel[rs]+': '+cur[2], (rs)+','+cur[1]+','+cur[2]);
+      rl.options[i].selected = true;
+    }
+    rlChangeSel();
+    rlSerialize();
+    return;
+  } else if(!rlsel) {
+    alert('No visual novel selected');
+    return;
+  }
+
+  if(!id && rlsel && !rs) { // remove
+    for(i=0;i<rl.options.length;i++)
+      if(rl.options[i].value.indexOf(rlsel) != -1)
+        rl.options[i] = null;
+    rlSerialize();
+    return;
+  }
+  if(!rs)
+    return;
+
+  // add/edit
+  var mod = rl.options.length;
+  rs--;
+  for(i=0;i<rl.options.length;i++)
+    if(rl.options[i].value.indexOf(rlsel) != -1)
+      mod = i;
+  rl.options[mod] = new Option(vrel[rs]+': '+rlname, rs+','+rlsel);
+
+  rlSerialize();
+}
+
+//  rel,id,name|||rel,id,name
+function rlSerialize() {
+  var dest = x('relations');
+  var str = '';
+  var i;
+  for(i=0;i<rl.options.length;i++)
+    rl.options[i].value != '0_new' && (str += (str.length>0 ? '|||' : '') + rl.options[i].value);
+  dest.value = str;
+}
+
+function rlLoad() {
+  var rls = x('relations').value.split('|||');
+  if(!rls[0])
+    return;
+  var i;
+  for(i=0;i<rls.length;i++)
+    rl.options[rl.options.length] = new Option(vrel[rls[i].split(',',3)[0]]+': '+rls[i].split(',',3)[2], rls[i]);
+}
+
+
+
+
+
+
+
+
+   /************************\
+   *      VISUAL NOVELS     *
+   \************************/
+
+
+function vnChangeSel() {
+  var sel = vn.options[vn.selectedIndex || 0];
+  var o = x('vn_conts');
+  var i;
+  var ops='';
+  for(i=0;i<vrel.length;i++)
+    ops += '<option value="'+i+'">'+vrel[i]+'</option>';
+  if(sel.value == '0_new') {
+    o.innerHTML = '<input type="text" name="vn_S" id="vn_S" onkeyup="vnDoSearch(0)" onkeydown="return vnEnter(event)" style="width: 150px;" />'
+      + '<button type="button" onclick="vnDoSearch(1)" style="width: 60px;">Search!</button><br style="clear: both" />'
+      + '<span id="vn_R" style="display: block; width: 250px; height: 90px; overflow: auto"></span>';
+    vnDoSearch('');
+  } else {
+    o.innerHTML = 'Selected "' + sel.text + '"<br />'
+      + '<button type="button" onclick="vnAddRem(\'' + sel.value + '\')">remove</button>';
+  }
+}
+
+function vnEnter(ev) {
+  var c = document.layers ? ev.which : document.all ? event.keyCode : ev.keyCode;
+  if(c == 13) {
+    vnDoSearch(0);
+    return false;
+  }
+  return true;
+}
+
+function vnDoSearch(f) {
+  var v = x('vn_S').value;
+  var d = x('vn_R');
+  if(v.length < 1)
+    d.innerHTML = 'Hint: type vX if you know the visual novel id.';
+  else {
+    if(f)
+      d.innerHTML = '...searching...';
+    ajax('/xml/vn.xml?q='+escape(v)+'&r='+(Math.floor(Math.random()*999)+1), function () {
+      if(!hr || hr.readyState != 4 || !hr.responseText)
+        return;
+      if(hr.status != 200)
+        return alert('Whoops, error! :(');
+      var items = hr.responseXML.getElementsByTagName('item');
+      if(!items || items.length < 1) {
+        d.innerHTML = 'No results';
+        return false;
+      }
+      var res = '';
+      var i,j;
+      for(i=0; i<items.length; i++) {
+        var id = items[i].getElementsByTagName('id')[0].firstChild.nodeValue;
+        var title = items[i].getElementsByTagName('title')[0].firstChild.nodeValue;
+        var s = '';
+        for(j=0; j<vn.options.length; j++)
+          if(vn.options[j].value == id)
+            s = ' checked="checked"';
+        res += '<input type="checkbox" id="vn_I'+id+'"'+s+' onclick="vnAddRem(\''+qq(id)+'\', \''+qq(title)+'\')" />'
+          + '<label style="width: auto" for="vn_I'+id+'">'+title+'</label><br style="clear: left" />';
+      }
+      d.innerHTML = res;
+    });
+  } 
+}
+
+function vnAddRem(id, title) {
+  var i;
+  var d = 0;
+  for(i=0;i<vn.options.length;i++)
+    if(vn.options[i].value == id) {
+      vn.options[i] = null;
+      d = 1;
+    }
+  if(!d && title)
+    vn.options[vn.options.length] = new Option(title, id);
+  else if(!title) {
+    vn.options[0].selected = true;
+    vnChangeSel();
+  }
+  vnSerialize();
+}
+
+//  id,title|||id,title
+function vnSerialize() {
+  var dest = x('vn');
+  var str = '';
+  var i;
+  for(i=0;i<vn.options.length;i++)
+    vn.options[i].value != '0_new' && (str += (str.length>0 ? '|||' : '') + vn.options[i].value + ',' + vn.options[i].text);
+  dest.value = str;
+}
+
+function vnLoad() {
+  var vns = x('vn').value.split('|||');
+  if(!vns[0])
+    return;
+  var i;
+  for(i=0;i<vns.length;i++)
+    vn.options[vn.options.length] = new Option(vns[i].split(',',2)[1], vns[i].split(',',2)[0]);
+}
+
+
+
+
+
+
+   /************************\
+   *   C A T E G O R I E S  *
+   \************************/
+
+
+function catLoad() {
+  var i;var cats=[];
+  var l = ct.value.split(',');
+  for(i=0;i<l.length;i++)
+    cats[l[i].substr(0,3)] = Math.floor(l[i].substr(3,1));
+
+  var l=x('cat').getElementsByTagName('a');
+  for(i=0;i<l.length;i++) {
+    catSet(l[i].id.substr(4), cats[l[i].id.substr(4)]||0);
+    l[i].onclick = function() {
+      var c = this.id.substr(4);
+      if(!cats[c])       cats[c] = 0;
+      if(c.substr(0,1) == 'p' || c == 'gaa' || c == 'gab') {
+        if(cats[c]++)
+          cats[c] = 0;
+      } else if(++cats[c] == 4)
+        cats[c] = 0;
+      catSet(c, cats[c]);
+
+     // has to be ordered before serializing!
+      var r;l=[];i=0;
+      for(r in cats)
+        l[i++] = r;
+      l = l.sort();
+      r='';
+      for(i=0;i<l.length;i++)
+        if(cats[l[i]] > 0)
+          r+=(r?',':'')+l[i]+cats[l[i]];
+      ct.value = r;
+      return false;
+    };
+  }
+}
+
+function catSet(id, rnk) {
+  var c = rnk == 0 ? '#000' :
+          rnk == 1 ? '#090' :
+          rnk == 2 ? '#990' : '#900';
+  x('b_'+id).style.color = c;
+  x('cat_'+id).style.color = c;
+  x('b_'+id).innerHTML = rnk;
+}
+
+
diff --git a/static/files/footer.gif b/static/files/footer.gif
new file mode 100644
index 00000000..c87fb121
Binary files /dev/null and b/static/files/footer.gif differ
diff --git a/static/files/graph.png b/static/files/graph.png
new file mode 100644
index 00000000..bb56f758
Binary files /dev/null and b/static/files/graph.png differ
diff --git a/static/files/headerbg.jpg b/static/files/headerbg.jpg
new file mode 100644
index 00000000..81f4dd75
Binary files /dev/null and b/static/files/headerbg.jpg differ
diff --git a/static/files/headerbot.png b/static/files/headerbot.png
new file mode 100644
index 00000000..6e04ab05
Binary files /dev/null and b/static/files/headerbot.png differ
diff --git a/static/files/platforms.png b/static/files/platforms.png
new file mode 100644
index 00000000..66951fe2
Binary files /dev/null and b/static/files/platforms.png differ
diff --git a/static/files/rss.png b/static/files/rss.png
new file mode 100644
index 00000000..923c3822
Binary files /dev/null and b/static/files/rss.png differ
diff --git a/static/files/select.png b/static/files/select.png
new file mode 100644
index 00000000..ac219e05
Binary files /dev/null and b/static/files/select.png differ
diff --git a/static/files/sidebarbg.jpg b/static/files/sidebarbg.jpg
new file mode 100644
index 00000000..00eb5697
Binary files /dev/null and b/static/files/sidebarbg.jpg differ
diff --git a/static/files/sidebarbot.jpg b/static/files/sidebarbot.jpg
new file mode 100644
index 00000000..49884ded
Binary files /dev/null and b/static/files/sidebarbot.jpg differ
diff --git a/static/files/sidebg.jpg b/static/files/sidebg.jpg
new file mode 100644
index 00000000..65fd3306
Binary files /dev/null and b/static/files/sidebg.jpg differ
diff --git a/static/files/style.css b/static/files/style.css
new file mode 100644
index 00000000..5f78116e
--- /dev/null
+++ b/static/files/style.css
@@ -0,0 +1,729 @@
+
+body {
+  margin: 15px 0 0 0;
+  padding: 0 0 60px 0;
+  background: #fff;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 13px;
+  color: #203C36;
+}
+
+form {
+  margin: 0;
+  padding: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+legend {
+  display: none;
+}
+
+input, textarea {
+  padding: 2px 5px;
+  border: 1px solid #B8E0D7;
+  font: normal 1em Arial, Helvetica, sans-serif;
+  color: #203C36;
+}
+
+h1, h2 {
+  color: #203C36;
+  margin: 0;
+}
+
+h1 {
+  text-transform: lowercase;
+  letter-spacing: -1px;
+  font-size: 3em;
+}
+
+h2 {
+  font-size: 1.7em;
+  clear: right;
+}
+
+h3 {
+  font-size: 1.1em;
+  margin: 0;
+}
+
+p, ul, ol {
+  margin: 0;
+}
+
+blockquote {
+  font-style: italic;
+}
+a {
+/*  color: #7AB9AB;*/
+  color: #69A89A;
+}
+a:hover {
+  text-decoration: none;
+}
+
+img {
+  border: none;
+}
+
+/* Header */
+
+#header {
+  width: 960px;
+  height: 80px;
+  margin: 0 auto;
+  background: url(/files/headerbg.jpg);
+}
+
+#header h1 {
+  margin: 0;
+  padding: 15px 0 0 20px;
+  letter-spacing: normal;
+  font-size: 1em;
+  color: #FFFFFF;
+}
+
+#header h1 a {
+  text-decoration: none;
+  color: #FFFFFF;
+}
+
+#header h1 a:hover {
+  text-decoration: underline;
+}
+
+#header b {
+  display: block;
+  letter-spacing: -2px;
+  font-size: 2.4em;
+}
+
+/* Search */
+
+#search {
+  float: right;
+  width: 180px;
+  padding-top: 30px;
+}
+
+#searchfield {
+  width: 150px;
+}
+
+#searchsubmit {
+  display: none;
+}
+
+/* Login */
+
+#loginform {
+ padding: 0;
+ margin: 0 0 0 20px;
+}
+#loginform input {
+  width: 40px;
+  margin: 0;
+  padding: 1px;
+  position: relative;
+}
+#loginform #usrname, #loginform #usrpass {
+  width: 70px;
+  border: 0;
+}
+
+/* Page */
+
+#page {
+  width: 960px;
+  margin: 0 auto;
+  padding: 40px 0;
+  background: url(/files/headerbot.png) no-repeat;
+}
+
+#content {
+  float: left;
+  width: 700px;
+}
+
+/* Side */
+
+#side {
+  float: right;
+  padding: 0;
+  background: url(/files/sidebg.jpg);
+  color: #fff;
+}
+#side div {
+  background: url(/files/sidebarbg.jpg) no-repeat;
+}
+#side div div {
+  width: 240px;
+  padding: 0 0 60px 0;
+  background: url(/files/sidebarbot.jpg) no-repeat left bottom;
+}
+
+#side a {
+  color: #fff;
+}
+
+#side h2 {
+  padding: 20px 20px 0 15px;
+  text-transform: uppercase;
+  font-family: "Arial Black", Arial, Helvetica, sans-serif;
+  font-size: .8em;
+  color: #fff;
+}
+
+#side ul {
+  margin: 0;
+  padding: 0 20px 0 20px;
+  list-style: none;
+}
+
+#side li {
+  padding: 0;
+}
+
+#side p {
+  margin: 0;
+  padding: 0 0 0 20px;
+}
+#side li.more {
+  font-style: italic;
+}
+
+/* Footer */
+
+#footer {
+  clear: both;
+  padding: 10px 0;
+}
+
+#footer p {
+  margin: 0;
+  text-align: center;
+  color: #999999;
+  font-size: 0.8em;
+}
+
+#footer a {
+  color: #999999;
+}
+
+/* Forms */
+#content form {
+  display: block;
+  margin: 20px 0 10px 0;
+  padding: 0;
+}
+#content form.tblf {
+  margin: 0;
+}
+form ul {
+  margin: 0;
+  padding: 0;
+}
+form li {
+  display: block;
+  clear: left;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+form ul ul {
+  margin: 0; padding: 0;
+  clear: left;
+} 
+form li.nolabel, form ul ul {
+  padding: 0 0 0 110px;
+}
+form li.nextpart {
+  padding: 10px 0 0 0;
+}
+#content label, #content input, #content textarea, #content select, form li b, form li p {
+  display: block;
+  float: left;
+}
+form li label i, form p.formnotice i {
+  display: inline;
+  color: #f00;
+}
+input.text, select {
+  width: 200px;
+}
+select, input.text, textarea {
+  border: 1px solid #B8E0D7;
+  font: normal 1em Arial, Helvetica, sans-serif;
+  color: #203C36;
+}
+form label.checkbox {
+  width: auto;
+}
+select.multiple {
+  height: 120px;
+  width: 230px;
+}
+#md_conts, #pd_conts, #rl_conts, #vn_conts {
+  display: block;
+  float: left;
+  background-color: #e3ecff;
+  border: 1px dashed #b4b4ff;
+  padding: 2px;
+}
+#rl_select {
+  width: 280px;
+}
+form li.longopts select {
+  width: 350px;
+}
+form li.shortopts input {
+  width: 50px;
+}
+form li i {
+  float: left;
+}
+input.hidden {
+  display: none;
+  position: absolute;
+  top: -30px;
+}
+label, form li b {
+  width: 110px;
+  font-weight: normal;
+}
+form li.nolabel b {
+  display: inline;
+  width: auto;
+  font-weight: bold;
+  float: none;
+}
+form li.subform {
+  padding: 10px 0 0 0;
+  clear: both;
+}
+form li.subform a {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  background-color: #f0f0f0;
+  text-decoration: none;
+  font-weight: bold;
+  color: #7AB9AB;
+}
+li.formhid {
+  float: none;
+  position: absolute;
+  top: -2000px;
+  left: -2000px;
+  width: 10px;
+}
+form li.date select {
+  width: 100px;
+}
+
+/* Platform selecter */
+form ul.platforms {
+  clear: none;
+  padding: 0;
+  margin: 0 0 0 110px;
+}
+form ul.platforms li {
+  float: left;
+  clear: none;
+}
+form ul.platforms li label {
+  width: 150px;
+}
+form ul.platforms input {
+  padding: 0;
+  margin: 0 2px 0 2px;
+  border: 0;
+  height: 14px;
+}
+
+/* Warning & msg box */
+span.warning {
+  display: block;
+  margin: 5px 10% 5px 10%;
+  padding: 3px 5px 3px 60px;
+  background: #ffece3 url('/files/warning.png') no-repeat;
+  border: 1px dashed #ffb4b4;
+  min-height: 57px;
+}
+* html span.warning { height: 57px; }
+span.msg {
+  display: block;
+  margin: 5px 10% 5px 10%;
+  padding: 3px 5px 3px 5px;
+  border: 1px dashed #3cb700;
+  background: #bfffb5;
+}
+span.warning ul, span.msg ul {
+  padding: 0 0 0 15px;
+}
+
+dt {
+  float: left;
+  font-style: italic;
+}
+dd {
+  padding: 0 0 0 50px;
+}
+dl.vnrel dd, dl.vncat dd {
+  padding: 0 0 0 75px;
+}
+ul {
+  padding: 0 0 0 17px;
+}
+p.actions, #vnheader p.actions, b.actions {
+  display: inline;
+  margin: 0 0 0 5px;
+  font-weight: normal;
+  font-size: 12px;
+  color: #999;
+}
+a.relch {
+  color: #900;
+}
+a.rss {
+  display: block;
+  height: 16px;
+  width: 16px;
+  background: url(/files/rss.png) no-repeat;
+  text-indent: -9999px;
+  overflow: hidden;
+  float: right;
+}
+#vnheader div {
+  width: 256px;
+  float: left;
+  text-align: center;
+}
+#vnheader div img {
+  margin: 0 auto 0 auto;
+}
+#vnheader #nsfw {
+  cursor: pointer;
+}
+img.left {
+  float: left;
+  margin: 0 15px 0 0;
+}
+
+img.right {
+  float: left;
+  margin: 0 0 0 15px;
+}
+#vnheader dl {
+  margin: 0 0 0 270px;
+}
+#vnheader h3 {
+  margin: 5px 0 0 260px;
+  font-size: 13px;
+}
+#vnheader p {
+  margin: 0 0 0 270px;
+}
+#vnheader select {
+  width: 60px;
+  height: 16px;
+  display: inline;
+  float: none;
+  text-align: center;
+}
+#vnheader #vnlist {
+  width: 150px;
+  text-align: left;
+}
+
+#vnheader p.mod {
+  margin: 0;
+}
+
+/* producer search */
+form#psearch {
+  display: block;
+  margin: 10px 0 20px 210px;
+}
+* html form#psearch { margin-left: 105px; }
+
+
+ul.home {
+  float: left;
+  list-style-type: none;
+  width: 210px;
+  margin-top: 30px;
+}
+ul.home li { padding: 0; }
+ul.home.break { clear: left; }
+h3.home {
+  clear: left;
+  padding-top: 30px;
+}
+
+
+p.mod {
+  float: right;
+  color: #999;
+}
+div.dropdown {
+  width: 100px;
+  position: absolute;
+  left: -500px;
+  top: 0;
+  border: 1px solid #d0d0d0;
+  border-bottom: none;
+}
+div.dropdown ul, div.dropdown ul li {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  width: 100px;
+  background-color: #f0f0f0;
+  border-bottom: 1px solid #d0d0d0;
+}
+div.dropdown a, div.dropdown b {
+  display: block;
+  width: 90px;
+  margin: 0;
+  padding: 2px 5px;
+  text-decoration: none;
+}
+div.dropdown b {
+  font-weight: normal;
+  font-style: italic;
+  color: #666;
+}
+div.dropdown li.center a {
+  text-align: center;
+}
+div.dropdown a:hover {
+  background-color: #e0e0e0;
+}
+
+
+p#relations {
+  margin: 20px 0 0 0;
+  width: 100%;
+  text-align: center;
+}
+
+
+p.desc {
+  padding: 0 10px 0 10px;
+}
+p.chr {
+  width: 100%;
+  text-align: center;
+  font-size: 1.1em;
+}
+p.browse {
+  width: 100%;
+  text-align: center;
+}
+b.mod, a.mod {
+  color: #f00;
+}
+
+/* CATEGORIES */
+ul#cat {
+  margin: 0;
+  padding: 0;
+}
+ul#cat ul {
+  list-style-type: none;
+  padding: 0;
+}
+ul#cat input {
+  padding: 0;
+  margin: 0 2px 0 2px;
+  border: 0;
+  height: 14px;
+}
+ul#cat li, form ul#cat li {
+  display: block;
+  width: 170px;
+  float: left;
+  clear: none;
+  font-weight: bold;
+}
+ul#cat li li {
+  display: list-item;
+  width: auto;
+  float: none;
+  clear: left;
+  font-weight: normal;
+  padding: 0 0 0 20px;
+  margin: 0;
+  cursor: pointer;
+  list-style-type: none;
+  background: url(/files/select.png) no-repeat;
+}
+form ul#cat li li {
+  padding: 0;
+  background: none;
+}
+form ul#cat li li b { width: 13px; font-weight: bold; }
+form ul#cat li li a { color: #000; text-decoration: none; display: block; width: 160px; }
+ul#cat li li.inc { background-position: 0px -16px; color: #090; }
+ul#cat li li.exc { background-position: 0px -33px; color: #900; }
+
+div#lfilter {
+  clear: left;
+  padding: 10px 0 0 0;
+}
+div#lfilter input {
+  float: left; margin: 3px 3px 0 10px;
+}
+div#lfilter label {
+  float: left; margin-top: 3px;
+  width: 90px;
+}
+
+i.crgn0 { font-style: normal; }
+i.crgn1 { font-style: normal; color: #bbb; }
+i.crgn2 { font-style: normal; }
+i.crgn3 { font-style: normal; font-weight: bold; }
+
+/* DOCUMENTATION PAGES */
+#dpage h3 {  margin-top: 20px;   }
+#dpage dd { padding-bottom: 5px; margin-left: 70px; }
+
+
+
+#content input.right, #content select.right {
+  float: right;
+}
+#vnlistchange { width: 130px; }
+p.opts {
+  clear: left;
+  text-align: center;
+  width: 100%;
+  background-color: #f0f0f0;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  padding: 1px 0;
+}
+ul#stats {
+  clear: left;
+  list-style-type: none;
+  padding: 0px 0 0 5px;
+}
+ul#stats li {
+  padding: 0;
+  display: block;
+  width: 345px;
+  float: left;
+  margin: 0 0 20px 0;
+}
+ul#stats li.break {
+  clear: left;
+}
+
+acronym {
+  border-bottom: 1px dotted #999;
+}
+acronym.date {
+  border: 0;
+}
+b.future { font-weight: normal; color: #900; }
+
+table td { vertical-align: top; }
+table { width: 100%; border-collapse: collapse; }
+thead tr td { font-weight: bold; }
+thead tr td a { text-decoration: none; }
+
+.plat {
+  background: url(/files/platforms.png) no-repeat;
+  width: 16px;
+  height: 14px;
+  margin: 0 2px 0 0;
+  overflow: hidden;
+  float: right;
+  text-indent: -999px;
+  display: block;
+  padding: 0;
+  border: 0;
+}
+li .plat {
+  float: left;
+}
+.plat.oth { background: none; }
+.plat.dc  { background-position:   0px   0px; }
+.plat.lin { background-position:   0px -14px; }
+.plat.nds { background-position:   0px -28px; }
+.plat.ps2 { background-position:   0px -42px; }
+.plat.sfc { background-position:   0px -56px; }
+.plat.gba { background-position:   0px -70px; }
+.plat.wii { background-position:   0px -84px; }
+.plat.dvd { background-position: -16px   0px; }
+.plat.mac { background-position: -16px -14px; }
+.plat.ps  { background-position: -16px -28px; }
+.plat.psp { background-position: -16px -42px; }
+.plat.win { background-position: -16px -56px; }
+.plat.ext { background-position: -16px -70px; }
+
+
+
+#content table input {
+  width: 13px;
+  height: 13px;
+  margin: 0;
+  float: right;
+}
+
+/* revisions */
+#tmc { width: 650px; margin: 0 0 30px 30px; border: 1px solid #ddd; background-color: #fbfbfb; clear: both; }
+#tmc thead tr td { font-weight: normal; text-align: center; }
+#tmc .tc1, #tmc .tc2 { border-right: 1px solid #ddd; }
+#tmc .tc1 { font-weight: bold; padding-right: 10px; }
+#tmc .tc1 { width: 100px; }
+#tmc .tc2, #tmc .tc3 { width: 275px; }
+div#tmc { text-align: center; }
+div#revbrowse { margin: 20px 0 0 30px; width: 650px; text-align: center; } /* position: relative; top: 17px; left: 30px; */
+a#revnext { float: right }
+a#revprev { float: left; }
+b.diff_add { font-weight: normal; background-color: #cfc; }
+b.diff_del { font-weight: normal; background-color: #fcc; }
+
+#tvg tr, #tus tr { background-color: #fff!important }
+#tvg .tc1, #tus .tc1 { width: 25px; text-align: right; padding-right: 3px; }
+#tvg .tc2 div, #tus .tc2 div { margin: 0 5px 0 0; padding: 0; float: left; background: url(/files/graph.png); height: 13px; }
+#tus .tc1 { width: 60px }
+
+#tvr .tc3, #tvl .tc5, #tur .tc3, #tul .tc8, #thi .tc6 { text-align: right }
+
+#tvl .tc1, #tvl .tc2, #tvl .tc3 { white-space: nowrap; padding-right: 10px; }
+
+#thi { clear: both }
+#thi .tc1 { width: 35px; }
+#thi .tc2 { width: 110px; }
+
+#tre tr { background-color: #fff!important; }
+#tre tr.lang { background-color: #f5f5f5!important; font-style: italic; }
+
+#tre .tc1 { width: 75px; padding-left: 10px; }
+#tre .tc2 { width: 60px; text-align: center; }
+#tre .tc3 { width: 55px; margin: 0; padding: 0; white-space: nowrap; }
+#tre .tc4 { width: 10px; text-align: right; padding-right:3px; }
+#tre .tc7 { width: 16px; margin: 0; padding: 0; white-space: nowrap; }
+
+#debug {
+  border-top: 1px solid #ffb4b4;
+  background-color: #ffece3;
+  height: 70px;
+  overflow: auto;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  font-size: 10px;
+  margin: 0;
+  padding: 0;
+}
+
diff --git a/static/files/warning.png b/static/files/warning.png
new file mode 100644
index 00000000..b8af1a53
Binary files /dev/null and b/static/files/warning.png differ
-- 
cgit v1.2.3