<!DOCTYPE html> <html lang="hu-hu"> <head> <title>IK Cloud</title> <link href='http://fonts.googleapis.com/css?family=Metrophobic' rel='stylesheet' type='text/css'> <link rel="icon" type="image/png" href="/static/favicon.png" /> <link rel="icon" type="image/png" href="one/static/favicon.png"> <link rel="stylesheet/less" href="../../one/static/style.less" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="../../one/static/jquery.min.js"></script> <script src="../../one/static/less.min.js"></script> <script type="text/javascript"> var toggleDetails1; var toggleDetails2; $(function(){ $('.wm .summary').each(function(){ this.originalHeight=parseInt($(this).next('.details').css('height')); }) toggleDetails1=function(){ if($(this).next('.details').is(':hidden')){ $(this).next('.details').slideDown(700); } else { $(this).next('.details').slideUp(700); } } toggleDetails2=function(){ if($(this).next('.template-details').is(':hidden')){ $(this).next('.template-details').slideDown(400); } else { $(this).next('.template-details').slideUp(400); } } $('.wm .summary').click(toggleDetails1); $('#template .wm .summary').click(toggleDetails2); $('#load-more-files').click(function(){ $('.actions', this).show(); var that=this; setTimeout(function(){ $(that).prev('li').slideDown(500,function(){ $('.actions', that).hide(); }); },2000); }) $('#new-wm-button').click(function(){ $('#modal').show(); $('#modal-container').html($('#new-wm').html()); $('#modal-container .wm .summary').each(function(){ this.originalHeight=parseInt($(this).next('.details').css('height')); }) $('#modal-container .wm .summary').click(toggleDetails); }); $('#new-template-button').click(function(){ $('#modal').show(); $('#modal-container').html($('#new-template').html()); }); $('#shadow').click(function(){ $('#modal').hide(); }) $('#new-template-button').click(function(){ $.get('/ajax/templateWizard', function(data){ $('#modal-container').html(data); }) $('#modal').show(); }); }) </script> </head> <body> <div id="header"> <div id="loginblock"><p> Bejelentkezve: cloud. <a href="/logout/">Kijelentkezés</a>. <a href="/admin/">Admin</a>. </p> </div> <h1><a href="/">IK Cloud <span style="font-size: 21px">β</span></a></h1> </div> <div id="content"> <div class="boxes"> <div class="contentblock" id="state"> <h2>Virtuális gépek</h2> <ul class="wm-list"> <li class="wm"> <div class="summary"> <div class="name wm-on"> cloud test (32) </div> <div class="status"> ACTIVE </div> <div class="actions"> <a href="rdp:cloud:Q4EUrggGvr:152.66.243.62:3389" title="Csatlakozás"><img src="../../one/static/icons/plug.png" alt="connect" /></a> <a href="/vm/suspend/7/" onclick="alert('Hamarosan a mozikban.'); return false" title="Felfüggesztés"><img src="../../one/static/icons/control-pause.png" alt="pause" /></a> <a href="/vm/delete/7/" onclick="return confirm('Biztosan törli a gépet?')" title="Törlés"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a> <a href="/vm/reset/7/" onclick="alert('Hamarosan a mozikban.'); return false" title="Újraindítás"><img src="../../one/static/icons/arrow-circle-double.png" alt="↺" /></a> </div> <div class="clear"></div> </div> <div class="details"> <div class="container"> <ul> <li class="name">Gép neve: <span class="value">cloud test (32)</span></li> <li class="os-linux">Operációs rendszer: <span class="value">Copy of ttylinux - kvm</span></li> <li class="type">Instance típus: <span class="value">small</span></li> <li class="date">Létrehozás dátuma: <span class="value">2013. január 30. 14.56.34</span></li> <li class="date">Lejáratig: <span class="value"><abbr title="1 nap, 5 óra, 34 perc">1 nap</abbr></span></li> <li> <span class="value"><a href="/vm/show/7/" title="cloud test (32)">További részletek</a></span></li> </ul> </div> </div> </li> <li id="new-wm-button" class="wm new"> <div class="summary"> <div class="name">Új gép indítása</div> <div class="clear"></div> </div> </li> <li id="new-wm" style="display: none"> <h2>Rendelkezésre álló sablonok</h2> <p> Mese, hogy mit is lehet csinálni. </p> <div class="container"> <ul class="wm-list modal"> <li class="wm"> <form method="POST" action="/vm/new/2/"><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='QQdfjrFaIqdVw8NqhxyPVQIeuiHIzxjJ' /></div> <div class="summary"> <div class="name wm-on">test</div> <div class="status"> 3/10 </div> <div class="clear"></div> </div> <div class="details"> <h3> Részletek </h3> <ul> <li class="name">Rendszer: <span class="value">Copy of ttylinux - kvm</span></li> <li class="type">Instance típus: <span class="value">small</span></li> <li class="memory">Memória: <span class="value">100 MiB</span></li> <li class="cpu">CPU magok: <span class="value">1</span></li> <li> <span class="value"><input type="submit" value="Indítás"/></span></li> </ul> </div> </form> </li> </ul> </div> </li> </ul> </div> <div class="contentblock" id="template"> <h2>Saját sablonok</h2> <ul class="wm-list"> <li class="wm"> <div class="summary"> <div class="quota"> <div class="used" style="background-color: rgba(0,255,0,0.2); width: 20%"></div> </div> <div class="name">Win7 Matlab (1$/instance)</div> <div class="status">2$/10$</div> <div class="actions"> <a href="#" title="Átnevezés"><img src="../../one/static/icons/pencil.png" alt="rename" /></a> <a href="#" title="Törlés"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a> <a href="#" title="Megosztás"><img src="../../one/static/icons/user-share.png" alt="share" /></a> </div> <div class="clear"></div> </div> <div class="template-details"> <ul> <li> <div class="quota"> <div class="used" style="background-color: rgba(0,255,0,0.2); width: 16%"></div> </div> <div class="group-name"> <a href="#">Csoport1 (6 user)</a> </div> <div class="status"> 1/6 (1 instance/user) </div> <div class="clear"></div> </li> <li> <div class="quota"> <div class="used" style="background-color: rgba(0,255,0,0.2); width: 25%"></div> </div> <div class="group-name"> <a href="#">Csoport2 (2 user)</a> </div> <div class="status"> 1/4 (2 instance/user) </div> <div class="clear"></div> </li> </ul> </div> </li> <li class="wm"> <div class="summary"> <div class="quota"> <div class="used" style="background-color: rgba(255,128,0,0.2); width: 50%"></div> </div> <div class="name">Linux Java (1$/instance)</div> <div class="status">20$/40$</div> <div class="actions"> <a href="#" title="Átnevezés"><img src="../../one/static/icons/pencil.png" alt="rename" /></a> <a href="#" title="Törlés"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a> <a href="#" title="Megosztás"><img src="../../one/static/icons/user-share.png" alt="share" /></a> </div> <div class="clear"></div> </div> <div class="template-details"> <ul> <li> <div class="quota"> <div class="used" style="background-color: rgba(255,0,0,0.2); width: 100%"></div> </div> <div class="group-name"> <a href="#">Csoport1 (6 user)</a> </div> <div class="status"> 6/6 (1 instance/user) </div> <div class="clear"></div> </li> <li> <div class="quota"> <div class="used" style="background-color: rgba(255,128,0,0.2); width: 75%"></div> </div> <div class="group-name"> <a href="#">Csoport2 (4 user)</a> </div> <div class="status"> 3/4 (1 instance/user) </div> <div class="clear"></div> </li> <li> <div class="quota"> <div class="used" style="background-color: rgba(0,255,0,0.2); width: 10%"></div> </div> <div class="group-name"> <a href="#">Csoport3 (5 user)</a> </div> <div class="status"> 1/10 (2 instance/user) </div> <div class="clear"></div> </li> <li> <div class="quota"> <div class="used" style="background-color: rgba(200,200,0,0.2); width: 50%"></div> </div> <div class="group-name"> <a href="#">Csoport4 (20 user)</a> </div> <div class="status"> 10/20 (1 instance/user) </div> <div class="clear"></div> </li> </ul> </div> </li> <li id="new-template-button" class="wm new"> <div class="summary"> <div class="name">Új Sablon</div> <div class="clear"></div> </div> </li> <li class="wm small"> <div class="summary"> <div class="quota"> <div class="used" style="background-color: rgba(0,255,0,0.5); width: 19%"></div> </div> <div class="name">Kvóta: 50/100</div> <div class="clear"></div> </div> </li> </ul> </div> </div> <div class="boxes"> <div class="contentblock"> <h2> Adattár </h2> <div class="content"> <ul class="file-list"> <li class="wm"> <div class="summary"> <div class="name filetype-c">hello.c</div> <div class="info">1 Kb</div> <div class="actions"> <a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a> <a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a> <a href="#"><img src="../../one/static/icons/download-cloud.png" alt="download" /></a> </div> <div class="clear"></div> </div> <div class="details"> <h3>Részletek</h3> <ul> <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li> <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li> <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li> <li>Típus: <span class="value">text/plain</span></li> </ul> </div> </li> <li class="wm"> <div class="summary"> <div class="name filetype-image">suna.jpg</div> <div class="info">1 Kb</div> <div class="actions"> <a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a> <a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a> <a href="#"><img src="../../one/static/icons/download-cloud.png" alt="download" /></a> </div> <div class="clear"></div> </div> <div class="details"> <h3>Részletek</h3> <ul> <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li> <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li> <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li> <li>Típus: <span class="value">image/jpg</span></li> </ul> </div> </li> <li class="wm"> <div class="summary"> <div class="name filetype-folder">poresz</div> <div class="info">katalógus</div> <div class="actions"> <a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a> <a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a> </div> <div class="clear"></div> </div> <div class="details"> <h3>Részletek</h3> <ul> <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li> <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li> <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li> <li>Fájlok: <span class="value">666 db</span></li> </ul> </div> </li> <li class="wm" style="display: none"> <div class="summary"> <div class="name filetype-text">matlab_serial.txt</div> <div class="info">358 Kb</div> <div class="actions"> <a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a> <a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a> <a href="#"><img src="../../one/static/icons/download-cloud.png" alt="download" /></a> </div> <div class="clear"></div> </div> <div class="details"> <h3>Részletek</h3> <ul> <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li> <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li> <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li> <li>Típus: <span class="value">text/plain</span></li> </ul> </div> </li> <li class="file-details wm" id="load-more-files"> <div class="summary"> <div class="name filetype-more"> Mutasd a régebbi fájlokat! </div> <div class="actions" style="text-align: right; display: none"> <img src="/static/load-4.gif" alt="loading" /> </div> <div class="clear"></div> </div> </li> <li class="file-upload wm"> <div class="summary"> <div class="name filetype-up">Fájlfeltöltés</div> <div class="clear"></div> </div> </li> </ul> </div> </div> </div> <div class="clear"></div> </div> <div id="modal" style="display: none"> <div id="shadow"></div> <div id="modal-container"> </div> </div> </body> </html>