ceremcem/aktos-scada-index.html

## aktos-scada-index.html
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js"><!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="aktos elektronik: yazılım - donanım - otomasyon - telemetri - IoT. Geniş çaplı otomasyon, telemetri ve IoT projelerinde kullanılmak üzere yerli üretim yazılım ve donanım üretir, doğrudan uygulama yapar.">
    <link rel="icon" type="image/png" href="img/aktos-icon.png">
    <title>aktos elektronik</title>
    <meta name="viewport" content="width=device-width; target-densitydpi=device-dpi; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <link rel="stylesheet" href="stylesheets/app.css">
  </head>
  <body>
    <div id="loading">
      <h1 style="text-align: center">Loading aktos-scada...</h1>
    </div>
    <div id="container"></div>
    <script id="app" type="text/ractive">
      <!-- Generated by update-partial-includes.sh-->
{{#partial analog-display}}

            <button class="analog-display">{{ .val == null ? '---' : .val }}</button>
{{/partial}}

{{#partial arrow-keys}}

            <div class="arrow-keys">
              <tr>
                <th></th>
                <th> {{>push-button {pin_name: 'arrow-up', label: ' ', icon: 'arrow-up', iconpos: 'bottom'} }} </th>
                <th></th>
              </tr>
              <tr>
                <th> {{>push-button {pin_name: 'arrow-left', label: ' ', icon: 'arrow-left', iconpos: 'bottom'} }} </th>
                <th> {{>push-button {pin_name: 'arrow-center', label: ' ', icon: 'check', iconpos: 'bottom'} }} </th>
                <th> {{>push-button {pin_name: 'arrow-right', label: ' ', icon: 'arrow-right', iconpos: 'bottom'} }} </th>
              </tr>
              <tr>
                <th></th>
                <th> {{>push-button {pin_name: 'arrow-down', label: ' ', icon: 'arrow-down', iconpos: 'top'} }} </th>
                <th></th>
              </tr>
            </div>
{{/partial}}

{{#partial b-circle-button}}

            <div class="b-circle-button">
              <div class="jq-push-button">
                <button style="{{ .connected? '' : 'border: 1px dashed red' }}" type="button" class="jq-push-button__button btn-circle btn-xl no-shadow"><i class="fa fa-{{ .icon ? .icon : 'trash' }}"></i></button>
              </div>
            </div>
{{/partial}}

{{#partial b-circle-button-v2}}

            <div class="b-circle-button-v2">{{>jq-push-button}}</div>
{{/partial}}

{{#partial b-notification-box}}

            <div class="b-notification-box">
              <div class="panel panel-{{ .opt ? .opt : 'primary' }}">
                <div class="panel-heading">
                  <div class="row">
                    <div class="col-xs-3"><i class="fa fa-{{ .icon ? icon : 'comment' }} fa-5x"></i></div>
                    <div class="col-xs-9 text-right">
                      <div class="huge">{{ .val ? .val : 0 }}</div>
                      <div>{{ .label ? .label : 'New Comments!' }}</div>
                    </div>
                  </div>
                </div>
                <div class="panel-footer"><a href="#"><span class="pull-left">View Details</span><span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div></a></div>
              </div>
            </div>
{{/partial}}

{{#partial b-progress-bar}}

            <div class="b-progress-bar">
              <div style="width: 100%; height: 100%" class="progress">
                <div role="progressbar" aria-valuenow="{{ .val ? .val : 0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ .val ? .val : 0 }}%" class="progress-bar"></div>
              </div>
            </div>
{{/partial}}

{{#partial b-slider}}

            <div class="b-slider">
              <input
                type="text"
                class="b-slider__input span2"
                value="{{ .val ? .val : '---' }}"
                data-slider-min="-20"
                data-slider-max="20"
                data-slider-step="1"
                data-slider-value="-14"
                data-slider-orientation="vertical"
                data-slider-selection="after"
                data-slider-tooltip="hide"
                />
            </div>
{{/partial}}

{{#partial b-stacked-progress-element}}

            <div role="progressbar" aria-valuenow="{{ .val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ .val/.total }}%; background:   {{#if .color === ''}} #337ab7 {{elseif .color === 'red' }} #d9534f {{elseif .color === 'orange' }} #f0ad4e {{elseif .color === 'green' }} #5cb85c {{elseif .color === 'blue' }} #5bc0de {{else}} .color {{/if}};" class="progress-bar b-progress-bar">
            </div>
{{/partial}}

{{#partial b-stacked-progress}}

            <div class="b-stacked-progress">
              <div class="b-stacked-progress__inner progress">
                {{#each pin_names:i}}
                  {{>b-stacked-progress-element
                     {pin_name: pin_names[i][0],
                     val: 100,
                     color: pin_names[i][1],
                     total: pin_names.length
                   }}}
                {{/each}}
              </div>
            </div>
{{/partial}}

{{#partial b-vertical-progress-bar}}

            <div class="b-vertical-progress-bar">
              <div class="b-vertical-progress-bar__inner">
                <div style="height: 100%;" class="progress progress-vertical">
                  <div role="progressbar" aria-valuenow="{{ .val }}" aria-valuemin="0" aria-valuemax="100" style="height: {{ .val ? .val : 0 }}%" class="progress-bar"></div>
                </div>
              </div>
            </div>
{{/partial}}

{{#partial circular-progress}}

            <div class="circular-progress">
              <div class="circular-progress__inner"><strong>{{ .val }}<i>{{ .val ? .unit : '' }}</i></strong></div>
            </div>
{{/partial}}

{{#partial connection-status}}

             <div class="connection-status"
               style='background-color: {{ .connected ? "yellowgreen" : "lightgray" }}'>
               {{.connected? "connected..." : "connecting..." }}
             </div>
{{/partial}}

{{#partial gauge}}

            <div class="gauge"><canvas id='{{ .actor_id }}'></canvas><span>{{ .label? .label : .pin_name }}</span></div>
{{/partial}}

{{#partial jq-checkbox}}

            <div class="jq-checkbox">
              <span class="button-checkbox" style="{{ .connected? '' : 'border: 1px dashed red' }}">
                  <button type="button" class="btn" data-color="primary">{{ .label ? .label : .pin_name }}</button>
                  <input type="checkbox" class="hidden" />
              </span>
            </div>
{{/partial}}

{{#partial jq-flipswitch-v2}}

            <div class="jq-flipswitch-v2">
              <input id="{{ .actor_id }}-switch" data-pin-name="{{ .pin_name }}" type="checkbox" data-toggle="toggle" data-style="quick" class="jq-flipswitch-v2__switch">
            </div>
{{/partial}}

{{#partial jq-push-button}}

            <div class="jq-push-button">
              <span class="button-checkbox" style="{{ .connected? '' : 'border: 1px dashed red' }}">
                  <button type="button" class="btn" data-color="primary"><span class="jq-push-button__label">{{ .label ? .label : .pin_name }}</span></button>
                  <input type="checkbox" class="hidden" />
              </span>
            </div>
{{/partial}}

{{#partial jq-slider}}

            <div class="jq-slider">
              <input
                value="{{ .val }}"
                class="jq-slider__container"
                min="0"
                max="100"
                type="range"
                 />


            </div>
{{/partial}}

{{#partial justgage}}

            <div class="justgage">
              <div class="justgage-gauge" id='{{ .actor_id }}'></div>
              <h3>{{ .val }}</h3>
              {{#if .debug}}
                <p>actor id: {{ .actor_id }} </p>
              {{/if}}
            </div>
{{/partial}}

{{#partial label}}

            <div class="label">
              <div class="label__inner">{{ .val ? .val : '---' }}</div>
            </div>
{{/partial}}

{{#partial line-graph}}

            <div class="line-graph">
              <div class="line-graph__graph" id="{{ .actor_id }}" />

            </div>
{{/partial}}

{{#partial login-input}}

            <div class="login-input">
              <input type="text">
            </div>
{{/partial}}

{{#partial login-info}}

            <div class="login-info">
              <p>{{ .client_name }}</p>
            </div>
{{/partial}}

{{#partial numeric-keyboard}}

            <div class="numeric-keyboard">
              <table>
                <tbody>
                  {{#each [0, 1, 2, 3]:i}}
                    <tr>
                    {{#each [0, 1, 2, 3]:j}}
                      <th>
                        {{>push-button {pin_name: 'keypad-' + keyboard_data[i][j], label:  keyboard_data[i][j], icon: ''} }}
                      </th>
                    {{/each}}
                    </tr>
                  {{/each}}

                </tbody>
              </table>
            </div>
{{/partial}}

{{#partial nav-bar}}

            <div class="nav-bar">
              {{#with page.menu}}
              <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-example-navbar-collapse-1">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" style="padding: 0; padding-left: 10px; " href="#/"><img src="{{.brand.icon}}" style="height: 100%; width: auto;" alt="{{.brand.name}}"/></a>
                  </div>

                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                      {{#each .links}}
                      <li {{ .addr === active_button ? 'class="active"' : ''}}><a href="{{.addr}}">{{.name}}</a></li>
                      {{/each}}
                    </ul>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
              </nav>
              {{/with}}
            </div>
{{/partial}}

{{#partial push-button}}

            {{! >push-button-0}}
            {{>jq-push-button}}
            {{!>b-push-button}}
{{/partial}}

{{#partial scada-generate-layout}}

            <div class="scada-generate-layout">
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#layout-output-{{ .actor_id }}">Generate Layout!</button>

              <div class="modal fade" id="layout-output-{{ .actor_id }}"  role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Scada Layout</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                          [--> scada-layout.ls](https://github.com/ceremcem/aktos-website/blob/master/app/static/scada-layout.ls)
                        </p>
                        <textarea class="scada-generate-layout__textarea" id="layout-output-area-{{ .actor_id }}"></textarea>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
{{/partial}}

{{#partial seven-segment}}

            <div class="seven-segment">
              <div class="seven-segment__display"></div>
            </div>
{{/partial}}

{{#partial simple-display}}

            <div class="simple-display"><span>Value: {{ .val }}</span></div>
{{/partial}}

{{#partial slider}}

            {{>slider-v2}}

{{/partial}}

{{#partial slider-v2}}

            <div class="slider-v2">
              <div class="slider__outer">
                <div id="{{actor_id}}" class="slider__inner"></div>
              </div>
            </div>
{{/partial}}

{{#partial spinbox}}

            <div class="spinbox">
              <input
                class='spinbox__data-input'
                type="text"
                data-role="spinbox"
                data-theme="b"
                data-options='{"type":"horizontal"}'
                value="{{ .val }}"
                min="0"
                max="100" />
            </div>
{{/partial}}

{{#partial status-led}}

            <div id="{{ .actor_id }}" style="display: inline-block" class="status-led">
              <label><img src="img/status-led/{{ .src? .src : 'light-bulb' }}/{{ .val? 'on' : 'off' }}.png" alt="{{ .val? 'on' : 'off' }}" ondragstart="return false; ">{{ .pin_name }}</label>
            </div>
{{/partial}}

{{#partial switch-button}}

            {{!>switch-button-basic}}
            {{!>jq-flipswitch}}
            {{>jq-flipswitch-v2}}
{{/partial}}

{{#partial switch-button-basic}}

            <div style="display: inline-block; margin: 10px" class="switch-button-basic">
              <label>
                <input type="checkbox" data-role="none" class="switch-button-basic__input"><span style="padding: 5px">   {{ .label }}</span>
              </label>
            </div>
{{/partial}}

{{#partial table-row}}

            <tr>
              {{#each row_data:j}}
                <th> {{ row_data[j] }} </th>
              {{/each}}

            </tr>
{{/partial}}

{{#partial table}}

            <table class="table">
              <tbody>
                {{#each table_data:i}}
                  {{>table-row {row_data: table_data[i]}}}
                {{/each}}
              </tbody>
            </table>
{{/partial}}

{{#partial test-widget}}

            <div class="test-widget"><span>
                this is test widget
                {{ .label }}
                </span></div>
{{/partial}}

{{#partial textbox}}

            <div class="textbox">
              <textarea value="{{ .val }}"></textarea>
            </div>
{{/partial}}

{{#partial thermometer}}

            <div class="thermometer">
              <canvas id='{{ .actor_id }}' width="90" height="230">[No canvas support]</canvas>
              {{#if .debug}}
                <p>actor id: {{ .actor_id }} </p>
              {{/if}}
            </div>
{{/partial}}

{{#partial toolbar}}

            <div class="toolbar">
              <div id="{{ .actor_id }}" data-toolbar="hide-option" class="btn-toolbar btn-toolbar-primary"><i class="fa {{ .icon ? .icon : 'fa-cog' }}"></i></div>
              <div id="{{ .actor_id }}-options" class="hidden">
                {{#each buttons:i}}
                  <a href='{{ buttons[i].split(" ")[0] }}'><i class='fa {{ buttons[i].split(" ")[1] ? buttons[i].split(" ")[1] : "fa-cog" }}'></i></a>
                {{/each}}
              </div>
            </div>
{{/partial}}

      <div id="home-page" data-role="page" data-theme="a">{{>nav-bar {active_button: '#/'}}}
        <div class="container">
          <div class="row">
            <div class="col-sm-12"><img src="img/aktos-logo-2.3.png" style="width: 100%; margin: 0; margin-top: -10px;"></div>
          </div>
          <div class="row">
            <div class="col-sm-offset-1 col-sm-4 home-col-padding">{{#with page.home.aboutUs}}
              <h2>{{ .header }}</h2>{{{ marked( .bodyShort ) }}}
              {{/with}}
            </div>
            <div class="col-sm-offset-1 col-sm-4 col-sm-offset-1 home-col-padding">
              <h2>Etkinlikler</h2>{{#each page.home.news }}
              <h3>{{ .header }}</h3>{{{ marked( .bodyShort ) }}}
              {{/each}}
            </div>
          </div>
        </div>{{>connection-status {}}}
      </div>
      <div id="applications" data-role="page" data-theme="a">
        {{>nav-bar {active_button: '#/applications'} }}
        {{#with page.projects}}
          <div class="vcenter__outer">
            <div class="vcenter__inner">
            {{#each .}}
              <div class="product__container">
                <a href="{{ .addr ? .addr : '#' }}">
                  <div  class="product__background" style="
                    background: url({{.src}}) no-repeat center center ;
                    background-size: cover;
                  ">
                    <div class="product__text-container">
                      <div class="product__label-container">
                        {{.label}}
                      </div>
                      <div class="product__short-desc-container">
                        {{ .shortDesc }}
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            {{/each}}
            </div>
          </div>
          {{/with}}
      </div>
      <style>
        .vcenter__outer{
          text-align: center;
        }
        .vcenter__inner{
        }
        .product__container {
            max-height: 60vw;
            max-width: 85vw;
            width: 32em;
            height: 20em;
            display: inline-block;
            margin: 1.5em;
            padding: 0;
        }
        .product__background {
          width: 100%;
          height: 100%;
          position: relative;
          -webkit-border-radius: 18px;
          -moz-border-radius: 18px;
          border-radius: 18px;
          border: none;
          outline: none;
          box-shadow: 0 0 8px  rgb(51, 89, 193);
          overflow: hidden;
        }
        .product__text-container {
          /*background-color: rgba(0, 0, 0, 0.8);*/
          background-color: rgba(255,255,255, 0.8);
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 40%;
          text-align: left;

          vertical-align: middle;
        }
        .product__label-container {
          width: 100%;
          font-weight: bold;
          font-size: 200%;
          padding: 5px;
        }
        .product__short-desc-container {
          width: 100%;
          padding: 6px;
        }

      </style>
      <div id="products" data-role="page" data-theme="a" style="padding-bottom: 100px">
        {{>nav-bar {active_button: '#/products'}}}
        {{#with page.products}}
          <div class="vcenter__outer">
            <div class="vcenter__inner">
            {{#each .}}
              <div class="product__container">
                <a href="{{ .addr ? .addr : '#' }}">
                  <div  class="product__background" style="
                    background: url({{.src}}) no-repeat center center ;
                    background-size: cover;
                  ">
                    <div class="product__text-container">
                      <div class="product__label-container">
                        {{.label}}
                      </div>
                      <div class="product__short-desc-container">
                        {{ .shortDesc }}
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            {{/each}}
            </div>
          </div>
          {{/with}}
      </div>
      <div id="aktos-dcs" data-theme="b" data-role="page">
        <!-- aktos-dcs -->
          <section data-background="img/aktos-dcs/proje-kapak2.jpg">
              <h2>aktos-dcs</h2>
              <p>Dağıtılmış Kontrol Sistemleri (DCS) için yazılım altyapısıdır. </p>

              <p>PC üzerinde çalışır. PLC ve Motion Control sistemlerinin yerini alır.</p>
          </section>
          <section data-background="img/aktos-dcs/neden-dcs.png.jpg">
                  <h2>Neden DCS</h2>

                  <p class="fragment">
                      PLC (Programmable Logic Control) tren gibidir. Daha fazla vagon
                      eklemek gerekirse bir yerden sonra daha büyük bir lokomotif gerekir.
                      Eski lokomotif sökülür, yerine yenisi takılır. Sökülen lokomotif başka
                      bir yerde kullanılana kadar atıl kalır.
                  </p>

                  <p class="fragment">
                      DCS, metro gibidir. Daha fazla vagon eklemek gerekse de her vagonun
                      kendi motoru olduğu için sistemdeki herhangi bir şeyin
                      yenisiyle değiştirilmesi gerekmez. Arada bir tanesi arızalansa bile kimse
                      fark etmez, diğerleri bu hatayı kapatır. Yolda giderken yeni vagon
                      eklenebilir.
                  </p>
          </section>
          <section data-background="img/aktos-dcs/engineering.png.jpg">
              <h2>Nerede kullanılır</h2>
              <ul class="fragment">
                  <li> Fabrika ve tesis otomasyonları </li>
                  <li> Yüksek işlemci gücü veya matematik gereken kontroller</li>
                  <li> Görüntü işlemeye dayalı otomasyon sistemleri </li>
                  <li> Ülke geneline yayılmış istasyonların izlenmesi, kontrolü ve raporlanması </li>
                  <li> <b>Ülke çapında</b> enerji izleme ve kompanzasyon sistemleri için telemetri </li>
                  <li> Laboratuvar deneylerinin otomasyonu </li>
                  <li> Stok, üretim ve kalite takibi otomasyonu</li>
              </ul>
          </section>
          <section data-background="img/aktos-dcs/properties.png.jpg">
                  <h2> Sistem özellikleri </h2>
                  <img src="img/aktos-dcs/aktos-dcs-kapak2.png" />
          </section>
              <section data-background="img/aktos-dcs/realtime.png.jpg">
                  <h3> Gerçek zamanlı iletişim </h3>
                  <p>Sistemdeki olaylar yönetim ekranına (SCADA) gerçek zamanlı olarak yansıtılır</p>
          </section>
          <section data-markdown data-background="img/aktos-dcs/brand-independent.jpg">

                  #### Markadan bağımsız
                  **aktos-dcs**'in hem kontrol hem SCADA sistemi müşterinin istediği **herhangi bir marka** ([aktos-io](#/aktos-io), Phoenix Contact, Siemens, GE Fanuc, Omron, ABB, Allen-Bradley, OEM vs.) üzerine kurulabilir. Tek bir sistemde bile birden fazla markanın ürünleri kullanılabilir.

          </section>
          <section data-markdown data-background="img/aktos-dcs/tr-dsl.png.jpg">

                  #### Türkçe otomasyon dili
                  İşlem senaryosunun sıklıkla değiştiği ve ar-ge yapılan yerlerde (çamaşırhane, atık su arıtma tesisi, kimyasal laboratuvarlar vs.) bizzat işlemi bilen kişi tarafından, programcıya gerek kalmadan **Türkçe** yapma imkanı tanır.

                  (bkz. [CCA State Chart][1]) ve (bkz. [cca-pdl][2])

                  [1]: https://github.com/ceremcem/ccasc
                  [2]: https://ceremcem.net/projects/cca-pdl


          </section>
          <section data-markdown data-background="img/aktos-dcs/advanced-exception-handling.png.jpg">

                  #### Gelişmiş hata yönetimi

                  Modüllerden herhangi birinde yazılım geliştiricisinden kaynaklanan herhangi bir hata (ör. sıfıra bölme hatası) olması durumunda modül bir önceki sürümünü devreye alabilir, kendi hatasını raporlayabilir, kısa mesaj gönderebilir.

          </section>
          <section data-markdown data-background="img/aktos-dcs/large-projects.png.jpg">

                  #### Geniş çaplı projeler
                  1000'den fazla giriş-çıkış içeren, 10.000'lerce kullanıcısı olabilecek genişlikteki otomasyon ve telemetrilere uygundur.

          </section>
          <section data-markdown data-background="img/aktos-dcs/compatible-protocols.png.jpg">

                  #### Endüstriyel protokoller

                  **aktos-dcs**, belgelendirilmiş (Modbus, CanOpen, Hostlink, Memobus vs.) endüstriyel protokolleri kullanılır. Böylece mevcut PLC ve DCS sistemleriyle uyumlu çalışır.

          </section>
          <section data-markdown data-background="img/aktos-dcs/fault-tolerant.png.jpg">

                  #### Yüksek hata toleransı

                  Modüllerin herhangi birinde oluşacak herhangi bir hata sistemin tamamının durmasına neden olmaz. Modüller böyle durumlarda acil durum prosedürlerini işletme imkanına sahiptir.

          </section>
          <section data-markdown data-background="img/aktos-dcs/identity-options.png.jpg">

                  #### Geniş kimlik doğrulama araçları desteği

                  Uygun donanımı ilave etmek suretiyle her türlü kimlik denetimini destekler.

          </section>
          <section data-markdown data-background="img/aktos-dcs/plug-n-play.png.jpg">

                  #### Kolay internet bağlantısı

                  Her türlü internet bağlantısını kullanabilir:

                  * Endüstriyel modem
                  * USB 3G Modem
                  * Ethernet (modem ayarına gerek yoktur.)


          </section>

          <section data-markdown data-background="img/aktos-dcs/multiple-language.png.jpg">

                  #### Çoklu programlama dili desteği

                  Projeler aynı anda Python, Java, JavaScript, C, C++, C#, Ruby, vb. bir ya da birden fazla dille geliştirilebilir.

                  Programcı hangi dili isterse onu kullanır.

          </section>


          <section data-markdown data-background="img/aktos-dcs/remote-support.png.jpg">

                  #### Gelişmiş uzaktan erişim ve uzaktan destek

                  Geliştiriciler sistemin bütün ayrıntılarına ulaşacak imkana sahiptirler.

          <aside class="notes">
                  Sistemde aynı anda hem eski, hem yeni sürüm yazılım çalışır.
                  Yeni sürümdeki modülün doğru çalışacağı anlaşıldıktan sonra yetkilendirilmesi mümkündür.
          </aside>
          </section>
          <section data-markdown data-background="img/aktos-dcs/simulation.png.jpg">

                  #### Simülasyon desteği
                  Çok daha hızlı, kolay ve kaliteli kod üretilmesi için kodlar test edilmelidir.

                  Test etmenin en önemli yöntemi simülasyondur.

          <aside class="notes">

                                                  * Geliştirme ve güncelleme esnasında ortaya çıkan birçok **kriz daha oluşmadan önlenebilir**.
                                                  * Sistemle ilgili donanım henüz geliştiriciye ulaşmamışken bile yazılımın geliştirilmesine başlanabilir.
          </aside>
          </section>


          <section data-markdown data-background="img/aktos-dcs/distributed-mcu.png.jpg">

                  #### Yedekli ve dağınık çalışmaya uygun mimari
                  Sistemdeki yük paylaşılır, yeni eklemelerle sistem daha güçlü ve kabiliyetli hale gelir.

                  Hata her zaman olur. Önemli olan sistemin durmamasıdır.

          </section>
          <section data-markdown data-background="img/aktos-dcs/live-hw-change.png.jpg">

                  #### Canlı sistemde donanım ekleme-çıkartma desteği
                  Çalışır haldeki bir sistemin kapatılmasına gerek kalmadan yeni cihazların eklenmesi veya bozulan bir donanımın yenisiyle değiştirilmesi mümkündür.

          </section>
          <section data-markdown data-background="img/aktos-dcs/async-dev.png.jpg">

                  #### Asenkron proje geliştirme imkanı
                  Her şeyin baştan düşünülmesi zorunluluğu yoktur. Sistem sonradan genişletilebilir. Bir projeyi aynı anda birden fazla geliştirici uyum içinde geliştirebilir.

          </section>

          <section data-markdown data-background="img/aktos-dcs/open-source.png.jpg">

          #### Açık kaynak kodlu
          Sistemde kullanılan yazılımların tamamı açık kaynak kodludur. **Daha çok** insan tarafından kullanılır ve **test edilir**, açık kaynak kodlu yazılımlar için geliştirici bulmak daha kolaydır.

          </section>


          <section data-markdown data-background="img/aktos-dcs/documented.png.jpg">

          #### Belgelendirilmiş API

          Modül yazmak ve mevcut modülleri kullanmak için gereken belgelendirme çalışması yapılmıştır. Geliştiriciler ihtiyaç duydukları bilgilere kolaylıkla ulaşır.

          </section>
          <section data-markdown data-background="img/aktos-dcs/tm.png.jpg">
          #### Yerli üretim
          * Geliştiricilerin **bire bir desteğini** almak mümkündür
          * **Özel talepler** çok daha hızlı değerlendirilir.

          </section>
          <section data-markdown>

          ### Demo Sistemi

          **[aktos-dcs demo sistemi](https://aktos-elektronik.com/aktos-dcs/demo)**

          </section>
          <section data-markdown>

          ### aktos-dcs kullanılan işler

          * 2014.11.15 : [aktos-dcs demo sistemi](#/aktos-dcs-demo)
          * 2014.12.02 : [Kablo zırhı soyma makinesi](#/kablo-zirhi-soyma)
          * 2015.03.06 : [Üretim Takip Sistemi](#/uretim-takip-sistemi)

          </section>

      </div>
      <style>
        #demos .panel-body {
          padding: 0 !important;
        }

      </style>
      <div id="demos" data-theme="a" data-role="page">{{>nav-bar {active_button: '#/demos'}}}
        <div class="container">
          <div style="padding: 6em;" class="row vcenter">
            <div class="col-md-offset-2 col-md-4">
              <h2><p><strong>aktos-scada</strong> Demo</p>
              </h2>
            </div>
          </div>
          <div class="row vcenter">
            <div class="col-md-offset-1 col-md-10 col-md-offset-1"><h1>Bu sayfa ne işe yarar?</h1>

<p>Bu sayfada <strong>aktos-scada</strong>'da kullanılan
görsel nesnelerin örnekleri bulunur. Tüm görsel nesneleri görebilir,
değerlerini değiştirebilir, yeniden konumlandırabilir, yeniden boyutlandırabilirsiniz. </p>

<h1>Bu sayfa nasıl kullanılır?</h1>

<ol>
<li>Basitçe kaydırmalı girişleri kullanarak nesnelerin değerini değiştirin. </li>
<li>Bu sayfayı yeni bir pencerede açın. Bir pencerede yaptığınız değişiklikleri diğer pencerede aynı anda görün. </li>
<li>Bu sayfayı birden fazla cihazda açın. Bir cihazda yaptığınız değişikliği aynı anda diğer bir cihazda görün. </li>
</ol>

<h1>Kaynak kodlar</h1>

<p>aktos-scada sisteminin <a href="https://github.com/ceremcem/aktos-dcs">kaynak kodları açıktır</a>.
İstediğiniz gibi kullanmakta özgürsünüz. </p>

<h1>Diğer sistemler</h1>

<ul>
<li><a href="#/cici-meze">Cici Meze - Gıda Telemetri Sistemi</a></li>
<li><a href="#/trello-test">Trello Entegrasyon Testi</a></li>
</ul>
            </div>
          </div>
          <!--
          # Neden ücretsiz?
          Ücretsiz değil, özgür.

          # Neden satın alalım?
          Kaynak kodlar açıkken neden size ücret ödeyerek bu sistemi kurduralım?

          Misafiriniz geldiğinde neden bir kafeye götürürsünüz? Neden orada bardağı 5 liradan çay ısmarlarsınız?

          -->
          <div class="row"><br><br><br></div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h2 class="panel-title">Scada çizim alanı </h2>
            <div class="container">
              <div class="row">
                <div class="col-sm-2 col-xs-6">{{>scada-generate-layout {pin_name: 'scada'} }}</div>
                <div class="col-sm-2 col-xs-6">
                  {{>jq-checkbox {pin_name: 'lock-scada', label: 'Locked'} }}

                </div>
              </div>
            </div>
          </div>
          <div class="panel-body">
            <div class="scada-drawing-area scada">
              <div class="scada-container">
                {{! push button example }}
                {{>push-button {pin_name: 'vpin-0', label: 'Virtual pin 0', wid: 1} }}
                {{>status-led {pin_name: 'vpin-0', wid: 2} }}

                <!-- checkbox example -->
                {{>jq-checkbox {pin_name: 'vpin-1', wid: 3} }}
                {{>status-led {pin_name: 'vpin-1', wid: 4, src: 'computer'} }}

                {{! graph example }}
                {{>line-graph {pin_name: 'vpin-2', wid: 5} }}
                {{>slider {pin_name: 'vpin-2', wid: 6} }}

                {{>thermometer {pin_name: 'vpin-2', wid: 8} }}

                {{>b-vertical-progress-bar {pin_name: 'vpin-3', wid: 9} }}
                {{>slider {pin_name: 'vpin-3', wid: 10} }}
                {{>b-progress-bar {pin_name: 'vpin-3', wid: 400} }}

                {{>justgage {pin_name: 'vpin-2', val: 45, wid: 401} }}
                {{>numeric-keyboard {wid: 402} }}

                {{>b-stacked-progress
                  {pin_names: [
                      ['vpin-2', 'red'],
                      ['vpin-3', ''],
                      ['vpin-4', 'green']
                  ], wid: 403} }}
                {{>slider {pin_name: 'vpin-4', wid: 404} }}

                {{>switch-button-basic {wid: 405, pin_name: 'vpin-1', label: 'Test pin'} }}
                {{>switch-button {wid: 408,pin_name: 'vpin-1', label: 'TEST PIN'} }}

                {{>b-circle-button-v2 {wid: 409,pin_name: 'vpin-6'} }}
                {{>b-circle-button-v2 {wid: 410,pin_name: 'vpin-6', icon: 'shield warning'} }}
                {{>b-circle-button-v2 {wid: 411,pin_name: 'vpin-6', icon: 'warning'} }}
                {{>b-circle-button-v2 {wid: 412,pin_name: 'vpin-6', icon: 'signal'} }}
                {{>arrow-keys {wid: 413} }}


              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h2 class="panel-title">Scada çizim alanı </h2>
            <div class="container">
              <div class="row">
                <div class="col-sm-2 col-xs-6">{{>scada-generate-layout {pin_name: 'scada'} }}</div>
                <div class="col-sm-2 col-xs-6">
                  {{>jq-checkbox {pin_name: 'lock-scada', label: 'Locked'} }}

                </div>
              </div>
            </div>
          </div>
          <div class="panel-body">
            <div class="scada-drawing-area scada">
              <div class="scada-container">
                {{>gauge {pin_name: 'vpin-7', type: 'speed', wid: 800} }}
                {{>gauge {pin_name: 'vpin-7', type: 'download', wid: 801} }}
                {{>gauge {pin_name: 'vpin-7', type: 'ping', wid: 802} }}
                {{>b-notification-box {pin_name: 'vpin-8', icon: 'gears', label: 'Testing', wid: 803} }}
                {{>b-notification-box {pin_name: 'vpin-8', opt: 'red', label: 'Alert', icon: 'warning', wid: 804} }}
                {{>slider {pin_name: 'vpin-7', wid: 805} }}
                {{>slider {pin_name: 'vpin-8', wid: 806} }}
                {{>seven-segment {pin_name: 'vpin-7',  format: '####.#', wid: 807}}}
                {{>spinbox {pin_name: "vpin-8", val: 35, wid: 808} }}

                {{>circular-progress {pin_name: 'vpin-9', wid: 809, color: 'yellowgreen green'} }}
                {{>circular-progress {wid: 810, pin_name: 'vpin-9', format: '### °C'} }}
                {{>slider {pin_name: "vpin-9", val: 35, wid: 811} }}

                {{>seven-segment {wid: 813, pin_name: 'vpin-10', val: 123.45, format: '#######.##', type: 'multimeter'}}}
                {{>seven-segment {wid: 814, pin_name: 'vpin-10',  format: '####.#'}}}
                {{>seven-segment {wid: 815, pin_name: 'vpin-10',  format: '##.###'}}}
                {{>slider {wid: 816, pin_name: 'vpin-10',  val: 0} }}

                {{>toolbar {wid: 817, buttons: [
                  '#link1 fa-car',
                  '#link2 fa-heart',
                  '#link3',
                  '#link4 fa-car',
                  '#link5 fa-plane'
                  ], icon: 'fa-cog'} }}

              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h2 class="panel-title">Scada çizim alanı </h2>
            <div class="container">
              <div class="row">
                <div class="col-sm-2 col-xs-6">{{>scada-generate-layout {pin_name: 'scada'} }}</div>
                <div class="col-sm-2 col-xs-6">
                  {{>jq-checkbox {pin_name: 'lock-scada', label: 'Locked'} }}

                </div>
              </div>
            </div>
          </div>
          <div class="panel-body">
            <div class="scada-drawing-area scada">
              <div class="scada-container">
                {{>table {wid: 900, pin_name: 'test-table'} }}
                {{>textbox {wid: 901, pin_name: 'test-table', val: 'test value'} }}
                {{>label {wid: 902, pin_name: 'test-table'}}}
                {{>label {wid: 903, val: 'Tablo'}}}
                {{>label {wid: 904, val: 'Kullanıcı Girişi'}}}
                {{>textbox {wid: 901, pin_name: 'test-table2'} }}

              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Giriş Formu</h3>
          </div>
          <div class="panel-body">
            <div class="scada-drawing-area scada">
              <div class="scada-container">
                <div class="container">
                  <div class="row">
                    <div class="col-md-12"><p>Test şifreleri: </p>

<ul>
<li>cca12345</li>
<li>me12345</li>
<li>tk12345</li>
</ul>
                      <div>
                        <div>Login input: {{>login-input {} }}</div>
                        <div>Login status {{>login-info {} }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    {{>jq-push-button {wid: 1000, pin_name: 'gui-command', label: 'r'} }}

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Realtime Video Stream</h3>
          </div>
          <div class="panel-body">
            <div class="scada-drawing-area scada">
              <div class="scada-container"><img id="video-frame"></div>
            </div>
          </div>
        </div>{{>connection-status {} }}
      </div>
      <div id="contact-page" data-role="page" data-theme="a">{{>nav-bar {active_button: '#/contact-page'}}}
        <div class="container">
          <div class="row">
            <div class="col-md-offset-1 col-md-10 col-md-offset-1">
              <h2>İLETİŞİM</h2>
              <dl class="dl-horizontal">
                <dt><a data-role="button" href="mailto:info@aktos-elektronik.com"><img src="img/icons/64x64/@.png"></a></dt>
                <dd style="padding: 2em;">info@aktos-elektronik.com</dd>
                <dt>
                  <div class="hidden-desktop"><a data-role="button" href="tel:+905553066003"><img src="img/icons/64x64/microphone.png"></a></div>
                  <div class="visible-desktop"><a data-role="button" href="#"><img src="img/icons/64x64/microphone.png"></a></div>
                </dt>
                <dd style="padding: 2em;"> 0(555) 306 6003 </dd>
                <dt>
                  <div class="hidden-desktop"><a data-role="button" href="geo:38.393927,27.036649"><img src="img/icons/64x64/pin.png"></a></div>
                  <div class="visible-desktop"><a data-role="button" href="#"><img src="img/icons/64x64/pin.png"></a></div>
                </dt>
                <dd style="padding: 2em;">
                  <div>DEÜ Tıp Fakültesi Kampüsü DEPARK Teknoloji Geliştirme Bölgesi Ofis: P2/E Balçova İzmir</div>
                  <div style="padding-top: 2em;" class="hidden-phone">
                  </div>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <div id="mms" data-role="page" data-theme="b">
        <p>Naber</p><a href="#mms-1">Sayfa-1</a><a href="#mms-2">Sayfa-2</a>
        <div>
          <div  data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
              <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
              <label for="checkbox-1a">Cheetos</label>

              <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
              <label for="checkbox-2a">Doritos</label>

              <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
              <label for="checkbox-3a">Fritos</label>

              <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
              <label for="checkbox-4a">Sun Chips</label>
            </fieldset>


            <fieldset data-role="controlgroup" data-type="horizontal">
              <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
              <label for="radio-choice-1">Cat</label>

              <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
              <label for="radio-choice-2">Dog</label>

              <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
              <label for="radio-choice-3">Hamster</label>

              <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4"  />
              <label for="radio-choice-4">Lizard</label>
            </fieldset>


          </div>


        </div>
        <div>
          {{>spinbox {pin_name: "spinbox-test", val: 35} }}
          {{>slider {pin_name: "spinbox-test"} }}
        </div>
        <div>
          <div class="progress vertical">
          <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
          </div>

        </div>
        <div>
          <div class="ui-btn ui-icon-plus">TEST </div>
          {{>arrow-keys {} }}


        </div>
      </div>
      <div id="mms-1" data-role="page" data-theme="b">
        <p>İyidir</p><a href="#mms">Sayfa-0</a><a href="#mms-2">Sayfa-2</a>
      </div>
      <div id="mms-2" data-role="page" data-theme="b">
        <p>Senden</p><a href="#mms">Sayfa-0</a><a href="#mms-1">Sayfa-1</a>
      </div>
      <style>
        #cici-meze .scada-container{
        }
        #cici-meze .scada-drawing-area {
          height: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        #cici-meze {
          height: 100vh;
          /*height: 100vh !important; */
        }


      </style>
      <div id="cici-meze" data-role="page" data-theme="b">
        <div class="scada-drawing-area scada">
          <div class="scada-container">
            <img src="./projects/cici-meze/scada-background2.png" style="position: absolute; top: 10px; left: 0; margin: 0; padding: 0; border-bottom: 1px solid blue  " />
            {{>label {val: 'Üretim Hazırlık', wid: 211} }}
            {{>label {val: 'Sebze Meyve Deposu', wid: 212} }}
            {{>label {val: 'Son Ürün', wid: 213} }}
            {{>label {val: 'Kuru Bakliyat', wid: 214} }}

            {{>seven-segment {pin_name: '284980DF05000098', wid: 200, format: '##.# °C', range: '-1 to 15'} }}
            {{>status-led {pin_name: '280C6ADE050000EE', src: 'normally-on-alarm', wid: 201} }}


            {{>seven-segment {pin_name: '28CE9DDE050000E8', wid: 202, format: '##.# °C', range: '-1 to 15', type: 'temp'} }}
            {{>status-led {pin_name: '28619FDD0500009B', src: 'normally-on-alarm', wid: 203} }}
            {{>seven-segment {pin_name: '284A78DF05000059', wid: 204, format: '##.# °C', range: '10 to 35', type: 'temp'} }}

            {{>seven-segment {pin_name: '285582DD0500003A', wid: 205, format: '##.# °C', range: '-1 to 15', type: 'temp'} }}
            {{>status-led {pin_name: '28FEFDDD0500009C', src: 'normally-on-alarm', wid: 206} }}
            {{>status-led {pin_name: '28E61ADE05000065', src: 'normally-on-alarm', wid: 207} }}
            {{>seven-segment {pin_name: '280BFADD05000054', wid: 208, format: '##.# °C', range: '10 to 35', type: 'temp'} }}

            {{>seven-segment {pin_name: '28D026DF05000010', wid: 209, format: '##.# °C', range: '10 to 35', type: 'temp'} }}

            {{>b-notification-box {pin_name: 'online-users', opt: 'green', icon: 'user', label: 'Online', wid: 210} }}

          </div>
        </div><a href="#/"><img src="./img/aktos-icon.png" style="position: absolute; z-index: 19999; bottom: 0; left: 0; margin: 0; padding: 5px; width: 55px; height: auto; " /> </a>
        {{>connection-status {}}}
      </div>
      <div id="step-piston" data-role="page" data-theme="b">
        <div class="panel panel-primary scada-drawing-area">
          <div class="panel-heading">
            <h2 class="panel-title">Step Piston</h2>
            <div class="row">
              <div class="col-sm-2 col-xs-6">{{>scada-generate-layout {pin_name: 'scada'} }}</div>
              <div class="col-sm-2 col-xs-6">{{>jq-checkbox {pin_name: 'lock-scada', label: 'Kilitli (Locked)'} }}</div>
            </div>
          </div>
          <div class="panel-body">
            <div class="row">{{#partial step-piston-limit-switches}}
              <fieldset data-role="controlgroup" data-type="horizontal">
                {{>switch-button {pin_name: 'forward-limit', label: 'F-limit'} }}
                {{>switch-button {pin_name: 'backwards-limit', label: 'B-limit'} }}
              </fieldset>{{/partial}}
              {{>step-piston-limit-switches {wid: 300} }}
              <fieldset data-role="controlgroup" data-type="horizontal">
                {{>push-button {pin_name: 'move-forward', label: 'Forward'} }}
                {{>push-button {pin_name: 'move-backwards', label: 'Backwards'} }}
                {{>push-button {pin_name: 'forward-limit', label: 'F-limit'} }}
                {{>push-button {pin_name: 'backwards-limit', label: 'B-limit'} }}
              </fieldset>
              <fieldset data-role="controlgroup" data-type="horizontal">
                {{>status-led {pin_name: 'piston.enab'} }}
                {{>status-led {pin_name: 'piston.dir'} }}
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <div id="izmirhs" data-role="page" data-theme="b">
        <div class="panel panel-primary scada-drawing-area">
          <div class="panel-heading">
            <h2 class="panel-title">İzmir HS Sunum</h2>
            <div class="row">
              <div class="col-sm-2 col-xs-6">{{>scada-generate-layout {pin_name: 'scada'} }}</div>
              <div class="col-sm-2 col-xs-6">{{>jq-checkbox {pin_name: 'lock-scada', label: 'Locked'} }}</div>
            </div>
          </div>
          <div class="panel-body">
            <div class="scada-drawing-area">
              <div class="scada-container">
                {{>label {wid: 1103, val: 'Test output 1'}}}
                {{>label {wid: 1104, val: 'Test input 1'}}}

                {{>push-button {pin_name: 'test-output-1', wid: 1100} }}
                {{>jq-checkbox {pin_name: 'test-output-1', wid: 1101} }}

                {{>status-led {pin_name: 'test-input-1', wid: 1102, src: 'computer'} }}
                {{>status-led {pin_name: 'test-input-1', wid: 1108} }}

                {{>label {wid: 1107, val: 'Ekran parlaklığı'}}}
                {{>slider {pin_name: 'izmirhs-brightness', wid: 1105} }}

                {{>b-notification-box {pin_name: 'online-users', opt: 'green', icon: 'user', label: 'Online', wid: 1106} }}

              </div>
            </div>
          </div>
        </div>{{>connection-status {}}}
      </div>
      <style>
        #gms {
            padding-bottom: 40px;
        }
        #gms .scada-container {
          /*display: block !important;*/
          white-space: normal;
          width: auto !important;
        }

      </style>
      <div id="gms" data-role="page" data-theme="b">
        <div class="scada-drawing-area scada">
          <div class="scada-container">
            {{#each gms.Root.Oda}}
              <div style="
                width:100px;
                display: inline-block;
                background-color: {{ .Connection[0] === 'YOK' ? 'gray' : 'yellowgreen' }};
                margin: 5px;
                padding: 5px;">
                <h3><span>#</span>{{ .$.No }} </h3>
                kart time: {{ .KartTime }}
                </div>
            {{/each}}

            {{>connection-status {}}}
          </div>
        </div>
      </div>
      <style>
        #trello-test {
          padding: 0 !important;
        }
        #trello-test .scada-container {
          white-space: normal;
          width: 100%;
          height: 100vh;
        }
      </style>
      <div id="trello-test" data-role="page" data-theme="b">
        <div class="scada-drawing-area scada">
          <div class="scada-container">
            {{#with trelloData}}

              {{#if .member}}
                <p>
                  Welcome <span style="font-weight: bold; font-size: 1.2em;">{{.member.fullName}}!</span>
                  <a on-click="trello_logout"> Logout!</a>
                </p>
              {{else}}
                <p> <a on-click="trello_login">Login to Trello</a></p>
              {{/if}}


              {{#each .cards}}
                <p>card name: {{ .name }}</p>
                {{!>label {val: JSON.stringify(., null, 4)} }}
              {{/each}}
              {{#each .card_comments}}
                <p>comments: {{ . }}</p>
              {{/each}}

            {{/with}}

          </div>
        </div>{{>connection-status {}}}
      </div>
      <div id="test-page-1" data-role="page">
        <h3><a href="#">this link goes nowhere... </a></h3>
        <h3><a href="#test-div-4">this link scrolls to test anchor 1, link should be #/test-page-1/test-anchor-1</a></h3>
        <h3><a href="#/test-page-2">this will change page to test-page-2</a></h3>
        <h3><a href="#">this link does whatever its function says</a></h3>
        <div>
          <div class="container">
            <h2>Modal Example</h2>
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
            <a data-toggle="modal" data-target="#myModal">Open Modal222</a>

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
              <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                  </div>
                  <div class="modal-body">
                    <p>Some text in the modal.</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>

              </div>
            </div>

          </div>

        </div>
        <div id="test-div-1" style="height: 500px; width: 100%; background-color: red;"></div>
        <div id="test-div-2" style="height: 500px; width: 100%; background-color: green;"></div>
        <div id="test-div-3" style="height: 500px; width: 100%; background-color: blue;"></div>
        <div id="test-div-4" style="height: 500px; width: 100%; background-color: pink;"></div>
        <div id="test-div-5" style="height: 500px; width: 100%; background-color: gray;"></div>
      </div>
      <div id="test-page-2" data-role="page">
        <h2>this is test page 2, go to <a href="#/test-page-1">test page 1</a></h2>
      </div>
    </script>
    <script src="javascripts/vendor.js"></script>
    <script src="preparsed.js"></script>
    <script src="javascripts/app.js"></script>
    <script>require("init");</script>
  </body>
</html>