examples/index.html

<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="//rawgit.com/magnumjs/mag.js/master/mag.min.js"></script>
</head>

<body>


  <div id="CommentBox">
    <h1>Comments</h1>
    <div id="CommentList">
      <div class="comment">
      </div>
    </div>
    <div id="Comment">
      <h2 class="commentAuthor">
        </h2>
      <span></span>
    </div>
  </div>

  <div id="Messaging">
    <h2>Messaging</h2>
    <button class="default">Show default message</button>
    <button class="success">Show success message</button>
    <button class="error">Show error message</button>
    <div id="messaging">
      <div class="messages">
      </div>
    </div>
    <div id="message">
      <div><i></i> <span></span>
      </div>
    </div>
  </div>

  <div id="mathdemo">
    <form onsubmit="return false">
      1st Number :
      <input type="text" name="num1" />
      <br/> 2nd Number :
      <input type="text" name="num2" />
      <button>ADD</button>
      <br/> Sum :
      <result></result>
    </form>
  </div>

  <div id="mathdemo1">
    1st Number :
    <input type="text" name="num1">
    <br/> 2nd Number :
    <input type="text" name="num2">
    <button>ADD</button>
    <br/> Sum :
    <result></result>
  </div>

  <div id="mathdemo2">
    <numbers>
      1st Number :
      <input type="text" name="num1">
      <br/> 2nd Number :
      <input type="text" name="num2">
    </numbers>
    <button>ADD</button>
    <br/> Sum :
    <result></result>
  </div>

  <div id="mathdemo3">
    <h2>Simple addition</h2>
    <div class="numbers">
      1st number :
      <input name="num1"> 2nd number :
      <input name="num2">

      <button>ADD</button>
      <br/>
      <num1></num1> +
      <num2></num2> = Sum :
      <result></result>
    </div>
  </div>


  <div id="mathdemo4">
    <h2>Simple addition 3</h2>
    <div class="numbers">
      1st number :
      <input name="num1"> 2nd number :
      <input name="num2">
      <div class="nested">
        <select name="test">
          <option></option>
        </select>
      </div>
      <button>ADD</button>
      <br/>
      <num1></num1> +
      <num2></num2> = Sum :
      <result></result>
    </div>
  </div>


  <div id="mathdemo5">
    inner component
    <div id="mathdemo6">
      <input name="author" type="text" placeholder="Your name" />
      <input name="text" type="text" placeholder="Say something..." />
      <input class="add" type="submit" value="Post" />
    </div>
    <br/> Sum :
    <result></result>
  </div>

  <div id="Comment" class="">
    <span />
  </div>

  <div id="demo">
    <h2>Boilerplate <count/></h2>
    <div id="CommentList">
      <commentList>
      </commentList>
    </div>
  </div>


  <div id="unloader">
    <mod></mod>
    <thing></thing>
    <button class="test">Count</button>
  </div>

  <div id="testmod" class="hide">
    YO
  </div>

  <div id="dashboard">
    <div id="filter-users">
      <h3>Filter users (<span data-bind="selectedUser"><name></name></span>)</h3>
      <input placeholder="Filter users by ... " />
      <ul>
        <li>Person Name: <span data-bind="name"></span>
        </li>
      </ul>
    </div>
    <div id="filter-projects">
      <h3>Filter projects (<span data-bind="selectedProject"><name></name></span>)</h3>
      <input placeholder="Filter projects by ... " />
      <ul>
        <li>Person Name: <span data-bind="name"></span>
        </li>
      </ul>
    </div>
  </div>

  <div id="app2">
    <h2>TEST</h2>
    <data></data>
  </div>

  <div id="comp2" class="">
    <h2 class="head">TESTER</h2>
    <b>b</b>
    <span>testerrr</span>
  </div>

  <div id="app">
    <h2>TEST</h2>
    <data></data>
  </div>

  <div id="comp" class="">
    <h2 class="head">TESTER</h2>
    <b>b</b>
    <span>testerrr</span>
  </div>

  <div id="tabbed">
    <div>
      <ul>
        <li>
          <a href="#"></a>
        </li>
      </ul>
    </div>
    <div class="content"></div>
  </div>

  <div id="todos">
    <h3>Todos</h3>
    <div class="total">
      <b class="remaining"></b>
      <span class="size"></span>
      <a href="#">[archive]</a>
    </div>
    <ul>
      <li class="todoItem">
        <input type="checkbox" /><span class="text"></span>
      </li>
    </ul>
    <input placeholder="Add todo!">
    <button>Add</button>
  </div>

  <div id="shoes">
    <h3>Search shoes by color: <span class="searching"></span></h3>
    <input name="searchText" placeholder="search for shoes.." />
    <ul>
      <li class="shoes">
        <span class="style"></span> -
        <span class="color"></span> |
        <div><a href="#">*</a>
        </div>
      </li>
    </ul>

  </div>

  <div id="SearchExample">
    <h3>Real-time search</h3>
    <div>
      <input type="text" placeholder="Type here" />
      <ul>
        <li>{l.name} <a href={l.url}>{l.url}</a>
        </li>
      </ul>
    </div>
  </div>


  <div id="filter-test">
    <h3>List filter example</h3>
    <input placeholder="Filter list by something" />
    <p>
      <input name="inStockOnly" type="checkbox" />Only show products in stock</p>
    <ul>
      <li>Product Name: <span class="name"></span>
      </li>
    </ul>
  </div>

  <div id="ProductCategoryRow">
    <div class="row">
      <div class="row-header" colSpan="2">TEST</div>
    </div>
  </div>

  <div id="ProductRow" class="hide">
    <div class="row">
      <div class="row-cell name">NAME</div>
      <div class="row-cell price">PRICE</div>
    </div>
  </div>

  <div id="ProductTable">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>


  <div id="main">

    <h2>Navigation Menu</h2>
    <nav class="">
      <a href="#">Home</a>
    </nav>
    <p class="activated-hide">Please click a menu item</p>
  </div>

  <main id="hello">
    <h1>Say </h1>
    <input placeholder="test" value='tester' />


    <select>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <textarea></textarea>
    <button>Do</button>
    <div>
      <div class="item">
        <input type="checkbox" name="done" value="thingy" />
        <span></span>
      </div>
    </div>
  </main>

  <div id="test" class="hide">
    <button>click</button>
    <span class="test">default</span>
    <span class="name"></span>
    <div id="passFail2" class="hide">
      <div class="messaging"></div>
    </div>
    <b>default</b>
  </div>

  <div id="contacts" class="hide">
    <h2></h2>
    <div id="form">
      <input name="name" />
      <input name="email" />
      <button>Save</button>
    </div>
    <ul id="list" class="hide">
      <li class="contact">
        <span class="name"></span>
      </li>
    </ul>
  </div>

  <div id="innerhello"><b></b>
  </div>

  <div id="build">
    <a href="">Nested - module - build</a>
    <div class="more"></div>
  </div>

  <div id="lister">
    <h2>Hello <span></span></h2>
    <ul>
      <li class="item"></li>
    </ul>
  </div>

  <div id="lister3">
    <h2>Hello <span></span></h2>
    <ul>
      <li class="item"></li>
    </ul>
  </div>

  <div id="count">
    <button>Increment</button>
    count: <span class="count"></span>
  </div>

  <div id="modalCase">
    <div id="modal" class="hide">
      <section class="modal">
        <section class="wrapper">
        </section>
        <button class="close-modal">Close</button>
      </section>
    </div>
    <button>Open</button>
  </div>


  <script src="//rawgit.com/magnumjs/mag.js/master/src/addons/ajax.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/mag.addons.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/mag.comps.js"></script>
  <script src="utils.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/addons/route.js"></script>

  <script src="test.js"></script>
  <script src="contacts.js"></script>
  <script src="filter.js"></script>
  <script src="script.js"></script>
</body>

</html>