Permalink
Switch branches/tags
Nothing to show
Find file
1beb2dd Apr 1, 2012
147 lines (144 sloc) 3.54 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Editor</title>
<link rel="stylesheet" href="./resources/style.css" type="text/css">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.panel{
position: relative;
}
#map {
position: relative;
background: url('resources/media/tile.png');
}
#grid, #gridOverlay {
position: absolute;
}
#gridOverlay {
z-index: 10;
}
#list {
position: absolute;
right: 5px;
width: 210px;
top: 0;
bottom: 0;
background-color: #666;
overflow-y: auto;
}
#slidelist {
margin: 0;
padding: 5px 5px 5px 40px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#slidelist li {
margin: 3px;
padding: 0;
border: 1px solid #999;
border-radius: 4px;
padding: 4px;
background-color: #555;
}
#tooltip {
position: absolute;
width: 14em;
height: 1.2em;
overflow: hidden;
border: 1px solid #999;
border-radius: 4px;
padding: 4px;
box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
background: rgba(255,255,255,0.6);
z-index: 20;
}
h3.caption {
margin: 0;
}
#title_text {
width: 95%;
height: 1.5em;
font-size: 1.5em;
}
#body_editor {
width: 840px;
height: 300px;
position: relative;
}
#detail {
width: 850px;
}
#detail p {
margin: 0;
}
.savebtn {
}
</style>
</head>
<body>
<div id="tooltip" class="hidden">
Tooltip
</div>
<section id="main" class="panel">
<div id="list">
<ol id="slidelist"></ol>
</div>
<div id="map">
<canvas id="grid"></canvas>
<div id="gridOverlay"></div>
</div>
<div id="detail" class="hidden">
<div id="detailContent"></div>
<div id="body_editor"></div>
<div class="foot">
<button class="savebtn">Save</button>
<button class="cancelbtn">Cancel</button>
</div>
</div>
<script type="text/x-template" id="detail-template">
<div class="media">
<div class="img">
<span class="imgblock"></span>
</div>
<div class="bd field-{id}">
<input type="hidden" id="id_value" name="id" value="{id}"/>
<input type="text" id="x_value" name="x" value="{x}" style="width: 2em"/>
<input type="text" id="y_value" name="y" value="{y}" style="width: 2em"/>
<input type="hidden" id="body_text" name="body" value="{body}"/>
<div class="field-description">
<h3 class="caption"><label for="">Slided Title</label></h3>
<p><textarea name="title" id="title_text" class="fullwidth shortheight">{title}</textarea></p>
</div>
<div class="field-description">
<h3 class="caption"><label for="">Body</label></h3>
<div id="body_placeholder"></div>
</div>
</div>
</div>
</script>
</section>
<script src="resources/vendor/require.js"></script>
<script src="resources/vendor/jquery-1.7.2.js"></script>
<script>
require({
baseUrl: './resources',
paths: {
'$': 'dollar',
'use': 'plugins/use',
'json': 'plugins/json',
'text': 'plugins/text',
'ace': 'vendor/ace'
}
}, ['editor']);
</script>
</body>
</html>