bubofamily/tests/Snippets/snippets.html

180 lines
6.5 KiB
HTML

<!-- Widget -->
<div class="info-box bg-success">
<span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
<!--<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>-->
<span class="progress-description">70% Increase in 30 Days</span>
</div>
</div>
<!-- End Widget -->
<!-- Widget with rate -->
<div class="info-box bg-danger">
<span class="info-box-icon"><i class="far fa-thumbs-down"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
<!--<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>-->
<span class="progress-description">70% Increase in 30 Days</span>
</div>
</div>
<!-- End Widget with rate -->
<!-- Card Profile -->
<div class="card card-widget widget-user">
<div class="widget-user-header bg-info">
<h3 class="widget-user-username">Alexander Pierce</h3>
<h5 class="widget-user-desc">Founder &amp; CEO</h5>
</div>
<div class="widget-user-image">
<img class="img-circle elevation-2" src="../dist/img/user1-128x128.jpg" alt="User Avatar">
</div>
<div class="card-footer">
<div class="row">
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">3,200</h5>
<span class="description-text">SALES</span>
</div>
</div>
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">13,000</h5>
<span class="description-text">FOLLOWERS</span>
</div>
</div>
<div class="col-sm-4">
<div class="description-block">
<h5 class="description-header">35</h5>
<span class="description-text">PRODUCTS</span>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Profile -->
<!-- Chat -->
<div class="card card-warning direct-chat direct-chat-warning shadow">
<div class="card-header">
<h3 class="card-title">Shadow - Regular</h3>
<div class="card-tools">
<span title="3 New Messages" class="badge bg-danger">3</span>
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="direct-chat-messages">
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
<div class="direct-chat-text">
Messaggio Utente1
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
<div class="direct-chat-text">
Messaggio Utente2
</div>
</div>
</div>
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">2/28/2015</small>
</span>
<span class="contacts-list-msg">How have you been? I was...</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
<span class="input-group-append">
<button type="submit" class="btn btn-warning">Send</button>
</span>
</div>
</form>
</div>
</div>
<!-- End Chat -->
<!-- card Posts-->
<div class="post">
<div class="user-block">
<img class="img-circle img-bordered-sm" src="../../dist/img/user1-128x128.jpg" alt="user image">
<span class="username">
<a href="#">Jonathan Burke Jr.</a>
<a href="#" class="float-right btn-tool"><i class="fas fa-times"></i></a>
</span>
<span class="description">Shared publicly - 7:30 PM today</span>
</div>
<p>
Lorem ipsum represents a long-held tradition for designers,
typographers and the like. Some people hate it and argue for
its demise, but others ignore the hate as they create awesome
tools to help create filler text for everyone from bacon lovers
to Charlie Sheen fans.
</p>
<p>
<a href="#" class="link-black text-sm mr-2"><i class="fas fa-share mr-1"></i> Share</a>
<a href="#" class="link-black text-sm"><i class="far fa-thumbs-up mr-1"></i> Like</a>
<span class="float-right">
<a href="#" class="link-black text-sm">
<i class="far fa-comments mr-1"></i> Comments (5)
</a>
</span>
</p>
<input class="form-control form-control-sm" type="text" placeholder="Type a comment">
</div>
<!-- End Card Posts-->
<!--CARD Comment-->
<div class="card-footer card-comment draggable">
<div class="card-comment">
<img class="img-circle img-sm" src="{{ $user_avatar }}" alt="User Image">
<div class="comment-text">
<span class="username">
{{$username}}
<span class="text-muted float-right">
{{ $date }}
</span>
</span>
{{$message}}
</div>
</div>
</div>
<!--END CARD Comment-->