new vm_details page
This commit is contained in:
		
					parent
					
						
							
								94004a5443
							
						
					
				
			
			
				commit
				
					
						1547b725d0
					
				
			
		
					 10 changed files with 32480 additions and 5 deletions
				
			
		
							
								
								
									
										31996
									
								
								debug.log
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										31996
									
								
								debug.log
									
										
									
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							|  | @ -188,3 +188,12 @@ | ||||||
|    text-align: left; |    text-align: left; | ||||||
|    vertical-align: middle; |    vertical-align: middle; | ||||||
|  } |  } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | /* Duplicate */ | ||||||
|  | .un-icon { | ||||||
|  |   width: 15px; | ||||||
|  |   height: 15px; | ||||||
|  |   opacity: 0.5; | ||||||
|  |   margin-top: -1px; | ||||||
|  | } | ||||||
|  | @ -228,3 +228,199 @@ | ||||||
|       float: left !important;  |       float: left !important;  | ||||||
|     } |     } | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | /* Vm Details */ | ||||||
|  | 
 | ||||||
|  | /* might be duplicated from other PR */ | ||||||
|  | .dashboard-title-thin { | ||||||
|  |   font-weight: 300; | ||||||
|  |   font-size: 30px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-item, .vm-contact-us { | ||||||
|  |     overflow: hidden; | ||||||
|  |     border: 1px solid #ddd; | ||||||
|  |     padding: 15px; | ||||||
|  |     color: #555; | ||||||
|  |     font-weight: 300; | ||||||
|  |     margin-bottom: 15px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-title { | ||||||
|  |   margin-top: 0; | ||||||
|  |   font-size: 20px; | ||||||
|  |   font-weight: 300; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-title .un-icon { | ||||||
|  |   float: right; | ||||||
|  |   height: 24px; | ||||||
|  |   width: 21px; | ||||||
|  |   margin-top: 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-item .vm-name { | ||||||
|  |   font-size: 16px; | ||||||
|  |   margin-bottom: 15px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-item p { | ||||||
|  |   margin-bottom: 5px; | ||||||
|  |   position: relative; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-ip { | ||||||
|  |   padding-bottom: 5px; | ||||||
|  |   border-bottom: 1px solid #ddd; | ||||||
|  |   margin-bottom: 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-ip .un-icon { | ||||||
|  |   height: 14px; | ||||||
|  |   width: 14px; | ||||||
|  |   position: absolute; | ||||||
|  |   right: 0; | ||||||
|  |   top: 1px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-vmid { | ||||||
|  |   padding: 50px 0 70px; | ||||||
|  |   text-align: center; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-item-lg { | ||||||
|  |   font-size: 22px; | ||||||
|  |   margin-top: 5px; | ||||||
|  |   margin-bottom: 15px; | ||||||
|  |   letter-spacing: 0.6px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-color-online { | ||||||
|  |   color: #37B07B; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-color-pending { | ||||||
|  |   color: #e47f2f; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-item .value{ | ||||||
|  |   font-weight: 400; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-config .value { | ||||||
|  |   float: right; | ||||||
|  |   font-weight: 600; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-detail-contain { | ||||||
|  |   margin-top: 25px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-contact-us { | ||||||
|  |   margin: 25px 0 30px; | ||||||
|  |   /* text-align: center; */ | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @media(min-width: 768px) { | ||||||
|  |   .vm-detail-contain { | ||||||
|  |     display: flex; | ||||||
|  |     margin-left: -10px; | ||||||
|  |     margin-right: -10px; | ||||||
|  |   } | ||||||
|  |   .vm-detail-item { | ||||||
|  |     width: 33.333333%; | ||||||
|  |     margin: 0 10px; | ||||||
|  |   } | ||||||
|  |   .vm-contact-us { | ||||||
|  |     display: flex; | ||||||
|  |     align-items: center; | ||||||
|  |     justify-content: space-between; | ||||||
|  |   } | ||||||
|  |   .vm-contact-us .vm-detail-title { | ||||||
|  |     margin-bottom: 0; | ||||||
|  |   } | ||||||
|  |   .vm-contact-us .un-icon { | ||||||
|  |     width: 22px; | ||||||
|  |     height: 22px; | ||||||
|  |     margin-right: 5px; | ||||||
|  |   } | ||||||
|  |   .vm-contact-us div { | ||||||
|  |     padding: 0 15px; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @media(max-width: 767px) { | ||||||
|  |   .value-sm-block { | ||||||
|  |     display: block; | ||||||
|  |     padding-top: 2px; | ||||||
|  |   } | ||||||
|  |   .vm-contact-us div { | ||||||
|  |     margin-bottom: 30px; | ||||||
|  |   } | ||||||
|  |   .vm-contact-us div span { | ||||||
|  |     display: block; | ||||||
|  |     margin-bottom: 3px; | ||||||
|  |   } | ||||||
|  |   .dashboard-title-thin { | ||||||
|  |     font-size: 22px; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .btn-vm-invoice { | ||||||
|  |   color: #87B6EA; | ||||||
|  |   border: 2px solid #87B6EA; | ||||||
|  |   padding: 4px 18px; | ||||||
|  |   letter-spacing: 0.6px; | ||||||
|  | } | ||||||
|  | .btn-vm-invoice:hover, .btn-vm-invoice:focus { | ||||||
|  |   color : #fff; | ||||||
|  |   background: #87B6EA; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | .btn-vm-term { | ||||||
|  |   color: #aaa; | ||||||
|  |   border: 2px solid #ccc; | ||||||
|  |   background: #fff; | ||||||
|  |   padding: 4px 18px; | ||||||
|  |   letter-spacing: 0.6px; | ||||||
|  | } | ||||||
|  | .btn-vm-term:hover, .btn-vm-term:focus { | ||||||
|  |   color: #8396C4; | ||||||
|  |   border-color: #8396C4; | ||||||
|  | } | ||||||
|  | .btn-vm-term:active { | ||||||
|  |   color: #eb4d5c; | ||||||
|  |   border-color: #eb4d5c; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .btn-vm-contact { | ||||||
|  |   color: #fff; | ||||||
|  |   background: #A3C0E2; | ||||||
|  |   border: 2px solid #A3C0E2; | ||||||
|  |   padding: 5px 25px; | ||||||
|  |   font-size: 12px; | ||||||
|  |   letter-spacing: 1.3px; | ||||||
|  | } | ||||||
|  | .btn-vm-contact:hover, .btn-vm-contact:focus { | ||||||
|  |   background: #fff; | ||||||
|  |   color: #a3c0e2; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .btn-vm-back { | ||||||
|  |   color: #fff; | ||||||
|  |   background: #C4CEDA; | ||||||
|  |   border: 2px solid #C4CEDA; | ||||||
|  |   padding: 5px 25px; | ||||||
|  |   font-size: 12px; | ||||||
|  |   letter-spacing: 1.3px; | ||||||
|  | } | ||||||
|  | .btn-vm-back:hover, .btn-vm-back:focus { | ||||||
|  |   color: #fff; | ||||||
|  |   background: #8da4c0; | ||||||
|  |   border-color: #8da4c0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .vm-contact-us-text { | ||||||
|  |   letter-spacing: 0.4px; | ||||||
|  | } | ||||||
							
								
								
									
										61
									
								
								hosting/static/hosting/img/24-hours-support.svg
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										61
									
								
								hosting/static/hosting/img/24-hours-support.svg
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,61 @@ | ||||||
|  | <?xml version="1.0" encoding="iso-8859-1"?> | ||||||
|  | <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> | ||||||
|  | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | ||||||
|  | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||||||
|  | 	 viewBox="0 0 279.525 279.525" style="enable-background:new 0 0 279.525 279.525;" xml:space="preserve"> | ||||||
|  | <g> | ||||||
|  | 	<path d="M165.066,1.544c-29.272,0-56.007,11.05-76.268,29.191c4.494,7.146,7.047,15.46,7.287,24.042l0.001,0.025l0.001,0.025 | ||||||
|  | 		c0.102,3.867,0.333,7.735,0.664,11.597c15.368-21.117,40.258-34.88,68.315-34.88c46.571,0,84.459,37.888,84.459,84.459 | ||||||
|  | 		c0,46.08-37.098,83.634-82.994,84.422c4.191,3.502,8.518,6.84,12.976,9.974l0.02,0.015l0.021,0.014 | ||||||
|  | 		c6.07,4.282,11.014,9.896,14.483,16.317c49.133-12.861,85.493-57.633,85.493-110.742C279.525,52.89,228.18,1.544,165.066,1.544z"/> | ||||||
|  | 	<path d="M162.256,234.942c-13.076-10.438-21.234-17.389-32.909-28.204c-3.435-3.182-7.633-5.164-11.944-5.164 | ||||||
|  | 		c-3.299,0-6.557,1.051-9.239,3.252c-2.768,2.33-5.536,4.66-8.305,6.989c-22.499-26.738-39.206-57.895-49.027-91.431 | ||||||
|  | 		c3.472-1.016,6.945-2.033,10.417-3.049c7.652-2.343,11.252-10.512,10.129-18.701c-2.443-17.824-3.77-26.679-5.282-43.018 | ||||||
|  | 		c-0.775-8.375-6.349-15.65-14.338-16.085c-1.246-0.121-2.491-0.181-3.726-0.181c-29.71,0-55.578,34.436-46.009,76.564 | ||||||
|  | 		c11.907,52.172,37.684,100.243,74.551,139.031c15.102,15.856,33.603,23.036,50.312,23.036c17.627,0,33.261-7.984,40.833-22.195 | ||||||
|  | 		C171.778,248.891,168.83,240.19,162.256,234.942z"/> | ||||||
|  | 	<path d="M130.645,118.121c-7.912,7.341-13.089,13.113-15.823,17.643c-1.93,3.195-3.338,6.573-4.187,10.04 | ||||||
|  | 		c-0.399,1.632-0.032,3.326,1.007,4.649c1.038,1.321,2.596,2.079,4.276,2.079h37.758c4.626,0,8.39-3.764,8.39-8.39 | ||||||
|  | 		c0-4.626-3.764-8.39-8.39-8.39h-17.051c0.139-0.164,0.282-0.328,0.428-0.493c1.114-1.254,3.842-3.874,8.107-7.785 | ||||||
|  | 		c4.473-4.105,7.493-7.179,9.232-9.398c2.621-3.336,4.571-6.593,5.794-9.679c1.247-3.145,1.88-6.498,1.88-9.967 | ||||||
|  | 		c0-6.224-2.254-11.507-6.699-15.705c-4.416-4.164-10.495-6.274-18.071-6.274c-6.884,0-12.731,1.802-17.377,5.356 | ||||||
|  | 		c-2.803,2.146-4.961,5.119-6.415,8.839c-0.982,2.513-0.728,5.388,0.68,7.689c1.408,2.302,3.852,3.837,6.537,4.105 | ||||||
|  | 		c0.299,0.03,0.597,0.045,0.891,0.045c3.779,0,7.149-2.403,8.387-5.979c0.388-1.121,0.901-2.012,1.527-2.65 | ||||||
|  | 		c1.318-1.343,3.093-1.997,5.428-1.997c2.373,0,4.146,0.618,5.418,1.889c1.269,1.269,1.886,3.12,1.886,5.66 | ||||||
|  | 		c0,2.359-0.843,4.819-2.505,7.314C140.862,108.028,138.199,111.083,130.645,118.121z"/> | ||||||
|  | 	<path d="M206.235,76.451h-6.307c-1.797,0-3.475,0.886-4.489,2.37l-29.168,42.698c-0.851,1.246-1.301,2.703-1.301,4.212v6.919 | ||||||
|  | 		c0,2.997,2.439,5.436,5.436,5.436h23.945v5.787c0,4.775,3.885,8.66,8.66,8.66c4.775,0,8.66-3.885,8.66-8.66v-5.787h0.865 | ||||||
|  | 		c4.437,0,8.047-3.61,8.047-8.047c0-4.437-3.61-8.047-8.047-8.047h-0.865V81.887C211.671,78.89,209.232,76.451,206.235,76.451z | ||||||
|  | 		 M194.352,121.992h-10.748l10.748-15.978V121.992z"/> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 3 KiB | 
							
								
								
									
										1
									
								
								hosting/static/hosting/img/billing.svg
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										1
									
								
								hosting/static/hosting/img/billing.svg
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1 @@ | ||||||
|  | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="symbol symbol-billing" aria-labelledby="title" role="img"><title id="title">billing icon</title><g data-name="Layer 1"><path class="cls-1" d="M.37.023v15.954l2.775-1.387 2.775 1.387L8 14.59l2.775 1.387 2.081-1.387 2.775 1.387V.023zm13.873 13.709l-1.487-.744-2.081 1.387L7.9 12.989l-2.08 1.387-2.675-1.337-1.387.694V1.41h12.485z" role="presentation"/><path class="cls-1" d="M4.206 3.617h7.741v1.348H4.206zm0 2.697h7.741v1.349H4.206zm0 2.697h7.741v1.349H4.206z" role="presentation"/></g></svg> | ||||||
| After Width: | Height: | Size: 558 B | 
							
								
								
									
										45
									
								
								hosting/static/hosting/img/connected.svg
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										45
									
								
								hosting/static/hosting/img/connected.svg
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,45 @@ | ||||||
|  | <?xml version="1.0" encoding="iso-8859-1"?> | ||||||
|  | <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> | ||||||
|  | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | ||||||
|  | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||||||
|  | 	 viewBox="0 0 278.898 278.898" style="enable-background:new 0 0 278.898 278.898;" xml:space="preserve"> | ||||||
|  | <g> | ||||||
|  | 	<path d="M269.898,175.773h-20.373V64.751c0-4.971-4.029-9-9-9h-62.702V35.377c0-4.971-4.029-9-9-9h-58.748c-4.971,0-9,4.029-9,9 | ||||||
|  | 		v20.374H38.373c-4.971,0-9,4.029-9,9v111.022H9c-4.971,0-9,4.029-9,9v58.748c0,4.971,4.029,9,9,9h58.747c4.971,0,9-4.029,9-9 | ||||||
|  | 		v-58.748c0-4.971-4.029-9-9-9H47.373V73.751h53.702v20.374c0,4.971,4.029,9,9,9h20.374v72.648h-20.374c-4.971,0-9,4.029-9,9v58.748 | ||||||
|  | 		c0,4.971,4.029,9,9,9h58.748c4.971,0,9-4.029,9-9v-58.748c0-4.971-4.029-9-9-9h-20.374v-72.648h20.374c4.971,0,9-4.029,9-9V73.751 | ||||||
|  | 		h53.702v102.022h-20.374c-4.971,0-9,4.029-9,9v58.748c0,4.971,4.029,9,9,9h58.747c4.971,0,9-4.029,9-9v-58.748 | ||||||
|  | 		C278.898,179.803,274.869,175.773,269.898,175.773z M58.747,234.521H18v-40.748h40.747V234.521z M159.823,234.521h-40.748v-40.748 | ||||||
|  | 		h40.748V234.521z M159.823,85.125h-40.748V44.377h40.748V85.125z M260.898,234.521h-40.747v-40.748h40.747V234.521z"/> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 1.4 KiB | 
							
								
								
									
										7
									
								
								hosting/static/hosting/img/copy.svg
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										7
									
								
								hosting/static/hosting/img/copy.svg
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,7 @@ | ||||||
|  | <?xml version="1.0" encoding="utf-8"?> | ||||||
|  | <!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon --> | ||||||
|  | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | ||||||
|  | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> | ||||||
|  | <metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata> | ||||||
|  | <g><path d="M691,160.8V10H269.5C206.3,72.6,143.1,135.2,80,197.8v641.4h227.9V990H920V160.8H691z M269.5,64.4v134.4H133.1C178.5,154,224,109.2,269.5,64.4z M307.9,801.2H117.5V236.8h190.5V47.9h344.5v112.9h-154c-63.5,62.9-127,125.9-190.5,188.8V801.2z M499.5,215.2v134.5H363.1v-1c45.1-44.5,90.2-89,135.3-133.5L499.5,215.2z M881.5,952h-535V386.6H538V198.8h343.5V952z"/></g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 846 B | 
							
								
								
									
										53
									
								
								hosting/static/hosting/img/settings.svg
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										53
									
								
								hosting/static/hosting/img/settings.svg
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,53 @@ | ||||||
|  | <?xml version="1.0" encoding="iso-8859-1"?> | ||||||
|  | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> | ||||||
|  | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | ||||||
|  | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||||||
|  | 	 width="340.274px" height="340.274px" viewBox="0 0 340.274 340.274" style="enable-background:new 0 0 340.274 340.274;" | ||||||
|  | 	 xml:space="preserve"> | ||||||
|  | <g> | ||||||
|  | 	<g> | ||||||
|  | 		<g> | ||||||
|  | 			<path d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937 | ||||||
|  | 				c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765 | ||||||
|  | 				c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032 | ||||||
|  | 				c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127 | ||||||
|  | 				l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516 | ||||||
|  | 				l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74 | ||||||
|  | 				c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702 | ||||||
|  | 				c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474 | ||||||
|  | 				c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315 | ||||||
|  | 				C229.552,202.287,202.902,228.474,170.128,228.474z"/> | ||||||
|  | 		</g> | ||||||
|  | 	</g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | <g> | ||||||
|  | </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 1.7 KiB | 
|  | @ -3,6 +3,106 @@ | ||||||
| {% load i18n %} | {% load i18n %} | ||||||
| 
 | 
 | ||||||
| {% block content %} | {% block content %} | ||||||
|  | 	{% if messages %} | ||||||
|  | 	    <div class="alert alert-warning"> | ||||||
|  | 	        {% for message in messages %} | ||||||
|  | 	        <span>{{ message }}</span> | ||||||
|  | 	        {% endfor %} | ||||||
|  | 	    </div> | ||||||
|  | 	{% endif %} | ||||||
|  | 	<div class="virtual-machine-container dashboard-container"> | ||||||
|  |         <h1 class="dashboard-title-thin">{% trans "Your Virtual Machine Detail" %}</h1> | ||||||
|  | 		<div class="vm-detail-contain"> | ||||||
|  | 			<div class="vm-detail-item"> | ||||||
|  | 				<h2 class="vm-detail-title">{% trans "VM Settings" %} <img src="{% static 'hosting/img/settings.svg' %}" class="un-icon"></h2> | ||||||
|  | 				<h3 class="vm-name">{{virtual_machine.name}}</h3> | ||||||
|  | 				{% if virtual_machine.ipv6 %} | ||||||
|  | 					<div class="vm-detail-ip"> | ||||||
|  | 						<p> | ||||||
|  | 							<span>IPv4:</span> | ||||||
|  | 							<span class="value">{{virtual_machine.ipv4}}</span> | ||||||
|  | 							<img class="un-icon" src="{% static 'hosting/img/copy.svg' %}"> | ||||||
|  | 						</p> | ||||||
|  | 						<p> | ||||||
|  | 							<span>IPv6:</span> | ||||||
|  | 							<span class="value value-sm-block">{{virtual_machine.ipv6}}</span> | ||||||
|  | 							<img class="un-icon" src="{% static 'hosting/img/copy.svg' %}"> | ||||||
|  | 						</p> | ||||||
|  | 					</div> | ||||||
|  | 				{% endif %} | ||||||
|  | 				<div class="vm-detail-config"> | ||||||
|  | 					<p><span>{% trans "Cores" %}:</span><span class="value">{{virtual_machine.cores}}</span></p> | ||||||
|  | 					<p><span>{% trans "Memory" %}:</span><span class="value">{{virtual_machine.memory}} GB</span></p> | ||||||
|  | 					<p><span>{% trans "Disk" %}:</span><span class="value">{{virtual_machine.disk_size|floatformat:2}} GB</span></p> | ||||||
|  | 					<p><span>{% trans "Configuration" %}:</span><span class="value">{{virtual_machine.configuration}}</span></p> | ||||||
|  | 				</div> | ||||||
|  | 			</div> | ||||||
|  | 			<div class="vm-detail-item"> | ||||||
|  | 				<h2 class="vm-detail-title">{% trans "Billing" %} <img src="{% static 'hosting/img/billing.svg' %}" class="un-icon"></h2> | ||||||
|  | 				<div class="vm-vmid"> | ||||||
|  | 					<div class="vm-item-subtitle">{% trans "Current Pricing" %}</div> | ||||||
|  | 					<div class="vm-item-lg">{{virtual_machine.price|floatformat}} CHF/{% trans "Month" %}</div> | ||||||
|  | 					<a class="btn btn-vm-invoice" href="">{% trans "See Invoice" %}</a> | ||||||
|  | 				</div> | ||||||
|  | 			</div> | ||||||
|  | 			<div class="vm-detail-item"> | ||||||
|  | 				<h2 class="vm-detail-title">{% trans "Status" %} <img src="{% static 'hosting/img/connected.svg' %}" class="un-icon"></h2> | ||||||
|  | 				<div class="vm-vmid"> | ||||||
|  | 					<div class="vm-item-subtitle">{% trans "Your VM is" %}</div> | ||||||
|  | 					{% if virtual_machine.state == 'PENDING' %} | ||||||
|  | 						<div class="vm-item-lg vm-color-pending">{% trans "Pending" %}</div> | ||||||
|  | 					{% elif  virtual_machine.state == 'ACTIVE' %} | ||||||
|  | 						<div class="vm-item-lg vm-color-online">{% trans "Online" %}</div> | ||||||
|  | 					{% elif  virtual_machine.state == 'FAILED'%} | ||||||
|  | 						<div class="vm-item-lg vm-color-failed">{% trans "Failed" %}</div> | ||||||
|  | 					{% endif %} | ||||||
|  | 					{% if not virtual_machine.status == 'canceled' %} | ||||||
|  | 						<form method="POST" id="virtual_machine_cancel_form" class="cancel-form" action="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}"> | ||||||
|  | 							{% csrf_token %} | ||||||
|  | 						</form> | ||||||
|  | 						<button data-href="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}" data-toggle="modal" data-target="#confirm-cancel" class="btn btn-vm-term">{% trans "Terminate VM" %}</button> | ||||||
|  | 					{% endif %} | ||||||
|  | 				</div> | ||||||
|  | 			</div> | ||||||
|  | 		</div> | ||||||
|  | 		<div class="vm-contact-us"> | ||||||
|  | 			<div> | ||||||
|  | 				<h2 class="vm-detail-title">{% trans "Support / Contact" %} <img class="un-icon visible-xs" src="{% static 'hosting/img/24-hours-support.svg' %}"></h2> | ||||||
|  | 			</div> | ||||||
|  | 			<div class="vm-contact-us-text text-center"> | ||||||
|  | 				<img class="un-icon hidden-xs" src="{% static 'hosting/img/24-hours-support.svg' %}"> <span>{% trans "Something doesn't work?" %}</span> <span>{% trans "We are here to help you!" %}</span> | ||||||
|  | 			</div> | ||||||
|  | 			<div class="text-center"> | ||||||
|  | 				<a class="btn btn-vm-contact" href="">{% trans "CONTACT" %}</a> | ||||||
|  | 			</div> | ||||||
|  | 		</div> | ||||||
|  | 		<div class="text-center"> | ||||||
|  | 			<a class="btn btn-vm-back" href="">{% trans "BACK TO LIST" %}</a> | ||||||
|  | 		</div> | ||||||
|  | 	</div> | ||||||
|  | 	<!-- Cancel Modal --> | ||||||
|  | 	<div class="modal fade" id="confirm-cancel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | ||||||
|  | 	    <div class="modal-dialog"> | ||||||
|  | 	        <div class="modal-content"> | ||||||
|  | 				<div class="modal-header"> | ||||||
|  | 					<button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">×</span></button> | ||||||
|  | 				</div> | ||||||
|  | 	            <div class="modal-body"> | ||||||
|  | 					<div class="modal-icon"><i class="fa fa-ban" aria-hidden="true"></i></div> | ||||||
|  | 					<h4 class="modal-title" id="ModalLabel">{% trans "Terminate your Virtual Machine"%}</h4> | ||||||
|  | 					<div class="modal-text"> | ||||||
|  | 						<p>{% trans "Do you want to cancel your Virtual Machine" %} ?</p> | ||||||
|  | 						<p><strong>{{virtual_machine.name}}</strong></p> | ||||||
|  | 					</div> | ||||||
|  | 	            </div> | ||||||
|  | 	            <div class="modal-footer"> | ||||||
|  | 	                <a class="btn btn-danger btn-ok">{% trans "OK" %}</a> | ||||||
|  | 	            </div> | ||||||
|  | 	        </div> | ||||||
|  | 	    </div> | ||||||
|  | 	</div> | ||||||
|  | 	<!-- / Cancel Modal --> | ||||||
|  | {% comment %} | ||||||
| <div> | <div> | ||||||
| 	<div class="virtual-machine-container dashboard-container "> | 	<div class="virtual-machine-container dashboard-container "> | ||||||
| 		<div class="row"> | 		<div class="row"> | ||||||
|  | @ -191,5 +291,5 @@ | ||||||
| 	</div> | 	</div> | ||||||
| 
 | 
 | ||||||
| </div> | </div> | ||||||
| 
 | {% endcomment %} | ||||||
| {%endblock%} | {%endblock%} | ||||||
|  |  | ||||||
|  | @ -1,5 +1,7 @@ | ||||||
| from django.conf.urls import url | from django.conf.urls import url | ||||||
| from django.contrib.auth import views as auth_views | from django.contrib.auth import views as auth_views | ||||||
|  | # temp | ||||||
|  | from django.views.generic import TemplateView | ||||||
| 
 | 
 | ||||||
| from .views import DjangoHostingView, RailsHostingView, PaymentVMView,\ | from .views import DjangoHostingView, RailsHostingView, PaymentVMView,\ | ||||||
|     NodeJSHostingView, LoginView, SignupView, SignupValidateView, SignupValidatedView, IndexView, \ |     NodeJSHostingView, LoginView, SignupView, SignupValidateView, SignupValidatedView, IndexView, \ | ||||||
|  | @ -10,6 +12,7 @@ from .views import DjangoHostingView, RailsHostingView, PaymentVMView,\ | ||||||
|     SSHKeyDeleteView, SSHKeyCreateView, SSHKeyListView, SSHKeyChoiceView |     SSHKeyDeleteView, SSHKeyCreateView, SSHKeyListView, SSHKeyChoiceView | ||||||
| 
 | 
 | ||||||
| urlpatterns = [ | urlpatterns = [ | ||||||
|  |     # url(r'test/?$', TemplateView.as_view(template_name='hosting/virtual_machine_detail.html')), | ||||||
|     url(r'index/?$', IndexView.as_view(), name='index'), |     url(r'index/?$', IndexView.as_view(), name='index'), | ||||||
|     url(r'django/?$', DjangoHostingView.as_view(), name='djangohosting'), |     url(r'django/?$', DjangoHostingView.as_view(), name='djangohosting'), | ||||||
|     url(r'nodejs/?$', NodeJSHostingView.as_view(), name='nodejshosting'), |     url(r'nodejs/?$', NodeJSHostingView.as_view(), name='nodejshosting'), | ||||||
|  | @ -20,9 +23,12 @@ urlpatterns = [ | ||||||
|     url(r'orders/(?P<pk>\d+)/?$', OrdersHostingDetailView.as_view(), name='orders'), |     url(r'orders/(?P<pk>\d+)/?$', OrdersHostingDetailView.as_view(), name='orders'), | ||||||
|     url(r'bills/?$', HostingBillListView.as_view(), name='bills'), |     url(r'bills/?$', HostingBillListView.as_view(), name='bills'), | ||||||
|     url(r'bills/(?P<pk>\d+)/?$', HostingBillDetailView.as_view(), name='bills'), |     url(r'bills/(?P<pk>\d+)/?$', HostingBillDetailView.as_view(), name='bills'), | ||||||
|     url(r'cancel_order/(?P<pk>\d+)/?$', OrdersHostingDeleteView.as_view(), name='delete_order'), |     url(r'cancel_order/(?P<pk>\d+)/?$', | ||||||
|     url(r'create_virtual_machine/?$', CreateVirtualMachinesView.as_view(), name='create_virtual_machine'), |         OrdersHostingDeleteView.as_view(), name='delete_order'), | ||||||
|     url(r'my-virtual-machines/?$', VirtualMachinesPlanListView.as_view(), name='virtual_machines'), |     url(r'create_virtual_machine/?$', CreateVirtualMachinesView.as_view(), | ||||||
|  |         name='create_virtual_machine'), | ||||||
|  |     url(r'my-virtual-machines/?$', | ||||||
|  |         VirtualMachinesPlanListView.as_view(), name='virtual_machines'), | ||||||
|     url(r'my-virtual-machines/(?P<pk>\d+)/?$', VirtualMachineView.as_view(), |     url(r'my-virtual-machines/(?P<pk>\d+)/?$', VirtualMachineView.as_view(), | ||||||
|         name='virtual_machines'), |         name='virtual_machines'), | ||||||
|     url(r'ssh_keys/?$', SSHKeyListView.as_view(), |     url(r'ssh_keys/?$', SSHKeyListView.as_view(), | ||||||
|  | @ -44,5 +50,6 @@ urlpatterns = [ | ||||||
|         PasswordResetConfirmView.as_view(), name='reset_password_confirm'), |         PasswordResetConfirmView.as_view(), name='reset_password_confirm'), | ||||||
|     url(r'^logout/?$', auth_views.logout, |     url(r'^logout/?$', auth_views.logout, | ||||||
|         {'next_page': '/hosting/login?logged_out=true'}, name='logout'), |         {'next_page': '/hosting/login?logged_out=true'}, name='logout'), | ||||||
|     url(r'^validate/(?P<validate_slug>.*)/$', SignupValidatedView.as_view(), name='validate') |     url(r'^validate/(?P<validate_slug>.*)/$', | ||||||
|  |         SignupValidatedView.as_view(), name='validate') | ||||||
| ] | ] | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue