244 lines
9.2 KiB
HTML
244 lines
9.2 KiB
HTML
<div class="home-container">
|
|
|
|
<div ng-hide="vm.single_contact">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="active"><a href="!#contacts" class="quick-create-tab" aria-controls="contacts" role="tab" data-toggle="tab"><i class="fa fa-user-plus" aria-hidden="true"></i> Create contact</a></li>
|
|
<li role="presentation"><a href="!#groups" class="quick-create-tab" aria-controls="conversate" role="tab" data-toggle="tab"><i class="fa fa-users" aria-hidden="true"></i> Create a group</a></li>
|
|
<li role="presentation"><a href="!#import_contacts" class="quick-create-tab" aria-controls="conversate" role="tab" data-toggle="tab"><i class="fa fa-users" aria-hidden="true"></i> Import Contacts</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="contacts">
|
|
<div ng-hide="vm.contact_active" ng-click="vm.contact_active = true">
|
|
<input type="text" class="form-control" placeholder="First Name">
|
|
</div>
|
|
<div ng-show="vm.contact_active" class="media">
|
|
<div class="media-left">
|
|
<div class="image-thing"><i class="fa fa-user fa-3x" aria-hidden="true"></i></div>
|
|
</div>
|
|
<div class="media-body">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="First Name">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="Last Name">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="Mobile Number">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="Email or Daplie Address">
|
|
</div>
|
|
<div class="form-group">
|
|
<textarea name="name" class="form-control" rows="8" cols="80" placeholder="Notes"></textarea>
|
|
<br>
|
|
<div class="pull-right">
|
|
<button ng-click="vm.contact_active = false" type="button" name="button" class="btn btn-default">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-hide="vm.contacts_imported" class="contact-zero">
|
|
<div class="contact-zero-main">
|
|
|
|
<i class="fa fa-users fa-4x"></i>
|
|
|
|
<h3>You haven't added any contacts yet!</h3>
|
|
</div>
|
|
<div class="contact-zero-buttons button-container">
|
|
<button ng-click="vm.import_contacts()" class="btn btn-default" type="button">Import from Gmail</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-show="vm.contacts_imported">
|
|
<h4 class="text-center">Importing Contacts...</h4>
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="30"
|
|
aria-valuemin="0" aria-valuemax="100" style="width:30%">
|
|
<span class="sr-only">30% Complete</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-center">Recent Contacts</h3>
|
|
|
|
<table class="table">
|
|
<tr>
|
|
<td><button ng-click="vm.single_contact = true" class="btn btn-default">View</button></td>
|
|
<td>Best Friend</td>
|
|
<td>best@frind.com</td>
|
|
<td>555-555-5309</td>
|
|
</tr>
|
|
<tr>
|
|
<td><button ng-click="vm.single_contact = true" class="btn btn-default">View</button></td>
|
|
<td>Notbest Friend</td>
|
|
<td>not@best.com</td>
|
|
<td>555-867-5555</td>
|
|
</tr>
|
|
<tr>
|
|
<td><button ng-click="vm.single_contact = true" class="btn btn-default">View</button></td>
|
|
<td>Uncle Ben</td>
|
|
<td>uncle@ben.com</td>
|
|
<td>555-867-1234</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h3 class="text-center">Core to reconnect with these old friends?</h3>
|
|
|
|
<div class="contact-suggest">
|
|
<table class="table">
|
|
<tr>
|
|
<td>John Doe</td>
|
|
<td>john@doe.com</td>
|
|
<td>555-867-5309</td>
|
|
<td>
|
|
<button class="btn btn-sm">Send a message</button>
|
|
<button ng-click="vm.unlock('godfather')" class="btn btn-sm btn-danger">Nah</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bob Smith</td>
|
|
<td>bob@smith.com</td>
|
|
<td>555-867-5308</td>
|
|
<td>
|
|
<button class="btn btn-sm">Send a message</button>
|
|
<button ng-click="vm.unlock('godfather')" class="btn btn-sm btn-danger">Nah</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jane Austin</td>
|
|
<td>jane@austin.com</td>
|
|
<td>555-867-5307</td>
|
|
<td>
|
|
<button class="btn btn-sm">Send a message</button>
|
|
<button ng-click="vm.unlock('godfather')" class="btn btn-sm btn-danger">Nah</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-show="vm.single_contact">
|
|
<div class="contact-single-header">
|
|
<i class="fa fa-user fa-4x"></i>
|
|
<span class="contact-single-name">John Doe</span>
|
|
<div class="contact-single-info">
|
|
<p>john@doe.com</p>
|
|
<p>555-867-5309</p>
|
|
<button class="btn btn-primary">Send a Message</button>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
<br/>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<div ng-init="vm.contact_view = 'messages'" class="flex-row space-around">
|
|
<div ng-click="vm.contact_view = 'messages'">
|
|
<p class="panel-title"><i class="fa fa-users" aria-hidden="true"></i> Conversations</p>
|
|
</div>
|
|
|
|
<span class="seperator">|</span>
|
|
|
|
<div ng-click="vm.contact_view = 'photos'">
|
|
<p class="panel-title"><i class="fa fa-photo" aria-hidden="true"></i> Photos</p>
|
|
</div>
|
|
|
|
<span class="seperator">|</span>
|
|
|
|
<div ng-click="vm.contact_view = 'files'">
|
|
<p class="panel-title"><i class="fa fa-file" aria-hidden="true"></i> Files</p>
|
|
</div>
|
|
|
|
<span class="seperator">|</span>
|
|
|
|
<p class="panel-title"><i class="fa fa-bars" aria-hidden="true"></i> More</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-show="'messages' === vm.contact_view" class="panel-body contact-bordered contact-conversation">
|
|
<p>Me: Hey John, did you know that you are my best friend?</p>
|
|
<p>John: No way! You're my best friend, too!</p>
|
|
<p>Me: Wow! We sure are awesome friends together! :)</p>
|
|
</div>
|
|
<div ng-show="'photos' === vm.contact_view" class="panel-body contact-bordered contact-photos">
|
|
<div class="col-lg-3"><i class="fa fa-4x fa-picture-o"></i></div>
|
|
<div class="col-lg-3"><i class="fa fa-4x fa-file-image-o"></i></div>
|
|
<div class="col-lg-3"><i class="fa fa-4x fa-file-image-o"></i></div>
|
|
<div class="col-lg-3"><i class="fa fa-4x fa-file-image-o"></i></div>
|
|
<div class="col-lg-3"><i class="fa fa-4x fa-picture-o"></i></div>
|
|
<div class="col-lg-3"><i class="fa fa-4x fa-file-image-o"></i></div>
|
|
<div class="col-lg-3"><i class="fa fa-4x fa-picture-o"></i></div>
|
|
</div>
|
|
|
|
<div ng-show="'files' === vm.contact_view" class="panel-body contact-bordered contact-files">
|
|
<div class="contact-file-placeholder">
|
|
<i class="fa fa-file fa-4x"></i>
|
|
<p>filename.ext</p>
|
|
</div>
|
|
<div class="contact-file-placeholder">
|
|
<i class="fa fa-file fa-4x"></i>
|
|
<p>filename.ext</p>
|
|
</div>
|
|
<div class="contact-file-placeholder">
|
|
<i class="fa fa-file fa-4x"></i>
|
|
<p>filename.ext</p>
|
|
</div>
|
|
<div class="contact-file-placeholder">
|
|
<i class="fa fa-file fa-4x"></i>
|
|
<p>filename.ext</p>
|
|
</div>
|
|
<div class="contact-file-placeholder">
|
|
<i class="fa fa-file fa-4x"></i>
|
|
<p>filename.ext</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-success">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Remember when...?</h3>
|
|
</div>
|
|
<div class="panel-body contact-remember-body">
|
|
<div class="remember-item">
|
|
<div class="remember-item-header">Taken Feb 20, 2017</div>
|
|
<div class="remember-img-placeholder">
|
|
<i class="fa fa-photo fa-4x"></i>
|
|
</div>
|
|
</div>
|
|
<div class="remember-item">
|
|
<div class="remember-item-header">Sent on June 5, 2017</div>
|
|
<div class="remember-text-placeholder">
|
|
<p>Hey Jane,</p>
|
|
<p>Love the new do!</p>
|
|
<p>You're so lucky to have great<br/> hair I'm super jealous...</p>
|
|
</div>
|
|
</div>
|
|
<div class="remember-item">
|
|
<div class="remember-item-header">Shared on Ap...</div>
|
|
<div class="remember-music-placeholder">
|
|
<i class="fa fa-music fa-3x"></i>
|
|
<div class="remember-music-text">
|
|
<p>Come Fly with Me</p>
|
|
<p>Frank Sinatra</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|