Subversion Repositories SmartDukaan

Rev

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

Rev Author Line No. Line
8917 kshitij.so 1
#set($banners = $action.getActiveBanners())
2
#if($banners)
3
#set($bannerCount = $banners.size())
4
#else
5
#set($bannerCount = 0)
6
#end
7
 
6050 anupam.sin 8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9
<html xmlns="http://www.w3.org/1999/xhtml">
10
<head>
11
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
12
 
13
<!-- Prevent MS Office toolbar from changing layout -->
14
	<meta name="google-site-verification" content="NPHVASYh9ZsYbjffRuAU4dhEHhx7xSKUj9GycYUMo_o" /> 
15
	<META name="y_key" content="116f6310a0df3c4f" />
16
	<meta name="msvalidate.01" content="A9BB200170442859BD6DF681353ACD78" />
6204 rajveer 17
 
18
	<meta name="Description" content="$action.getPageMetaDesc()" />
19
	<meta name="keywords" content="$action.getPageMetaKeywords()" />
10015 kshitij.so 20
	<meta property="fb:admins" content="564777065" />
6204 rajveer 21
    <title>$action.getPageTitle() | ${domain.name}</title>
22
 
6050 anupam.sin 23
#include ( "templates/commoncssfiles.vm" )
24
 
25
	<link rel="stylesheet" href="/css/home.css" type="text/css" />
26
	<link href="https://plus.google.com/108546508648658526684" rel="publisher" />
27
	<script language="javascript" type="text/javascript" src="/js/ga-invoker.js"></script>
6066 amit.gupta 28
	<style>
29
		label.error{
30
			color:red;
31
			float:left;
32
			font-size:12px;
33
			padding: 2px 0;
34
			width:500px;
6260 anupam.sin 35
		}
36
 
6267 anupam.sin 37
		input.error{
38
			border: solid 1px red;
6260 anupam.sin 39
		}
6267 anupam.sin 40
 
6268 anupam.sin 41
		select.error{
42
			border: solid 1px red;
43
		}
44
 
6260 anupam.sin 45
		div.icon-row{
46
    		height: 50px;
47
    		margin-top: 5px;
48
		}
49
 
50
		div.recharge-main-left-container div{
51
			height:50px;
52
			margin-top:2px;
53
		}
54
 
55
		span.label-text{
56
    		padding: 15px;
57
    		float: left;
58
    		width: 250px;
59
    		text-align: right;
60
		}
61
 
62
		div.error-msg{
63
    		color: red;
64
    		font-size:15px;
65
    		padding: 5px 5px 10px 5px;
66
    		text-align: center;
67
		}
68
 
69
		span.inputBox{
70
			padding: 10px 15px 10px 5px;
71
            display: inline-block;
72
            height: 30px;
73
            width: 280px;
74
			float:left;
75
		}
76
 
77
		.fullsize{
78
			height:100%;
79
			width:227px;
80
			padding-left: 48px;
81
			font-size: 18px;
82
			border: solid 1px grey;
83
		}
84
 
85
		.submit-button{
86
			background: -2px -5px url('/images/confirm.png');
87
            cursor: pointer;
88
            display: inline-block;
89
            font-size: 15px;
90
            font-weight: bold;
91
            text-shadow: 0px 1px 0px #E45000;
92
            outline: medium none;
93
            overflow: visible;
94
            text-align: center;
95
            height: 40px;
96
            color: white;
97
			width: 190px;
98
		}
6289 anupam.sin 99
 
100
		.textCenter{
101
			text-align:center;
102
		}
103
 
104
		.leftPadded{
105
			padding-left:50px;
106
		}
107
 
108
		.padding12{
109
			padding-bottom:12px;
110
		}
111
 
112
		table, th, td{
113
			padding:5px;
114
			border-collapse:collapse;
115
			border:1px solid darkgrey;
116
		}
117
 
118
		th{
119
			background:#2978C1;
120
			color:white;
121
		}
122
 
123
		b{
124
			color: blue;
125
			cursor: pointer;
126
		}
127
 
6066 amit.gupta 128
    </style>
6260 anupam.sin 129
 
6050 anupam.sin 130
</head>
131
 
132
<body>
133
	<noscript>
