HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<a href="#" class="rad-logo"><i class=" fa fa-recycle"></i> Radar</a>
<a href="#" class="rad-toggle-btn pull-right"><i class="fa fa-bars"></i></a>
</div>
<a href="#" class="rad-logo-hidden">Radar</a>
<div class="rad-top-nav-container">
<a href="" class="brand-icon"><i class="fa fa-recycle"></i></a>
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" href="#"><img class="rad-list-img sm-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-edit"></i> My Profile</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Sign out</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header"><a href="#">Settings</a></li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Change to Flat Theme</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Choose a color</div>
<div class="sm-text">Make it colorful</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<a class="rad-menu-item" href="#"><i class="fa fa-comment-o"><span class="rad-menu-badge rad-bg-success">0</span></i></a>
</li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-envelope-o"><span class="rad-menu-badge rad-bg-primary">23</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header"><a href="#">Your Notifications</a></li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-html5 fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Introduction to fetch()</div>
<div class="sm-text">The fetch API</div>
</div>
</a>
</li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-bitbucket fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Check your BitBucket</div>
<div class="sm-text">Last Chance</div>
</div>
</a>
</li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-google fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Google Account</div>
<div class="sm-text">sathishlxg@gmail.com</div>
</div>
</a>
</li>
<li class="rad-dropmenu-footer"><a href="#">See all notifications</a></li>
</ul>
</li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-bell-o"><span class="rad-menu-badge">49</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header"><a href="#">Your Alerts</a></li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-html5 fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Introduction to fetch()</div>
<div class="sm-text">The fetch API</div>
<em class="pull-right sm-text"><i class="fa fa-clock-o"></i> 2 sec ago</em>
</div>
</a>
</li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-bitbucket fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Check your BitBucket</div>
<div class="sm-text">Last Chance</div>
<em class="pull-right sm-text"><i class="fa fa-clock-o"></i> 49 mins ago</em>
</div>
</a>
</li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-google fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Google Account</div>
<div class="sm-text">sathishlxg@gmail.com</div>
<em class="pull-right sm-text"><i class="fa fa-clock-o"></i> 2 days ago</em>
</div>
</a>
</li>
<li class="rad-dropmenu-footer"><a href="#">See all alerts</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="#" class="inbox">
<i class="fa fa-dashboard"><span class="icon-bg rad-bg-success"></span></i>
<span class="rad-sidebar-item">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o">
<span class="icon-bg rad-bg-danger"></span>
</i>
<span class="rad-sidebar-item">Ticket status</span>
</a>
</li>
<li><a href="#" class="snooz"><i class="fa fa-line-chart"><span class="icon-bg rad-bg-primary"></span></i><span class="rad-sidebar-item">Call trends</span></a></li>
<li><a href="#" class="done"><i class="fa fa-area-chart"><span class="icon-bg rad-bg-warning"></span></i><span class="rad-sidebar-item">Heat maps</span></a></li>
<li>
<a href="#">
<i class="fa fa-wrench"><span class="icon-bg rad-bg-violet"></span></i>
<span class="rad-sidebar-item">Settings</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<section>
<div class="rad-body-wrapper rad-nav-min">
<div class="container-fluid">
<header class="rad-page-title">
<span>Dashboard</span>
<small class="md-txt">Welcome Sathish, <a href="https://www.google.com/maps/place/3720+Emerald+St,+Torrance,+CA+90503/@33.8403836,-118.3543828,17z/data=!4m18!1m15!4m14!1m6!1m2!1s0x80c2b4d407f58b11:0xdedca55964c89054!2s3720+Emerald+St,+Torrance,+CA+90503!2m2!1d-118.3520761!2d33.8403792!1m6!1m2!1s0x80c2b4d407f58b11:0xdedca55964c89054!2s3720+Emerald+St,+Torrance,+CA+90503!2m2!1d-118.3520761!2d33.8403792!3m1!1s0x80c2b4d407f58b11:0xdedca55964c89054" target="_blank"><i class="fa fa-map-marker rad-txt-danger"></i> California</a></small> </header>
<div class="row">
<div class="col-lg-3 col-xs-6">
<div class="rad-info-box rad-txt-success">
<i class="fa fa-windows"></i>
<span class="heading">Microsoft</span>
<span class="value"><span>4949</span></span>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="rad-info-box rad-txt-primary">
<i class="fa fa-facebook"></i>
<span class="heading">Facebook</span>
<span class="value"><span>23K</span></span>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="rad-info-box rad-txt-danger">
<i class="fa fa-google-plus"></i>
<span class="heading">Google</span>
<span class="value"><span>49M</span></span>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="rad-info-box">
<i class="fa fa-apple"></i>
<span class="heading">Apple</span>
<span class="value"><span>10.9K</span></span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">World Map<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body rad-map-container">
<div id="world-map" class="rad-map"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Area Chart<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="areaChart" class="rad-chart"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Area Chart<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="areaChart2" class="rad-chart"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Activity<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div class="rad-activity-body">
<div class="rad-list-group group">
<div class="rad-list-group-item">
<div class="rad-list-icon icon-shadow rad-bg-danger pull-left"><i class="fa fa-phone"></i></div>
<div class="rad-list-content"><strong>Client meeting</strong>
<div class="md-text">Meeting at 10:00 AM</div>
</div>
</div>
<div class="rad-list-group-item">
<div class="rad-list-icon icon-shadow rad-bg-primary pull-left"><i class="fa fa-refresh"></i></div>
<div class="rad-list-content"><strong>Created ticket</strong>
<div class="md-text">Ticket assigned to Dev team</div>
</div>
</div>
<div class="rad-list-group-item">
<div class="rad-list-icon icon-shadow rad-bg-success pull-left"><i class="fa fa-check"></i></div>
<div class="rad-list-content"><strong>Activity completed</strong>
<div class="md-text">Completed the dashboard html demo</div>
</div>
</div>
<div class="rad-list-group-item">
<div class="rad-list-icon icon-shadow rad-bg-violet pull-left"><i class="fa fa-envelope"></i></div>
<div class="rad-list-content"><strong>New Invitation</strong>
<div class="md-text">Max has invited you to join Inbox</div>
</div>
</div>
<div class="rad-list-group-item">
<div class="rad-list-icon icon-shadow rad-bg-success pull-left"><i class="fa fa-pencil"></i></div>
<div class="rad-list-content"><strong>New post</strong>
<div class="md-text">Created new post</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-8 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Donut Chart<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="donutChart" class="rad-chart"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Line Chart<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="lineChart" class="rad-chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bar Chart<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="barChart3" class="rad-chart"></div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bar Chart<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="barChart2" class="rad-chart"></div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bar Chart<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="barChart" class="rad-chart"></div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Chat<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div class="rad-chat-body">
<div class="rad-list-group">
<div class="rad-list-group-item left">
<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:20 pm</span>
<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at.</div>
</div>
</div>
<div class="rad-list-group-item right">
<span class="rad-list-icon pull-right"><img class="rad-list-img" src="http://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png" alt="sathish"></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Sathish</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:30 pm</span>
<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="rad-list-group-item left">
<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:31 pm</span>
<div class="rad-chat-msg">Checkout my new admin dashboard template in CSS3 <i class="fa fa-smile-o rad-txt-warning"></i></div>
</div>
</div>
<div class="rad-list-group-item left">
<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:20 pm</span>
<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at.</div>
</div>
</div>
<div class="rad-list-group-item right">
<span class="rad-list-icon pull-right"><img class="rad-list-img" src="http://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png" alt="sathish"></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Sathish</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:30 pm</span>
<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="rad-list-group-item left">
<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:31 pm</span>
<div class="rad-chat-msg">Checkout my new admin dashboard template in CSS3 <i class="fa fa-smile-o rad-txt-warning"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" id="rad-chat-txt" placeholder="Type a message" class="form-control" /><span class="input-group-btn"><button id="rad-chat-send" class="btn btn-info">Send</button></span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Timeline<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div class="rad-timeline-body">
<ul class="rad-timeline">
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-bg-primary"><i class="fa fa-rss"></i><span class="pull-left"><i class="fa fa-clock-o"></i> 49m ago</span></div>
<div class="rad-timeline-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
</li>
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-bg-danger"><i class="fa fa-signal"></i><span class="pull-right"><i class="fa fa-clock-o"></i> 28m ago</span></div>
<div class="rad-timeline-panel pull-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia</div>
</li>
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-bg-success"><i class="fa fa-rocket"></i><span class="pull-left"><i class="fa fa-clock-o"></i> 23m ago</span></div>
<div class="rad-timeline-panel ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
</li>
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-bg-warning"><i class="fa fa-linux"></i><span class="pull-right"><i class="fa fa-clock-o"></i> 13m ago</span></div>
<div class="rad-timeline-panel pull-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
</li>
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-bg-violet"><i class="fa fa-stack-overflow"></i><span class="pull-left"><i class="fa fa-clock-o"></i> 13m ago</span></div>
<div class="rad-timeline-panel ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia</div>
</li>
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-bg-danger"><i class="fa fa-wordpress"></i><span class="pull-right"><i class="fa fa-clock-o"></i> 7m ago</span></div>
<div class="rad-timeline-panel pull-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
</li>
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-bg-success"><i class="fa fa-credit-card"></i><span class="pull-left"><i class="fa fa-clock-o"></i> 7m ago</span></div>
<div class="rad-timeline-panel ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
</li>
</ul>
</div>
</div>
<div class="panel-footer">
<div class="rad-timeline-footer">
<p>There are many variations</p>
<p class="pull-right"><i class="fa fa-comments-o"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
//Vendor prefixes not added
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
$logo-color:#222533;
$base-color: white;
$text-color: #515d6e;
$font-size:13px;
*{
box-sizing:border-box;
}
body{
background:#f0f0f0;
line-height:normal;
font-size: $font-size + 3;
overflow-Y:scroll;
font-family: 'Roboto Condensed', "Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased !important;
}
a,a:hover, a:visited, a:link, a:active{
text-decoration : none;
}
a:active{
color:#fff !important;
}
.sm-img{
height:30px !important;
width:30px !important;
}
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
.rad-page-title{
margin-bottom:20px;
text-shadow: 1px 4px 6px #c6c6c6, 0 0 0 #000, 1px 4px 6px #c6c6c6;
span{
font-size:22px;
font-weight:500;
display:block;
}
}
.rad-navigation{
position:fixed;
left:0;right:0;top:0;
box-shadow:0 0px 9px 4px rgba(#000, .1), 0 -5px 2px 2px rgba(#000, .1);
background:$base-color;
z-index:10000;
text-align:center;
ul{
margin-bottom:0;
}
}
.rad-logo-hidden{
line-height: 75px;
font-weight: 900;
text-transform: uppercase;
font-size: 22px;
text-decoration:none;
color: $logo-color;
opacity:0;
visibility:hidden;
position:absolute;
left:50%;
transition:all .2s ease-in-out;
}
.links{
margin-right: 10px;
position:relative;
>li{
list-style:none;
position:relative;
margin:10px;
display:inline-block;
}
}
.rad-dropmenu-item.active{
display:block;
-webkit-animation:flipInX 1s ease;
}
.lg-text{
font-size:13px;
font-weight:600;
color:#333;
}
.sm-text{
font-size:11px;
color:#c6c6c6;
}
.md-text{
font-size:12px;
color:#c6c6c6;
}
.rad-notification-item{
width:100%;
padding:15px;
border-bottom:1px solid #EEEEEE;
&:hover{
background:#F5F5F5;
}
.rad-notification-content{
color: lighten(#333,5);
}
}
.rad-notification-body{
color:black;
vertical-align:middle;
margin-left:30px;
}
.rad-logo-container{
width:225px;
text-align:center;
height:50px;
float:left;
transition:all .2s ease-in-out;
}
.rad-top-nav-container{
float:right;
transition:all .2s ease-in-out;
}
.rad-toggle-btn,
.rad-logo{
text-decoration:none;
position:relative;
height:50px;
line-height:50px;
padding:0 15px;
font-size:22px;
font-weight:900;
text-transform:uppercase;
text-decoration:none;
color: $logo-color;
display:inline-block;
}
.rad-logo i {
padding-top: 2px;
vertical-align: middle;
margin-right: 10px;
}
.rad-toggle-btn:hover{
background:lighten(#c6c6c6,20);
}
.rad-menu-item{
position:relative;
padding:0 5px;
line-height:30px;
height:30px;
color:#89949B;
z-index:5;
display:inline-block;
}
.rad-badge{
height:20px;
color: $base-color;
border-radius:10px;
line-height:20px;
font-size:12px;
background:#E94B3B;
box-shadow:.5px .2px 1px rgba(#000,.5);
display:inline-block;
text-align:center;
}
.rad-menu-badge{
position:absolute;
min-width:20px;
min-height:20px;
line-height:20px;
font-weight:bold;
color: $base-color;
border-radius:100%;
font-size:12px;
background:#E94B3B;
box-shadow:.5px .2px 1px rgba(#000,.5);
display:inline-block;
text-align:center;
top:-10px;
z-index:1;
}
.sm-menu{
min-width:150px !important;
>li{
padding:10px;
text-align:left;
i{
margin:0 10px 0 0;
}
>a{
padding:10px;
}
}
}
.rad-dropmenu-item{
position:absolute;
right:-6px;
top:45px;
min-width:250px;
background: $base-color;
border:1px solid #BDBDBD;
border-top:5px solid $text-color;
border-radius:2px;
box-shadow:0 0 5px rgba(#000, .15);
display:none;
&:before{
content:"";
position: absolute;
border-width:0 10px 10px 10px;
border-style:solid;
border-color: $text-color transparent;
top:-14px;
right:8px;
}
}
.rad-dropmenu-item.rad-settings{
right: 0 !important;
left: auto !important;
&:before{
right: 5px !important;
left: auto !important;
}
>.rad-notification-item {
&:hover{
background: #fff !important;
}
i{
font-size:24px;
}
}
}
.rad-dropmenu-footer,
.rad-dropmenu-header{
display:block !important;
background:#CFD8DC;
text-transform:uppercase;
font-size:12px;
margin:0 !important;
padding:6px;
text-align:center;
>a{
color: white;//#98A0A3;
line-height:12px;
text-decoration:none;
}
}
.rad-dropmenu-header{
border-bottom:1px solid #CFD8DC;
}
.rad-dropmenu-footer{
border-top:1px solid #CFD8DC;
}
.rad-chk-pin {
margin:0 !important;
span {
display: inline-block;
position: relative;
height: 20px;
width: 40px;
border-radius: 4px;
background: crimson;
border: 1px solid #f6f6f6;
&:after {
content: "";
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 4px;
top: -1px;
left: 0px;
box-shadow: 0 0 .5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
}
input {
display: none;
&:checked + span {
background: #23AE89;
&:after {
left: 19px;
}
}
}
}
.hide{
display:none;
}
.rad-option-selected{
box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 -2px 4px rgba(0,0,0,.2);
transform: scale(1.1);
transition: all .2s linear;
}
.rad-color-swatch{
display:table;
width: 90px;
height:25px;
border-radius:4px;
.colors{
width:25px;
height:25px;
display:table-cell;
cursor:pointer;
input[type="radio"]{
display:none;
}
}
.colors:first-child{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
.colors:last-child{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
}
.rad-sidebar{
z-index:9999;
position:fixed;
font-weight:600;
background: $base-color !important;
width:225px;
height:100vh;
top:50px;
left:0;
bottom:0;
box-shadow: 0 0 4px rgba(0,0,0,.14),2px 4px 8px rgba(0,0,0,.28);
transition:all .2s ease-in-out;
li{
text-align:left;
height:45px;
font-size: 14px;
font-weight:500;
letter-spacing:.025em;
line-height:1.5;
a{
text-decoration:none;
display:block;
color:$text-color;
i{
position:relative;
width:45px;
line-height:45px;
text-align:center;
&:before{
z-index:10;
position:relative;
}
}
>span{
display: inline-block;
visibility:visible;
opacity:1;
padding-left:10px;
-webkit-transition:all .2s ease-in-out .2s;
transform:translate3d(0,0,0);
text-transform: uppercase;
font-size: 11px;
}
}
&:hover{
background: darken($base-color,5);
.icon-bg{
transform:translate3d(0,0,0);
}
a>i{
color: white;
}
}
}
}
.icon-bg{
position:absolute;
left:0;top:0;bottom:0;
z-index:1;
width:100%;
transform:translate3d(-43px,0,0);
transition: all .2s ease-in-out;
}
.rad-txt-primary{
color:#1C7EBB;
}
.rad-bg-primary{
background:#1C7EBB;
}
.rad-txt-success{
color:#23AE89;
}
.rad-bg-success{
background:#23AE89;
}
.rad-txt-danger{
color:#E94B3B;
}
.rad-bg-danger{
background:#E94B3B;
}
.rad-txt-warning{
color:#F98E33;
}
.rad-bg-warning{
background:#F98E33;
}
.rad-txt-violet{
color:#6A55C2;
}
.rad-bg-violet{
background:#6A55C2;
}
.rad-logo-container.rad-nav-min{
transform:translate3d(-180px,0,0);
.rad-logo{
opacity:0;
}
&+.rad-logo-hidden{
opacity:1;
visibility:visible;
}
}
.rad-sidebar.rad-nav-min{
width:45px !important;
.rad-sidebar-item{
opacity:0;
visibility:hidden;
-webkit-transition:all .1s linear;
transform:translate3d(-200px,0,0);
}
.icon-bg{
transform:translate3d(0,0,0);
}
i{
border:0px;
color:white;
transition:all .2s linear;
}
li:hover{
.icon-bg{
transform:scale(1.2,1);
}
}
}
.rad-body-wrapper{
position:absolute;
left:230px;
top:75px;
width:auto;
right:0;
transition: all .2s ease-in-out;
}
.rad-body-wrapper.rad-nav-min{
left:50px;
}
.rad-chart{
height:250px;
}
.rad-map{
width: 100%;
height:100%;
}
.rad-map-container{
height: 400px;
position: relative;
}
.rad-collapse {
height:0px;
padding: 0;
opacity:0;
overflow: hidden;
}
@-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
}
}
@media screen and (max-width: 450px){
.rad-info-box i{
opacity:.3;
}
.flat-theme{
.rad-toggle-btn{
right:20px !important;
}
.rad-top-nav-container{
.links:last-child{
display:none;
}
}
}
}
@media screen and (min-width: 850px){
.rad-logo-container{
height:75px;
.rad-logo{
line-height:75px;
}
.rad-toggle-btn{
line-height:75px;
height:auto;
}
}
.rad-top-nav-container{
padding:10px;
}
.rad-sidebar{
top:75px;
}
.rad-body-wrapper{
top:100px;
}
.flat-theme{
.rad-toggle-btn{
top:20px !important;
}
}
}
@media screen and (max-width: 850px){
.flat-theme{
.rad-menu-badge{
top:-3px;
}
.rad-toggle-btn{
right:20px !important;
}
.rad-body-wrapper{
top:125px !important;
}
.rad-sidebar{
position: absolute;
}
.rad-navigation{
position:absolute;
.links > li:first-child {
margin-left:15px !important;
}
}
&.sticky{
.rad-logo-container {
z-index:10000;
.rad-toggle-btn{
color: #89949B!important;
position: fixed;
right: 120px !important;
background: #f6f6f6;
top: 11px;
&:hover{
background: crimson;
color:#fff !important;
}
}
}
.rad-navigation{
height:50px;
}
.rad-sidebar{
top:50px;
position:fixed;
//transition: none;
}
.rad-top-nav-container{
background:#FFF important;
box-shadow:0 0px 9px 4px rgba(#000, .1), 0 -5px 2px 2px rgba(#000, .1);
position:fixed;
left:0;
top:0;
width:100%;
z-index:1000;
}
.links{
margin-left:50px;
}
.brand-icon{
margin-left: 0px;
&:hover{
color:#fff;
}
}
}
}
.rad-navigation{
height:100px;
}
.rad-logo-container.rad-nav-min{
transform:translate3d(0,0,0);
background:transparent;
.rad-logo{
opacity:1;
}
&+.rad-logo-hidden{
display: none;
}
}
.rad-logo-container{
display:block;
float:none;
width:100%;
border-bottom:1px solid #F2F2F2;
}
.rad-top-nav-container{
display:block;
float:none;
height:50px;
background: $base-color;
.links>li>a{
font-size:12px;
}
}
.rad-menu-badge{
font-size:10px;
min-width:15px;
min-height:15px;
line-height:15px;
}
.rad-sidebar{
top:100px;
}
.rad-sidebar.rad-nav-min{
transform:translate3d(-200px,0,0);
}
.rad-body-wrapper{
top:125px;
position:relative;
}
.rad-body-wrapper.rad-nav-min{
left:0px;
}
}
//---------------------------------------------------------
//Bootstrap Override
//---------------------------------------------------------
.panel{
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
border-radius:0 !important;
position:relative;
-webkit-transition:all .2s linear;
}
.panel-close{
transform:scale3d(0,0,0);
}
.panel-body{
position:relative;
-webkit-transition:all .2s linear;
}
.panel-heading{
background: $base-color !important;
border-radius:0;
padding:15px;
border-bottom:0 !important;
}
.panel-heading .panel-title{
text-transform:uppercase;
font-weight:600;
font-size:$font-size;
color:$text-color;
}
.overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1001;
background: rgba(255,255,255,0.75);
text-align:center;
&:before{
content:"";
height:100%;
vertical-align: middle;
width:1px;
display:inline-block;
margin-left:-5px;
}
.overlay-content{
display:inline-block;
vertical-align:middle;
}
i{
display:block;
position:inline-block;
vertical-align:middle;
color:black;
}
}
.rad-panel-action {
list-style: none;
display: inline-block;
float: right;
}
.rad-panel-action li {
display: inline-block;
color: $text-color;
margin: 0 5px;
cursor: pointer;
}
.rad-info-box{
margin-bottom:16px;
box-shadow:1px 1px 2px 0 #CCCCCC;
padding:20px;
box-shadow:0 2px 5px 0 rgba(0,0,0,.26);
background:$base-color !important;
}
.rad-info-box i{
display:block;
background-clip:padding-box;
margin-right:15px;
height:60px;
width:60px;
border-radius:100%;
line-height:60px;
text-align:center;
font-size:4.4em;
position:absolute;
}
.rad-info-box .value,
.rad-info-box .heading{
display:block;
position:relative;
color: $text-color;
text-align:right;
z-index:10;
}
.rad-info-box .heading{
font-size:1.2em;
font-weight:300;
text-transform:uppercase;
}
.rad-info-box .value{
font-size:2.1em;
font-weight:600;
margin-top:5px;
}
.rad-list-group-item{
margin:5px 10px 25px 5px;
&:after{
content:"";
display:table;
}
}
.rad-chat{
border:1px solid rgba(#c6c6c6,.5);
padding:0 10px;
border-radius:2px;
position:relative;
}
.rad-chat-body{
position:relative;
}
.rad-list-group-item.left{
.rad-chat{
margin-left:50px;
.sm-text{
float:right;
}
&:after{
content:"";
border-top:1px solid rgba(#c6c6c6,.5);
border-left:1px solid rgba(#c6c6c6,.5);
height:10px;
width:10px;
background:$base-color;
position:absolute;
left:-6px;
top:10px;
transform:rotate(-45deg);
}
}
}
.rad-chat-msg {
font-size:14px;
color:#585f69;
}
.rad-list-group-item.right{
.rad-chat{
margin-right:50px;
.lg-text{
float:right;
}
&:after{
content:"";
border-top:1px solid rgba(#c6c6c6,.5);
border-right:1px solid rgba(#c6c6c6,.5);
height:10px;
width:10px;
background:$base-color;
position:absolute;
right:-6px;
top:10px;
transform:rotate(45deg);
}
}
}
.rad-list-icon{
position:relative;
height:40px;
width:40px;
border-radius:100%;
line-height:40px;
text-align:center;
color: white;
top:-5px;
}
.icon-shadow{
box-shadow: 0 0px 3px 1px rgba(0,0,0,.26);
}
.rad-list-img{
border-radius:100%;
width:32px;
height:32px;
}
.rad-list-group{
position:relative;
}
.rad-list-group.group{
&:before{
content:"";
position:absolute;
background:rgba(#c6c6c6,.3);
top:-20px;
bottom:-20px;
left:25px;
width:1px;
}
}
.rad-list-content{
line-height:1.3;
margin-left:50px;
}
.rad-timeline {
padding: 10px 0;
position: relative;
&:before {
content: "";
position: absolute;
border: 1px solid #c6c6c6;
left: 50%;
top: 0;
height: 100%;
bottom: 1px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.rad-timeline-item {
list-style: none;
padding: 10px;
position: relative;
vertical-align: middle;
margin-bottom: 20px;
font-size: 14px;
.rad-timeline-badge {
position: absolute;
left: 50%;
top: 0;
margin-left: -15px;
color: #FFF;
width: 30px;
height: 30px;
font-size: 12px;
border-radius: 100%;
text-align: center;
line-height: 25px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all .2s easein-out;
border: 2px solid #fff;
span {
transition: all 200ms linear;
transform: scale(0);
opacity: 0;
position: absolute;
color: #e6e6e6;
background: Grey;
min-width: 70px;
border-radius: 3px;
&.pull-right {
right: 35px;
}
&.pull-left {
left: 35px;
}
}
&:hover span {
opacity: 1;
transform: scale(1);
}
}
.rad-timeline-panel {
position: relative;
width: 40%;
background: #FFF;
padding: 15px;
//box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
top: -20px;
margin-left: 10px;
border-radius: 6px;
border:1px solid rgba(0, 0, 0, 0.2);
&:after {
content: "";
width: 15px;
height: 15px;
background: #FFF;
position: absolute;
top: 30px;
right: -8.5px;
margin-top: -10px;
transform: rotate(135deg);
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
}
&:before {
content: "";
display: table;
}
&:after {
content: "";
clear: both;
display: block;
overflow: hidden;
}
&:first-child {
margin-top: 20px;
}
.pull-right.rad-timeline-panel {
background: #e6e6e6;
margin-right: 10px;
&:after {
content: "";
left: -8.5px;
transform: rotate(-45deg);
background: #e6e6e6;
}
}
}
}
.rad-timeline-footer {
p {
display: inline-block;
font-weight: 600;
color: #515d6e;
i {
font-size: 24px;
color: crimson;
}
}
}
//-----------------------------
//Morris style overrides
//-----------------------------
.rad-chart {
.morris-hover{
display:none !important;
}
}
.rad-chart:hover{
.morris-hover{
display:block !important;
}
}
//**********************
// override fa
//**********************
.fa-spin{
-webkit-animation: fa-spin .5s infinite linear;
animation: fa-spin .5s infinite linear;
}
.brand-icon{
font-size:22px;
height: 50px;
display: inline-block;
float: left;
width: 50px;
background-color: crimson;
text-align: center;
line-height: 50px;
color: white;
font-weight: 700;
transition: all .2s linear;
margin-left: -230px;
display:none;
}
.flat-theme{
body{
background: #f1f2f7;
}
.brand-icon{
display:inline-block;
}
.rad-logo{
color:white;
}
.rad-navigation{
text-align: left;
.rad-top-nav-container{
float: none !important;
.links:last-child{
float:none !important;
& > li{
& > ul.rad-dropmenu-item{
left:0;
&:before{
left:8px;
right:100%;
}
}
}
& > li:first-child{
margin-left:30px;
}
}
.links > li{
text-align: center;
& >a{
border-radius: 50%;
width: 32px;
height: 32px;
background: #f6f6f6;
display:inline-block;
line-height:32px;
}
&:hover{
>a{
color:white !important;
}
}
}
}
}
.rad-dropmenu-item{
border-color:crimson !important;
&:before{
border-color: crimson transparent;
}
}
.rad-logo-container.rad-nav-min{
transform: none;
.rad-logo{
opacity:1;
}
& + .rad-logo-hidden{
opacity:0;
}
}
.rad-logo-container{
background: crimson !important;
position:relative;
z-index:1000;
.rad-toggle-btn{
color: #fff !important;
font-size:14px;
width:30px;
height:30px;
display:inline-block;
position:absolute;
line-height:30px;
text-align:center;
padding:0;
border-radius:50%;
right:-15px;
background:red;
top:7.5px;
transition: all .2s linear;
}
}
.rad-sidebar{
background: #32323a !important;
li{
border-bottom:1px solid rgba(255,255,255,.05);
&:hover{
background: #28282a !important;
span{
color:crimson !important;
}
}
& a {
i{
color: white;
}
>span{
color: #aeb2b7 !important;
-webkit-transition: none;
}
}
}
}
.rad-info-box{
box-shadow: none !important;
border-radius:4px;
}
.panel{
box-shadow: none !important;
border-radius: 4px !important;
border:none !important;
.panel-heading{
background: #fafafa !important;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.panel-body{
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.panel-default{
border-color: none;
}
}
@each $key, $value in (crimson: crimson, teal: #1fb5ad, orange: #ff503f, purple: rebeccapurple, twitter: #55acee){
.rad-bg-#{$key}{
background: $value;
}
.flat-theme.#{$key}{
.rad-logo-container{
background: $value !important;
}
.rad-toggle-btn{
background: darken($value,10) !important;
}
.rad-dropmenu-footer,
.rad-dropmenu-header{
background: darken($value,10) !important;
}
.links{
& > li:not(.no-color){
&:hover{
>a{
background: lighten($value,5) !important;
}
}
}
}
.rad-dropmenu-item{
border-color: darken($value,10) !important;
&:before{
border-color: darken($value,10) transparent;
}
}
.rad-sidebar{
li:hover a>span{
color: $value !important;
}
}
&.sticky {
@media screen and (max-width: 850px){
.rad-toggle-btn{
background: #fafafa !important;
color:#89949B !important;
}
}
.brand-icon,
.rad-toggle-btn:hover{
background: $value !important;
color: #fff !important;
}
}
}
}
///Last modified 02/06/2016
//Sathish kumar
//Added theming
$(function () {
var world;
var mapSeries = {
AF: 16.63,
AL: 11.58,
DZ: 158.97,
AO: 85.81,
AG: 1.1,
AR: 351.02,
AM: 8.83,
AU: 1219.72,
AT: 366.26,
AZ: 52.17,
BS: 7.54,
IN: 4949,
US: 852
};
var settings = {
map: "world_mill",
container: $("#world-map"),
backgroundColor: "transparent",
colors: "#3377CC",
zoomOnScroll: false,
regionStyle: {
initial: {
fill: "crimson"
}
},
series: {
regions: [
{
values: mapSeries,
scale: ["#A8ECFF", "#FA71D4"],
normalizeFunction: "polynomial"
}
]
}
};
function setFlatTheme() {
$("body").toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
$(".rad-chk-pin input[type=checkbox]").prop("checked", true);
}
setFlatTheme();
$(window).on("scroll", function (e) {
if ($(window).scrollTop() > 50) {
$("body").addClass("sticky");
} else {
$("body").removeClass("sticky");
}
});
$(document).on("click", function (e) {
e.preventDefault();
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$(".rad-sidebar a").on("click", function (e) {
e.stopPropagation();
});
$(".rad-chat-body").slimScroll({
height: "450px",
color: "#c6c6c6"
});
$(".rad-timeline-body").slimScroll({
height: "450px",
color: "#c6c6c6"
});
$(".rad-activity-body").slimScroll({
height: "250px",
color: "#c6c6c6"
});
$(".rad-toggle-btn").on("click", function () {
$(".rad-logo-container").toggleClass("rad-nav-min");
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
setTimeout(function () {
initializeCharts();
}, 200);
});
$("li.rad-dropdown > a.rad-menu-item").on("click", function (e) {
e.preventDefault();
e.stopPropagation();
$(".rad-dropmenu-item").removeClass("active");
$(this).next(".rad-dropmenu-item").toggleClass("active");
});
$(".fa-chevron-down").on("click", function () {
var $ele = $(this).parents(".panel-heading");
$ele.siblings(".panel-footer").toggleClass("rad-collapse");
$ele.siblings(".panel-body").toggleClass("rad-collapse", function () {
setTimeout(function () {
initializeCharts();
}, 200);
});
});
$(".fa-close").on("click", function () {
var $ele = $(this).parents(".panel");
$ele.addClass("panel-close");
setTimeout(function () {
$ele.parent().remove();
}, 210);
});
$(".fa-rotate-right").on("click", function () {
var $ele = $(this).parents(".panel-heading").siblings(".panel-body");
$ele.append(
'<div class="overlay"><div class="overlay-content"><i class="fa fa-refresh fa-2x fa-spin"></i></div></div>'
);
setTimeout(function () {
$ele.find(".overlay").remove();
}, 2000);
});
$("#rad-chat-send").on("click", function () {
var value = $("#rad-chat-txt").val();
var $ele = $(".rad-chat-body");
var img =
"https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg";
if (value) {
$("#rad-chat-txt").val("");
$ele.append(getTempl(img, value, "left"));
setTimeout(function () {
img = "http://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png";
$ele.append(getTempl(img, "Cool!!!", "right"));
$ele.slimScroll({
scrollTo: $ele[0].scrollHeight
});
}, 2000);
$ele.slimScroll({
scrollTo: $ele[0].scrollHeight
});
}
});
$(".rad-chk-pin input[type=checkbox]").change(function (e) {
$("body").toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
var selectedTheme = $(".rad-color-swatch input[type=radio]:checked");
var fillColor = '#C6C6C6';
var scale = ["#C8EEFF", "#0071A4"];
if (this.checked) {
scale = ["#A8ECFF", "#FA71D4"];
fillColor = colorMap[selectedTheme.val()];
}
changeMapColors(fillColor, scale);
});
function changeMapColors(fillColor, scale) {
world.remove();
settings.regionStyle.initial.fill = fillColor;
settings.series.regions[0].scale = scale;
world = new jvm.Map(settings);
}
var colorMap = {
crimson: "crimson",
teal: "#1fb5ad",
orange: "#ff503f",
purple: "rebeccapurple",
twitter: "#55acee"
};
$(".rad-color-swatch input[type=radio]").change(function (e) {
if ($(".rad-chk-pin input[type=checkbox]").is(":checked")) {
$("body").removeClass().addClass("flat-theme").addClass(this.value);
$(".rad-color-swatch label").removeClass("rad-option-selected");
$(this).parent().addClass("rad-option-selected");
$(window).scrollTop(0);
changeMapColors(colorMap[this.value], ["#A8ECFF", "#FA71D4"]);
}
});
$(".rad-notification-item").on("click", function (e) {
e.stopPropagation();
});
$(window).resize(function () {
setTimeout(function () {
initializeCharts();
}, 200);
});
var colors = ["#E94B3B", "#39C7AA", "#1C7EBB", "#F98E33"];
var data = [
{
y: "Jan",
a: 50,
b: 90
},
{
y: "Feb",
a: 75,
b: 65
},
{
y: "Mar",
a: 50,
b: 40
},
{
y: "Apr",
a: 10,
b: 20
},
{
y: "May",
a: 95,
b: 65
},
{
y: "Jun",
a: 50,
b: 40
},
{
y: "Jul",
a: 75,
b: 65
},
{
y: "Aug",
a: 100,
b: 90
},
{
y: "Sep",
a: 15,
b: 65
},
{
y: "Oct",
a: 75,
b: 65
},
{
y: "Nov",
a: 15,
b: 65
},
{
y: "Dec",
a: 95,
b: 65
}
];
function initializeCharts() {
$(".rad-chart").empty();
$(".d3-*").empty();
Morris.Line({
lineColors: ["#E67A77", "#D9DD81", "#79D1CF", "#95D7BB"],
element: "lineChart",
data: [
{
year: "2008",
value: 45,
value2: 15,
value3: 95
},
{
year: "2009",
value: 10,
value2: 40,
value3: 80
},
{
year: "2010",
value: 45,
value2: 95,
value3: 5
},
{
year: "2011",
value: 20,
value2: 60,
value3: 40
},
{
year: "2012",
value: 45,
value2: 0,
value3: 90
}
],
xkey: "year",
ykeys: ["value", "value2", "value3"],
labels: ["Value", "value2", "value3"],
pointSize: 0,
hideHover: "auto"
});
Morris.Donut({
element: "donutChart",
data: getDonutData("Sector", "Country"),
labelColor: "#23AE89",
colors: ["#E67A77", "#D9DD81", "#79D1CF", "#95D7BB"]
});
Morris.Bar({
element: "barChart",
data: data,
xkey: "y",
ykeys: ["a", "b"],
barColors: ["#95D7BB", "#79D1CF"],
labels: ["Series A", "Series B"]
});
Morris.Bar({
element: "barChart2",
data: getDonutData("Sector", "Volume"),
xkey: "label",
ykeys: ["value"],
barColors: ["#D9DD81", "#79D1CF", "#95D7BB"],
labels: ["Sector by Volume"]
});
Morris.Bar({
element: "barChart3",
data: data,
xkey: "y",
ykeys: ["a", "b"],
barColors: ["#E67A77", "#79D1CF"],
labels: ["Series A", "Series B"]
});
Morris.Area({
element: "areaChart2",
behaveLikeLine: true,
padding: 10,
fillOpacity: 0.7,
lineColors: ["#ED5D5D", "#D6D23A"],
gridEnabled: false,
gridLineColor: "#dddddd",
axes: true,
data: [
{
y: "2006",
a: 0,
c: 0
},
{
y: "2007",
a: 75,
c: 112
},
{
y: "2008",
a: 50,
c: 72
},
{
y: "2009",
a: 75,
c: 2
},
{
y: "2010",
a: 150,
c: 92
},
{
y: "2011",
a: 75,
c: 22
},
{
y: "2012",
a: 3,
c: 0
}
],
xkey: "y",
ykeys: ["a", "c"],
labels: ["Open", "Closed"],
pointSize: 0,
lineWidth: 0,
hideHover: "auto"
});
Morris.Area({
element: "areaChart",
padding: 10,
behaveLikeLine: true,
gridEnabled: false,
gridLineColor: "#dddddd",
axes: true,
fillOpacity: 0.7,
data: [
{
period: "2010 Q1",
iphone: 10,
ipad: 10,
itouch: 10
},
{
period: "2010 Q2",
iphone: 1778,
ipad: 7294,
itouch: 18441
},
{
period: "2010 Q3",
iphone: 4912,
ipad: 12969,
itouch: 3501
},
{
period: "2010 Q4",
iphone: 3767,
ipad: 3597,
itouch: 5689
},
{
period: "2011 Q1",
iphone: 6810,
ipad: 1914,
itouch: 2293
},
{
period: "2011 Q2",
iphone: 5670,
ipad: 4293,
itouch: 1881
},
{
period: "2011 Q3",
iphone: 4820,
ipad: 3795,
itouch: 1588
},
{
period: "2011 Q4",
iphone: 25073,
ipad: 5967,
itouch: 5175
},
{
period: "2012 Q1",
iphone: 10687,
ipad: 34460,
itouch: 22028
},
{
period: "2012 Q2",
iphone: 1000,
ipad: 5713,
itouch: 1791
}
],
lineColors: ["#ED5D5D", "#D6D23A", "#32D2C9"],
xkey: "period",
ykeys: ["iphone", "ipad", "itouch"],
labels: ["iPhone", "iPad", "iPod Touch"],
pointSize: 0,
lineWidth: 0,
hideHover: "auto"
});
}
function getTempl(img, text, position) {
return (
'<div class="rad-list-group-item ' +
position +
'"><span class="rad-list-icon pull-' +
position +
'"><img class="rad-list-img" src=' +
img +
' alt="me" /></span><div class="rad-list-content rad-chat"><span class="lg-text">Me</span><span class="sm-text"><i class="fa fa-clock-o"></i> ' +
formatTime(new Date()) +
'</span><div class="rad-chat-msg">' +
text +
"</div>"
);
}
function formatTime(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? "pm" : "am";
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? "0" + minutes : minutes;
return hours + ":" + minutes + " " + ampm;
}
initializeCharts();
world = new jvm.Map(settings);
});
var monthNames = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
var data = [
{
label: "Technology",
value: 20
},
{
label: "Financial",
value: 45
},
{
label: "Industrial Goods",
value: 30
},
{
label: "Consumer Goods",
value: 10
},
{
label: "Basic Materials",
value: 5
}
];
function getDonutData(group, column) {
function sum(numbers) {
return _.reduce(
numbers,
function (result, current) {
return result + 1;
},
0
);
}
var result = _.chain(getChartData())
.groupBy(group)
.map(function (value, key) {
return {
label: key,
value: sum(_.pluck(value, column))
};
})
.value();
return result;
}
function getChartData() {
return [
{
_id: {
$oid: "52853800bb1177ca391c17ff"
},
Ticker: "A",
"Profit Margin": 0.137,
"Institutional Ownership": 0.847,
"EPS growth past 5 years": 0.158,
"Total Debt/Equity": 0.5600000000000001,
"Current Ratio": 3,
"Return on Assets": 0.089,
Sector: "Healthcare",
"P/S": 2.54,
"Change from Open": -0.0148,
"Performance (YTD)": 0.2605,
"Performance (Week)": 0.0031,
"Quick Ratio": 2.3,
"Insider Transactions": -0.1352,
"P/B": 3.63,
"EPS growth quarter over quarter": -0.29,
"Payout Ratio": 0.162,
"Performance (Quarter)": 0.09279999999999999,
"Forward P/E": 16.11,
"P/E": 19.1,
"200-Day Simple Moving Average": 0.1062,
"Shares Outstanding": 339,
"Earnings Date": {
$date: 1384464600000
},
"52-Week High": -0.0544,
"P/Cash": 7.45,
Change: -0.0148,
"Analyst Recom": 1.6,
"Volatility (Week)": 0.0177,
Country: "USA",
"Return on Equity": 0.182,
"50-Day Low": 0.0728,
Price: 50.44,
"50-Day High": -0.0544,
"Return on Investment": 0.163,
"Shares Float": 330.21,
"Dividend Yield": 0.0094,
"EPS growth next 5 years": 0.0843,
Industry: "Medical Laboratories & Research",
Beta: 1.5,
"Sales growth quarter over quarter": -0.041,
"Operating Margin": 0.187,
"EPS (ttm)": 2.68,
PEG: 2.27,
"Float Short": 0.008,
"52-Week Low": 0.4378,
"Average True Range": 0.86,
"EPS growth next year": 0.1194,
"Sales growth past 5 years": 0.048,
Company: "Agilent Technologies Inc.",
Gap: 0,
"Relative Volume": 0.79,
"Volatility (Month)": 0.0168,
"Market Cap": 17356.8,
Volume: 1847978,
"Gross Margin": 0.512,
"Short Ratio": 1.03,
"Performance (Half Year)": 0.1439,
"Relative Strength Index (14)": 46.51,
"Insider Ownership": 0.001,
"20-Day Simple Moving Average": -0.0172,
"Performance (Month)": 0.0063,
"P/Free Cash Flow": 19.63,
"Institutional Transactions": -0.0074,
"Performance (Year)": 0.4242,
"LT Debt/Equity": 0.5600000000000001,
"Average Volume": 2569.36,
"EPS growth this year": 0.147,
"50-Day Simple Moving Average": -0.0055
},
{
_id: {
$oid: "52853800bb1177ca391c1800"
},
Ticker: "AA",
"Profit Margin": 0.013,
"Institutional Ownership": 0.599,
"EPS growth past 5 years": -0.439,
"Total Debt/Equity": 0.65,
"Current Ratio": 1.2,
"Return on Assets": 0.008,
Sector: "Basic Materials",
"P/S": 0.41,
"Change from Open": -0.0022,
"Performance (YTD)": 0.0502,
"Performance (Week)": -0.0694,
"Quick Ratio": 0.7,
"Insider Transactions": 0.1031,
"P/B": 0.75,
"EPS growth quarter over quarter": 1.143,
"Payout Ratio": 0.429,
"Performance (Quarter)": 0.1058,
"Forward P/E": 21.35,
"P/E": 35.96,
"200-Day Simple Moving Average": 0.0823,
"Shares Outstanding": 1070,
"Earnings Date": {
$date: 1381264200000
},
"52-Week High": -0.0925,
"P/Cash": 9.460000000000001,
Change: 0.0033,
"Analyst Recom": 3.1,
"Volatility (Week)": 0.0345,
Country: "USA",
"Return on Equity": 0.023,
"50-Day Low": 0.1579,
Price: 9.02,
"50-Day High": -0.0925,
"Return on Investment": 0.007,
"Shares Float": 1068.5,
"Dividend Yield": 0.0133,
"EPS growth next 5 years": 0.1747,
Industry: "Aluminum",
Beta: 2.02,
"Sales growth quarter over quarter": -0.012,
"Operating Margin": 0.049,
"EPS (ttm)": 0.25,
PEG: 2.06,
"Float Short": 0.1129,
"52-Week Low": 0.1899,
"Average True Range": 0.3,
"EPS growth next year": 0.231,
"Sales growth past 5 years": -0.041,
Company: "Alcoa, Inc.",
Gap: 0.0056,
"Relative Volume": 0.6,
"Volatility (Month)": 0.0336,
"Market Cap": 9619.299999999999,
Volume: 14600992,
"Gross Margin": 0.163,
"Short Ratio": 4.51,
"Performance (Half Year)": 0.06519999999999999,
"Relative Strength Index (14)": 49.61,
"Insider Ownership": 0.0007,
"20-Day Simple Moving Average": -0.0192,
"Performance (Month)": 0.0766,
"P/Free Cash Flow": 33.17,
"Institutional Transactions": 0.0252,
"Performance (Year)": 0.0963,
"LT Debt/Equity": 0.6,
"Average Volume": 26728.11,
"EPS growth this year": -0.673,
"50-Day Simple Moving Average": 0.052
},
{
_id: {
$oid: "52853800bb1177ca391c1801"
},
Ticker: "AADR",
Sector: "Financial",
"Change from Open": 0.0055,
"Performance (YTD)": 0.1809,
"Performance (Week)": -0.0134,
"Performance (Quarter)": 0.061,
"200-Day Simple Moving Average": 0.0693,
"52-Week High": -0.0194,
Change: 0.0064,
"Volatility (Week)": 0.0072,
Country: "USA",
"50-Day Low": 0.07920000000000001,
Price: 36.4,
"50-Day High": -0.0194,
"Dividend Yield": 0.005,
Industry: "Exchange Traded Fund",
"52-Week Low": 0.2727,
"Average True Range": 0.31,
Company: "WCM/BNY Mellon Focused Growth ADR ETF",
Gap: 0.0008,
"Relative Volume": 0.72,
"Volatility (Month)": 0.0052,
Volume: 6660,
"Performance (Half Year)": 0.04,
"Relative Strength Index (14)": 51.91,
"20-Day Simple Moving Average": -0.0054,
"Performance (Month)": 0.0183,
"Performance (Year)": 0.229,
"Average Volume": 10.07,
"50-Day Simple Moving Average": 0.0158
},
{
_id: {
$oid: "52853800bb1177ca391c1802"
},
Ticker: "AAIT",
Sector: "Financial",
"Change from Open": -0.0232,
"Performance (YTD)": 0.1048,
"Performance (Week)": -0.0097,
"Performance (Quarter)": 0.1129,
"200-Day Simple Moving Average": 0.0492,
"52-Week High": -0.0641,
Change: -0.02,
"Volatility (Week)": 0.014,
Country: "USA",
"50-Day Low": 0.0609,
Price: 29.95,
"50-Day High": -0.0641,
"Dividend Yield": 0.036,
Industry: "Exchange Traded Fund",
"52-Week Low": 0.1791,
"Average True Range": 0.45,
Company: "iShares MSCI AC Asia Information Tech",
Gap: 0.0033,
"Relative Volume": 0.17,
"Volatility (Month)": 0.0111,
Volume: 250,
"Short Ratio": 0.04,
"Performance (Half Year)": 0.0307,
"Relative Strength Index (14)": 38.79,
"20-Day Simple Moving Average": -0.0295,
"Performance (Month)": 0.003,
"Performance (Year)": 0.1947,
"Average Volume": 1.64,
"50-Day Simple Moving Average": -0.0065
},
{
_id: {
$oid: "52853800bb1177ca391c1803"
},
Ticker: "AAMC",
"Institutional Ownership": 0.153,
Sector: "Financial",
"Change from Open": 0.0476,
"Performance (YTD)": 6.1951,
"Performance (Week)": -0.0781,
"Insider Transactions": 0.0002,
"P/B": 393.33,
"Performance (Quarter)": 0.7101,
"200-Day Simple Moving Average": 0.9846,
"Shares Outstanding": 2.35,
"52-Week High": -0.1812,
Change: 0.0135,
"Volatility (Week)": 0.0283,
Country: "USA",
"50-Day Low": 0.8672,
Price: 597.98,
"50-Day High": -0.1812,
Industry: "Asset Management",
"EPS (ttm)": -0.02,
"52-Week Low": 38.8653,
"Average True Range": 30.17,
Company: "Altisource Asset Management Corporation",
Gap: -0.0325,
"Relative Volume": 0.12,
"Volatility (Month)": 0.0388,
"Market Cap": 1386.5,
Volume: 543,
"Short Ratio": 8.91,
"Performance (Half Year)": 0.9832,
"Relative Strength Index (14)": 54.38,
"Insider Ownership": 0.4634,
"20-Day Simple Moving Average": -0.0189,
"Performance (Month)": 0.0631,
"Institutional Transactions": 0.1176,
"Average Volume": 4.94,
"50-Day Simple Moving Average": 0.1281
},
{
_id: {
$oid: "52853800bb1177ca391c1804"
},
Ticker: "AAME",
"Profit Margin": 0.056,
"Institutional Ownership": 0.05,
"EPS growth past 5 years": -0.167,
"Total Debt/Equity": 0.42,
"Return on Assets": 0.027,
Sector: "Financial",
"P/S": 0.57,
"Change from Open": -0.0025,
"Performance (YTD)": 0.316,
"Performance (Week)": 0,
"P/B": 0.87,
"EPS growth quarter over quarter": 7.667,
"Payout Ratio": 0.05,
"Performance (Quarter)": 0.0576,
"P/E": 10.63,
"200-Day Simple Moving Average": 0.08450000000000001,
"Shares Outstanding": 21.27,
"Earnings Date": {
$date: 1383541200000
},
"52-Week High": -0.0382,
"P/Cash": 1.82,
Change: -0.0025,
"Volatility (Week)": 0.0239,
Country: "USA",
"Return on Equity": 0.082,
"50-Day Low": 0.0747,
Price: 4.03,
"50-Day High": -0.0098,
"Return on Investment": 0.031,
"Shares Float": 5.24,
"Dividend Yield": 0.005,
Industry: "Life Insurance",
Beta: 0.72,
"Sales growth quarter over quarter": 0.274,
"Operating Margin": 0.078,
"EPS (ttm)": 0.38,
"Float Short": 0.0025,
"52-Week Low": 0.6087,
"Average True Range": 0.06,
"Sales growth past 5 years": 0.026,
Company: "Atlantic American Corp.",
Gap: 0,
"Relative Volume": 2.05,
"Volatility (Month)": 0.013,
"Market Cap": 85.92,
Volume: 17754,
"Short Ratio": 1.35,
"Performance (Half Year)": 0.0949,
"Relative Strength Index (14)": 46.3,
"Insider Ownership": 0.7513,
"20-Day Simple Moving Average": -0.0035,
"Performance (Month)": 0.0025,
"P/Free Cash Flow": 35.8,
"Institutional Transactions": -0.0009,
"Performance (Year)": 0.4175,
"LT Debt/Equity": 0.42,
"Average Volume": 9.51,
"EPS growth this year": 0.5,
"50-Day Simple Moving Average": 0.0038
},
{
_id: {
$oid: "52853800bb1177ca391c1805"
},
Ticker: "AAN",
"Profit Margin": 0.06,
"Institutional Ownership": 0.98,
"EPS growth past 5 years": 0.204,
"Total Debt/Equity": 0.12,
"Return on Assets": 0.074,
Sector: "Services",
"P/S": 1.02,
"Change from Open": 0,
"Performance (YTD)": 0.0658,
"Performance (Week)": 0.0488,
"Insider Transactions": 0.206,
"P/B": 1.89,
"EPS growth quarter over quarter": -0.263,
"Payout Ratio": 0.038,
"Performance (Quarter)": 0.0949,
"Forward P/E": 14.02,
"P/E": 17.11,
"200-Day Simple Moving Average": 0.0653,
"Shares Outstanding": 76.09999999999999,
"Earnings Date": {
$date: 1382646600000
},
"52-Week High": -0.023,
"P/Cash": 10.88,
Change: 0.0013,
"Analyst Recom": 2.8,
"Volatility (Week)": 0.0177,
Country: "USA",
"Return on Equity": 0.116,
"50-Day Low": 0.1508,
Price: 30.15,
"50-Day High": -0.002,
"Return on Investment": 0.138,
"Shares Float": 67.11,
"Dividend Yield": 0.0023,
"EPS growth next 5 years": 0.08,
Industry: "Rental & Leasing Services",
Beta: 1.04,
"Sales growth quarter over quarter": 0.019,
"Operating Margin": 0.108,
"EPS (ttm)": 1.76,
PEG: 2.14,
"Float Short": 0.0601,
"52-Week Low": 0.2264,
"Average True Range": 0.49,
"EPS growth next year": 0.0926,
"Sales growth past 5 years": 0.098,
Company: "Aaron's, Inc.",
Gap: 0.0013,
"Relative Volume": 1.71,
"Volatility (Month)": 0.0171,
"Market Cap": 2291.4,
Volume: 1190872,
"Gross Margin": 0.832,
"Short Ratio": 5.28,
"Performance (Half Year)": 0.0517,
"Relative Strength Index (14)": 71.11,
"Insider Ownership": 0.005,
"20-Day Simple Moving Average": 0.043,
"Performance (Month)": 0.0617,
"Institutional Transactions": 0.0172,
"Performance (Year)": 0.0255,
"LT Debt/Equity": 0.12,
"Average Volume": 763.14,
"EPS growth this year": 0.573,
"50-Day Simple Moving Average": 0.0742
},
{
_id: {
$oid: "52853800bb1177ca391c1806"
},
Ticker: "AAOI",
"Profit Margin": -0.023,
"Institutional Ownership": 0.114,
"EPS growth past 5 years": 0,
"Current Ratio": 1.5,
"Return on Assets": -0.048,
Sector: "Technology",
"P/S": 2.3,
"Change from Open": -0.0215,
"Performance (YTD)": 0.2671,
"Performance (Week)": -0.0381,
"Quick Ratio": 0.9,
"EPS growth quarter over quarter": -1,
"Forward P/E": 12.77,
"200-Day Simple Moving Average": 0.0654,
"Shares Outstanding": 12.6,
"52-Week High": -0.09039999999999999,
"P/Cash": 16.23,
Change: -0.0269,
"Analyst Recom": 1.8,
"Volatility (Week)": 0.0377,
Country: "USA",
"Return on Equity": 0.043,
"50-Day Low": 0.3539,
Price: 12.28,
"50-Day High": -0.09039999999999999,
"Return on Investment": -0.004,
"Shares Float": 11.46,
Industry: "Semiconductor - Integrated Circuits",
"Sales growth quarter over quarter": 0.256,
"Operating Margin": -0.007,
"EPS (ttm)": -0.13,
"Float Short": 0.0011,
"52-Week Low": 0.3539,
"Average True Range": 0.63,
"EPS growth next year": 38.52,
Company: "Applied Optoelectronics, Inc.",
Gap: -0.0055,
"Relative Volume": 0.12,
"Volatility (Month)": 0.0608,
"Market Cap": 159.06,
Volume: 12203,
"Gross Margin": 0.292,
"Short Ratio": 0.12,
"Insider Ownership": 0.021,
"20-Day Simple Moving Average": -0.0251,
"Performance (Month)": 0.2397,
"Average Volume": 110.95,
"EPS growth this year": 0.833,
"50-Day Simple Moving Average": 0.0654
},
{
_id: {
$oid: "52853800bb1177ca391c1807"
},
Ticker: "AAON",
"Profit Margin": 0.105,
"Institutional Ownership": 0.581,
"EPS growth past 5 years": 0.065,
"Total Debt/Equity": 0,
"Current Ratio": 2.3,
"Return on Assets": 0.163,
Sector: "Industrial Goods",
"P/S": 4.78,
"Change from Open": 0.019,
"Performance (YTD)": 0.956,
"Performance (Week)": -0.056,
"Quick Ratio": 1.6,
"Insider Transactions": 0.0024,
"P/B": 9.789999999999999,
"EPS growth quarter over quarter": -0.12,
"Payout Ratio": 0.188,
"Performance (Quarter)": 0.0944,
"Forward P/E": 24.01,
"P/E": 34.78,
"200-Day Simple Moving Average": 0.2614,
"Shares Outstanding": 55.14,
"Earnings Date": {
$date: 1383859800000
},
"52-Week High": -0.054,
"P/Cash": 49.53,
Change: 0.016,
"Analyst Recom": 3,
"Volatility (Week)": 0.0558,
Country: "USA",
"Return on Equity": 0.229,
"50-Day Low": 0.1558,
Price: 27.57,
"50-Day High": -0.054,
"Return on Investment": 0.198,
"Shares Float": 28.02,
"Dividend Yield": 0.0048,
"EPS growth next 5 years": 0.1,
Industry: "General Building Materials",
Beta: 1.2,
"Sales growth quarter over quarter": 0.095,
"Operating Margin": 0.158,
"EPS (ttm)": 0.78,
PEG: 3.48,
"Float Short": 0.0369,
"52-Week Low": 1.2639,
"Average True Range": 1.07,
"EPS growth next year": 0.1649,
"Sales growth past 5 years": 0.029,
Company: "AAON Inc.",
Gap: -0.0029,
"Relative Volume": 0.53,
"Volatility (Month)": 0.0381,
"Market Cap": 1495.92,
Volume: 43938,
"Gross Margin": 0.252,
"Short Ratio": 11.42,
"Performance (Half Year)": 0.317,
"Relative Strength Index (14)": 54.09,
"Insider Ownership": 0.203,
"20-Day Simple Moving Average": 0.0057,
"Performance (Month)": 0.0044,
"P/Free Cash Flow": 35.36,
"Institutional Transactions": 0.0094,
"Performance (Year)": 1.1312,
"LT Debt/Equity": 0,
"Average Volume": 90.54000000000001,
"EPS growth this year": 1,
"50-Day Simple Moving Average": 0.0389
},
{
_id: {
$oid: "52853800bb1177ca391c1808"
},
Ticker: "AAP",
"Profit Margin": 0.063,
"Institutional Ownership": 0.971,
"EPS growth past 5 years": 0.18,
"Total Debt/Equity": 0.41,
"Current Ratio": 1.3,
"Return on Assets": 0.08500000000000001,
Sector: "Services",
"P/S": 1.13,
"Change from Open": -0.0067,
"Performance (YTD)": 0.3808,
"Performance (Week)": 0.0119,
"Quick Ratio": 0.3,
"Insider Transactions": -0.036,
"P/B": 4.94,
"EPS growth quarter over quarter": 0.174,
"Payout Ratio": 0.043,
"Performance (Quarter)": 0.2183,
"Forward P/E": 14.45,
"P/E": 18.03,
"200-Day Simple Moving Average": 0.1903,
"Shares Outstanding": 72.75,
"Earnings Date": {
$date: 1383222600000
},
"52-Week High": -0.038,
"P/Cash": 12.78,
Change: -0.0077,
"Analyst Recom": 2.3,
"Volatility (Week)": 0.0182,
Country: "USA",
"Return on Equity": 0.306,
"50-Day Low": 0.2545,
Price: 98.92,
"50-Day High": -0.038,
"Return on Investment": 0.231,
"Shares Float": 72.26000000000001,
"Dividend Yield": 0.0024,
"EPS growth next 5 years": 0.13,
Industry: "Auto Parts Stores",
Beta: 0.34,
"Sales growth quarter over quarter": 0.043,
"Operating Margin": 0.106,
"EPS (ttm)": 5.53,
PEG: 1.39,
"Float Short": 0.0342,
"52-Week Low": 0.4159,
"Average True Range": 2.11,
"EPS growth next year": 0.2562,
"Sales growth past 5 years": 0.051,
Company: "Advance Auto Parts Inc.",
Gap: -0.001,
"Relative Volume": 0.32,
"Volatility (Month)": 0.0189,
"Market Cap": 7251.42,
Volume: 220670,
"Gross Margin": 0.501,
"Short Ratio": 3.3,
"Performance (Half Year)": 0.1687,
"Relative Strength Index (14)": 62.29,
"Insider Ownership": 0.007,
"20-Day Simple Moving Average": -0.0031,
"Performance (Month)": 0.2082,
"P/Free Cash Flow": 21.1,
"Institutional Transactions": 0.0089,
"Performance (Year)": 0.2613,
"LT Debt/Equity": 0.41,
"Average Volume": 749.1,
"EPS growth this year": 0.022,
"50-Day Simple Moving Average": 0.1151
},
{
_id: {
$oid: "52853800bb1177ca391c1809"
},
Ticker: "AAPL",
"Profit Margin": 0.217,
"Institutional Ownership": 0.621,
"EPS growth past 5 years": 0.424,
"Total Debt/Equity": 0.14,
"Current Ratio": 1.7,
"Return on Assets": 0.186,
Sector: "Consumer Goods",
"P/S": 2.75,
"Change from Open": 0.0092,
"Performance (YTD)": 0.0029,
"Performance (Week)": -0.0005999999999999999,
"Quick Ratio": 1.6,
"Insider Transactions": 0.3412,
"P/B": 3.81,
"EPS growth quarter over quarter": -0.047,
"Payout Ratio": 0.286,
"Performance (Quarter)": 0.0517,
"Forward P/E": 10.89,
"P/E": 13.14,
"200-Day Simple Moving Average": 0.1672,
"Shares Outstanding": 904.16,
"Earnings Date": {
$date: 1382992200000
},
"52-Week High": -0.08989999999999999,
"P/Cash": 11.61,
Change: 0.0139,
"Analyst Recom": 2,
"Volatility (Week)": 0.0151,
Country: "USA",
"Return on Equity": 0.291,
"50-Day Low": 0.1872,
Price: 527.87,
"50-Day High": -0.0154,
"Return on Investment": 0.255,
"Shares Float": 899.28,
"Dividend Yield": 0.0234,
"EPS growth next 5 years": 0.1427,
Industry: "Electronic Equipment",
Beta: 0.84,
"Sales growth quarter over quarter": 0.042,
"Operating Margin": 0.287,
"EPS (ttm)": 39.63,
PEG: 0.92,
"Float Short": 0.0203,
"52-Week Low": 0.397,
"Average True Range": 8.529999999999999,
"EPS growth next year": 0.1,
"Sales growth past 5 years": 0.354,
Company: "Apple Inc.",
Gap: 0.0047,
"Relative Volume": 0.74,
"Volatility (Month)": 0.0173,
"Market Cap": 470732.83,
Volume: 8750589,
"Gross Margin": 0.376,
"Short Ratio": 1.42,
"Performance (Half Year)": 0.213,
"Relative Strength Index (14)": 64.13,
"Insider Ownership": 0.0004,
"20-Day Simple Moving Average": 0.0176,
"Performance (Month)": 0.0501,
"P/Free Cash Flow": 13.83,
"Institutional Transactions": 0.0005999999999999999,
"Performance (Year)": -0.0169,
"LT Debt/Equity": 0.14,
"Average Volume": 12913.68,
"EPS growth this year": -0.1,
"50-Day Simple Moving Average": 0.0649
},
{
_id: {
$oid: "52853800bb1177ca391c180a"
},
Ticker: "AAT",
"Profit Margin": 0.155,
"Institutional Ownership": 0.861,
"EPS growth past 5 years": 0.08599999999999999,
"Total Debt/Equity": 1.6,
"Return on Assets": 0.021,
Sector: "Financial",
"P/S": 5.03,
"Change from Open": 0.0025,
"Performance (YTD)": 0.1692,
"Performance (Week)": -0.0229,
"Insider Transactions": 0.0411,
"P/B": 1.95,
"EPS growth quarter over quarter": 0.1,
"Payout Ratio": 0.84,
"Performance (Quarter)": 0.0313,
"Forward P/E": 188.24,
"P/E": 640,
"200-Day Simple Moving Average": 0.0144,
"Shares Outstanding": 39.82,
"Earnings Date": {
$date: 1383687000000
},
"52-Week High": -0.1008,
"P/Cash": 19.39,
Change: 0.0053,
"Analyst Recom": 1.8,
"Volatility (Week)": 0.023,
Country: "USA",
"Return on Equity": 0.061,
"50-Day Low": 0.1307,
Price: 32.17,
"50-Day High": -0.07049999999999999,
"Return on Investment": 0.043,
"Shares Float": 34.34,
"Dividend Yield": 0.0263,
"EPS growth next 5 years": 0.0485,
Industry: "REIT - Office",
"Sales growth quarter over quarter": -0.441,
"Operating Margin": 0.319,
"EPS (ttm)": 0.05,
PEG: 131.96,
"Float Short": 0.0354,
"52-Week Low": 0.3303,
"Average True Range": 0.6899999999999999,
"EPS growth next year": -0.1053,
"Sales growth past 5 years": 0.149,
Company: "American Assets Trust, Inc.",
Gap: 0.0028,
"Relative Volume": 0.16,
"Volatility (Month)": 0.0199,
"Market Cap": 1274.14,
Volume: 40765,
"Gross Margin": 0.733,
"Short Ratio": 4.35,
"Performance (Half Year)": -0.0727,
"Relative Strength Index (14)": 46.23,
"Insider Ownership": 0.007,
"20-Day Simple Moving Average": -0.0269,
"Performance (Month)": -0.0009,
"Institutional Transactions": 0.1931,
"Performance (Year)": 0.2144,
"LT Debt/Equity": 1.6,
"Average Volume": 279.14,
"EPS growth this year": 0,
"50-Day Simple Moving Average": 0.014
},
{
_id: {
$oid: "52853800bb1177ca391c180b"
},
Ticker: "AAU",
"Institutional Ownership": 0.059,
"EPS growth past 5 years": -0.232,
"Total Debt/Equity": 0,
"Current Ratio": 44.8,
"Return on Assets": -0.207,
Sector: "Basic Materials",
"P/S": 250.21,
"Change from Open": -0.0159,
"Performance (YTD)": -0.6057,
"Performance (Week)": -0.0385,
"Quick Ratio": 44,
"P/B": 1.58,
"EPS growth quarter over quarter": 0.333,
"Performance (Quarter)": -0.399,
"200-Day Simple Moving Average": -0.2745,
"Shares Outstanding": 60.05,
"52-Week High": -0.6242,
"P/Cash": 4.78,
Change: -0.008,
"Volatility (Week)": 0.0617,
Country: "Canada",
"Return on Equity": -0.209,
"50-Day Low": 0.0333,
Price: 1.24,
"50-Day High": -0.2994,
"Return on Investment": -0.203,
"Shares Float": 52.97,
Industry: "Gold",
Beta: 0.43,
"EPS (ttm)": -0.16,
"Float Short": 0.009299999999999999,
"52-Week Low": 0.1273,
"Average True Range": 0.06,
"Sales growth past 5 years": -0.156,
Co
Also see: Tab Triggers