;(function(burl) {
    var url = 'https://cdn.rawgit.com/anpylar/anpylar/1.1.3/anpylar.js'
    var s = document.createElement('script')
    s.type = 'text/javascript'
    s.async = true
    s.src = url
    var h = document.getElementsByTagName('head')[0]
    h.appendChild(s)
})();
#!/usr/bin/env python
# -*- coding: utf-8; py-indent-offset:4 -*-
###############################################################################
from .app_module import AppModule
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .admin_module import AdminModule
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class AdminComponent(Component):
    htmlsheet = '''
    <h3>ADMIN</h3>
    <nav>
      <a routerLink="" routerLinkActive="active">Dashboard</a>
      <a routerLink="disasters" routerLinkActive="active">Manage Disasters</a>
      <a routerLink="pyroes" routerLinkActive="active">Manage Pyroes</a>
    </nav>
    <router-outlet></router-outlet>
    '''
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class AdminDashboardComponent(Component):
    htmlsheet = '''
    <p>Dashboard</p>
    Session Id:<txt [session_id_]>{}</txt>
    '''

    bindings = {
        'session_id': ''
    }

    def loading(self):
        self.session_id = self.params.get('session_id', '')
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Module

from ..auth_guard_service import AuthGuard

from .admin_component import AdminComponent
from .admin_dashboard_component import AdminDashboardComponent
from .manage_disasters_component import ManageDisastersComponent
from .manage_pyroes_component import ManagePyroesComponent


class AdminModule(Module):
    routes = [{
        'path': '',
        'component': AdminComponent,
        'can_activate': AuthGuard,
        'children': [{
            'path': '',
            'children': [
                {'path': 'disasters', 'component': ManageDisastersComponent},
                {'path': 'pyroes', 'component': ManagePyroesComponent},
                {'path': '', 'component': AdminDashboardComponent}
            ]
        }]
    }]
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class ManageDisastersComponent(Component):
    htmlsheet = '''
    <p>Manage your Disasters here</p>
    </p>
    '''
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class ManagePyroesComponent(Component):
    htmlsheet = '''
    <p>Manage your Pyroes here</p>
    '''
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class AppComponent(Component):
    htmlsheet = '''
    <h1 class="title">AnPyLar Tourer</h1>
    <nav>
      <a routerLink="/disaster-center" routerLinkActive="active">Disaster Center</a>
      <a routerLink="/superpyroes" routerLinkActive="active">Pyroes</a>
      <a routerLink="/admin" routerLinkActive="active">Admin</a>
      <a routerLink="/login" routerLinkActive="active">Login</a>
      <a routerLink="/compose" routerLinkActive="active">Contact</a>
    </nav>
    <router-outlet></router-outlet>
    <router-outlet name="popup"></router-outlet>
    '''

    stylepath = None
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Module

from .app_component import AppComponent
from .compose_message import ComposeMessageComponent
from .page_not_found_component import PageNotFoundComponent

from .admin import AdminModule
from .disaster_center import DisasterCenterModule
from .pyroes import PyroesModule
from .login import LoginModule

from .auth_service import AuthService
from .dialog_service import DialogService


class AppModule(Module):

    modules = LoginModule, PyroesModule

    components = AppComponent

    bindings = {}

    services = {
        'auth_service': AuthService,
        'dialog_service': DialogService,
    }

    routes = [
        {'path': 'compose', 'component': ComposeMessageComponent,
         'outlet': 'popup'},

        {'path': 'disaster-center', 'load_children': [DisasterCenterModule]},

        {'path': 'admin', 'load_children': [AdminModule]},

        {'path': '', 'redirect_to': '/superpyroes', 'path_match': 'full'},

        {'path': '*', 'component': PageNotFoundComponent},
    ]
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import AuthGuard


class AuthGuard(AuthGuard):

    def can_activate(self, route):
        return self.check_login(route.path)

    def can_activate_child(self, route):
        return self.can_activate(route)

    def check_login(self, path):
        if self.auth_service.is_logged:
            return True

        self.auth_service.redir_path = path
        self.router.route_to('/login', session_id=1234567890)
        return False
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Observable, Model


class AuthService(Model):
    bindings = {
        'is_logged': False,
        'redir_path': '',
    }

    def login(self):
        return Observable.of(True) \
            .delay(1000) \
            .do_action(lambda x: setattr(self, 'is_logged', x))

    def logout(self):
        self.is_logged = False

    def not_logged(self):
        return self.is_logged_.map(lambda x: not x)
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .compose_message_component import ComposeMessageComponent
<h3>Contact Disaster Center</h3>
<div name="details">
  {details}
