Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/crm-dashboard-wip.markdown

Created September 13, 2023 22:06
Show Gist options
  • Save neisdev/e3385e1e4b63d33cfdcc5e4a677d6407 to your computer and use it in GitHub Desktop.
Save neisdev/e3385e1e4b63d33cfdcc5e4a677d6407 to your computer and use it in GitHub Desktop.
Download ZIP
CRM Dashboard - WIP
Raw
index.html
<div class="row">
<div id="sidebar" class="col s2">
<div class="title">
<h1 class="left"><i class="fa fa-cloud prefix"></i> AgileCRM</h1>
<a href="#!" class="right"><i class="fa fa-bars"></i></a>
</div>
<div class="clearfix"></div>
<ul class="menu">
<li class="title">
<h2><span class="suffix">Sales</span> <i class="fa fa-caret-up right"></i></h2>
</li>
<li><i class="fa fa-home"></i> Home</li>
<li class="active"><i class="fa fa-users"></i> Contacts</li>
<li><i class="fa fa-building"></i> Companies</li>
<li><i class="fa fa-comments"></i> Deals</li>
<li><i class="fa fa-briefcase"></i> Cases</li>
<li><i class="fa fa-file"></i> Documents</li>
</ul>
<ul class="menu2">
<li>Marketing <i class="fa fa-caret-down right"></i></li>
<li>Services <i class="fa fa-caret-down right"></i></li>
</ul>
</div><!-- .s4 sidebar -->
<div id="content" class="col s10 offset-s2">
<div class="row">
<div id="content_nav" class="col s12">
<form>
<div class="input-field">
<input id="search" type="search" placeholder="Type in to Search..." required>
<label for="search"><i class="fa fa-search"></i></label>
</div>
</form>
<i class="fa fa-bar-chart"></i>
<div class="nav_header right">
<li>
<a href="#!">
<i class="fa fa-plus"></i> Add
</a>
</li>
<li>
<a href="#!">
<i class="fa fa-pie-chart"></i>
</a>
</li>
<li>
<a href="#!">
<img src="http://media.lemeilleurjobdete.com/uploads/4185/profil-1437318519.jpg" alt="profile_pic" />
<i class="fa fa-caret-down"></i>
</a>
</li>
<li>
<a href="#!"><i class="fa fa-bell"></i></a>
</li>
</div>
</div>
</div>
<div class="row">
<div id="subnav" class="col s12">
<div class="nav_arrows left">
<a href="#!"><i class="fa fa-caret-left"></i></a>
<a href="#!"><i class="fa fa-caret-right"></i></a>
</div>
<div class="nav_buttons right">
<a href="#!" class="btn btn-flat blue lighten-5 blue-text text-lighten-1"><i class="fa fa-envelope prefix"></i> Send email</a>
<a href="#!" class="btn btn-flat blue white-text"><i class="fa fa-ellipsis-h right"></i> Actions</a>
</div>
</div>
</div>
<div class="row">
<div id="profile" class="col s4">
<div class="profile_header">
<img src="https://lh3.googleusercontent.com/-P_cpGe3NM1Q/AAAAAAAAAAI/AAAAAAAAAAA/gYOuFmMJ28g/photo.jpg" alt="profile_picture" />
<h2>Claudia Mills</h2>
<p>Product Manager @Technocore</p>
<ul>
<li>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star star-disabled"></i>
</li>
<li>
<p class="stats"><i class="fa fa-fire"></i> 128</p>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="profile_information">
<h3>Contact Information</h3>
<ul>
<li>
<h4>Email Address:</h4>
<p>[email protected]</p>
</li>
<li>
<h4>Phone Number:</h4>
<p>+919533480654</p>
</li>
<li>
<h4>Address:</h4>
<p>West End 45th Street, San Francisco<br/>90123 California, US</p>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="profile_custom">
<h3>Custom Information</h3>
<ul>
<li>
<h4>Facebook:</h4>
<p>facebook.com/caludiamills</p>
</li>
<li>
<h4>Personal Phone Number:</h4>
<p>+919533480564</p>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="profile_tags">
<h3>Tags</h3>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
</div>
<div class="profile_owner">
<img src="https://www2.mmu.ac.uk/media/mmuacuk/content/images/health-professions/student-profile-simone-bianchi-piantini.jpg" width="30px" alt="owner_picture" class="left" />
<p>
<span>Owner: </span>
Mark Hansen
</p>
</div>
</div>
<div id="profile_content" class="col s8">
<nav>
<ul>
<li class="tab">
<a href="#timeline">
Timeline
</a>
</li>
<li class="tab">
<a href="#Notes" class="active">
Notes
</a>
</li>
<li class="tab">
<a href="#events">
Events
</a>
</li>
<li class="tab">
<a href="#tasks">
Tasks
</a>
</li>
<li class="tab">
<a href="#deals">
Deals
</a>
</li>
<li class="tab">
<a href="#campaigns">
Campaigns
</a>
</li>
<li class="tab">
<a href="#webstats">
Web Stats
</a>
</li>
<li class="tab">
<a href="#mail">
Mail
</a>
</li>
<li class="tab">
<a href="#documents">
Documents
</a>
</li>
</ul>
<div class="nav_arrows">
<a href="#!"><i class="fa fa-caret-left"></i></a>
<a href="#!"><i class="fa fa-caret-right"></i></a>
</div>
</nav>
<div class="profile-content">
<div class="row">
<div class="content-header">
<h3 class="left">Notes (7)</h3>
<a href="#!" class="btn btn-flat blue lighten-5 blue-text text-lighten-1 right"><i class="fa fa-caret-down right"></i> Add</a>
</div>
</div>
<div class="row">
<ul class="notes">
<li class="note">
<img src="http://www4.csudh.edu/Assets/CSUDH-Sites/History/images/Faculty-Profile-Pictures/Faculty%20Male%20Default%20Profile%20Picture.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Ut molestiae, aperiam aspernatur. <a href="#!">@Chris</a>
</p>
<span>32 days ago</span>
</div>
</li>
<li class="note">
<img src="http://orig02.deviantart.net/d20f/f/2012/057/3/c/profile_picture_by_bdeatcher-d4r1sur.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae, aperiam ipsum dolor sit amet, consectetur adipisicing <a href="#!">#hash</a> <a href="#!">#tag</a> <a href="#!">#url</a> corrupti voluptates.
</p>
<span>33 days ago</span>
</div>
</li>
<li class="note">
<img src="http://netdna.walyou.netdna-cdn.com/wp-content/uploads//2010/12/facebook-profile-picture-baby-pic-avatar.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Ut molestiae, aperiam aspernatur. <a href="#!">@Chris</a>
</p>
<span>32 days ago</span>
</div>
</li>
<li class="note">
<img src="https://justinjackson.ca/wp-content/uploads/2008/08/justin-jackson-profile-smile-selfie.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae, aperiam ipsum dolor sit amet, consectetur adipisicing <a href="#!">#hash</a> <a href="#!">#tag</a> <a href="#!">#url</a> corrupti voluptates.
</p>
<span>33 days ago</span>
</div>
</li>
<li class="note">
<img src="http://54.165.17.179/assets/images/people/tiles/karlene-quigley-large.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Ut molestiae, aperiam aspernatur. <a href="#!">@Chris</a>
</p>
<span>32 days ago</span>
</div>
</li>
<li class="note">
<img src="http://www.gantrypark.com/Portals/12/Users/066/14/53314/adam-parker-large.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae, aperiam ipsum dolor sit amet, consectetur adipisicing <a href="#!">#hash</a> <a href="#!">#tag</a> <a href="#!">#url</a> corrupti voluptates.
</p>
<span>33 days ago</span>
</div>
</li>
<li class="note">
<img src="https://thumbs.dreamstime.com/z/beautiful-profile-face-young-woman-clean-fresh-skin-40988715.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Ut molestiae, aperiam aspernatur. <a href="#!">@Chris</a>
</p>
<span>32 days ago</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div><!-- .row profile -->
<footer class="row">
<div class="col s4">
<div class="panel">
<h4>
<i class="fa fa-skype"></i>
Skype
<i class="fa fa-ellipsis-h right"></i>
</h4>
<p class="left">
Claudia Mills<br/>
<a href="#!">claudia.mills</a></p>
<div class="panel-icon skype right">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
<div class="col s4">
<div class="panel">
<h4><i class="fa fa-paypal"></i> Paypal <i class="fa fa-ellipsis-h right"></i></h4>
<p class="left"><a href="#!">[email protected]</a></p>
<div class="panel-icon paypal right">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="col s4">
<div class="panel add-widget">
<a href="#!" class="blue-text text-lighten-1 widget">
<i class="fa fa-plus"></i>
Add widget
</a>
</div>
</div>
</footer><!-- footer -->
</div><!-- .s9 content -->
</div><!-- .row -->
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
Raw
style.scss
$violet: rgba(142, 68, 173,1.0);
$grey: rgba(0,50,100,1.0);
$grey2: rgba(149, 165, 166,1.0);
html, body {
background: lighten($grey, 78%);
}
#sidebar {
position: fixed;
background: white;
box-shadow: 1px 0px 10px rgba(0,0,0,.1);
padding: 0;
height: 100vh;
.title {
padding: 0 20px;
h1 {
font-size: 100%;
i {
color: $violet;
}
}
a {
font-size: 100%;
line-height: 72px;
color: lighten($grey2, 4%);
}
}
.menu {
.title {
margin-bottom: -2em;
h2 {
font-size: 100%;
color: $violet;
i {
color: lighten($grey2, 10%);
}
}
}
li {
padding: 10px 20px;
box-sizing: border-box;
color: lighten($grey2, 2%);
i {
margin-right: 10px;
}
}
}
.menu2 {
padding: 10px 20px;
li {
margin: 1em 0;
i {
color: lighten($grey2, 10%);
}
}
}
}
#content {
#content_nav {
background: white;
height: 50px;
box-sizing: border-box;
padding: 5px;
line-height: 10px;
font-size: 80%;
form {
width: 40vw;
height: 30px;
display: inline-block;
.input-field {
height: 30px;
margin: 0;
padding: 0;
label.active {
font-size: 1.2rem;
transform: translateY(0);
}
}
input {
border: none;
}
}
.nav_header {
display: inline-block;
font-size: 100%;
line-height: 45px;
li {
display: inline-block;
margin: 0 10px;
img {
border-radius: 50%;
width: 20px;
vertical-align: middle;
}
a {
color: lighten($grey2, 4%);
}
i {
margin-right: 5px;
}
}
}
}
#subnav {
height: 50px;
vertical-align: middle;
.nav_arrows {
height: 50px;
width: 20vw;
margin-top: 15px;
a {
position: relative;
background: white;
margin: 0 2px;
padding: 5px 10px;
color: lighten($grey2, 4%);
}
}
.nav_buttons {
height: 50px;
margin-top: 10px;
.btn {
margin-right: 5px;
text-transform: initial;
}
}
}
#profile {
background: white;
box-sizing: border-box;
padding: 2em;
.divider {
background-color: lighten($grey2, 35%);
height: 2px;
}
.profile_header {
text-align: center;
h2 {
font-size: 150%;
margin: .5em 0 0 0;
}
p {
color: lighten($grey2, 3%);
margin: 5px;
}
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
li {
display: inline-block;
padding: 10px;
i.fa-star {
color: rgba(241, 196, 15,1.0);
margin: 1px;
}
i.star-disabled {
color: lighten($grey2, 25%);
}
&:first-child {
padding-left: 0;
border-right: 2px solid lighten($grey2, 30%);
}
.stats {
color: #333;
.fa-fire {
color: rgba(231, 76, 60,1.0);
}
}
}
}
.profile_information, .profile_custom {
h3 {
font-size: 110%;
margin-bottom: 1.5em;
}
h4 {
font-size: 90%;
margin: 0;
color: lighten($grey2, 3%);
}
p {
margin: 0 0 10px 0;
}
}
.profile_tags {
padding: 0;
h3 {
font-size: 110%;
margin-bottom: 1.5em;
}
.chip {
background: lighten($grey, 78%);
color: lighten($grey2, 4%);
font-size: .7em;
font-weight: normal;
border-radius: 5px;
a {
color: lighten($grey2, 4%);
}
}
}
.profile_owner {
line-height: 30px;
img {
border-radius: 50%;
margin-right: 10px;
}
span {
color: lighten($grey2, 2%);
}
}
}
#profile_content {
nav {
background-color: rgba(127, 140, 141,.1);
box-shadow: none;
overflow: hidden;
ul {
width: 45vw;
overflow: hidden;
display: inline-block;
.active {
box-shadow: inset 0px -3px 0px $violet;
background: none;
color: $violet;
font-weight: bold;
}
li a:hover {
box-shadow: inset 0px -3px 0px $violet;
background: none;
color: $violet;
}
a {
color: lighten($grey2, 8%);
}
.tab {
text-transform: initial;
font-size: .6em;
&:first-child {
margin-left: 2em;
}
}
}
.nav_arrows {
display: inline-block;
float: right;
width: 5vw;
text-align: right;
margin-right: 1em;
a {
margin: 1px;
background: white;
padding: 2px 5px;
border-radius: 2px;
i {
text-align: center;
width: 10px;
height: 10px;
color: lighten($grey2, 8%);
}
}
}
}
.profile-content {
clear: both;
background: white;
height: auto;
text-align: left;
margin: 0;
padding: 2em;
h3 {font-size: 120%;}
.notes {
padding-right: 6em;
.note {
margin: 2em 0;
img {width: 50px; border-radius: 50%;}
.note-content {
margin-left: 75px;
p {margin-bottom: 5px;}
span {color: lighten($grey2, 10%);}
}
}
}
}
}
footer {
.panel {
box-sizing: border-box;
height: 150px;
padding: 2em;
background: white;
i {
font-size: 1.3rem;
line-height: 5rem;
}
h4 {
font-size: 0.9rem;
line-height: 1.2rem;
margin: 0 0 1em 0;
i {
font-size: 2rem;
line-height: 1rem;
margin-right: 1rem;
&:last-child {
font-size: 125%;
color: lighten($grey2, 20%);
}
}
}
.panel-icon {
margin-top: 1em;
margin-right: 2em;
height: 40px;
width: 40px;
text-align: center;
i {
line-height: 40px;
}
}
.skype {
background: rgba(52, 152, 219,.2);
border-radius: 50%;
color: rgba(52, 152, 219,1);
}
.paypal {
background: rgba(46, 204, 113,.2);
border-radius: 50%;
color: rgba(46, 204, 113,1);
}
.fa-skype {
color: rgba(52, 152, 219,1.0);
}
.fa-paypal {
color: blue;
}
}
.add-widget {
background: rgba(52, 152, 219,.2);
text-align: center;
.widget {
text-transform: capitalize;
i {
width: 100%;
height: 5px;
}
}
}
}
}
/* Helpers */
.menu .active {
background: lighten($violet, 45%);
border-left: 4px solid $violet;
color: $violet!important;
padding: 10px 15px!important;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment