Skip to content

Instantly share code, notes, and snippets.

@victorhooi

victorhooi/Image Upload Form

Created January 6, 2014 02:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save victorhooi/8277035 to your computer and use it in GitHub Desktop.
Save victorhooi/8277035 to your computer and use it in GitHub Desktop.
Download ZIP
Image Upload Form
Raw
Image Upload Form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<!-- jQuery -->
<script type="text/javascript" src="/management_media/jquery-latest-rel/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/management_media/jquery-ui-1.8.8.custom/css/smoothness/jquery-ui-1.8.8.custom.css"/>
<script type="text/javascript" src="/management_media/jquery-ui-1.8.8.custom/js/jquery-ui-1.8.8.custom.min.js"></script>
<script type="text/javascript" src="/management_media/jquery-datetime-picker/jquery-ui-timepicker-addon.js"></script>
<style>
/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
</style>
<!-- Custom Javascript -->
<script type="text/javascript" src="/management_media/js/cm/jqui-dialog-wrapper.js" ></script>
<script src="/management_media/stat_report/js/mustache.js"></script>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/management_media/css/cm/main.css"/>
<title> BEX Campaign Management Tool </title>
<link href="/management_media/js/cm/jquery.autocomplete-1.1.3/styles.css"
rel="stylesheet" type="text/css" />
<link href="/static/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/campaign_management/css/campaign_management.css" rel="stylesheet" />
<script type="text/javascript" src="/static/thirdparty/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/thirdparty/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/static/internal/library/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/static/internal/library/jquery-ui-datetimepicker/jquery-ui-timepicker.js"></script>
<script type="text/javascript" src="/static/campaign_management/js/campaign.js"></script>
<script type='text/javascript'>
(function (d, t) {
var bh = d.createElement(t), s = d.getElementsByTagName(t)[0];
bh.type = 'text/javascript';
bh.src = '//www.bugherd.com/sidebarv2.js?apikey=csxa1s8ux0zkrsguqw1jdw';
s.parentNode.insertBefore(bh, s);
})(document, 'script');
var preview_links = [];
</script>
</head>
<!-- MOVE THIS JAVASCRIPT TO A SEPARATE FILE -->
<script type="text/javascript">
$(document).ready(function(){
$("input:submit, button").button();
$.widget( "custom.campaignAutoComplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
self._renderItem( ul, item );
});
},
_renderItem: function(ul, item){
return $('<li style="text-align: left;"></li>')
.data( "item.autocomplete", item )
.append('<a href="'+item.href+'">('+item.id+') '+item.name+'</a>')
.appendTo( ul );
}
});
$('#cpg_name_auto').campaignAutoComplete({
delay: 0,
source: '/api-v2/campaign-internal/',
select: function( event, ui ) {
window.location.href = ui.item.href;
return false;
}
});
});
</script>
<body>
<header id="header">
<h1>brandsExclusive</h1>
<div id="searchBar"><span class="bigWhite">find campaigns</span><input size="20" id='cpg_name_auto' /></div>
</header>
<nav id="nav-app">
</nav>
<div id="left-menu">
<div id="nav-global">
<h2>Global Menu</h2>
<div>
<ul>
<hr/>
<li><a href="/manage/cm/">Home</a></li>
<hr/>
<li><a href="/manage/cm/calendar/">Calendar</a></li>
<hr/>
<li><a href="/manage/cm/add/">Create Campaign</a></li>
<hr/>
<li><a href="/manage/cm/order_campaigns/ ">Order Campaigns</a></li>
<hr/>
<li><a href="/manage/cm/campaign_checklist/ ">Campaign Checklist</a></li>
<hr/>
</ul>
</div>
</div>
<div id="nav-campaigns">
<div>
<h2>NEXT CAMPAIGNS</h2>
<ul>
</ul>
</div>
<hr/>
<div>
<h2>CURRENT CAMPAIGNS</h2>
<ul>
<li><a href="/manage/cm/campaign/4/edit_details/">Foo - 06/01/2014</a> </li>
<li><a href="/manage/cm/campaign/1/edit_details/">Bun Design - 11/11/2010</a> </li>
<li><a href="/manage/cm/campaign/2/edit_details/">Gap - 11/11/2009</a> </li>
<li><a href="/manage/cm/campaign/3/edit_details/">Loreal - 11/11/2009</a> </li>
</ul>
</div>
<hr/>
</div>
</div>
<div id="main">
<div id="main_content">
<h2>4 - Foo
<div id="see_on_website">
<div class="preview_wrapper">
<a href="" id="previewLink">Preview All Sites</a>
</div>
</div>
</h2>
<div id="edit_campaign_menu" class="cm-tabs">
<ul>
<li >
<a href="/manage/cm/campaign/4/edit_details/">Campaign Details</a>
</li>
<li class="active">
<a href="/manage/cm/campaign/4/edit_images/new/">Banner Images</a>
</li>
<li >
<a href="/manage/cm/campaign/4/categories/">Categories & Products</a>
</li>
<li >
<a href="/manage/cm/campaign/4/product_summary/">Product Summary</a>
</li>
<li >
<a href="/manage/cm/campaign/4/export_entrance/">Export</a>
</li>
<li >
<a href="/manage/cm/campaign/4/product_q/">Q & A (O: <span class="q_qty open">0</span> , A: <span class="q_qty answer">0</span>)</a>
</li>
<li >
<a href="/manage/cm/campaign/4/edit_price_ref/">Price References</a>
</li>
<li >
<a href="/manage/cm/campaign/4/history_log/">History Logs</a>
</li>
<li >
<a href="/manage/cm/4/gift-product-promotion/">Promotion</a>
</li>
</ul>
</div>
<p id="errorMsg_workitem" style="display:none;"></p>
<script>
function check_box_click( divId ){
var check = $('#check_' + divId);
var btn = $('#btn_' + divId);
if (check.attr("checked") != true){
btn.attr("disabled", true);
}else{
btn.removeAttr("disabled");
}
}
function complete_step(workitemId){
var url = '/manage/cm/complete/' + workitemId + '/';
$.getJSON( url, function(jsonData) {
if (jsonData.result == true){
window.location = "/manage/cm/campaign/4/edit_details/";
}else{
$("#errorMsg_workitem").html(jsonData.error_msg);
}
});
}
</script>
<div id="content-wrapper">
<div class="container-fluid campaign-detail-management">
<div class="row-fluid">
<div class="span12">
<div class="campaign-image-form">
<ul class="tabs">
<li><a href="#tabs-default">Default Images</a></li>
</ul>
<div id="tabs-default" class="tab">
<div class="tab-container">
<form action="" method="POST" enctype="multipart/form-data" class="form-vertical">
<legend>Soon Valid</legend>
<div class="control-group normal ">
<label class="control-label">Soon Valid</label>
<div class="controls">
<input id="id_soon_valid" name="soon_valid" type="checkbox" />
<p class="help-block">Show the coming soon banner on the website, the campaign start date must be in the future.</p>
</div>
</div>
<legend>Campaign Logo</legend>
<div class="control-group image-field ">
<label class="control-label">Logo</label>
<div class="controls">
<div class="file-field"><input id="id_new_logo" name="new_logo" type="file" /></div>
<div class="image-preview"></div>
<div class="clear"></div>
<span class="help-inline"></span>
</div>
</div>
<legend>Campaign Banner</legend>
<div class="control-group image-field ">
<label class="control-label">Now Large</label>
<div class="controls">
<div class="file-field"><input id="id_now_large_image" name="now_large_image" type="file" /></div>
<div class="image-preview"></div>
<div class="clear"></div>
<span class="help-inline"></span>
</div>
</div>
<div class="control-group image-field ">
<label class="control-label">Now Medium</label>
<div class="controls">
<div class="file-field"><input id="id_now_medium_image" name="now_medium_image" type="file" /></div>
<div class="image-preview"></div>
<div class="clear"></div>
<span class="help-inline"></span>
</div>
</div>
<div class="control-group image-field ">
<label class="control-label">Now Small</label>
<div class="controls">
<div class="file-field"><input id="id_thumbnail_image" name="thumbnail_image" type="file" /></div>
<div class="image-preview now-small"></div>
<div class="clear"></div>
<span class="help-inline"></span>
</div>
</div>
<div class="control-group image-field ">
<label class="control-label">Landing Banner</label>
<div class="controls">
<div class="file-field"><input id="id_banner_image" name="banner_image" type="file" /></div>
<div class="image-preview"></div>
<div class="clear"></div>
<span class="help-inline"></span>
</div>
</div>
<div class="control-group normal ">
<label class="control-label">Banner Background Color</label>
<div class="controls">
<input id="id_banner_bg_color" maxlength="6" name="banner_bg_color" type="text" value="d1c7cd" /><span class="help-inline"></span>
<p class="help-block">The background color to use behind the landing image. This needs to be a hexadecimal value e.g. abf124</p>
</div>
</div>
<legend>Mobile Banner</legend>
<div class="control-group image-field ">
<label class="control-label">Mobile Iphone Image - <span class="help-text">iphone campaign image</span></label>
<div class="controls">
<div class="file-field"><input id="id_iphone_image" name="iphone_image" type="file" /></div>
<div class="image-preview"></div>
<div class="clear"></div>
<span class="help-inline"></span>
</div>
</div>
<div class="control-group image-field ">
<label class="control-label">Mobile Landing - <span class="help-text">Campaign front page image</span></label>
<div class="controls">
<div class="file-field"><input id="id_entrance_image" name="entrance_image" type="file" /></div>
<div class="image-preview"></div>
<div class="clear"></div>
<span class="help-inline"></span>
</div>
</div>
<div class="control-group image-field ">
<label class="control-label">Air Logo - <span class="help-text">bex desktop application logo image 180x90</span></label>
<div class="controls">
<div class="file-field"><input id="id_mf_application_image" name="mf_application_image" type="file" /></div>
<div class="image-preview"></div>
<div class="clear"></div>
<span class="help-inline"></span>
</div>
</div>
<div class="control-group image-field ">
<label class="control-label">Air Product - <span class="help-text">any product image for brandsexclusive desktop app (90x90)</span></label>
<div class="controls">
<div class="file-field"><input id="id_mf_application_product_image" name="mf_application_product_image" type="file" /></div>
<div class="image-preview"></div>
<div class="clear"></div>
<span class="help-inline"></span>
</div>
</div>
<legend>Auto Generated Banner</legend>
<div class="control-group image-field">
<label class="control-label">Email Large</label>
<div class="controls">
<div class="file-field"></div>
<table>
<tr>
<td>
<div class="image-preview">
<fieldset>
<legend>Base Image</legend>
<img style="vertical-align:middle;" src="//cdn.brandsexclusive.com.au/site_media/uploads/campaign/2014/01/06/now_large_email_now_large.png" title=""/>
<fieldset>
</div>
</td>
</tr>
<tr>
<td>
<div class="image-preview">
<fieldset>
<legend>NZ Short Description</legend>
<img style="vertical-align:middle;" src="http://cdn.brandsexclusive.com.au/site_media/uploads/campaign/2014/01/06/4_email_large_nz_8ad05d51767311e3a22f20c9d083e129.png" title=""/>
<fieldset>
</div>
<div class="image-preview">
<fieldset>
<legend>AU Short Description</legend>
<img style="vertical-align:middle;" src="http://cdn.brandsexclusive.com.au/site_media/uploads/campaign/2014/01/06/4_email_large_au_8a7d71bd767311e398b720c9d083e129.png" title=""/>
<fieldset>
</div>
</td>
</tr>
</table>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="0" /><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0" /><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000" />
<div class="hidden-group">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-small">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="dialog_box" title="Dialog Title" style="overflow: hidden;">
<iframe id="if_dialog" style="width:100%; height:100%; margin: 0; padding:0; border-style: none;"/>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment