pixels_for_food / templates / index.html

{% extends "base.html" %}
{%block header%}	
  <script language="javascript" type="text/javascript">
        var total = 0;  
        var totalPounds = 0;     
        var droppedCounter = 0;
        $(document).ready(function() {
            $(".productItemStyle").draggable({ helper: "clone", opacity: "0.5" });  
            $(".bagDropZone").droppable( {
                accept: ".productItemStyle",
                hoverClass: "dropHover",
                drop: function(ev, ui) {  
                    var droppedItem = ui.draggable.clone().addClass("droppedItemStyle");                                                              
                    var productCode = droppedItem[0].attributes["code"].nodeValue; 
                    var productPounds = droppedItem[0].attributes["pounds"].nodeValue;  
                    var productPrice = getFormattedPrice(droppedItem[0].attributes["price"].nodeValue);                                                                          
                         
                    // build and insert styled and javascript capable remove links                   
                    var itemId = droppedItem[0].id + "_" + droppedCounter;                             
                    var originalHtml = $('#stuff').html();
                    var divOpen = "<div class=\"foodInBag\" id=\"removeLink" + itemId + "\">";
                    var divClose = "</div>";
                    var removeX = "<a href=\"#\" class=\"removeLink\" onClick=\"javascript:remove('" + itemId + "', '" + productPrice + "', '" + productPounds + "')\"><span>X</span></a>";      
                    var complete =  originalHtml + divOpen + removeX + '<h5>' + productCode + '</h5>' + divClose;                  
                    $('#stuff').html(complete);
            
                    droppedCounter++;                                                                                                                    
                    updateTotal(productPrice);
                    updatePounds(productPounds);                    
                }    
            });   
        }); 
        
        // remove item from bag, decrease total ans pounds
        function remove(id, price, pounds) {
          $(".bagDropZone").children().remove("#" + id);      
          $('#removeLink' + id).remove();
             
          droppedCounter++;         

          updateTotal(price * (-1));     
          updatePounds(pounds * (-1));             
        }        
    
        // format the code and remove junky stuff! 
        function getFormattedPrice(unformattedPrice) {    
            return unformattedPrice.replace(/[\n\r\t$/\s/g]/g, '');           
        }    
    
        // update the total
        function updateTotal(price) {  
            total += parseFloat(price);
            $("#total").html(total.toFixed(2));   
        }
    
        // update the pounds
        function updatePounds(pounds) {  
            totalPounds += parseFloat(pounds);          
            $("#poundTotal").html(totalPounds.toString());
        }                


        // bounce arrow on drag and drop
        function bounceArrow() {
           $("#arrow").effect("bounce", { times:3 }, 300);
        }
        
        // scroll to anchors
        function goToByScroll(anchor){
     	   $('html,body').animate({scrollTop: $("#" + anchor).offset().top}, 5000);
	}
	
	function checkout(){
	   $("#lbs").val( $("#poundTotal").html());
	   $("#amount").val($("#total").html());
	   $("#checkout_form").submit();
	}

    </script>    	

    <style type="text/css">  
      .productItemStyle  {    
        float: left; width: 100px;
      }
                
      .droppedItemStyle  {}            
      
      li  {
        list-style-type:none;
      }
      
      .dropHover  {
        border: dashed 3px lime !important;
      }            
      
      .bagDropZone {
        border: dashed 3px #FFFFFF;
      }
            
      .deleteLink  {
        color:White;
      }
        
    </style>  
	
	<SCRIPT language="JavaScript">
<!--
if (document.images)
{
  pic1= new Image(702,72); 
  pic1.src="includes/img/directions.gif"; 

  pic2= new Image(159,151); 
  pic2.src="includes/img/PFF_logo1.png";

  pic3= new Image(153,54); 
  pic3.src="includes/img/checkout2.png";
  
  pic4= new Image(135,81); 
  pic4.src="includes/img/ccstb2.png";
  
  pic5= new Image(135,54); 
  pic5.src="includes/img/lightningFace2.png";
}
//-->
</SCRIPT>
{%endblock%}

{% block content%}
<div id="middleBar">
<div id="middleBar_Content">
<h3>You are donating <span id="poundTotal">0</span> lbs of food worth $<span id="total">0.00</span></h3>
</div>
</div>

<div id="content">

<div id="bagAndItems">     
  <div id="arrow"><img src="includes/img/food_arrow.png" width="120" alt="food"></div>
  <div class="bagDropZone"><img src="includes/img/food_bag.png" width="171" alt="food"></div>
  <div id="stuff" class="stuffclass">
	   <h5 style="background-color: #d6d6d6; text-align: center; color: #00000; margin: 0px 0px 5px 0px; padding: 2px 0px 2px 0px;" >STUFF IN YOUR BAG</h5>
    <!--
  	 items placed here dynamically from javascript above
    -->
  </div>
  <a href="javascript:checkout();" id="rollover3"><span>Checkout</span></a>
  <form action="checkout/" method="get" name="checkout_form" id="checkout_form">
	<input type="hidden" name="amount" id="amount" value="" />
	<input type="hidden" name="lbs" id="lbs" value="" />
  </form>
