david
3acc0f71e7
git-svn-id: https://192.168.0.254/svn/Proyectos.Incam_MaquetaIntranet/trunk@5 dea6828b-3720-d243-8757-cae5f23734d0
364 lines
18 KiB
HTML
364 lines
18 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Interface Elements | Mandy Lane - Premium Admin Template</title>
|
|
<link rel="stylesheet" media="screen" href="css/style.css" />
|
|
|
|
<!--[if IE 9]>
|
|
<link rel="stylesheet" media="screen" href="css/ie9.css"/>
|
|
<![endif]-->
|
|
|
|
<!--[if IE 8]>
|
|
<link rel="stylesheet" media="screen" href="css/ie8.css"/>
|
|
<![endif]-->
|
|
|
|
<!--[if IE 7]>
|
|
<link rel="stylesheet" media="screen" href="css/ie7.css"/>
|
|
<![endif]-->
|
|
|
|
<script type="text/javascript" src="js/plugins/jquery-1.7.min.js"></script>
|
|
<script type="text/javascript" src="js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
|
|
<script type="text/javascript" src="js/plugins/jquery.validate.min.js"></script>
|
|
<script type="text/javascript" src="js/plugins/jquery.colorbox-min.js"></script>
|
|
<script type="text/javascript" src="js/plugins/colorpicker.js"></script>
|
|
<script type="text/javascript" src="js/plugins/jquery.jgrowl.js"></script>
|
|
<script type="text/javascript" src="js/plugins/jquery.alerts.js"></script>
|
|
<script type="text/javascript" src="js/custom/general.js"></script>
|
|
<script type="text/javascript" src="js/custom/elements.js"></script>
|
|
|
|
</head>
|
|
|
|
<body class="bodygrey">
|
|
|
|
<div class="headerspace"></div>
|
|
|
|
<div class="header">
|
|
|
|
<form id="search" action="" method="post">
|
|
<input type="text" name="keyword" /> <button class="searchbutton"></button>
|
|
</form>
|
|
|
|
<div class="topheader">
|
|
<ul>
|
|
<li class="note">
|
|
<a href="pages/message.html" class="messagenotify">
|
|
<span class="wrap">
|
|
<span class="thicon msgicon"></span>
|
|
<span class="count">1</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="note">
|
|
<a href="pages/info.html" class="alertnotify">
|
|
<span class="wrap">
|
|
<span class="thicon infoicon"></span>
|
|
<span class="count">5</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul><!--horMenu-->
|
|
</div><!--topheader-->
|
|
|
|
|
|
<!--logo-->
|
|
<a href=""><img src="images/logo2.png" alt="Logo" /></a>
|
|
|
|
<div class="tabmenu">
|
|
<ul>
|
|
<li><a href="dashboard.html" class="dashboard"><span>Dashboard</span></a></li>
|
|
<li class="current"><a href="elements.html" class="elements"><span>Elements</span></a>
|
|
<ul class="subnav">
|
|
<li><a href=""><span>Sub Menu One</span></a></li>
|
|
<li><a href=""><span>Sub Menu Two</span></a></li>
|
|
<li><a href=""><span>Sub Menu Three</span></a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="reports.html" class="reports"><span>Reports</span></a></li>
|
|
<li><a href="users.html" class="users"><span>Users</span></a></li>
|
|
</ul>
|
|
</div><!--tabmenu-->
|
|
|
|
<div class="accountinfo">
|
|
<img src="images/avatar.png" alt="Avatar" />
|
|
<div class="info">
|
|
<h3>John Doe</h3>
|
|
<small>youremail@domain.com</small>
|
|
<p>
|
|
<a href="">Account Settings</a> <a href="index.html">Logout</a>
|
|
</p>
|
|
</div><!--info-->
|
|
</div><!--accountinfo-->
|
|
</div><!--header-->
|
|
|
|
|
|
<div class="sidebar">
|
|
<div id="accordion">
|
|
<h3 class="open">Main Navigation</h3>
|
|
<div class="content" style="display: block;">
|
|
<ul class="leftmenu">
|
|
<li><a href="dashboard.html" class="home">General</a></li>
|
|
<li><a href="forms.html" class="form">Form Styling</a></li>
|
|
<li><a href="tables.html" class="table">Table Styling</a></li>
|
|
<li><a href="gallery.html" class="gallery">Image Gallery</a></li>
|
|
<li><a href="grid.html" class="grid">Grid Styling</a></li>
|
|
<li><a href="calendar.html" class="calendar">Calendar</a></li>
|
|
<li><a href="buttons.html" class="buttons">Buttons & Icons</a></li>
|
|
<li><a href="editor.html" class="editor">WYSIWYG Editor</a></li>
|
|
<li><a href="filemanager.html" class="file">File Manager</a></li>
|
|
<li><a href="invoice.html" class="form">Invoice</a></li>
|
|
<li><a href="404.html" class="error">404 Page</a></li>
|
|
</ul>
|
|
</div>
|
|
<h3 class="open">Custom Text</h3>
|
|
<div class="content" style="display: block;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
|
|
</div>
|
|
|
|
<br clear="all" />
|
|
|
|
</div><!--leftmenu-->
|
|
|
|
|
|
<div class="maincontent">
|
|
|
|
<div class="breadcrumbs">
|
|
<a href="dashboard.html">Dashboard</a>
|
|
<span>Interface Elements</span>
|
|
</div><!-- breadcrumbs -->
|
|
|
|
<div class="left">
|
|
|
|
<h1 class="pageTitle">Interface Elements</h1>
|
|
|
|
<div class="one_half last">
|
|
<div class="widgetbox2">
|
|
<h3><span>Image Loaders</span></h3>
|
|
<div class="content loaders">
|
|
<img src="images/loaders/loader1.gif" alt="" />
|
|
<img src="images/loaders/loader2.gif" alt="" />
|
|
<img src="images/loaders/loader3.gif" alt="" />
|
|
<img src="images/loaders/loader4.gif" alt="" />
|
|
<img src="images/loaders/loader8.gif" alt="" />
|
|
<img src="images/loaders/loader9.gif" alt="" />
|
|
<img src="images/loaders/loader5.gif" alt="" />
|
|
<img src="images/loaders/loader6.gif" alt="" />
|
|
<img src="images/loaders/loader7.gif" alt="" />
|
|
<img src="images/loaders/loader10.gif" alt="" />
|
|
<br /><br />
|
|
<small>You can create your own loader images by going to <a href="ajaxload.info">ajaxload.info</a></small>
|
|
</div><!--content-->
|
|
</div><!--widgetbox2-->
|
|
</div><!--one_half last-->
|
|
|
|
<br clear="all" />
|
|
|
|
<div class="two_third last">
|
|
<div class="widgetbox2">
|
|
<h3><span>Buttons</span></h3>
|
|
<div class="content">
|
|
<button class="button button_white">Button</button>
|
|
<button class="button button_blue">Button</button>
|
|
<button class="button button_black">Button</button>
|
|
<button class="button button_red">Button</button>
|
|
<button class="button button_yellow">Button</button>
|
|
<button class="button button_green">Button</button>
|
|
<button class="button button_brown">Button</button>
|
|
<button class="button button_lblue">Button</button> <br />
|
|
</div><!--content-->
|
|
</div><!--widgetbox2-->
|
|
</div><!--two_third last-->
|
|
|
|
<br clear="all" />
|
|
|
|
<div class="two_third last">
|
|
<div class="widgetbox2">
|
|
<h3><span>Pickers</span></h3>
|
|
<div class="content nopadding">
|
|
<div class="padding15 borderbottom">
|
|
<label>Colorpicker</label>
|
|
<div class="floatleft">
|
|
<input id="colorpicker" type="text" class="width50" />
|
|
<br /><br />
|
|
<a id="colorselector"></a>
|
|
</div>
|
|
</div>
|
|
<br clear="all" />
|
|
<p class="padding15">
|
|
<label>Datepicker</label>
|
|
<input id="datepicker" type="text" class="width50" />
|
|
</p>
|
|
</div><!--content-->
|
|
</div><!--widgetbox2-->
|
|
|
|
<br clear="all" />
|
|
|
|
<div class="widgetbox2">
|
|
<h3><span>Sliders</span></h3>
|
|
<div class="content nopadding">
|
|
<div class="padding1020 borderbottom">
|
|
<label>Normal slider</label>
|
|
<div class="marginleft150">
|
|
<div id="slider"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<br clear="all" />
|
|
|
|
<div class="padding15 borderbottom">
|
|
<label class="marginbottom20">Snap to increments</label>
|
|
<div class="marginleft150">
|
|
<small>Sales earning: <span id="amount" class="color069"></span></small>
|
|
<div id="slider2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<br clear="all" />
|
|
|
|
<div class="padding15 borderbottom">
|
|
<label class="marginbottom20">Range slider</label>
|
|
<div class="marginleft150">
|
|
<small>Price Range: <span id="amount2" class="color069"></span></small>
|
|
<div id="slider3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="padding15 borderbottom">
|
|
<label class="marginbottom20">Fixed Minimum</label>
|
|
<div class="marginleft150">
|
|
<small>Maximum price: <span id="amount4" class="color069"></span></small>
|
|
<div id="slider4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="padding15 borderbottom">
|
|
<label class="marginbottom20">Fixed Maximum</label>
|
|
<div class="marginleft150">
|
|
<small>Minimum price: <span id="amount5" class="color069"></span></small>
|
|
<div id="slider5"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="padding15 borderbottom">
|
|
<label class="marginbottom20">Vertical Slider</label>
|
|
<div class="marginleft150">
|
|
<div class="floatleft" style="width: 70px;">
|
|
<small>Volume: <span id="amount6" class="color069"></span></small> <br />
|
|
<div id="slider6" class="floatleft" style="height:100px;"></div>
|
|
</div>
|
|
|
|
<div class="floatleft" style="margin-left: 80px;">
|
|
<small>Price Range: <span id="amount7" class="color069"></span></small> <br />
|
|
<div id="slider7" class="floatleft" style="height:100px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!--content-->
|
|
</div><!--widgetbox2-->
|
|
|
|
</div><!--two_third last-->
|
|
|
|
<br clear="all" />
|
|
|
|
<div class="one_third last">
|
|
<div class="widgetbox2">
|
|
<h3><span>Growl Notification</span></h3>
|
|
<div class="content">
|
|
<a href="" class="anchorbutton button_white growl">Basic growl</a>
|
|
<a href="" class="anchorbutton button_white growl2">Long live growl message</a>
|
|
</div><!--content-->
|
|
</div><!--widgetbox2-->
|
|
</div><!--one_third last-->
|
|
|
|
<br clear="all" />
|
|
|
|
<div class="two_third last">
|
|
<div id="tabs" class="tabs">
|
|
<ul>
|
|
<li><a href="#tabs-1">Sample Tab A</a></li>
|
|
<li><a href="#tabs-2">Sample Tab B</a></li>
|
|
<li><a href="#tabs-3">Sample Tab C</a></li>
|
|
</ul>
|
|
<div id="tabs-1">
|
|
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
|
|
</div>
|
|
<div id="tabs-2">
|
|
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
|
|
</div>
|
|
<div id="tabs-3">
|
|
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
|
|
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
|
|
</div>
|
|
|
|
</div><!-- tabs -->
|
|
</div><!-- two_third last -->
|
|
|
|
<br clear="all" /><br />
|
|
|
|
<div class="two_third last">
|
|
<div class="widgetbox2">
|
|
<h3><span>Modal Alert Boxes</span></h3>
|
|
<div class="content">
|
|
<button class="button button_white alertboxbutton">Basic Alert</button>
|
|
<button class="button button_white confirmbutton">Confirm Box</button>
|
|
<button class="button button_white promptbutton">Prompt Box</button>
|
|
<button class="button button_white alerthtmlbutton">Dialog with HTML Support</button>
|
|
</div><!--content-->
|
|
</div><!--widgetbox2-->
|
|
</div><!-- two_third last -->
|
|
|
|
<br clear="all" /><br />
|
|
|
|
<div class="one_third last">
|
|
<div class="accordion">
|
|
<h3><a href="#">First header</a></h3>
|
|
<div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
|
|
<h3><a href="#">Second header</a></h3>
|
|
<div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
|
|
<h3><a href="#">Third header</a></h3>
|
|
<div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
|
|
</div><!-- accordion -->
|
|
</div><!-- one_third last -->
|
|
|
|
<br clear="all" /><br />
|
|
|
|
<div class="two_third last">
|
|
<div class="notification msginfo">
|
|
<a class="close"></a>
|
|
<p>This is an information message, can be any general information.</p>
|
|
</div><!-- notification msginfo -->
|
|
|
|
<div class="notification msgsuccess">
|
|
<a class="close"></a>
|
|
<p>This is a success message. You can use this for any successful process.</p>
|
|
</div><!-- notification msgsuccess -->
|
|
|
|
<div class="notification msgalert">
|
|
<a class="close"></a>
|
|
<p>This is an alert message. You can use this for any reminders or alerts.</p>
|
|
</div><!-- notification msgalert -->
|
|
|
|
<div class="notification msgerror">
|
|
<a class="close"></a>
|
|
<p>This is an error message. If there is a failure or something.</p>
|
|
</div><!-- notification msgerror -->
|
|
|
|
</div><!-- two_third last -->
|
|
|
|
</div><!--left-->
|
|
|
|
<br clear="all" />
|
|
|
|
</div><!--maincontent-->
|
|
|
|
<br />
|
|
<div class="footer footer_float">
|
|
<div class="footerinner">
|
|
© 2011. Mandy Lane Premium Template. All Rights Reserved.
|
|
</div><!-- footerinner -->
|
|
</div><!-- footer -->
|
|
|
|
|
|
</body>
|
|
</html>
|