134
		<p id="noScript">Please enable <em>Javascript</em> for this Website to function correctly!</p>
135
	</noscript>
136
	$action.getHeaderSnippet()
6289 anupam.sin 137
 
11549 kshitij.so 138
	<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;">
6289 anupam.sin 139
		<div style="padding-bottom: 15px;font-size: 20px;font-weight: bold;color: #555555;">
140
			<span>Popular Plans</span>
141
			<span id="closePlans" style="background: url('/images/closePlans.png');height: 25px;width: 25px;cursor:pointer;float: right;"></span>
142
		</div>
143
		<div id="popularPlansInner" style="height: 202px;overflow: auto;border: 1px solid darkgrey;">
144
 
145
		</div>
6307 anupam.sin 146
		<div style="font-size: 12px;line-height: 100%;margin-top: 15px;color: #444444;">
147
			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.
6292 anupam.sin 148
		</div>
6289 anupam.sin 149
    </div>
150
 
6050 anupam.sin 151
	<!-- Main -->
152
	<div id="main">
153
		<div class="main-content">
154
			<div class="main-top"></div>
155
			<div class="main-left left">
8917 kshitij.so 156
				 #if ( $bannerCount == 0 )
157
					<div class="main-left-banner" style="display: none">
158
				#elseif ( $bannerCount < 3 )
159
					<div class="main-left-banner"  style="height: 210px;">
160
				#else
161
					<div class="main-left-banner"  style="height: 230px;">
162
				#end
163
 
164
				#if($bannerCount > 1 && $bannerCount < 3)
165
					<ul id="bannerMenu">
166
						#foreach($banner in $banners)
167
							#if($banner.isHasMap())
10095 kshitij.so 168
								<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>
8917 kshitij.so 169
								<map name='map$velocityCount'> 
170
									#set($mapdetails = $action.getbannermapdetails("$banner.getBannerName()"))
171
									#foreach($mapdetail in $mapdetails)
172
										<area shape="rect" coords='$mapdetail.getCoordinates()' href='$mapdetail.getMapLink()' banner-name='$banner.getBannerName()'/>
173
									#end
174
									</map>
175
									</li>
176
							#else
10095 kshitij.so 177
								<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>
8917 kshitij.so 178
	                        #end
179
						#end
180
					</ul>
181
					<div class="container">
182
                      <div class="slider_arrow_left"></div>
183
                      <div class="slider_arrow_right"></div>
184
                    </div>
185
				#else
186
					  <div id="banner-menu">
187
						#foreach($banner in $banners)
188
							#if($banner.isHasMap())
10095 kshitij.so 189
								<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>
8917 kshitij.so 190
								<map name='map$velocityCount'> 
191
									#set($mapdetails = $action.getbannermapdetails("$banner.getBannerName()"))
192
									#foreach($mapdetail in $mapdetails)
193
										<area shape="rect" coords='$mapdetail.getCoordinates()' href='$mapdetail.getMapLink()' banner-name='$banner.getBannerName()'/>
194
									#end
195
									</map>
196
							#else
10095 kshitij.so 197
								<a href="$banner.getLink()" #if($banner.isTarget())target="_blank"#end banner-name='$banner.getBannerName()'><img src='/images/banners/$banner.getImageName()' title="$banner.getBannerName()"/></a>
8917 kshitij.so 198
	                        #end
199
						#end
200
                       </div>
201
				#end
6050 anupam.sin 202
				</div>
6249 anupam.sin 203
				<div style='height: 30px;background-color: #2789C1;font-size: 14px;font-weight: bold;color: #FFFFFF;border: solid 1px #2789C1;width: 100%;'>
204
					<div style='margin:0 10px 0 10px;padding-top:7px'>
205
						ENTER YOUR DETAILS
206
					</div>
207
				</div>
6050 anupam.sin 208
				<div class="recharge-main-left-container">
6260 anupam.sin 209
    				#if($action.getOperatorId()!=0)
210
    					<h1 style="margin-top:5px; text-align:center;">$action.getPageName()</h1>
211
    				#end
212
    				#set($serviceType=$action.getServiceType())
213
    				<div style='height:15px;' class='error-msg'>
214
						#set($errorMsg=$action.getError())
215
						#if($errorMsg.equals(""))
216
    					#else
