Material Dashboard

<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-messages">
          <li>
            <a href="#">
              <div>
                <strong>Invite</strong>
                <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
              </div>
              <div><strong>Invite</strong> Invite to work on JK Rowling's Universe, 'Harry Potter'</div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <strong>Terry Pratchett</strong>
                <span class="pull-right text-muted">
                  <em>Yesterday</em>
                </span>
              </div>
              <div><strong>No New Novel</strong> As stated before</div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="text-center" href="#">
              <strong>Read All Messages</strong>
              <i class="fa fa-angle-right"></i>
            </a>
          </li>
        </ul>

</li>

<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-list fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-tasks">
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Scenes with Rough Drafts</strong>
                  <span class="pull-right text-muted">40% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">40% Complete (success)</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Completed Character Data</strong>
                  <span class="pull-right text-muted">20% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                    <span class="sr-only">20% Complete</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Research with Sources</strong>
                  <span class="pull-right text-muted">60% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    <span class="sr-only">60% Complete (warning)</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="text-center" href="#">
              <strong>See All Tasks</strong>
              <i class="fa fa-angle-right"></i>
            </a>
          </li>
        </ul>
      </li>

<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-globe fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-alerts">
          <li>
            <h5>Enter a Universe</h5></li>
          <li>
            <a href="#">
              <div>
                Harry Potter
                <span class="pull-right text-muted small">Guest</span>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                Lord of the Rings
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#" class="active">
            Sherlock的首页
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="text-center" href="#">
              <i class="fa fa-plus"></i>
        <strong>添加一个 Universe</strong>
            </a>
          </li>
        </ul>
        
      </li>

<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-user">
          <li><a href="#"><i class="fa fa-user fa-fw"></i> 用户配置文件</a>
          </li>
          <li><a href="#"><i class="fa fa-gear fa-fw"></i> 设置</a>
          </li>
          <li class="divider"></li>
          <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> 注销</a>
          </li>
        </ul>
        
      </li>

</ul>
</nav>
  <nav>
  <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu" role="tablist">
          <li>
            <a href="#Details" aria-controls="Details" role="tab" data-toggle="tab">
              <i class="fa fa-dashboard fa-fw"></i> Universe Details
            </a>
          </li>
          <li>
            <a href="#Characters" aria-controls="Characters" role="tab" data-toggle="tab">
              <i class="fa fa-users fa-fw"></i> 字符
            </a>
          </li>
          <li>
            <a href="#Settings" aria-controls="Settings" role="tab" data-toggle="tab">
              <i class="fa fa-map-marker fa-fw"></i> Settings
            </a>
          </li>
          <li>
            <a href="#Notes" aria-controls="Notes" role="tab" data-toggle="tab">
              <i class="fa fa-tags fa-fw"></i> Notes
            </a>
          </li>
          <li>
            <a data-toggle="collapse" href="#storySidebarCollapse" aria-expanded="false" aria-controls="storySidebarCollapse" href="#">
              <i class="fa fa-book fa-fw"></i> Tell a Story
            </a>
            <ul class="nav nav-second-level collapse" id="storySidebarCollapse">
              <li>
                <a href="#Timeline" aria-controls="Stories" role="tab" data-toggle="tab">
                  <i class="fa fa-calendar-o fa-fw"></i> Timeline
                </a>
              </li>
              <li>
                <a href="#Stories" aria-controls="Stories" role="tab" data-toggle="tab">
                  <i class="fa fa-quote-left fa-fw"></i> Plot it Out
                </a>
              </li>
            </ul>
          </li>

</ul>
      </div>
    </div>
  </nav>

<div role="tabpanel" class="tab-pane" id="Details">
          <h1>Details</h1>

<div class="row">
            <div class="col-md-4">
              <div class="panel panel-graph">
                <div class="panel-body">
                  <div id="genderChart"></div>
                </div>
                <div class="panel-heading text-center">
                  <h3>Gender Breakdown</h3>
                </div>
              </div>
            </div>

<div class="col-md-4">
              <div class="panel panel-graph">
                <div class="panel-body">
                  <div id="countChart"></div>
                </div>
                <div class="panel-heading text-center">
                  <h3>General Stats</h3>
                </div>
              </div>
            </div>

