index.html

<!DOCTYPE html>
<html>
<head>
  <title>PrettyCode</title>
  <!--<link rel="stylesheet" href="styles.css">-->
  <link rel="stylesheet" href="fonts.css">
  
  <script src="setShadow.js"></script>
  
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="bower_components/prettify-element/prettify-element.html">
  <link rel="import" href="bower_components/iron-icons/iron-icons.html">
  <link rel="import" href="bower_components/paper-input/paper-input.html">
  <link rel="import" href="bower_components/paper-input/paper-textarea.html">
  <link rel="import" href="bower_components/paper-button/paper-button.html">
  <link rel="import" href="bower_components/paper-toggle-button/paper-toggle-button.html">
  
  <link rel="import" href="styles.html">
</head>

<body class="fit">
  <template id="mainContent" is="dom-bind">
    <div id="mainDiv" class$="[[_computedBodyClass(theme)]]">
      <div class="horizontal layout" style="margin-top:5px">
        <div style="margin:5px">Light</div>
        <paper-toggle-button id="ptbTheme" checked="{{_selTheme(theme)}}"
            style="margin:5px" 
            on-change="chTheme"></paper-toggle-button>
        <div style="margin:5px">Dark</div>
      </div>
      <div class="layout horizontal">
        <!--Language selection hidden as now the lang class id difficult to set on the prettify-element-->
        <!--
        <paper-dropdown-menu id="pdmLanguage" label="Select Language"
            on-core-select="{{languageSelected}}">
          <paper-dropdown id="lang" class="dropdown">
              <core-menu class="menu" >
                  <paper-item data-value="--">(auto detect language)</paper-item>
                  <paper-item data-value="cpp">c++</paper-item>
                  <paper-item data-value="java">java</paper-item>
                  <paper-item data-value="js">javascript</paper-item>
                  <paper-item data-value="xml">xml</paper-item>
                  <paper-item data-value="html">html</paper-item>
                  <paper-item data-value="css">css</paper-item>
              </core-menu>
          </paper-dropdown>
        </paper-dropdown-menu>
        -->
        <paper-input id="ptDimension" label="Font size (pt)"
            class$="[[_computedThemeClass(theme)]]"
            value="{{fontPt}}" on-value-changed="ptChange" 
            type="number" auto-validate
            always-float-label
            style="margin-left:10px;" ></paper-input>
      </div>
      <paper-textarea id="agTa" class$="[[_computedThemeClass(theme)]]"
        value="{{code}}" on-value-changed="codeChanged">
      </paper-textarea>
      <div id="slidesWarnings">
      </div>
      <prettify-element id="destination" 
        text="{{code}}" 
        language="{{language}}" 
        on-tap="selPrettyCode" 
        class$="[[_computedDestinationClass(theme)]]"></prettify-element>
    </div>
  </template>

  <script src="main.js"></script>
</body>
</html>