Update demo

Author: Yeliazar

docs/apple-touch-icon.png

@@ -0,0 +1,33 @@
+<?php sleep(10) ?>
+<h3 class="text-center no-margin animated bounceInDown">Sign up, <del>it's <strong>free</strong></del> and get <strong>$50 now!</strong></h3>
+<p class="lead text-muted text-center">
+    Faith makes it possible to achieve that which man's mind can conceive and believe.
+</p>
+<form>
+
+    <div class="form-group">
+        <label for="exampleInputEmail1"><i class="fa fa-circle text-warning"></i> &nbsp; Email address</label>
+        <input type="email" class="form-control input-transparent" id="exampleInputEmail1"
+               placeholder="Enter email">
+    </div>
+    <div class="form-group">
+        <label for="pswd"><i class="fa fa-circle text-danger"></i> &nbsp; Password</label>
+        <input class="form-control" id="pswd" type="text" placeholder="Min 8 characters">
+    </div>
+    <p>
+        To make a widget automatically load it's content you just need to set
+        <strong>data-widgster-autoload</strong> attribute and provide an url.
+    </p>
+    <pre><code>data-widgster-load="server/ajax_widget.php"
+data-widgster-autoload="true"</code></pre>
+    <p>
+        <strong>data-widgster-autoload</strong> may be set to an integer value. If set, for example, to
+    2000 will refresh widget every 2 seconds.
+    </p>
+    <div class="clearfix">
+        <div class="btn-toolbar float-right">
+            <button type="submit" class="btn btn-transparent">Cancel</button>
+            <button type="submit" class="btn btn-success animated wobble">&nbsp;Submit&nbsp;</button>
+        </div>
+    </div>
+</form>

docs/demo/grid/autoload.php

@@ -0,0 +1,4 @@
+<!-- demo latetency <?php sleep(2) ?> -->
+<p class="text-muted">Simulating latency with tiny php block on the server-side.</p>
+<p>A timestamp this widget was created: Apr 24, 19:07:07</p>
+<p>A timestamp this widget was updated: <?php echo date("M j, H:i:s") ?></p>

docs/demo/grid/default.php

@@ -0,0 +1,55 @@
+<!-- <?php sleep(2) //just some delay to simulate latency ?> -->
+<ul class="news-list stretchable">
+    <li class="animated fadeInDown bg-warning-light">
+        <span class="icon bg-warning text-white">
+            <i class="fa fa-lock"></i>
+        </span>
+        <div class="news-item-info">
+            <h5 class="name no-margin mb-xs"><a href="#">Just now! Check update time</a></h5>
+            <p class="fs-mini">
+                Check this news item timestamp. There is a small server part that generates current timestamp so it
+                would be easier for you to see ajax widgets in action
+            </p>
+            <time class="help-block"><?php  echo date("M j, H:i:s")?></time>
+        </div>
+    </li>
+    <li>
+        <span class="icon bg-danger text-white">
+            <i class="fa fa-star"></i>
+        </span>
+        <div class="news-item-info">
+            <h5 class="name no-margin mb-xs"><a href="#">First Human Colony on Mars</a></h5>
+            <p class="fs-mini">
+                First 700 people will take part in building first human settlement outside of Earth.
+                That's awesome, right?
+            </p>
+            <time class="help-block">Mar 20, 18:46</time>
+        </div>
+    </li>
+    <li>
+        <span class="icon bg-info text-white">
+            <i class="fa fa-microphone"></i>
+        </span>
+        <div class="news-item-info">
+            <h5 class="name no-margin mb-xs"><a href="#">Light Blue reached $300</a></h5>
+            <p class="fs-mini">
+                Light Blue Inc. shares just hit $300 price. "This was inevitable. It should
+                have happen sooner or later" - says NYSE expert.
+            </p>
+            <time class="help-block">Sep 25, 11:59</time>
+        </div>
+    </li>
+    <li>
+        <span class="icon bg-success text-white">
+            <i class="fa fa-eye"></i>
+        </span>
+        <div class="news-item-info">
+            <h5 class="name no-margin mb-xs"><a href="#">No more spying</a></h5>
+            <p class="fs-mini">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua.
+            </p>
+            <time class="help-block">Mar 20, 18:46</time>
+        </div>
+    </li>
+</ul>

docs/demo/grid/news.php

@@ -0,0 +1,53 @@
+<?php sleep(2) ?>
+<div class="list-group list-group-lg">
+    <a href="#" class="list-group-item animated fadeInDown bg-warning-light">
+      <span class="thumb-sm mr">
+          <img class="rounded-circle" src="/images/people/a6.jpg" alt="...">
+      </span>
+      <div>
+        <h6 class="no-margin"><strong>Jenny Wilington</strong></h6>
+        <small>just now</small>
+      </div>
+      <i class="fa fa-circle ml-auto text-success mt-sm"></i>
+    </a>
+    <a href="#" class="list-group-item ">
+      <span class="thumb-sm mr">
+          <img class="rounded-circle" src="/images/people/a1.jpg" alt="...">
+      </span>
+      <div>
+        <h6 class="m-0">Maikel Basso</h6>
+        <small class="text-muted">about 2 mins ago</small>
+      </div>
+      <i class="fa fa-circle ml-auto text-danger"></i>
+    </a>
+    <a href="#" class="list-group-item">
+      <span class="thumb-sm mr">
+          <img class="rounded-circle" src="/images/people/a2.jpg" alt="...">
+      </span>
+      <div>
+        <h6 class="m-0">Ianus Arendse</h6>
+        <small class="text-muted">about 42 mins ago</small>
+      </div>
+      <i class="fa fa-circle ml-auto text-info"></i>
+    </a>
+    <a href="#" class="list-group-item">
+      <span class="thumb-sm mr">
+          <img class="rounded-circle" src="/images/people/a3.jpg" alt="...">
+      </span>
+      <div>
+        <h6 class="m-0">Valdemar Landau</h6>
+        <small class="text-muted">one hour ago</small>
+      </div>
+      <i class="fa fa-circle ml-auto text-success"></i>
+    </a>
+    <a href="#" class="list-group-item mb-n-md">
+      <span class="thumb-sm mr">
+          <img class="rounded-circle" src="/images/people/a4.jpg" alt="...">
+      </span>
+      <div>
+        <h6 class="m-0">Rick Teagan</h6>
+        <small class="text-muted">3 hours ago</small>
+      </div>
+      <i class="fa fa-circle ml-auto text-warning"></i>
+    </a>
+</div>