Дизайн интерфейса

Toutlemond · Сообщение **Toutlemond** » Вт июн 24, 2014 11:58 am

Всем привет!
А у нас вот как то так интерфейс получается.

Меню и слайдер соответственно убрали под кнопку

А это по сути сцены только остались...
Сверху будет состояние контроллеров часы и тп...
По клику на морду смена пользователя.

а внизу смена сцен. Надо там тоже добиться красивостей на квадратах.

От Табов сверху тоже избавились... минимализм для планшетов короче

PAV

Схема у вас красивая! Надо спереть

идею - сделать ее почти в цвет. А то от этого кривого 3Д ничего хорошего...

PAV · Сообщение **PAV** » Вт июн 24, 2014 12:44 pm

Toutlemond писал(а): Схема у вас красивая! Надо спереть идею - сделать ее почти в цвет. А то от этого кривого 3Д ничего хорошего...

Сам спер идею

- http://dz.ru/en/portfolio/ourselves/smarthouse/

От 3d я тож отказался, толку не много.

Меню убрать - интересная идея, надо попробовать. Можете исходники бросить тож?
По ходу от текста надо вообще уходить. Оставлять пиктограммы только.

А кнопки все нарисованные? В смысле текст на них?

PAV · Сообщение **PAV** » Вт июн 24, 2014 12:45 pm

Vit писал(а):добавил этот кусок и в хроме не меняется почему то

Ну так вы настройками поиграйтесь

height: 6px;
width: 3px;

Vit · Сообщение **Vit** » Вт июн 24, 2014 5:01 pm

PAV писал(а):
Vit писал(а):добавил этот кусок и в хроме не меняется почему то
Ну так вы настройками поиграйтесь
height: 6px;
width: 3px;

попробовал...нифига...не пойму что не так..

вот код default

Код: Выделить всё

<!--#
 @version 0.2 (auto-set)
#-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="/templates_alt/css/custom.css" />

 <style>
   @font-face {
    font-family: HelveticaNeueLight; /* Гарнитура шрифта */
    src: url(pChart/Fonts/HelveticaNeueLight.ttf); /* Путь к файлу со шрифтом */
   }
   
  </style>
</head>
<script src="/templates_alt/jsgraphics/jsgraphics.js"></script>
<script src="/templates_alt/jsgraphics/timeline2c.js"></script>
<script src="/templates_alt/jsgraphics/level2.js"></script>
<script type="text/javascript" src="/js/ui.tabs.paging.js"></script>
<script src="/templates_alt/jsgraphics/state1.js"></script>
<script src="/templates_alt/jsgraphics/state2.js"></script>

<table width="100%" border="0">
 <tr>
  <td valign="top" colspan=3>
  
<table width="100%" height="120" border="0" bgcolor="Black" style="background-image: url(/templates_alt/icon/fon3.png) ;border-radius: 0.4em 0.4em 0.4em 0.4em;">
 
 <tr>
        <td>
               
                </td>

                <td valign="bottom">
<script language="javascript">
 function leftPanelToggle() {
  $('#leftPanel').toggle();
  if ( $("#leftPanel").is(":visible") ) {
   $("#leftPanelToggleIcon").attr("src","/images/icon_left.png");
  } else { 
   $("#leftPanelToggleIcon").attr("src","/images/icon_right.png");
  }
  return false;
 }
</script>
 <a href="/"><img src="/templates_alt/icon/logo_s2.png" border="0"></a>
 
                <a href="#" onClick="return leftPanelToggle();"><img id="leftPanelToggleIcon" border="0" src="/images/icon_left.png" border="0"></a>
                </td>


                                <td width="90%">
                                
<table width="95%" height="100%" align="right">
  <tr>
  <td width="10%">

 
 
  </td>
    <td width="30%" height="30">
    
