vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 09:17:56 +01:00
Code Issues Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
peteruithoven 2014-01-10 17:21:43 +01:00
parent f7fec0aec6
commit 82b57def39
17 changed files with 166 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/SettingsWindow.js
View File

@ -77,7 +77,7 @@ function SettingsWindow() {
this.btnOK = this.window.find(".btnOK"); this.btnOK = this.window.find(".btnOK");
enableButton(this.btnOK,this.submitwindow); enableButton(this.btnOK,this.submitwindow);
this.window.find(".settingsContainer").load("settings.html", function() { this.window.find("#settingsContainer").load("settings.html", function() {
console.log("Settings:finished loading settings.html, now loading settings..."); console.log("Settings:finished loading settings.html, now loading settings...");
self.form = self.window.find("form"); self.form = self.window.find("form");

10
js/WordArt.js
View File

@ -1,15 +1,15 @@
function initWordArt() { function initWordArt() {
$("body").append('<div id="svgfont" style="display:none"></div>'); $("body").append('<div id="svgfont" style="display:none"></div>');
$("#svgfont").load("img/font.svg?"); $("#svgfont").load("img/font.svg?");
$(".btnWordArtOk").on("onButtonClick",onWordArtOk); $("#btnWordArtOk").on("onButtonClick",onWordArtOk);
$(".btnWordArtCancel").on("onButtonClick",onWordArtCancel); $("#btnWordArtCancel").on("onButtonClick",onWordArtCancel);
} }
function showWordArtDialog() { function showWordArtDialog() {
buttonGroupAdd.hide(); buttonGroupAdd.hide();
showPopup(popupWordArt); showPopup(popupWordArt);
$(".txtWordArt").focus(); $("#txtWordArt").focus();
$(".txtWordArt").val(""); //clear textbox $("#txtWordArt").val(""); //clear textbox
} }
function onWordArtCancel() { function onWordArtCancel() {
@ -19,7 +19,7 @@ function onWordArtCancel() {
function onWordArtOk() { function onWordArtOk() {
hidePopup(popupWordArt); hidePopup(popupWordArt);
var s = $(".txtWordArt").val(); var s = $("#txtWordArt").val();
if (s!=undefined) { if (s!=undefined) {
var points = getStringAsPoints(s); var points = getStringAsPoints(s);

62
js/buttonbehaviors.js
View File

@ -16,36 +16,36 @@ function initButtonBehavior() {
$(".btn").Button(); //initalizes all buttons $(".btn").Button(); //initalizes all buttons
btnOops = $(".btnOops"); btnOops = $("#btnOops");
btnInfo = $(".btnInfo"); btnInfo = $("#btnInfo");
btnSettings = $(".btnSettings"); btnSettings = $("#btnSettings");
btnNew = $(".btnNew"); btnNew = $("#btnNew");
btnPrint= $(".btnPrint"); btnPrint= $("#btnPrint");
btnStop = $(".btnStop"); btnStop = $("#btnStop");
btnPrevious = $(".btnPrevious"); btnPrevious = $("#btnPrevious");
btnNext = $(".btnNext"); btnNext = $("#btnNext");
btnSave = $(".btnSave"); btnSave = $("#btnSave");
btnWordArt = $(".btnWordArt"); btnWordArt = $("#btnWordArt");
btnZoom = $(".btnZoom"); btnZoom = $("#btnZoom");
btnUp = $(".btnUp"); btnUp = $("#btnUp");
btnDown = $(".btnDown"); btnDown = $("#btnDown");
btnMove = $(".btnMove"); btnMove = $("#btnMove");
btnTwistLeft = $(".btnTwistLeft"); btnTwistLeft = $("#btnTwistLeft");
btnTwistRight = $(".btnTwistRight"); btnTwistRight = $("#btnTwistRight");
btnShape = $(".btnShape"); btnShape = $("#btnShape");
btnRotate = $(".btnRotate"); btnRotate = $("#btnRotate");
btnEditClosed = $(".btnEditClosed"); btnEditClosed = $("#btnEditClosed");
btnEditOpen = $(".btnEditOpen"); btnEditOpen = $("#btnEditOpen");
btnStraight = $(".btnStraight"); btnStraight = $("#btnStraight");
btnDiv = $(".btnDiv"); btnDiv = $("#btnDiv");
btnConv = $(".btnConv"); btnConv = $("#btnConv");
btnSine = $(".btnSine"); btnSine = $("#btnSine");
btnAdd = $(".btnAdd"); btnAdd = $("#btnAdd");
btnToggleVertical = $(".btnToggleVertical"); btnToggleVertical = $("#btnToggleVertical");
buttonGroupAdd = $("#buttonGroupAdd"); buttonGroupAdd = $("#buttonGroupAdd");
buttonGroupVertical = $(".buttonGroupVertical"); buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
popupWordArt = $(".popupWordArt"); popupWordArt = $("#popupWordArt");
popupShape = $(".popupShape"); popupShape = $("#popupShape");
btnNew.on("onButtonClick", onBtnNew); btnNew.on("onButtonClick", onBtnNew);
btnWordArt.on("onButtonClick", onBtnWordArt); btnWordArt.on("onButtonClick", onBtnWordArt);
@ -74,7 +74,7 @@ function initButtonBehavior() {
setSketchModified(false); setSketchModified(false);
function onBtnToggleVertical() { function onBtnToggleVertical() {
buttonGroupVertical.toggle(); buttonGroupVerticalShapes.toggle();
} }
function onBtnAdd() { function onBtnAdd() {
@ -198,7 +198,7 @@ function initButtonBehavior() {
function onBtnShape(e) { function onBtnShape(e) {
showShapeDialog(); showShapeDialog();
buttonGroupAdd.hide(); buttonGroupAdd.fadeOut();
} }
enableButton(btnSettings, openSettingsWindow); enableButton(btnSettings, openSettingsWindow);

2
js/init_layout.js
View File

@ -27,7 +27,7 @@ function doOnResize() {
function initLayouting() { function initLayouting() {
console.log("f:initLayouting()"); console.log("f:initLayouting()");
$drawAreaContainer = $(".drawareacontainer"); $drawAreaContainer = $("#drawareacontainer");
canvas.width = $canvas.width(); canvas.width = $canvas.width();
canvas.height = $canvas.height(); // canvas.clientHeight; canvas.height = $canvas.height(); // canvas.clientHeight;

8
js/sidebar.js
View File

@ -5,13 +5,13 @@ function initSidebars() {
console.log("f:initSidebars()"); console.log("f:initSidebars()");
sidebarLeft = new SideBar(); sidebarLeft = new SideBar();
sidebarLeft.init(".leftpanel", "hideleft", function() { sidebarLeft.init("#leftpanel", "hideleft", function() {
$(".leftpanel").show(); $("#leftpanel").show();
}); });
sidebarRight = new SideBar(); sidebarRight = new SideBar();
sidebarRight.init(".rightpanel", "hideright", function() { sidebarRight.init("#rightpanel", "hideright", function() {
$(".rightpanel").show(); $("#rightpanel").show();
}); });
} }

8
less/base.less
View File

@ -40,7 +40,7 @@ body {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.bgTop, .bgMiddle, .bgBottom { #bgTop, #bgMiddle, #bgBottom {
opacity: 1.0; opacity: 1.0;
transition: opacity .35s linear; transition: opacity .35s linear;
position: absolute; position: absolute;
@ -48,15 +48,15 @@ body {
z-index: -5; z-index: -5;
} }
.bgTop { #bgTop {
top: 0px; top: 0px;
} }
.bgMiddle { #bgMiddle {
top: 30%; top: 30%;
} }
.bgBottom { #bgBottom {
bottom: 0px; bottom: 0px;
} }

18
less/base_centerpanel.less
View File

@ -1,5 +1,5 @@
// CENTER PANEL // CENTER PANEL
.centerpanel { #centerpanel {
position: absolute; position: absolute;
left: 50%; left: 50%;
margin-left: -@center-panel-width/2; margin-left: -@center-panel-width/2;
@ -9,20 +9,20 @@
border: 1px solid red; border: 1px solid red;
} }
.logopanel { #logopanel {
height: 15%; height: 15%;
text-align: center; text-align: center;
width: 40%; width: 40%;
margin-left: 30%; margin-left: 30%;
cursor: pointer; cursor: pointer;
img.pencil { img#pencil {
margin-top: 2%; margin-top: 2%;
max-width: 50%; max-width: 50%;
max-height: 50%; max-height: 50%;
} }
img.logo { img#logo {
max-width: 90%; max-width: 90%;
margin-bottom: 2%; margin-bottom: 2%;
max-height: 45%; max-height: 45%;
@ -30,7 +30,7 @@
} }
// DRAW AREA // DRAW AREA
.drawareacontainer { #drawareacontainer {
position: relative; position: relative;
width: 100%; width: 100%;
height: 79%; height: 79%;
@ -99,20 +99,20 @@
@media screen and (max-height: 655px) { @media screen and (max-height: 655px) {
.logopanel { #logopanel {
height: 10%; height: 10%;
img.logo { img#logo {
margin-top: 1%; margin-top: 1%;
max-height: 90%; max-height: 90%;
} }
img.pencil { img#pencil {
display: none; display: none;
} }
} }
.drawareacontainer { #drawareacontainer {
height: 83%; height: 83%;
} }

2
less/base_leftpanel.less
View File

@ -1,5 +1,5 @@
// LEFT PANEL // LEFT PANEL
.leftpanel { #leftpanel {
position: absolute; position: absolute;
width: @left-panel-width; width: @left-panel-width;
top: 0px; top: 0px;

2
less/base_rightpanel.less
View File

@ -1,5 +1,5 @@
// RIGHT PANEL // RIGHT PANEL
.rightpanel { #rightpanel {
position: absolute; position: absolute;
width: @right-panel-width; width: @right-panel-width;
top: 0; top: 0;

39
less/buttons.less
View File

@ -9,7 +9,7 @@
cursor: default; cursor: default;
} }
.btnPrint { #btnPrint {
margin: 1% 5% 5% 0%; margin: 1% 5% 5% 0%;
width: 90%; width: 90%;
max-width: 163px; max-width: 163px;
@ -17,7 +17,7 @@
float: right; float: right;
} }
.btnStop { #btnStop {
margin: 5% 5% 1% 5%; margin: 5% 5% 1% 5%;
float: right; float: right;
width: 80%; width: 80%;
@ -25,7 +25,7 @@
height: auto; height: auto;
} }
.btnsSettingsInfo { #btnsSettingsInfo {
position: absolute; position: absolute;
bottom: 4%; //25px; bottom: 4%; //25px;
right: 5px; right: 5px;
@ -34,58 +34,59 @@
max-width: 160px; max-width: 160px;
} }
.btnInfo { #btnInfo {
width: 40%; width: 40%;
max-width: 53px; max-width: 53px;
height: auto; height: auto;
} }
.btnSettings { #btnSettings {
width: 40%; width: 40%;
max-width: 53px; max-width: 53px;
height: auto; height: auto;
float: right; float: right;
} }
.btnNew { #btnNew {
margin: 5% 0% 1% 5%; margin: 5% 0% 1% 5%;
width: 90%; width: 90%;
max-width: 130px; max-width: 130px;
height: auto; height: auto;
} }
.btnsPrevNext { #btnsPrevNext {
margin: 1% 7%; margin: 1% 7%;
max-width: 100px; max-width: 100px;
text-align:center;
} }
.btnPrevious { #btnPrevious {
width: 40%; width: 40%;
max-width: 56px; max-width: 56px;
height: auto; height: auto;
} }
.btnNext { #btnNext {
width: 40%; width: 40%;
max-width: 56px; max-width: 56px;
height: auto; height: auto;
float: right; float: right;
} }
.btnSave { #btnSave {
margin: 4% 5% 1% 5%; margin: 4% 5% 1% 5%;
width: 90%; width: 90%;
max-width: 100px; max-width: 100px;
height: auto; height: auto;
} }
.btnOops { #btnOops {
margin: 5% 5% 1% 5%; margin: 5% 5% 1% 5%;
width: 90%; width: 90%;
max-width: 100px; max-width: 100px;
height: auto; height: auto;
} }
.btnAdd { #btnAdd {
width: 90%; width: 90%;
max-width: 100px; max-width: 100px;
margin: 5% 5% 1% 5%; margin: 5% 5% 1% 5%;
@ -117,14 +118,14 @@
display: none; display: none;
} }
.btnEditClosed { #btnEditClosed {
top: 5px; top: 5px;
left: 5px; left: 5px;
width: .75*31px; width: .75*31px;
position: absolute; position: absolute;
} }
.btnEditOpen { #btnEditOpen {
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 5px; left: 5px;
@ -132,14 +133,14 @@
display: none; display: none;
} }
.btnAddOpen { /*#btnAddOpen {
position: absolute; position: absolute;
top: 370px; top: 370px;
left: 60px; left: 60px;
z-index: 1000; z-index: 1000;
width: 200%; width: 200%;
display: none; display: none;
} }*/
.buttonGroup { .buttonGroup {
background-color: white; background-color: white;
@ -157,13 +158,13 @@
left: 60px; left: 60px;
width: 140px; /*fixme: can this grow based on it's content?*/ width: 140px; /*fixme: can this grow based on it's content?*/
.btnWordArt, .btnShape { #btnWordArt, #btnShape {
width: 60px; /* scaled down >50% */ width: 60px; /* scaled down >50% */
float: left; float: left;
} }
} }
.buttonGroupVertical { #buttonGroupVerticalShapes {
top: 10px; top: 10px;
left: 10px; left: 10px;
padding-top: 20px; padding-top: 20px;
@ -174,7 +175,7 @@
} }
} }
.btnToggleVertical { #btnToggleVertical {
position: absolute; position: absolute;
top: 0; top: 0;
left: 10px; left: 10px;

16
less/mobile.less
View File

@ -2,25 +2,25 @@
/* /*
LEFT LEFT
*/ */
.leftpanel { #leftpanel {
// width: @mobilePanelsWidth; // width: @mobilePanelsWidth;
.btnNew { #btnNew {
margin: 5% 5% 1% 5%; margin: 5% 5% 1% 5%;
width: 90%; width: 90%;
} }
.btnSave { #btnSave {
margin-left: 5%; margin-left: 5%;
width: 90%; width: 90%;
} }
.btnOops { #btnOops {
margin-left: 5%; margin-left: 5%;
width: 90%; width: 90%;
} }
.btnAdd { #btnAdd {
margin-left: 5%; margin-left: 5%;
width: 90%; width: 90%;
} }
@ -29,15 +29,15 @@
/* /*
RIGHT RIGHT
*/ */
.rightpanel { #rightpanel {
// width: @mobilePanelsWidth; // width: @mobilePanelsWidth;
// margin-top: 5%; /* reserve space for 'status message' in right top */ // margin-top: 5%; /* reserve space for 'status message' in right top */
.btnPrint { #btnPrint {
margin: 1% 5% 5% 5%; margin: 1% 5% 5% 5%;
width: 90%; width: 90%;
} }
.btnStop { #btnStop {
margin: 5% 6% 1% 5%; margin: 5% 6% 1% 5%;
width: 70%; width: 70%;
} }