</div>
<div>
  <div>
    <label>Message: </label>
  </div>
  <div>
    <textarea rows="10" cols="35"></textarea>
  </div>
</div>
<p name="buttons">
  <button name="send">Send</button>
  <button name="cancel">Cancel</button>
</p>
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class ComposeMessageComponent(Component):
    bindings = {
        'details': '',
        'msg': '',
    }

    def unloading(self):
        # return to default state when unloading for next load
        self.details = ''
        self.msg = ''

    def render(self, node):
        d = node.select('div[name="details"]')  # will get first
        d._display(bool(self.details_))
        d._fmt(details=self.details_)

        t = node.select('textarea')._fmtvalue(self.msg_)

        p = node.select('p[name="buttons"]')
        p._display(self.details_ == '')
        bsend = node.select('button[name="send"]')
        bsend._bindx.click(self.send)
        bcancel = node.select('button[name="cancel"]')
        bcancel._bindx.click(self.close_popup)

    def send(self):
        self.details = 'Sending Message ...'
        # the message would be available in self.msg

        Observable.of(True) \
            .delay(2000) \
            .subscribe(self.close_popup)

    def close_popup(self, close=True):
        self.close_outlet()
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from browser import window
from anpylar import Observable


class DialogService:

    def confirm(self, message='Is it OK?'):
        confirmation = window.confirm(message)
        return Observable.of(confirmation)
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .disaster_center_module import DisasterCenterModule
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class DisasterCenterComponent(Component):
    htmlsheet = '''
    <h2>Disaster Center</h2>
    <router-outlet></router-outlet>
    '''
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class DisasterCenterHomeComponent(Component):
    htmlsheet = '''
    <p>Welcome to the Disaster Center</p>
    '''
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Module

from .disaster_center_component import DisasterCenterComponent
from .disaster_list_component import DisasterListComponent
from .disaster_detail_component import DisasterDetailComponent
from .disaster_center_home_component import DisasterCenterHomeComponent

from .disaster_service import DisasterService


class DisasterCenterModule(Module):

    services = {
        'disaster_service': DisasterService,
    }

    routes = [{
        'path': '',
        'component': DisasterCenterComponent,
        'children': [
            {
                'path': '',
                'component': DisasterListComponent,
                'children': [
                    {
                        'path': '',
                        'component': DisasterDetailComponent,
                        'params': {'did': int},  # transformation function
                    },
                    {
                        'path': '',
                        'component': DisasterCenterHomeComponent,
                    }
                ]
            }
        ]
    }]
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class DisasterDetailComponent(Component):
    # selector = 'app-root'
    htmlsheet = '''
    <div *_display=edit_did_>
      <h3 [edit_name_]>"{}"</h3>
      <div>
        <label>Id: </label><txt [edit_did_]>{}</txt></div>
      <div>
        <label>Name: </label>
        <input *_fmtvalue=edit_name_ placeholder="name"/>
      </div>
      <p>
        <button (click)=save>Save</button>
        <button (click)="router.route_to('')">Cancel</button>
      </p>
    </div>
    '''

    stylesheet = ''''
    input {
        width: 20em
    }
    '''

    bindings = {
        'edit_name': '',
        'edit_did': 0,
    }

    def loading(self):
        self.disaster_service.get_disaster(self.route.params['did']) \
            .subscribe(self.set_disaster)

    def unloading(self):
        self.set_disaster()

    def set_disaster(self, disaster=None):
        if disaster:
            self.edit_name = disaster.name
            self.edit_did = disaster.did
        else:
            self.edit_name = ''
            self.edit_did = 0

    def save(self):
        # selected is in our parent component
        self.selected.name = self.edit_name
        self.router.route_to('.')

    def can_deactivate(self):
        if not self.edit_did or self.selected.name == self.edit_name:
            return True

        # dialog_service is in the main module
        return self.dialog_service.confirm('Discard changes?')
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component, html
from .disaster_service import Disaster


class DisasterListComponent(Component):
    htmlsheet = '''
    <ul class="items"></ul>
    <router-outlet></router-outlet>
    '''

    bindings = {
        'selected': Disaster(),
        'disasters': [],
    }

    def __init__(self):
        self.disaster_service.get_disasters().subscribe(self.disasters_)

    def li_disasters(self, disasters):
        for disaster in disasters:
            with html.li() as li:
                li._class.selected(self.selected_.did_ == disaster.did)

                with html.a(routerlink=('', {'did': disaster.did})):
                    html.span(disaster.did, Class='badge')
                    html.txt()._fmt(disaster.name_)

            li._bindx.click(lambda d=disaster: self.selected_(d))

    def render(self, node):
        with node.select('ul') as ul:
            ul._render(self.li_disasters, self.disasters_)
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Observable, Model