</div>

<div id="foodstuffs">

<div class="productItemStyle" pounds="100" price='25' code='stawberries' id='item_1' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_strawberries.png" width="100" alt="food">
<h1>STRAWBERRIES</h1>
<h2>12 bags - $25</h2>
</div>

<div class="productItemStyle" pounds="200" price='16' code='mushrooms' id='item_2' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_mushrooms.png" width="100" alt="food">

<h1>MUSHROOMS</h1>
<h2>24 bags - $16</h2>
</div>

<div class="productItemStyle" pounds="300" price='10' code='bananas' id='item_3' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_bananas.png" width="100" alt="food">
<h1>BANANAS</h1>
<h2>todo $10</h2>
</div>

<div class="productItemStyle" pounds="400" price='25' code='bread' id='item_4' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_bread.png" width="100" alt="food">
<h1>BREAD</h1>
<h2>12 loaves - $25</h2>
</div>

<div class="productItemStyle" pounds="500" price='10' code='onions' id='item_5' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_onions.png" width="100" alt="food">
<h1>ONIONS</h1>
<h2>todo $10</h2>
</div>

<div class="productItemStyle" pounds="22" price='15' code='potatoes' id='item_6' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_potatoes.png" width="100" alt="food">
<h1>POTATOES</h1>
<h2>30 count - $15</h2>
</div>

<div class="productItemStyle" pounds="34" price='30' code='sweetpotatoes' id='item_7' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_sweetpotatoes.png" width="100" alt="food">
<h1>SWEET POTATOES</h1>
<h2>60 count - $30</h2>
</div>

<div class="productItemStyle" pounds="22" price='10' code='tortilla' id='item_8' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_tortilla.png" width="100" alt="food">
<h1>TORTILLA</h1>
<h2>todo $10</h2>
</div>

<div class="productItemStyle" pounds="33" price='10' code='oranges' id='item_9' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_oranges.png" width="100" alt="food">
<h1>ORANGES</h1>
<h2>todo $10</h2>
</div>

<div class="productItemStyle" pounds="300" price='24' code='apples' id='item_10' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_apples.png" width="100" alt="food">
<h1>APPLES</h1>
<h2>60 count - $24</h2>
</div>

<div class="productItemStyle" pounds="80" price='14' code='broccoli' id='item_11' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_brocoli.png" width="100" alt="food">
<h1>BROCCOLI</h1>
<h2>9 bags - $14</h2>
</div>

<div class="productItemStyle" pounds="78" price='14' code='cauliflower' id='item_12' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_coliflower.png" width="100" alt="food">
<h1>CAULIFLOWER</h1>
<h2>9 bags - $14</h2>
</div>

<div class="productItemStyle" pounds="56" price='29' code='carrots' id='item_13' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_carrots.png" width="100" alt="food">
<h1>CARROTS</h1>
<h2>24 cans - $29</h2>
</div>

<div class="productItemStyle" pounds="34" price='22' code='cereal' id='item_14' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_cereal.png" width="100" alt="food">
<h1>CEREAL</h1>
<h2>12 boxes - $22</h2>
</div>

<div class="productItemStyle" pounds="78" price='21' code='chicken' id='item_15' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_chicken.png" width="100" alt="food">
<h1>CHICKEN</h1>
<h2>3 count - $21</h2>
</div>

<div class="productItemStyle" pounds="16" price='32' code='fish' id='item_16' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_fish.png" width="100" alt="food">
<h1>FISH</h1>
<h2>12 count - $32</h2>
</div>

<div class="productItemStyle" pounds="15" price='10' code='lettuce' id='item_17' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_lettuce.png" width="100" alt="food">
<h1>LETTUCE</h1>
<h2>todo $10</h2>
</div>

<div class="productItemStyle" pounds="11" price='10' code='pears' id='item_18' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_pears.png" width="100" alt="food">
<h1>PEARS</h1>
<h2>todo $10</h2>
</div>

<div class="productItemStyle" pounds="35" price='10' code='celery' id='item_19' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_celery.png" width="100" alt="food">
<h1>CELERY</h1>
<h2>todo $10</h2>
</div>

<div class="productItemStyle" pounds="98" price='13' code='pasta' id='item_20' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_pasta.png" width="100" alt="food">
<h1>PASTA</h1>
<h2>20 bags - $13</h2>
</div>

<div class="productItemStyle" pounds="68" price='20' code='peanutbutter' id='item_21' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_peanutbutter.png" width="100" alt="food">
<h1>PEANUT BUTTER</h1>
<h2>12 cans - $20</h2>
</div>

<div class="productItemStyle" pounds="68" price='12' code='soup' id='item_22' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_soup.png" width="100" alt="food">
<h1>SOUP</h1>
<h2>12 cans - $12</h2>
</div>

<div class="productItemStyle" pounds="44" price='14' code='milk' id='item_23' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_milk.png" width="100" alt="food">
<h1>MILK</h1>
<h2>12 cartons - $14</h2>
</div>

<div class="productItemStyle" pounds="12" price='7' code='bottledwater' id='item_24' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_water.png" width="100" alt="food">
<h1>BOTTLED WATER</h1>
<h2>24 bottles - $7</h2>
</div>

<div class="productItemStyle" pounds="45" price='15' code='peas' id='item_25' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_peas.png" width="100" alt="food">
<h1>PEAS</h1>
<h2>24 cans - $15</h2>
</div>

<div class="productItemStyle" pounds="67" price='25' code='beans' id='item_26' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_beans.png" width="100" alt="food">
<h1>BEANS</h1>
<h2>24 bags - $25</h2>
</div>

<div class="productItemStyle" pounds="34" price='28' code='whiterice' id='item_27' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_whiterice.png" width="100" alt="food">
<h1>WHITE RICE</h1>
<h2>30 bags - $28</h2>
</div>

<div class="productItemStyle" pounds="45" price='12' code='brownrice' id='item_28' onmousedown="javascript:bounceArrow();">
<img src="includes/img/food_brownRice.png" width="100" alt="food">
<h1>BROWN RICE</h1>
<h2>12 bags - $12</h2>
</div>
</div>

</div>

<div id="nonprofitBar">
<div id="nonprofitBar_Content"> 
	<div id="nonprofitColumn2">
		<img src="includes/img/donations.png" width="463" alt="food">
		<p style="margin: 5px 0px 5px 5px;">Each year, the Feeding America network of more then 200 food banks provides food to more than 37 million low-income people facing hunger in the United States, including more than 14 million children and nearly 3 million seniors.</p>

		<a style="color:#FBB03B;" href="http://www.feedingamerica.org"><p>www.FeedingAmerica.org</p></a>
	</div>
	
	<div id="nonprofitColumn1">
		<a href="http://www.feedingamerica.org"><img style="border: 1px solid #fff; padding: 5px;" src="includes/img/feedingAmerica_logo.jpg" width="200" alt="food"></a>
	</div>
	<div id="nonprofitColumn3">
		<p style="padding: 0px 0px 5px 0px;">Still not sure? Check out Feeding America on the following nonprofit and charity review sites.</p>
		<a style="color:#FBB03B;" href="http://www.charitynavigator.org/index.cfm?bay=search.summary&orgid=5271"><p>Charity Navigator</p></a>

		<a style="color:#FBB03B;" href="http://charitywatch.org/toprated.html#hunger"><p>Charity Watch</p></a>
		<a style="color:#FBB03B;" href="http://www.bbb.org/charity-reviews/national/human-services/feeding-america-in-chicago-il-2331"><p>Better Business Bureau</p></a>
		<a style="color:#FBB03B;" href="http://www2.guidestar.org/organizations/36-3673599/feeding-america.aspx"><p>GuideStar</p></a>
	</div>
</div>
</div>

<div id="bottomBar">
<div id="bottomBar_Content">
<img src="includes/img/thankyou.png" width="795" alt="food">

<div id="thankyouColumn1">
<a href="/"><h4>Bobby</h4></a>
<a href="/"><h4>Alice Hooper</h4></a>
<a href="/"><h4>Head of Cabbage</h4></a>
<a href="/"><h4>Pepsico</h4></a>
<a href="/"><h4>Johnny</h4></a>
</div>

<div id="thankyouColumn2">
<a href="/"><h4>Mexico</h4></a>
<a href="/"><h4>Billy Brown</h4></a>

<a href="/"><h4>Jasmine from Aladdin</h4></a>
<a href="/"><h4>mojitos</h4></a>
<a href="/"><h4>magic</h4></a>
</div>

<div id="thankyouColumn3">
<a href="/"><h4>Jindall</h4></a>
<a href="/"><h4>Mad Hatter</h4></a>
<a href="/"><h4>Nikalodian</h4></a>
<a href="/"><h4>Disney</h4></a>

<a href="/"><h4>Mermaid</h4></a>
</div>

<div id="thankyouColumn4">
<a href="/"><h4>Frank S.</h4></a>
<a href="/"><h4>Stuffed Robot</h4></a>
<a href="/"><h4>Alice in Chains</h4></a>
<a href="/"><h4>Craig Taffey</h4></a>
</div> 
<img src="includes/img/thankyou2.png" width="795" alt="food">
</div>
</div>

{%endblock%}
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.