22
less/popup.less
View File

@ -34,23 +34,22 @@
display: none; display: none;
} }
.popup.popupWordArt { #popupWordArt {
width: 50%; width: 50%;
margin-left: -50%/2; margin-left: -50%/2;
}
.popup.popupShape { input[type="text"] {
width: 30%;
margin-left: -30%/2;
}
.popupWordArt input[type="text"] {
width: 100%; width: 100%;
} }
#btnWordArtOk {
.popupShape { float: right;
// border: 2px solid black; margin: 15px 0 18px 0;
} }
}
#popupShape {
width: 30%;
margin-left: -30%/2;
#shapePreview { #shapePreview {
// width: 150px; // width: 150px;
@ -68,6 +67,7 @@
bottom: 5%; bottom: 5%;
right: 3%; right: 3%;
} }
}
.columnRight { .columnRight {
float: right; float: right;

2
less/portrait.less
View File

@ -6,7 +6,7 @@
display: block; display: block;
} }
.vertImage { #vertImage {
margin: 0; margin: 0;
padding: 0; padding: 0;
/*border: 2px solid #f0f;*/ /*border: 2px solid #f0f;*/

2
less/progressbar.less
View File

@ -3,7 +3,7 @@
PROGRESS GUAGE PROGRESS GUAGE
*/ */
.progressbarCanvasContainerParent { #progressbarCanvasContainerParent {
position:relative; position:relative;
width:100%; width:100%;
} }