class Disaster(Model):
    bindings = {
        'did': 0,
        'name': '',
    }


DISASTERS = [
    Disaster(**{'did': 1, 'name': 'The Python Menace'}),
    Disaster(**{'did': 2, 'name': 'Revenge of the Pyth'}),
    Disaster(**{'did': 3, 'name': 'The Empyre pykes back'}),
    Disaster(**{'did': 4, 'name': 'No more Pyzzas for the films!'}),
]


class DisasterService:
    next_disaster_id = 100

    def __init__(self):
        self.disasters_ = Observable.of(DISASTERS)

    def get_disasters(self):
        return self.disasters_

    def get_disaster(self, did):
        return self.get_disasters() \
            .map(lambda disasters: [c for c in disasters if c.did == did]) \
            .filter(lambda disasters: len(disasters)) \
            .map(lambda disasters: disasters[0])

    def add_disaster(self, name):
        disaster = Disaster(did=self.next_disaster_id, name=name)
        self.next_disaster_id += 1

        DISASTERS.append(disaster)
        self.disasters_ = o = Observable.of(DISASTERS)
        return o
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .login_module import LoginModule
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class LoginComponent(Component):
    htmlsheet = '''
    <h2>LOGIN</h2>
    <p [msg_]>{}</p>
    <p>
      <button
        *_display="auth_service.is_logged_ == 0"
        (click)=login>Login
      </button>
      <button
        *_display="auth_service.is_logged_"
        (click)=logout>Logout
      </button>
    </p>
    '''

    bindings = {
        'msg': '',
    }

    def loading(self):
        self.set_message()

    def set_message(self):
        self.msg = 'Logged ' + ('in' if self.auth_service.is_logged else 'out')

    def login(self):
        def to_login(x):
            self.set_message()
            if self.auth_service.is_logged:
                sid = self.params.get('session_id', 0)
                self.router.route_to(self.auth_service.redir_path,
                                     session_id=sid)
                self.auth_service.redir_path = ''

        self.auth_service.login().subscribe(to_login)

    def logout(self):
        self.auth_service.logout()
        self.set_message()
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .login_component import LoginComponent


class LoginModule(Module):
    routes = [
        {'path': 'login', 'component': LoginComponent}
    ]
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component


class PageNotFoundComponent(Component):
    htmlsheet = '''
    <h2>Page not found</h2>
    '''
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .pyroes_module import PyroesModule
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .pyro_detail_component import PyroDetailComponent
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component, html
from ..pyro_service import Pyro


class PyroDetailComponent(Component):
    htmlsheet = '''
    <h2>PyRoeS</h2>
    <!-- <div *_display=pyro_.pyd_> -->
    <div>
      <h3 {name}=pyro_.name_>"{name}"</h3>
      <div>
        <label>Pyd: </label><txt {pyd}=pyro_.pyd_>{pyd}</txt>
      </div>
      <div>
        <label>Name: </label>
        <input *_fmtvalue=pyro_.name_ placeholder="name"/>
      </div>
      <p>
        <button (click)="router.route_to('/pyroes')">Back</button>
        <!-- <button (click)="goto_pyroes()">Back</button> -->
      </p>
    </div>
    '''

    stylepath = None

    bindings = {
        'pyro': Pyro(),
    }

    def loading(self):
        self.pyro_service.get_pyro(self.route.params['pyd']) \
            .subscribe(self.pyro_)

    def unloading(self):
        self.pyro = Pyro()

    def render(self, node):
        pass

    def goto_pyroes(self):
        self.router.route_to('/pyroes')  # route without params
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Observable, Model


class Pyro(Model):
    bindings = {
        'pyd': 0,
        'name': '',
    }


_PYROES = [
    {'pyd': 11, 'name': 'Pyro Nakamura'},
    {'pyd': 12, 'name': 'Mopynder Shuresh'},
    {'pyd': 13, 'name': 'Pyter Pytrelli'},
    {'pyd': 14, 'name': 'Angela Pytrelli'},
    {'pyd': 15, 'name': 'Claire Pynnet'},
    {'pyd': 16, 'name': 'Noah Pynnet'},
    {'pyd': 17, 'name': 'Pysaac Mendez'},
    {'pyd': 18, 'name': 'Pyki Sanders'},
    {'pyd': 19, 'name': 'The Pytian'},
    {'pyd': 20, 'name': 'Pylar'},
]

PYROES = [Pyro(**p) for p in _PYROES]


