title: Material design on Nginx
body: <p>I'm trying to apply material design UI to working web application. Application uses Nginx, PHP, PostgreSQL.
  I have experience with PHP and PostgreSQL so the application works (code written in notepad++), but it is ugly as I have NO experience with web pages design, java(script) so using only basic html forms, input, button...</p>
  <p>I would like to improve the UI so I started learn CSS. I downloaded material icons font and created several buttons, this works great and the buttons also scale to screen size.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
  /* color: #999999; */
  font-family: arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 3px;
  text-align: center;
  }
  
  @font-face {
    /* Material Icons big thanks to: https://google.github.io/material-design-icons/ */
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(/font/MaterialIcons-Regular.ttf); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(/font/MaterialIcons-Regular.ttf) format('truetype');
  }
  
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: clamp(12px,4vmin,30px); 
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }
  
  .material-icons:hover {
    color: e3000f;
  /*  background-color: #555; /* Add a dark-grey background on hover */
  }
  
  #home_button {
    display: block;
    position: fixed; /* Fixed/sticky position */
    top: 1%; 
    left: 1%; 
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    /*background-color: #E5E7E9;*/ /* Set a background color #E5E7E9 = 229R 231G 233B*/
    background-color: rgba(229,231,233,0.5); /* Set a background color #E5E7E9 = 229R 231G 233B*/
    color: black; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    text-align: center;
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 4px;
    padding-bottom: 0px;
    border-radius: 5px; /* Rounded corners */
  }
  
  #home_button:hover {
    /*background-color: #555; /* Add a dark-grey background on hover */
    filter: drop-shadow(2px 2px 2px #555);
    color: #e3000f; /* Add a dark-grey background on hover */
    background-color: rgba(229,231,233,1); /* Set a background color #E5E7E9 = 229R 231G 233B*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;!-- This line is normally NOT included as font is locally loaded in CSS --&gt;&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt; &lt;!-- This line is normally NOT included as font is locally loaded in CSS --&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="/index.php"&gt;&lt;button title="Home Button" id="home_button"&gt;&lt;i class="material-icons" &gt;home&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
  &lt;body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Now I would like to include forms, textboxes, checkboxes, buttons...
  In <a href="https://material.io/components/checkboxes/web#using-buttons" rel="nofollow noreferrer">guide(s)</a> they always rely on <a href="https://codelabs.developers.google.com/codelabs/mdc-101-web/#0" rel="nofollow noreferrer">node.js</a>. I downloaded node.js and created test application on my local PC, but can not push this to nginx. I found multiple articles with <a href="https://stackoverflow.com/questions/18730008/can-php-and-node-js-run-on-the-same-server">proxyPass</a>, but I can not use node.js on server so this is not solution.</p>
  <p>What is the correct way to style the pages into material design and being able to keep all the PHP code and existing functionality?</p>
  <p>To specify example what I'm trying to accomplish is to move <strong>FROM</strong> this simple HTML form (simplified here, in reality generated by PHP):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Form sample&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="/sample_form.php"&gt;
    &lt;label for="sample_input"&gt;Sample:&lt;/label&gt;&lt;br&gt;
    &lt;input type="text" id="sample_input" name="sample_input" value="Empty"&gt;
    &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt; 
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>TO</strong> material design form with <a href="https://material.io/components/text-fields#outlined-text" rel="nofollow noreferrer">outlined text fields</a> and <a href="https://material.io/components/buttons#outlined-button" rel="nofollow noreferrer">outlined button</a>. In below sample there is material design html syntax, but missing correct css and javascript so it is not looking as on above links. Where/how to get it and make it run on Nginx without node.js?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Form sample&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="/sample_form.php"&gt;
  &lt;label class="mdc-text-field mdc-text-field--outlined"&gt;
    &lt;span class="mdc-notched-outline"&gt;
      &lt;span class="mdc-notched-outline__leading"&gt;&lt;/span&gt;
      &lt;span class="mdc-notched-outline__notch"&gt;
        &lt;span class="mdc-floating-label" id="sample_input"&gt;Sample:&lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="mdc-notched-outline__trailing"&gt;&lt;/span&gt;
    &lt;/span&gt;
    &lt;input type="text" value="Empty" class="mdc-text-field__input" aria-labelledby="sample_input"&gt;
  &lt;/label&gt;
  &lt;button class="mdc-button mdc-button--outlined"&gt;
    &lt;div class="mdc-button__ripple"&gt;&lt;/div&gt;
    &lt;span class="mdc-button__label"&gt;Submit&lt;/span&gt;
  &lt;/button&gt;
  &lt;/form&gt; 
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>All the <a href="https://material.io/resources/tutorials#web" rel="nofollow noreferrer">tutorials</a> are heavily depending on node.js. Is it really possible to use material design only on node.js? If yes can the node.js code (locally developed) be exported and used on Nginx WITHOUT node.js?</p>
  <p>Apologize in advance if my questions are newbie ones, but I read all the available manuals and was not able to find solution.</p>