runtastic-tiny_mce_curblyadvimage 0.2.4

data/.document

@@ -0,0 +1,5 @@
+README.rdoc
+lib/**/*.rb
+bin/*
+features/**/*.feature
+LICENSE

data/.gitignore

@@ -0,0 +1,21 @@
+## MAC OS
+.DS_Store
+
+## TEXTMATE
+*.tmproj
+tmtags
+
+## EMACS
+*~
+\#*
+.\#*
+
+## VIM
+*.swp
+
+## PROJECT::GENERAL
+coverage
+rdoc
+pkg
+
+## PROJECT::SPECIFIC

data/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2009 Steve Leung
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,17 @@
+= tiny_mce_curblyadvimage
+
+Description goes here.
+
+== Note on Patches/Pull Requests
+ 
+* Fork the project.
+* Make your feature addition or bug fix.
+* Add tests for it. This is important so I don't break it in a
+  future version unintentionally.
+* Commit, do not mess with rakefile, version, or history.
+  (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
+* Send me a pull request. Bonus points for topic branches.
+
+== Copyright
+
+Copyright (c) 2010 Steve Leung. See LICENSE for details.

data/Rakefile

@@ -0,0 +1,53 @@
+require 'rubygems'
+require 'rake'
+
+begin
+  require 'jeweler'
+  Jeweler::Tasks.new do |gem|
+    gem.name = "tiny_mce_curblyadvimage"
+    gem.summary = %Q{Curbly Advanced Images for Tiny MCE}
+    gem.description = %Q{Curbly Advanced Images for Tiny MCE}
+    gem.email = "scyl88@gmail.com"
+    gem.homepage = "http://github.com/wakiki/tiny_mce_curblyadvimage"
+    gem.authors = ["Steve Leung"]
+    gem.add_development_dependency "thoughtbot-shoulda", ">= 0"
+    # gem is a Gem::Specification... see http://www.rubygems.org/read/chapter/20 for additional settings
+  end
+  Jeweler::GemcutterTasks.new
+rescue LoadError
+  puts "Jeweler (or a dependency) not available. Install it with: gem install jeweler"
+end
+
+require 'rake/testtask'
+Rake::TestTask.new(:test) do |test|
+  test.libs << 'lib' << 'test'
+  test.pattern = 'test/**/test_*.rb'
+  test.verbose = true
+end
+
+begin
+  require 'rcov/rcovtask'
+  Rcov::RcovTask.new do |test|
+    test.libs << 'test'
+    test.pattern = 'test/**/test_*.rb'
+    test.verbose = true
+  end
+rescue LoadError
+  task :rcov do
+    abort "RCov is not available. In order to run rcov, you must: sudo gem install spicycode-rcov"
+  end
+end
+
+task :test => :check_dependencies
+
+task :default => :test
+
+require 'rake/rdoctask'
+Rake::RDocTask.new do |rdoc|
+  version = File.exist?('VERSION') ? File.read('VERSION') : ""
+
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title = "tiny_mce_curblyadvimage #{version}"
+  rdoc.rdoc_files.include('README*')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end

data/VERSION

@@ -0,0 +1 @@
+0.2.2

data/lib/assets/plugins/curblyadvimage/css/advimage.css

@@ -0,0 +1,84 @@
+#src_list, #over_list, #out_list {width:280px;}
+.mceActionPanel {margin-top:7px;}
+.alignPreview {border:1px solid #000; width:140px; height:140px; overflow:hidden; padding:5px;}
+.checkbox {border:0;}
+.panel_wrapper div.current {height:245px;}
+#prev {margin:0; border:1px solid #000; width:99%; height:150px; overflow:auto;}
+#align, #classlist {width:150px;}
+#width, #height {vertical-align:middle; width:50px; text-align:center;}
+#vspace, #hspace, #border {vertical-align:middle; width:30px; text-align:center;}
+#class_list {width:180px;}
+input {width: 280px;}
+input.submit {
+	width: auto;
+	margin: 0;
+	}
+#constrain, #onmousemovecheck {width:auto;}
+#id, #dir, #lang, #usemap, #longdesc {width:200px;}
+
+ul.curblyadvimage_list {
+	list-style: none;
+	margin:0;
+	padding:0;
+	}
+	ul.curblyadvimage_list li {
+		display:block;
+		width: 75px;
+		float: left;
+		margin-right: 8px;
+		margin-bottom:5px;
+		}
+		ul.curblyadvimage_list li img {
+			width: 75px;
+			}
+		ul.curblyadvimage_list li a {		
+			outline:none;
+			}
+	ul.curblyadvimage_list li.selected a img {
+		border: 2px solid red;
+		}
+	ul.curblyadvimage_list li .thumbs {
+		display:none;
+		background: #efefef;
+		position: absolute;
+		width:65px;
+		margin: 45px 5px 5px 25px;
+		border-right: 2px solid #666;
+		border-bottom: 2px solid #333;
+		border-top: 2px solid #efefef;		
+		border-left: 2px solid #efefef;		
+		}
+		ul.curblyadvimage_list li .thumbs a {		
+			margin-bottom: 5px;
+			line-height: 1.5em;
+			text-decoration: none;
+			}
+			ul.curblyadvimage_list li .thumbs a {					
+				text-decoration: underline;
+				}
+	ul.curblyadvimage_list li.selected .thumbs {
+		display:block;
+		}
+
+.right {
+	float:right;
+}
+.left {
+	float:left;
+}
+.clear {
+	clear:both;
+}
+.pagination a {
+  border: 1px solid #7DA807;
+  color: #7DA807;
+  margin-right: .3em;
+  padding: .3em; }
+.pagination a:hover {
+  background: #7DA807;
+  border: 1px solid #7DA807;
+  color: #ffffff; }
+.pagination a.active {
+  background: #1EA2C1;
+  border: none;
+  color: #ffffff; }

data/lib/assets/plugins/curblyadvimage/editor_plugin.js

@@ -0,0 +1,52 @@
+/**
+ * $Id: editor_plugin_src.js 520 2008-01-07 16:30:32Z spocke $
+ *
+ * @author Moxiecode
+ * @copyright Copyright © 2004-2008, Moxiecode Systems AB, All rights reserved.
+ */
+
+(function() {
+        // Load plugin specific language pack
+        tinymce.PluginManager.requireLangPack('curblyadvimage');
+
+        tinymce.create('tinymce.plugins.CurblyAdvancedImagePlugin', {
+                init : function(ed, url) {
+                        // Register commands
+                        ed.addCommand('mceCurblyAdvImage', function() {
+                                var e = ed.selection.getNode();
+
+                                // Internal image object like a flash placeholder
+                                if (ed.dom.getAttrib(e, 'class').indexOf('mceItem') != -1)
+                                        return;
+
+                                ed.windowManager.open({
+                                        file : url + '/image.htm',
+                                        width : 480 + parseInt(ed.getLang('curblyadvimage.delta_width', 0)),
+                                        height : 385 + parseInt(ed.getLang('curblyadvimage.delta_height', 0)),
+                                        inline : 1
+                                }, {
+                                        plugin_url : url
+                                });
+                        });
+
+                        // Register buttons
+                        ed.addButton('image', {
+                                title : 'curblyadvimage.image_desc',
+                                cmd : 'mceCurblyAdvImage'
+                        });
+                },
+
+                getInfo : function() {
+                        return {
+                                longname : 'Curbly Advanced image',
+                                author : 'Moxiecode Systems AB',
+                                authorurl : 'http://tinymce.moxiecode.com',
+                                infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advimage',
+                                version : tinymce.majorVersion + "." + tinymce.minorVersion
+                        };
+                }
+        });
+
+        // Register plugin
+        tinymce.PluginManager.add('curblyadvimage', tinymce.plugins.CurblyAdvancedImagePlugin);
+})();

data/lib/assets/plugins/curblyadvimage/editor_plugin_src.js

@@ -0,0 +1,52 @@
+/**
+ * $Id: editor_plugin_src.js 520 2008-01-07 16:30:32Z spocke $
+ *
+ * @author Moxiecode
+ * @copyright Copyright � 2004-2008, Moxiecode Systems AB, All rights reserved.
+ */
+
+(function() {
+        // Load plugin specific language pack
+        tinymce.PluginManager.requireLangPack('curblyadvimage');
+
+        tinymce.create('tinymce.plugins.CurblyAdvancedImagePlugin', {
+                init : function(ed, url) {
+                        // Register commands
+                        ed.addCommand('mceCurblyAdvImage', function() {
+                                var e = ed.selection.getNode();
+
+                                // Internal image object like a flash placeholder
+                                if (ed.dom.getAttrib(e, 'class').indexOf('mceItem') != -1)
+                                        return;
+
+                                ed.windowManager.open({
+                                        file : url + '/image.htm',
+                                        width : 480 + parseInt(ed.getLang('curblyadvimage.delta_width', 0)),
+                                        height : 385 + parseInt(ed.getLang('curblyadvimage.delta_height', 0)),
+                                        inline : 1
+                                }, {
+                                        plugin_url : url
+                                });
+                        });
+
+                        // Register buttons
+                        ed.addButton('image', {
+                                title : 'curblyadvimage.image_desc',
+                                cmd : 'mceCurblyAdvImage'
+                        });
+                },
+
+                getInfo : function() {
+                        return {
+                                longname : 'Curbly Advanced image',
+                                author : 'Moxiecode Systems AB',
+                                authorurl : 'http://tinymce.moxiecode.com',
+                                infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advimage',
+                                version : tinymce.majorVersion + "." + tinymce.minorVersion
+                        };
+                }
+        });
+
+        // Register plugin
+        tinymce.PluginManager.add('curblyadvimage', tinymce.plugins.CurblyAdvancedImagePlugin);
+})();

data/lib/assets/plugins/curblyadvimage/image.htm

@@ -0,0 +1,270 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>{#advimage_dlg.dialog_title}</title>
+  <script language="javascript" type="text/javascript" src="../../../prototype.js"></script>	
+	<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
+	<script type="text/javascript" src="../../utils/mctabs.js"></script>
+	<script type="text/javascript" src="../../utils/form_utils.js"></script>
+	<script type="text/javascript" src="../../utils/validate.js"></script>
+	<script type="text/javascript" src="js/functions.js"></script>
+	<link href="css/advimage.css" rel="stylesheet" type="text/css" />
+	<base target="_self" />
+</head>
+<body id="advimage" style="display: none">
+		
+  <div id="image-upload">
+    <fieldset>
+      <legend>Upload New Image</legend>
+      <form id='image_upload_form' enctype="multipart/form-data" method="post" onsubmit="ts_onload(); return true;" target="html_editor_image_upload_frame">
+        <input class="input-file" id="image_uploaded_data" name="photo[uploaded_data]" size="30" type="file"/>
+        <input class="submit" name="commit" type="submit" value="Upload"/>
+      </form>
+    </fieldset>
+  </div>		  
+
+  <br />
+  
+  <form onsubmit="ImageDialog.insert();return false;" action="#">         			
+		<div class="tabs">
+			<ul>			  
+        
+			  <li id="dynamic_select_tab" class="current"><span><a href="javascript:mcTabs.displayTab('dynamic_select_tab','dynamic_select_panel');" onmousedown="return false;">Uploaded Images</a></span></li>			  
+				<li id="general_tab"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{#advimage_dlg.tab_general}</a></span></li>
+				<li id="appearance_tab"><span><a href="javascript:mcTabs.displayTab('appearance_tab','appearance_panel');" onmousedown="return false;">{#advimage_dlg.tab_appearance}</a></span></li>
+        <!-- <li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">{#advimage_dlg.tab_advanced}</a></span></li> -->
+			</ul>
+		</div>
+
+		<div class="panel_wrapper">
+
+		  <div id="dynamic_select_panel" class="panel current" style='overflow:auto'>
+		    <fieldset>
+		      <legend>Available Images</legend>
+          <script type="text/javascript">//<![CDATA[
+            new Ajax.Request("/manage_photos", 
+                  {asynchronous:true, evalScripts:true, method:'get'});
+          //]]></script>
+
+          <div id='dynamic_images_list'>
+            Loading Images...<br />
+            <img src='/images/spinner.gif'>
+          </div>
+		      </fieldset>
+		  </div>		  
+			<div id="general_panel" class="panel">
+				<fieldset>
+						<legend>{#advimage_dlg.general}</legend>
+
+						<table class="properties">
+							<tr>
+								<td class="column1"><label id="srclabel" for="src">{#advimage_dlg.src}</label></td>
+								<td colspan="2"><table border="0" cellspacing="0" cellpadding="0">
+									<tr> 
+									  <td><input name="src" type="text" id="src" value="" onchange="ImageDialog.showPreviewImage(this.value);" /></td> 
+									  <td id="srcbrowsercontainer">&nbsp;</td>
+									</tr>
+								  </table></td>
+							</tr>
+							<tr>
+								<td><label for="src_list">{#advimage_dlg.image_list}</label></td>
+								<td><select id="src_list" name="src_list" onchange="document.getElementById('src').value=this.options[this.selectedIndex].value;document.getElementById('alt').value=this.options[this.selectedIndex].text;document.getElementById('title').value=this.options[this.selectedIndex].text;ImageDialog.showPreviewImage(this.options[this.selectedIndex].value);"></select></td>
+							</tr>
+							<tr> 
+								<td class="column1"><label id="altlabel" for="alt">{#advimage_dlg.alt}</label></td> 
+								<td colspan="2"><input id="alt" name="alt" type="text" value="" /></td> 
+							</tr> 
+							<tr> 
+								<td class="column1"><label id="titlelabel" for="title">{#advimage_dlg.title}</label></td> 
+								<td colspan="2"><input id="title" name="title" type="text" value="" /></td> 
+							</tr>
+						</table>
+				</fieldset>
+
+				<fieldset>
+					<legend>{#advimage_dlg.preview}</legend>
+					<div id="prev"></div>
+				</fieldset>
+			</div>
+
+			<div id="appearance_panel" class="panel">
+				<fieldset>
+					<legend>{#advimage_dlg.tab_appearance}</legend>
+
+					<table border="0" cellpadding="4" cellspacing="0">
+						<tr> 
+							<td class="column1"><label id="alignlabel" for="align">{#advimage_dlg.align}</label></td> 
+							<td><select id="align" name="align" onchange="ImageDialog.updateStyle('align');ImageDialog.changeAppearance();"> 
+									<option value="">{#not_set}</option> 
+									<option value="baseline">{#advimage_dlg.align_baseline}</option>
+									<option value="top">{#advimage_dlg.align_top}</option>
+									<option value="middle">{#advimage_dlg.align_middle}</option>
+									<option value="bottom">{#advimage_dlg.align_bottom}</option>
+									<option value="text-top">{#advimage_dlg.align_texttop}</option>
+									<option value="text-bottom">{#advimage_dlg.align_textbottom}</option>
+									<option value="left">{#advimage_dlg.align_left}</option>
+									<option value="right">{#advimage_dlg.align_right}</option>
+								</select> 
+							</td>
+							<td rowspan="6" valign="top">
+								<div class="alignPreview">
+									<img id="alignSampleImg" src="img/sample.gif" alt="{#advimage_dlg.example_img}" />
+									Lorem ipsum, Dolor sit amet, consectetuer adipiscing loreum ipsum edipiscing elit, sed diam
+									nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Loreum ipsum
+									edipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
+									erat volutpat.
+								</div>
+							</td>
+						</tr>
+
+						<tr>
+							<td class="column1"><label id="widthlabel" for="width">{#advimage_dlg.dimensions}</label></td>
+							<td nowrap="nowrap">
+								<input name="width" type="text" id="width" value="" size="5" maxlength="5" class="size" onchange="ImageDialog.changeHeight();" /> x 
+								<input name="height" type="text" id="height" value="" size="5" maxlength="5" class="size" onchange="ImageDialog.changeWidth();" /> px
+							</td>
+						</tr>
+
+						<tr>
+							<td>&nbsp;</td>
+							<td><table border="0" cellpadding="0" cellspacing="0">
+									<tr>
+										<td><input id="constrain" type="checkbox" name="constrain" class="checkbox" /></td>
+										<td><label id="constrainlabel" for="constrain">{#advimage_dlg.constrain_proportions}</label></td>
+									</tr>
+								</table></td>
+						</tr>
+
+						<tr>
+							<td class="column1"><label id="vspacelabel" for="vspace">{#advimage_dlg.vspace}</label></td> 
+							<td><input name="vspace" type="text" id="vspace" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('vspace');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('vspace');ImageDialog.changeAppearance();" />
+							</td>
+						</tr>
+
+						<tr> 
+							<td class="column1"><label id="hspacelabel" for="hspace">{#advimage_dlg.hspace}</label></td> 
+							<td><input name="hspace" type="text" id="hspace" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('hspace');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('hspace');ImageDialog.changeAppearance();" /></td> 
+						</tr>
+
+						<tr>
+							<td class="column1"><label id="borderlabel" for="border">{#advimage_dlg.border}</label></td> 
+							<td><input id="border" name="border" type="text" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('border');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('border');ImageDialog.changeAppearance();" /></td> 
+						</tr>
+
+						<tr>
+							<td><label for="class_list">{#class_name}</label></td>
+							<td><select id="class_list" name="class_list"></select></td>
+						</tr>
+
+						<tr>
+							<td class="column1"><label id="stylelabel" for="style">{#advimage_dlg.style}</label></td> 
+							<td colspan="2"><input id="style" name="style" type="text" value="" onchange="ImageDialog.changeAppearance();" /></td> 
+						</tr>
+
+						<!-- <tr>
+							<td class="column1"><label id="classeslabel" for="classes">{#advimage_dlg.classes}</label></td> 
+							<td colspan="2"><input id="classes" name="classes" type="text" value="" onchange="selectByValue(this.form,'classlist',this.value,true);" /></td> 
+						</tr> -->
+					</table>
+				</fieldset>
+			</div>
+
+      <!--
+			<div id="advanced_panel" class="panel">
+				<fieldset>
+					<legend>{#advimage_dlg.swap_image}</legend>
+
+					<input type="checkbox" id="onmousemovecheck" name="onmousemovecheck" class="checkbox" onclick="ImageDialog.setSwapImage(this.checked);" />
+					<label id="onmousemovechecklabel" for="onmousemovecheck">{#advimage_dlg.alt_image}</label>
+
+					<table border="0" cellpadding="4" cellspacing="0" width="100%">
+							<tr>
+								<td class="column1"><label id="onmouseoversrclabel" for="onmouseoversrc">{#advimage_dlg.mouseover}</label></td> 
+								<td><table border="0" cellspacing="0" cellpadding="0"> 
+									<tr> 
+									  <td><input id="onmouseoversrc" name="onmouseoversrc" type="text" value="" /></td> 
+									  <td id="onmouseoversrccontainer">&nbsp;</td>
+									</tr>
+								  </table></td>
+							</tr>
+							<tr>
+								<td><label for="over_list">{#advimage_dlg.image_list}</label></td>
+								<td><select id="over_list" name="over_list" onchange="document.getElementById('onmouseoversrc').value=this.options[this.selectedIndex].value;"></select></td>
+							</tr>
+							<tr> 
+								<td class="column1"><label id="onmouseoutsrclabel" for="onmouseoutsrc">{#advimage_dlg.mouseout}</label></td> 
+								<td class="column2"><table border="0" cellspacing="0" cellpadding="0"> 
+									<tr> 
+									  <td><input id="onmouseoutsrc" name="onmouseoutsrc" type="text" value="" /></td> 
+									  <td id="onmouseoutsrccontainer">&nbsp;</td>
+									</tr> 
+								  </table></td> 
+							</tr>
+							<tr>
+								<td><label for="out_list">{#advimage_dlg.image_list}</label></td>
+								<td><select id="out_list" name="out_list" onchange="document.getElementById('onmouseoutsrc').value=this.options[this.selectedIndex].value;"></select></td>
+							</tr>
+					</table>
+				</fieldset>
+
+				<fieldset>
+					<legend>{#advimage_dlg.misc}</legend>
+
+					<table border="0" cellpadding="4" cellspacing="0">
+						<tr>
+							<td class="column1"><label id="idlabel" for="id">{#advimage_dlg.id}</label></td> 
+							<td><input id="id" name="id" type="text" value="" /></td> 
+						</tr>
+
+						<tr>
+							<td class="column1"><label id="dirlabel" for="dir">{#advimage_dlg.langdir}</label></td> 
+							<td>
+								<select id="dir" name="dir" onchange="ImageDialog.changeAppearance();"> 
+										<option value="">{#not_set}</option> 
+										<option value="ltr">{#advimage_dlg.ltr}</option> 
+										<option value="rtl">{#advimage_dlg.rtl}</option> 
+								</select>
+							</td> 
+						</tr>
+
+						<tr>
+							<td class="column1"><label id="langlabel" for="lang">{#advimage_dlg.langcode}</label></td> 
+							<td>
+								<input id="lang" name="lang" type="text" value="" />
+							</td> 
+						</tr>
+
+						<tr>
+							<td class="column1"><label id="usemaplabel" for="usemap">{#advimage_dlg.map}</label></td> 
+							<td>
+								<input id="usemap" name="usemap" type="text" value="" />
+							</td> 
+						</tr>
+
+						<tr>
+							<td class="column1"><label id="longdesclabel" for="longdesc">{#advimage_dlg.long_desc}</label></td>
+							<td><table border="0" cellspacing="0" cellpadding="0">
+									<tr>
+									  <td><input id="longdesc" name="longdesc" type="text" value="" /></td>
+									  <td id="longdesccontainer">&nbsp;</td>
+									</tr>
+								</table></td> 
+						</tr>
+					</table>
+				</fieldset>
+			</div>
+      -->
+		</div>
+
+		<div class="mceActionPanel">
+			<div style="float: left">
+				<input type="button" id="insert" name="insert" value="{#insert}" onclick="ImageDialog.insert();" />
+			</div>
+
+			<div style="float: right">
+				<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
+			</div>
+		</div>
+    </form>
+</body> 
+</html>