6307 anupam.sin 217
    						$errorMsg
6260 anupam.sin 218
    					#end
219
    				</div>
220
    				<form id='serviceSelectForm' action='/recharge' method='post'>
221
    					<input id='serviceType' type="hidden" name='serviceType' value=''>
222
    					<input name='form' type="hidden" value='serviceSelect'>
223
    				</form>
224
 
225
    				<form id='rechargeDetailsForm' action='/confirm' method='post' onsubmit="trackEventWithGA('Recharge', 'Confirm', '')">
6307 anupam.sin 226
						<input type='hidden' id='circleCode' name='circleCode' value=''>
6260 anupam.sin 227
    					<input type='hidden' name='rechargeType' value='$serviceType'>
228
    					#set($providerMap = $action.getProviderMap())
229
 
230
        				#if($serviceType=="1")
231
        					<div class='icon-row'>
232
        						<span class='label-text' style='float:left'>Recharge Your :</span>
233
        						<span id='phone-image-not-clickable' style="background-image:url('/images/phone_pressed.png'); display:inline-block; height:50px; width:107px;">
234
        						</span>
235
        						<span id='dth-image' style="background-image:url('/images/dth.png'); display:inline-block; height:50px; width:107px;cursor:pointer">
236
        						</span>
237
        					</div>
238
 
239
        					<div id='mobile-number' class='row'>
240
        						<span class='label-text'>Mobile Number :</span>
241
        						<span class='inputBox'>
242
        							<input type='text' name='number' maxlength="10" class='fullsize' style="background: white url('/images/+91.png') no-repeat 2px;">
243
        						</span>
244
        					</div>
245
 
246
        					<div id='operator' class='row'>
247
        						<span class='label-text'>Operator :</span>
248
        						<span class='inputBox' style='width:170px'>
249
        							<select select id='operatorSelector' name='operator' style="height: 30px;font-size: 18px;width: 180px;">
250
        								<option value='0'>Select Operator</option>
251
            							#foreach($providerKey in $providerMap.keySet())
252
            								<option value='$providerKey' #if($action.getOperatorId()==$providerKey)selected="true"#end>$providerMap.get($providerKey)</option>
253
            							#end
254
        							</select>
255
        						</span>
256
        						<span style="font-size: 12px; color: blue;float: left;padding: 15px 0 15px 0;">MNP Users choose operator manually</span>
257
        					</div>
258
 
259
        					<div id='plan' class='row planSelector'>
260
        						<span class='label-text'>Plan :</span>
261
        						<span class='inputBox' style='width:90px'>
262
        							<select id='planDropDown' name='plan' style="height: 30px;font-size: 18px;width: 95px;">
263
        							</select>
264
        						</span>
265
        						<span id="planDescription" style="font-size: 12px; color: blue;float: left;padding: 15px 0 15px 0;display: inline-block;"></span>
266
        					</div>
6289 anupam.sin 267
 
268
							<div id='showPlansDiv' style="height: 20px;font-size: 14px;padding-left: 284px;margin-top: 9px;display:none">
269
                            	<span id='showPlans'></span>
270
                            </div>
271
 
6260 anupam.sin 272
        					<div id='amount' class='row'>
273
        						<span class='label-text'>Amount :</span>
274
        						<span class='inputBox'>
6289 anupam.sin 275
        							<input  id="amountInput" maxlength="4" name='amount' type='text' class='fullsize' style="background: white url('/images/Rupee.png') no-repeat 2px;">
6260 anupam.sin 276
        						</span>
277
        					</div>
278
        				#else
279
 
280
        					<div class='icon-row'>
281
        						<span class='label-text' style='float:left'>Recharge Your :</span>
282
        						<span id='phone-image' style="background-image:url('/images/phone.png'); display:inline-block; height:50px; width:107px;cursor:pointer">
283
        						</span>
284
        						<span id='dth-image-not-clickable' style="background-image:url('/images/dth_pressed.png'); display:inline-block; height:50px; width:107px;">
285
        						</span>
286
        					</div>
287
 
288
        					<div id='operator' class='row'>
289
        						<span class='label-text'>Operator :</span>
290
        						<span class='inputBox' style='width:170px'>
291
        							<select select id='operatorSelector' name='operator' style="height: 30px;font-size: 18px;width: 180px;">
292
        								<option value='0'>Select Operator</option>
293
            							#foreach($providerKey in $providerMap.keySet())
294
            								<option value='$providerKey' #if($action.getOperatorId()==$providerKey)selected="true"#end>$providerMap.get($providerKey)</option>
295
            							#end
296
        							</select>
297
        						</span>
298
        						<span id="accNumberHelp" style="font-size: 12px; color: blue;padding: 5px 0 5px 0;width: 240px;display: inline-block;"></span>
299
        					</div>
300
 
301
        					<div id='mobile-number' class='row'>
302
        						<span id='dthIdAlias' class='label-text'>Account Number :</span>
303
        						<span class='inputBox'>
304
        							<input type="text" name="dthnumber" class="fullsize" style="width: 265px;padding-left: 10px;">
305
        						</span>
306
        					</div>
307
 
308
        					<div id='amount' class='row'>
309
        						<span class='label-text'>Amount :</span>
310
        						<span class='inputBox'>
311
        							<input  maxlength="5" name='dthamount' type='text' class='fullsize' style="background: white url('/images/Rupee.png') no-repeat 2px;">
312
        						</span>
313
        					</div>
6050 anupam.sin 314
						#end
6260 anupam.sin 315
 
316
    					<div id='email' class='row'>
317
    						<span class='label-text'>Email Id :</span>
318
    						#if($action.getUserInfo().isLoggedIn())
319
    							#set($emailId = $action.getUserInfo().getEmail())
320
    						#else
321
    							#set($emailId = "")
322
    						#end
323
    						<span class='inputBox'>
324
    							<input  name='email' value ='$emailId' type='text' class='fullsize' style='background-color: white;padding-left:15px;width:260px;'>
325
    							<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>
326
    						</span>
327
    					</div>
328
 
329
						<div id="submit-button" style="margin-top: 50px;text-align: center;margin: 50px 0px 25px 0px;">
330
							<input type="submit" value="CONFIRM" class="submit-button">
6050 anupam.sin 331
						</div>
6260 anupam.sin 332
    				</form>
333
 
6050 anupam.sin 334
				</div>
335
			</div>
6066 amit.gupta 336
			<div class="widgets right">
7061 kshitij.so 337
	<div id='small-recharge-banner' style='display:none;'>
6347 anupam.sin 338
	</div>
8917 kshitij.so 339
	<div class="widgets right">
340
		$action.getCartWidgetSnippet()
8462 kshitij.so 341
	</div>
7050 kshitij.so 342
</div>
6050 anupam.sin 343
		</div>
344
	</div>
345
	#include("templates/footer.vm")
346
	#include ( "templates/commonjsfiles.vm" )
8917 kshitij.so 347
	<script type="text/javascript" charset="utf-8">
348
	#if ($bannerCount == 1 )
349
	jQuery('#banner-menu').slidy({
350
        animation:  'none',
351
        children:   'a',
352
        menu:       false,
353
        pause:      true,
354
        speed:      400,
355
        time:       4000
356
    });
357
 
358
	#elseif ($bannerCount > 1 && $bannerCount < 3 )
359
	$(document).ready(function() {
360
           $('#bannerMenu').DDSlider({
361
           nextSlide: '.slider_arrow_right',
362
           prevSlide: '.slider_arrow_left',
363
           selector: '.slider_selector'
364
            });
365
          }); 
366
	#else
367
	jQuery('#banner-menu').slidy({
368
        animation:  'fade',
369
        children:   'a',
370
        menu:       true,
371
        pause:      true,
372
        speed:      200,
373
        time:       5000
374
    });
375
	#end
376
	</script>
377
	<style type="text/css">
378
		.slider_arrow_left {
379
         background: url(/images/left_arrow.png) no-repeat top left;
380
         }
381
		.slider_arrow_right {
382
         background: url(/images/right_arrow.png) no-repeat top left;
383
         }
384
	</style>
8433 amit.gupta 385
	<script type="text/javascript">
6289 anupam.sin 386
    	jQuery('.planSelector').hide();
387
    	#if($action.getServiceType() == "1")
388
        	var jsonMap = $action.getPlanMapInJson();