<div class="col-md-4">
              <div class="panel panel-big-number">
                <div class="panel-body">
                  <h1>1500</h1>
                </div>
                <div class="panel-heading">
                  <h3>Word Count</h3>
                </div>
              </div>
            </div>
          </div>

</div>
                <div class="panel-heading">

</div>
              </div>
            </div>
          </div>
        </div>

<div role="tabpanel" class="tab-pane" id="Characters">
          <h1>Characters</h1>

<a href="#">
                  <span>Irene Adler</span>
                </a>

<a href="#">
                  <span>Dr. John Watson</span>
                </a>

<a href="#" class="active">
                  <span>Sherlock Holmes</span>
                  <i class="fa fa-pencil highlight"></i>
                </a>

</div>
            </div>
            <div class="col-sm-9">
              <div class="panel panel-details">
                <div class="panel-heading">
                  Sherlock Holmes
                </div>
                <div class="panel-body">
                  <div class="detail-section" data-bind="template: { name: 'HtmlStringDisplay', data: { name: 'Motivation', contents: Motivation} }">
                    <h2></h2>
                  </div>
                  <div class="detail-section" data-bind="template: { name: 'HtmlStringDisplay', data: { name: 'Apperance', contents: Apperance} }">
                    <h3>Apperance</h3>

<p><b>Tall & Gaunt</b></p>
                    <ul>
                      <li> He measured 6 feet or over 6 feet but he was so lean that he seemed even taller.</li>
                      <li> He had a tall, gaunt figure made even gaunter and taller by his long grey travelling-cloak and close-fitting cloth cap.</li>
                      <li> He was a tall, thin man, gaunt man of sixty.</li>
                      <li> He had a thin, eager face.</li>
                      <li> He had a thin, sinewy arm, a long, thin, nervous arm</li>
                      <li> He had a long, thin form.</li>
                      <li> He had long, thin fingers. a long, thin fore-finger</li>
                      <li> He had a long, thin nose.</li>
                    </ul>
                    <p><b>Features</b></p>
                    <ul>
                      <li> He had a dolichocephalic skull with well-marked supra-orbital development.</li>
                      <li> His hair were black.</li>
                      <li> He had heavy tufted brows, heavy, dark brows, bushy eyebrows. </li>
                      <li> He had a thin hawk-like nose.</li>
                      <li> He had thin and firm lips.</li>
                      <li> He had steady grey eyes. particularly sharp and piercing, with a far-away, introspective look when he was exerting his full powers. .</li>
                    </ul>
                    <p><b>Voice</b></p>
                    <ul>
                      <li>他很快，很高，有点刺耳的声音</li>
                    </ul>
                  </div>
                  <div class="detail-section" data-bind="template: { name: 'HtmlStringDisplay', data: { name: 'Mannerisms', contents: Mannerisms} }">
                    <h3>言谈举止</h3>
                    <p>Bit of an arrogant ass, actually. At least in <i>literally</i> every movie adaptation that exists.</p>
                  </div>
                  <div class="detail-section" data-bind="template: { name: 'HtmlStringDisplay', data: { name: 'Occupation', contents: Occupation} }">
                    <h3>职业</h3>
                    <p>Oh, he's a consulting detective. So he advises Scotland Yard when they can't solve cases. This in no way gives him a bloated ego at allll.</p>
                  </div>

<h4>关系</h4>
                  <div>
                    <div>
                      <i class="fa fa-users"></i> Sherlock Holmes is partners with John Watson
                    </div>
                    <div>
                      <i class="fa fa-users"></i> Sherlock Holmes is the tennant of Mrs. Hudson
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
          </div>

</div>

<a href="#" class="active">
                  <span>Scotland Yard</span>
                  <i class="fa fa-pencil highlight"></i>
                </a>

<a href="#">
                  <span>221 Baker St</span>
                </a>

</div>
            </div>
            <div class="col-sm-9">
              <div class="panel panel-edit">
                <div class="panel-heading">
                  苏格兰场