6
less/settingsPopup.less
View File

@ -37,12 +37,12 @@
.toppanel { .toppanel {
height: 10%; height: 10%;
.settingsLabelContainer { #settingsLabelContainer {
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 1%; margin-bottom: 1%;
.settingsLabelImg { #settingsLabelImg {
width: 45%; width: 45%;
max-width: 373px; max-width: 373px;
height: auto; height: auto;
@ -53,7 +53,7 @@
width: 100%; width: 100%;
height: 90%; height: 90%;
> .settingsContainer { > #settingsContainer {
float:left; float:left;
width: 83%; width: 83%;
height: 98%; height: 98%;

2
less/thermometer.less
View File

@ -4,7 +4,7 @@
THERMOMETER THERMOMETER
*/ */
.thermometerContainerParent { #thermometerContainerParent {
position:relative; position:relative;
width:100%; width:100%;
padding-top: 10px; padding-top: 10px;

96
www/index.html
View File

@ -18,41 +18,40 @@
<!-- background images --> <!-- background images -->
<div class="bgContainer"> <div class="bgContainer">
<img class="bgTop" src="img/bg_top.png" /> <img id="bgTop" src="img/bg_top.png" />
<img class="bgMiddle" src="img/bg_middle.png" /> <img id="bgMiddle" src="img/bg_middle.png" />
<img class="bgBottom" src="img/bg_bottom.png" /> <img id="bgBottom" src="img/bg_bottom.png" />
</div> </div>
<!-- left panel --> <!-- left panel -->
<div class="leftpanel"> <div id="leftpanel">
<!-- <div class='sidebutton shadowright'></div> --> <img id="btnNew" class="btn" src="img/buttons/btnNew.png" /><br/>
<img class="btnNew btn" src="img/buttons/btnNew.png" /><br/> <div id="btnsPrevNext">
<div class="btnsPrevNext" style="text-align:center"> <img id="btnPrevious" class="btn disabled" src="img/buttons/btnLeft.png">
<img class="btnPrevious btn disabled" src="img/buttons/btnLeft.png"> <img id="btnNext" class="btn disabled" src="img/buttons/btnRight.png">
<img class="btnNext btn disabled" src="img/buttons/btnRight.png">
</div> </div>
<img class="btnSave btn" src="img/buttons/btnSave.png" /><br/> <img id="btnSave" class="btn" src="img/buttons/btnSave.png" /><br/>
<img class="btnOops btn" src="img/buttons/btnOops.png" /><br/> <img id="btnOops" class="btn" src="img/buttons/btnOops.png" /><br/>
<img class="btnAdd btn" src="img/buttons/btnAdd.png" /><br/> <img id="btnAdd" class="btn" src="img/buttons/btnAdd.png" /><br/>
<div class="buttonGroup" id="buttonGroupAdd"> <div id="buttonGroupAdd" class="buttonGroup">
<img class="btnWordArt btn" src="img/buttons/btnWordArt.png" /> <img id="btnWordArt" class="btn" src="img/buttons/btnWordArt.png" />
<img class="btnShape btn" src="img/buttons/btnShape.png" /> <img id="btnShape" class="btn" src="img/buttons/btnShape.png" />
</div> </div>
</div> </div>
<!-- right panel --> <!-- right panel -->
<div class="rightpanel"> <div id="rightpanel">
<img class="btnPrint btn clearfix" src="img/buttons/btnPrint.png" /> <img id="btnPrint" class="btn clearfix" src="img/buttons/btnPrint.png" />
<img class="btnStop btn clearfix disabled" src="img/buttons/btnStop.png" /> <img id="btnStop" class="btn clearfix disabled" src="img/buttons/btnStop.png" />
<div class="progressbarCanvasContainerParent"> <div id="progressbarCanvasContainerParent">
<div id="progressbarCanvasContainer"> <div id="progressbarCanvasContainer">
<canvas id="progressbarCanvas" width="93" height="82"></canvas> <canvas id="progressbarCanvas" width="93" height="82"></canvas>
</div> </div>
</div> </div>
<div class="thermometerContainerParent"> <div id="thermometerContainerParent">
<div id="thermometerContainer"> <div id="thermometerContainer">
<canvas id="thermometerCanvas" width="90" height="120"></canvas> <canvas id="thermometerCanvas" width="90" height="120"></canvas>
</div> </div>
@ -69,25 +68,24 @@
<div><img class="verticalshape sinus" src="img/vertical_shape_icons/sinus.png" /></div> <div><img class="verticalshape sinus" src="img/vertical_shape_icons/sinus.png" /></div>
</div> --> </div> -->
<div class="btnsSettingsInfo"> <div id="btnsSettingsInfo">
<img class="btnSettings btn" src="img/buttons/btnSettings.png"> <img id="btnSettings" class="btn" src="img/buttons/btnSettings.png">
<img class="btnInfo btn" src="img/buttons/btnInfo.png"> <img id="btnInfo" class="btn" src="img/buttons/btnInfo.png">
</div> </div>
</div> </div>
<div id="message"></div> <div id="message"></div>
<!-- center panel --> <!-- center panel -->
<div class="centerpanel"> <div id="centerpanel">
<div class="logopanel" onclick="location.reload()"> <div id="logopanel" onclick="location.reload()">
<img class="pencil" src="img/logo/pencil.png"/> <img id="pencil" src="img/logo/pencil.png"/>
<img class="logo" src="img/logo/doodle3d.png"/> <img id="logo" src="img/logo/doodle3d.png"/>
</div> </div>
<div class="drawareacontainer"> <div id="drawareacontainer">
<div id="canvasContainers"> <div id="canvasContainers">
<div id="mycanvasContainer"> <div id="mycanvasContainer">
@ -96,25 +94,25 @@
<div id="previewContainer"> <div id="previewContainer">
<canvas id="preview"></canvas> <canvas id="preview"></canvas>
<div class="buttonGroup buttonGroupVertical"> <div id="buttonGroupVerticalShapes" class="buttonGroup">
<img class="btn btnTwistLeft" src="img/buttons/btnTwistLeft.png" /> <img id="btnTwistLeft" class="btn" src="img/buttons/btnTwistLeft.png" />
<img class="btn btnTwistRight" src="img/buttons/btnTwistRight.png" /> <img id="btnTwistRight" class="btn" src="img/buttons/btnTwistRight.png" />
<img class="btn btnUp" src="img/buttons/btnUp.png" /> <img id="btnUp" class="btn" src="img/buttons/btnUp.png" />
<img class="btn btnDown" src="img/buttons/btnDown.png" /> <img id="btnDown" class="btn" src="img/buttons/btnDown.png" />
<hr> <hr>
<img class="btn btnConv" src="img/buttons/btnConv.png" /> <img id="btnConv" class="btn" src="img/buttons/btnConv.png" />
<img class="btn btnDiv" src="img/buttons/btnDiv.png" /> <img id="btnDiv" class="btn" src="img/buttons/btnDiv.png" />
<img class="btn btnSine" src="img/buttons/btnSine.png" /> <img id="btnSine" class="btn" src="img/buttons/btnSine.png" />
<img class="btn btnStraight" src="img/buttons/btnStraight.png" /> <img id="btnStraight" class="btn" src="img/buttons/btnStraight.png" />
</div> </div>
<img class="btn btnToggleVertical" src="img/buttons/btnArrowOpen.png" /> <img id="btnToggleVertical" class="btn" src="img/buttons/btnArrowOpen.png" />
</div> </div>
</div> </div>
<canvas id="preview_tmp"></canvas> <canvas id="preview_tmp"></canvas>
<img class="btnEditClosed btn" src="img/buttons/btnEditClosed.png" /> <img id="btnEditClosed" class="btn" src="img/buttons/btnEditClosed.png" />
<img class="btnEditOpen btn" src="img/buttons/btnEditOpen.png" /> <img id="btnEditOpen" class="btn" src="img/buttons/btnEditOpen.png" />
</div> </div>
</div> </div>
@ -127,16 +125,16 @@
<div id="popupMask"></div> <div id="popupMask"></div>
<div class="popup popupWordArt"> <div class="popup" id="popupWordArt">
<div class="content"> <div class="content">
<h1>Add WordArt</h1> <h1>Add WordArt</h1>
Please enter your text:<br> Please enter your text:<br>
<input class="txtWordArt" type="text"/> <input id="txtWordArt" type="text"/>
<img class="btn btnWordArtOk" src="img/buttons/btnOk.png"> <img id="btnWordArtOk" class="btn" src="img/buttons/btnOk.png">
</div> </div>
</div> </div>
<div class="popup popupShape"> <div class="popup" id="popupShape">
<div class="content"> <div class="content">
<h1>Add a new shape</h1> <h1>Add a new shape</h1>
<div class="columnRight"> <div class="columnRight">
@ -152,12 +150,12 @@
<div id="contentOverlay"> <div id="contentOverlay">
<div id="settings"> <div id="settings">
<div class="toppanel"> <div class="toppanel">
<div class="settingsLabelContainer"> <div id="settingsLabelContainer">
<img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" /> <img id="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
</div> </div>
</div> </div>
<div class="bottompanel"> <div class="bottompanel">
<div class="settingsContainer"></div> <div id="settingsContainer"></div>
<div class="right"> <div class="right">
<div class="btnContainer"> <div class="btnContainer">
<img src="img/buttons/btnOk.png" class="btn btnOK" alt="save"/> <img src="img/buttons/btnOk.png" class="btn btnOK" alt="save"/>
@ -169,7 +167,7 @@
</div> </div>
<div id="portrait"> <div id="portrait">
<img class="vertImage" src="img/bg_vertical.png"/> <img id="vertImage" src="img/bg_vertical.png"/>
</div> </div>
<div id="helpContainer"></div> <div id="helpContainer"></div>