<div style="background:transparent">
<canvas id="stt11" width="48" height="25">Canvas not supported</canvas>
<canvas id="stt12" width="48" height="25">Canvas not supported</canvas>
<canvas id="stt13" width="48" height="25">Canvas not supported</canvas>
<canvas id="stt14" width="48" height="25">Canvas not supported</canvas>
<canvas id="stt15" width="48" height="25">Canvas not supported</canvas>
</div>    
<script type="text/javascript">

    st1 = new state1('stt11', 'serverCPUload.value', 'Mega', 20000, 1);
    st1.alertmin = 05;
    st1.alertmax = 95;
    st1.int1_min = 80; st1.int1_max = 101; st1.int1_color = '#ff0000'; // red
    st1.int2_min = 65; st1.int2_max = 79; st1.int2_color = '#ff9900';  // orange
    st1.int3_min = 51; st1.int3_max = 64; st1.int3_color = '#ffff00'; // green
    st1.int4_min = 11; st1.int4_max = 50; st1.int4_color = '#00ff00'; // blue
    st1.int5_min = 0; st1.int5_max = 10; st1.int5_color = '#00ffff'; // cyan
    st1.redraw();    
    
    
     st1 = new state1('stt12', 'serverCPUload.value', 'Mega', 20000, 1);
    st1.alertmin = 05;
    st1.alertmax = 95;
    st1.int1_min = 80; st1.int1_max = 101; st1.int1_color = '#ff0000'; // red
    st1.int2_min = 65; st1.int2_max = 79; st1.int2_color = '#ff9900';  // orange
    st1.int3_min = 51; st1.int3_max = 64; st1.int3_color = '#ffff00'; // green
    st1.int4_min = 11; st1.int4_max = 50; st1.int4_color = '#00ff00'; // blue
    st1.int5_min = 0; st1.int5_max = 10; st1.int5_color = '#00ffff'; // cyan
    st1.redraw();       
    
    st1 = new state1('stt13', 'serverCPUload.value', 'Свет', 20000, 1);
    st1.alertmin = 75;
    st1.alertmax = 1000;
    st1.int1_min = 100; st1.int1_max = 101; st1.int1_color = 'rgba(225, 60, 50, 1)'; // red
    st1.int2_min = 75; st1.int2_max = 99; st1.int2_color = 'rgba(210, 160, 50, 1)';  // orange
    st1.int3_min = 50; st1.int3_max = 74; st1.int3_color = 'rgba(50, 200, 50, 1)'; // green
    st1.int4_min = 25; st1.int4_max = 49; st1.int4_color = 'rgba(140, 140, 225, 1)'; // blue
    st1.int5_min = 0; st1.int5_max = 24; st1.int5_color = 'rgba(50, 230, 230, 1)'; // cyan
    st1.redraw();
    
    st1 = new state1('stt14', 'serverCPUload.value', 'Питание', 20000, 1);
    st1.alertmin = 05;
    st1.alertmax = 95;
    st1.int1_min = 80; st1.int1_max = 101; st1.int1_color = '#ff0000'; // red
    st1.int2_min = 65; st1.int2_max = 79; st1.int2_color = '#ff9900';  // orange
    st1.int3_min = 51; st1.int3_max = 64; st1.int3_color = '#ffff00'; // green
    st1.int4_min = 11; st1.int4_max = 50; st1.int4_color = '#00ff00'; // blue
    st1.int5_min = 0; st1.int5_max = 10; st1.int5_color = '#00ffff'; // cyan
    st1.redraw();    
    
    st1 = new state1('stt15', 'serverCPUload.value', 'Mega', 20000, 1);
    st1.alertmin = 05;
    st1.alertmax = 95;
    st1.int1_min = 80; st1.int1_max = 101; st1.int1_color = '#ff0000'; // red
    st1.int2_min = 65; st1.int2_max = 79; st1.int2_color = '#ff9900';  // orange
    st1.int3_min = 51; st1.int3_max = 64; st1.int3_color = '#ffff00'; // green
    st1.int4_min = 11; st1.int4_max = 50; st1.int4_color = '#00ff00'; // blue
    st1.int5_min = 0; st1.int5_max = 10; st1.int5_color = '#00ffff'; // cyan
    st1.redraw();    
</script>    
    </td>
    <td width="30%">
 
    </td>
    <td ROWSPAN="3" width="10%">
<EMBED src="http://rp5.ru/informer/100x100/1/1.swf" loop=false menu=false quality=high scale=noscale wmode=transparent bgcolor=#CCCCCC flashvars="id=5674&lang=ru&um=00000" WIDTH="100" HEIGHT="100" NAME="loader" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE= "http://www.macromedia.com/go/getflashplayer"></EMBED>

    </td>
    <td ROWSPAN="2" width="30%">