389
        	jQuery('#operatorSelector').change(function() {
6310 anupam.sin 390
        		populatePlans();
6311 anupam.sin 391
				var operatorName = jQuery('#operatorSelector option:selected').text();
7911 vikram.rag 392
    			if(operatorName == "AIRTEL" || operatorName == "VODAFONE" || operatorName == "AIRCEL" || operatorName == "IDEA" || operatorName == "MTNL DELHI" || operatorName == "MTNL MUMBAI" || operatorName == "RELIANCE GSM" || operatorName == "RELIANCE cdma" || operatorName == "UNINOR") {
6311 anupam.sin 393
    				jQuery('#showPlansDiv').show();
394
    				jQuery('#showPlans').html("See popular <b class='showDenomination' denominationType='1'>TOPUP</b> and <b class='showDenomination' denominationType='2'>SPECIAL</b> plans for " + operatorName);
395
    			} else {
396
    				jQuery('#showPlansDiv').hide();
397
    			}
6310 anupam.sin 398
        	});
399
 
400
			if(jQuery('#operatorSelector option:selected').val() != '0'){
401
				populatePlans();
402
			}
403
 
404
			function populatePlans() {
6397 anupam.sin 405
				jQuery('.planSelector select#planDropDown').children().remove();
6289 anupam.sin 406
        		jQuery('.planSelector').hide();
407
        		var operatorId = jQuery('#operatorSelector option:selected').val();
6311 anupam.sin 408
        		plans = jsonMap[operatorId];
409
				if(plans) {
410
            		jQuery.each(plans, function(i, plan) {
411
            			var planName = plan.name;
412
            			var planDisplayName = plan.displayName;
413
            			var planDescription = plan.description;
414
            			jQuery('.planSelector').show();
415
            			if(i==0) {
416
                			jQuery('#planDropDown').append("<option value='" + planName + "' desc='" + planDescription + "'>" + planDisplayName + "</option>");
417
                		} else {
418
                			jQuery('#planDropDown').append("<option selected='true' value='" + planName + "' desc='" + planDescription + "'>" + planDisplayName + "</option>");
419
            			}
420
            		});
6289 anupam.sin 421
				}
6311 anupam.sin 422
        		var planDescription =jQuery('#planDropDown option:selected') 
423
				if(planDescription.length != 0) {
424
					jQuery('#planDescription').html(planDescription.attr('desc'));
425
				}
6310 anupam.sin 426
			}
6289 anupam.sin 427
 
428
    	#else	
429
        	var helpMap = {"1":"Your VC number starts with 0 and is 11 digits long.",
430
        				"2":"Smart card number starts with 2 and is 12 digits long.",
431
        				"3":"Smart card number starts with 4 and is 11 digits long.",
432
        				"4":"Subscriber ID starts with 1 and is 10 digits long.",
8530 anupam.sin 433
        				"5":"For customer ID, SMS ID to 9212012299 from your registered mobile no.",
434
						"26":"Customer ID starts with 3 and is 10 digits long."};
6289 anupam.sin 435
        	var dthIdAliasMap = {"1":"VC Number :",
436
        						"2":"Smart Card Number :",
437
        						"3":"Smart Card Number :",
438
        						"4":"Subscriber Id :",
439
        						"5":"Customer Id :",
8530 anupam.sin 440
        						"0":"Account Number :",
441
								"26":"Customer Id :"};
6289 anupam.sin 442
        	jQuery('#operatorSelector').change(function() {
6801 amit.gupta 443
        		if(jQuery('input[name="dthamount"]').val() != ""){
444
	        		rechargeFormValidator.element('input[name="dthamount"]');
445
        		}
6310 anupam.sin 446
        		populateDthHelp();
6289 anupam.sin 447
        	});
6310 anupam.sin 448
 
449
			if(jQuery('#operatorSelector option:selected').val() != '0'){
450
				populateDthHelp();
451
			}
452
 
453
			function populateDthHelp() {
454
				jQuery('#accNumberHelp').html(helpMap[jQuery('#operatorSelector option:selected').val()]);
455
				jQuery('#dthIdAlias').html(dthIdAliasMap[jQuery('#operatorSelector option:selected').val()]);
456
			}
6289 anupam.sin 457
    	#end
6178 anupam.sin 458
	</script>
6050 anupam.sin 459
</body>
460
</html>