just draft

lleitep3 · Feb 4, 2012 · 48881e7 · 48881e7
1 parent a3cda08
commit 48881e7
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,73 @@
+section, div {
+    border: dotted #cccccc 1px;
+}
+
+body section {
+    float: inside;
+    width: 100%;
+    text-align: center;
+}
+
+body section section {
+    margin: 10px 15px;
+}
+
+#esquerda {
+    position: absolute;
+    width: 20%;
+}
+
+#center {
+    display: inline-block;
+    margin: 5px auto;
+    height: auto;
+    width: auto;
+    padding: 2em 4em;
+    background-color: #eee;
+    border-radius: 25px;
+    -moz-box-shadow: inset -3px -5px 10px 0.9px #aaa;
+    -webkit-box-shadow: inset -3px -5px 10px 0.9px #aaa;
+    box-shadow: inset -3px -5px 10px 0.9px #aaa;
+}
+
+#paper {
+    display: inline-block;
+    height: 594px;
+    width: 420px;
+    background-color: #fcfcfc;
+    box-shadow: -15px -10px 15px -7px #ccc;
+}
+
+header {
+    text-align: center;
+}
+
+.component {
+    display: inline-block;
+    position: relative;
+    background-color: #aaa;
+    height: 50px;
+    width: 150px;
+    cursor: move;
+}
+
+.component:hover {
+    border: dotted #000 2px;
+}
+
+.handle {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    background-color: #fff;
+    background-image: url('img/draggable.png');
+    background-repeat: no-repeat;
+    cursor: move;
+    width: 16px;
+    height: 16px;
+}
+#menu ul {
+    list-style: none;
+    padding: 2px;
+}
+
diff --git a/index.php b/index.php
@@ -0,0 +1,38 @@
+<html>
+    <head>
+        <title>UI PDF Creator</title>
+        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all">
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
+        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
+
+        <script type="text/javascript">
+            $(function(){
+                $('.component').draggable({containment : 'parent'});
+            });
+        </script>
+
+    </head>
+    <body>
+        <header> <h1>UI PDF Creator</h1> </header>
+        <section>
+            <section id="esquerda">
+                <nav id="menu">
+                    <ul>
+                        <li>Text Element</li>
+                        <li>Image Element</li>
+                    </ul>
+                </nav>    
+            </section>
+            <section id="center">
+                <div id="paper">
+                    <div class="component">
+
+                    </div>
+                </div>
+            </section>
+        </section>
+        <footer>
+
+        </footer>
+    </body>
+</html>