</div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-6">
                      <div data-bind="template: { name: 'TextEditor', data: { Name: 'Name', Contents: Name} }">
                        <div class="form-group">
                          <label class="sr-only">Name</label>
                          <input type="text" class="form-control" placeholder="Name" />
                        </div>
                      </div>
                    </div>

</div>
                    </div>
                  </div>

<div>
                    
                    <div class="form-group">
                      <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                          <a href="#Descript" data-bind="attr: { 'href' : '#Description' + SettingId()}" role="tab" data-toggle="tab">描述</a>
                        </li>
                        <li role="presentation">
                          <a href="#History" data-bind="attr: { 'href' : '#History' + SettingId()}" role="tab" data-toggle="tab">History</a>
                        </li>
                      </ul>
                    </div>

<div class="tab-content">
                      <div id="Descript" role="tabpanel" class="tab-pane active">
                        <div data-bind="template: { name: 'RichTextEditor', data: { Name: 'Description', Contents: Description, id: 'EditApperance'} }">
                          <textarea id="descript" class="ckedit">
                            <p><b>地址</b>: 新苏格兰场，sw1h 0bg 8-10百老汇，伦敦，英国
                            </p>
                          </textarea>
                        </div>
                      </div>
                      <div id="History" role="tabpanel" data-bind="attr: { 'id' : 'History' + SettingId()}" role="tabpanel" class="tab-pane">
                        <div data-bind="template: { name: 'RichTextEditor', data: { Name: 'History', Contents: History, id: 'EditMannerisms'} }">
                          <textarea id="history" class="ckedit">
                            <p>Scotland Yard (officially New Scotland Yard) is a metonym for the headquarters of the Metropolitan Police Service, the territorial police force responsible for policing most of London.</p>

<p>The name derives from the location of the original Metropolitan Police headquarters at 4 Whitehall Place, which had a rear entrance on a street called Great Scotland Yard.[1] The Scotland Yard entrance became the public entrance to the police station, and over time the street and the Metropolitan Police became synonymous. The New York Times wrote in 1964 that just as Wall Street gave its name to New York's financial district, Scotland Yard became the name for police activity in London.</p>
                          </textarea>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

</div>

<div role="tabpanel" class="tab-pane" id="Notes">
          <h1>Notes</h1>
        </div>

<div role="tabpanel" class="tab-pane" id="Stories">
          
          <ul class="scene-bank">
            <li>Being chased by a 'hound'</li>
            <li>Taking the Case</li>
            <li>Total fluff - drinking tea</li>
          </ul>

<a href="#" class="active">
                  <span>Hound of the Baskervilles</span>
                </a>

<a href="#">
                  <span>Study in Scarlet</span>
                </a>

</div>

</div>
            <div class="col-md-3">
              <ul class="timeline">
                <li>
                  <div class="timeline-badge success">
                    <i class="fa fa-check"></i>
                  </div>
                  <div class="timeline-panel">
                    <div class="timeline-heading">
                      <h4 class="timeline-title">
                        First Scene
                      </h4>
                      <p><small class="text-muted"><i class="fa fa-clock-o"></i> 11/1/1915, 2pm</small>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="timeline-badge info">
                    <i class="fa fa-pencil"></i>
                  </div>
                  <div class="timeline-panel">
                    <div class="timeline-heading">
                      <h4 class="timeline-title">
                        Second Scene <i class="fa fa-pencil"></i>
                      </h4>
                      <p><small class="text-muted"><i class="fa fa-clock-o"></i> 11/1/1915, 3pm</small>
                      </p>
                    </div>
                  </div>
                </li>

<li>
                  <div class="timeline-badge warning">
                    <i class="fa fa-dot-circle-o"></i>
                  </div>
                  <div class="timeline-panel">
                    <div class="timeline-heading">
                      <h4 class="timeline-title">
                        Third Scene
                      </h4>
                      <p><small class="text-muted"><i class="fa fa-clock-o"></i> 11/1/1915, 5pm</small>
                      </p>
                    </div>
                  </div>
                </li>

