init all
This commit is contained in:
adrido
commit
9c860185e1
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
||||
* text=auto
|
||||
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
# Include your project-specific ignores in this file
|
||||
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
|
||||
connectsql.php
|
||||
17
.project
Normal file
17
.project
Normal file
@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<projectDescription>
|
||||
<name>mt-skins</name>
|
||||
<comment></comment>
|
||||
<projects>
|
||||
</projects>
|
||||
<buildSpec>
|
||||
<buildCommand>
|
||||
<name>com.aptana.ide.core.unifiedBuilder</name>
|
||||
<arguments>
|
||||
</arguments>
|
||||
</buildCommand>
|
||||
</buildSpec>
|
||||
<natures>
|
||||
<nature>com.aptana.projects.webnature</nature>
|
||||
</natures>
|
||||
</projectDescription>
|
||||
BIN
addskin.png
Normal file
BIN
addskin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
15
crossdomain.xml
Normal file
15
crossdomain.xml
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0"?>
|
||||
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
|
||||
<cross-domain-policy>
|
||||
<!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->
|
||||
|
||||
<!-- Most restrictive policy: -->
|
||||
<site-control permitted-cross-domain-policies="none"/>
|
||||
|
||||
<!-- Least restrictive policy: -->
|
||||
<!--
|
||||
<site-control permitted-cross-domain-policies="all"/>
|
||||
<allow-access-from domain="*" to-ports="*" secure="false"/>
|
||||
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
|
||||
-->
|
||||
</cross-domain-policy>
|
||||
179
css/main.css
Normal file
179
css/main.css
Normal file
@ -0,0 +1,179 @@
|
||||
.pixelated {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
}
|
||||
.select img {
|
||||
heigth: 128px;
|
||||
width: 256px;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
.select {
|
||||
font-size: 14px;
|
||||
max-height: 514px;
|
||||
overflow: auto;
|
||||
transition-property: all;
|
||||
transition-duration: 2s;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
.select div.option {
|
||||
|
||||
margin: 5px;
|
||||
display: block;
|
||||
min-height: 128px;
|
||||
border: 2px solid rgb(73, 135, 179);
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
box-shadow: 0px 1px 4px rgb(153, 153, 153);
|
||||
|
||||
color: rgb(102, 102, 102);
|
||||
}
|
||||
.option button {
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.option:hover button {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.select div.option:hover, .select div.option:focus {
|
||||
background: -moz-linear-gradient(center top , #F1F5F9 0%, #C5E1F3 50%, #ABD5F1 51%, #ABD5F1 100%) repeat scroll 0 0 transparent;
|
||||
border: 2px solid #669900;
|
||||
color: #000000;
|
||||
outline: medium none;
|
||||
}
|
||||
.toolbar {
|
||||
height: 32px;
|
||||
background: #deefff; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #deefff 0%, #98bede 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #deefff 0%,#98bede 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #deefff 0%,#98bede 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #deefff 0%,#98bede 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, #deefff 0%,#98bede 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 ); /* IE6-9 */
|
||||
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 1px 1px rgba(0, 0, 0, 0.15) inset, 0px -1px 0px rgba(255, 255, 255, 0.05) inset, 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
font-size: 14px;
|
||||
}
|
||||
.toolbar button, .toolbar input, .toolbar select {
|
||||
transition-property: all;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: ease-in;
|
||||
margin: 3px;
|
||||
border: 2px solid rgb(73, 135, 179);
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
box-shadow: 0px 1px 4px rgb(153, 153, 153);
|
||||
background: #ffffff; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
|
||||
color: rgb(102, 102, 102)
|
||||
}
|
||||
.toolbar [disabled],.toolbar [disabled]:hover,.toolbar [disabled]:focus,.toolbar [disabled]:active{
|
||||
border: 2px solid grey;
|
||||
}
|
||||
|
||||
.toolbar button:hover {
|
||||
border: 2px solid #669900;
|
||||
color: #000000;
|
||||
outline: medium none;
|
||||
background: #ebf1f6; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
button.abort::before {
|
||||
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAG7AAABuwE67OPiAAAACXZwQWcAAAAQAAAAEABcxq3DAAACGElEQVQ4y6WTP2gTcRzF3zfNEZs/vSSXpObP5Q8Jlpba4agIFqxFqJcIUYOz4CQIdpS4pU4dhEDRwSHdi1DKZXHRwYCDCIJ2KIJtNUkVa0+tMSWX6/2cLlzbTPaNv/d7H96Px48YYziJbCdKHwWsEElvbt/6vspx2aMXVzku++HB/cYKkdQXsEwk+SfHXp0ZHQtGC7LyjEi2eNmwPK3Eg8Ho6SvTtWULpAfQgKXk5HnXfmMbseSoPZy7VK0Q5cpE15yXL1TFkQl7e6uOzGzOqQFLZs5uARTXai+ryfFzdjAbAuGUfeNiS9k1DJpNZGxqvYkBpwPfXrzXNaBo5si6wlMieXgkqsTEDGdoDDavG/vMgLNjwJGIYOvt627z3cf8Hcae9wUAwCKRHMkMK5FglDvQCORwQGcdfG1+6u58+ZWfs4QPPcFUB4CmdaGvr0P/2QYBGPA5wTyn0Okz46EGC0SymBCU8T8dDmoLbb8bBGBQbQF+N9Y8g93655180dKit8I8UVZMRZSpls4JagsuwYsnPM8WeS9zBXwQ1Bam/h5wYjquLPD81WMAFg89nhnycqHd33AH/Ch7eUPYbBZ8m42bZZ433EEBoR8qZjxDHC+Kj3q1GWNgjKEESJVEbK8pnWWldEqfA66b3l2gMJ9O6U1pglUSsb0SIJleD2BCHmaiG/eAG9ZzE1LLZbetYcbY8RlP9Jn+R/8AexLrGEGs+4AAAAAldEVYdGNyZWF0ZS1kYXRlADIwMDktMTEtMTVUMTc6MDI6MzQtMDc6MDC2544SAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEwLTAyLTIwVDIzOjI2OjE1LTA3OjAwBjtcgQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMC0wMS0xMVQwOToyNDo0MS0wNzowMEqp8EAAAABndEVYdExpY2Vuc2UAaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbGljZW5zZXMvYnktc2EvMy4wLyBvciBodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9saWNlbnNlcy9MR1BMLzIuMS9bjzxjAAAAJXRFWHRtb2RpZnktZGF0ZQAyMDA5LTAzLTE5VDEwOjUyOjUxLTA2OjAwf2j9BgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAATdEVYdFNvdXJjZQBPeHlnZW4gSWNvbnPsGK7oAAAAJ3RFWHRTb3VyY2VfVVJMAGh0dHA6Ly93d3cub3h5Z2VuLWljb25zLm9yZy/vN6rLAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
button.addimg::before {
|
||||
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAG7AAABuwE67OPiAAAACXZwQWcAAAAQAAAAEABcxq3DAAACNklEQVQ4y5WTzUuUURTGf+fe+76Ob+OkpjEWFhlJ5a4EmdoIQm7atQhcum8VLfoDgv6HoIWrwaVElJtwlbXpCwpMdCiTFIcZ58Pm433f02Jm1ELIHni43APnnOe59xwBTgG9gPB/UKDogOuFQuFZFEXGGIOIIMYgsH8i0oofyhaROAiC2651w6t+uHt0jw7/wtDkcwvgADEiUH3L8KCFpgMCqFQgjA+STZsOvm9FGDEA4tpysL/KSMHC2FUIPFj34fXqQbIHdLcK2OqBkv0C9Q3Dl7KHX6swcu0G0rMJzVWIWxbKNSFfE4yBqsKQSNs9TJfLpRczmbN0OSEMY06mHAnP0WxEbO9Z9kJFY8Uzimeg1miy+HkXa+20a72VkCvGpFLdXDpnuHDGsrJR58eOIYygGSrNKAYxeM7SDM2fFowxFKUfTwznLzYYGFQ2y5adnKVS78I6x+jlUebm5rDWMj8/z8LCwirw1XV8JJNJEkFMQ32KpRqVJiQ8aESO7mSSbDZL9tsTrBNmZ++RTqdnVHXddH7Z9300Vlys9FiLRD4NAianplhaWiKVSvF+6x2ftj/ieR75fH4RGBfgVr1efxnFMdYY9qfxEB+8us9afoWB/l6sFUrlXcYGr/Bw4vGuA3KZTOaOqh65C8vLy0/X8rnUys81Nvd8Ep4ShhEn/KA1Iar6L06oakFVdfjRab35ZFTbKKpqxh1j694AfUBhxEv3evU+gN32BnMcBR2Ot7uWVDXTif8GFl4lDeWTY1QAAAAldEVYdGNyZWF0ZS1kYXRlADIwMDktMTEtMTVUMTc6MDI6MzQtMDc6MDC2544SAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEwLTAyLTIwVDIzOjI2OjE3LTA3OjAwkaRNqAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMC0wMS0xMVQwOToyNDoyNC0wNzowMN7+1mAAAABndEVYdExpY2Vuc2UAaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbGljZW5zZXMvYnktc2EvMy4wLyBvciBodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9saWNlbnNlcy9MR1BMLzIuMS9bjzxjAAAAJXRFWHRtb2RpZnktZGF0ZQAyMDA5LTAzLTE5VDEwOjUyOjUxLTA2OjAwf2j9BgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAATdEVYdFNvdXJjZQBPeHlnZW4gSWNvbnPsGK7oAAAAJ3RFWHRTb3VyY2VfVVJMAGh0dHA6Ly93d3cub3h5Z2VuLWljb25zLm9yZy/vN6rLAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
button.download::before {
|
||||
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAA3XAAAN1wFCKJt4AAAACXZwQWcAAAAQAAAAEABcxq3DAAACqUlEQVQ4y42QTWtUZxiGr+c95z1z0jiT0KR0ksFq1ZJ0EqRdKWo/FoYRXIm0XVWKMcsuLPQH+BOCu67MTiKtZOHKCdllYymUkNIpBjpmdLQYmcmcc2bO1/u6sCSauui9fLi4uJ9barUaB/Pd/fvN3JgPXr8ppZ4tzc2VD7Iub4mxdvL05csox9m7rS8vv/821gW4/uP35xWyKEpVAf5ZXSXZ2UHy/A346rUrNk4Skjh5EQ3ib+6t3Ku7AApZPHXq3OPicFHiOP74rgjGdTFpCtYiWgNw7syXdDod2k+fvPvrbw8WgRkXwEK1dKgky6OjE2m3i1cqYXyfrNcDwBkexisWWatUcMfHma7XicKwenCD4XR3d/TThQUcrYkaDbJ/X7BxTPXSJWyS8Pvt2yilCMPo1bivCYbGL17c/XNlhV6rhfE8UmNI85xca4J2m0a9TnFuDsdxCMNgXxBFEYB+78aNon/lWx6urhINBvgnTlA4coQ4y/h7fR3v66/wfriOiOw1cAHCIMRaqxuNP+STq/PEZ87SWFhgtFLB8TxebG1x+OZN3JkZHm79xdGjH5Km6X6DIAwBXIslyzK8qSmO3blD5Hn0koTyrVsUTp5kbGyMiYkKSilE5D8N3OPHPqI8USZNUhzHYWppCRHB931GRkZQStFqtXBd901BEIZYax0QHjUfMTk5SaVSwfd9AOI4ptPp0Gw2AdBao5TaFwz6ffI8Z2Njg9nZWba3txERtNYMDQ1RKBTo9/tordnc3KRarWKM2RckccLznefMz8+T5zkigojsQdZa8jwnyzKmp6dpt9t7I7oA3V7v6d1ffi5/9vkXrK2tEQQBg0FMnCbkxtKP+gRRRBRGGGtJ04SCtlsAUqvVKJXeuYCSn0AO8z9ijGk6oq51u0H9JW0rMzlfvyBMAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEwLTAxLTExVDA5OjEyOjQ0LTA3OjAw/TBxHQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMC0wMS0xMVQwOToxMjo0NC0wNzowMIxtyaEAAAA0dEVYdExpY2Vuc2UAaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbGljZW5zZXMvR1BMLzIuMC9sagaoAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAABN0RVh0U291cmNlAEdOT01FLUNvbG9yc6qZROIAAAAxdEVYdFNvdXJjZV9VUkwAaHR0cDovL2NvZGUuZ29vZ2xlLmNvbS9wL2dub21lLWNvbG9ycy9QHbXrAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
.trow {
|
||||
display: table-row;
|
||||
}
|
||||
.tcell {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
x3d, X3D {
|
||||
border: 0px none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* #### Desktops #### */
|
||||
@media screen and (max-height: 635px){
|
||||
.select {
|
||||
max-height: 300px;
|
||||
|
||||
}
|
||||
#x3dom-3dprev-canvas{
|
||||
max-height: 300px!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 430px){
|
||||
.select {
|
||||
max-height: 300px;
|
||||
|
||||
}
|
||||
#x3dom-3dprev-canvas{
|
||||
max-height: 300px!important;
|
||||
}
|
||||
.bevore_table{
|
||||
height:0px;
|
||||
display: none;
|
||||
}
|
||||
.select img{
|
||||
heigth: 64px;
|
||||
width: 128px;
|
||||
}
|
||||
.select div.option {
|
||||
min-height: 64px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1250px){
|
||||
|
||||
#x3dom-3dprev-canvas{
|
||||
max-width: 333px!important;
|
||||
}
|
||||
.select img{
|
||||
heigth: 64px;
|
||||
width: 128px;
|
||||
}
|
||||
.select div.option {
|
||||
min-height: 64px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
527
css/normalize.css
vendored
Normal file
527
css/normalize.css
vendored
Normal file
@ -0,0 +1,527 @@
|
||||
/*! normalize.css v1.1.2 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
|
||||
* Known issue: no IE 6 support.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
|
||||
* `em` units.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 100%; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `font-family` inconsistency between `textarea` and other form
|
||||
* elements.
|
||||
*/
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins handled incorrectly in IE 6/7.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address font sizes and margins set differently in IE 6/7.
|
||||
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
|
||||
* and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.67em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
* Known issue: no IE 6/7 normalization.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 6/7/8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address CSS quotes not supported in IE 6/7.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `quotes` property not supported in Safari 4.
|
||||
*/
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
dl,
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address paddings set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct list images handled incorrectly in IE 7.
|
||||
*/
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
|
||||
* 2. Improve image quality when scaled in IE 7.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited in IE 6/7/8/9.
|
||||
* 2. Correct text not wrapping in Firefox 3.
|
||||
* 3. Correct alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font size not being inherited in all browsers.
|
||||
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
||||
* and Chrome.
|
||||
* 3. Improve appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to content-box in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
* 3. Remove excess padding in IE 7.
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
215
css/x3dom.css
Normal file
215
css/x3dom.css
Normal file
@ -0,0 +1,215 @@
|
||||
/*
|
||||
* X3DOM JavaScript Library
|
||||
* http://www.x3dom.org
|
||||
*
|
||||
* (C)2009 Fraunhofer IGD, Darmstadt, Germany
|
||||
* Dual licensed under the MIT and GPL
|
||||
*
|
||||
* Based on code originally provided by
|
||||
* Philip Taylor: http://philip.html5.org
|
||||
*/
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
X3D, x3d {
|
||||
position:relative; /* in order to be able to position stat-div within X3D */
|
||||
float:left; /* float the element so it has the same size like the canvas */
|
||||
cursor:pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
object {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
z-index: 0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
X3D:hover,
|
||||
x3d:hover,
|
||||
.x3dom-canvas:hover {
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.x3dom-canvas {
|
||||
border:none;
|
||||
cursor:pointer;
|
||||
width:100%;
|
||||
height:100%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.x3dom-canvas:focus {
|
||||
outline:none;
|
||||
}
|
||||
.x3dom-progress {
|
||||
margin: 0;
|
||||
padding: 6px 8px 0px 26px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
color: #0f0;
|
||||
font-family: Helvetica, sans-serif;
|
||||
line-height:10px;
|
||||
font-size: 10px;
|
||||
min-width: 45px;
|
||||
min-height: 20px;
|
||||
border: 0px;
|
||||
background-position: 4px 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #333;
|
||||
background-color: rgba(51, 51, 51, 0.9);
|
||||
z-index: 100;
|
||||
background-image: url('data:image/gif;base64,R0lGODlhEAAQAPQAADMzM////z4+Po+Pj0pKSsbGxpycnP///7e3t+Hh4XR0dGZmZu7u7oGBgfr6+tLS0qqqqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==');
|
||||
}
|
||||
|
||||
.x3dom-progress.bar span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
line-height: 20px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
|
||||
.x3dom-statdiv {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
color: #0f0;
|
||||
font-family: Helvetica, sans-serif;
|
||||
line-height:10px;
|
||||
font-size: 10px;
|
||||
width: 75px;
|
||||
height: 70px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
#x3dom-state-canvas {
|
||||
margin: 2px;
|
||||
padding: 0;
|
||||
right: 0%;
|
||||
top: 0%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#x3dom-state-viewer {
|
||||
position: absolute;
|
||||
margin: 2px;
|
||||
padding: 5px;
|
||||
width: 135px;
|
||||
top: 0%;
|
||||
right: 0%;
|
||||
opacity: 0.9;
|
||||
background-color: #323232;
|
||||
z-index: 1000;
|
||||
font-family: Arial, sans-serif;
|
||||
color: #C8C8C8;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.x3dom-states-head {
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.x3dom-states-head2 {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.x3dom-states-list {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-top: 1px solid #C8C8C8;
|
||||
list-style: none;
|
||||
font-size: 9px;
|
||||
line-height: 16px;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.x3dom-states-item {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.x3dom-states-item-title {
|
||||
float: left;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.x3dom-states-item-value {
|
||||
float: right;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.x3dom-touch-marker {
|
||||
display: inline;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
font-family: Helvetica, sans-serif;
|
||||
line-height:10px;
|
||||
font-size: 10px;
|
||||
color: darkorange;
|
||||
background: cornsilk;
|
||||
opacity: 0.6;
|
||||
border: 2px solid orange;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.x3dom-logContainer {
|
||||
border: 2px solid olivedrab;
|
||||
height: 200px;
|
||||
padding: 4px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
font-family: sans-serif;
|
||||
font-size: x-small;
|
||||
color: #00ff00;
|
||||
background-color: black;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.x3dom-nox3d {
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
background-color: #eb7a7a;
|
||||
padding: 1em;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.x3dom-nox3d p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.x3dom-nox3d a {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* self-clearing floats */
|
||||
.group:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
37
doc/TOC.md
Normal file
37
doc/TOC.md
Normal file
@ -0,0 +1,37 @@
|
||||
[HTML5 Boilerplate homepage](http://html5boilerplate.com)
|
||||
|
||||
# HTML5 Boilerplate documentation:
|
||||
|
||||
## Getting started
|
||||
|
||||
* [Usage](usage.md) — Overview of the project contents.
|
||||
* [FAQ](faq.md) — Frequently asked questions, along with their answers.
|
||||
|
||||
## The core of HTML5 Boilerplate
|
||||
|
||||
* [HTML](html.md) — A guide to the default HTML.
|
||||
* [CSS](css.md) — A guide to the default CSS.
|
||||
* [JavaScript](js.md) — A guide to the default JavaScript.
|
||||
* [.htaccess](https://github.com/h5bp/server-configs/blob/master/apache/README.md)
|
||||
— All about the Apache web server configs (also see our
|
||||
[alternative server configs](https://github.com/h5bp/server-configs)).
|
||||
* [crossdomain.xml](crossdomain.md) — An introduction to making use of
|
||||
crossdomain requests.
|
||||
* [Everything else](misc.md).
|
||||
|
||||
## Development
|
||||
|
||||
* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further with
|
||||
the boilerplate.
|
||||
|
||||
## Related projects
|
||||
|
||||
HTML5 Boilerplate has several related projects to help improve the performance
|
||||
of your site/app in various production environments.
|
||||
|
||||
* [Server configs](https://github.com/h5bp/server-configs) — Configs for
|
||||
different servers.
|
||||
* [Node build script](https://github.com/h5bp/node-build-script) — A
|
||||
feature-rich [grunt](https://github.com/gruntjs/grunt) plugin.
|
||||
* [Ant build script](https://github.com/h5bp/ant-build-script) — The original
|
||||
HTML5 Boilerplate build script.
|
||||
17
doc/crossdomain.md
Normal file
17
doc/crossdomain.md
Normal file
@ -0,0 +1,17 @@
|
||||
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# crossdomain.xml
|
||||
|
||||
A cross-domain policy file is an XML document that grants a web client—such as
|
||||
Adobe Flash Player, Adobe Reader, etc., permission to handle data across
|
||||
multiple domains. When a client hosts content from a particular source domain
|
||||
and that content makes requests directed towards a domain other than its own,
|
||||
the remote domain would need to host a cross-domain policy file that grants
|
||||
access to the source domain, allowing the client to continue with the
|
||||
transaction. Policy files grant read access to data, permit a client to include
|
||||
custom headers in cross-domain requests, and are also used with sockets to
|
||||
grant permissions for socket-based connections.
|
||||
|
||||
For full details, check out Adobe's article about the [cross-domain policy file
|
||||
specification](http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html).
|
||||
136
doc/css.md
Normal file
136
doc/css.md
Normal file
@ -0,0 +1,136 @@
|
||||
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The CSS
|
||||
|
||||
The HTML5 Boilerplate starting CSS includes:
|
||||
|
||||
* [Normalize.css](https://github.com/necolas/normalize.css).
|
||||
* Useful HTML5 Boilerplate defaults.
|
||||
* Common helpers.
|
||||
* Placeholder media queries.
|
||||
* Print styles.
|
||||
|
||||
This starting CSS does not rely on the presence of conditional classnames,
|
||||
conditional style sheets, or Modernizr. It is ready to use whatever your
|
||||
development preferences happen to be.
|
||||
|
||||
|
||||
## Normalize.css
|
||||
|
||||
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains
|
||||
extensive inline documentation. Please refer to the [Normalize.css
|
||||
project](http://necolas.github.com/normalize.css/) for more information.
|
||||
|
||||
|
||||
## HTML5 Boilerplate defaults
|
||||
|
||||
This project includes a handful of base styles that build upon Normalize.css.
|
||||
These include:
|
||||
|
||||
* Basic typography settings to provide improved text readability by default.
|
||||
* Protection against unwanted `text-shadow` during text highlighting.
|
||||
* Tweaks to default image alignment, fieldsets, and textareas.
|
||||
* A pretty Chrome Frame prompt.
|
||||
|
||||
You are free to modify or add to these base styles as your project requires.
|
||||
|
||||
|
||||
## Common helpers
|
||||
|
||||
#### `.ir`
|
||||
|
||||
Add the `.ir` class to any element you are applying image-replacement to. When
|
||||
replacing an element's content with an image, make sure to also set a specific
|
||||
`background-image: url(pathtoimage.png);`, `width`, and `height` so that your
|
||||
replacement image appears.
|
||||
|
||||
#### `.hidden`
|
||||
|
||||
Add the `.hidden` class to any elements that you want to hide from all
|
||||
presentations, including screen readers. It could be an element that will be
|
||||
populated later with JavaScript or an element you will hide with JavaScript. Do
|
||||
not use this for SEO keyword stuffing. That is just not cool.
|
||||
|
||||
#### `.visuallyhidden`
|
||||
|
||||
Add the `.visuallyhidden` class to hide text from browsers but make it
|
||||
available for screen readers. You can use this to hide text that is specific to
|
||||
screen readers but that other users should not see. [About invisible
|
||||
content](http://www.webaim.org/techniques/css/invisiblecontent/), [Hiding
|
||||
content for
|
||||
accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility),
|
||||
[HTML5 Boilerplate
|
||||
issue/research](https://github.com/h5bp/html5-boilerplate/issues/194/).
|
||||
|
||||
#### `.invisible`
|
||||
|
||||
Add the `.invisible` class to any element you want to hide without affecting
|
||||
layout. When you use `display: none` an element is effectively removed from the
|
||||
layout. But in some cases you want the element to simply be invisible while
|
||||
remaining in the flow and not affecting the positioning of surrounding
|
||||
content.
|
||||
|
||||
#### `.clearfix`
|
||||
|
||||
Adding `.clearfix` to an element will ensure that it always fully contains its
|
||||
floated children. There have been many variants of the clearfix hack over the
|
||||
years, and there are other hacks that can also help you to contain floated
|
||||
children, but the HTML5 Boilerplate currently uses the [micro
|
||||
clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
|
||||
|
||||
|
||||
## Media Queries
|
||||
|
||||
The boilerplate makes it easy to get started with a "Mobile First" and
|
||||
[Responsive Web
|
||||
Design](http://www.alistapart.com/articles/responsive-web-design/) approach to
|
||||
development. But it's worth remembering that there are [no silver
|
||||
bullets](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/).
|
||||
|
||||
We include a placeholder Media Queries to build up your mobile styles for wider
|
||||
viewports and high-resolution displays. It's recommended that you adapt these
|
||||
Media Queries based on the content of your site rather than mirroring the fixed
|
||||
dimensions of specific devices.
|
||||
|
||||
If you do not want to take a "Mobile First" approach, you can simply edit or
|
||||
remove these placeholder Media Queries. One possibility would be to work from
|
||||
wide viewports down and use `max-width` MQs instead, e.g., `@media only screen
|
||||
and (max-width: 480px)`.
|
||||
|
||||
Take a look into the [Mobile
|
||||
Boilerplate](https://github.com/h5bp/mobile-boilerplate) for features that are
|
||||
useful when developing mobile wep apps.
|
||||
|
||||
|
||||
## Print styles
|
||||
|
||||
* Print styles are inlined to [reduce the number of page
|
||||
requests](http://www.phpied.com/delay-loading-your-print-css/).
|
||||
* We strip all background colors, change the font color to black and remove
|
||||
text-shadow. This is meant to [help save printer ink and make the printing
|
||||
process much faster](http://www.sanbeiji.com/archives/953).
|
||||
* Anchors do not need colors to indicate they are linked. They are underlined
|
||||
to indicate so.
|
||||
* Anchors and Abbreviations are expanded to indicate where users reading the
|
||||
printed page can refer to.
|
||||
* But we do not want to show link text for image replaced elements (given that
|
||||
they are primarily images).
|
||||
|
||||
### Paged media styles
|
||||
|
||||
* Paged media is supported only in a [few
|
||||
browsers](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules).
|
||||
* Paged media support means browsers would know how to interpret instructions
|
||||
on breaking content into pages and on orphans/widows.
|
||||
* We use `page-break-inside: avoid;` to prevent an image and table row from
|
||||
being split into two different pages, so use the same `page-break-inside:
|
||||
avoid;` for that as well.
|
||||
* Headings should always appear with the text they are titles for. So, we
|
||||
ensure headings never appear in a different page than the text they describe
|
||||
by using `page-break-after: avoid;`.
|
||||
* We also apply a default margin for the page specified in `cm`.
|
||||
* We do not want [orphans and
|
||||
widows](http://en.wikipedia.org/wiki/Widows_and_orphans) to appear on pages
|
||||
you print. So, by defining `orphans: 3` and `widows: 3` you define the minimal
|
||||
number of words that every line should contain.
|
||||
558
doc/extend.md
Normal file
558
doc/extend.md
Normal file
@ -0,0 +1,558 @@
|
||||
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Extend and customise HTML5 Boilerplate
|
||||
|
||||
Here is some useful advice for how you can make your project with HTML5
|
||||
Boilerplate even better. We don't want to include it all by default, as not
|
||||
everything fits with everyone's needs.
|
||||
|
||||
|
||||
## DNS prefetching
|
||||
|
||||
In short, DNS Prefetching is a method of informing the browser of domain names
|
||||
referenced on a site so that the client can resolve the DNS for those hosts,
|
||||
cache them, and when it comes time to use them, have a faster turn around on
|
||||
the request.
|
||||
|
||||
### Implicit prefetches
|
||||
|
||||
There is a lot of prefetching done for you automatically by the browser. When
|
||||
the browser encounters an anchor in your html that does not share the same
|
||||
domain name as the current location the browser requests, from the client OS,
|
||||
the IP address for this new domain. The client first checks its cache and
|
||||
then, lacking a cached copy, makes a request from a DNS server. These requests
|
||||
happen in the background and are not meant to block the rendering of the
|
||||
page.
|
||||
|
||||
The goal of this is that when the foreign IP address is finally needed it will
|
||||
already be in the client cache and will not block the loading of the foreign
|
||||
content. Less requests result in faster page load times. The perception of this
|
||||
is increased on a mobile platform where DNS latency can be greater.
|
||||
|
||||
#### Disable implicit prefetching
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-dns-prefetch-control" content="off">
|
||||
```
|
||||
|
||||
Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still
|
||||
prefetch any explicit dns-prefetch links.
|
||||
|
||||
**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM
|
||||
FOREIGN DOMAINS.
|
||||
|
||||
### Explicit prefetches
|
||||
|
||||
Typically the browser only scans the HTML for foreign domains. If you have
|
||||
resources that are outside of your HTML (a javascript request to a remote
|
||||
server or a CDN that hosts content that may not be present on every page of
|
||||
your site, for example) then you can queue up a domain name to be prefetched.
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//example.com">
|
||||
<link rel="dns-prefetch" href="//ajax.googleapis.com">
|
||||
```
|
||||
|
||||
You can use as many of these as you need, but it's best if they are all
|
||||
immediately after the [Meta
|
||||
Charset](https://developer.mozilla.org/en/HTML/Element/meta#attr-charset)
|
||||
element (which should go right at the top of the `head`), so the browser can
|
||||
act on them ASAP.
|
||||
|
||||
#### Common Prefetch Links
|
||||
|
||||
Amazon S3:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//s3.amazonaws.com">
|
||||
```
|
||||
|
||||
Google APIs:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//ajax.googleapis.com">
|
||||
```
|
||||
|
||||
Microsoft Ajax Content Delivery Network:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//ajax.microsoft.com">
|
||||
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
|
||||
```
|
||||
|
||||
### Browser support for DNS prefetching
|
||||
|
||||
Chrome, Firefox 3.5+, Safari 5+, Opera (Unknown), IE 9 (called "Pre-resolution"
|
||||
on blogs.msdn.com)
|
||||
|
||||
### Further reading about DNS prefetching
|
||||
|
||||
* https://developer.mozilla.org/En/Controlling_DNS_prefetching
|
||||
* http://dev.chromium.org/developers/design-documents/dns-prefetching
|
||||
* http://www.apple.com/safari/whats-new.html
|
||||
* http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx
|
||||
* http://dayofjs.com/videos/22158462/web-browsers_alex-russel
|
||||
|
||||
|
||||
## Search
|
||||
|
||||
### Direct search spiders to your sitemap
|
||||
|
||||
[Learn how to make a sitemap](http://www.sitemaps.org/protocol.php)
|
||||
|
||||
```html
|
||||
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
|
||||
```
|
||||
|
||||
### Hide pages from search engines
|
||||
|
||||
According to Heather Champ, former community manager at Flickr, you should not
|
||||
allow search engines to index your "Contact Us" or "Complaints" page if you
|
||||
value your sanity. This is an HTML-centric way of achieving that.
|
||||
|
||||
```html
|
||||
<meta name="robots" content="noindex">
|
||||
```
|
||||
|
||||
**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
|
||||
|
||||
### Firefox and IE Search Plugins
|
||||
|
||||
Sites with in-site search functionality should be strongly considered for a
|
||||
browser search plugin. A "search plugin" is an XML file which defines how your
|
||||
plugin behaves in the browser. [How to make a browser search
|
||||
plugin](http://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
|
||||
|
||||
```html
|
||||
<link rel="search" title="" type="application/opensearchdescription+xml" href="">
|
||||
```
|
||||
|
||||
|
||||
## Internet Explorer
|
||||
|
||||
### Prompt users to switch to "Desktop Mode" in IE10 Metro
|
||||
|
||||
IE10 does not support plugins, such as Flash, in Metro mode. If your site
|
||||
requires plugins, you can let users know that via the X-UA-Compatible meta
|
||||
element, which will prompt them to switch to Desktop Mode.
|
||||
|
||||
```html
|
||||
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">
|
||||
```
|
||||
|
||||
Here's what it looks like alongside H5BP's default X-UA-Compatible values:
|
||||
|
||||
```html
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,requiresActiveX=true">
|
||||
```
|
||||
|
||||
You can find more information in [Microsoft's IEBlog post about prompting for
|
||||
plugin use in IE10 Metro
|
||||
Mode](http://blogs.msdn.com/b/ie/archive/2012/01/31/web-sites-and-a-plug-in-free-web.aspx).
|
||||
|
||||
### IE Pinned Sites (IE9+)
|
||||
|
||||
Enabling your application for pinning will allow IE9 users to add it to their
|
||||
Windows Taskbar and Start Menu. This comes with a range of new tools that you
|
||||
can easily configure with the elements below. See more [documentation on IE9
|
||||
Pinned Sites](http://msdn.microsoft.com/en-us/library/gg131029.aspx).
|
||||
|
||||
### Name the Pinned Site for Windows
|
||||
|
||||
Without this rule, Windows will use the page title as the name for your
|
||||
application.
|
||||
|
||||
```html
|
||||
<meta name="application-name" content="Sample Title">
|
||||
```
|
||||
|
||||
### Give your Pinned Site a tooltip
|
||||
|
||||
You know — a tooltip. A little textbox that appears when the user holds their
|
||||
mouse over your Pinned Site's icon.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-tooltip" content="A description of what this site does.">
|
||||
```
|
||||
|
||||
### Set a default page for your Pinned Site
|
||||
|
||||
If the site should go to a specific URL when it is pinned (such as the
|
||||
homepage), enter it here. One idea is to send it to a special URL so you can
|
||||
track the number of pinned users, like so:
|
||||
`http://www.example.com/index.html?pinned=true`
|
||||
|
||||
```html
|
||||
<meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true">
|
||||
```
|
||||
|
||||
### Recolor IE's controls manually for a Pinned Site
|
||||
|
||||
IE9+ will automatically use the overall color of your Pinned Site's favicon to
|
||||
shade its browser buttons. UNLESS you give it another color here. Only use
|
||||
named colors (`red`) or hex colors (`#ff0000`).
|
||||
|
||||
```html
|
||||
<meta name="msapplication-navbutton-color" content="#ff0000">
|
||||
```
|
||||
|
||||
### Manually set the window size of a Pinned Site
|
||||
|
||||
If the site should open at a certain window size once pinned, you can specify
|
||||
the dimensions here. It only supports static pixel dimensions. 800x600
|
||||
minimum.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-window" content="width=800;height=600">
|
||||
```
|
||||
|
||||
### Jump List "Tasks" for Pinned Sites
|
||||
|
||||
Add Jump List Tasks that will appear when the Pinned Site's icon gets a
|
||||
right-click. Each Task goes to the specified URL, and gets its own mini icon
|
||||
(essentially a favicon, a 16x16 .ICO). You can add as many of these as you
|
||||
need.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
|
||||
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
|
||||
```
|
||||
|
||||
### (Windows 8) High quality visuals for Pinned Sites
|
||||
|
||||
Windows 8 adds the ability for you to provide a PNG tile image and specify the
|
||||
tile's background color. [Full details on the IE
|
||||
blog](http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx).
|
||||
|
||||
* Create a 144x144 image of your site icon, filling all of the canvas, and
|
||||
using a transparent background.
|
||||
* Save this image as a 32-bit PNG and optimize it without reducing
|
||||
colour-depth. It can be named whatever you want (e.g. `metro-tile.png`).
|
||||
* To reference the tile and its color, add the HTML `meta` elements described
|
||||
in the IE Blog post.
|
||||
|
||||
### (Windows 8) Badges for Pinned Sites
|
||||
|
||||
IE10 will poll an XML document for badge information to display on your app's
|
||||
tile in the Start screen. The user will be able to receive these badge updates
|
||||
even when your app isn't actively running. The badge's value can be a number,
|
||||
or one of a predefined list of glyphs.
|
||||
|
||||
* [Tutorial on IEBlog with link to badge XML schema](http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx)
|
||||
* [Available badge values](http://msdn.microsoft.com/en-us/library/ie/br212849.aspx)
|
||||
|
||||
```html
|
||||
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://www.example.com/path/to/file.xml">
|
||||
```
|
||||
|
||||
### Disable link highlighting upon tap in IE10
|
||||
|
||||
Similar to [-webkit-tap-highlight-color](http://davidwalsh.name/mobile-highlight-color)
|
||||
in iOS Safari. Unlike that CSS property, this is an HTML meta element, and it's
|
||||
value is boolean rather than a color. It's all or nothing.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
```
|
||||
|
||||
You can read about this useful element and more techniques in
|
||||
[Microsoft's documentation on adapting WebKit-oriented apps for IE10](http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10.aspx).
|
||||
|
||||
### Suppress IE6 image toolbar
|
||||
|
||||
Kill IE6's pop-up-on-mouseover toolbar for images that can interfere with
|
||||
certain designs and be pretty distracting in general.
|
||||
|
||||
```html
|
||||
<meta http-equiv="imagetoolbar" content="false">
|
||||
```
|
||||
|
||||
|
||||
## Social Networks
|
||||
|
||||
### Facebook Open Graph data
|
||||
|
||||
You can control the information that Facebook and others display when users
|
||||
share your site. Below are just the most basic data points you might need. For
|
||||
specific content types (including "website"), see [Facebook's built-in Open
|
||||
Graph content
|
||||
templates](https://developers.facebook.com/docs/opengraph/objects/builtin/).
|
||||
Take full advantage of Facebook's support for complex data and activity by
|
||||
following the [Open Graph
|
||||
tutorial](https://developers.facebook.com/docs/opengraph/tutorial/).
|
||||
|
||||
```html
|
||||
<meta property="og:title" content="">
|
||||
<meta property="og:description" content="">
|
||||
<meta property="og:image" content="">
|
||||
```
|
||||
|
||||
### Twitter Cards
|
||||
|
||||
Twitter provides a snippet specification that serves a similar purpose to Open
|
||||
Graph. In fact, Twitter will use Open Graph when Cards is not available. Note
|
||||
that, as of this writing, Twitter requires that app developers activate Cards
|
||||
on a per-domain basis. You can read more about the various snippet formats
|
||||
and application process in the [official Twitter Cards
|
||||
documentation](https://dev.twitter.com/docs/cards).
|
||||
|
||||
```html
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@site_account">
|
||||
<meta name="twitter:creator" content="@individual_account">
|
||||
<meta name="twitter:url" content="http://www.example.com/path/to/page.html">
|
||||
<meta name="twitter:title" content="">
|
||||
<meta name="twitter:description" content="">
|
||||
<meta name="twitter:image" content="http://www.example.com/path/to/image.jpg">
|
||||
```
|
||||
|
||||
|
||||
## URLs
|
||||
|
||||
### Canonical URL
|
||||
|
||||
Signal to search engines and others "Use this URL for this page!" Useful when
|
||||
parameters after a `#` or `?` is used to control the display state of a page.
|
||||
`http://www.example.com/cart.html?shopping-cart-open=true` can be indexed as
|
||||
the cleaner, more accurate `http://www.example.com/cart.html`.
|
||||
|
||||
```html
|
||||
<link rel="canonical" href="">
|
||||
```
|
||||
|
||||
### Official shortlink
|
||||
|
||||
Signal to the world "This is the shortened URL to use this page!" Poorly
|
||||
supported at this time. Learn more by reading the [article about shortlinks on
|
||||
the Microformats wiki](http://microformats.org/wiki/rel-shortlink).
|
||||
|
||||
```html
|
||||
<link rel="shortlink" href="h5bp.com">
|
||||
```
|
||||
|
||||
|
||||
## News Feeds
|
||||
|
||||
### RSS
|
||||
|
||||
Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from
|
||||
scratch](http://www.rssboard.org/rss-specification)?
|
||||
|
||||
```html
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
|
||||
```
|
||||
|
||||
### Atom
|
||||
|
||||
Atom is similar to RSS, and you might prefer to use it instead of or in
|
||||
addition to it. [See what Atom's all
|
||||
about](http://www.atomenabled.org/developers/syndication/).
|
||||
|
||||
```html
|
||||
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
|
||||
```
|
||||
|
||||
### Pingbacks
|
||||
|
||||
Your server may be notified when another site links to yours. The href
|
||||
attribute should contain the location of your pingback service.
|
||||
|
||||
```html
|
||||
<link rel="pingback" href="">
|
||||
```
|
||||
|
||||
* High-level explanation: http://codex.wordpress.org/Introduction_to_Blogging#Pingbacks
|
||||
* Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5
|
||||
* PHP pingback service: http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/
|
||||
|
||||
|
||||
## App Stores
|
||||
|
||||
### Install a Chrome Web Store app
|
||||
|
||||
Users can install a Chrome app directly from your website, as long as the app
|
||||
and site have been associated via Google's Webmaster Tools. Read more on
|
||||
[Chrome Web Store's Inline Installation
|
||||
docs](https://developers.google.com/chrome/web-store/docs/inline_installation).
|
||||
|
||||
```html
|
||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
|
||||
```
|
||||
|
||||
### Smart App Banners in iOS 6 Safari
|
||||
|
||||
Stop bothering everyone with gross modals advertising your entry in the App Store.
|
||||
This bit of code will unintrusively allow the user the option to download your iOS
|
||||
app, or open it with some data about the user's current state on the website.
|
||||
|
||||
```html
|
||||
<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">
|
||||
```
|
||||
|
||||
## Google Analytics augments
|
||||
|
||||
### More tracking settings
|
||||
|
||||
The [optimized Google Analytics
|
||||
snippet](http://mathiasbynens.be/notes/async-analytics-snippet) included with
|
||||
HTML5 Boilerplate includes something like this:
|
||||
|
||||
```js
|
||||
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
|
||||
```
|
||||
|
||||
In case you need more settings, just extend the array literal instead of
|
||||
[`.push()`ing to the
|
||||
array](http://mathiasbynens.be/notes/async-analytics-snippet#dont-push-it)
|
||||
afterwards:
|
||||
|
||||
```js
|
||||
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview'], ['_setAllowAnchor', true]];
|
||||
```
|
||||
|
||||
### Anonymize IP addresses
|
||||
|
||||
In some countries, no personal data may be transferred outside jurisdictions
|
||||
that do not have similarly strict laws (i.e. from Germany to outside the EU).
|
||||
Thus a webmaster using the Google Analytics script may have to ensure that no
|
||||
personal (trackable) data is transferred to the US. You can do that with [the
|
||||
`_gat.anonymizeIp`
|
||||
option](http://code.google.com/apis/analytics/docs/gaJS/gaJSApi_gat.html#_gat._anonymizeIp).
|
||||
In use it looks like this:
|
||||
|
||||
```js
|
||||
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_gat._anonymizeIp'], ['_trackPageview']];
|
||||
```
|
||||
|
||||
### Track jQuery AJAX requests in Google Analytics
|
||||
|
||||
An article by @JangoSteve explains how to [track jQuery AJAX requests in Google
|
||||
Analytics](http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/).
|
||||
|
||||
Add this to `plugins.js`:
|
||||
|
||||
```js
|
||||
/*
|
||||
* Log all jQuery AJAX requests to Google Analytics
|
||||
* See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
|
||||
*/
|
||||
if (typeof _gaq !== "undefined" && _gaq !== null) {
|
||||
$(document).ajaxSend(function(event, xhr, settings){
|
||||
_gaq.push(['_trackPageview', settings.url]);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Track JavaScript errors in Google Analytics
|
||||
|
||||
Add this function after `_gaq` is defined:
|
||||
|
||||
```js
|
||||
(function(window){
|
||||
var undefined,
|
||||
link = function (href) {
|
||||
var a = window.document.createElement('a');
|
||||
a.href = href;
|
||||
return a;
|
||||
};
|
||||
window.onerror = function (message, file, row) {
|
||||
var host = link(file).hostname;
|
||||
_gaq.push([
|
||||
'_trackEvent',
|
||||
(host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
|
||||
message, file + ' LINE: ' + row, undefined, undefined, true
|
||||
]);
|
||||
};
|
||||
}(window));
|
||||
```
|
||||
|
||||
### Track page scroll
|
||||
|
||||
Add this function after `_gaq` is defined:
|
||||
|
||||
```js
|
||||
$(function(){
|
||||
var isDuplicateScrollEvent,
|
||||
scrollTimeStart = new Date,
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
scrollPercent;
|
||||
|
||||
$window.scroll(function() {
|
||||
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
|
||||
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
|
||||
isDuplicateScrollEvent = 1;
|
||||
_gaq.push(['_trackEvent', 'scroll',
|
||||
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's',
|
||||
undefined, undefined, true
|
||||
]);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## iOS Web Apps
|
||||
|
||||
There are a couple of meta tags that provide information about a web app when
|
||||
added to the Home Screen on iOS.
|
||||
|
||||
Adding `apple-mobile-web-app-capable` will make your web app chrome-less and
|
||||
provide the default iOS app view. You can control the color scheme of the
|
||||
default view by adding `apple-mobile-web-app-status-bar-style`.
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
```
|
||||
|
||||
You can use `apple-mobile-web-app-title` to add a specific sites name for the
|
||||
Home Screen icon. This works since iOS 6.
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-title" content="">
|
||||
```
|
||||
|
||||
For further information please read the [official documentation](http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
|
||||
on Apple's site.
|
||||
|
||||
Apart from that it is possible to add start-up screens for web apps on iOS. This
|
||||
basically works by defining `apple-touch-startup-image` with an according link
|
||||
to the image. Since iOS devices have different screen resolutions it is
|
||||
necessary to add media queries to detect which image to load. Here is an
|
||||
example for a retina iPhone:
|
||||
|
||||
```html
|
||||
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png">
|
||||
```
|
||||
|
||||
However, it is possible to detect which start-up image to use with JavaScript.
|
||||
The Mobile Boilerplate provides a useful function for this. Please see
|
||||
[helpers.js](https://github.com/h5bp/mobile-boilerplate/blob/master/js/helper.js#L354)
|
||||
for the implementation.
|
||||
|
||||
## Miscellaneous
|
||||
|
||||
* Use [HTML5
|
||||
polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
|
||||
|
||||
* Use [Microformats](http://microformats.org/wiki/Main_Page) (via
|
||||
[microdata](http://microformats.org/wiki/microdata)) for optimum search
|
||||
results
|
||||
[visibility](http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html).
|
||||
|
||||
* If you're building a web app you may want [native style momentum scrolling in
|
||||
iOS5](http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/) using
|
||||
`-webkit-overflow-scrolling: touch`.
|
||||
|
||||
* Avoid development/stage websites "leaking" into SERPs (search engine results
|
||||
page) by [implementing X-Robots-tag
|
||||
headers](https://github.com/h5bp/html5-boilerplate/issues/804).
|
||||
|
||||
* Screen readers currently have less-than-stellar support for HTML5 but the JS
|
||||
script [accessifyhtml5.js](https://github.com/yatil/accessifyhtml5.js) can
|
||||
help increase accessibility by adding ARIA roles to HTML5 elements.
|
||||
|
||||
|
||||
*Many thanks to [Brian Blakely](https://github.com/brianblakely) for
|
||||
contributing much of this information.*
|
||||
76
doc/faq.md
Normal file
76
doc/faq.md
Normal file
@ -0,0 +1,76 @@
|
||||
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Frequently asked questions
|
||||
|
||||
### Why is the URL for jQuery without "http"?
|
||||
|
||||
This is an intentional use of [protocol-relative
|
||||
URLs](http://paulirish.com/2010/the-protocol-relative-url/)
|
||||
|
||||
**N.B.** Using a protocol-relative URL for files that exist on a CDN is
|
||||
problematic when you try to view your local files directly in the browser. The
|
||||
browser will attempt to fetch the file from your local file system. We
|
||||
recommend that you use a local server to test your pages (or Dropbox). This can
|
||||
be done using Python 2.x by running `python -m SimpleHTTPServer` or Python 3.x
|
||||
with `python -m http.server` from your local directory, using Ruby by installing
|
||||
and running [asdf](https://rubygems.org/gems/asdf), and by installing any one of
|
||||
XAMPP, MAMP, or WAMP.
|
||||
|
||||
### Why don't you automatically load the latest version of jQuery from the Google CDN?
|
||||
|
||||
1. The latest version of jQuery may not be compatible with the existing
|
||||
plugins/code on the site. Version updating should be an intentional
|
||||
decision.
|
||||
2. The latest version has a very short `max-age=3600` compares to the specific
|
||||
version of `max-age=31536000`, which means you won't get the benefits of
|
||||
long-term caching.
|
||||
|
||||
|
||||
### Why is the Google Analytics code at the bottom? Google recommends it be placed the `head`.
|
||||
|
||||
The advantage to placing it in the `head` is that you will track a user's
|
||||
pageview even if they leave the page before it has been fully loaded. However,
|
||||
putting the code at the bottom keeps all the scripts together and reinforces
|
||||
that scripts at the bottom are the right move.
|
||||
|
||||
|
||||
### How can I integrate [Twitter Bootstrap](http://twitter.github.com/bootstrap/) with HTML5 Boilerplate?
|
||||
|
||||
You can use [Initializr](http://initializr.com) to create a custom build that
|
||||
includes HTML5 Boilerplate with Twitter Bootstrap.
|
||||
|
||||
Read more about how [HTML5 Boilerplate and Twitter Bootstrap complement each
|
||||
other](http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher).
|
||||
|
||||
|
||||
### How do I prevent phone numbers looking twice as large and having a Skype highlight?
|
||||
|
||||
If this is occurring, it is because a user has the Skype browser extension
|
||||
installed.
|
||||
|
||||
Use the following CSS to prevent Skype from formatting the numbers on your
|
||||
page:
|
||||
|
||||
```css
|
||||
span.skype_pnh_container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
span.skype_pnh_print_container {
|
||||
display: inline !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Do I need to upgrade my sites each time a new version of HTML5 Boilerplate is released?
|
||||
|
||||
No. You don't normally replace the foundations of a house once it has been
|
||||
built. There is nothing stopping you from trying to work in the latest changes
|
||||
but you'll have to assess the costs/benefits of doing so.
|
||||
|
||||
|
||||
### Where can I get help for support questions?
|
||||
|
||||
Please ask for help on
|
||||
[StackOverflow](http://stackoverflow.com/questions/tagged/html5boilerplate).
|
||||
170
doc/html.md
Normal file
170
doc/html.md
Normal file
@ -0,0 +1,170 @@
|
||||
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The HTML
|
||||
|
||||
## Conditional `html` classes
|
||||
|
||||
A series of IE conditional comments apply the relevant IE-specific classes to
|
||||
the `html` tag. This provides one method of specifying CSS fixes for specific
|
||||
legacy versions of IE. While you may or may not choose to use this technique in
|
||||
your project code, HTML5 Boilerplate's default CSS does not rely on it.
|
||||
|
||||
When using the conditional classes technique, applying classes to the `html`
|
||||
element has several benefits:
|
||||
|
||||
* It avoids a [file blocking
|
||||
issue](http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/)
|
||||
discovered by Stoyan Stefanov and Markus Leptien.
|
||||
* It avoids the need for an empty comment that also fixes the above issue.
|
||||
* CMSes like WordPress and Drupal use the body class more heavily. This makes
|
||||
integrating there a touch simpler.
|
||||
* It still validates as HTML5.
|
||||
* It uses the same element as Modernizr (and Dojo). That feels nice.
|
||||
* It can improve the clarity of code in multi-developer teams.
|
||||
|
||||
|
||||
## The `no-js` class
|
||||
|
||||
Allows you to more easily explicitly add custom styles when JavaScript is
|
||||
disabled (`no-js`) or enabled (`js`). More here: [Avoiding the
|
||||
FOUC](http://paulirish.com/2009/avoiding-the-fouc-v3/).
|
||||
|
||||
|
||||
## The order of meta tags, and `<title>`
|
||||
|
||||
As recommended by [the HTML5
|
||||
spec](http://www.whatwg.org/specs/web-apps/current-work/complete/semantics.html#charset)
|
||||
(4.2.5.5 Specifying the document's character encoding), add your charset
|
||||
declaration early (before any ASCII art ;) to avoid a potential
|
||||
[encoding-related security
|
||||
issue](http://code.google.com/p/doctype-mirror/wiki/ArticleUtf7) in IE. It
|
||||
should come in the first [1024
|
||||
bytes](http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset).
|
||||
|
||||
The charset should also come before the `<title>` tag, due to [potential XSS
|
||||
vectors](http://code.google.com/p/doctype-mirror/wiki/ArticleUtf7).
|
||||
|
||||
The meta tag for compatibility mode [needs to be before all elements except
|
||||
title and meta](http://h5bp.com/f "Defining Document Compatibility - MSDN").
|
||||
And that same meta tag can only be invoked for Google Chrome Frame if it is
|
||||
within the [first 1024
|
||||
bytes](http://code.google.com/p/chromium/issues/detail?id=23003).
|
||||
|
||||
|
||||
## X-UA-Compatible
|
||||
|
||||
This makes sure the latest version of IE is used in versions of IE that contain
|
||||
multiple rendering engines. Even if a site visitor is using IE8 or IE9, it's
|
||||
possible that they're not using the latest rendering engine their browser
|
||||
contains. To fix this, use:
|
||||
|
||||
```html
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
```
|
||||
|
||||
The `meta` tag tells the IE rendering engine two things:
|
||||
|
||||
1. It should use the latest, or edge, version of the IE rendering environment
|
||||
2. If already installed, it should use the Google Chrome Frame rendering
|
||||
engine.
|
||||
|
||||
This `meta` tag ensures that anyone browsing your site in IE is treated to the
|
||||
best possible user experience that their browser can offer.
|
||||
|
||||
This line breaks validation, and the Google Chrome Frame part won't work inside
|
||||
a conditional comment. To avoid these edge case issues it is recommended that
|
||||
you **remove this line and use the `.htaccess`** (or other server config)
|
||||
to send these headers instead. You also might want to read [Validating:
|
||||
X-UA-Compatible](http://groups.google.com/group/html5boilerplate/browse_thread/thread/6d1b6b152aca8ed2).
|
||||
|
||||
If you are serving your site on a non-standard port, you will need to set this
|
||||
header on the server-side. This is because the IE preference option 'Display
|
||||
intranet sites in Compatibility View' is checked by default.
|
||||
|
||||
|
||||
## Mobile viewport
|
||||
|
||||
There are a few different options that you can use with the [`viewport` meta
|
||||
tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
|
||||
Media Queries - The Complete Idiot's Guide"). You can find out more in [the
|
||||
Apple developer docs](http://j.mp/mobileviewport). HTML5 Boilerplate comes with
|
||||
a simple setup that strikes a good balance for general use cases.
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
```
|
||||
|
||||
## Favicons and Touch Icons
|
||||
|
||||
The shortcut icons should be put in the root directory of your site. HTML5
|
||||
Boilerplate comes with a default set of icons (include favicon and Apple Touch
|
||||
Icons) that you can use as a baseline to create your own.
|
||||
|
||||
If your site or icons are in a sub-directory, you will need to reference the
|
||||
icons using `link` elements placed in the HTML `head` of your document.
|
||||
|
||||
For a comprehensive overview, please read [Everything you always wanted to know
|
||||
about touch icons](http://mathiasbynens.be/notes/touch-icons) by Mathias
|
||||
Bynens.
|
||||
|
||||
|
||||
## Modernizr
|
||||
|
||||
HTML5 Boilerplate uses a custom build of Modernizr.
|
||||
|
||||
[Modernizr](http://modernizr.com) is a JavaScript library which adds classes to
|
||||
the `html` element based on the results of feature test and which ensures that
|
||||
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
|
||||
This allows you to target parts of your CSS and JavaScript based on the
|
||||
features supported by a browser.
|
||||
|
||||
In general, in order to keep page load times to a minimum, it's best to call
|
||||
any JavaScript at the end of the page because if a script is slow to load
|
||||
from an external server it may cause the whole page to hang. That said, the
|
||||
Modernizr script *needs* to run *before* the browser begins rendering the page,
|
||||
so that browsers lacking support for some of the new HTML5 elements are able to
|
||||
handle them properly. Therefore the Modernizr script is the only JavaScript
|
||||
file synchronously loaded at the top of the document.
|
||||
|
||||
|
||||
## The content area
|
||||
|
||||
The central part of the boilerplate template is pretty much empty. This is
|
||||
intentional, in order to make the boilerplate suitable for both web page and
|
||||
web app development.
|
||||
|
||||
### Google Chrome Frame
|
||||
|
||||
The main content area of the boilerplate includes a prompt to install Chrome
|
||||
Frame (which no longer requires administrative rights) for users of IE 6. If
|
||||
you intended to support IE 6, then you should remove the snippet of code.
|
||||
|
||||
### Google CDN for jQuery
|
||||
|
||||
The Google CDN version of the jQuery JavaScript library is referenced towards
|
||||
the bottom of the page using a protocol-independent path (read more about this
|
||||
in the [FAQ](faq.md)). A local fallback of jQuery is included for rare instances
|
||||
when the CDN version might not be available, and to facilitate offline
|
||||
development.
|
||||
|
||||
Regardless of which JavaScript library you choose to use, it is well worth the
|
||||
time and effort to look up and reference the Google CDN (Content Delivery
|
||||
Network) version. Your users may already have this version cached in their
|
||||
browsers, and Google's CDN is likely to deliver the asset faster than your
|
||||
server.
|
||||
|
||||
### Google Analytics Tracking Code
|
||||
|
||||
Finally, an optimized version of the latest Google Analytics tracking code is
|
||||
included. Google recommends that this script be placed at the top of the page.
|
||||
Factors to consider: if you place this script at the top of the page, you’ll be
|
||||
able to count users who don’t fully load the page, and you’ll incur the max
|
||||
number of simultaneous connections of the browser.
|
||||
|
||||
Further information:
|
||||
|
||||
* [Optimizing the asynchronous Google Analytics
|
||||
snippet](http://mathiasbynens.be/notes/async-analytics-snippet).
|
||||
* [Tracking Site Activity - Google
|
||||
Analytics](http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html).
|
||||
31
doc/js.md
Normal file
31
doc/js.md
Normal file
@ -0,0 +1,31 @@
|
||||
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The JavaScript
|
||||
|
||||
Information about the default JavaScript included in the project.
|
||||
|
||||
## main.js
|
||||
|
||||
This file can be used to contain or reference your site/app JavaScript code.
|
||||
For larger projects, you can make use of a JavaScript module loader, like
|
||||
[Require.js](http://requirejs.org/), to load any other scripts you need to
|
||||
run.
|
||||
|
||||
## plugins.js
|
||||
|
||||
This file can be used to contain all your plugins, such as jQuery plugins and
|
||||
other 3rd party scripts.
|
||||
|
||||
One approach is to put jQuery plugins inside of a `(function($){ ...
|
||||
})(jQuery);` closure to make sure they're in the jQuery namespace safety
|
||||
blanket. Read more about [jQuery plugin
|
||||
authoring](http://docs.jquery.com/Plugins/Authoring#Getting_Started)
|
||||
|
||||
## vendor
|
||||
|
||||
This directory can be used to contain all 3rd party library code.
|
||||
|
||||
Minified versions of the latest jQuery and Modernizr libraries are included by
|
||||
default. You may wish to create your own [custom Modernizr
|
||||
build](http://www.modernizr.com/download/).
|
||||
26
doc/misc.md
Normal file
26
doc/misc.md
Normal file
@ -0,0 +1,26 @@
|
||||
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Miscellaneous
|
||||
|
||||
## .gitignore
|
||||
|
||||
HTML5 Boilerplate includes a basic project-level `.gitignore`. This should
|
||||
primarily be used to avoid certain project-level files and directories from
|
||||
being kept under source control. Different development-environments will
|
||||
benefit from different collections of ignores.
|
||||
|
||||
OS-specific and editor-specific files should be ignored using a "global
|
||||
ignore" that applies to all repositories on your system.
|
||||
|
||||
For example, add the following to your `~/.gitconfig`, where the `.gitignore`
|
||||
in your HOME directory contains the files and directories you'd like to
|
||||
globally ignore:
|
||||
|
||||
```gitignore
|
||||
[core]
|
||||
excludesfile = ~/.gitignore
|
||||
```
|
||||
|
||||
* More on global ignores: http://help.github.com/ignore-files/
|
||||
* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore
|
||||
112
doc/usage.md
Normal file
112
doc/usage.md
Normal file
@ -0,0 +1,112 @@
|
||||
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Usage
|
||||
|
||||
Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app
|
||||
usually involves the following:
|
||||
|
||||
1. Set up the basic structure of the site.
|
||||
2. Add some content, style, and functionality.
|
||||
3. Run your site locally to see how it looks.
|
||||
4. (Optionally run a build script to automate the optimization of your site -
|
||||
e.g. [ant build script](https://github.com/h5bp/ant-build-script) or [node
|
||||
build script](https://github.com/h5bp/node-build-script)).
|
||||
5. Deploy your site.
|
||||
|
||||
|
||||
## Basic structure
|
||||
|
||||
A basic HTML5 Boilerplate site initially looks something like this:
|
||||
|
||||
```
|
||||
.
|
||||
├── css
|
||||
│ ├── main.css
|
||||
│ └── normalize.css
|
||||
├── doc
|
||||
├── img
|
||||
├── js
|
||||
│ ├── main.js
|
||||
│ ├── plugins.js
|
||||
│ └── vendor
|
||||
│ ├── jquery.min.js
|
||||
│ └── modernizr.min.js
|
||||
├── .htaccess
|
||||
├── 404.html
|
||||
├── index.html
|
||||
├── humans.txt
|
||||
├── robots.txt
|
||||
├── crossdomain.xml
|
||||
├── favicon.ico
|
||||
└── [apple-touch-icons]
|
||||
```
|
||||
|
||||
What follows is a general overview of each major part and how to use them.
|
||||
|
||||
### css
|
||||
|
||||
This directory should contain all your project's CSS files. It includes some
|
||||
initial CSS to help get you started from a solid foundation. [About the
|
||||
CSS](css.md).
|
||||
|
||||
### doc
|
||||
|
||||
This directory contains all the HTML5 Boilerplate documentation. You can use it
|
||||
as the location and basis for your own project's documentation.
|
||||
|
||||
### js
|
||||
|
||||
This directory should contain all your project's JS files. Libraries, plugins,
|
||||
and custom code can all be included here. It includes some initial JS to help
|
||||
get you started. [About the JavaScript](js.md).
|
||||
|
||||
### .htaccess
|
||||
|
||||
The default web server config is for Apache. For more information, please refer
|
||||
to the [`.htaccess`
|
||||
documentation](https://github.com/h5bp/server-configs/blob/master/apache/README.md)
|
||||
in the [server configs](https://github.com/h5bp/server-configs) project.
|
||||
|
||||
Host your site on a server other than Apache? You're likely to find the
|
||||
corresponding configuration file in our [server configs
|
||||
repo](https://github.com/h5bp/server-configs). If you cannot find a
|
||||
configuration file for your setup, please consider contributing one so that
|
||||
others can benefit too.
|
||||
|
||||
### 404.html
|
||||
|
||||
A helpful custom 404 to get you started.
|
||||
|
||||
### index.html
|
||||
|
||||
This is the default HTML skeleton that should form the basis of all pages on
|
||||
your site. If you are using a server-side templating framework, then you will
|
||||
need to integrate this starting HTML with your setup.
|
||||
|
||||
Make sure that you update the URLs for the referenced CSS and JavaScript if you
|
||||
modify the directory structure at all.
|
||||
|
||||
If you are using Google Analytics, make sure that you edit the corresponding
|
||||
snippet at the bottom to include your analytics ID.
|
||||
|
||||
### humans.txt
|
||||
|
||||
Edit this file to include the team that worked on your site/app, and the
|
||||
technology powering it.
|
||||
|
||||
### robots.txt
|
||||
|
||||
Edit this file to include any pages you need hidden from search engines.
|
||||
|
||||
### crossdomain.xml
|
||||
|
||||
A template for working with cross-domain requests. [About
|
||||
crossdomain.xml](crossdomain.md).
|
||||
|
||||
### icons
|
||||
|
||||
Replace the default `favicon.ico` and apple touch icons with your own. You
|
||||
might want to check out Hans Christian's handy [HTML5 Boilerplate Favicon and
|
||||
Apple Touch Icon
|
||||
PSD-Template](http://drublic.de/blog/html5-boilerplate-favicons-psd-template/).
|
||||
61
download.php
Normal file
61
download.php
Normal file
@ -0,0 +1,61 @@
|
||||
<?
|
||||
include("connectsql.php");
|
||||
|
||||
function filenameReplaceBadChars( $filename ) {
|
||||
|
||||
$patterns = array(
|
||||
"/\\s/", # Leerzeichen
|
||||
"/\\&/", # Kaufmaennisches UND
|
||||
"/\\+/", # Plus-Zeichen
|
||||
"/\\</", # < Zeichen
|
||||
"/\\>/", # > Zeichen
|
||||
"/\\?/", # ? Zeichen
|
||||
"/\"/", # " Zeichen
|
||||
"/\\:/", # : Zeichen
|
||||
"/\\|/", # | Zeichen
|
||||
"/\\\\/", # \ Zeichen
|
||||
"/\\//", # / Zeichen
|
||||
"/\\*/" # * Zeichen
|
||||
);
|
||||
|
||||
$replacements = array(
|
||||
"_",
|
||||
"-",
|
||||
"-",
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9"
|
||||
);
|
||||
|
||||
return preg_replace( $patterns, $replacements, $filename );
|
||||
|
||||
}
|
||||
|
||||
if (isset($_GET[id]) && is_numeric($_GET[id])) {
|
||||
$sql = "SELECT * FROM `mt_skins` WHERE `id` = '$_GET[id]' LIMIT 0 , 1";
|
||||
$result = mysql_query($sql);
|
||||
$row = mysql_fetch_assoc($result);
|
||||
|
||||
|
||||
$bin = base64_decode($row[img]);
|
||||
|
||||
$img = imagecreatefromstring($bin);
|
||||
imagesavealpha($img,true);
|
||||
header("Content-Type: application/force-download");
|
||||
$name = filenameReplaceBadChars($row[name]);
|
||||
$author = filenameReplaceBadChars($row[author]);
|
||||
header("Content-Disposition: attachment; filename=". $name."_by_".$author.".png");
|
||||
|
||||
imagepng ($img,NULL);
|
||||
|
||||
}
|
||||
else {
|
||||
echo "missing or invalid param 'id'";
|
||||
}
|
||||
?>
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
34
getskins.php
Normal file
34
getskins.php
Normal file
@ -0,0 +1,34 @@
|
||||
<?php
|
||||
include("connectsql.php");
|
||||
|
||||
if ($_POST[filtertype] == 'Author' && isset($_POST[filter])) {
|
||||
$sql = "SELECT * FROM `mt_skins` WHERE `author` LIKE '".mysql_real_escape_string($_POST[filter]) ."' LIMIT 0 , 30";
|
||||
}
|
||||
else if ($_POST[filtertype] == 'License' && isset($_POST[filter])) {
|
||||
$sql = "SELECT * FROM `mt_skins` WHERE `license` LIKE '".mysql_real_escape_string($_POST[filter]) ."' LIMIT 0 , 30";
|
||||
}
|
||||
else if ($_POST[filtertype] == 'Id' && isset($_POST[filter])) {
|
||||
$sql = "SELECT * FROM `mt_skins` WHERE `id` = '".mysql_real_escape_string($_POST[filter]) ."' LIMIT 0 , 1";
|
||||
}
|
||||
else if ($_POST[filtertype] == 'Name' && isset($_POST[filter])) {
|
||||
$sql = "SELECT * FROM `mt_skins` WHERE `name` LIKE '%".mysql_real_escape_string($_POST[filter]) ."%' LIMIT 0 , 30";
|
||||
}
|
||||
else {
|
||||
$sql = "SELECT * FROM `mt_skins` LIMIT 0 , 30";
|
||||
}
|
||||
|
||||
|
||||
$result = mysql_query($sql);
|
||||
if($result == false){
|
||||
$output[success] = false;
|
||||
$output[status_msg] = 'ERROR: could not load Skin. Error in Mysql. MYSQL says: '. mysql_error();
|
||||
}
|
||||
else{
|
||||
$output = Array();
|
||||
while ($row = mysql_fetch_assoc($result)) {
|
||||
$output[] = $row;
|
||||
}
|
||||
}
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode($output);
|
||||
?>
|
||||
15
humans.txt
Normal file
15
humans.txt
Normal file
@ -0,0 +1,15 @@
|
||||
# humanstxt.org/
|
||||
# The humans responsible & technology colophon
|
||||
|
||||
# TEAM
|
||||
|
||||
<name> -- <role> -- <twitter>
|
||||
|
||||
# THANKS
|
||||
|
||||
<name>
|
||||
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
HTML5, CSS3
|
||||
Normalize.css, jQuery, Modernizr
|
||||
0
img/.gitignore
vendored
Normal file
0
img/.gitignore
vendored
Normal file
133
index.html
Normal file
133
index.html
Normal file
@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Addis Open MT-Skin Database</title>
|
||||
<meta name="description" content="this is a skin database for the game minetest-c55. it has a 3d preview rendered with x3dom and a list where you can choose the skin.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel='stylesheet' type='text/css' href='css/x3dom.css'>
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<script type='text/javascript' src='js/x3dom.js'></script>
|
||||
<script type='text/javascript' src='js/ajax.js'></script>
|
||||
<script type="text/javascript" src='js/main.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="bevore_table"><h1>Addis open MT-Skin Database</h1>
|
||||
<p>
|
||||
on the left hand you have a 3d preview for the selected skin. on the right hand you have some skins to chose. just leftclick them to get the preview and rightclick it to download it.
|
||||
</p></div>
|
||||
<noscript>
|
||||
this page needs activated Javascript.
|
||||
<br>
|
||||
this page saves no coockies and dose not track you.
|
||||
<br>
|
||||
maybe ill add a simple php page to access the skins without javascript later. but until now yor own way to view it is enable javascript for this page.
|
||||
</noscript>
|
||||
<div class="table">
|
||||
|
||||
|
||||
<div class="trow toolbar">
|
||||
<div id="toolbarleft" class="tcell">
|
||||
|
||||
<button onclick="resetView();">
|
||||
Reset View
|
||||
</button>
|
||||
<button onclick="getScreenshot();">
|
||||
Create Screenshot
|
||||
</button>
|
||||
Background:
|
||||
<select id="background" disabled="">
|
||||
<option>blank</option>
|
||||
<option>---</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div id="toolbarright" class="tcell">
|
||||
<button onclick="window.history.back();">
|
||||
back
|
||||
</button>
|
||||
<button onclick="window.history.forward();">
|
||||
forward
|
||||
</button>
|
||||
<button onclick="window.location.reload();">
|
||||
Refresh
|
||||
</button>
|
||||
page
|
||||
<select disabled="">
|
||||
<option>1</option>
|
||||
</select>
|
||||
from 1 | Filter:
|
||||
<select id="filtertype" disabled="">
|
||||
<option>all</option>
|
||||
<option>Author</option>
|
||||
<option>License</option>
|
||||
<option>Id</option>
|
||||
<option>Name</option>
|
||||
</select>
|
||||
<input id="filter" disabled=""/>
|
||||
<button disabled>
|
||||
apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trow content">
|
||||
<div class="tcell">
|
||||
<x3d id='3dprev' showStat='false' showLog='false' x='0px' y='0px' width='512px' height='512px'>
|
||||
<scene>
|
||||
<navigationInfo avatarSize='0.25 1.75 0.75' headlight='false' type='"EXAMINE" "ANY"'></navigationInfo>
|
||||
<!--<background DEF='WO_World' groundColor='0.051 0.051 0.051' skyColor='0.051 0.051 0.051'></background>-->
|
||||
|
||||
<transform DEF='Armature_TRANSFORM' rotation='0 0.707107 0.707107 3.14159' translation='0 -10 0'>
|
||||
<transform DEF='Player_TRANSFORM'>
|
||||
<transform DEF='Player_ifs_TRANSFORM'>
|
||||
<group DEF='group_ME_Player'>
|
||||
<shape>
|
||||
<appearance>
|
||||
<material DEF='MA_Character' ambientIntensity='0.333' shininess='0.098' specularColor='0.001 0.001 0.001'></material>
|
||||
<texture DEF='IM_character_png' hideChildren="true" scale="false">
|
||||
<canvas width='64' height='32' id='myCanvas' class="pixelated" ></canvas>
|
||||
<TextureProperties boundaryModeS='CLAMP_TO_EDGE' boundaryModeT='CLAMP_TO_EDGE'
|
||||
magnificationFilter='NEAREST' minificationFilter='NEAREST'
|
||||
generateMipMaps='false' id='texProps' ></TextureProperties>
|
||||
</texture>
|
||||
<textureTransform></textureTransform>
|
||||
</appearance>
|
||||
<indexedFaceSet texCoordIndex='0 1 2 3 -1 4 5 6 7 -1 8 9 10 11 -1 12 13 14 15 -1 16 17 18 19 -1 20 21 22 23 -1 24 25 26 27 -1 28 29 30 31 -1 32 33 34 35 -1 36 37 38 39 -1 40 41 42 43 -1 44 45 46 47 -1 48 49 50 51 -1 52 53 54 55 -1 56 57 58 59 -1 60 61 62 63 -1 64 65 66 67 -1 68 69 70 71 -1 72 73 74 75 -1 76 77 78 79 -1 80 81 82 83 -1 84 85 86 87 -1 88 89 90 91 -1 92 93 94 95 -1 96 97 98 99 -1 100 101 102 103 -1 104 105 106 107 -1 108 109 110 111 -1 112 113 114 115 -1 116 117 118 119 -1 120 121 122 123 -1 124 125 126 127 -1 128 129 130 131 -1 132 133 134 135 -1 136 137 138 139 -1 140 141 142 143 -1 144 145 146 147 -1 148 149 150 151 -1 152 153 154 155 -1 156 157 158 159 -1 160 161 162 163 -1 164 165 166 167 -1' coordIndex='0 21 23 2 -1 1 0 2 3 -1 3 22 20 1 -1 0 1 20 21 -1 3 2 23 22 -1 47 44 45 46 -1 6 5 9 10 -1 7 6 10 11 -1 32 33 12 13 -1 14 15 13 12 -1 39 18 16 37 -1 18 19 17 16 -1 19 38 36 17 -1 36 37 16 17 -1 19 18 39 38 -1 34 14 12 33 -1 40 42 44 47 -1 15 35 32 13 -1 24 27 26 25 -1 31 28 29 30 -1 46 45 43 41 -1 35 34 33 32 -1 41 43 42 40 -1 23 21 20 22 -1 39 37 36 38 -1 15 14 34 35 -1 4 7 11 8 -1 5 4 8 9 -1 30 26 27 31 -1 4 5 6 7 -1 31 27 24 28 -1 44 42 43 45 -1 28 24 25 29 -1 11 10 9 8 -1 29 25 26 30 -1 40 47 46 41 -1 55 50 48 53 -1 50 51 49 48 -1 51 54 52 49 -1 52 53 48 49 -1 51 50 55 54 -1 55 53 52 54 -1'>
|
||||
<coordinate DEF='coords_ME_Player' point='-2 -0.999999 6.75 -2 1 6.75 -2 -0.999999 13.5 -2 1 13.5 -4 1 13.5 -4 -1 13.5 -2 -1 13.5 -2 1 13.5 -4 1 6.75 -4 -1 6.75 -2 -1 6.75 -2 1 6.75 -2 -1 0 -2 1 0 -2 -1 6.75 -2 1 6.75 -2 -2 13.5 -2 2 13.5 -2 -2 17.5 -2 2 17.5 2 1 6.75 2 -1 6.75 2 1 13.5 2 -1 13.5 2 1 6.75 2 -1 6.75 4 -1 6.75 4 1 6.75 2 1 13.5 2 -1 13.5 4 -1 13.5 4 1 13.5 0 1 0 -0 -1 0 0 -1 6.75 0 1 6.75 2 2 13.5 2 -2 13.5 2 2 17.5 2 -2 17.5 2 1 6.75 2 -1 6.75 2 1 0 2 -1 0 0 1 0 0 -1 0 0 -1 6.75 0 1 6.75 -2.2 -2.2 13.3 -2.2 2.2 13.3 -2.2 -2.2 17.7 -2.2 2.2 17.7 2.2 2.2 13.3 2.2 -2.2 13.3 2.2 2.2 17.7 2.2 -2.2 17.7'></coordinate>
|
||||
<textureCoordinate point='0.5 0 0.625 0 0.625 0.375 0.5 0.375 0.4375 0 0.5 0 0.5 0.375 0.4375 0.375 0.4375 0.375 0.3125 0.375 0.3125 0 0.4375 0 0.4375 0.5 0.4375 0.375 0.5625 0.375 0.5625 0.5 0.4375 0.375 0.4375 0.5 0.3125 0.5 0.3125 0.375 0.1875 0.375 0.1875 0 0.125 0 0.125 0.375 0.8125 0.375 0.875 0.375 0.875 0 0.8125 0 0.75 0.375 0.8125 0.375 0.8125 0 0.75 0 0.1875 0.375 0.1875 0.5 0.125 0.5 0.125 0.375 0 0.375 0.0625 0.375 0.0625 0 0 0 0.5 0.75 0.375 0.75 0.375 0.5 0.5 0.5 0.375 0.75 0.25 0.75 0.25 0.5 0.375 0.5 0.25 0.75 0.125 0.75 0.125 0.5 0.25 0.5 0.375 0.75 0.375 1 0.25 1 0.25 0.75 0.25 0.75 0.25 1 0.125 1 0.125 0.75 0.25 0.375 0.1875 0.375 0.1875 0 0.25 0 0.125 0.375 0.125 0 0.0625 0 0.0625 0.375 0.125 0.375 0.0625 0.375 0.0625 0 0.125 0 0.75 0.375 0.8125 0.375 0.8125 0.5 0.75 0.5 0.6875 0.375 0.75 0.375 0.75 0.5 0.6875 0.5 0.25 0.375 0.25 0 0.1875 0 0.1875 0.375 0.1875 0.375 0.125 0.375 0.125 0 0.1875 0 0 0.375 0 0 0.0625 0 0.0625 0.375 0.25 0.375 0.25 0 0.3125 0 0.3125 0.375 0 0.75 0 0.5 0.125 0.5 0.125 0.75 0.125 0.375 0.125 0.5 0.0625 0.5 0.0625 0.375 0.6875 0.375 0.75 0.375 0.75 0 0.6875 0 0.6875 0.375 0.625 0.375 0.625 0 0.6875 0 0.6875 0.375 0.6875 0 0.625 0 0.625 0.375 0.6875 0.375 0.6875 0.5 0.75 0.5 0.75 0.375 0.6875 0.375 0.6875 0 0.75 0 0.75 0.375 0.1875 0.375 0.125 0.375 0.125 0.5 0.1875 0.5 0.75 0.375 0.75 0 0.8125 0 0.8125 0.375 0.75 0.375 0.75 0.5 0.8125 0.5 0.8125 0.375 0.8125 0.375 0.8125 0 0.875 0 0.875 0.375 0.125 0.375 0.0625 0.375 0.0625 0.5 0.125 0.5 1 0.75 0.875 0.75 0.875 0.5 1 0.5 0.875 0.75 0.75 0.75 0.75 0.5 0.875 0.5 0.75 0.75 0.625 0.75 0.625 0.5 0.75 0.5 0.875 0.75 0.875 1 0.75 1 0.75 0.75 0.75 0.75 0.75 1 0.625 1 0.625 0.75 0.5 0.75 0.5 0.5 0.625 0.5 0.625 0.75'></textureCoordinate>
|
||||
</indexedFaceSet>
|
||||
</shape>
|
||||
</group>
|
||||
</transform>
|
||||
</transform>
|
||||
</transform>
|
||||
|
||||
<viewpoint DEF='CA_Camera' position='0 -1 40' fieldOfView='0.5'></viewpoint>
|
||||
|
||||
</scene>
|
||||
</x3d>
|
||||
|
||||
</div><!--eft ende-->
|
||||
<div class="tcell content">
|
||||
<div id="skinlist" class="select" >
|
||||
<div id="dnd" class="option">
|
||||
<img src="addskin.png" style="cursor:default;">
|
||||
<h2>Here could be your skin!</h2>
|
||||
<p>
|
||||
drag and drop your skin file here if you want to share it with other people!
|
||||
or you can browse your pc:
|
||||
<input type="file" multiple="multiple" accept="image/png" id="files" >
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
31
js/ajax.js
Normal file
31
js/ajax.js
Normal file
@ -0,0 +1,31 @@
|
||||
var xhr = {};
|
||||
xhr.request = function(seite,post,fertigfunktion){//1. Seite 2. Post ubergabe 3. funktion die am ende den quellcode bekommt
|
||||
var HTTP = null;
|
||||
if (window.XMLHttpRequest) {
|
||||
var HTTP = new XMLHttpRequest();
|
||||
}
|
||||
else if (window.ActiveXObject) {
|
||||
try {
|
||||
var HTTP = new ActiveXObject("Msxml2.HTTP");
|
||||
}
|
||||
catch (ex) {
|
||||
try {
|
||||
var HTTP = new ActiveXObject("Microsoft.HTTP");
|
||||
}
|
||||
catch (ex) {
|
||||
}
|
||||
}
|
||||
}
|
||||
HTTP.open("POST", seite ,true);
|
||||
HTTP.onreadystatechange = function() {
|
||||
if (HTTP.readyState == 4) {
|
||||
fertigfunktion(HTTP);
|
||||
}
|
||||
else{
|
||||
//ansonsten wird die seite gerade geladen.
|
||||
}
|
||||
}
|
||||
HTTP.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
HTTP.setRequestHeader("Connection", "close");
|
||||
HTTP.send(post);
|
||||
}
|
||||
309
js/main.js
Normal file
309
js/main.js
Normal file
@ -0,0 +1,309 @@
|
||||
|
||||
function useTexture(src){
|
||||
var canvas = document.getElementById('myCanvas');
|
||||
var img = new Image();
|
||||
img.onload = function(){
|
||||
if(canvas.getContext){
|
||||
var context = canvas.getContext('2d');
|
||||
context.clearRect ( 0 , 0 , canvas.width,canvas.height );
|
||||
context.drawImage(img, 0, 0,canvas.width,canvas.height);
|
||||
canvas.parentNode._x3domNode.invalidateGLObject();
|
||||
}
|
||||
}
|
||||
img.src = src;
|
||||
|
||||
|
||||
}
|
||||
function uploadSkin(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var author = this.author.value;
|
||||
var name = this.name.value;
|
||||
var license = this.license.value;
|
||||
var img = this.img.value;
|
||||
xhr.request(this.action,"author="+author+"&name="+name+"&license="+license+"&img="+img,uploaded);
|
||||
//alert("hi "+this.name.value+",n thanks that you want to upload your skin. but the upload function is not ready atm.")
|
||||
return false//stoping browswer todo something
|
||||
}
|
||||
function uploaded(http){
|
||||
if(http.status == 200){
|
||||
|
||||
if(JSON.parse(http.responseText)){
|
||||
var answer = JSON.parse(http.responseText)
|
||||
if(answer.success){
|
||||
alert("uploaded successfull");
|
||||
}
|
||||
else{
|
||||
alert("Error: "+answer.status_msg);
|
||||
}
|
||||
}
|
||||
else{
|
||||
alert("Something is wrong: the answer of the server is "+http.getResponseText())
|
||||
}
|
||||
|
||||
}
|
||||
else{
|
||||
alert("Something is wrong: the answer of the server is "+http.status+" "+http.statusText)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function abort(){
|
||||
|
||||
var childNode = this.parentNode;
|
||||
childNode.parentNode.removeChild(childNode);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Drag & drop file handler
|
||||
========================================================================== */
|
||||
|
||||
|
||||
function handleFileSelect(evt) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
|
||||
var dateien = (this.id == 'skinlist')? evt.dataTransfer.files : evt.target.files; // jenachdem ob ueber drag drop oder durchsuchen ausgewaehlt wurde.
|
||||
//in dateien sind jetzt alle dateien gespeichert die ausgewahlt wurden
|
||||
for (var i = 0, f; f = dateien[i]; i++) { //alle dateien nacheinander auslesen...
|
||||
if (!f.type.match('image.*')) { //fals was anderes als ein bild dabei sein sollte
|
||||
alert("tFEHLER!nn Die Datei "+f.name+" kann nicht als Bild geöffnet werden!");
|
||||
continue;
|
||||
}
|
||||
|
||||
var reader = new FileReader();
|
||||
|
||||
// wenn die datei geladen ist dann soll die gleich in ein img tag geschrieben werden
|
||||
reader.onload = (function(Datei) {
|
||||
return function(e) {
|
||||
// Vorschau bzw. thumbnail rendern
|
||||
var block = document.createElement('div');
|
||||
block.className = "option"
|
||||
var img = new Image();
|
||||
img.className= 'thumb'; //css klasse zuweisen fuers aussehen ;)
|
||||
img.src = e.target.result ; //das ist die data:// url fuer die vorschau
|
||||
img.title = Datei.name; //als titel noch der dateiname.
|
||||
img.addEventListener('click', function () {useTexture(img.src)}, false);
|
||||
//bild ende
|
||||
var form = document.createElement('form');
|
||||
form.action = "upload.php";
|
||||
form.method = "get";
|
||||
form.addEventListener('submit', uploadSkin, false);
|
||||
form.addEventListener('reset', abort, false);
|
||||
var titel = document.createElement('span');
|
||||
titel.innerHTML = "Name: <input type='text' placeholder='please enter a name' name='name' required><br>";
|
||||
//titel Ende
|
||||
var eigenschaften = document.createElement('span');
|
||||
eigenschaften.innerHTML = "Author: <input type='text' placeholder='enter the name of the Author' name='author' required> <br>"+
|
||||
"License: <input type='text' placeholder='enter the license under that you would share this' name='license' required><br>"+
|
||||
"Mime Type: "+ Datei.type+"<br>"+
|
||||
"Size: "+Datei.size/1024+" Kb<br>"+
|
||||
"<input type='hidden' value='"+img.src+"' name='img'>"+
|
||||
"<button type='submit' class='addimg'>Upload!</button><button type='reset' class='abort'>discard!</button>";
|
||||
//Eigenschaften ende
|
||||
block.insertBefore(img,null); //das bild ins div schieben.
|
||||
form.insertBefore(titel, null); //titel einfügen
|
||||
form.insertBefore(eigenschaften, null);//zu guter letzt die Eigenschaften
|
||||
block.insertBefore(form, null);//zu guter letzt die Eigenschaften
|
||||
document.getElementById('skinlist').insertBefore(block, document.getElementById("dnd")); //anschliessend den block einfuegen
|
||||
};
|
||||
})(f);
|
||||
|
||||
|
||||
reader.readAsDataURL(f);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragOver(evt) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
evt.dataTransfer.dropEffect = 'copy';
|
||||
}
|
||||
|
||||
|
||||
|
||||
function initDragDrop(){
|
||||
// Event listener Eintragen
|
||||
var dropZone = document.getElementById('skinlist');
|
||||
dropZone.addEventListener('dragover', handleDragOver, false);
|
||||
dropZone.addEventListener('drop', handleFileSelect, false);
|
||||
document.getElementById('files').addEventListener('change', handleFileSelect, false);
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', initDragDrop, false);
|
||||
|
||||
/* ==========================================================================
|
||||
load skins and write them
|
||||
========================================================================== */
|
||||
|
||||
|
||||
function clearList(){
|
||||
copy = document.getElementById('dnd').outerHTML;
|
||||
document.getElementById('skinlist').innerHTML = copy;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function getSkins(page){
|
||||
|
||||
xhr.request("getskins.php",page,gotSkins);
|
||||
}
|
||||
|
||||
|
||||
function gotSkins(http){
|
||||
if(http.status == 200){
|
||||
|
||||
if(JSON.parse(http.responseText)){
|
||||
var answer = JSON.parse(http.responseText)
|
||||
var i = 0;
|
||||
while(answer[i]){
|
||||
var block = document.createElement('div');
|
||||
block.className = "option"
|
||||
var img = new Image();
|
||||
img.className= 'thumb'; //css klasse zuweisen fuers aussehen ;)
|
||||
img.src = "data:"+answer[i].type+";base64,"+answer[i].img ; //das ist die data: url fuer die vorschau
|
||||
img.title = answer[i].name; //als titel noch der dateiname.
|
||||
img.addEventListener('click', function () {useTexture(this.src)}, false);
|
||||
//bild ende
|
||||
|
||||
var titel = document.createElement('span');
|
||||
titel.innerHTML = "Name: <a href='#!page:1,filtertype:Name,filter:"+answer[i].name+"'>"+answer[i].name+"</a><br>";
|
||||
//titel Ende
|
||||
var eigenschaften = document.createElement('span');
|
||||
eigenschaften.innerHTML = "Author: <a href='#!page:1,filtertype:Author,filter:"+answer[i].author+"'>"+answer[i].author+"</a> <br>"+
|
||||
"License: <a href='#!page:1,filtertype:License,filter:"+answer[i].license+"'>"+answer[i].license+"</a> <br>"+
|
||||
"Mime Type: "+answer[i].type+"<br>"+
|
||||
"<button onclick='download("+answer[i].id+")' class='download'> Download</button> <br>";
|
||||
//Eigenschaften ende
|
||||
block.insertBefore(img,null); //das bild ins div schieben.
|
||||
block.insertBefore(titel, null)
|
||||
block.insertBefore(eigenschaften, null);//zu guter letzt die Eigenschaften
|
||||
document.getElementById('skinlist').insertBefore(block, null); //anschliesend den block einfuegen
|
||||
i++
|
||||
}
|
||||
if(answer.length < 1){
|
||||
alert("noting found matching you filter!")
|
||||
}
|
||||
else{
|
||||
useTexture("data:"+answer[0].type+";base64,"+answer[0].img);
|
||||
}
|
||||
}
|
||||
|
||||
else{
|
||||
alert("Something is wrong: the status of http is: "+http.getResponseText())
|
||||
}
|
||||
|
||||
}
|
||||
else{
|
||||
alert("Something is wrong: the answer of the server is "+http.status+" "+http.statusText)
|
||||
}
|
||||
|
||||
}
|
||||
//document.addEventListener("DOMContentLoaded", function(){ getSkins(1) }, false);
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
read the anchor
|
||||
========================================================================== */
|
||||
|
||||
function anchor(){
|
||||
|
||||
if(string != location.hash){
|
||||
onAnchorChange();
|
||||
string = location.hash;
|
||||
}
|
||||
checkAnchor = setTimeout(anchor, delay);
|
||||
}
|
||||
string = null;
|
||||
delay = 100;
|
||||
checkAnchor = null;//setTimeout(anchor, delay);
|
||||
document.addEventListener("DOMContentLoaded", anchor, false);
|
||||
function onAnchorChange(){
|
||||
var string = location.hash;
|
||||
if(string.indexOf('#!searchAuthor:') != -1){
|
||||
cmd = string.split(':');
|
||||
clearList();
|
||||
getSkins("page=1&search=Author&Author="+cmd[1]);
|
||||
document.getElementById('filter').value = cmd[1];
|
||||
|
||||
document.getElementById('filtertype').selectedIndex = 1;
|
||||
//alert("the feature 'find more from Author'("+cmd[1]+") comming soon!")
|
||||
|
||||
}
|
||||
else if(string.indexOf('#!') != -1){
|
||||
cmd = string.split('!');
|
||||
obj = parseQuery(cmd[1])
|
||||
console.debug(obj);
|
||||
clearList();
|
||||
var get = ""
|
||||
if(obj.page) get += "page="+obj.page+"&";
|
||||
if(obj.filtertype && obj.filter){
|
||||
get += "filtertype="+obj.filtertype+"&filter="+obj.filter+"&";
|
||||
document.getElementById('filter').value = obj.filter;
|
||||
switch(obj.filtertype){
|
||||
case "Author":
|
||||
document.getElementById('filtertype').selectedIndex = 1;
|
||||
break;
|
||||
case "License":
|
||||
document.getElementById('filtertype').selectedIndex = 2;
|
||||
break;
|
||||
case "Id":
|
||||
document.getElementById('filtertype').selectedIndex = 3;
|
||||
break;
|
||||
case "Name":
|
||||
document.getElementById('filtertype').selectedIndex = 4;
|
||||
break;
|
||||
default:document.getElementById('filtertype').selectedIndex = 0;break;
|
||||
}
|
||||
}
|
||||
getSkins(get);
|
||||
|
||||
|
||||
}
|
||||
else{
|
||||
clearList();
|
||||
getSkins("page=1");
|
||||
document.getElementById('filter').value = '';
|
||||
document.getElementById('filtertype').selectedIndex = 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function parseQuery(qstr)
|
||||
{
|
||||
var query = {};
|
||||
var a = qstr.split(',');
|
||||
for (var i in a)
|
||||
{
|
||||
var b = a[i].split(':');
|
||||
query[decodeURIComponent(b[0])] = decodeURIComponent(b[1]);
|
||||
}
|
||||
|
||||
return query;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
download
|
||||
========================================================================== */
|
||||
|
||||
function download(id){
|
||||
window.open('/download.php?id='+id,'_blank')
|
||||
//alert("the function 'download button' comming soon! use rightclick and 'save image' instead");
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
toolbar functions
|
||||
========================================================================== */
|
||||
|
||||
function resetView(){
|
||||
document.getElementById('3dprev').runtime.resetView();
|
||||
}
|
||||
|
||||
function getScreenshot(){
|
||||
screenshot = document.getElementById('3dprev').runtime.getScreenshot();
|
||||
window.open(screenshot,'_blank',"width=512,height=512")
|
||||
}
|
||||
24
js/plugins.js
Normal file
24
js/plugins.js
Normal file
@ -0,0 +1,24 @@
|
||||
// Avoid `console` errors in browsers that lack a console.
|
||||
(function() {
|
||||
var method;
|
||||
var noop = function () {};
|
||||
var methods = [
|
||||
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
|
||||
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
|
||||
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
|
||||
'timeStamp', 'trace', 'warn'
|
||||
];
|
||||
var length = methods.length;
|
||||
var console = (window.console = window.console || {});
|
||||
|
||||
while (length--) {
|
||||
method = methods[length];
|
||||
|
||||
// Only stub undefined methods.
|
||||
if (!console[method]) {
|
||||
console[method] = noop;
|
||||
}
|
||||
}
|
||||
}());
|
||||
|
||||
// Place any jQuery/helper plugins in here.
|
||||
3575
js/x3dom.js
Normal file
3575
js/x3dom.js
Normal file
File diff suppressed because one or more lines are too long
39
mt_skins.sql
Normal file
39
mt_skins.sql
Normal file
@ -0,0 +1,39 @@
|
||||
-- phpMyAdmin SQL Dump
|
||||
-- version 3.4.3.1
|
||||
-- http://www.phpmyadmin.net
|
||||
--
|
||||
-- Host: localhost:3306
|
||||
-- Erstellungszeit: 03. Aug 2013 um 09:23
|
||||
-- Server Version: 5.5.27
|
||||
-- PHP-Version: 5.5.0
|
||||
|
||||
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
|
||||
SET time_zone = "+00:00";
|
||||
|
||||
|
||||
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
|
||||
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
|
||||
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
|
||||
/*!40101 SET NAMES utf8 */;
|
||||
|
||||
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Tabellenstruktur für Tabelle `mt_skins`
|
||||
--
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `mt_skins` (
|
||||
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`name` varchar(255) NOT NULL COMMENT 'name of skin',
|
||||
`author` varchar(255) NOT NULL,
|
||||
`license` varchar(255) NOT NULL,
|
||||
`type` varchar(255) NOT NULL COMMENT 'mime type',
|
||||
`img` text CHARACTER SET ascii NOT NULL,
|
||||
PRIMARY KEY (`id`)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=11 ;
|
||||
|
||||
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
|
||||
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
|
||||
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
|
||||
3
robots.txt
Normal file
3
robots.txt
Normal file
@ -0,0 +1,3 @@
|
||||
# robotstxt.org/
|
||||
|
||||
User-agent: *
|
||||
44
upload.php
Normal file
44
upload.php
Normal file
@ -0,0 +1,44 @@
|
||||
<?php
|
||||
include("connectsql.php");
|
||||
$author = htmlentities(trim($_POST[author]));
|
||||
$name = htmlentities(trim($_POST[name]));
|
||||
$license = htmlentities(trim($_POST[license]));
|
||||
$dataUrl = str_replace(' ','+',$_POST[img]);
|
||||
$output = array(
|
||||
'success'=>false,
|
||||
'status_msg'=>'UNKNOWN ERROR: could not save the Skin. unknown Error line 8'
|
||||
);
|
||||
$parts = explode(',', $dataUrl);
|
||||
$bin = base64_decode($parts[1]);
|
||||
|
||||
$size=getimagesizefromstring($bin);
|
||||
$output[img] = $size;
|
||||
|
||||
header('Content-Type: application/json');
|
||||
if($size[0] == 64 && $size[1] == 32 && $size[mime] == "image/png"){
|
||||
$valid = true;
|
||||
}
|
||||
else{
|
||||
$output[success] =false;
|
||||
$output[status_msg] = 'ERROR: NOT a valid Skin file.';
|
||||
}
|
||||
|
||||
if($author && $name && $license && $valid){
|
||||
$output[success] =true;
|
||||
$output[status_msg] = 'Upload sucessfull done';
|
||||
}
|
||||
else{
|
||||
$output[success] =false;
|
||||
$output[status_msg] = 'ERROR: could not save the Skin. Some Parameter Missing. This could be happend by an outdated browser or by a try to hack.';
|
||||
}
|
||||
|
||||
if($output[success] == true) {
|
||||
$sql = "INSERT INTO `mt_skins`( `name`, `author`, `license`, `type`,`img`) VALUES ('$name','$author','$license','$size[mime]','$parts[1]')";
|
||||
$a = mysql_query($sql);
|
||||
if($a == false){
|
||||
$output[success] = false;
|
||||
$output[status_msg] = 'ERROR: could not save the Skin. Error in Mysql Sql says: {$a}';
|
||||
}
|
||||
}
|
||||
echo json_encode($output);
|
||||
?>
|
||||
Loading…
x
Reference in New Issue
Block a user