{% extends 'base.html' %}
{% load staticfiles %}
{% load i18n %}



{% block extrameta %}

    <link href="/static/bukvar/gideros.css" rel="stylesheet">
    <link href="/static/bukvar/pace.css" rel="stylesheet">

    <style>
	    	    #playit{ cursor: pointer}
/*
	    #playit{
		        border-radius: 5px;

    box-shadow: 0 3px 0 0 rgb(101, 0, 5);
    background-color: #da6d70;
		    line-height: 85px;
    font-weight: 400;
    font-size: 40px;
	    }
*/
	    	    .gameit:hover{
/* 		    	    background-color: #2b967a!important; */
		    	    }
		    	    
	    .gameit{
/* 		    	    background-color: #2b967a!important; */
		        box-shadow: none!important;
		            background: none!important;
		                padding-top: 0px!important;
		                		                padding-left: 0px!important;
		                		                padding-bottom: 111px!important;
		                		                
/*     min-height: 700px!important; */
/*     margin: 0!important; */
/*     width: 710px!important; */
/*     padding: 0!important; */
    }
    
	    .tab-content{
/* 	    padding-top: 85px; */
}

     #t_for_parents a {color:blue}
    .tab-content2 {
{#        display: none;#}
    }
#page1-block .tab-block2 .tab-container {
	width: 795px;
    height: 482px!important;
    background: #fff;
    min-height: 425px;
    border-radius: 5px;
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.1);
    width: 795px;
    height:420px!important;
    padding: 19px 20px 40px;
}
    </style>
    <script>
    $('.tr_submit').live('click', function () {
       $(this).parent('form').submit();
    });
    
    

$( document ).ready(function() {
	$('#clickit').parent('li').parent('ul').slideToggle(400);
	
	$('#playit').on('click',()=>{
		$('.tab-container').addClass('gameit');
		$('.tab-container').html("<embed src='/media/games/{{app.slug_folder}}/Ifolica.swf' width='835' height='536'>");
	})
	
	$('.smsm a').click(
		function(){
            $(this).parent('li').children('.tabs22').slideToggle(400);
        }
	);
});




    </script>
    
      <style>
/*
	      	  .tabs li a{
		      	      padding-left: 0!important;
		      	      height: 47px!important;
	      	  }
*/
	  .tabs22 li{
		      vertical-align: middle!important;
    height: 59px!important;
	  } 
	  .tabs22 li a {
		      line-height: 17px!important;
    font-size: 14px!important;
    padding-top: 6px!important;
    padding-left: 0!important;
    font-weight: 300!important;
    height: 47px!important;
    vertical-align: middle!important;
	  }
	  .tabs img {
    height: 32px!important;
    float: left!important;
    padding: 0 6px 0px 6px!important;
    border-radius: 3px!important;
	  }
	  	  .tabs22 li{}
	  	  
	  	  .fpp p {
		  	  margin-top:10px;
	  	  }
	  .tabs22 li a:before {
content: '';
    top: -11px;
    left: 118px;
    position: absolute;
    width: 2px;
    height: 10px;
    background: rgba(255, 255, 255, 0.71);
	  }
	  .fpp{    margin-left: 294px;}
	  .banner{
		      width: 264px;
    text-align: center;
    height: 260px;
    font-weight: 100;
    font-size: 48px;
    color: #61ab97;
    border: 1px dashed #488877;
	  }
	  
	  
	  </style>

{% endblock %}

{% block main %}
  <!-- page1-block -->
<div id="page1-block">
  <div class="wrapper">
    <div class="tab-block2">
	    
        <ul class="tabs">
			{% for group in groups %}
			    <li class="smsm"><a href="#tab1">{{group.name}}</a>
					<ul class="tabs22">
						{% for item in apps %}
							{% if item.group == group %}
							<li><a {% if item.id == app.id %} id="clickit" style="background-color:#157f63"{% endif %} href="/learnread/{{item.slug_folder}}/"><div><img src="/media/{{ item.menu_image }}"></div><div style="display: table-cell; vertical-align: middle; height:32px">{{item.name}}</div></a></li>
							{% endif %}
						{% endfor %}
					</ul>
			    </li>	
			{% endfor %}

