Added website.
7184
website/css/skin-app-landing.css
Normal file
299
website/css/style.css
Normal file
|
@ -0,0 +1,299 @@
|
|||
html, body, .body {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.custom-font-size-1 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-font-size-1 {
|
||||
font-size: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#header .header-nav-main nav > ul > li > a {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-stroke-text-effect-1 {
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke-width: 1px;
|
||||
-webkit-text-stroke-color: #777;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.custom-carousel-1 {
|
||||
position: relative;
|
||||
background: url(../../img/demos/app-landing/backgrounds/bg-smartphone.png);
|
||||
width: 344px;
|
||||
height: 636px;
|
||||
}
|
||||
|
||||
.custom-carousel-1 .owl-carousel {
|
||||
padding: 72px 0 0 3px;
|
||||
}
|
||||
|
||||
.custom-carousel-1 .owl-carousel .owl-nav button.owl-next:before {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
|
||||
.custom-carousel-1 .owl-carousel .owl-nav button.owl-prev {
|
||||
left: -12px;
|
||||
}
|
||||
|
||||
.custom-carousel-1 .owl-carousel .owl-nav button.owl-prev:before {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
|
||||
.custom-call-to-action {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
border-radius: 70px;
|
||||
}
|
||||
|
||||
.custom-feature-box-1 .feature-box-icon {
|
||||
width: 4.5em;
|
||||
height: 4.5em;
|
||||
}
|
||||
|
||||
.custom-feature-box-1 .feature-box-icon:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-img-1 {
|
||||
position: absolute;
|
||||
top: -35%;
|
||||
right: -25px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-svg-1 {
|
||||
position: absolute;
|
||||
right: -200%;
|
||||
top: -60%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-svg-1 {
|
||||
right: -78%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.custom-svg-1 {
|
||||
right: -45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.custom-svg-1 {
|
||||
right: -35%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
.custom-svg-1 {
|
||||
right: -21%;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-svg-2 {
|
||||
position: absolute;
|
||||
left: -120%;
|
||||
top: -207%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-svg-2 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.custom-svg-2 {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.custom-svg-2 {
|
||||
left: -75%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
.custom-svg-2 {
|
||||
left: -55%;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-svg-3 {
|
||||
position: absolute;
|
||||
right: -120%;
|
||||
top: 12%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-svg-3 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.custom-svg-3 {
|
||||
right: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.custom-svg-3 {
|
||||
right: -75%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
.custom-svg-3 {
|
||||
right: -55%;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-svg-4 {
|
||||
position: absolute;
|
||||
left: -120%;
|
||||
top: 0%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-svg-4 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.custom-svg-4 {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.custom-svg-4 {
|
||||
left: -75%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
.custom-svg-4 {
|
||||
left: -55%;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-el {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-el {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-el-circle {
|
||||
border: 2px solid #CCC;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.custom-el-rounded-rectangle {
|
||||
border: 2px solid #CCC;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-el-blur-1 {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.custom-el-blur-2 {
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.custom-rotate-45 {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-steps-icons {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-steps-icons .custom-steps-icon {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.custom-steps-icons .custom-steps-icon .animated-icon {
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 14px;
|
||||
border-radius: 50%;
|
||||
max-width: 105px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.custom-steps-icons .custom-steps-icon h4 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.5px;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-steps-icons .custom-steps-icon h4 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-steps-icons .custom-steps-connect {
|
||||
position: relative;
|
||||
min-width: 115px;
|
||||
}
|
||||
|
||||
.custom-steps-icons .custom-steps-connect-dots {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 5px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-steps-icons .custom-steps-connect-dots {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-steps-icons .custom-steps-connect-point {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 98px;
|
||||
margin-top: 15px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.custom-steps-icons .custom-steps-connect-point {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
372
website/css/theme-blog.css
Normal file
|
@ -0,0 +1,372 @@
|
|||
/*
|
||||
Name: theme-blog.css
|
||||
Written by: Okler Themes - (http://www.okler.net)
|
||||
Theme Version: 9.9.3
|
||||
*/
|
||||
/* Posts */
|
||||
.blog-posts:not(.blog-posts-no-margins) article {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 50px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.blog-posts:not(.blog-posts-no-margins) .pagination {
|
||||
margin: -10px 0 20px;
|
||||
}
|
||||
|
||||
.blog-posts.blog-posts-no-margins .pagination {
|
||||
margin-top: 28.8px;
|
||||
margin-top: 1.8rem;
|
||||
}
|
||||
|
||||
/* Post */
|
||||
article.post h2 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article.post .post-meta {
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
article.post .post-meta > span {
|
||||
display: inline-block;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
article.post .post-meta i {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
article.post .post-date {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article.post .post-date .month {
|
||||
display: block;
|
||||
background: #CCC;
|
||||
border-radius: 0 0 2px 2px;
|
||||
color: #FFF;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.8;
|
||||
padding: 1px 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
article.post .post-date .day {
|
||||
background: #f7f7f7;
|
||||
border-radius: 2px 2px 0 0;
|
||||
color: #CCC;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
article.post .post-image .owl-carousel {
|
||||
width: 100.1%;
|
||||
}
|
||||
|
||||
article .post-video {
|
||||
transition: all 0.2s ease-in-out;
|
||||
padding: 0;
|
||||
background-color: #FFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
height: auto;
|
||||
position: relative;
|
||||
margin: 0 0 30px 0;
|
||||
padding-bottom: 61%;
|
||||
}
|
||||
|
||||
article .post-video iframe {
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
article .post-audio {
|
||||
transition: all 0.2s ease-in-out;
|
||||
padding: 0;
|
||||
background-color: #FFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
height: auto;
|
||||
position: relative;
|
||||
margin: 0 0 30px 0;
|
||||
padding-bottom: 35%;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
article .post-audio iframe {
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
article.post-medium .post-image .owl-carousel {
|
||||
width: 100.2%;
|
||||
}
|
||||
|
||||
article.post-large {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
article.post-large h2 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
article.post-large .post-image, article.post-large .post-date {
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
article.post-large .post-image {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
article.post-large .post-image.single {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
article.post-large .post-video {
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
article.post-large .post-audio {
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
/* Single Post */
|
||||
.single-post article {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
article.blog-single-post .post-meta {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Post Block */
|
||||
.post-block h3 {
|
||||
font-size: 1.8em;
|
||||
font-weight: 200;
|
||||
margin: 0 0 20px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.post-block h3 i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
/* Post Author */
|
||||
.post-author img {
|
||||
max-height: 80px;
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
.post-author p {
|
||||
font-size: 0.9em;
|
||||
line-height: 22px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-author p .name {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.post-author .img-thumbnail {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/* Post Comments */
|
||||
ul.comments {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.comments li {
|
||||
clear: both;
|
||||
padding: 10px 0 0 70px;
|
||||
}
|
||||
|
||||
ul.comments li img.avatar {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
ul.comments li ul.reply {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.comments li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.comments li .img-thumbnail {
|
||||
margin-left: -70px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
ul.comments li .comment {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ul.comments .comment-arrow {
|
||||
border-bottom: 12px solid transparent;
|
||||
border-right: 12px solid #f7f7f7;
|
||||
border-top: 12px solid transparent;
|
||||
height: 0;
|
||||
left: -12px;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
ul.comments .comment-block {
|
||||
background: #f7f7f7;
|
||||
border-radius: 5px;
|
||||
padding: 20px 20px 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.comments .comment-block p {
|
||||
font-size: 0.9em;
|
||||
line-height: 21px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.comments .comment-block .comment-by {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
line-height: 21px;
|
||||
margin: 0;
|
||||
padding: 0 0 5px 0;
|
||||
}
|
||||
|
||||
ul.comments .comment-block .date {
|
||||
color: #999;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Leave a Comment */
|
||||
.post-leave-comment h3 {
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
|
||||
/* Recent Posts */
|
||||
.recent-posts h4 {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.recent-posts article.recent-post h4 {
|
||||
margin: 0 0 3px 0;
|
||||
}
|
||||
|
||||
.recent-posts article.recent-post h4 a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.recent-posts .date {
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.recent-posts .date .month {
|
||||
background: #CCC;
|
||||
color: #FFF;
|
||||
font-size: 0.9em;
|
||||
padding: 3px 10px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.recent-posts .date .day {
|
||||
background: #F7F7F7;
|
||||
color: #CCC;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
section.section .recent-posts .date .day {
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
/* Simple Post List */
|
||||
ul.simple-post-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.simple-post-list li {
|
||||
border-bottom: 1px dotted #E2E2E2;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
ul.simple-post-list li::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.simple-post-list li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
ul.simple-post-list .post-image {
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
ul.simple-post-list .post-meta {
|
||||
color: #888;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
ul.simple-post-list .post-info {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
ul.comments li {
|
||||
border-left: 8px solid rgba(0, 0, 0, 0.06);
|
||||
clear: both;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
ul.comments li .img-thumbnail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.comments .comment-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
19060
website/css/theme-elements.css
Normal file
873
website/css/theme-shop.css
Normal file
|
@ -0,0 +1,873 @@
|
|||
/*
|
||||
Name: theme-shop.css
|
||||
Written by: Okler Themes - (http://www.okler.net)
|
||||
Theme Version: 9.9.3
|
||||
*/
|
||||
/* Custom Font - Stars (From WooCommerce) */
|
||||
@font-face {
|
||||
font-family: 'star';
|
||||
src: url("fonts/star.eot");
|
||||
src: url("fonts/star.eot?#iefix") format("embedded-opentype"), url("fonts/star.woff") format("woff"), url("fonts/star.ttf") format("truetype"), url("fonts/star.svg#star") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Shop - Base */
|
||||
.shop .products:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.shop .products .product {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.shop .products .product a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.shop .products .product .quick-view {
|
||||
transition: ease transform 300ms, ease background 300ms;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 12px 10px;
|
||||
font-size: 1em;
|
||||
color: #FFF;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
.shop .products .product .quick-view [class*="fa-"], .shop .products .product .quick-view .icons {
|
||||
margin-right: 3px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.shop .products .product:hover .quick-view {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.shop .products .product:hover .quick-view:hover {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.shop .products .product .onsale {
|
||||
position: absolute;
|
||||
background-image: none;
|
||||
border-radius: 100%;
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: -15px;
|
||||
text-shadow: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
box-shadow: none;
|
||||
font-size: 0.9em;
|
||||
color: #FFF;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
/* Quick View Popup Fix (When Close) */
|
||||
html.lightbox-beforeclose .quick-view {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.masonry-loader-showing .products {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Product Info */
|
||||
.product-info {
|
||||
transition: all 0.2s;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border: 1px solid #DDD;
|
||||
background: #F7F9FC;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product-info:hover {
|
||||
background-color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product-info a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-info a:hover {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-info img {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.product-info h4 {
|
||||
color: #404751;
|
||||
letter-spacing: -1px;
|
||||
font-weight: 600;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.product-info + .product-info {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.product-info .product-info-image {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-info .product-info-image:before {
|
||||
transition: all 0.2s;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #333;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product-info:hover .product-info-image:before {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.product-info .product-info-act {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.product-info .product-info-act em {
|
||||
font-style: normal;
|
||||
position: relative;
|
||||
font-size: 1.2em;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.product-info .product-info-act-left, .product-info .product-info-act-right {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-info .product-info-act-left {
|
||||
text-align: right;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.product-info .product-info-act-left em {
|
||||
transition: all 0.2s ease 0s;
|
||||
left: 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product-info .product-info-act-right {
|
||||
text-align: left;
|
||||
margin-left: 2%;
|
||||
width: 53%;
|
||||
}
|
||||
|
||||
.product-info .product-info-act-right em {
|
||||
transition: all 0.2s ease 0s;
|
||||
right: 0%;
|
||||
font-weight: 600;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product-info:hover .product-info-act-left em {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-info:hover .product-info-act-right em {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-info .product-info-content {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-info .product-info-caption {
|
||||
padding: 0 15px 15px;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-info .product-info-caption p {
|
||||
margin: 0;
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
|
||||
.product-info .product-info-extra {
|
||||
clear: both;
|
||||
padding: 10px 0 0;
|
||||
margin: 10px 0 0;
|
||||
border-top: 1px solid #EBEBF4;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-info .product-info-extra.social {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-info .product-info-extra.social a {
|
||||
border-right: 1px solid #EBEBF4;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
font-size: 0.9em;
|
||||
color: #ACACAC;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.product-info .product-info-extra.social a:last-child {
|
||||
border-right: 0;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.product-info .date {
|
||||
color: #9AA1AB;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.product-info.secondary .product-info-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-info.secondary .product-info-content h4 {
|
||||
transition: all 0.2s;
|
||||
color: #FFF;
|
||||
position: relative;
|
||||
top: -25%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product-info.secondary .product-info-content .date {
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
top: 25%;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product-info.secondary .product-info-act {
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.product-info.secondary .label {
|
||||
transition: all 0.2s;
|
||||
clear: both;
|
||||
display: inline-block;
|
||||
margin-top: 15px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product-info.secondary:hover .label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-info.secondary:hover .product-info-content h4 {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-info.secondary:hover .product-info-content .date {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Rating */
|
||||
.shop .review-num {
|
||||
margin-left: 7px;
|
||||
float: left;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.shop .summary .price {
|
||||
color: #444;
|
||||
font-size: 2em;
|
||||
letter-spacing: -1px;
|
||||
line-height: 30px;
|
||||
margin-top: 10px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.shop .quantity {
|
||||
margin: 0 15px 25px 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 125px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.shop .quantity .minus {
|
||||
background: transparent;
|
||||
border: 1px solid #F0F0F0;
|
||||
border-radius: 2px;
|
||||
box-shadow: none;
|
||||
color: #5E5E5E;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
line-height: 13px;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: text-top;
|
||||
width: 40px;
|
||||
border-radius: 0.25rem 0 0 0.25rem;
|
||||
}
|
||||
|
||||
.shop .quantity .plus {
|
||||
background: transparent;
|
||||
border: 1px solid #F0F0F0;
|
||||
border-radius: 2px;
|
||||
box-shadow: none;
|
||||
color: #5E5E5E;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
line-height: 13px;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: text-top;
|
||||
width: 40px;
|
||||
border-radius: 0 0.25rem 0.25rem 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.shop .quantity .qty {
|
||||
border: 1px solid #F0F0F0;
|
||||
box-shadow: none;
|
||||
float: left;
|
||||
height: 40px;
|
||||
padding: 0 39px;
|
||||
text-align: center;
|
||||
width: 125px;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
outline: 0;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.shop .quantity .qty::-webkit-inner-spin-button, .shop .quantity .qty::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.shop .quantity .qty::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shop .quantity.quantity-lg {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.shop .quantity.quantity-lg .minus {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.shop .quantity.quantity-lg .plus {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.shop .quantity.quantity-lg .qty {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.shop .product-meta {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.shop .tabs-product {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.shop ul.comments .comment-arrow {
|
||||
border-right-color: #F5F7F7;
|
||||
}
|
||||
|
||||
.shop ul.comments .comment-block {
|
||||
background: #F5F7F7;
|
||||
}
|
||||
|
||||
.shop ul.simple-post-list li {
|
||||
border: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Product Thumb Info */
|
||||
.product .product-thumb-info {
|
||||
transition: all 0.2s;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border: 0;
|
||||
border-bottom: 3px solid #E3E4E8;
|
||||
background: #F7F9FC;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
border: 1px solid #DDD;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product .product-thumb-info a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product .product-thumb-info img {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.product .product-thumb-info h4 {
|
||||
color: #404751;
|
||||
letter-spacing: -1px;
|
||||
font-weight: 600;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.product .product-thumb-info + .product-thumb-info {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-touch-hover {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.product .product-thumb-info.hover .product-thumb-info-touch-hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-image {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-image:before {
|
||||
transition: all 0.2s;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #212121;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-act {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-act em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-content {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-caption {
|
||||
padding: 0 15px 15px;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-caption p {
|
||||
margin: 0;
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-extra {
|
||||
clear: both;
|
||||
padding: 10px 0 0;
|
||||
margin: 10px 0 0;
|
||||
border-top: 1px solid #EBEBF4;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-extra.social a:last-child {
|
||||
border-right: 0;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-badges-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-badges-wrapper .badge + .badge {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .addtocart-btn-wrapper {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .addtocart-btn-wrapper .addtocart-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #212121;
|
||||
background: #FFF;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
box-shadow: 0px 0px 12px -4px rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, 5px, 0);
|
||||
transition: ease transform 300ms, ease opacity 300ms;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .addtocart-btn-wrapper .addtocart-btn:hover {
|
||||
color: #FFF;
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-image-effect > img:nth-child(1) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: ease opacity 300ms;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .product-thumb-info-image-effect > img:nth-child(2) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.product .product-thumb-info .countdown-offer-wrapper {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
padding: 8px 0;
|
||||
background: #0184c2;
|
||||
z-index: 3;
|
||||
transition: ease opacity 300ms;
|
||||
}
|
||||
|
||||
.product:hover .product-thumb-info {
|
||||
background-color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product:hover .product-thumb-info .product-thumb-info-image:before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.product:hover .product-thumb-info .product-thumb-info-act {
|
||||
opacity: 1;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.product:hover .product-thumb-info .addtocart-btn-wrapper .addtocart-btn {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: ease transform 300ms, ease opacity 300ms;
|
||||
}
|
||||
|
||||
.product:hover .product-thumb-info .addtocart-btn-wrapper .addtocart-btn:before {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
right: calc( 100% + 10px);
|
||||
top: 50%;
|
||||
font-size: 11.2px;
|
||||
font-size: 0.7rem;
|
||||
background: #212121;
|
||||
color: #FFF;
|
||||
padding: 4px 8px;
|
||||
padding: .25rem .5rem;
|
||||
border-radius: 3px;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
transition: ease opacity 300ms;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.product:hover .product-thumb-info .addtocart-btn-wrapper .addtocart-btn:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #212121;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc( 100% + 5px);
|
||||
transform: translate3d(0, -50%, 0);
|
||||
transition: ease opacity 300ms;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.product:hover .product-thumb-info .addtocart-btn-wrapper .addtocart-btn:hover:before, .product:hover .product-thumb-info .addtocart-btn-wrapper .addtocart-btn:hover:after {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.product:hover .product-thumb-info .product-thumb-info-image-effect > img:nth-child(1) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product:hover .product-thumb-info .countdown-offer-wrapper {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Product Thumb Info - Full Width */
|
||||
.full-width .product-thumb-info .product-thumb-info-image:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Products Navigation */
|
||||
.products-navigation .next, .products-navigation .prev {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
border: 1px solid #CCC;
|
||||
font-size: 11.2px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.products-navigation .prev {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Price */
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.price del {
|
||||
color: rgba(145, 145, 145, 0.5);
|
||||
font-size: 0.7em;
|
||||
margin: -2px 0 0;
|
||||
}
|
||||
|
||||
.price ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.price .sale {
|
||||
order: 2;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price .sale + .amount {
|
||||
font-size: 0.7em;
|
||||
font-weight: 500;
|
||||
margin-right: 4px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.price .amount {
|
||||
order: 1;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Shop Finish Buy Steps Nav */
|
||||
/* Shop Table */
|
||||
.shop_table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.shop_table th {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.shop_table td {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
padding: 17px 10px;
|
||||
}
|
||||
|
||||
.shop_table .product-thumbnail .product-thumbnail-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shop_table .product-thumbnail .product-thumbnail-wrapper .product-thumbnail-remove {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11.2px;
|
||||
font-size: 0.7rem;
|
||||
color: #212121;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #FFF;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0px 0px 19px -6px rgba(0, 0, 0, 0.5);
|
||||
text-decoration: none;
|
||||
transition: ease background 300ms;
|
||||
}
|
||||
|
||||
.shop_table .product-thumbnail .product-thumbnail-wrapper .product-thumbnail-remove:hover {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.shop_table .product-name {
|
||||
padding-left: 22.4px;
|
||||
padding-left: 1.4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.shop .actions-continue {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.shop table.cart .product-thumbnail {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.shop table.cart .product-name {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
#header nav.mega-menu .mega-menu-shop a {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#header nav.mega-menu .mega-menu-shop a .fa-caret-down {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#header nav.mega-menu .mega-menu-shop > ul.dropdown-menu {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.shop table.cart .product-name {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.shop_table .product-thumbnail .product-thumbnail-wrapper .product-thumbnail-remove {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.shop_table .product-thumbnail .product-thumbnail-wrapper .product-thumbnail-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shop_table .product-name {
|
||||
padding-left: 0.7rem;
|
||||
}
|
||||
}
|
11588
website/css/theme.css
Normal file
BIN
website/favicon.png
Normal file
After Width: | Height: | Size: 2.6 KiB |
BIN
website/images/fcast.png
Normal file
After Width: | Height: | Size: 25 KiB |
1
website/images/icon-cloud.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><svg fill="none" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><polyline points="8 17 12 21 16 17"/><line x1="12" x2="12" y1="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"/></svg>
|
After Width: | Height: | Size: 340 B |
1
website/images/icon-gitlab.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><defs><style>.cls-1{fill:#171321;}</style></defs><g id="LOGO"><path class="cls-1" d="M282.83,170.73l-.27-.69-26.14-68.22a6.81,6.81,0,0,0-2.69-3.24,7,7,0,0,0-8,.43,7,7,0,0,0-2.32,3.52l-17.65,54H154.29l-17.65-54A6.86,6.86,0,0,0,134.32,99a7,7,0,0,0-8-.43,6.87,6.87,0,0,0-2.69,3.24L97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82,19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91,40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/></g></svg>
|
After Width: | Height: | Size: 533 B |
1
website/images/icon-google-play.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="Google Play" id="Google_Play"><path d="M10.09,8a1.94,1.94,0,0,1,1.28.28l13,7.39L21.08,19Zm-1,1A2.31,2.31,0,0,0,9,9.67V30.33a2.31,2.31,0,0,0,.09.67l11-11Zm12,12-11,11a1.88,1.88,0,0,0,1.28-.28l13-7.39Zm8.52-2.34-3.94-2.24L22.07,20l3.59,3.59,3.94-2.24C30.9,20.61,30.9,19.39,29.6,18.65Z"/></g></svg>
|
After Width: | Height: | Size: 399 B |
BIN
website/images/logo.png
Normal file
After Width: | Height: | Size: 2.6 KiB |
7
website/images/shape-1.svg
Normal file
|
@ -0,0 +1,7 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="1290px" height="1290px">
|
||||
<path fill-rule="evenodd" fill="rgb(245, 243, 251)"
|
||||
d="M751.271,43.996 L1246.077,539.139 C1304.636,597.738 1304.603,692.712 1246.004,751.271 L750.861,1246.076 C692.262,1304.635 597.287,1304.603 538.729,1246.004 L43.923,750.860 C-14.636,692.262 -14.603,597.287 43.995,538.728 L539.139,43.923 C597.738,-14.635 692.713,-14.603 751.271,43.996 Z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 476 B |
BIN
website/images/tv.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
website/images/whatis.png
Normal file
After Width: | Height: | Size: 63 KiB |
465
website/index.html
Normal file
|
@ -0,0 +1,465 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- Basic -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>FCast</title>
|
||||
|
||||
<meta name="keywords" content="WebSite Template" />
|
||||
<meta name="description" content="Porto - Multipurpose Website Template">
|
||||
<meta name="author" content="okler.net">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
|
||||
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
|
||||
|
||||
<!-- Mobile Metas -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
|
||||
|
||||
<!-- Web Fonts -->
|
||||
<link id="googleFonts" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800%7CShadows+Into+Light&display=swap" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Vendor CSS -->
|
||||
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css">
|
||||
<link rel="stylesheet" href="vendor/animate/animate.compat.css">
|
||||
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.min.css">
|
||||
|
||||
<!-- Theme CSS -->
|
||||
<link rel="stylesheet" href="css/theme.css">
|
||||
<link rel="stylesheet" href="css/theme-elements.css">
|
||||
<link rel="stylesheet" href="css/theme-blog.css">
|
||||
<link rel="stylesheet" href="css/theme-shop.css">
|
||||
|
||||
<!-- Revolution Slider CSS -->
|
||||
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css">
|
||||
<link rel="stylesheet" href="vendor/rs-plugin/css/layers.css">
|
||||
<link rel="stylesheet" href="vendor/rs-plugin/css/navigation.css">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<!-- Skin CSS -->
|
||||
<link id="skinCSS" rel="stylesheet" href="css/skin-app-landing.css">
|
||||
|
||||
<!-- Head Libs -->
|
||||
<script src="vendor/modernizr/modernizr.min.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body data-plugin-scroll-spy data-plugin-options="{'target': '#header'}">
|
||||
|
||||
<div class="body">
|
||||
|
||||
<div class="custom-svg-1">
|
||||
<img width="1290" height="1290" src="images/shape-1.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': ''}" />
|
||||
</div>
|
||||
|
||||
<div class="opacity-2"><div class="custom-el custom-el-circle border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0" data-appear-animation-duration="3s" style="top: 20%; left: 50%; width: 38px; height: 38px;"></div></div>
|
||||
|
||||
<div class="opacity-2"><div class="custom-el custom-el-circle border-color-secondary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200" data-appear-animation-duration="3s" style="top: 27%; left: 55%; width: 15px; height: 15px;"></div></div>
|
||||
|
||||
<div class="opacity-2"><div class="custom-el custom-el-circle border-color-secondary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="400" data-appear-animation-duration="3s" style="top: 54%; left: 50%; width: 15px; height: 15px;"></div></div>
|
||||
|
||||
<div class="opacity-2"><div class="custom-el custom-el-circle custom-el-blur-1 border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300" data-appear-animation-duration="3s" style="top: 70%; left: 47%; width: 48px; height: 48px;"></div></div>
|
||||
|
||||
<div class="opacity-2"><div class="custom-el custom-el-rounded-rectangle custom-rotate-45 custom-el-blur-2 border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="700" data-appear-animation-duration="3s" style="top: 60%; left: 42%; width: 27px; height: 27px;"></div></div>
|
||||
|
||||
<div class="opacity-2"><div class="custom-el custom-el-rounded-rectangle custom-rotate-45 custom-el-blur-1 border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="800" data-appear-animation-duration="3s" style="top: 64%; left: 56%; width: 18px; height: 18px;"></div></div>
|
||||
|
||||
<div class="opacity-2"><div class="custom-el custom-el-circle border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="500" data-appear-animation-duration="3s" style="top: 75%; left: 96%; width: 38px; height: 38px;"></div></div>
|
||||
|
||||
<header id="header" class="header-transparent header-transparent-light-bottom-border header-transparent-light-bottom-border-1 header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
|
||||
<div class="header-body border-top-0 header-body-bottom-border">
|
||||
<div class="header-container container">
|
||||
<div class="header-row">
|
||||
<div class="header-column">
|
||||
<div class="header-row">
|
||||
<div class="header-logo">
|
||||
<a href="index.html">
|
||||
<img src="images/logo.png" class="img-fluid" width="123" height="32" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-column justify-content-end">
|
||||
<div class="header-row">
|
||||
<div class="header-nav header-nav-links">
|
||||
<div class="header-nav-main header-nav-main-text-capitalize header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1">
|
||||
<nav class="collapse">
|
||||
<ul class="nav nav-pills" id="mainNav">
|
||||
<li><a href="#overview" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">Overview</a></li>
|
||||
<li><a href="#what-is-fcast" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">What is FCast?</a></li>
|
||||
<li><a href="#how-do-i-use" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">How do I use FCast?</a></li>
|
||||
<li><a href="#key-features" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">Key Features</a></li>
|
||||
<li><a href="#faq" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">FAQ</a></li>
|
||||
<li><a href="#downloads" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">Downloads</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div role="main" class="main">
|
||||
|
||||
<section id="overview" class="section bg-transparent border-0 py-5 m-0 p-relative">
|
||||
|
||||
<div class="container pt-lg-5">
|
||||
<div class="row pt-lg-5">
|
||||
<div class="col-lg-4 text-center text-lg-start pt-5 mt-5">
|
||||
<h2 class="text-color-primary positive-ls-3 mt-lg-5 pt-lg-5 font-weight-bold text-uppercase text-4 line-height-3 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">Cast media to your TV</h2>
|
||||
|
||||
<h1 class="custom-font-size-1 text-color-dark font-weight-bold py-3 mb-1 p-relative appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-plugin-options="{'minWindowWidth': 0}"><span class="p-relative z-index-1">FCast</span></h1>
|
||||
|
||||
<p class="text-4-5 font-weight-medium mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">Casting made open source</p>
|
||||
</div>
|
||||
<div class="col-lg-8 pt-5 pt-lg-0 text-center">
|
||||
<img src="images/tv.png" style="width: 100%;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="call-to-action custom-call-to-action call-to-action-dark mb-5">
|
||||
<div class="container">
|
||||
<div class="row p-3 p-md-0">
|
||||
<div class="col-lg-8">
|
||||
<div class="call-to-action-content mx-auto m-lg-0">
|
||||
<h3 class="mb-1 font-weight-semi-bold">Available for <strong class="font-weight-bold">Linux, MacOS, Window and Android.</strong></h3>
|
||||
<p class="mb-0 opacity-7">Also available on the Google Play Store.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 text-center text-lg-start">
|
||||
<div class="call-to-action-btn mx-auto mt-0 mt-md-4 m-lg-0">
|
||||
<a href="#downloads" class="d-inline-flex align-items-center btn btn-gradient text-uppercase positive-ls-2 font-weight-bold text-2 btn-py-3 px-3 px-sm-5">
|
||||
<span class="d-none d-sm-inline-block"><img width="32" height="28" src="images/icon-cloud.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-stroke-color-light me-2'}" /></span>
|
||||
Download Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="what-is-fcast" class="py-3 py-lg-5">
|
||||
<div class="container">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 text-center text-lg-start">
|
||||
<img src="images/whatis.png" class="img-fluid mb-4 mb-lg-0" alt="" />
|
||||
</div>
|
||||
<div class="col-lg-6 text-center text-lg-start">
|
||||
|
||||
<div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="100">
|
||||
|
||||
<h2 class="text-color-dark font-weight-bold text-10 mb-4-5">What is FCast?</h2>
|
||||
|
||||
<p class="font-weight-medium text-4-5 line-height-6 negative-ls-05">Embracing Open Development</p>
|
||||
|
||||
<p class="text-3-5 mb-0">FCast is an open-source protocol designed to open wireless audio and video streaming to everybody. With support for various stream types like DASH, HLS, and mp4, it empowers developers to create their own unique streaming experiences.
|
||||
|
||||
In contrast to traditional closed protocols, FCast champions open innovation. Developers can create custom receivers, integrate the client protocol into their own apps, or even enhance the protocol, contributing to an evolving open ecosystem. For more information click <a href="https://gitlab.futo.org/videostreaming/fcast/">here</a>.</p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="py-4">
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<section id="how-do-i-use" class="py-3 py-lg-5">
|
||||
<div class="container">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 text-center text-lg-start">
|
||||
|
||||
<div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="100">
|
||||
|
||||
<h2 class="text-color-dark font-weight-bold text-10 mb-4-5">How to Get Started with FCast?</h2>
|
||||
|
||||
<p class="font-weight-medium text-4-5 line-height-6 negative-ls-05">Setting Up Your Environment</p>
|
||||
|
||||
<p class="text-3-5 mb-0">For users: Begin by setting up your receiver. Receivers compatible with Linux, Windows, MacOS (via Electron), or Android (native) are readily available. The receiver serves as the target for your media streams, and should be installed on the device you aim to cast to. Discover more about setting up your receiver <a href="https://gitlab.futo.org/videostreaming/fcast/">here</a>.</p>
|
||||
|
||||
<p class="text-3-5 mb-0">For developers: If you're looking to build a custom receiver or to integrate FCast into your existing application, you'll find a wealth of resources at your disposal. Start by reviewing our <a href="https://gitlab.futo.org/videostreaming/fcast/-/tree/master/receivers">existing receiver implementations</a> for inspiration and guidance. For an in-depth understanding of how FCast works, our <a href="https://gitlab.futo.org/videostreaming/fcast/-/wikis/home">protocol documentation</a> is an indispensable resource.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 text-center text-lg-start">
|
||||
<img src="images/fcast.png" class="img-fluid mb-4 mb-lg-0" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="py-4">
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<section id="key-features" class="py-3 py-lg-5">
|
||||
<div class="container">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="100">
|
||||
|
||||
<div class="text-center">
|
||||
<h2 class="text-color-dark font-weight-bold text-10 mb-4-5">Key Features</h2>
|
||||
|
||||
<p class="font-weight-medium text-4-5 line-height-6 negative-ls-05"> Explore the distinctive features of FCast that make it a dynamic, user-friendly, and developer-centric platform for media streaming.</p>
|
||||
</div>
|
||||
|
||||
<div class="row pt-3">
|
||||
<div class="col-lg-6">
|
||||
<div class="feature-box feature-box-style-6 custom-feature-box-1 reverse">
|
||||
<div class="feature-box-info">
|
||||
<h4 class="text-5 font-weight-bold mb-1 mt-3">Open-Source Protocol</h4>
|
||||
<p class="mb-4 text-3-5 font-weight-medium">FCast offers a fully open-source protocol, enabling unrestricted innovation in the field of media streaming.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 text-start">
|
||||
<div class="feature-box feature-box-style-6 custom-feature-box-1">
|
||||
<div class="feature-box-info">
|
||||
<h4 class="text-5 font-weight-bold mb-1 mt-3">Various Stream Type Support</h4>
|
||||
<p class="mb-4 text-3-5 font-weight-medium">FCast supports a range of stream types like DASH, HLS, and mp4, accommodating diverse media content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-3">
|
||||
<div class="col-lg-6">
|
||||
<div class="feature-box feature-box-style-6 custom-feature-box-1 reverse">
|
||||
<div class="feature-box-info">
|
||||
<h4 class="text-5 font-weight-bold mb-1 mt-3">Cross-Platform Compatibility</h4>
|
||||
<p class="mb-4 text-3-5 font-weight-medium">FCast's core implementation runs seamlessly on Linux, Windows, MacOS (via Electron), and Android (native), ensuring a broad range of device support.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 text-start">
|
||||
<div class="feature-box feature-box-style-6 custom-feature-box-1">
|
||||
<div class="feature-box-info">
|
||||
<h4 class="text-5 font-weight-bold mb-1 mt-3">Full Playback Control</h4>
|
||||
<p class="mb-4 text-3-5 font-weight-medium">The client retains full control over playback, capable of operations like pause, resume, seek, and volume adjustment, for a tailored user experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-3">
|
||||
<div class="col-lg-6">
|
||||
<div class="feature-box feature-box-style-6 custom-feature-box-1 reverse">
|
||||
<div class="feature-box-info">
|
||||
<h4 class="text-5 font-weight-bold mb-1 mt-3">mDNS for Discovery</h4>
|
||||
<p class="mb-4 text-3-5 font-weight-medium">FCast uses mDNS to discover available receivers, simplifying the connection process.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 text-start">
|
||||
<div class="feature-box feature-box-style-6 custom-feature-box-1">
|
||||
<div class="feature-box-info">
|
||||
<h4 class="text-5 font-weight-bold mb-1 mt-3">Real-Time Updates</h4>
|
||||
<p class="mb-4 text-3-5 font-weight-medium">The receiver provides real-time updates about the playback status to the client, ensuring synchronized communication.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-3">
|
||||
<div class="col-lg-6">
|
||||
<div class="feature-box feature-box-style-6 custom-feature-box-1 reverse">
|
||||
<div class="feature-box-info">
|
||||
<h4 class="text-5 font-weight-bold mb-1 mt-3">Community Contribution</h4>
|
||||
<p class="mb-4 text-3-5 font-weight-medium">As an open-source project, FCast thrives on the contributions from the global developer community, fostering continuous growth and enhancement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 text-start">
|
||||
<div class="feature-box feature-box-style-6 custom-feature-box-1">
|
||||
<div class="feature-box-info">
|
||||
<h4 class="text-5 font-weight-bold mb-1 mt-3">Custom Receiver Implementation</h4>
|
||||
<p class="mb-0 mb-lg-4 text-3-5 font-weight-medium">Developers have the freedom to create custom receivers, allowing them to explore new possibilities for content delivery.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="py-4">
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<section id="faq" class="py-5 my-5 p-relative">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
||||
<h2 class="text-color-dark font-weight-bold text-10 mb-4-5">FAQ</h2>
|
||||
|
||||
<div class="accordion accordion-modern-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="150" id="accordion1">
|
||||
<div class="card card-default">
|
||||
<div class="card-header" id="collapse1HeadingOne">
|
||||
<h4 class="card-title m-0">
|
||||
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1One" aria-expanded="false" aria-controls="collapse1One">
|
||||
1 - Why did you develop FCast?
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse1One" class="collapse" aria-labelledby="collapse1HeadingOne" data-bs-parent="#accordion1">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">We developed FCast to democratize the field of media streaming. By creating an open-source protocol, we aim to encourage innovation and offer developers the freedom to create their own custom receiver implementations. This way, we're not just providing a tool for streaming media content, but also creating a dynamic platform for technological growth and creativity.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-default">
|
||||
<div class="card-header" id="collapse1HeadingTwo">
|
||||
<h4 class="card-title m-0">
|
||||
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Two" aria-expanded="false" aria-controls="collapse1Two">
|
||||
2 - How does FCast differ from other streaming protocols like Chromecast or AirPlay?
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse1Two" class="collapse" aria-labelledby="collapse1HeadingTwo" data-bs-parent="#accordion1">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Unlike Chromecast or AirPlay, which are closed protocols, FCast is entirely open-source. This allows developers to create custom receiver implementations and integrate FCast into their existing applications, making it a more flexible and adaptable option.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-default">
|
||||
<div class="card-header" id="collapse1HeadingThree">
|
||||
<h4 class="card-title m-0">
|
||||
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Three" aria-expanded="false" aria-controls="collapse1Three">
|
||||
3 - How can I implement FCast into my own application?
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse1Three" class="collapse" aria-labelledby="collapse1HeadingThree" data-bs-parent="#accordion1">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">FCast has provided example implementations of both clients and receivers in Android, Rust, and TypeScript. You can use these as a reference while building your own application. Additionally, you can consult the protocol documentation for specific details on implementing the FCast protocol. Despite its powerful capabilities, the protocol is designed to be simple and straightforward to implement, making it accessible for developers at all levels.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-default">
|
||||
<div class="card-header" id="collapse1HeadingFour">
|
||||
<h4 class="card-title m-0">
|
||||
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Four" aria-expanded="false" aria-controls="collapse1Four">
|
||||
4 - How does FCast handle device discovery?
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse1Four" class="collapse" aria-labelledby="collapse1HeadingFour" data-bs-parent="#accordion1">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">FCast uses mDNS (Multicast Domain Name System) to discover available receivers on the network, simplifying the process of establishing a connection between the client and receiver.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-default">
|
||||
<div class="card-header" id="collapse1HeadingFive">
|
||||
<h4 class="card-title m-0">
|
||||
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Five" aria-expanded="false" aria-controls="collapse1Five">
|
||||
5 - Can I contribute to FCast's development?
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse1Five" class="collapse" aria-labelledby="collapse1HeadingFive" data-bs-parent="#accordion1">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Absolutely! As an open-source project, FCast thrives on community contributions. You can contribute to FCast by enhancing the codebase, implementing new features, fixing bugs, and more. You can find more details in our CONTRIBUTING.md file on our repository.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="https://gitlab.futo.org/videostreaming/fcast" class="btn btn-secondary positive-ls-2 btn-outline font-weight-bold text-2 btn-py-3 px-5 mt-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}">GO TO REPOSITORY</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-svg-4">
|
||||
<img width="1290" height="1290" src="images/shape-1.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': ''}" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="downloads" class="bg-gradient py-5 my-5 p-relative z-index-2">
|
||||
<div class="container">
|
||||
|
||||
<div class="row py-5 text-color-light p-relative">
|
||||
<div class="text-center text-lg-start">
|
||||
|
||||
<h2 class="text-color-light font-weight-bold text-10 mb-5">Download Receiver</h2>
|
||||
|
||||
<p class="font-weight-semibold text-color-light text-6 line-height-6 negative-ls-05 mt-4 mb-0">Download to harness the power of open-source media streaming</p>
|
||||
<p class="font-weight-medium text-color-light opacity-6 text-4-5 line-height-6 negative-ls-05 mb-5">Available on multiple platforms, our suite of resources is ready to help you integrate FCast into your own applications.</p>
|
||||
|
||||
<a href="https://gitlab.futo.org/videostreaming/fcast/-/releases" class="d-inline-flex align-items-center btn btn-light btn-py-2 px-4 text-start me-2 mb-3 mb-sm-0">
|
||||
<img height="34" src="images/icon-gitlab.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-stroke-color-dark me-2'}" />
|
||||
<span class="font-weight-semibold text-4"><em class="text-1 text-uppercase font-weight-medium opacity-6 d-block fst-normal p-relative top-2">DOWNLOAD ON</em><span class="text-color-dark text-4 negative-ls-05 p-relative bottom-2">Gitlab</span></span>
|
||||
</a>
|
||||
|
||||
<a class="d-inline-flex align-items-center btn btn-light btn-py-2 px-4 text-start me-2 mb-3 mb-sm-0">
|
||||
<img height="34" src="images/icon-google-play.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-stroke-color-dark me-2'}" />
|
||||
<span class="font-weight-semibold text-4"><em class="text-1 text-uppercase font-weight-medium opacity-6 d-block fst-normal p-relative top-2">DOWNLOAD ON</em><span class="text-color-dark text-4 negative-ls-05 p-relative bottom-2">Google Play</span></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer id="footer" class="bg-transparent border-0 mt-lg-5 pt-lg-5">
|
||||
<div class="footer-copyright bg-transparent">
|
||||
<div class="container py-2">
|
||||
<hr class="bg-dark opacity-1 m-0">
|
||||
<div class="row py-4 pb-5">
|
||||
<div class="col-md-6 py-4 text-center text-md-start">
|
||||
<p class="mb-0 text-3 opacity-8 negative-ls-05 font-weight-medium">FUTO © Copyright 2023. All Rights Reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Vendor -->
|
||||
<script src="vendor/plugins/js/plugins.min.js"></script>
|
||||
|
||||
<!-- Theme Base, Components and Settings -->
|
||||
<script src="js/theme.js"></script>
|
||||
|
||||
<!-- Current Page Vendor and Views -->
|
||||
<script src="js/views/view.contact.js"></script>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
<!-- Theme Custom -->
|
||||
<script src="js/custom.js"></script>
|
||||
|
||||
<!-- Theme Initialization Files -->
|
||||
<script src="js/theme.init.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
0
website/js/custom.js
Normal file
13
website/js/script.js
Normal file
|
@ -0,0 +1,13 @@
|
|||
/*
|
||||
Name: App Landing
|
||||
Written by: Okler Themes - (http://www.okler.net)
|
||||
Theme Version: 9.9.3
|
||||
*/
|
||||
|
||||
(function( $ ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
|
||||
|
||||
}).apply( this, [ jQuery ]);
|
333
website/js/theme.init.js
Normal file
|
@ -0,0 +1,333 @@
|
|||
// Commom Plugins
|
||||
(function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// Scroll to Top Button.
|
||||
if (typeof theme.PluginScrollToTop !== 'undefined') {
|
||||
theme.PluginScrollToTop.initialize();
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
});
|
||||
|
||||
// Popovers
|
||||
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
});
|
||||
|
||||
// Validations
|
||||
if ( $.isFunction($.validator) && typeof theme.PluginValidation !== 'undefined') {
|
||||
theme.PluginValidation.initialize();
|
||||
}
|
||||
|
||||
// Animate
|
||||
if ($.isFunction($.fn['themePluginAnimate']) && $('[data-appear-animation]').length) {
|
||||
theme.fn.dynIntObsInit( '[data-appear-animation], [data-appear-animation-svg]', 'themePluginAnimate', theme.PluginAnimate.defaults );
|
||||
}
|
||||
|
||||
// Animated Content
|
||||
if ($.isFunction($.fn['themePluginAnimatedContent'])) {
|
||||
theme.fn.intObsInit( '[data-plugin-animated-letters]:not(.manual), .animated-letters', 'themePluginAnimatedContent' );
|
||||
theme.fn.intObsInit( '[data-plugin-animated-words]:not(.manual), .animated-words', 'themePluginAnimatedContent' );
|
||||
}
|
||||
|
||||
// Before / After
|
||||
if ($.isFunction($.fn['themePluginBeforeAfter']) && $('[data-plugin-before-after]').length) {
|
||||
theme.fn.intObsInit( '[data-plugin-before-after]:not(.manual)', 'themePluginBeforeAfter' );
|
||||
}
|
||||
|
||||
// Carousel Light
|
||||
if ($.isFunction($.fn['themePluginCarouselLight']) && $('.owl-carousel-light').length) {
|
||||
theme.fn.intObsInit( '.owl-carousel-light', 'themePluginCarouselLight' );
|
||||
}
|
||||
|
||||
// Carousel
|
||||
if ($.isFunction($.fn['themePluginCarousel']) && $('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').length) {
|
||||
theme.fn.intObsInit( '[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)', 'themePluginCarousel' );
|
||||
}
|
||||
|
||||
// Chart.Circular
|
||||
if ($.isFunction($.fn['themePluginChartCircular']) && ( $('[data-plugin-chart-circular]').length || $('.circular-bar-chart').length )) {
|
||||
theme.fn.dynIntObsInit( '[data-plugin-chart-circular]:not(.manual), .circular-bar-chart:not(.manual)', 'themePluginChartCircular', theme.PluginChartCircular.defaults );
|
||||
}
|
||||
|
||||
// Countdown
|
||||
if ($.isFunction($.fn['themePluginCountdown']) && ( $('[data-plugin-countdown]').length || $('.countdown').length )) {
|
||||
theme.fn.intObsInit( '[data-plugin-countdown]:not(.manual), .countdown', 'themePluginCountdown' );
|
||||
}
|
||||
|
||||
// Counter
|
||||
if ($.isFunction($.fn['themePluginCounter']) && ( $('[data-plugin-counter]').length || $('.counters [data-to]').length )) {
|
||||
theme.fn.dynIntObsInit( '[data-plugin-counter]:not(.manual), .counters [data-to]', 'themePluginCounter', theme.PluginCounter.defaults );
|
||||
}
|
||||
|
||||
// Cursor Effect
|
||||
if ($.isFunction($.fn['themePluginCursorEffect']) && $('[data-plugin-cursor-effect]').length ) {
|
||||
theme.fn.intObsInit( '[data-plugin-cursor-effect]:not(.manual)', 'themePluginCursorEffect' );
|
||||
}
|
||||
|
||||
// Float Element
|
||||
if ($.isFunction($.fn['themePluginFloatElement']) && $('[data-plugin-float-element]').length) {
|
||||
theme.fn.intObsInit( '[data-plugin-float-element], [data-plugin-float-element-svg]', 'themePluginFloatElement' );
|
||||
}
|
||||
|
||||
// GDPR
|
||||
if ($.isFunction($.fn['themePluginGDPR']) && $('[data-plugin-gdpr]').length) {
|
||||
|
||||
$(function() {
|
||||
$('[data-plugin-gdpr]:not(.manual)').each(function() {
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginGDPR(opts);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// GDPR Wrapper
|
||||
if ($.isFunction($.fn['themePluginGDPRWrapper']) && $('[data-plugin-gdpr-wrapper]').length) {
|
||||
|
||||
$(function() {
|
||||
$('[data-plugin-gdpr-wrapper]:not(.manual)').each(function() {
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginGDPRWrapper(opts);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Hover Effect
|
||||
if ($.isFunction($.fn['themePluginHoverEffect']) && $('[data-plugin-hover-effect], .hover-effect-3d').length) {
|
||||
theme.fn.intObsInit( '[data-plugin-hover-effect]:not(.manual), .hover-effect-3d:not(.manual)', 'themePluginHoverEffect' );
|
||||
}
|
||||
|
||||
// Animated Icon
|
||||
if ($.isFunction($.fn['themePluginIcon']) && $('[data-icon]').length) {
|
||||
theme.fn.dynIntObsInit( '[data-icon]:not(.svg-inline--fa)', 'themePluginIcon', theme.PluginIcon.defaults );
|
||||
}
|
||||
|
||||
// In Viewport Style
|
||||
if ($.isFunction($.fn['themePluginInViewportStyle']) && $('[data-inviewport-style]').length) {
|
||||
|
||||
$(function() {
|
||||
$('[data-inviewport-style]:not(.manual)').each(function() {
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginInViewportStyle(opts);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Lightbox
|
||||
if ($.isFunction($.fn['themePluginLightbox']) && ( $('[data-plugin-lightbox]').length || $('.lightbox').length )) {
|
||||
theme.fn.execOnceTroughEvent( '[data-plugin-lightbox]:not(.manual), .lightbox:not(.manual)', 'mouseover.trigger.lightbox', function(){
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginLightbox(opts);
|
||||
});
|
||||
}
|
||||
|
||||
// Masonry
|
||||
if ($.isFunction($.fn['themePluginMasonry']) && $('[data-plugin-masonry]').length) {
|
||||
|
||||
$(function() {
|
||||
$('[data-plugin-masonry]:not(.manual)').each(function() {
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginMasonry(opts);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Match Height
|
||||
if ($.isFunction($.fn['themePluginMatchHeight']) && $('[data-plugin-match-height]').length) {
|
||||
|
||||
$(function() {
|
||||
$('[data-plugin-match-height]:not(.manual)').each(function() {
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginMatchHeight(opts);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Parallax
|
||||
if ($.isFunction($.fn['themePluginParallax']) && $('[data-plugin-parallax]').length) {
|
||||
theme.fn.intObsInit( '[data-plugin-parallax]:not(.manual)', 'themePluginParallax' );
|
||||
}
|
||||
|
||||
// Progress Bar
|
||||
if ($.isFunction($.fn['themePluginProgressBar']) && ( $('[data-plugin-progress-bar]') || $('[data-appear-progress-animation]').length )) {
|
||||
theme.fn.dynIntObsInit( '[data-plugin-progress-bar]:not(.manual), [data-appear-progress-animation]', 'themePluginProgressBar', theme.PluginProgressBar.defaults );
|
||||
}
|
||||
|
||||
// Random Images
|
||||
if ($.isFunction($.fn['themePluginRandomImages']) && $('[data-plugin-random-images]').length) {
|
||||
theme.fn.dynIntObsInit( '.plugin-random-images', 'themePluginRandomImages', theme.PluginRandomImages.defaults );
|
||||
}
|
||||
|
||||
// Read More
|
||||
if ($.isFunction($.fn['themePluginReadMore']) && $('[data-plugin-readmore]').length) {
|
||||
theme.fn.intObsInit( '[data-plugin-readmore]:not(.manual)', 'themePluginReadMore' );
|
||||
}
|
||||
|
||||
// Revolution Slider
|
||||
if ($.isFunction($.fn['themePluginRevolutionSlider']) && ( $('[data-plugin-revolution-slider]').length || $('.slider-container .slider').length )) {
|
||||
|
||||
$(function() {
|
||||
$('[data-plugin-revolution-slider]:not(.manual), .slider-container .slider:not(.manual)').each(function() {
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginRevolutionSlider(opts);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Scroll Spy
|
||||
if ($.isFunction($.fn['themePluginScrollSpy']) && $('[data-plugin-scroll-spy]').length) {
|
||||
|
||||
$(function() {
|
||||
$('[data-plugin-scroll-spy]:not(.manual)').each(function() {
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginScrollSpy(opts);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Scrollable
|
||||
if ( $.isFunction($.fn[ 'nanoScroller' ]) && $('[data-plugin-scrollable]').length ) {
|
||||
theme.fn.intObsInit( '[data-plugin-scrollable]', 'themePluginScrollable' );
|
||||
}
|
||||
|
||||
// Section Scroll
|
||||
if ($.isFunction($.fn['themePluginSectionScroll']) && $('[data-plugin-section-scroll]').length) {
|
||||
|
||||
$(function() {
|
||||
$('[data-plugin-section-scroll]:not(.manual)').each(function() {
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginSectionScroll(opts);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Sort
|
||||
if ($.isFunction($.fn['themePluginSort']) && ( $('[data-plugin-sort]').length || $('.sort-source').length )) {
|
||||
theme.fn.intObsInit( '[data-plugin-sort]:not(.manual), .sort-source:not(.manual)', 'themePluginSort' );
|
||||
}
|
||||
|
||||
// Star Rating
|
||||
if ($.isFunction($.fn['themePluginStarRating']) && $('[data-plugin-star-rating]').length) {
|
||||
theme.fn.intObsInit( '[data-plugin-star-rating]:not(.manual)', 'themePluginStarRating' );
|
||||
}
|
||||
|
||||
// Sticky
|
||||
if ($.isFunction($.fn['themePluginSticky']) && $('[data-plugin-sticky]').length) {
|
||||
theme.fn.execOnceTroughWindowEvent( window, 'scroll.trigger.sticky', function(){
|
||||
$('[data-plugin-sticky]:not(.manual)').each(function() {
|
||||
var $this = $(this),
|
||||
opts;
|
||||
|
||||
var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginSticky(opts);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle
|
||||
if ($.isFunction($.fn['themePluginToggle']) && $('[data-plugin-toggle]').length) {
|
||||
theme.fn.intObsInit( '[data-plugin-toggle]:not(.manual)', 'themePluginToggle' );
|
||||
}
|
||||
|
||||
// Video Background
|
||||
if ($.isFunction($.fn['themePluginVideoBackground']) && $('[data-plugin-video-background]').length) {
|
||||
theme.fn.intObsInit( '[data-plugin-video-background]:not(.manual)', 'themePluginVideoBackground' );
|
||||
}
|
||||
|
||||
// Sticky Header
|
||||
if (typeof theme.StickyHeader !== 'undefined') {
|
||||
theme.StickyHeader.initialize();
|
||||
}
|
||||
|
||||
// Nav Menu
|
||||
if (typeof theme.Nav !== 'undefined') {
|
||||
theme.Nav.initialize();
|
||||
}
|
||||
|
||||
// Search
|
||||
if (typeof theme.Search !== 'undefined' && ( $('#searchForm').length || $('.header-nav-features-search-reveal').length )) {
|
||||
theme.Search.initialize();
|
||||
}
|
||||
|
||||
// Newsletter
|
||||
if (typeof theme.Newsletter !== 'undefined' && $('#newsletterForm').length) {
|
||||
theme.fn.intObs( '#newsletterForm', 'theme.Newsletter.initialize();', {} );
|
||||
}
|
||||
|
||||
// Account
|
||||
if (typeof theme.Account !== 'undefined' && ( $('#headerAccount').length || $('#headerSignUp').length || $('#headerSignIn').length || $('#headerRecover').length || $('#headerRecoverCancel').length )) {
|
||||
theme.Account.initialize();
|
||||
}
|
||||
|
||||
}).apply(this, [jQuery]);
|
9660
website/js/theme.js
Normal file
280
website/js/views/view.contact.js
Normal file
|
@ -0,0 +1,280 @@
|
|||
/*
|
||||
Name: View - Contact
|
||||
Written by: Okler Themes - (http://www.okler.net)
|
||||
Theme Version: 9.9.3
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
Custom Rules
|
||||
*/
|
||||
|
||||
// No White Space
|
||||
$.validator.addMethod("noSpace", function(value, element) {
|
||||
if( $(element).attr('required') ) {
|
||||
return value.search(/^(?! *$)[^]+$/) == 0;
|
||||
}
|
||||
|
||||
return true;
|
||||
}, 'Please fill this empty field.');
|
||||
|
||||
/*
|
||||
Assign Custom Rules on Fields
|
||||
*/
|
||||
$.validator.addClassRules({
|
||||
'form-control': {
|
||||
noSpace: true
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Contact Form: Basic
|
||||
*/
|
||||
$('.contact-form').each(function(){
|
||||
$(this).validate({
|
||||
errorPlacement: function(error, element) {
|
||||
if(element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
|
||||
error.appendTo(element.closest('.form-group'));
|
||||
} else if( element.is('select') && element.closest('.custom-select-1') ) {
|
||||
error.appendTo(element.closest('.form-group'));
|
||||
} else {
|
||||
if( element.closest('.form-group').length ) {
|
||||
error.appendTo(element.closest('.form-group'));
|
||||
} else {
|
||||
error.insertAfter(element);
|
||||
}
|
||||
}
|
||||
},
|
||||
submitHandler: function(form) {
|
||||
|
||||
var $form = $(form),
|
||||
$messageSuccess = $form.find('.contact-form-success'),
|
||||
$messageError = $form.find('.contact-form-error'),
|
||||
$submitButton = $(this.submitButton),
|
||||
$errorMessage = $form.find('.mail-error-message'),
|
||||
submitButtonText = $submitButton.val();
|
||||
|
||||
$submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Loading...' ).attr('disabled', true);
|
||||
|
||||
// Fields Data
|
||||
var formData = $form.serializeArray(),
|
||||
data = {};
|
||||
|
||||
$(formData).each(function(index, obj){
|
||||
if( data[obj.name] ) {
|
||||
data[obj.name] = data[obj.name] + ', ' + obj.value;
|
||||
} else {
|
||||
data[obj.name] = obj.value;
|
||||
}
|
||||
});
|
||||
|
||||
// Google Recaptcha v2
|
||||
if( data["g-recaptcha-response"] != undefined ) {
|
||||
data["g-recaptcha-response"] = $form.find('#g-recaptcha-response').val();
|
||||
}
|
||||
|
||||
// Ajax Submit
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: $form.attr('action'),
|
||||
data: data
|
||||
}).always(function(data, textStatus, jqXHR) {
|
||||
|
||||
$errorMessage.empty().hide();
|
||||
|
||||
if (data.response == 'success') {
|
||||
|
||||
// Uncomment the code below to redirect for a thank you page
|
||||
// self.location = 'thank-you.html';
|
||||
|
||||
$messageSuccess.removeClass('d-none');
|
||||
$messageError.addClass('d-none');
|
||||
|
||||
// Reset Form
|
||||
$form.find('.form-control')
|
||||
.val('')
|
||||
.blur()
|
||||
.parent()
|
||||
.removeClass('has-success')
|
||||
.removeClass('has-danger')
|
||||
.find('label.error')
|
||||
.remove();
|
||||
|
||||
if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
|
||||
$('html, body').animate({
|
||||
scrollTop: $messageSuccess.offset().top - 80
|
||||
}, 300);
|
||||
}
|
||||
|
||||
$form.find('.form-control').removeClass('error');
|
||||
|
||||
$submitButton.val( submitButtonText ).attr('disabled', false);
|
||||
|
||||
return;
|
||||
|
||||
} else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') {
|
||||
$errorMessage.html(data.errorMessage).show();
|
||||
} else {
|
||||
$errorMessage.html(data.responseText).show();
|
||||
}
|
||||
|
||||
$messageError.removeClass('d-none');
|
||||
$messageSuccess.addClass('d-none');
|
||||
|
||||
if (($messageError.offset().top - 80) < $(window).scrollTop()) {
|
||||
$('html, body').animate({
|
||||
scrollTop: $messageError.offset().top - 80
|
||||
}, 300);
|
||||
}
|
||||
|
||||
$form.find('.has-success')
|
||||
.removeClass('has-success');
|
||||
|
||||
$submitButton.val( submitButtonText ).attr('disabled', false);
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/*
|
||||
Contact Form: Advanced
|
||||
*/
|
||||
$('#contactFormAdvanced').validate({
|
||||
onkeyup: false,
|
||||
onclick: false,
|
||||
onfocusout: false,
|
||||
rules: {
|
||||
'captcha': {
|
||||
captcha: true
|
||||
},
|
||||
'checkboxes[]': {
|
||||
required: true
|
||||
},
|
||||
'radios': {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
errorPlacement: function(error, element) {
|
||||
if(element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
|
||||
error.appendTo(element.closest('.form-group'));
|
||||
} else if( element.is('select') && element.closest('.custom-select-1') ) {
|
||||
error.appendTo(element.closest('.form-group'));
|
||||
} else {
|
||||
error.insertAfter(element);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Contact Form: reCaptcha v3
|
||||
*/
|
||||
$('.contact-form-recaptcha-v3').each(function(){
|
||||
$(this).validate({
|
||||
errorPlacement: function(error, element) {
|
||||
if(element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
|
||||
error.appendTo(element.closest('.form-group'));
|
||||
} else if( element.is('select') && element.closest('.custom-select-1') ) {
|
||||
error.appendTo(element.closest('.form-group'));
|
||||
} else {
|
||||
error.insertAfter(element);
|
||||
}
|
||||
},
|
||||
submitHandler: function(form) {
|
||||
|
||||
var $form = $(form),
|
||||
$messageSuccess = $form.find('.contact-form-success'),
|
||||
$messageError = $form.find('.contact-form-error'),
|
||||
$submitButton = $(this.submitButton),
|
||||
$errorMessage = $form.find('.mail-error-message'),
|
||||
submitButtonText = $submitButton.val();
|
||||
|
||||
$submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Loading...' ).attr('disabled', true);
|
||||
|
||||
var recaptchaSrcURL = $('#google-recaptcha-v3').attr('src'),
|
||||
newURL = new URL(recaptchaSrcURL),
|
||||
site_key = newURL.searchParams.get("render");
|
||||
|
||||
grecaptcha.execute(site_key, {action: 'contact_us'}).then(function(token) {
|
||||
|
||||
// Fields Data
|
||||
var formData = $form.serializeArray(),
|
||||
data = {};
|
||||
|
||||
$(formData).each(function(index, obj){
|
||||
data[obj.name] = obj.value;
|
||||
});
|
||||
|
||||
// Recaptcha v3 Token
|
||||
data["g-recaptcha-response"] = token;
|
||||
|
||||
// Ajax Submit
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: $form.attr('action'),
|
||||
data: data
|
||||
}).always(function(data, textStatus, jqXHR) {
|
||||
|
||||
$errorMessage.empty().hide();
|
||||
|
||||
if (data.response == 'success') {
|
||||
|
||||
// Uncomment the code below to redirect for a thank you page
|
||||
// self.location = 'thank-you.html';
|
||||
|
||||
$messageSuccess.removeClass('d-none');
|
||||
$messageError.addClass('d-none');
|
||||
|
||||
// Reset Form
|
||||
$form.find('.form-control')
|
||||
.val('')
|
||||
.blur()
|
||||
.parent()
|
||||
.removeClass('has-success')
|
||||
.removeClass('has-danger')
|
||||
.find('label.error')
|
||||
.remove();
|
||||
|
||||
if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
|
||||
$('html, body').animate({
|
||||
scrollTop: $messageSuccess.offset().top - 80
|
||||
}, 300);
|
||||
}
|
||||
|
||||
$form.find('.form-control').removeClass('error');
|
||||
|
||||
$submitButton.val( submitButtonText ).attr('disabled', false);
|
||||
|
||||
return;
|
||||
|
||||
} else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') {
|
||||
$errorMessage.html(data.errorMessage).show();
|
||||
} else {
|
||||
$errorMessage.html(data.responseText).show();
|
||||
}
|
||||
|
||||
$messageError.removeClass('d-none');
|
||||
$messageSuccess.addClass('d-none');
|
||||
|
||||
if (($messageError.offset().top - 80) < $(window).scrollTop()) {
|
||||
$('html, body').animate({
|
||||
scrollTop: $messageError.offset().top - 80
|
||||
}, 300);
|
||||
}
|
||||
|
||||
$form.find('.has-success')
|
||||
.removeClass('has-success');
|
||||
|
||||
$submitButton.val( submitButtonText ).attr('disabled', false);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}).apply(this, [jQuery]);
|