Subversion Repositories SmartDukaan

Rev

Rev 11549 | Blame | Compare with Previous | Last modification | View Log | RSS feed

#set($banners = $action.getActiveBanners())
#if($banners)
#set($bannerCount = $banners.size())
#else
#set($bannerCount = 0)
#end

<!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">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- Prevent MS Office toolbar from changing layout -->
        <meta name="google-site-verification" content="NPHVASYh9ZsYbjffRuAU4dhEHhx7xSKUj9GycYUMo_o" /> 
        <META name="y_key" content="116f6310a0df3c4f" />
        <meta name="msvalidate.01" content="A9BB200170442859BD6DF681353ACD78" />
        
        <meta name="Description" content="$action.getPageMetaDesc()" />
        <meta name="keywords" content="$action.getPageMetaKeywords()" />
        <meta property="fb:admins" content="564777065" />
    <title>$action.getPageTitle() | ${domain.name}</title>
        
#include ( "templates/commoncssfiles.vm" )
 
        <link rel="stylesheet" href="/css/home.css" type="text/css" />
        <link href="https://plus.google.com/108546508648658526684" rel="publisher" />
        <script language="javascript" type="text/javascript" src="/js/ga-invoker.js"></script>
        <style>
                label.error{
                        color:red;
                        float:left;
                        font-size:12px;
                        padding: 2px 0;
                        width:500px;
                }
                
                input.error{
                        border: solid 1px red;
                }
                
                select.error{
                        border: solid 1px red;
                }
                
                div.icon-row{
                height: 50px;
                margin-top: 5px;
                }
                
                div.recharge-main-left-container div{
                        height:50px;
                        margin-top:2px;
                }
                
                span.label-text{
                padding: 15px;
                float: left;
                width: 250px;
                text-align: right;
                }
                
                div.error-msg{
                color: red;
                font-size:15px;
                padding: 5px 5px 10px 5px;
                text-align: center;
                }
                
                span.inputBox{
                        padding: 10px 15px 10px 5px;
            display: inline-block;
            height: 30px;
            width: 280px;
                        float:left;
                }
                
                .fullsize{
                        height:100%;
                        width:227px;
                        padding-left: 48px;
                        font-size: 18px;
                        border: solid 1px grey;
                }
                
                .submit-button{
                        background: -2px -5px url('/images/confirm.png');
            cursor: pointer;
            display: inline-block;
            font-size: 15px;
            font-weight: bold;
            text-shadow: 0px 1px 0px #E45000;
            outline: medium none;
            overflow: visible;
            text-align: center;
            height: 40px;
            color: white;
                        width: 190px;
                }
                
                .textCenter{
                        text-align:center;
                }
                
                .leftPadded{
                        padding-left:50px;
                }
                
                .padding12{
                        padding-bottom:12px;
                }
                
                table, th, td{
                        padding:5px;
                        border-collapse:collapse;
                        border:1px solid darkgrey;
                }
                
                th{
                        background:#2978C1;
                        color:white;
                }
                
                b{
                        color: blue;
                        cursor: pointer;
                }
                
    </style>
        
</head>

