license page

project/customer/forms.py

@@ -429,7 +429,7 @@ class LicenseForm(forms.Form):
     """Форма продления лицензии
     """
     term = forms.ModelChoiceField(queryset=models.LicensePrice.objects.all(),
-            widget=forms.RadioSelect, label=u'срок оплаты', empty_label = None)
+            widget=forms.RadioSelect, label=u'Срок лицензии', empty_label = None)
     payform = forms.ChoiceField(choices=consts.PAYFORMS[1:], widget=forms.RadioSelect, 
-            label=u'форма оплаты')
+            label=u'Форма оплаты')
 

project/static/css/style.css

@@ -593,3 +593,20 @@ tr.doc-row:hover {cursor:pointer;}
 #blackbox .bb-triangle {background: url(../img/triangle2.png) no-repeat center center;width:11px;height:25px;position:absolute;left:-8px;top:16px;}
 #blackbox p {margin:0;padding:0;}
 #blackbox a {color:#fff;font-weight:bold;margin: 10px 0 0 0; display:block;}
+
+.license_label {float:left;width:130px;font-size:14px;height:36px;line-height:36px;}
+.license_field {float:left;width:380px;}
+.license-form {width:535px;float:left;}
+.license-form .buttons {padding:10px;}
+.license-form .field {padding:10px;}
+.license-form .field.orange_border {border: solid 1px #fed13e;position:relative;}
+.license-form .field.grey_border {border: solid 1px #9d9d9d;border-top:none;background:#faf9f9;position:relative;}
+.license-form input[type=submit]{border:none;background:url(../img/gotopay.png)center center no-repeat;width:145px;height:145px;margin:0 auto; display:block;}
+.orange-bottom-triangle {width:100%;height:20px;background:url(../img/triangle-orange-bottom.png)center center no-repeat;margin-top:-1px;position:absolute;top:0;left:0;}
+.grey-bottom-triangle {width:100%;height:20px;background:url(../img/triangle-grey-bottom.png)center center no-repeat;margin-top:-1px;position:relative;}
+.license-ways {width:585px;}
+.license-ways .title {font-family:"MyriadPro-Light";font-size:21px;color:#313942;}
+.license-ways .col-title {font-size:13px;font-style:italic;padding-top:13px;padding-bottom:3px;}
+.license-ways .col {width:200px;}
+.license-ways .mr-5 {margin-right:5px;}
+.license-ways .col-last {width:185px;}

project/templates/customer/profile/license.html

@@ -9,6 +9,7 @@
         <p class="error">{{ form.non_field_errors }}</p>
     {% endif %}
 
+    <div class='content-white'>
     <form class="license-form" action="." method="post">
         {% csrf_token %}
 
@@ -16,23 +17,91 @@
             {{ hidden }}
         {% endfor %}
 
-        {% for field in form.visible_fields %}
-            <div class="field">
-                <div style="float: left; width: 200px;">
-                    {{ field.label_tag }}:
+        <div class="field orange_border">
+            <div class='license_label'>
+                {{ form.term.label_tag }}
             </div>
-                <div style="float: left;">
-                    {{ field }}
+            <div class="clear"></div>
+            <div class='license_label'>
+            </div>
+            <div class='license_field'>
+                {{ form.term }}
                 {{ field.errors }}
             </div>
             <div class="clear"></div>
         </div>
-        {% endfor %}
+        <div class="field grey_border">
+            <div class="orange-bottom-triangle"></div>
+            <div class='license_label'>
+                {{ form.payform.label_tag }}
+            </div>
+            <div class="clear"></div>
+            <div class='license_label'>
+            </div>
+            <div class='license_field'>
+                {{ field }}
+                {{ form.payform }}
+            </div>
+            <div class="clear"></div>
+        </div>
+        <div class="grey-bottom-triangle"></div>
 
         <div class="buttons">
-            <input type="submit" name="submit" value="Перейти к оплате" />
+            <input type="submit" name="submit" value="" />
         </div>
     </form>
+    <div class='right license-ways'>
+        <div class='title'>
+            Во всех городах России и стран СНГ вы можете оплатить лицензию Документора одним из десятков возможных способов:
+        </div>
+        <div class='left col'>
+            <div class='col-title'>Банковской картой</div>
+            <div class='left mr-5'><img src='/static/img/lic-mc.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-visa.png' /></div>
+            <div class="clear"></div>
+            <div class='col-title'>Электронными деньгами</div>
+            <div class='left mr-5'><img src='/static/img/lic-wm.png' /></div>
+            <div class="clear"></div>
+        </div>
+        <div class='left col'>
+            <div class='col-title'>Наличными в магазинах</div>
+            <div class='left mr-5'><img src='/static/img/lic-svz.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-es.png' /></div>
+            <div class="clear"></div>
+            <div class='col-title'>Наличными в терминалах</div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class="clear"></div>
+            <div class='col-title'>Через банкоматы</div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class="clear"></div>
+        </div>
+        <div class='left col-last'>
+            <div class='col-title'>Со счёта телефона</div>
+            <div class='left mr-5'><img src='/static/img/lic-mf.png' /></div>
+            <div class='left'><img src='/static/img/lic-mts.png' /></div>
+            <div class="clear"></div>
+            <div class='col-title'>Через интернет-банк</div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left'><img src='/static/img/lic-empty.png' /></div>
+            <div class="clear"></div>
+            <div class='col-title'>Денежным переводом</div>
+            <div class='left mr-5'><img src='/static/img/lic-empty.png' /></div>
+            <div class='left'><img src='/static/img/lic-empty.png' /></div>
+            <div class="clear"></div>
+        </div>
+    </div>
+    <div class="clear"></div>
+    </div>
 {% endblock %}
 
 {% block js %}