aboutsummaryrefslogtreecommitdiff
path: root/user_profile_alt.html
diff options
context:
space:
mode:
authorHumairAK <humair88@hotmail.com>2016-07-12 11:06:34 +0000
committerHumairAK <humair88@hotmail.com>2016-07-12 11:06:34 +0000
commit6403839ff9e3c683ea01a5f96f6bad0af14c397d (patch)
tree1e5403736d12d1d0fe58c34b4e831fbcbd234a01 /user_profile_alt.html
parent0e8a122da032679b1fb53487169f857dfdfb8b47 (diff)
Added various additions to user-profile, added new styles to creative.css (minor), added styles to custom stylesheet (minor)
Diffstat (limited to 'user_profile_alt.html')
-rw-r--r--user_profile_alt.html317
1 files changed, 214 insertions, 103 deletions
diff --git a/user_profile_alt.html b/user_profile_alt.html
index f152761..dee5962 100644
--- a/user_profile_alt.html
+++ b/user_profile_alt.html
@@ -21,6 +21,7 @@
<!--JS-->
<script src="assets/js/jquery-2.2.4.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
+ <script src="assets/js/script.js"></script>
</head>
<body>
@@ -74,118 +75,53 @@
</nav>
<main id="solutions-main">
- <!--made the id in to a class-->
-
- <!--<div class="container">
- <div class="row">
- <section id="user-profile-content" class="col-md-1">
- <section id="user-menu-container">
- <section id="user-menu">
- <div id="user-avatar">
- <img src="assets/images/avatar.png" alt="avatar">
- </div>
- <div id="user-photo-edit">
- <button class="menu-button menu-button-first menu-button-last"
- id="bt-edit-photo">Edit Photo</button>
- </div>
- <div id="user-options">
- <button class="menu-button-first" id="bt-general">General info</button>
- <button class="menu-button" id="bt-follows">Follows</button>
- <button class="menu-button" id="bt-friends">Friends</button>
- <button class="menu-button" id="bt-inbox">Inbox</button>
- <button class="menu-button-last" id="bt-history">Comment History</button>
- </div>
- </section>
-
- </section>
- <section id="user-info-container" class="col-md-11">
-
- <div id="user-info">
- <div id="user-name">
- <h1>Walter White</h1>
- </div>
-
- <div id="user-content">
- <h2>Account info:</h2>
- <p><em>Username:</em><span id="edit-name">theSmith1985</span></p>
-
- <p><em>e-mail:</em><span id="edit-email">smithy@gmail.com</span></p>
- <h2>Personal Info: </h2>
- <p><em>First name:</em><span id="edit-fname">Walter</span></p>
- <p><em>Last name:</em><span id="edit-lname">White</span></p>
- <p><em>University:</em><span id="edit-uni">University of Toronto</span></p>
- <p><em>Campus:</em><span id="edit-camp">St. George</span></p>
- <p><em>Program:</em><span id="edit-prog">Computer Science</span></p>
- <p><em>Age:</em><span id="edit-age">50</span></p>
- </div>
- <button class="edit-button" style="vertical-align:middle"><span>Edit Personal Info </span></button>
- </div>
- </section>
- </section>
-
- </div>
- </div>-->
-
-
- <!--Attempt to apply bootstrap to it Failed :(-->
- <!-- <div class="container">
- <div class="row" style="width: 60%; padding-left: 15%; padding-right: 15%">
- <div class="col-md-3">
- <img src="assets/images/avatar.png" alt="avatar">
- <div class="btn-group-vertical">
- <button type="button" class="btn btn-primary">Edit Photo</button>
- <button type="button" class="btn btn-primary">General info</button>
- <button type="button" class="btn btn-primary">Follows</button>
- <button type="button" class="btn btn-primary">Friends</button>
- <button type="button" class="btn btn-primary">Inbox</button>
- <button type="button" class="btn btn-primary">Comment History</button>
- </div>
- </div>
- <div class="col-lg-9">
-
- &lt;!&ndash; <h1>Walter White</h1>
- <h2>Account info:</h2>
-
- <p><em>Username:</em><span id="edit-name">theSmith1985</span></p>
-
- <p><em>e-mail:</em><span id="edit-email">smithy@gmail.com</span></p>
- <h2>Personal Info: </h2>
- <p><em>First name:</em><span id="edit-fname">Walter</span></p>
- <p><em>Last name:</em><span id="edit-lname">White</span></p>
- <p><em>University:</em><span id="edit-uni">University of Toronto</span></p>
- <p><em>Campus:</em><span id="edit-camp">St. George</span></p>
- <p><em>Program:</em><span id="edit-prog">Computer Science</span></p>
- <p><em>Age:</em><span id="edit-age">50</span></p>
-
- <button class="edit-button" style="vertical-align:middle"><span>Edit Personal Info </span></button>
-&ndash;&gt;
-
- </div>
+ <div class="container user-info-content">
+ <div class="row">
- </div>
+ <!-- User Profile details -->
+ <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0
+ col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad">
+
+ <!-- User Profile Menu -->
+ <nav class="navbar navbar-custom">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle"
+ data-toggle="collapse" data-target="#profile-nav">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ </div>
+ <div class="collapse navbar-collapse" id="profile-nav">
+ <ul class="nav navbar-nav " >
+ <li><a href="#" class="prf-page">General</a></li>
+ <li><a href="#" class="prf-page">Follows</a></li>
+ <li><a href="#" class="prf-page">Friends</a></li>
+ <li><a href="#" class="prf-page">Inbox</a></li>
+ <li><a href="#" class="prf-page">Comments</a></li>
+ </ul>
+ </div>
- </div>-->
+ </div>
+ </nav>
- <div class="container">
- <div class="row">
- <div class="col-md-5 toppad pull-right col-md-offset-3 ">
- <a href="#">Edit Profile</a>
- <a href="#">Logout</a>
- <br>
- <p class=" text-info"> July 4 2016 </p>
- </div>
- <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad" >
<div class="rounded">
<div class="panel panel-info rounded">
<div class="panel-heading">
<h3 class="panel-title">Walter White</h3>
</div>
- <div class="panel-body">
- <div class="row">
- <div class="col-md-3 col-lg-3 " align="center"> <img alt="User Pic" src="assets/images/avatar.png" class="img-circle img-responsive"> </div>
+ <div class="panel-body" >
+
+ <!------------ User-Profile Pages ------------>
+ <div class="row" id="profile-general">
+ <div class="col-md-3 col-lg-3 " align="center">
+ <img alt="User Pic" src="assets/images/avatar.png"
+ class="img-circle img-responsive">
+ </div>
<div class=" col-md-9 col-lg-9 ">
<table class="table table-user-information">
@@ -227,15 +163,190 @@
</div>
</div>
+
+ <div class="row" id="profile-follows">
+
+ <h3>You are following:</h3>
+ <div class="col-xs-offset-1 col-sm-offset-3 col-xs-10 col-sm-6">
+ <table class="table-condensed">
+ <tbody>
+ <tr>
+ <th>
+ <img class="img-circle img-responsive"
+ src="assets/images/misc/user1.jpeg" alt="avatar">
+ </th>
+ <th>
+ <h4>The Dude</h4>
+ <p>3 comments</p>
+ </th>
+
+ </tr>
+ <tr>
+ <th>
+ <img class="img-circle img-responsive"
+ src="assets/images/misc/user2.jpeg" alt="avatar">
+ </th>
+ <th>
+ <h4>He-Man</h4>
+ <p>20 comments</p>
+ </th>
+ </tr>
+ <tr>
+ <th>
+ <img class="img-circle img-responsive"
+ src="assets/images/misc/user3.jpeg" alt="avatar">
+ </th>
+ <th>
+ <h4>Lady Lips</h4>
+ <p>56 comments</p>
+ </th>
+ </tr>
+ </tbody>
+
+ </table>
+ </div>
+
+
+ </div>
+
+ <div class="row" id="profile-friends">
+
+ <h3>Friends</h3>
+ <div class="col-xs-offset-1 col-sm-offset-3 col-xs-10 col-sm-6">
+ <table class="table-condensed">
+ <tbody>
+ <tr>
+ <th>
+ <img class="img-circle img-responsive"
+ src="assets/images/misc/user2.jpeg" alt="avatar">
+ </th>
+ <th>
+ <h4>He-Man</h4>
+ <p>20 comments</p>
+ </th>
+
+ </tr>
+ <tr>
+ <th>
+ <img class="img-circle img-responsive"
+ src="assets/images/misc/user5.jpeg" alt="avatar">
+ </th>
+ <th>
+ <h4>Jay Leno</h4>
+ <p>5 comments</p>
+ </th>
+ </tr>
+ <tr>
+ <th>
+ <img class="img-circle img-responsive"
+ src="assets/images/misc/user6.jpeg" alt="avatar">
+ </th>
+ <th>
+ <h4>Lisa Simpson</h4>
+ <p>658 comments</p>
+ </th>
+ </tr>
+ </tbody>
+
+ </table>
+ </div>
+
+
+ </div>
+
+ <div class="row" id="profile-inbox">
+ <h3>Inbox</h3>
+ <div class="col-sm-10 col-sm-offset-1 prf-tables">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Date</th>
+ <th>Subject</th>
+ <th>Sender</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>2016-05-01</td>
+ <td>Great Solution!1</td>
+ <td>The Dude</td>
+ </tr>
+ <tr>
+ <td>2016-04-05</td>
+ <td>Woah look at this</td>
+ <td>Lady Lips</td>
+ </tr>
+ <tr>
+ <td>2016-02-30</td>
+ <td>I don't get this, help!</td>
+ <td>The Dude</td>
+ </tr>
+ <tr>
+ <td>2016-01-15</td>
+ <td>I solved your problem</td>
+ <td>Lisa</td>
+ </tr>
+ </tbody>
+
+ </table>
+ </div>
+
+ </div>
+
+ <div class="row" id="profile-comments">
+ <h3>Comment History</h3>
+ <div class="col-sm-10 col-sm-offset-1 prf-tables">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Date</th>
+ <th>Comment</th>
+ <th>Exam</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>2016-05-01</td>
+ <td>Use BFS! Not DFS!</td>
+ <td>CSC148 > Winter 2014</td>
+ </tr>
+ <tr>
+ <td>2016-04-05</td>
+ <td>Use a heap!</td>
+ <td>CSC263 > Fall 2015</td>
+ </tr>
+ <tr>
+ <td>2016-02-30</td>
+ <td>I love python!</td>
+ <td>CSC108 > Winter 2015</td>
+ </tr>
+ <tr>
+ <td>2016-01-15</td>
+ <td>I hate verilog!</td>
+ <td>CSC258 > Fall 2015</td>
+ </tr>
+ </tbody>
+
+ </table>
+ </div>
+ </div>
+
+ <!-- Date, Edit, Logout (new row) -->
+ <div class="col-md-12 prf-sign-off">
+ <p class=" text-info"> July 4 2016 </p>
+ <a href="#">Edit Profile</a>
+ <a href="#">Logout</a>
+ <br>
+
+ </div>
</div>
+
</div>
</div>
</div>
</div>
</div>
-
-
</main>
<footer>
generated by cgit v1.2.3 (git 2.25.1) at 2026-08-02 09:27:42 +0000