docs.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Darkboard landing</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-indigo.min.css"/>
      <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="docs.css">
  </head>
  <body>
    <header class="mdl-layout__header mdl-layout__header--transparent">
      <nav class="mdl-layout__header-row">
        <span class="mdl-layout__title"></span>
        <div class="mdl-layout-spacer"></div>
        <nav class="mdl-navigation">
          <a class="write-us"> <b class="write-us-bold"></b></a>
          <a href="index.html" class="mdl-navigation__link mdl-js-ripple-effect">About</a>
        </nav>
      </nav>
    </header>
    <main class="mdl-layout__content">
      <section id="welcome" class="container">
        <h1 id="welcome_to_darkboard">Welcome to <b>CreativeIT Dashboard</b>!</h1>
        <p class="abstract">Below you can find documentation and instructions</p>
        <div class="important">
          <span class="vertical-line"></span>
          <p class="important-text">
            Important: We are still working on the project and there will be much more awesome,
            check out our <a href="https://github.com/CreativeIT/material-angular-dashboard/issues>">issues</a> to see what features are coming soon.
          </p>

        </div>
      </section>
      <section id="instructions" class="container">
          <details class="doc-details-section">
            <summary>How to install Material Angular Dashboard using <b>Docker</b>
              platform?</summary>
            <br/>
            <p>Coming soon...</p>
          </details>
          <span class="separator-line"></span>
          <details class="doc-details-section">
            <summary><b>Angular</b> installation video instruction </summary>
            <br/>
            <p>Coming soon...</p>
          </details>
          <span class="separator-line"></span>
          <details class="doc-details-section">
            <summary><b>HTML</b> installation</summary>
            <h1>Watch the video instruction “How to install HTML version of dashboard”</h1>
            <p>Coming soon...</p>
            <h1 id="setupandusage">#SETUP and USAGE You can watch the video or follow the steps below will take you through cloning your own fork, installing dependencies and building:</h1>
            <ol>
              <li>Fork and/or clone our repository. To use Git from command line, see the <a href="https://help.github.com/articles/set-up-git/">Setting up Git</a> and <a href="https://help.github.com/articles/fork-a-repo/">Fork repo</a> articles.</li>
            </ol>
            <pre><code class="bash language-bash">git clone https://github.com/CreativeIT/material-angular-dashboard.git
</code></pre>
            <ol start="2">
              <li>Open your copied repo folder in terminal and install necessary modules with command, make sure that you have installed <a href="https://www.npmjs.com/get-npm">npm</a>:</li>
            </ol>
            <pre><code class="bash language-bash">npm install
</code></pre>
            <ol start="3">
              <li>Install <a href="https://cli.angular.io/">angular-cli</a> globally to use its commands in the terminal:</li>
            </ol>
            <pre><code class="bash language-bash">npm install --global @angular/cli
</code></pre>
            <ol start="4">
              <li>Now you are able to run or build the project:</li>
            </ol>
            <p>Run <code>npm start</code> or <code>ng serve</code> for a dev server. Navigate to <code>http://localhost:4200/</code>. The app will automatically reload if you change any of the source files.</p>
            <p>Run <code>npm run build</code> or <code>ng build</code> to build the project. The build artifacts will be stored in the <code>dist/</code> directory.</p>
            <h1>#ADDITIONAL</h1>
            <p>
                Since the project uses <a href="http://getbem.com/introduction/">BEM</a> structure with sass, it can be customized in easy way by editing src/variables.scss file. To take effect you must run gulp build in terminal again. Also you may want to use gulp watch, that will run default command every time you modify any file in source folder. You can use gulp defaultif you don't want to minify js-files.
            </p>
            <p>
                Google hasn't implemented select element yet <a>(see why here)</a>, that is why the project depends on <a href="https://github.com/CreativeIT/getmdl-select">getmdl-select plugin</a>. Also project uses <a href="https://d3js.org/">d3</a> and <a href="http://nvd3.org/">nvd3</a> to build charts and chart components.
            </p>
          </details>
        </section>
      <section id="support" class="mdl-color-text--white">
        <div class="container container-wide">
          <h2>You can give us a star on <a href="https://github.com/CreativeIT/material-dashboard-lite">Github</a> to support our work.</h2>
          <div>
            <img src="images/GitHub-Mark-Light-120px-plus.png" alt="">
            <a class="github-button" href="https://github.com/CreativeIT/material-dashboard-lite" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star CreativeIT/material-dashboard-lite on GitHub">Star</a>
          </div>
        </div>
      </section>
      <section id="contact">
        <div class="container">
          <h2>Contact with us</h2>
          <p>We are open for collaboration. Fill free to write us on <a href="mailto:Hello@creativeit.io">Hello@creativeit.io</a> or you can ask whatever you want  in following form.</p>
          <form action="">
            <div>
              <div class="mdl-textfield mdl-js-textfield">
                <input type="text" class="mdl-textfield__input" id="contact-name" name="contact-name">
                <label for="contact-name" class="mdl-textfield__label">Name</label>
              </div>
              <div class="mdl-textfield mdl-js-textfield">
                <input type="email" class="mdl-textfield__input" id="contact-email" name="contact-email">
                <label for="contact-name" class="mdl-textfield__label">Email</label>
              </div>
              <div class="mdl-textfield mdl-js-textfield">
                <textarea name="contact-message" id="contact-message" rows="5" class="mdl-textfield__input" type="text"></textarea>
                <label for="contact-message" class="mdl-textfield__label">Message</label>
              </div>
              <button class="mdl-button mdl-js-button filled-accent">
                Send message
              </button>
            </div>
          </form>
        </div>
      </section>
    </main>
    <footer class="mdl-mini-footer">
      <div class="mdl-mini-footer__left-section">
        <span class="mdl-logo">©2020. Developed and designed by <a href="http://creativeit.io/">CreativeIT</a></span>
      </div>
    </footer>
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.6/showdown.min.js"></script>
    <script defer src="https://buttons.github.io/buttons.js"></script>
    <script type="text/javascript">
      <!--
      document.addEventListener('DOMContentLoaded', () => {
        fetch('https://raw.githubusercontent.com/CreativeIT/material-angular-dashboard/master/README.md')
          .then(res => res.text())
          .then(text => new showdown.Converter().makeHtml(text))
          .then(html => document.querySelector('#readme').innerHTML = html);
      });
      //-->
    </script>
  </body>
</html>