<div style="padding-top:15px"><a href="http://omega-press.ru/books/detskaya-literatyra/aifolika/knigi-s-nakleikami/978-5-00123-000-7.html" target="_blank"><img src="/static/ban/1.png" style="width:242px!important; height:228px!important; margin-left:18px"></a></div>
<div style="padding-top:245px"><a href="http://omega-press.ru/books/detskaya-literatyra/aifolika/knigi-v-myagkoi-oblojke/" target="_blank"><img src="/static/ban/2.png" style="width:242px!important; height:228px!important; margin-left:18px"></a></div>
<div style="padding-top:245px"><a href="http://omega-press.ru/books/detskaya-literatyra/aifolika/knigi-v-myagkoi-oblojke/" target="_blank"><img src="/static/ban/3.png" style="width:242px!important; height:228px!important; margin-left:18px"></a></div>


<!-- 		<div class="banner"> <br>[banner] </div>			 -->
		</ul>
		
		

{% if app %}
      <div  class="tab-container" style="height: 600px; margin-bottom: 44px; background-image: url('/media/{{app.bg_img}}'); background-size: contain; padding-top: 71px"><div style="clear:both; margin-top:100px; clear: both;    position: absolute;    margin-top: 485px;"></div>
     
      <div class="b1">
      <div class="plb"  id="playit"></div>
	  {% if app.google_market %}<a target="_blank" href="{{app.google_market}}">{% endif %}<div class="gpb{% if not app.google_market %} gs{% endif %}"></div></a>
	  {% if app.apple_store %}<a target="_blank" href="{{app.apple_store}}">{% endif %}<div class="asb{% if not app.apple_store %} gs{% endif %}"></div></a>
      <div class="ttx">{% autoescape off %}{{app.text}}{% endautoescape %}</div>
      
  




{% else %}

<style>.tabs22{ display: block!important;}</style>

<div class='fpp'>
<h1>Интерактивный курс обучения чтению «Айфолика» </h1>
 
<p>«Айфолика» — это эффективный увлекательный курс обучения чтению для детей дошкольного возраста. В его основе лежит запатентованный способ изучения букв русского алфавита и чтения слов. </p> 
<p>Курс состоит из отдельных приложений, каждое из которых направлено на поэтапное обучение ребенка чтению: произношение звуков, запоминание букв, чтение слогов, чтение слов и чтение предложений.</p>
<p>Методика подойдет как детям, которые совсем не знают азбуки, так и тем малышам, кто уже имеет начальные знания.</p>
 
<p>Современные дети рано знакомятся со смартфонами и планшетами. И конечно, прежде всего дети играют на них в игры. Онлайн курс обучения чтению «Айфолика» дает прекрасную возможность воспользоваться этим, чтобы научить ребенка читать.</p>
 
<p>Занятия по курсу «Айфолика» развивают мелкую моторику, внимание, память, логическое и абстрактное мышление, речевые умения и навыки, а также познавательную активность, самостоятельность и творческие способности ребенка.</p>

<h2>Почему именно букварь «Айфолика»? </h2> 

<p>Для того, чтобы научиться читать, чтобы ум ребенка производил сложные мыслительные операции: сравнение, анализ и синтез, абстрагирование, обобщение и конкретизацию. Выполняя игровые упражнения с нашим букварем-онлайн, ребенок задействует все эти виды мыслительных операций. Упражнения в «Айфолике» построены на сочетании логики с ассоциированием, что активизирует работу обоих полушарий мозга малыша. На этой психологической основе и построена методика курса «Айфолика».</p>

<p>При разработке курса соблюдены основные педагогические принципы: последовательность, доступность, наглядность, адекватность.</p>

<p>Приемы обучения чтению строится на принципе «от звука к букве», начинается с фонетического блока и заканчивается упражнениями по чтению.</p>

<p>Изучение каждой буквы алфавита состоит из 18 развернутых этапов с игровыми упражнениями, направленными на правильное произношение звука, запоминание и воспроизведение визуального образа буквы, соотнесение звука с графическим изображением соответствующей буквы, нахождения этой буквы среди других, составление и озвучивание слогов с изучаемой буквой.</p>

<div id="hddd"><br> <a href="javascript:void(0);" onClick="$('#hdd').show();$('#hddd').hide();" style="text-decoration: underline">Читать далее</a><br><br></div>
 <div style="display:none" id="hdd">
	 <p><b>Курс состоит из набора приложений, которые включают в себя:</b><br>
