| <!-- | |
| ~ Licensed to the Apache Software Foundation (ASF) under one | |
| ~ or more contributor license agreements. See the NOTICE file | |
| ~ distributed with this work for additional information | |
| ~ regarding copyright ownership. The ASF licenses this file | |
| ~ to you under the Apache License, Version 2.0 (the | |
| ~ "License"); you may not use this file except in compliance | |
| ~ with the License. You may obtain a copy of the License at | |
| ~ | |
| ~ http://www.apache.org/licenses/LICENSE-2.0 | |
| ~ | |
| ~ Unless required by applicable law or agreed to in writing, | |
| ~ software distributed under the License is distributed on an | |
| ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| ~ KIND, either express or implied. See the License for the | |
| ~ specific language governing permissions and limitations | |
| ~ under the License. | |
| --> | |
| <!DOCTYPE html> | |
| <html lang="en" | |
| xmlns:h="http://java.sun.com/jsf/html" | |
| xmlns:f="http://java.sun.com/jsf/core" | |
| xmlns:ui="http://java.sun.com/jsf/facelets" | |
| xmlns:hx="http://myfaces.apache.org/html5/html" | |
| xmlns:fx="http://myfaces.apache.org/html5/core"> | |
| <h:head> | |
| <ui:insert name="header"> | |
| </ui:insert> | |
| <meta charset="utf-8" /> | |
| <title>Apache Myfaces Html5 Demo</title> | |
| <h:outputStylesheet library="script/google-code-prettify" name="prettify.css" /> | |
| <h:outputScript library="script/google-code-prettify" name="prettify.js" /> | |
| <h:outputScript library="script/demo" name="common.js" /> | |
| <h:outputStylesheet library="style" name="text.css" /> | |
| <h:outputStylesheet library="style" name="animation.css" /> | |
| <h:outputStylesheet library="style" name="box.css" /> | |
| <h:outputStylesheet library="style" name="common.css" /> | |
| <h:outputScript library="javax.faces" name="jsf.js" /> | |
| <style> | |
| #menu, #menu div div { | |
| z-index: 1000; | |
| -webkit-transition: all 0.5s ease-out; | |
| -moz-transition: all 0.5s ease-out; | |
| -o-transition: all 0.5s ease-out; | |
| border-radius: 8px; | |
| -moz-border-radius: 8px; | |
| } | |
| .menu{ | |
| height: 25px; | |
| width:835px; | |
| overflow: hidden; | |
| text-align: center; | |
| border : 1px solid darkGray; | |
| padding-left:20px; | |
| padding-right:20px; | |
| } | |
| .menuhover{ | |
| height: 185px; | |
| } | |
| #menuPlaceHolder{ | |
| font-size:20px; | |
| font-weight: bold; | |
| } | |
| #menu div div{ | |
| float:left; | |
| font-size: 15px; | |
| width: 80px; | |
| height: 15px; | |
| border-radius: 8px; | |
| -moz-border-radius: 8px; | |
| margin-left:3px; | |
| padding-top: 10%; | |
| padding-bottom: 10%; | |
| box-shadow: rgba(204, 204, 204, 0.25) -3px 7px 9px; | |
| -webkit-box-shadow: rgba(204, 204, 204, 0.25) -3px 7px 9px; | |
| -moz-box-shadow: rgba(204, 204, 204, 0.25) -3px 7px 9px; | |
| background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(white)); | |
| background: -moz-linear-gradient(-90deg, #EEEEEE, white); | |
| } | |
| #menu div div:hover{ | |
| box-shadow: rgba(204, 204, 204, 0.75) -3px 7px 9px; | |
| -webkit-box-shadow: rgba(204, 204, 204, 0.75) -3px 7px 9px; | |
| -moz-box-shadow: rgba(204, 204, 204, 0.75) -3px 7px 9px; | |
| background: -webkit-gradient(linear, left top, left bottom, from(#DDDDDD), to(white)); | |
| background: -moz-linear-gradient(-90deg, #CCCCCC, white); | |
| -webkit-transform: scale(1.3) rotate(5deg) translate(0,15px); | |
| -moz-transform: scale(1.3) rotate(5deg) translate(0,15px); | |
| } | |
| #menu div div a{ | |
| box-shadow: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| border: none; | |
| border-radius: none; | |
| -moz-border-radius: none; | |
| background: none; | |
| background: none; | |
| } | |
| </style> | |
| <style> | |
| .slide{ | |
| border-radius: 3px 3px !important; | |
| -moz-border-radius: 3px 3px !important; | |
| border: 1px solid #999; | |
| padding: 3px 0px 5px 0px; | |
| width: 98% !important; | |
| box-shadow: rgba(150, 150, 150, 0.85) -3px 7px 9px; | |
| -webkit-box-shadow: rgba(150, 150, 150, 0.85) -3px 7px 9px; | |
| -moz-box-shadow: rgba(150, 150, 150, 0.85) -3px 7px 9px; | |
| background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(white)); | |
| background: -moz-linear-gradient(-90deg, #EEEEEE, white); | |
| box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px; | |
| -webkit-box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px; | |
| -moz-box-shadow: rgba(0, 0, 128, 0.25) -3px 7px 9px; | |
| margin-top:20px; | |
| } | |
| </style> | |
| </h:head> | |
| <h:body> | |
| <table align="center"> | |
| <tr><td> | |
| <div id="menu" class="fontedText menu" | |
| onmouseover="className='fontedText menu menuhover';" | |
| onmouseout="className='fontedText menu';"> | |
| <div id="menuPlaceHolder" class="fontedHeader" > | |
| Menu | |
| </div> | |
| <div style="text-align:center; float: center; padding-right:3px; padding-top:10px; position: relative;"> | |
| <div> | |
| <h:link outcome="slideView" value="Slide View Component"/> | |
| </div> | |
| <div> | |
| <h:link outcome="inputTypes" value="Input Types"/> | |
| </div> | |
| <div> | |
| <h:link outcome="clientSideValidation" value="Client Side Validation"/> | |
| </div> | |
| <div> | |
| <h:link outcome="effects" value="Effects"/> | |
| </div> | |
| <div> | |
| <h:link outcome="animations" value="Animations"/> | |
| </div> | |
| <div> | |
| <h:link outcome="media" value="Media"/> | |
| </div> | |
| <div> | |
| <h:link outcome="meterAndProgress" value="Meter Progress"/> | |
| </div> | |
| <div> | |
| <h:link outcome="datetime" value="Date-Time"/> | |
| </div> | |
| <div> | |
| <h:link outcome="suggestions" value="Suggestions"/> | |
| </div> | |
| <div> | |
| <h:link outcome="dnd" value="Drag and Drop"/> | |
| </div> | |
| </div> | |
| </div> | |
| </td></tr> | |
| </table> | |
| <div class="fontedText roundedBox gradientBox" style="padding: 20px; margin: 10px;" > | |
| <ui:insert name="content" /> | |
| </div> | |
| <script type="text/javascript"> | |
| removeCDataAndTrim(); | |
| prettyPrint(); | |
| </script> | |
| </h:body> | |
| </html> |