<li>
                  <div class="timeline-badge success">
                    <i class="fa fa-check"></i>
                  </div>
                  <div class="timeline-panel">
                    <div class="timeline-heading">
                      <h4 class="timeline-title">
                        Fourth Scene
                      </h4>
                      <p><small class="text-muted"><i class="fa fa-clock-o"></i> 11/1/1915, 5pm</small>
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-md-7">
              <div class="panel panel-edit">
                <div class="panel-heading">
                  Second Scene
                </div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-6">
                      <div>
                        <div class="form-group">
                          <label class="sr-only">Date</label>
                          <input type="text" class="form-control" placeholder="Date" />
                        </div>
                      </div>
                    </div>

<div class="col-md-6">
                      <div class="form-group">
                        <label class="sr-only">Setting</label>
                        <select class="form-control">
                          <option></option>
                          <option value="volvo">Scotland Yard</option>
                          <option selected value="saab">221B Baker St</option>
                        </select>
                      </div>

</div>
                  </div>
                </div>

<div>
                  
                  <div class="form-group">
                    <ul class="nav nav-tabs" role="tablist">
                      <li role="presentation" class="active">
                        <a href="#Meta" data-bind="attr: { 'href' : '#Description' + SettingId()}" role="tab" data-toggle="tab">Meta Info</a>
                      </li>
                      <li role="presentation">
                        <a href="#Write" data-bind="attr: { 'href' : '#History' + SettingId()}" role="tab" data-toggle="tab">Write It!</a>
                      </li>
                    </ul>
                  </div>

<div class="tab-content">
                    <div id="Meta" role="tabpanel" class="tab-pane active">
                      <div data-bind="template: { name: 'RichTextEditor', data: { Name: 'Description', Contents: Description, id: 'EditApperance'} }">
                        <div class="row">
                          <div class="col-sm-4">
                            <h3>Characters Involved</h3>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="" checked>
                                Sherlock Holmes
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                John Watson
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Mrs. Hudson
                              </label>
                            </div>
                          </div>
                          <div class="col-sm-4">
                            <h3>Characters Involved</h3>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="" checked>
                                Sherlock Holmes
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                John Watson
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Mrs. Hudson
                              </label>
                            </div>
                          </div>
                          <div class="col-sm-4">
                            <h3>Relevant Notes</h3>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Research on gunpowder types
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Dog bark links
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="" checked>
                                Analysis of Sherlock's Tells
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="Write" role="tabpanel" data-bind="attr: { 'id' : 'History' + SettingId()}" role="tabpanel" class="tab-pane">
                      <div data-bind="template: { name: 'RichTextEditor', data: { Name: 'History', Contents: History, id: 'EditMannerisms'} }">
                        <textarea id="text" class="ckedit">
                            <p>
                                "I have in my pocket a manuscript," said Dr. James Mortimer.
                            </p>
                            <p>
                              "I observed it as you entered the room," said Holmes.
                            </p>
                            <p>
                              "It is an old manuscript."
                            </p>
                            <p>
                              "Early eighteenth century, unless it is a forgery."
                            </p>
                            <p>
                              "How can you say that, sir?"
                            </p>
                            <p>
                              "You have presented an inch or two of it to my examination all the time
                              that you have been talking. It would be a poor expert who could not give
                              the date of a document within a decade or so. You may possibly have read
                              my little monograph upon the subject. I put that at 1730."
                            </p>
                            <p>
                              "The exact date is 1742." Dr. Mortimer drew it from his breast-pocket.
                              "This family paper was committed to my care by Sir Charles Baskerville,
                              whose sudden and tragic death some three months ago created so much
                              excitement in Devonshire. I may say that I was his personal friend as well
                              as his medical attendant. He was a strong-minded man, sir, shrewd,
                              practical, and as unimaginative as I am myself. Yet he took this document
                              very seriously, and his mind was prepared for just such an end as did
                              eventually overtake him."
                            </p>
                            <p>
                              Holmes stretched out his hand for the manuscript and flattened it upon his
                              knee. "You will observe, Watson, the alternative use of the long s and the
                              short. It is one of several indications which enabled me to fix the date."
                            </p>
                          </textarea>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

</div>

</div>
</div>
</div>