class PyroService:
    def get_pyroes(self):
        return Observable.of(PYROES)

    def get_pyro(self, pyd):
        self.pyd = pyd
        return self.get_pyroes() \
            .map(self.filter_pyroes)

    def filter_pyroes(self, pyroes):
        return [p for p in pyroes if p.pyd == self.pyd][0]
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Module
from .pyroes import PyroesComponent
from .pyro_detail import PyroDetailComponent
from .pyro_service import PyroService, Pyro


class PyroesModule(Module):

    services = {
        'pyro_service': PyroService,
    }

    routes = [
        {'path': 'pyroes', 'redirect_to': '/superpyroes'},
        {'path': 'superpyroes', 'component': PyroesComponent},
        {
            'path': 'pyro',
            'redirect_to': '/superpyro'},
        {
            'path': 'superpyro',
            'params': {'pyd': int},
            'component': PyroDetailComponent,
        }
    ]

    def __init__(self):
        pass
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .pyroes_component import PyroesComponent
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component, html


class PyroesComponent(Component):
    htmlsheet = '''
    <h2>Pyroes</h2>
    <ul class="items"></ul>
    <button routerLink="/save-the-world">Save the World</button>
    '''

    stylepath = None

    bindings = {
        'pyd': 0,
        'pyroes': [],
    }

    def loading(self):
        self.pyro_service.get_pyroes() \
            .subscribe(self.pyroes_)

    def unloading(self):
        self.pyroes = []

    def li_pyroes(self, pyroes):
        for pyro in pyroes:
            with html.li() as li:
                # li._class.selected(self.selected_.pyd_ == pyro.pyd)
                li._class.selected(self.pyd == pyro.pyd)
                li._bindx.click(self.pyd_, pyro)
                with html.a(routerlink=('/pyro', {'pyd': pyro.pyd})):
                    html.span(pyro.pyd, Class='badge')
                    html.txt(' {name}')._fmt(name=pyro.name_)

    def render(self, node):
        with node.select('ul') as ul:
            ul._render(self.li_pyroes, self.pyroes_)
/* items class */
.items {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 24em;
}
.items li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.items li a {
  display: block;
  text-decoration: none;
}
.items li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.items li.selected {
  background-color: #CFD8DC;
  color: white;
}
.items li.selected:hover {
  background-color: #BBD8DC;
}
.items .text {
  position: relative;
  top: -3px;
}
.items .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607D8B;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<!DOCTYPE html>
<html>
<head>
  <title>Pyroes Tourer</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="assets/app.css">
  <link rel="stylesheet" href="styles.css">
  <script src="anpylar_overlay.js"></script>
  <script src="anpylar.js" async></script>

</head>
<body></body>
</html>

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
{
    "packages": [
        "app"
    ],
    "app_name": "",
    "version": "",
    "author": "",
    "author_email": "",
    "license": "",
    "url": ""
}
/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
a {
  cursor: pointer;
  cursor: hand;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* Navigation link styles */
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
;(function(){
    function add_overlay() {

        var elem = document.createElement('div');
        elem.id = 'anpylar-loading-overlay'
        elem.style.cssText = 'position: fixed; width: 100%; height: 100%;' + 'min-height: 100%;' +
            'left: 0;top: 0;background: rgba(224,224,224,0.33); z-index: 100000;'
        document.body.appendChild(elem);

        var elem4 = document.createElement('div');
        elem4.innerHTML = '<h1 style="text-align:center;position:relative;top:46%;transform:translateY(-46%);">Loading ...</h1>'
        elem4.style.cssText = 'position: fixed; width: 100%; height: 100%;' +
            'left: 0;top: 0; z-index: 10002;'
        elem.appendChild(elem4)

        var keyframes = '\
#anpylar-loading-wheel {\
  position: fixed;\
  top: 50%;\
  left: 50%;\
  width: 150px;\
  height: 150px;\
  margin: -75px 0 0 -75px;\
  border: 16px solid #f3f3f3;\
  border-radius: 50%;\
  border-top: 16px solid #3498db;\
  width: 120px;\
  height: 120px;\
  animation: spin 2s linear infinite;\
  z-index: 10001;\
}\
\
@keyframes spin {\
  0% { transform: rotate(0deg); }\
  100% { transform: rotate(360deg); }\
}';

        var elem2 = document.createElement('style');
        elem2.style.type = 'text/css'
        elem2.id = 'anpylar-loading-overlay-style'
        elem2.innerHTML = keyframes
        document.head.appendChild(elem2)

        var elem3 = document.createElement('div')
        elem3.id = 'anpylar-loading-wheel'
        elem.appendChild(elem3)
    }
    window.addEventListener('DOMContentLoaded', add_overlay, true)
})();