<div style="padding: 16px;">
  <p>首页</p>
  <p>id: {{user.id}}, name: {{user.name}}, age: {{user.age}}</p>
  <a href="/list" class="ui button">List Page</a>
  <button class="ui primary button" ng-click="test()">测试</button>
  <div>
    <br/>
    <div class="ui icon input">
      <input type="text" placeholder="Search...">
      <i class="search icon"></i>
    </div>
  </div>
  <br/>
  <div>
    <i class="ae flag"></i>
    <i class="france flag"></i>
    <i class="china flag"></i>
  </div>
  <br/>
  <div>
    <i class="american sign language interpreting icon"></i>
    <i class="assistive listening systems icon"></i>
    <i class="audio description icon"></i>
    <i class="blind icon"></i>
    <i class="braille icon"></i>
    <i class="closed captioning icon"></i>
    <i class="closed captioning outline icon"></i>
    <i class="deaf icon"></i>
    <i class="low vision icon"></i>
    <i class="phone volume icon"></i>
    <i class="question circle icon"></i>
    <i class="question circle outline icon"></i>
    <i class="sign language icon"></i>
    <i class="tty icon"></i>
    <i class="universal access icon"></i>
    <i class="wheelchair icon"></i>
  </div>
  <br/>
  <form class="ui form">
    <div class="field">
      <label>First Name</label>
      <input type="text" name="first-name" placeholder="First Name">
    </div>
    <div class="field">
      <label>Last Name</label>
      <input type="text" name="last-name" placeholder="Last Name">
    </div>
    <div class="field">
      <div class="ui checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>I agree to the Terms and Conditions</label>
      </div>
    </div>
    <button class="ui button" type="submit">Submit</button>
  </form>
  <br/>
  <table class="ui celled table">
    <thead>
    <tr><th>Name</th>
      <th>Age</th>
      <th>Job</th>
    </tr></thead>
    <tbody>
    <tr>
      <td data-label="Name">James</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Jill</td>
      <td data-label="Age">26</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Elyse</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Designer</td>
    </tr>
    </tbody>
  </table>
  <br/>
  <div class="ui card">
    <div class="image">
      <img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
    </div>
    <div class="content">
      <a class="header">Kristy</a>
      <div class="meta">
        <span class="date">Joined in 2013</span>
      </div>
      <div class="description">
        Kristy is an art director living in New York.
      </div>
    </div>
    <div class="extra content">
      <a>
        <i class="user icon"></i>
        22 Friends
      </a>
    </div>
  </div>
  <div class="ui modal">
    <i class="close icon"></i>
    <div class="header">
      Profile Picture
    </div>
    <div class="image content">
      <div class="ui medium image">
        <img src="https://semantic-ui.com/images/avatar/large/chris.jpg">
      </div>
      <div class="description">
        <div class="ui header">We've auto-chosen a profile image for you.</div>
        <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
        <p>Is it okay to use this photo?</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui black deny button">
        Nope
      </div>
      <div class="ui positive right labeled icon button">
        Yep, that's me
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>
  <div class="ui card" data-html="<div class='header'>User Rating</div><div class='content'><div class='ui star rating'><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i></div></div>">
    <div class="image">
      <img src="https://semantic-ui.com/images/movies/totoro-horizontal.jpg">
    </div>
    <div class="content">
      <div class="header">My Neighbor Totoro</div>
      <div class="description">
        Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits.
      </div>
    </div>
    <div class="ui two bottom attached buttons">
      <div class="ui button">
        <i class="add icon"></i>
        Queue
      </div>
      <div class="ui primary button">
        <i class="play icon"></i>
        Watch
      </div>
    </div>
  </div>
</div>