<body>
        <noscript>
                <p id="noScript">Please enable <em>Javascript</em> for this Website to function correctly!</p>
        </noscript>
        $action.getHeaderSnippet()
        
        <div id='popularPlansDiv' style="padding:15px;border: 1px solid #2978C1;position: fixed;width: 672px;font-size: 15px;background: white;box-shadow: 0px 0px 10px 5px darkgrey;left:189px;top:110px;display:none;z-index:99;">
                <div style="padding-bottom: 15px;font-size: 20px;font-weight: bold;color: #555555;">
                        <span>Popular Plans</span>
                        <span id="closePlans" style="background: url('/images/closePlans.png');height: 25px;width: 25px;cursor:pointer;float: right;"></span>
                </div>
                <div id="popularPlansInner" style="height: 202px;overflow: auto;border: 1px solid darkgrey;">
                
                </div>
                <div style="font-size: 12px;line-height: 100%;margin-top: 15px;color: #444444;">
                        These plans are collected from time to time on a best effort basis from Operator website.<br>Check with your operator in case of any confusion.Operator decision in this regard will be final.
                </div>
    </div>
        
        <!-- Main -->
        <div id="main">
                <div class="main-content">
                        <div class="main-top"></div>
                        <div class="main-left left">
                                 #if ( $bannerCount == 0 )
                                        <div class="main-left-banner" style="display: none">
                                #elseif ( $bannerCount < 3 )
                                        <div class="main-left-banner"  style="height: 210px;">
                                #else
                                        <div class="main-left-banner"  style="height: 230px;">
                                #end
                                
                                #if($bannerCount > 1 && $bannerCount < 3)
                                        <ul id="bannerMenu">
                                                #foreach($banner in $banners)
                                                        #if($banner.isHasMap())
                                                                <li class="square"><a href="$banner.getLink()" #if($banner.isTarget())target="_blank"#end banner-name='$banner.getBannerName()'><img src='/images/banners/$banner.getImageName()' usemap='#map$velocityCount' height="200" width="710"/></a>
                                                                <map name='map$velocityCount'> 
                                                                        #set($mapdetails = $action.getbannermapdetails("$banner.getBannerName()"))
                                                                        #foreach($mapdetail in $mapdetails)
                                                                                <area shape="rect" coords='$mapdetail.getCoordinates()' href='$mapdetail.getMapLink()' banner-name='$banner.getBannerName()'/>
                                                                        #end
                                                                        </map>
                                                                        </li>
                                                        #else
                                                                <li class="square"><a href="$banner.getLink()" #if($banner.isTarget())target="_blank"#end banner-name='$banner.getBannerName()'><img src='/images/banners/$banner.getImageName()' height="200" width="710" /></a></li>
                                #end
                                                #end
                                        </ul>
                                        <div class="container">
                      <div class="slider_arrow_left"></div>
                      <div class="slider_arrow_right"></div>
                    </div>
                                #else
                                          <div id="banner-menu">
                                                #foreach($banner in $banners)
                                                        #if($banner.isHasMap())
                                                                <a href="$banner.getLink()" #if($banner.isTarget())target="_blank"#end banner-name='$banner.getBannerName()'><img src='/images/banners/$banner.getImageName()' title="$banner.getBannerName()" usemap='#map$velocityCount'/></a>
                                                                <map name='map$velocityCount'> 
                                                                        #set($mapdetails = $action.getbannermapdetails("$banner.getBannerName()"))
                                                                        #foreach($mapdetail in $mapdetails)
                                                                                <area shape="rect" coords='$mapdetail.getCoordinates()' href='$mapdetail.getMapLink()' banner-name='$banner.getBannerName()'/>
                                                                        #end
                                                                        </map>
                                                        #else
                                                                <a href="$banner.getLink()" #if($banner.isTarget())target="_blank"#end banner-name='$banner.getBannerName()'><img src='/images/banners/$banner.getImageName()' title="$banner.getBannerName()"/></a>
                                #end
                                                #end
                       </div>
                                #end
                                </div>
                                <div style='height: 30px;background-color: #2789C1;font-size: 14px;font-weight: bold;color: #FFFFFF;border: solid 1px #2789C1;width: 100%;'>
                                        <div style='margin:0 10px 0 10px;padding-top:7px'>
                                                ENTER YOUR DETAILS
                                        </div>
                                </div>
                                <div class="recharge-main-left-container">
                                #if($action.getOperatorId()!=0)
                                        <h1 style="margin-top:5px; text-align:center;">$action.getPageName()</h1>
                                #end
                                #set($serviceType=$action.getServiceType())
                                <div style='height:15px;' class='error-msg'>
                                                #set($errorMsg=$action.getError())
                                                #if($errorMsg.equals(""))
                                        #else
                                                $errorMsg
                                        #end
                                </div>
                                <form id='serviceSelectForm' action='/recharge' method='post'>
                                        <input id='serviceType' type="hidden" name='serviceType' value=''>
                                        <input name='form' type="hidden" value='serviceSelect'>
                                </form>
                                
                                <form id='rechargeDetailsForm' action='/confirm' method='post' onsubmit="trackEventWithGA('Recharge', 'Confirm', '')">
                                                <input type='hidden' id='circleCode' name='circleCode' value=''>
                                        <input type='hidden' name='rechargeType' value='$serviceType'>
                                        #set($providerMap = $action.getProviderMap())
                                
                                        #if($serviceType=="1")
                                                <div class='icon-row'>
                                                        <span class='label-text' style='float:left'>Recharge Your :</span>
                                                        <span id='phone-image-not-clickable' style="background-image:url('/images/phone_pressed.png'); display:inline-block; height:50px; width:107px;">
                                                        </span>
                                                        <span id='dth-image' style="background-image:url('/images/dth.png'); display:inline-block; height:50px; width:107px;cursor:pointer">
                                                        </span>
                                                </div>
                                                                
                                                <div id='mobile-number' class='row'>
                                                        <span class='label-text'>Mobile Number :</span>
                                                        <span class='inputBox'>
                                                                <input type='text' name='number' maxlength="10" class='fullsize' style="background: white url('/images/+91.png') no-repeat 2px;">
                                                        </span>
                                                </div>
                                                
                                                <div id='operator' class='row'>
                                                        <span class='label-text'>Operator :</span>
                                                        <span class='inputBox' style='width:170px'>
                                                                <select select id='operatorSelector' name='operator' style="height: 30px;font-size: 18px;width: 180px;">
                                                                        <option value='0'>Select Operator</option>
                                                                #foreach($providerKey in $providerMap.keySet())
                                                                        <option value='$providerKey' #if($action.getOperatorId()==$providerKey)selected="true"#end>$providerMap.get($providerKey)</option>
                                                                #end
                                                                </select>
                                                        </span>
                                                        <span style="font-size: 12px; color: blue;float: left;padding: 15px 0 15px 0;">MNP Users choose operator manually</span>
                                                </div>
                                                
                                                <div id='plan' class='row planSelector'>
                                                        <span class='label-text'>Plan :</span>
                                                        <span class='inputBox' style='width:90px'>
                                                                <select id='planDropDown' name='plan' style="height: 30px;font-size: 18px;width: 95px;">
                                                                </select>
                                                        </span>
                                                        <span id="planDescription" style="font-size: 12px; color: blue;float: left;padding: 15px 0 15px 0;display: inline-block;"></span>
                                                </div>
                                                        
                                                        <div id='showPlansDiv' style="height: 20px;font-size: 14px;padding-left: 284px;margin-top: 9px;display:none">
                                <span id='showPlans'></span>
                            </div>
                                                        
                                                <div id='amount' class='row'>
                                                        <span class='label-text'>Amount :</span>
                                                        <span class='inputBox'>
                                                                <input  id="amountInput" maxlength="4" name='amount' type='text' class='fullsize' style="background: white url('/images/Rupee.png') no-repeat 2px;">
                                                        </span>
                                                </div>
                                        #else
                                                
                                                <div class='icon-row'>
                                                        <span class='label-text' style='float:left'>Recharge Your :</span>
                                                        <span id='phone-image' style="background-image:url('/images/phone.png'); display:inline-block; height:50px; width:107px;cursor:pointer">
                                                        </span>
                                                        <span id='dth-image-not-clickable' style="background-image:url('/images/dth_pressed.png'); display:inline-block; height:50px; width:107px;">
                                                        </span>
                                                </div>
                                                
                                                <div id='operator' class='row'>
                                                        <span class='label-text'>Operator :</span>
                                                        <span class='inputBox' style='width:170px'>
                                                                <select select id='operatorSelector' name='operator' style="height: 30px;font-size: 18px;width: 180px;">
                                                                        <option value='0'>Select Operator</option>
                                                                #foreach($providerKey in $providerMap.keySet())
                                                                        <option value='$providerKey' #if($action.getOperatorId()==$providerKey)selected="true"#end>$providerMap.get($providerKey)</option>
                                                                #end
                                                                </select>
                                                        </span>
                                                        <span id="accNumberHelp" style="font-size: 12px; color: blue;padding: 5px 0 5px 0;width: 240px;display: inline-block;"></span>
                                                </div>
                                                        
                                                <div id='mobile-number' class='row'>
                                                        <span id='dthIdAlias' class='label-text'>Account Number :</span>
                                                        <span class='inputBox'>
                                                                <input type="text" name="dthnumber" class="fullsize" style="width: 265px;padding-left: 10px;">
                                                        </span>
                                                </div>
                                                
                                                <div id='amount' class='row'>
                                                        <span class='label-text'>Amount :</span>
                                                        <span class='inputBox'>
                                                                <input  maxlength="5" name='dthamount' type='text' class='fullsize' style="background: white url('/images/Rupee.png') no-repeat 2px;">
                                                        </span>
                                                </div>
                                                #end
                                                
                                        <div id='email' class='row'>
                                                <span class='label-text'>Email Id :</span>
                                                #if($action.getUserInfo().isLoggedIn())
                                                        #set($emailId = $action.getUserInfo().getEmail())
                                                #else
                                                        #set($emailId = "")
                                                #end
                                                <span class='inputBox'>
                                                        <input  name='email' value ='$emailId' type='text' class='fullsize' style='background-color: white;padding-left:15px;width:260px;'>
                                                        <label for="email" style="color: #555;float: left;font-size: 13px;padding: 2px 0;width: 400px;">We will send confirmation of the recharge on this address.</label>
                                                </span>
                                        </div>
                                                
                                                <div id="submit-button" style="margin-top: 50px;text-align: center;margin: 50px 0px 25px 0px;">
                                                        <input type="submit" value="CONFIRM" class="submit-button">
                                                </div>
                                </form>
                                
                                </div>
                        </div>
                        <div class="widgets right">
        <div id='small-recharge-banner' style='display:none;'>
        </div>
        <div class="widgets right">
                $action.getCartWidgetSnippet()
        </div>
