You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
507 lines
35 KiB
507 lines
35 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Social Feed | Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
|
|
<meta content="Coderthemes" name="author" />
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- App css -->
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
|
|
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
|
|
|
|
</head>
|
|
|
|
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
|
|
<!-- Begin page -->
|
|
<div class="wrapper">
|
|
@@include('./partials/left-sidebar.html')
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start Page Content here -->
|
|
<!-- ============================================================== -->
|
|
|
|
<div class="content-page">
|
|
<div class="content">
|
|
@@include('./partials/topbar.html')
|
|
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box">
|
|
<div class="page-title-right">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">Social</a></li>
|
|
<li class="breadcrumb-item active">Feed</li>
|
|
</ol>
|
|
</div>
|
|
<h4 class="page-title">Social</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
<div class="row">
|
|
<div class="col-xl-3 col-lg-6 order-lg-1 order-xl-1">
|
|
<!-- start profile info -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="dropdown float-right">
|
|
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
|
|
<i class="mdi mdi-dots-horizontal"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Edit Profile</a>
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Settings</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media">
|
|
<img class="d-flex align-self-start rounded mr-2" src="assets/images/users/avatar-5.jpg" alt="Dominic Keller" height="48">
|
|
<div class="media-body">
|
|
<h5 class="mt-1 mb-0">Dominic Keller</h5>
|
|
<p class="mb-1 mt-1 text-muted">California, USA</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-group list-group-flush mt-2">
|
|
<a href="javascript:void(0);" class="list-group-item list-group-item-action text-primary border-0"><i class='uil uil-images mr-1'></i> News Feed</a>
|
|
<a href="javascript:void(0);" class="list-group-item list-group-item-action border-0"><i class='uil uil-comment-alt-message mr-1'></i> Messages</a>
|
|
<a href="javascript:void(0);" class="list-group-item list-group-item-action border-0"><i class='uil uil-calendar-alt mr-1'></i> Events</a>
|
|
<a href="javascript:void(0);" class="list-group-item list-group-item-action border-0"><i class='uil uil-users-alt mr-1'></i> Groups</a>
|
|
<a href="javascript:void(0);" class="list-group-item list-group-item-action border-0"><i class='uil uil-copy mr-1'></i> Pages</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end profile info -->
|
|
|
|
<!-- event info -->
|
|
<div class="card">
|
|
<div class="card-body p-2">
|
|
<div class="list-group list-group-flush my-2">
|
|
<a href="javascript:void(0);" class="list-group-item list-group-item-action border-0"><i class='uil uil-calendar-alt mr-1'></i> 3 events this week</a>
|
|
<a href="javascript:void(0);" class="list-group-item list-group-item-action border-0"><i class='uil uil-calender mr-1'></i> Eva's birthday today</a>
|
|
<a href="javascript:void(0);" class="list-group-item list-group-item-action border-0"><i class='uil uil-bookmark mr-1'></i> Jenny's wedding tomorrow</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end event info -->
|
|
|
|
<!-- news -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="dropdown float-right">
|
|
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
|
|
<i class="mdi mdi-dots-horizontal"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Today</a>
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Yesterday</a>
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Last Week</a>
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Last Month</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="header-title mb-1">Trending</h4>
|
|
|
|
<div class="media mt-3">
|
|
<i class='uil uil-arrow-growth mr-2 font-18 text-primary'></i>
|
|
<div class="media-body">
|
|
<a class="mt-1 font-14" href="javascript:void(0);">
|
|
<strong>Golden Globes:</strong>
|
|
<span class="text-muted">
|
|
The 27 Best moments from the Golden Globe Awards
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media mt-3">
|
|
<i class='uil uil-arrow-growth mr-2 font-18 text-primary'></i>
|
|
<div class="media-body">
|
|
<a class="mt-1 font-14" href="javascript:void(0);">
|
|
<strong>World Cricket:</strong>
|
|
<span class="text-muted">
|
|
India has won ICC T20 World Cup Yesterday
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media mt-3">
|
|
<i class='uil uil-arrow-growth mr-2 font-18 text-primary'></i>
|
|
<div class="media-body">
|
|
<a class="mt-1 font-14" href="javascript:void(0);">
|
|
<strong>Antartica:</strong>
|
|
<span class="text-muted">
|
|
Metling of Totten Glacier could cause high risk to areas near by sea
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- end card-body-->
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col -->
|
|
|
|
<div class="col-xl-6 col-lg-12 order-lg-2 order-xl-1">
|
|
<!-- new post -->
|
|
<div class="card">
|
|
<div class="card-body p-0">
|
|
<ul class="nav nav-tabs nav-bordered">
|
|
<li class="nav-item">
|
|
<a href="#newpost" data-toggle="tab" aria-expanded="false" class="nav-link active px-3 py-2">
|
|
<i class="mdi mdi-pencil-box-multiple font-18 d-md-none d-block"></i>
|
|
<span class="d-none d-md-block">Create Post</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#photo-video" data-toggle="tab" aria-expanded="true" class="nav-link px-3 py-2">
|
|
<i class="mdi mdi-image font-18 d-md-none d-block"></i>
|
|
<span class="d-none d-md-block">Photos/Videos</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#story" data-toggle="tab" aria-expanded="true" class="nav-link px-3 py-2">
|
|
<i class="mdi mdi-book-open-variant font-18 d-md-none d-block"></i>
|
|
<span class="d-none d-md-block">Story</span>
|
|
</a>
|
|
</li>
|
|
</ul> <!-- end nav-->
|
|
<div class="tab-content">
|
|
<div class="tab-pane show active p-3" id="newpost">
|
|
<!-- comment box -->
|
|
<div class="border rounded">
|
|
<form action="#" class="comment-area-box">
|
|
<textarea rows="4" class="form-control border-0 resize-none" placeholder="Write something...."></textarea>
|
|
<div class="p-2 bg-light d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<a href="#" class="btn btn-sm px-2 font-16 btn-light"><i class="uil uil-scenery"></i></a>
|
|
<a href="#" class="btn btn-sm px-2 font-16 btn-light"><i class="uil uil-location"></i></a>
|
|
<a href="#" class="btn btn-sm px-2 font-16 btn-light"><i class="uil uil-paperclip"></i></a>
|
|
</div>
|
|
<button type="submit" class="btn btn-sm btn-success"><i class='uil uil-message mr-1'></i>Post</button>
|
|
</div>
|
|
</form>
|
|
</div> <!-- end .border-->
|
|
<!-- end comment box -->
|
|
</div> <!-- end preview-->
|
|
</div> <!-- end tab-content-->
|
|
</div>
|
|
</div>
|
|
<!-- end new post -->
|
|
|
|
<!-- start news feeds -->
|
|
<div class="card">
|
|
<div class="card-body pb-1">
|
|
<div class="media">
|
|
<img class="mr-2 rounded" src="assets/images/users/avatar-3.jpg" alt="Generic placeholder image" height="32">
|
|
<div class="media-body">
|
|
<div class="dropdown float-right text-muted">
|
|
<a href="#" class="dropdown-toggle arrow-none card-drop"
|
|
data-toggle="dropdown" aria-expanded="false">
|
|
<i class="mdi mdi-dots-horizontal"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Edit</a>
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Delete</a>
|
|
</div>
|
|
</div>
|
|
<h5 class="m-0">Jeremy Tomlinson</h5>
|
|
<p class="text-muted"><small>about 2 minuts ago <span class="mx-1">⚬</span> <span>Public</span></small></p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="m-0" />
|
|
|
|
<div class="font-16 text-center text-dark my-3">
|
|
<i class="mdi mdi-format-quote-open font-20"></i> Leave one wolf alive and the sheep are never safe. When people ask you
|
|
what happened here, tell them the North remembers. Tell them winter came for
|
|
House Frey.
|
|
</div>
|
|
|
|
<hr class="m-0" />
|
|
|
|
<div class="my-1">
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted pl-0"><i class='mdi mdi-heart text-danger'></i> 2k Likes</a>
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted"><i class='uil uil-comments-alt'></i> 200 Comments</a>
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted"><i class='uil uil-share-alt'></i> Share</a>
|
|
</div>
|
|
|
|
<hr class="m-0" />
|
|
|
|
<div class="mt-3">
|
|
<div class="media">
|
|
<img class="mr-2 rounded" src="assets/images/users/avatar-9.jpg" alt="Generic placeholder image" height="32">
|
|
<div class="media-body">
|
|
<h5 class="m-0">Sansa Stark </h5>
|
|
<p class="text-muted mb-0"><small>2 mins ago</small></p>
|
|
|
|
<p class="my-1">This is awesome! Proud of sis :) Waiting for you to
|
|
come back to winterfall</p>
|
|
|
|
<div>
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted p-0">
|
|
<i class='uil uil-heart mr-1'></i> Like
|
|
</a>
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted p-0 pl-2">
|
|
<i class='uil uil-comments-alt mr-1'></i> Reply
|
|
</a>
|
|
</div>
|
|
|
|
<div class="media mt-3">
|
|
<img class="mr-2 rounded" src="assets/images/users/avatar-8.jpg" alt="Generic placeholder image" height="32">
|
|
<div class="media-body">
|
|
<h5 class="m-0">Cersei Lannister </h5>
|
|
<p class="text-muted mb-0"><small>1 min ago</small></p>
|
|
|
|
<p class="my-1">I swear! She won't be able to reach to winterfall</p>
|
|
</div> <!-- end media-body -->
|
|
</div> <!-- end media-->
|
|
</div> <!-- end media-body -->
|
|
</div> <!-- end media-->
|
|
|
|
<hr/>
|
|
|
|
<div class="media mb-2">
|
|
<img src="assets/images/users/avatar-1.jpg" height="32" class="align-self-start rounded mr-2" alt="Arya Stark" />
|
|
<div class="media-body">
|
|
<input type="text" class="form-control border-0 form-control-sm" placeholder="Write a comment">
|
|
</div> <!-- end medi-body -->
|
|
</div> <!-- end media-->
|
|
|
|
</div>
|
|
</div> <!-- end card-body -->
|
|
</div> <!-- end card -->
|
|
|
|
<div class="card">
|
|
<div class="card-body pb-1">
|
|
<div class="media">
|
|
<img class="mr-2 rounded" src="assets/images/users/avatar-5.jpg" alt="Generic placeholder image" height="32">
|
|
<div class="media-body">
|
|
<div class="dropdown float-right text-muted">
|
|
<a href="#" class="dropdown-toggle arrow-none card-drop"
|
|
data-toggle="dropdown" aria-expanded="false">
|
|
<i class="mdi mdi-dots-horizontal"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Edit</a>
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Delete</a>
|
|
</div>
|
|
</div>
|
|
<h5 class="m-0">Jon Snow</h5>
|
|
<p class="text-muted"><small>20 min ago <span class="mx-1">⚬</span> <span>Public</span></small></p>
|
|
</div> <!-- end media body-->
|
|
</div> <!-- end media -->
|
|
|
|
<hr class="m-0"/>
|
|
|
|
<div class="my-3">
|
|
<p>"Feeling awesome at the wall!"</p>
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<img src="assets/images/small/small-4.jpg" alt="post-img" class="rounded mr-1 mb-3 mb-sm-0 img-fluid"/>
|
|
</div>
|
|
<div class="col">
|
|
<img src="assets/images/small/small-2.jpg" alt="post-img" class="rounded mr-1 img-fluid mb-3" />
|
|
<img src="assets/images/small/small-3.jpg" alt="post-img" class="rounded mr-1 img-fluid" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-1 mb-1">
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted pl-0"><i class='mdi mdi-heart text-danger'></i> 1.2k Likes</a>
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted"><i class='uil uil-comments-alt'></i> 148 Comments</a>
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted"><i class='uil uil-share-alt'></i> Share</a>
|
|
</div>
|
|
<hr class="m-0" />
|
|
|
|
<div class="mt-3">
|
|
<div class="media">
|
|
<img class="mr-2 rounded" src="assets/images/users/avatar-9.jpg" alt="Generic placeholder image" height="32">
|
|
<div class="media-body">
|
|
<h5 class="m-0">Sansa Stark </h5>
|
|
<p class="text-muted mb-0"><small>2 mins ago</small></p>
|
|
|
|
<p class="my-1">This is awesome! Proud of sis :) Waiting for you to
|
|
come back to winterfall</p>
|
|
|
|
<div>
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted p-0">
|
|
<i class='uil uil-heart mr-1'></i> Like
|
|
</a>
|
|
<a href="javascript: void(0);" class="btn btn-sm btn-link text-muted p-0 pl-2">
|
|
<i class='uil uil-comments-alt mr-1'></i> Reply
|
|
</a>
|
|
</div>
|
|
</div> <!-- end media-body -->
|
|
</div> <!-- end media-->
|
|
|
|
<hr/>
|
|
|
|
<div class="media mb-2">
|
|
<img src="assets/images/users/avatar-1.jpg" height="32" class="align-self-start rounded mr-2" alt="Arya Stark" />
|
|
<div class="media-body">
|
|
<input type="text" class="form-control border-0 form-control-sm" placeholder="Write a comment">
|
|
</div> <!-- end medi-body -->
|
|
</div> <!-- end media-->
|
|
</div>
|
|
</div> <!-- end card-body -->
|
|
</div> <!-- end card -->
|
|
<!-- end news feeds -->
|
|
|
|
<!-- loader -->
|
|
<div class="text-center mb-3">
|
|
<a href="javascript:void(0);" class="text-danger"><i class="mdi mdi-spin mdi-loading mr-1 font-16"></i> Load more </a>
|
|
</div>
|
|
<!-- end loader -->
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-lg-6 order-lg-1 order-xl-2">
|
|
<!-- video -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="dropdown float-right">
|
|
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown"
|
|
aria-expanded="false">
|
|
<i class="mdi mdi-dots-horizontal"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Today</a>
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Yesterday</a>
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Last Week</a>
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">Last Month</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="header-title mb-1">Featured Video For You</h4>
|
|
|
|
<div class="mt-3">
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9_eqq0HlN9g?autohide=0&showinfo=0&controls=0"></iframe>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card-body -->
|
|
</div>
|
|
<!-- end video -->
|
|
|
|
<!-- video -->
|
|
<div class="card">
|
|
<div class="card-body pb-0">
|
|
<div class="dropdown float-right">
|
|
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown"
|
|
aria-expanded="false">
|
|
<i class="mdi mdi-dots-horizontal"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item">View All</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="header-title mb-3">People you may know</h4>
|
|
|
|
<div class="inbox-widget">
|
|
<div class="inbox-item">
|
|
<div class="inbox-item-img"><img src="assets/images/users/avatar-2.jpg" class="rounded-circle" alt=""></div>
|
|
<p class="inbox-item-author">Robb Stark</p>
|
|
<p class="inbox-item-text">The first king in the North</p>
|
|
<p class="inbox-item-date">
|
|
<button type="button" class="btn btn-sm btn-outline-primary px-1 py-0"> <i class='uil uil-user-plus font-16'></i> </button>
|
|
</p>
|
|
</div>
|
|
<div class="inbox-item">
|
|
<div class="inbox-item-img"><img src="assets/images/users/avatar-3.jpg" class="rounded-circle" alt=""></div>
|
|
<p class="inbox-item-author">Stillnot David </p>
|
|
<p class="inbox-item-text">Lady of winterfall</p>
|
|
<p class="inbox-item-date">
|
|
<button type="button" class="btn btn-sm btn-outline-primary px-1 py-0"> <i class='uil uil-user-plus font-16'></i> </button>
|
|
</p>
|
|
</div>
|
|
<div class="inbox-item">
|
|
<div class="inbox-item-img"><img src="assets/images/users/avatar-4.jpg" class="rounded-circle" alt=""></div>
|
|
<p class="inbox-item-author">Cersei Lannister</p>
|
|
<p class="inbox-item-text">Queen of the Seven Kingdoms</p>
|
|
<p class="inbox-item-date">
|
|
<button type="button" class="btn btn-sm btn-outline-primary px-1 py-0"> <i class='uil uil-user-plus font-16'></i> </button>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="inbox-item">
|
|
<div class="inbox-item-img"><img src="assets/images/users/avatar-5.jpg" class="rounded-circle" alt=""></div>
|
|
<p class="inbox-item-author">Daenerys Targaryen</p>
|
|
<p class="inbox-item-text">Hey! there I'm available...</p>
|
|
<p class="inbox-item-date">
|
|
<button type="button" class="btn btn-sm btn-outline-primary px-1 py-0"> <i class='uil uil-user-plus font-16'></i> </button>
|
|
</p>
|
|
</div>
|
|
<div class="inbox-item">
|
|
<div class="inbox-item-img"><img src="assets/images/users/avatar-6.jpg" class="rounded-circle" alt=""></div>
|
|
<p class="inbox-item-author">Adhamd Annaway</p>
|
|
<p class="inbox-item-text">Queen Daenerys</p>
|
|
<p class="inbox-item-date">
|
|
<button type="button" class="btn btn-sm btn-outline-primary px-1 py-0"> <i class='uil uil-user-plus font-16'></i> </button>
|
|
</p>
|
|
</div>
|
|
</div> <!-- end inbox-widget -->
|
|
|
|
<div class="mt-2 mb-3 text-center">
|
|
<a href="">View More<i class='uil uil-arrow-right ml-1'></i></a>
|
|
</div>
|
|
|
|
</div> <!-- end card-body -->
|
|
</div>
|
|
<!-- end video -->
|
|
</div> <!-- end col -->
|
|
</div> <!--end row -->
|
|
|
|
</div> <!-- container -->
|
|
|
|
</div> <!-- content -->
|
|
|
|
@@include('./partials/footer.html')
|
|
|
|
</div>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- End Page content -->
|
|
<!-- ============================================================== -->
|
|
|
|
|
|
</div>
|
|
<!-- END wrapper -->
|
|
|
|
|
|
@@include('./partials/right-sidebar.html')
|
|
|
|
|
|
<!-- bundle -->
|
|
<script src="assets/js/vendor.min.js"></script>
|
|
<script src="assets/js/app.min.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|