Ghost/core/test/html/notifications.html
2013-05-11 17:44:25 +01:00

191 lines
7.7 KiB
HTML

<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<head>
<meta charset="utf-8">
<title>Ghost</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- For all browsers -->
<link rel="stylesheet" href="../core/admin/assets/css/screen.css">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="logo" type="image/svg" href="assets/images/logo.svg"/>
<meta http-equiv="cleartype" content="on">
</head>
<body class="editor">
<header id="global-header" class="navbar">
<a id="ghost" class="icon-ghost" href="#"><span class="hidden">Ghost</span></a>
<nav id="global-nav" role="navigation">
<ul id="main-menu">
<li><a href="#">Dashboard</a></li>
<li class="active"><a href="#">Blog</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Settings</a></li>
<li id="user-menu" class="subnav">
<a href="#" data-toggle="ul">
<img class="avatar" src="assets/img/user.jpg" alt="Avatar" />
<span class="name">John O'Nolan</span>
</a>
<ul>
<li><a href="#">Your Profile</a></li>
<li class="divider"></li>
<li><a href="#">Help / Support</a></li>
<li><a href="#">Keyboard Shortcuts</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main role="main">
<section class="notification">
This is a general notification. The default. Gets your attention. Tells you stuff.
<a class="close" href="#"><span class="hidden">Close</span></a>
</section>
<section class="notification-success">
The action you attempted completed successfully.
<a class="close" href="#"><span class="hidden">Close</span></a>
</section>
<section class="notification-alert">
General information. Yay.
<a class="close" href="#"><span class="hidden">Close</span></a>
</section>
<section class="notification-error">
You done fucked up good.
<a class="close" href="#"><span class="hidden">Close</span></a>
</section>
<header>
<section class="box entry-title">
<input type="text" placeholder="The Post Title Gets Inserted Up Here">
<a class="icon-fullscreen" href="#" title="Enter full screen mode"><span class="hidden">Full Screen</span></a>
</section>
<span class="entry-permalink"><strong>Permalink:</strong> http://yoursite.com/<strong>the-post-title-goes-here</strong>/</span>
</header>
<div class="wrapper">
<div class="half-wrap">
<section class="box entry-content active">
<header>
Markdown <a href="#" title="What is Markdown?" class="right icon-faq"><span class="hidden">?</span></a>
</header>
<textarea class="markdown">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.
##This is a Heading 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
* Lorem ipsum dolor sit amet
* Lorem ipsum dolor sit amet
* Lorem ipsum dolor sit amet
* Lorem ipsum dolor sit amet
* Lorem ipsum dolor sit amet
###This is a Heading 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
1. Lorem ipsum dolor sit amet
2. Lorem ipsum dolor sit amet
3. Lorem ipsum dolor sit amet
4. Lorem ipsum dolor sit amet
5. Lorem ipsum dolor sit amet
</textarea>
</section>
</div>
<div class="half-wrap">
<section class="box entry-preview">
<header>
Preview <span class="right">561 words</span>
</header>
<section class="entry-preview-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis <a href="#">parturient</a> montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</p>
<h2>This is a Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="img-placeholder">
<span>Drag image here - or <a href="#" class="btn btn-light btn-rounded">Upload</a></span>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<h3>This is a Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ol>
</section>
</section>
</div>
</div>
<footer id="publish-bar">
<nav>
<a id="entry-categories" href="#" class="left"><span class="icon-tag"></span> Category: Default</a>
<div class="right">
<a id="entry-settings" href="#" class="button-settings"><span class="icon-settings"></span> <span class="hidden">Settings</span></a>
<a id="save-post" href="#" class="button button-save">Save Draft</a><a id="publish-post" href="#" class="button button-publish">Publish</a>
</div>
</nav>
</footer>
</main>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.entry-content header, .entry-preview header').click(function(){
$('.entry-content, .entry-preview').removeClass('active');
$(this).closest('section').addClass('active');
});
});
</script>
</body>
</html>