</div>
                </div>
        </div>
        #include("templates/footer.vm")
        #include ( "templates/commonjsfiles.vm" )
        <script type="text/javascript" charset="utf-8">
        #if ($bannerCount == 1 )
        jQuery('#banner-menu').slidy({
        animation:  'none',
        children:   'a',
        menu:       false,
        pause:      true,
        speed:      400,
        time:       4000
    });

        #elseif ($bannerCount > 1 && $bannerCount < 3 )
        $(document).ready(function() {
           $('#bannerMenu').DDSlider({
           nextSlide: '.slider_arrow_right',
           prevSlide: '.slider_arrow_left',
           selector: '.slider_selector'
            });
          }); 
        #else
        jQuery('#banner-menu').slidy({
        animation:  'fade',
        children:   'a',
        menu:       true,
        pause:      true,
        speed:      200,
        time:       5000
    });
        #end
        </script>
        <style type="text/css">
                .slider_arrow_left {
         background: url(/images/left_arrow.png) no-repeat top left;
         }
                .slider_arrow_right {
         background: url(/images/right_arrow.png) no-repeat top left;
         }
        </style>
        <script type="text/javascript">
        jQuery('.planSelector').hide();
        #if($action.getServiceType() == "1")
                var jsonMap = $action.getPlanMapInJson();
                jQuery('#operatorSelector').change(function() {
                        populatePlans();
                                var operatorName = jQuery('#operatorSelector option:selected').text();
                        if(operatorName == "AIRTEL" || operatorName == "VODAFONE" || operatorName == "AIRCEL" || operatorName == "IDEA" || operatorName == "MTNL DELHI" || operatorName == "MTNL MUMBAI" || operatorName == "RELIANCE GSM" || operatorName == "RELIANCE cdma" || operatorName == "UNINOR") {
                                jQuery('#showPlansDiv').show();
                                jQuery('#showPlans').html("See popular <b class='showDenomination' denominationType='1'>TOPUP</b> and <b class='showDenomination' denominationType='2'>SPECIAL</b> plans for " + operatorName);
                        } else {
                                jQuery('#showPlansDiv').hide();
                        }
                });
                        
                        if(jQuery('#operatorSelector option:selected').val() != '0'){
                                populatePlans();
                        }
                        
                        function populatePlans() {
                                jQuery('.planSelector select#planDropDown').children().remove();
                        jQuery('.planSelector').hide();
                        var operatorId = jQuery('#operatorSelector option:selected').val();
                        plans = jsonMap[operatorId];
                                if(plans) {
                        jQuery.each(plans, function(i, plan) {
                                var planName = plan.name;
                                var planDisplayName = plan.displayName;
                                var planDescription = plan.description;
                                jQuery('.planSelector').show();
                                if(i==0) {
                                        jQuery('#planDropDown').append("<option value='" + planName + "' desc='" + planDescription + "'>" + planDisplayName + "</option>");
                                } else {
                                        jQuery('#planDropDown').append("<option selected='true' value='" + planName + "' desc='" + planDescription + "'>" + planDisplayName + "</option>");
                                }
                        });
                                }
                        var planDescription =jQuery('#planDropDown option:selected') 
                                if(planDescription.length != 0) {
                                        jQuery('#planDescription').html(planDescription.attr('desc'));
                                }
                        }
                        
        #else   
                var helpMap = {"1":"Your VC number starts with 0 and is 11 digits long.",
                                        "2":"Smart card number starts with 2 and is 12 digits long.",
                                        "3":"Smart card number starts with 4 and is 11 digits long.",
                                        "4":"Subscriber ID starts with 1 and is 10 digits long.",
                                        "5":"For customer ID, SMS ID to 9212012299 from your registered mobile no.",
                                                "26":"Customer ID starts with 3 and is 10 digits long."};
                var dthIdAliasMap = {"1":"VC Number :",
                                                        "2":"Smart Card Number :",
                                                        "3":"Smart Card Number :",
                                                        "4":"Subscriber Id :",
                                                        "5":"Customer Id :",
                                                        "0":"Account Number :",
                                                                "26":"Customer Id :"};
                jQuery('#operatorSelector').change(function() {
                        if(jQuery('input[name="dthamount"]').val() != ""){
                                rechargeFormValidator.element('input[name="dthamount"]');
                        }
                        populateDthHelp();
                });
                        
                        if(jQuery('#operatorSelector option:selected').val() != '0'){
                                populateDthHelp();
                        }
                        
                        function populateDthHelp() {
                                jQuery('#accNumberHelp').html(helpMap[jQuery('#operatorSelector option:selected').val()]);
                                jQuery('#dthIdAlias').html(dthIdAliasMap[jQuery('#operatorSelector option:selected').val()]);
                        }
        #end
        </script>
</body>
</html>