<div align="left" id="txt" style='cursor: default;font-family:Liquid Crystal;text-align:center;color:#66FF00;font-size:32pt'></div>
<br>
<div id="txt1" style='cursor: default;text-align:center;color:#66FF00;font-size:9pt'></div>

<script type="text/javascript">
    function time() {
      var today = new Date();
      var day_of_week = ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"];
      var month_of_year = ["января", "Февраля", "марта", "апреля", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"];
      var day_ = day_of_week[today.getDay()];
      var date_ = today.getDate();
      var month_ = month_of_year[today.getMonth()];
      //var year_ = today.getFullYear();
      var hours_ = today.getHours();
      var min_ = today.getMinutes();
      var sec_ = today.getSeconds();
      var zerom = zeros = '';
      if(min_ < 10) zerom = '0';
      if(sec_ < 10) zeros = '0';
 document.getElementById('txt').innerHTML=hours_+""+":"+""+zerom+min_+""+":"+""+zeros+sec_;
 document.getElementById('txt1').innerHTML=day_+","+'&nbsp'+'&nbsp'+date_+" "+month_;
   }
   setInterval(time, 1);
</script>
    
    </td>
  </tr>
  <tr>
    <td width="10%" height="35">
    
  </td>
    <td width="30%">
    
<canvas id="cpu2" width="184" height="29">Canvas not supported</canvas>
</div>

<script type="text/javascript">
   
   cpulevel2 = new timeline2c('cpu2', 'serverCPUload.value', 'CPU2:', 2000, '%');
   cpulevel2.alertmin = 0;
   cpulevel2.alertmax = 85;
   cpulevel2.background = 'rgba(0, 0, 0, 1)';
   cpulevel2.color = 'rgba(200, 200, 200, 1)';
   cpulevel2.border = 0;
   cpulevel2.basecolor = 'rgba(100, 100, 100, 1)';
   cpulevel2.grid = 0;
   cpulevel2.redraw();
   cpulevel2.color_title = 'rgba(0, 0, 0, 1)';
 </script>

    </td>
    <td width="30%">


 <div style="background:transparent">
<canvas id="lev3" width="80" height="30">Canvas not supported</canvas>
<canvas id="lev4" width="80" height="30">Canvas not supported</canvas>
<canvas id="lev5" width="80" height="30">Canvas not supported</canvas>
</div>    

<script type="text/javascript">

   level_3 = new level2('lev3', 'serverCPUTemp.Value', 'CPU TEMP', 2000, '°C');
   level_3.alertmin = 0;
   level_3.alertmax = 50;
   //level_3.background = 'rgba(200, 40, 40, 1)';
   level_3.max_ = 48;
   level_3.min_ = 15;
   level_3.yellow_ = 45;
   level_3.red_ = 43;
   level_3.orange_ = 41;
   level_3.green_ = 20;
   level_3.blue_ = 10;
   level_3.cyan_ = 0;
   level_3.redraw();

   level_4 = new level2('lev4', 'serverCPUFan.Value', 'FAN', 2000, '');
   level_4.alertmin = 2050;
   level_4.alertmax = 2512;
   //level_4.background = 'rgba(200, 40, 40, 1)';
   level_4.max_ = 2500;
   level_4.min_ = 2000;
   level_4.yellow_ = 2400;
   level_4.green_ = 2350;
   level_4.orange_ = 2150;
   level_4.blue_ = 2100;
   level_4.cyan_ = 2050;
   level_4.red_ = 2000;
   level_4.redraw();
   
   
   level_5 = new level2('lev5', 'serverHddTemp.Value', 'HDD TEMP', 2000, '°C');
   level_5.alertmin = 0;
   level_5.alertmax = 50;
   //level_5.background = 'rgba(200, 40, 40, 1)';
   level_5.max_ = 48;
   level_5.min_ = 15;
   level_5.yellow_ = 45;
   level_5.red_ = 43;
   level_5.orange_ = 41;
   level_5.green_ = 20;
   level_5.blue_ = 10;
   level_5.cyan_ = 0;
   level_5.redraw();
</script>    




    </td>
 
    <td width="30%">

    </td>    
  </tr>
  
   <tr>
    <td width="10%" height="20">
    
  </td>
    <td COLSPAN="2" width="30%">
    
<div style="background:transparent">
<canvas id="stt1" width="55" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt2" width="55" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt3" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt4" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt5" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt6" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt7" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt8" width="55" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt9" width="55" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
</div>
<script type="text/javascript">

    st1 = new state2('stt1', 'Radio.RadioLedOn', 'Радио', 10000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    
    
    st1 = new state2('stt2', 'ThisComputer.AlarmLedOn', 'Будильник', 10000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();     
    
    st1 = new state2('stt3', 'Alise.Led', 'Алиса', 20000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // transparent
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // black
    st1.redraw();     
    
     st1 = new state2('stt4', 'Radio.RadioLedOn', 'Питание', 20000, 1);
   st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    
    
    st1 = new state2('stt5', 'Radio.RadioLedOn', 'Радио', 10000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    

    st1 = new state2('stt6', 'serverCPUload.value', 'SYSTEM', 20000, 1);
    st1.alertmin = 05;
    st1.alertmax = 95;
    st1.int1_min = 80; st1.int1_max = 101; st1.int1_color = '#ff0000'; // red
    st1.int2_min = 65; st1.int2_max = 79; st1.int2_color = '#ff9900';  // orange
    st1.int3_min = 51; st1.int3_max = 64; st1.int3_color = '#ffff00'; // green
    st1.int4_min = 11; st1.int4_max = 50; st1.int4_color = '#00ff00'; // blue
    st1.int5_min = 0; st1.int5_max = 10; st1.int5_color = '#00ffff'; // cyan
    st1.redraw();    
    
    
     st1 = new state2('stt7', 'AlarmMenu.AlarmMenuLed', 'Свет', 20000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();     
    
    st1 = new state2('stt8', 'Ulica.UlicaLedOn', 'Улица', 10000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    
     st1 = new state2('stt9', 'Garag.UlicaLedOn', 'Гараж', 10000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();     
    

</script>
 
 




    </td>
 
    <td width="30%">

    </td>    
  </tr>
</table>


                                </td>

  <!--#
  <td valign="top" nowrap>
  [ <a href="#" onClick="return openTWindow('addEventWin', 'Add Event', '/popup/addevent.html', 500, 230)">Add Event</a> ]
  </td>
  #-->
  <td valign="top" nowrap>

  <table border="0" align="right">
   <tr>
    <td valign="top" nowrap> <a>&nbsp</a> </td>
  
   </tr>
   <tr>
    <td valign="top" nowrap>[ <a href="/admin.php"><#LANG_CONTROL_PANEL#></a> ]</td>
  <form action="/" method="get" name="frmSettings">
  [#if HIDE_TERMINALS!="1"#]
  <td valign="top" nowrap>
   <#LANG_TERMINAL#>:
   <select name="terminal" onChange="document.frmSettings.submit();">
    <option value=""><#LANG_SELECT#>
    [#begin TERMINALS#]
    <option value="[#NAME#]"[#if SELECTED="1"#] selected[#endif#]>[#TITLE#]
    [#end TERMINALS#]
   </select>
  </td>
  [#endif#]
  <!--#
  [#if HIDE_USERS!="1"#]
  <td valign="top" nowrap>
   <#LANG_USER#>:
   <select name="username" onChange="document.frmSettings.submit();">
    <option value=""><#LANG_SELECT#>
    [#begin USERS#]
    <option value="[#USERNAME#]"[#if SELECTED="1"#] selected[#endif#]>[#NAME#]
    [#end USERS#]
   </select>
  </td>
  [#endif#]
  #-->
  </form>
   </tr>
   
   <tr>
    <td valign="top" colspan="3" align="right" nowrap>
    <a href="<#LANG_WIKI_URL#>" target=_blank>MajorDoMo Project</a>
    |
    <a href="/popup/xray.html" target=_blank>X-Ray</a>
    </td>
   </tr>
  </table>
  </td>
  <td valign="top">
   [#if USER_AVATAR!=""#]
   <a href="#" onClick="return openModalTWindow('usersWindow', '<#LANG_USERS#>', '/popup/users.html', 500, 500);"><img src="/cms/avatars/[#USER_AVATAR#]" border="0" height="50"></a>
   [#else#]
   <a href="#" onClick="return openModalTWindow('usersWindow', '<#LANG_USERS#>', '/popup/users.html', 500, 500);"><img src="<#ROOTHTML#>templates_alt/icon/user.png" border="0"></a>
   [#endif#]
  </td>
 </tr>
 </table>
  
  </td>
 </tr>
 <tr>
  <td valign="top" width="350" id="leftPanel">
  <iframe src="/menu.html" width="350" height="450" id="navFrame" border="0" frameborder=0 framespacing=0></iframe>
  <!--#<iframe src="/demos/main/index.html" width="350" height="400" border="0" frameborder=0 framespacing=0 scrolling="auto"></iframe>#-->
  <!--#
  <img src="/img/0.gif" border="0" width="300" height="1">
  <div id="alertsLog" class="small">
   [#module name="shoutbox" limit="5"#]
  </div>
  #-->
  </td>

  <td valign="top" width="100%">

<div id="tabs">
<ul>
[#begin LAYOUTS#]
<li>
<a href="#tabs-[#ID#]"[#if ICON!=""#] style="padding:1px 1em 2px 0.5em"[#endif#]>[#if ICON!=""#]<img src="/cms/layouts/[#ICON#]" align="absmiddle" height="28">&nbsp;&nbsp;[#endif#][#TITLE#]</a></li>
[#end LAYOUTS#]
  <li><a href="#tabs-last"><span id='tablast_title'>***</span></a></li>
</ul>

[#begin LAYOUTS#]
<div id="tabs-[#ID#]">...</div>
[#end LAYOUTS#]

<div id="tabs-last">
  ...
</div> 

</div>

  </td>
 </tr>
</table>

<script language="javascript">

var iFrameHeight=500;

$(document).ready(function() {
  // Handler for .ready() called.
  iFrameHeight=$(document).height()-110;
  //alert($(document).height());
  $('#navFrame').height(iFrameHeight+57);
  [#begin LAYOUTS#]
  $('#htmlTab[#NUM#]').height(iFrameHeight);
  [#end LAYOUTS#]
  //alert($('#defaultFrame').height());
});

        $("#tabs").tabs({
        show: function(event, ui) { 
         iFrameHeight=$(document).height()-110;
         var selected = $( "#tabs" ).tabs( "option", "selected" );
         //alert(selected);
         [#begin LAYOUTS#]
         if (selected == [#NUM#]) {
          [#if TYPE="app"#]
           if ($('#tabs-[#ID#]').html()=='...') {
            $('#tabs-[#ID#]').html('<iframe src="/popup/[#APP#].html" width=100% height="'+iFrameHeight+'" border="0" frameborder="0"></iframe>');
           }
          [#endif TYPE#]
          [#if TYPE="url"#]
           if ($('#tabs-[#ID#]').html()=='...') {
            $('#tabs-[#ID#]').html('<iframe src="[#URL#]" width=100% height="'+iFrameHeight+'" border="0" frameborder="0"></iframe>');
           }
          [#endif TYPE#]
          [#if TYPE="html"#]
           if ($('#tabs-[#ID#]').html()=='...') {
            $('#tabs-[#ID#]').html('<iframe src="/page/[#ID#].html" width=100% height="'+iFrameHeight+'" border="0" frameborder="0"></iframe>');
           }
          [#endif TYPE#]
         }
         [#end LAYOUTS#]
        }});

$('#tabs').tabs('paging', {cycle:false, follow:false});


</script>

PAV · Сообщение **PAV** » Вт июл 01, 2014 2:57 pm

custom.css создали?

Vit · Сообщение **Vit** » Вт июл 01, 2014 5:30 pm

Да конечно

DiArt · Сообщение **DiArt** » Вт июл 01, 2014 8:52 pm

Toutlemond Выложите плиз исходники. Очень понравилось

Vit · Сообщение **Vit** » Вт июл 01, 2014 9:19 pm

да, красиво...

выложите посмотреть...может кто себе что то нарисует по вашему примеру

electric · Сообщение **electric** » Чт июл 03, 2014 7:21 pm

Кто-нибудь разобрался с веб-мордой системы?
Поискал на форуме, не нашел - подскажите, может есть где карта/схема или что то в этом роде верстки веб-интерфейса?
Я так понял, присутствуют фреймы, табличное представление html, открываю редактором - ничего не понятно - где что?
Может Сергей нарисует какую схему или пояснение?

PAV · Сообщение **PAV** » Пт июл 04, 2014 10:44 am

Не нарисует, он сам не знает

Там жопа конечно, я пока под себя переделывал кучу всего правил и тоже не смогу сказать что конкретно, просто брал, смотрел firebug на что ссылается и правил.

Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса