truly-ui/demo/src/app/home/home.component.html

Web Components for Desktop Applications.

<div class="home-page">
  <div class="row ss-style-triangles">
    <div class="container-fluid banner">
      <div class="col-xs-12 fix-padding">
        <div class="col-xs-12 col-md-6 logo">
          <div class="logo-img">
            <img src="../../assets/img/logo.png" width="400" class="img-responsive">
          </div>
          <div class="description">
            <p>The Real Desktop Web Framework</p>
            <p>for <strong>Angular</strong></p>
          </div>
        </div>
        <div class="banner-separator"></div>
        <div class="col-xs-12 hidden-md hidden-lg desk">
          <div class="col-xs-12 visible-xs">
            <a href="/gettingstarted" class="btn btn-lg btn-block btn-get-started">Get Started</a>
          </div>
          <div class="col-xs-12 visible-sm text-center">
            <a href="/gettingstarted" class="btn btn-lg btn-get-started">Get Started</a>
          </div>
          <div class="col-xs-12 hidden-md hidden-lg info-version">
            <p><a href="{{lastRelease?.html_url}}" target="_blank">{{lastRelease?.name}}</a> /
              {{lastRelease?.published_at | date:'yyyy-MM-dd'}} /
              <a href="https://github.com/TemainfoSistemas/truly-ui/blob/master/LICENSE.md" target="_blank">MIT
                Licensed</a> /
              <a href="{{lastRelease?.html_url}}" target="_blank">Release Notes</a></p>
          </div>
          <div class="col-xs-12 hidden-sm hidden-md hidden-lg desk-table">
            <img src="../../assets/img/desk.png" class="img-responsive">
          </div>
        </div>
      </div>
      <div class="banner-footer visible-md visible-lg">
        <div class="col-md-6">
          <div class="col-md-5">
            <a href="/gettingstarted" class="btn btn-lg btn-get-started">Get Started</a>
          </div>
          <div class="col-md-7 visible-lg">
            <div class="info-version">
              <p><a href="{{lastRelease?.html_url}}" target="_blank">{{lastRelease?.name}}</a> /
                {{lastRelease?.published_at | date:'yyyy-MM-dd'}} /
                <a href="https://github.com/TemainfoSistemas/truly-ui/blob/master/LICENSE.md" target="_blank">MIT
                  Licensed</a> /
                <a href="{{lastRelease?.html_url}}" target="_blank">Release Notes</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="banner-image"></div>
      <div class="info-version-md">
        <p><a href="{{lastRelease?.html_url}}" target="_blank">{{lastRelease?.name}}</a> /
          {{lastRelease?.published_at | date:'yyyy-MM-dd'}} /
          <a href="https://github.com/TemainfoSistemas/truly-ui/blob/master/LICENSE.md" target="_blank">MIT
            Licensed</a> /
          <a href="{{lastRelease?.html_url}}" target="_blank">Release Notes</a></p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="container-fluid why-truly-ui">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-12 col-md-3 col-md-push-7 logo">
            <img src="../../assets/img/logo-high-trulyui.png" class="img-responsive">
          </div>
          <div class="col-xs-12 col-md-5 col-md-offset-2 col-md-pull-3 why-tl">
            <h1>Why TrulyUI ?</h1>
            <p>TrulyUI is an <strong>Angular</strong> Framework especially developed for Desktop
              Applications based on Web Components using the greatest technologies of the world.</p>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="col-xs-12 col-md-4 feature-box">
          <div class="col-xs-12 col-md-10 col-md-offset-2">
            <h3><i class="ion-checkmark"></i>Free & Open Source</h3>
            <p>TrulyUI Framework is a 100% free and open source project, licensed under GPL.
              It will always remain free to use, powered by a massive world-wide community.</p>
          </div>
        </div>
        <div class="col-xs-12 col-md-4 feature-box">
          <div class="col-xs-12 col-md-10 col-md-offset-1">
            <h3><i class="ion-checkmark"></i>Based on Angular</h3>
            <p>TrulyUI is based on Angular, maintained by world-wide community. By the way,
              we believe that Angular is the most promising Web Framework.</p>
          </div>
        </div>
        <div class="col-xs-12 col-md-4 feature-box">
          <div class="col-xs-12 col-md-10">
            <h3><i class="ion-checkmark"></i>Desktop Applications</h3>
            <p>We developed TrulyUI thinking to fill a gap on open-source Web Technologies that's poor
              when it's about applications on Desktop.<br><em>Ex: Electron, App.js and NW.js</em></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="container-fluid web-components">
      <div class="col-xs-12 web-components-header">
        <h1 class="text-center">The Most Complete Open Source UI Library for Desktop Applications</h1>
        <h3 class="text-center">Everything you need to create a complete based on desktop application.</h3>
      </div>
      <div class="col-xs-12 web-components-row">
        <div class="col-xs-12 col-md-4 web-components-list tl-input">
          <div class="col-xs-12 col-md-10 col-md-offset-2">
            <i class="fa fa-terminal"></i>
            <p><strong>TL-INPUT</strong> Are fields which allow for an input of data, based on a specific and
              predefined format. With many properties that can be used to different's kind of data or treatment.</p>
          </div>
        </div>
        <div class="col-xs-12 col-md-4 web-components-list tl-form">
          <div class="col-xs-12 col-md-10 col-md-offset-1">
            <i class="fa fa-window-maximize"></i>
            <p><strong>TL-FORM</strong> It's a rich modal component with many features such as intelligence tabbing,
              validation of the internal components, window controls and more.</p>
          </div>
        </div>
        <div class="col-xs-12 col-md-4 web-components-list tl-dialog">
          <div class="col-xs-12 col-md-10">
            <i class="ion-chatbox"></i>
            <p><strong>TL-DIALOG</strong> It's a service that has your own set up according with it function such as
              Dialog Info, Alert,
              Confirm and Error. The dialog's have all control window functions as well.</p>
          </div>
        </div>
      </div>
      <div class="col-xs-12 web-components-row">
        <div class="col-xs-12 col-md-4 web-components-list tl-datatable">
          <div class="col-xs-12 col-md-10 col-md-offset-2">
            <i class="fa fa-table"></i>
            <p><strong>TL-DATATABLE</strong> As the name describes, represents massive grid data,
              with nice features such as a Intelligence LazyLoad Order, Filter and Keyboard Navigation.</p>
          </div>
        </div>
        <div class="col-xs-12 col-md-4 web-components-list tl-schedule">
          <div class="col-xs-12 col-md-10 col-md-offset-1">
            <i class="fa ion-ios-bookmarks"></i>
            <p><strong>TL-SCHEDULE</strong> Displays appointments across the timetable and allows a user to quickly
              change between different timetable views using the View Selector and navigate using the Date Navigator.
            </p>
          </div>
        </div>
        <div class="col-xs-12 col-md-4 web-components-list tl-button">
          <div class="col-xs-12 col-md-10">
            <i class="fa fa-minus-square"></i>
            <p><strong>TL-BUTTON</strong> The buttons have many properties to be used, and custom behavior can be
              attached.
              It's intelligence when used with Dialog and Form, creating own actions to return for them.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="container-fluid git-and-getstarted">
      <div class="col-xs-12">
        <div class="col-xs-12 col-md-5 col-md-offset-1 list">
          <div class="col-xs-2 col-sm-2">
            <i class="fa ion-play"></i>
          </div>
          <div class="col-xs-9 col-sm-10 col-xs-offset-1 col-sm-offset-0 getting-started">
            <a href="/gettingstarted" target="_blank"><h2>Getting Started</h2></a>
            <p>Learn more about how to install TrulyUI Framework. We'll cover the basics and get
              you started from the ground up.</p>
          </div>
        </div>
        <div class="col-md-1 visible-md visible-lg">
          <div class="separator"></div>
        </div>
        <div class="col-xs-12 col-md-5 list">
          <div class="col-xs-2 col-sm-2">
            <i class="fa fa-github"></i>
          </div>
          <div class="col-xs-9 col-sm-10 col-xs-offset-1 col-sm-offset-0">
            <a href="https://github.com/TemainfoSistemas/truly-ui" target="_blank"><h2 class="title-boxes-bottom">Fork
              us on Github</h2></a>
            <p>Fork us on Github and Contribute with the project.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>