123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383 |
- <template>
- <main>
- <!-- Header -->
- <SiteHeader pageId="profile" />
- <!-- Page Section -->
- <section class="content">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-3">
- <!-- Profile Image -->
- <div class="card card-primary card-outline">
- <div class="card-body box-profile">
- <div class="text-center">
- <img class="profile-user-img img-fluid img-circle"
- src="@/assets/img/user4-128x128.jpg"
- alt="User profile picture">
- </div>
- <h3 class="profile-username text-center">Nina Mcintire ({{profileId}})</h3>
- <p class="text-center">Software Engineer</p>
- <ul class="list-group list-group-unbordered mb-3">
- <li class="list-group-item">
- <b>Followers</b> <a class="float-right">1,322</a>
- </li>
- <li class="list-group-item">
- <b>Following</b> <a class="float-right">543</a>
- </li>
- <li class="list-group-item">
- <b>Friends</b> <a class="float-right">13,287</a>
- </li>
- </ul>
- <a href="javascript://" class="btn btn-primary btn-block"><b>Follow</b></a>
- </div>
- </div>
- <!-- About Me Box -->
- <div class="card card-primary">
- <div class="card-header">
- <h3 class="card-title">About Me</h3>
- </div>
- <!-- /.card-header -->
- <div class="card-body">
- <strong><i class="fas fa-book mr-1"></i> Education</strong>
- <p class="text-muted">
- B.S. in Computer Science from the University of Tennessee at Knoxville
- </p>
- <hr>
- <strong><i class="fas fa-map-marker-alt mr-1"></i> Location</strong>
- <p class="text-muted">Malibu, California</p>
- <hr>
- <strong><i class="fas fa-pencil-alt mr-1"></i> Skills</strong>
- <p class="text-muted">
- <span class="tag tag-danger">UI Design</span>
- <span class="tag tag-success">Coding</span>
- <span class="tag tag-info">Javascript</span>
- <span class="tag tag-warning">PHP</span>
- <span class="tag tag-primary">Node.js</span>
- </p>
- <hr>
- <strong><i class="far fa-file-alt mr-1"></i> Notes</strong>
- <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</p>
- </div>
- </div>
- </div>
- <div class="col-md-9">
- <div class="card">
- <div class="card-header p-2">
- <ul class="nav nav-pills">
- <li class="nav-item"><a class="nav-link active" href="#activity" data-toggle="tab">Activity</a></li>
- <li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Timeline</a></li>
- <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a></li>
- </ul>
- </div><!-- /.card-header -->
- <div class="card-body">
- <div class="tab-content">
- <div class="active tab-pane" id="activity">
- <!-- Post -->
- <div class="post">
- <div class="user-block">
- <img class="img-circle img-bordered-sm" src="@/assets/img/user1-128x128.jpg" alt="user image">
- <span class="username">
- <a href="javascript://">Jonathan Burke Jr.</a>
- <a href="javascript://" class="float-right btn-tool"><i class="fas fa-times"></i></a>
- </span>
- <span class="description">Shared publicly - 7:30 PM today</span>
- </div>
- <!-- /.user-block -->
- <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="javascript://" class="link-black text-sm mr-2"><i class="fas fa-share mr-1"></i> Share</a>
- <a href="javascript://" class="link-black text-sm"><i class="far fa-thumbs-up mr-1"></i> Like</a>
- <span class="float-right">
- <a href="javascript://" 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>
- <div class="post clearfix">
- <div class="user-block">
- <img class="img-circle img-bordered-sm" src="@/assets/img/user3-128x128.jpg" alt="User Image">
- <span class="username">
- <a href="javascript://">Sarah Ross</a>
- <a href="javascript://" class="float-right btn-tool"><i class="fas fa-times"></i></a>
- </span>
- <span class="description">Sent you a message - 3 days ago</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>
- <form class="form-horizontal">
- <div class="input-group input-group-sm mb-0">
- <input class="form-control form-control-sm" placeholder="Response">
- <div class="input-group-append">
- <button type="submit" class="btn btn-danger">Send</button>
- </div>
- </div>
- </form>
- </div>
- <div class="post">
- <div class="user-block">
- <img class="img-circle img-bordered-sm" src="@/assets/img/user5-128x128.jpg" alt="User Image">
- <span class="username">
- <a href="javascript://">Adam Jones</a>
- <a href="javascript://" class="float-right btn-tool"><i class="fas fa-times"></i></a>
- </span>
- <span class="description">Posted 5 photos - 5 days ago</span>
- </div>
- <div class="row mb-3">
- <div class="col-sm-6">
- <img class="img-fluid" src="@/assets/img/photo1.png" alt="Photo">
- </div>
- <div class="col-sm-6">
- <div class="row">
- <div class="col-sm-6">
- <img class="img-fluid mb-3" src="@/assets/img/photo2.png" alt="Photo">
- <img class="img-fluid" src="@/assets/img/photo3.jpg" alt="Photo">
- </div>
- <!-- /.col -->
- <div class="col-sm-6">
- <img class="img-fluid mb-3" src="@/assets/img/photo4.jpg" alt="Photo">
- <img class="img-fluid" src="@/assets/img/photo1.png" alt="Photo">
- </div>
- <!-- /.col -->
- </div>
- <!-- /.row -->
- </div>
- <!-- /.col -->
- </div>
- <!-- /.row -->
- <p>
- <a href="javascript://" class="link-black text-sm mr-2"><i class="fas fa-share mr-1"></i> Share</a>
- <a href="javascript://" class="link-black text-sm"><i class="far fa-thumbs-up mr-1"></i> Like</a>
- <span class="float-right">
- <a href="javascript://" 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>
- <!-- /.post -->
- </div>
- <!-- /.tab-pane -->
- <div class="tab-pane" id="timeline">
- <!-- The timeline -->
- <div class="timeline timeline-inverse">
- <!-- timeline time label -->
- <div class="time-label">
- <span class="bg-danger">
- 10 Feb. 2014
- </span>
- </div>
- <!-- /.timeline-label -->
- <!-- timeline item -->
- <div>
- <i class="fas fa-envelope bg-primary"></i>
- <div class="timeline-item">
- <span class="time"><i class="far fa-clock"></i> 12:05</span>
- <h3 class="timeline-header"><a href="javascript://">Support Team</a> sent you an email</h3>
- <div class="timeline-body">
- Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
- weebly ning heekya handango imeem plugg dopplr jibjab, movity
- jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
- quora plaxo ideeli hulu weebly balihoo...
- </div>
- <div class="timeline-footer">
- <a href="javascript://" class="btn btn-primary btn-sm">Read more</a>
- <a href="javascript://" class="btn btn-danger btn-sm">Delete</a>
- </div>
- </div>
- </div>
- <!-- END timeline item -->
- <!-- timeline item -->
- <div>
- <i class="fas fa-user bg-info"></i>
- <div class="timeline-item">
- <span class="time"><i class="far fa-clock"></i> 5 mins ago</span>
- <h3 class="timeline-header border-0"><a href="javascript://">Sarah Young</a> accepted your friend request
- </h3>
- </div>
- </div>
- <!-- END timeline item -->
- <!-- timeline item -->
- <div>
- <i class="fas fa-comments bg-warning"></i>
- <div class="timeline-item">
- <span class="time"><i class="far fa-clock"></i> 27 mins ago</span>
- <h3 class="timeline-header"><a href="javascript://">Jay White</a> commented on your post</h3>
- <div class="timeline-body">
- Take me to your leader!
- Switzerland is small and neutral!
- We are more like Germany, ambitious and misunderstood!
- </div>
- <div class="timeline-footer">
- <a href="javascript://" class="btn btn-warning btn-flat btn-sm">View comment</a>
- </div>
- </div>
- </div>
- <!-- END timeline item -->
- <!-- timeline time label -->
- <div class="time-label">
- <span class="bg-success">
- 3 Jan. 2014
- </span>
- </div>
- <!-- /.timeline-label -->
- <!-- timeline item -->
- <div>
- <i class="fas fa-camera bg-purple"></i>
- <div class="timeline-item">
- <span class="time"><i class="far fa-clock"></i> 2 days ago</span>
- <h3 class="timeline-header"><a href="javascript://">Mina Lee</a> uploaded new photos</h3>
- <div class="timeline-body">
- <img src="http://placehold.it/150x100" alt="...">
- <img src="http://placehold.it/150x100" alt="...">
- <img src="http://placehold.it/150x100" alt="...">
- <img src="http://placehold.it/150x100" alt="...">
- </div>
- </div>
- </div>
- <!-- END timeline item -->
- <div>
- <i class="far fa-clock bg-gray"></i>
- </div>
- </div>
- </div>
- <!-- /.tab-pane -->
- <div class="tab-pane" id="settings">
- <form class="form-horizontal">
- <div class="form-group row">
- <label for="inputName" class="col-sm-2 col-form-label">Name</label>
- <div class="col-sm-10">
- <input type="email" class="form-control" id="inputName" placeholder="Name">
- </div>
- </div>
- <div class="form-group row">
- <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
- <div class="col-sm-10">
- <input type="email" class="form-control" id="inputEmail" placeholder="Email">
- </div>
- </div>
- <div class="form-group row">
- <label for="inputName2" class="col-sm-2 col-form-label">Name</label>
- <div class="col-sm-10">
- <input type="text" class="form-control" id="inputName2" placeholder="Name">
- </div>
- </div>
- <div class="form-group row">
- <label for="inputExperience" class="col-sm-2 col-form-label">Experience</label>
- <div class="col-sm-10">
- <textarea class="form-control" id="inputExperience" placeholder="Experience"></textarea>
- </div>
- </div>
- <div class="form-group row">
- <label for="inputSkills" class="col-sm-2 col-form-label">Skills</label>
- <div class="col-sm-10">
- <input type="text" class="form-control" id="inputSkills" placeholder="Skills">
- </div>
- </div>
- <div class="form-group row">
- <div class="offset-sm-2 col-sm-10">
- <div class="checkbox">
- <label>
- <input type="checkbox"> I agree to the <a href="javascript://">terms and conditions</a>
- </label>
- </div>
- </div>
- </div>
- <div class="form-group row">
- <div class="offset-sm-2 col-sm-10">
- <button type="submit" class="btn btn-danger">Submit</button>
- </div>
- </div>
- </form>
- </div>
- <!-- /.tab-pane -->
- </div>
- <!-- /.tab-content -->
- </div><!-- /.card-body -->
- </div>
- <!-- /.nav-tabs-custom -->
- </div>
- <!-- /.col -->
- </div>
- <!-- /.row -->
- </div><!-- /.container-fluid -->
- </section>
- </main>
- </template>
- <script>
- export default {
- props: {
- // profileId: Number,
- },
- data: () => {
- return {
- profileId: null,
- }
- },
- created: function () {
- /* Set profile id. */
- this.profileId = this.$route.params.profileId
- },
- mounted: function () {
- //
- },
- }
- </script>
|