1. <b>Изучение букв и звуков, которые они обозначают.</b> Диктор методически правильно произносит звуки, затем ребенок по заданию диктора выполняет игровые упражнения и повторяет звуки. Изображение на экране помогает ребенку понять артикуляционное положение губ и языка. Это такие упражнения, как произнесение и пропевание звуков, нахождение различных предметов, названия которых начинаются на изучаемый звук. 	</p>
<p><b>2. Запоминание графического изображения букв.</b> Ребенок учится запоминать и воспроизводить графическое изображение букв, воспринимать обозначаемые буквами звуки на слух и произносить эти звуки. На конкретных игровых примерах ребенок научится ассоциировать графическое изображение буквы с соответствующим звуком; сможет, рассматривая картинки, произносить слова и на слух определять место конкретного звука в слове; разовьет фонематический слух, речевые навыки и будет произносить звуки и составлять соответствующие буквы — от «А» до «Я». Играя в приложения, ваш малыш научится узнавать буквы, составляя их из различных предметов, рассматривая картинки, названия которых начинаются с изучаемой буквы, сопоставляя одинаковые и разные буквы и отгадывая интересные загадки. </p>
<p><b>3. Составление и чтение слогов. </b>В игровой форме ребенок учится составлять открытые и закрытые слоги из уже знакомых (изученных) букв и узнавать эти слоги в словах. По мере усвоения новых букв алфавита, упражнения в азбуке-онлайн будут усложняться. Упражнения на чтение слогов вводятся уже на третьей изучаемой букве.</p>
<p><b>4. Чтение слов. </b>Ребенок постепенно начинает складывать слоги в слова, двигаясь от простых односложных и двусложных слов к конструкциям с разными видами слогов. Играя, ребенок научится ассоциировать звучание слова с его написанием. На этапе обучения чтению слов ребенок познакомится с такими приложениями, как составление произнесенного диктором слова из предложенных слогов, чтение слов по слогам, составление слов по названию нарисованного предмета. </p>
<p><b>5. Чтение предложений. </b>Сначала ребенку предлагается прочитать простые предложения со словами, разделенными на слоги. Постепенно задания усложняются, и вводятся знаки препинания. В результате ребенок научится читать простые тексты, состоящие из нескольких предложений.</p>

<p>Разработанные нами приемы обучения чтению также способствует интеллектуальному развитию ребенка в целом. Курс «Айфолика» станет для вашего ребенка первым букварем, который откроет ему волшебный мир книг. </p>

<p>Курс подготовлен коллективом практикующих педагогов-филологов и психологов, специалистов по дошкольному воспитанию.</p>

<p>Методика букваря запатентована как полезное изобретение в Роспатенте.</p>

<p>Курс «Айфолика» подходит для детей от 3-х лет.</p>
 </div>
<br>
<img src='/static/mscr.jpg' width=800>





{% endif %}      
      
      <style>
	      
	      .ttx {
		          font-size: 16px;
    line-height: 20px;
		      color:#003ce4;
		      position: relative;
    top: -104px;
    width: 390px;
    left: 400px;
	      }
	      .plb {
			  width: 230px;
			  height: 80px;
			  position: relative;
			  top: 306px;
			  left: 76px;
			  background-size: contain;
			  background-repeat: no-repeat;
		      background-image: url('/static/images/plb.png');
	      }
	      .gpb {
width: 108px;
    height: 41px;
    position: relative;
    top: 314px;
    left: 76px;
		      background-size: contain;
		      background-repeat: no-repeat;
		      background-image: url('/static/images/gpb.png');
	      }
	      .asb {
width: 112px;
    height: 41px;
    position: relative;
    top: 273px;
    left: 195px;
		      background-size: contain;
		      background-repeat: no-repeat;
		      background-image: url('/static/images/asb.png');
	      }
	      .gs {
	-webkit-filter: alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	
		       filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
	      }
	      </style>
	    
	      
</div>



    
        </div>

        
<!--   <div class="wrapper"> -->

<br><br><h1 style="    padding-left: 301px!important;">Новости</h1>
<div class="news_block">
	
	      {% autoescape off %}
	{% for new in news %}
	<div class="ni"{% if new.image %} style="min-height: 166px;"{% endif %}>
		<div class="idate">{% if new.date %}{{ new.date |date:'d.m.y' }}{% endif %}</div>
		<div class="ih"><a href="/news/{{new.slug}}/">{{new.name}}</a></div>
		<div class="ib">
			<img src="/media/{{new.image}}" align="left">
			<div class="text">{{new.teaser}}<br>
				<a href="/news/{{new.slug}}">Подробнее...</a></div>
		</div>
	</div>
	{% endfor %}
	      {%  endautoescape %}
<!-- </div> -->
</div>

    </div>

  

      <div class="clear"></div>


</div>
          
          
    </div>
  </div>
  
</div>




  <!-- page1-block END -->
  <div class="pfooter"></div>
</div>
{% endblock %}