323 lines
12 KiB
HTML
323 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
{% load static %}
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
|
|
<meta charset="utf-8">
|
|
<title>CloudManager</title>
|
|
<meta name="description" content="Xlight Bootstrap Responsive HTML5/CSS3 Template">
|
|
<meta name="author" content="Andsolutions.it">
|
|
<meta name="description" content="">
|
|
<link href="{% static 'bootstrap.min.css' %}" rel="stylesheet">
|
|
<link href="{% static 'bootstrap-theme.min.css' %}" rel="stylesheet">
|
|
<link href="{% static 'animate.min.css' %}" rel="stylesheet" >
|
|
<link href="{% static 'font-awesome.min.css' %}" rel="stylesheet">
|
|
<link href="{% static 'prettyPhoto.css' %}" rel="stylesheet">
|
|
<link href="{% static 'theme.css' %}" rel="stylesheet">
|
|
<link href="{% static 'responsive.css' %}" rel="stylesheet">
|
|
<link href="{% static 'blue.css' %}" rel="stylesheet" class="colors">
|
|
|
|
|
|
|
|
<!-- Google Font -->
|
|
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
|
|
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
|
|
|
|
<!-- Favicons -->
|
|
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
|
|
<link rel="apple-touch-icon" href="{% static 'apple-touch-icon.png' %}">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="{% static 'apple-touch-icon-72.png' %}">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="{% static 'apple-touch-icon-114.png' %}">
|
|
<link rel="apple-touch-icon" sizes="144x144" href="{% static 'apple-touch-icon-144.png' %}">
|
|
|
|
</head>
|
|
|
|
<body data-spy="scroll" data-target="#mynav" data-offset="85">
|
|
|
|
<!-- Preloader -->
|
|
<div id="preloader">
|
|
<div id="status">
|
|
<div class="spinner">
|
|
<div class="rect1"></div>
|
|
<div class="rect2"></div>
|
|
<div class="rect3"></div>
|
|
<div class="rect4"></div>
|
|
<div class="rect5"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Preloader -->
|
|
|
|
<header>
|
|
|
|
<!-- Bootstrap Menu -->
|
|
<div id="navigation">
|
|
<div class="navbar-wrapper">
|
|
<nav class="navbar-inverse navbar-static-top" role="navigation">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#"></a>
|
|
</div>
|
|
<div id="mynav" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav main-nav-list">
|
|
<li><a href="#home">Home</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#team">Team</a></li>
|
|
<li><a href="#works">Works</a></li>
|
|
<li><a href="#pricing">Price</a></li>
|
|
<li><a href="#news">News</a></li>
|
|
<li><a href="#contacts">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!-- End Bootstrap Menu -->
|
|
|
|
<!-- Slider -->
|
|
<section id="home">
|
|
<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
|
|
<div class="carousel-inner">
|
|
<div class="item active" style="background-image: url({% static 'bg-1.jpg' %})"> <!-- Change Image -->
|
|
<div class="caption">
|
|
<h1 class="animated fadeInLeftBig">Welcome to <strong>CloudManager {{ variable }}</strong></h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- End Slider -->
|
|
|
|
</header>
|
|
|
|
<!-- About Xlight -->
|
|
<section class="section-wrapper" id="about">
|
|
<div class="about-us">
|
|
<div class="why-us">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- Block Title -->
|
|
<div class="section-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="300ms">
|
|
<h1><span>ABOUT XLIGHT</span></h1>
|
|
</div>
|
|
<div class="element-title wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">
|
|
<h1>Why Choose Us ?</h1>
|
|
<h3>We Are Crazy <span class="main-color">Web Agency</span> Who Thinks To Change The <span class="main-color">Future</span></h3>
|
|
</div>
|
|
<!-- End Block Title -->
|
|
<!-- About Us Icons -->
|
|
<div class="wrapper-why-us">
|
|
<div class="col-lg-4 col-sm-4 wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">
|
|
<i class="hovicon effect-1 sub-a"><b class="fa fa-flask"></b></i>
|
|
<h2>CREATIVE TEAM</h2>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-4 wow fadeInDown" data-wow-duration="1s" data-wow-delay="450ms">
|
|
<i class="hovicon effect-1 sub-a"><b class="fa fa-heart-o"></b></i>
|
|
<h2>MODERN DESIGN</h2>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-4 wow fadeInDown" data-wow-duration="1s" data-wow-delay="600ms">
|
|
<i class="hovicon effect-1 sub-a"><b class="fa fa-tablet"></b></i>
|
|
<h2>RESPONSIVE THEME</h2>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End About Us Icons -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End About Xlight -->
|
|
|
|
|
|
</section>
|
|
<!-- End About Section -->
|
|
|
|
<!-- Skills -->
|
|
<div class="skills parallax">
|
|
<div class="overlay">
|
|
<div class="wrapper-block-skills">
|
|
<!-- Block Title -->
|
|
<div class="element-title">
|
|
<div class="row">
|
|
<div class="container">
|
|
<h1 class="main-color wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">OUR CRAZY SKILLS</h1>
|
|
<h3 class="white-color wow fadeInUp" data-wow-duration="1s" data-wow-delay="300ms">Lorem Ipsum is simply dummy text of the printing and typesetting</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Block Title -->
|
|
<div class="row">
|
|
<div class="container">
|
|
<div class="wrapper-count">
|
|
<div class="col-lg-3 col-md-3">
|
|
<!-- SKILL ONE -->
|
|
<div class="skill wow fadeInRight" data-wow-duration="1s" data-wow-delay="300ms">
|
|
<input type="text" class="knob" value="86">
|
|
<h4>Web Design</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<!-- SKILL TWO -->
|
|
<div class="skill wow fadeInRight" data-wow-duration="1s" data-wow-delay="500ms">
|
|
<input type="text" class="knob" value="93">
|
|
<h4>Html5</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<!-- SKILL THREE -->
|
|
<div class="skill wow fadeInRight" data-wow-duration="1s" data-wow-delay="800ms">
|
|
<input type="text" class="knob" value="88">
|
|
<h4>JQuery</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<!-- SKILL Four -->
|
|
<div class="skill wow fadeInRight" data-wow-duration="1s" data-wow-delay="1100ms">
|
|
<input type="text" class="knob" value="95">
|
|
<h4>CSS3</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Skills -->
|
|
|
|
</section>
|
|
<!-- End Team Section -->
|
|
|
|
<!-- Price Section -->
|
|
<section class="section-wrapper" id="pricing">
|
|
<div class="pricing">
|
|
<!-- Block Title -->
|
|
<div class="element-title">
|
|
<div class="row">
|
|
<div class="container">
|
|
<div class="section-title wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">
|
|
<h1><span>OUR Pricing</span></h1>
|
|
</div>
|
|
<h1 class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="300ms">Our Price Plan</h1>
|
|
<h3 class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="300ms">Check Out <span class="main-color">Latest</span> Rates</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Block Title -->
|
|
<div class="row">
|
|
<div class="container">
|
|
<div class="wrapper-pricing">
|
|
{% block contentX %}
|
|
{% for server in list_servers_up %}
|
|
<!-- Plan 2 -->
|
|
<div class="col-lg-3 col-md-3">
|
|
<div class="single-table wow fadeInRight" data-wow-duration="1s" data-wow-delay="500ms">
|
|
<h4>{{ server.1 }}</h4>
|
|
<div class="price-icon">
|
|
<i class="fa fa-rocket"></i>
|
|
</div>
|
|
<span class="price">{{ server.2 }}</span>
|
|
<ul>
|
|
<li>Up to 5 Users</li>
|
|
<li>Max 50 items</li>
|
|
<li>Unlimited QueriesFull </li>
|
|
<li>Statistics</li>
|
|
<li>Great Support</li>
|
|
</ul>
|
|
<a class="btn-price" href="#">Get This Plan</a>
|
|
|
|
<!-- Triggers a POST request to '/run-my-module/' without reloading -->
|
|
<!-- When clicked, 'Run Module' changes to 'Done!' -->
|
|
<button hx-post="{% url 'run_my_action_url' %}"
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
|
Run Module
|
|
</button>
|
|
<script>
|
|
function vote(kind) {
|
|
$.getJSON("/vote/", { pk:{ { object.pk }}, vote: kind }, function(json){
|
|
alert("Was successful?: " + json['success']);
|
|
});
|
|
}
|
|
function addClickHandlers() {
|
|
$("#upvote").click( function() { vote("up") });
|
|
$("#downvote").click( function() { vote("down") });
|
|
}
|
|
$(document).ready(addClickHandlers);
|
|
</script>
|
|
|
|
<div id="resultarea"></div>
|
|
<div id="status-message"></div>
|
|
<select class="btn-price" name="cars" id="cars">
|
|
|
|
{% for schedule in list_schedule %}
|
|
<tr>
|
|
<option value="{{ schedule }}">{{ schedule }}</option>
|
|
</tr>
|
|
{% endfor %}
|
|
</select>
|
|
<label for="schedule-{{ forloop.counter }}" style="display:block; font-size: 12px; margin-bottom: 5px;">Select Schedule:</label>
|
|
|
|
<select class="form-control" name="schedule_id" id="schedule-{{ forloop.counter }}">
|
|
{% for schedule in list_schedule %}
|
|
<option value="{{ schedule.id }}">{{ schedule.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button class="btn-price" style="margin-top: 10px; width: 100%;"
|
|
hx-post="{% url 'change_schedule' %}"
|
|
hx-include="#schedule-{{ forloop.counter }}"
|
|
hx-vals='{"server_name": "{{ server.1 }}"}'
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-target="#status-{{ forloop.counter }}"
|
|
hx-swap="innerHTML">
|
|
Update Schedule
|
|
</button>
|
|
</div>
|
|
<div id="status-{{ forloop.counter }}" style="margin-top: 10px; font-size: 13px; font-weight: bold;"></div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endblock %}
|
|
<!-- Plan 2 -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Scroll to Top -->
|
|
<a href="#" class="scroll-up"><i class="fa fa-arrow-up"></i></a>
|
|
<!-- End Scroll To Top -->
|
|
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
|
|
<script src="{% static 'jquery.min.js' %}"></script>
|
|
<script src="{% static 'bootstrap.min.js' %}"></script>
|
|
<script src="{% static 'retina.min.js' %}"></script>
|
|
<script src="{% static 'jquery.easing.min.js' %}"></script>
|
|
<script src="{% static 'wow.min.js' %}"></script>
|
|
<script src="{% static 'waypoints.min.js' %}"></script>
|
|
<script src="{% static 'jquery.countTo.js' %}"></script>
|
|
<script src="{% static 'jquery.mixitup.min.js' %}"></script>
|
|
<script src="{% static 'jquery.prettyPhoto.js' %}"></script>
|
|
<script src="{% static 'jquery.knob.min.js' %}"></script>
|
|
<script src="{% static 'jquery.validate.min.js' %}"></script>
|
|
<script src="{% static 'custom.js' %}"></script>
|
|
|
|
|
|
</body>
|
|
</html>
|