- ID da verificação
- b59b4b3c-f285-41aa-9884-85af55433601Concluído
- URL enviado:
- https://pastors.ai/
- Relatório concluído:
Links · 2 encontrado(s)
Os links de saída identificados na página
| Link | Texto |
|---|---|
| https://menlo.church/#pastorsAI | this |
| https://twitter.com/pastorsai |
Variáveis JavaScript · 35 encontrada(s)
Variáveis JavaScript globais carregadas no objeto janela de uma página são variáveis declaradas fora das funções e acessíveis de qualquer lugar no código dentro do escopo atual
| Nome | Tipo |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| Coloris | function |
| userSettingsDefault | object |
| settingTemplates | object |
| addShadowEffect | string |
| openPlanModel | function |
Mensagens de registro do console · 0 encontrada(s)
Mensagens registradas no console web
HTML
O corpo HTML bruto da página
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>Pastors.AI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=" ">
<meta name="keywords" content="">
<meta content="Themesdesign" name="author">
<link rel="shortcut icon" href="/static/images/fav_v2.png">
<!-- Bootstrap css -->
<link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css" id="bootstrap-style">
<!-- Material Icon Css -->
<link rel="stylesheet" href="/static/css/materialdesignicons.min.css" type="text/css">
<!-- Unicon Css -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<!-- Swiper Css -->
<link rel="stylesheet" href="/static/css/tiny-slider.css" type="text/css">
<link rel="stylesheet" href="/static/css/swiper.min.css" type="text/css">
<!-- Custom Css -->
<link rel="stylesheet" href="/static/css/style.min.css" type="text/css">
<!-- colors -->
<link href="/static/css/colors/default.css" rel="stylesheet" type="text/css" id="color-opt">
<link href="/static/css/custom-4.css" rel="stylesheet" type="text/css" id="color-opt">
<style>
.tooltip-text {
visibility: hidden;
position: absolute;
z-index: 2;
width: 100px;
color: white;
font-size: 12px;
background-color: #192733;
border-radius: 10px;
padding: 10px 15px 10px 15px;
}
.tooltip-text::before {
content: "";
position: absolute;
transform: rotate(45deg);
background-color: #192733;
padding: 5px;
z-index: 1;
}
#uploadImage:hover ~ .tooltip-text {
visibility: visible;
}
#uploadImage:hover{
background: #000;
}
#top {
top: -40%;
left: 52%;
width: 315px;
}
#top::before {
top: 80%;
left: 45%;
}
.price-item.popular {
margin: -30px 10px 0px !important;
position: relative;
top: 0;
padding-bottom: 10px;
}
.price-item.popular .price-up-box {
padding-bottom: 18px !important;
}
.price-down-box ul li {
position: relative;
padding-left: 30px;
margin-bottom: 8px;
}
.price-down-box ul li i {
position: absolute;
left: 0;
top: 0;
line-height: 21px;
}
.pricing .price-item {
padding-bottom: 30px;
position: relative;
}
.pricing .price-item .mb-1{
font-size:14px;
}
.pricing .price-item .btn {
position: absolute;
bottom: 15px;
}
div#signInModal {
position: fixed;
width: 100%;
background: rgba(0, 0, 0, 0.25);
top: 0;
height: 100%;
z-index: 1111;
}
div#signInModal .modal-dialog {
background: #fff;
max-width: 500px;
margin: 50px auto;
border-radius: 5px;
}
@media screen and (min-width:320px) and (max-width:767px){
section#pricing .row.flex-nowrap {
flex-wrap: wrap !important;
}
.pricing .price-item {
padding-bottom: 50px;
}
}
.home-4 .home-content img {
max-width: 100% !important;
margin-top: 15px;
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
max-width: 1000px !important;
}
}
</style>
<link rel="stylesheet" media="all" type="text/css" href="/static/css/chatbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style></style></head>
<body data-bs-spy="scroll" data-bs-target="#navbarCollapse" data-bs-theme="light">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="col-2"></div>
<div class="col-8">
</div>
</div>
<script>
$(document).ready(function(){
$("#closeToast").click(function(){
$(this).parent().parent().parent().parent().addClass("d-none");
});
setTimeout(function(){
if ($('#flashToast')){
$('#flashToast').addClass("d-none");
}
// $('#overlay'). modal('hide')
}, 5000);
});
</script>
<style>
.form-label-heading{
font-weight: bold;
}
.form-label-heading {
font-weight: bold;
display: block;
padding-bottom: 10px;
}
.settings-wrap {
padding: 15px;
}
.clr-picker{
z-index: 11111 !important;
}
.design_template{
cursor:pointer;
width:100%;
}
.img-border{
border:3px solid #4b7bec;
}
</style>
<div class="modal" style="position:absolute;" id="captionSettingModal" tabindex="-1" aria-labelledby="captionSettingModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="border-radius:unset;">
<div class="loader" id="loading_icon_model" style="display: none;">
<img src="/static/assets/img/loaderr.gif" alt="" style="width: 50px;">
</div>
<div class="modal-header">
<h3 class="modal-title" id="captionSettingModalLabel">Caption Settings</h3>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
<a class="close" data-dismiss="modal" style="cursor:pointer;">×</a>
</div>
<div class="modal-body">
<div class="captionSettingModalBody">
<div class="row">
<div class="settings-wrap">
<label class="form-label-heading">Design templates</label>
<div class="row">
<div class="col-lg-2"><img class="design_template" data-set="1" src="/static/images/template_1.png"></div>
<div class="col-lg-2"><img class="design_template" data-set="2" src="/static/images/template_2.png"> </div>
<div class="col-lg-2"><img class="design_template" data-set="3" src="/static/images/template_3.png"> </div>
<div class="col-lg-2"><img class="design_template" data-set="4" src="/static/images/template_4.png"> </div>
<div class="col-lg-2"><img class="design_template" data-set="5" src="/static/images/template_5.png"> </div>
<div class="col-lg-2"><img class="design_template img-border " data-set="6" src="/static/images/template_6.png"> </div>
</div>
<!--<div class="row" style="margin-top:10px;">
<div class="col-lg-4"><img class="design_template" data-set="4" src="/static/images/template_4.png"> </div>
<div class="col-lg-4"><img class="design_template" data-set="5" src="/static/images/template_5.png"> </div>
<div class="col-lg-4"><img class="design_template" data-set="6" src="/static/images/template_6.png"> </div>
</div>-->
</div>
</div>
<div class="row">
<div class="col-md-8">
<form method="post" id="captionSettingForm">
<div class="settings-wrap">
<label class="form-label-heading">Font settings</label>
<div class="row">
<div class="col-lg-4">
<label class="form-label">Family</label>
<select class="form-select" id="selectFontFamily">
<option value="Arial">Arial</option>
<option value="Comic-Sans-MS">Comic-Sans-MS</option>
<option selected="" value="Courier-New">Courier-New</option>
<option value="Georgia">Georgia</option>
<option value="Tahoma">Tahoma</option>
<option value="Trebuchet-MS">Trebuchet-MS</option>
<!-- <option value="Times-New-Roman">Times-New-Roman</option> -->
<option value="Verdana">Verdana</option>
<!-- <option value="American-Typewriter">American-Typewriter</option> -->
<!-- <option value="Georgia">Georgia</option> -->
<!-- <option value="Gill-Sans">Gill-Sans</option> -->
<!-- <option value="Helvetica-Narrow" style="font-family: Helvetica-Narrow;">Helvetica-Narrow</option> -->
<!-- <option value="Helvetica">Helvetica</option> -->
<!-- <option value="Microsoft-Sans-Serif">Microsoft-Sans-Serif</option> -->
<!-- <option value="Rockwell">Rockwell</option>
<option value="Skia">Skia</option> -->
<!-- <option value="Tahoma">Tahoma</option> -->
<!-- <option value="Times-New-Roman">Times-New-Roman</option> -->
<!-- <option value="Verdana">Verdana</option> -->
<!-- <option value="Arial-Hebrew">Arial-Hebrew</option>
<option value="Arial-Narrow">Arial-Narrow</option>
<option value="Bangla-MN">Bangla-MN</option>
<option value="Bangla-Sangam-MN">Bangla-Sangam-MN</option>
<option value="Baskerville">Baskerville</option>
<option value="Cochin">Cochin</option>
<option value="Courier">Courier</option>
<option value="InaiMathi">InaiMathi</option>
<option value="Lucida-Grande">Lucida-Grande</option>
<option value="Malayalam-MN">Malayalam-MN</option>
<option value="Palatino">Palatino</option>
<option value="PT-Sans">PT-Sans</option>
<option value="PT-Mono">PT-Mono</option>
<option value="PT-Serif">PT-Serif</option>
<option value="Raanana">Raanana</option>
<option value="Sinhala-MN">Sinhala-MN</option>
<option value="Skia">Skia</option> -->
</select>
</div>
<div class="col-lg-4">
<label class="form-label">Font style</label>
<select class="form-select" id="selectFontStyle">
<option value="regular">Regular</option>
<option selected="" value="bold">Bold</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label">Size</label>
<select class="form-select" id="selectFontSize">
<option value="30">Small</option>
<option selected="" value="40">Large</option>
<!-- <option value="50">50</option>-->
<!-- <option value="60">60</option>-->
<!-- <option value="70">70</option>-->
<!-- <option value="80">80</option> -->
</select>
</div>
</div>
</div>
<div class="settings-wrap">
<label class="form-label-heading">Color settings</label>
<div class="row">
<div class="col-lg-4">
<label class="form-label" style="width: 100%;">Font color</label>
<div class="clr-field" style="color: rgb(255, 255, 255);"><button type="button" aria-labelledby="clr-open-label"></button><input type="text" class="form-control" data-coloris="" value="#ffffff" id="selectFontColor"></div>
</div>
<div class="col-lg-4">
<label class="form-label">Spoken word color</label>
<div class="clr-field" style="color: rgb(11, 214, 28);"><button type="button" aria-labelledby="clr-open-label"></button><input type="text" class="form-control" data-coloris="" value="#0bd61c" id="selectFontHighlightColor"></div>
</div>
<div class="col-lg-4 boxcolor" style="display: none;">
<label class="form-label">Box color</label>
<div class="clr-field" style="color: rgb(255, 255, 255);"><button type="button" aria-labelledby="clr-open-label"></button><input type="text" class="form-control" data-coloris="" value="#ffffff" id="selectBoxColor"></div>
</div>
</div>
</div>
<div class="settings-wrap">
<label class="form-label-heading">Caption styling</label>
<div class="row">
<div class="col-lg-4">
<label class="form-label">Caption position</label>
<select class="form-select" id="SelectCaptionPosition">
<option selected="" value="center">Center</option>
<option value="top">Top</option>
<option value="bottom">Bottom</option>
<option value="default">Bottom-Center</option>
</select>
</div>
<!-- -->
<div class="col-lg-4">
<label class="form-label">Caption lines</label>
<select class="form-select" id="SelectCaptionLines">
<!-- <option value="default">Default</option> -->
<option value="one_word">One Word</option>
<option value="one">One Line</option>
<option value="two">Two Lines</option>
<option selected="" value="three">Three Lines</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label">Highlight style</label>
<select class="form-select" id="SelectHeighlightType">
<option value="color">Color</option>
<option selected="" value="bounce">Bounce</option>
<option value="underline">Underline</option>
<option value="box">Box</option>
<option value="box_all">Box all text</option>
</select>
</div>
</div>
</div>
<div class="settings-wrap">
<!-- <label class="form-label-heading">Caption styling</label> -->
<div class="row">
<div class="col-lg-12">
<label>
<input type="checkbox" id="SelectUpperCaseAll" data-toggle="toggle" checked="">
Uppercase all texts
</label>
<!-- <P>Convert caption to all uppercase. please note that certain fonts can only display uppercase characters.</P>-->
</div>
<div class="col-lg-12">
<label>
<input type="checkbox" id="SelectShadowEffect" data-toggle="toggle">
Shadow effect
</label>
<!-- <P>Convert caption to all uppercase. please note that certain fonts can only display uppercase characters.</P>-->
</div>
</div>
</div>
<hr style="border-top:1px solid #282a2c !important;clear:both">
<div class="form-group">
<!-- <label>
<input type="checkbox" id="showPreviewButton" data-toggle="toggle" checked>
Show Preview
</label> -->
<button type="button" class="btn btn-success btn-block btn-round btn-modal-adjustment" disabled="" id="caption_setting_save_button">Save</button>
<p class="upgradePlanLink">upgrade to <a href="javascript:void(0);" onclick="openPlanModel()" class="link-primary advancePlan">Automated plan</a> to customize captions</p>
</div>
</form>
</div>
<div class="col-md-4 ml-auto preview-box">
<!-- <img src="/static/images/phone-image1.png" alt="" class="img-fluid" > -->
<div class="preview-container center">
<p class="preview-text center textbold three uppercaseall" style="font-family: Courier-New; font-size: 13.3333px; line-height: 13.3333px; color: rgb(255, 255, 255);">This is <br> your caption
<br><span class="highlight-text bounce" style="color: rgb(11, 214, 28);">preview</span></p>
</div>
<!-- <p class="preview-text center">
This is your caption <span class="highlight-text">preview</span>
</p> -->
<!-- <img src="/static/images/phone_image.png" alt="" class="img-fluid" > -->
<!-- <img src="/static/images/phone_image.png" alt="" class="img-fluid" style="max-width:75%;"> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css">
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
<script>
let getFontFamily = '';
let getFontStyle = '';
let getFontSize = '';
let getFontColor = '';
let getHighlightColor = '';
let getCaptionPosition = '';
let captionlines = '';
let highlightType = '';
let upperCaseAll = '';
var userSettingsDefault = {
"font_family": "Courier-New",
"font_style": "bold",
"font_size": 40,
"font_color":"#ffffff",
"spoken_word_color":"#ffffff",
"box_color":"#0bd61c",
"caption_position":"center",
"caption_lines":"three",
"highlight_style":"bounce",
"uppercase":"True",
"shadow":"False"
}
/*
0 index is for user settings passed to the template. it's added to reload it if user close the popup without
clicking the save button,
If user clicks the save button 0 index is updated with the new values
*/
var settingTemplates = {
0: { "font_family": "Courier-New",
"font_style": "bold",
"font_size": 40,
"font_color":"#ffffff",
"spoken_word_color":"#ffffff",
"box_color":"#0bd61c",
"caption_position":"center",
"caption_lines":"three",
"highlight_style":"bounce",
"uppercase":"True",
"shadow":"False"
},
1: {"font_family": "Verdana", "font_style": "bold","font_size": 40, "font_color":"#ffffff", "spoken_word_color":"#ffffff", "box_color":"", "caption_position":"default", "caption_lines":"one", "highlight_style":"color", "uppercase":"1", "shadow":"1"},
2: {"font_family": "Arial", "font_style": "bold","font_size": 30, "font_color":"#ffffff", "spoken_word_color":"#e60725", "box_color":"", "caption_position":"bottom", "caption_lines":"two", "highlight_style":"color", "uppercase":"1", "shadow":"0"},
3: {"font_family": "Verdana", "font_style": "bold","font_size": 40, "font_color":"#ffffff", "spoken_word_color":"#ffffff", "box_color":"", "caption_position":"top", "caption_lines":"one_word", "highlight_style":"color", "uppercase":"1", "shadow":"0"},
4: {"font_family": "Verdana", "font_style": "bold","font_size": 30, "font_color":"#ffffff", "spoken_word_color":"#ffffff", "box_color":"#000000", "caption_position":"default", "caption_lines":"one", "highlight_style":"box_all", "uppercase":"1", "shadow":"0"},
5: {"font_family": "Verdana", "font_style": "regular","font_size": 40, "font_color":"#ffffff", "spoken_word_color":"#ffffff", "box_color":"#3a8230", "caption_position":"default", "caption_lines":"three", "highlight_style":"box", "uppercase":"1", "shadow":"1"},
6: {"font_family": "Courier-New", "font_style": "bold","font_size": 40, "font_color":"#ffffff", "spoken_word_color":"#0bd61c", "box_color":"", "caption_position":"center", "caption_lines":"three", "highlight_style":"bounce", "uppercase":"1", "shadow":"0"},
// Add more settings as needed
};
</script>
<script>
getFontFamily = 'Courier-New';
getFontStyle = 'bold';
getFontSize = '40';
getFontColor = '#ffffff';
getHighlightColor = '#0bd61c';
getCaptionPosition = 'center';
captionlines = 'three';
highlightType = 'bounce';
upperCaseAll = 'True';
addShadowEffect = 'False';
</script>
<script>
$(document).ready(function () {
if(getFontFamily && getFontFamily != ''){
$('.preview-text').css('fontFamily', String(getFontFamily))
}
if(getFontStyle && getFontStyle != '' && getFontStyle == 'bold'){
$('.preview-box .preview-text').addClass( 'textbold');
}
if(getFontSize && getFontSize != ''){
var newFontSize = parseInt(getFontSize) / 3;
var newlineHeight = newFontSize;
$('.preview-text').css('fontSize', String(newFontSize+'px'))
$('.preview-text').css('lineHeight', String(newFontSize+'px'))
}
if(getFontColor && getFontColor != ''){
$('.preview-text').css('color', String(getFontColor))
}
if(getHighlightColor && getHighlightColor != ''){
$('.highlight-text').css('color', String(getHighlightColor))
// $('.highlight-text').css('background-color', String(getHighlightColor))
}else{
$('.highlight-text').addClass('color')
}
if(getCaptionPosition && getCaptionPosition != ''){
$('.preview-box .preview-container').removeClass('center');
if (getCaptionPosition == 'default' || getCaptionPosition == 'bottom_center'){
$('.preview-box .preview-container').addClass( 'bottom_center');
}else{
$('.preview-box .preview-container').addClass(getCaptionPosition);
}
}
// if(getCaptionPosition && getCaptionPosition != ''){
// $('.preview-box .preview-text').removeClass('center');
// if (getCaptionPosition == 'default' || getCaptionPosition == 'bottom_center'){
// $('.preview-box .preview-text').addClass( 'bottom_center');
// }else{
// $('.preview-box .preview-text').addClass(getCaptionPosition);
// }
// }
if(captionlines && captionlines != ''){
var highlightText = $('.highlight-text')[0]
if (captionlines == 'one_word'){
$('.preview-text').html('')
$('.preview-text').html(highlightText)
}
if (captionlines == 'one'){
$('.preview-text').html('')
$('.preview-text').html(highlightText)
}
if (captionlines == 'two'){
$('.preview-text').html('')
$('.preview-text').html('This is your <br> caption')
// $('.preview-text').html('Preview \n')
// $('.preview-text').append('<br>')
$('.preview-text').append(highlightText)
}
if (captionlines == 'three'){
$('.preview-text').text('')
// $('.preview-text').text('Caption \n Preview \n')
$('.preview-text').html('This is <br> your caption \n')
$('.preview-text').append('<br>')
$('.preview-text').append(highlightText)
}
if (captionlines == 'default'){
$('.preview-text').html('')
$('.preview-text').html('this is your caption ')
// $('.preview-text').html('Caption Preview')
$('.preview-text').append(highlightText)
}
$('.preview-box .preview-text').addClass(captionlines);
}
if(highlightType && highlightType != ''){
$('.boxcolor').css('display', 'none')
var boxColor = $('#selectBoxColor').val()
if (highlightType == 'box'){
$('.boxcolor').css('display', 'block')
$('.highlight-text').css('background-color', String(boxColor))
}
if (highlightType == 'box_all'){
$('.boxcolor').css('display', 'block')
$('.preview-text').css('background-color', String(boxColor))
}
$('.preview-box .preview-text .highlight-text').addClass(highlightType);
}
if ($('#SelectUpperCaseAll').is(":checked")){
$('.preview-text').addClass('uppercaseall');
}else{
$('.preview-text').removeClass('uppercaseall');
}
if ($('#SelectShadowEffect').is(":checked")){
$('.preview-text').addClass('addshadoweffect');
var highTextColor = $('#selectFontHighlightColor').val()
$('.addshadoweffect').css('-webkit-text-stroke-color', String(highTextColor))
}else{
$('.preview-text').removeClass('addshadoweffect');
}
$("#captionSetting").click(function(){
$('#channel_error_staff').hide();
$("#captionSettingModal").modal('show');
});
$(".captionSetting").click(function(){
$('#channel_error_staff').hide();
if($('#settingsModal').length > 0){
$("#settingsModal").modal('hide');
}
setTimeout(function(){
$("#captionSettingModal").modal('show');
},1000);
});
$("#captionSettingModal .close").click(function(){
$('#channel_error_staff').hide();
$("#captionSettingModal").modal('hide');
});
});
function openPlanModel(){
if($("#settingsModal").length > 0){
$("#captionSettingModal").modal('hide');
$("#settingsModal").modal('show');
}else{
window.open("/google/main/settings",'_self','');
}
}
function saveUserSettings(){
let csrf_token = "IjkzNjNkNDBkNWQxNjRiMGEzMTg1ZThlOGMzNWIwOGI5NTU2MzFlMTUi.ZyttuQ.Z0TCW-PflpZRv_wCulta9cj8FsA";
let fontFamily = $('#selectFontFamily').val();
let fontStyle = $('#selectFontStyle').val();
let fontSize = $('#selectFontSize').val();
let fontColor = $('#selectFontColor').val();
let highlightColor = $('#selectFontHighlightColor').val();
let boxColor = $('#selectBoxColor').val();
let captionPosition = $('#SelectCaptionPosition').val();
let captionlines = $('#SelectCaptionLines').val();
let highlightType = $('#SelectHeighlightType').val();
let upperCaseAll = false;
let addShadowEffect = false;
if ($('#SelectUpperCaseAll').is(":checked")){
upperCaseAll = true;
}
if ($('#SelectShadowEffect').is(":checked")){
addShadowEffect = true;
}
$('#loading_icon_model').show();
$.ajax({
type: 'POST',
url: '/video/save_user_setting',
data: JSON.stringify({
fontFamily : fontFamily,
fontStyle : fontStyle,
fontSize : fontSize,
fontColor : fontColor,
highlightColor : highlightColor,
captionPosition : captionPosition,
captionlines : captionlines,
highlightType : highlightType,
boxColor : boxColor,
upperCaseAll:upperCaseAll,
shadowEffect:addShadowEffect
}),
contentType: "application/json",
headers: {
"X-CSRFToken": csrf_token,
},
success: function (response) {
settingTemplates[0] = {
"font_family": fontFamily,
"font_style": fontStyle,
"font_size": fontSize,
"font_color":fontColor,
"spoken_word_color":highlightColor,
"box_color":boxColor,
"caption_position":captionPosition,
"caption_lines":captionlines,
"highlight_style":highlightType,
"uppercase":upperCaseAll,
"shadow":addShadowEffect
}
$("#captionSettingModal").modal('hide');
$('#loading_icon_model').hide();
},
error: function (jqXHR, textStatus, errorThrown) {
$('#loading_icon_model').hide();
}
});
}
$('#showPreviewButton').on('change', function() {
if ($('#showPreviewButton').is(":checked")){
$('.preview-box').css('display', 'block');
}else{
$('.preview-box').css('display', 'none')
}
});
$('#selectFontFamily').on('change', function() {
$('.preview-text').css('fontFamily', String(this.value))
removeTemplateSelection();
});
$('#selectFontStyle').on('change', function() {
if ($('.preview-box .preview-text').hasClass('textbold')) {
$('.preview-box .preview-text').removeClass( 'textbold');
}
if (this.value == 'bold'){
$('.preview-box .preview-text').addClass( 'textbold');
}
removeTemplateSelection();
});
$('#selectFontSize').on('change', function() {
var newFontSize = parseInt(this.value) / 3;
var newlineHeight = newFontSize;
$('.preview-text').css('fontSize', String(newFontSize+'px'))
$('.preview-text').css('lineHeight', String(newFontSize+'px'))
removeTemplateSelection();
});
$('#selectFontColor').on('input', function() {
$('.preview-text').css('color', String(this.value))
removeTemplateSelection();
});
$('#selectFontHighlightColor').on('input', function() {
var hType = $('#SelectHeighlightType').val()
var boxColor = $('#selectBoxColor').val()
if (hType == 'box'){
$('.highlight-text').css('color', String(this.value))
$('.highlight-text').css('background-color', String(boxColor))
}
else if (hType == 'box_all'){
$('.highlight-text').css('color', String(this.value))
$('.preview-text').css('background-color', String(boxColor))
}
else{
$('.highlight-text').css('color', String(this.value))
// $('.preview-text').css('background-color', String(this.value))
}
$('.addshadoweffect').css('-webkit-text-stroke-color', String(this.value))
// if ($('#SelectHeighlightType')){
// $('.highlight-text').addClass( $('#SelectHeighlightType').val())
// }else{
// $('.highlight-text').addClass('color')
// }
removeTemplateSelection();
});
$('#selectBoxColor').on('input', function() {
var boxColor = $('#selectBoxColor').val();
let highlightType = $('#SelectHeighlightType').val();
$('.highlight-text').css('background-color', '')
$('.preview-text').css('background-color', '')
if (highlightType == 'box'){
$('.boxcolor').css('display', 'block')
$('.highlight-text').css('background-color', String(boxColor))
}
if (highlightType == 'box_all'){
$('.boxcolor').css('display', 'block')
$('.preview-text').css('background-color', String(boxColor))
}
// $('.highlight-text').css('background-color', String(this.value))
removeTemplateSelection();
});
$('#SelectCaptionPosition').on('change', function() {
if ($('.preview-box .preview-container').hasClass('top')) {
$('.preview-box .preview-container').removeClass( 'top');
}
if ($('.preview-box .preview-container').hasClass('center')) {
$('.preview-box .preview-container').removeClass( 'center');
}
if ($('.preview-box .preview-container').hasClass('bottom')) {
$('.preview-box .preview-container').removeClass( 'bottom');
}
if ($('.preview-box .preview-container').hasClass('bottom_center')) {
$('.preview-box .preview-container').removeClass( 'bottom_center');
}
if (this.value == 'top'){
$('.preview-box .preview-container').addClass( 'top');
}else if (this.value == 'center'){
$('.preview-box .preview-container').addClass( 'center');
}else if (this.value == 'bottom'){
$('.preview-box .preview-container').addClass( 'bottom');
}else if (this.value == 'default'){
$('.preview-box .preview-container').addClass( 'bottom_center');
}
removeTemplateSelection();
});
// $('#SelectCaptionPosition').on('change', function() {
// if ($('.preview-box .preview-text').hasClass('top')) {
// $('.preview-box .preview-text').removeClass( 'top');
// }
// if ($('.preview-box .preview-text').hasClass('center')) {
// $('.preview-box .preview-text').removeClass( 'center');
// }
// if ($('.preview-box .preview-text').hasClass('bottom')) {
// $('.preview-box .preview-text').removeClass( 'bottom');
// }
// if ($('.preview-box .preview-text').hasClass('bottom_center')) {
// $('.preview-box .preview-text').removeClass( 'bottom_center');
// }
// if (this.value == 'top'){
// $('.preview-box .preview-text').addClass( 'top');
// }else if (this.value == 'center'){
// $('.preview-box .preview-text').addClass( 'center');
// }else if (this.value == 'bottom'){
// $('.preview-box .preview-text').addClass( 'bottom');
// }else if (this.value == 'default'){
// $('.preview-box .preview-text').addClass( 'bottom_center');
// }
// });
$('#SelectCaptionLines').on('input', function() {
$('.highlight-text').removeClass('default')
$('.highlight-text').removeClass('one')
$('.highlight-text').removeClass('two')
$('.highlight-text').removeClass('three')
var highlightText = $('.highlight-text')[0]
if (this.value == 'one_word'){
$('.preview-text').html('')
$('.preview-text').html(highlightText)
}
if (this.value == 'one'){
$('.preview-text').html('')
$('.preview-text').html(highlightText)
}
if (this.value == 'two'){
$('.preview-text').html('')
$('.preview-text').html('This is your <br> caption')
// $('.preview-text').append('<br>')
$('.preview-text').append(highlightText)
}
if (this.value == 'three'){
$('.preview-text').html('')
$('.preview-text').html('This is <br> your caption \n')
$('.preview-text').append('<br>')
$('.preview-text').append(highlightText)
}
if (this.value == 'default'){
$('.preview-text').html('')
$('.preview-text').html('this is your caption ')
$('.preview-text').append(highlightText)
}
$('.highlight-text').addClass( this.value )
removeTemplateSelection();
});
$('#SelectHeighlightType').on('input', function() {
$('.preview-text').css('background-color', '')
$('.preview-text').css('color', '')
$('.highlight-text').css('color', '')
$('.boxcolor').css('display', 'none')
$('.highlight-text').removeClass('bounce')
$('.highlight-text').removeClass('underline')
$('.highlight-text').removeClass('box')
$('.highlight-text').removeClass('color')
$('.highlight-text').removeClass('box_all')
var boxColor = $('#selectBoxColor').val()
var highTextColor = $('#selectFontHighlightColor').val()
var textColor = $('#selectFontColor').val()
if (this.value == 'box_all'){
$('.boxcolor').css('display', 'block')
$('.highlight-text').css('color', String(highTextColor))
$('.preview-text').css('background-color', String(boxColor))
}
if (this.value == 'box'){
$('.boxcolor').css('display', 'block')
$('.highlight-text').css('color', String(highTextColor))
$('.highlight-text').css('background-color', String(boxColor))
}
$('.highlight-text').css('color', String(highTextColor))
$('.preview-text').css('color', String(textColor))
$('.highlight-text').addClass( this.value )
if(this.value != 'box' && this.value != 'box_all'){
$('#selectBoxColor').parents('.boxcolor').hide();
}else{
$('#selectBoxColor').parents('.boxcolor').show();
}
removeTemplateSelection();
});
$('#SelectUpperCaseAll').on('change', function() {
console.log(this.value )
if ($('#SelectUpperCaseAll').is(":checked")){
$('.preview-text').addClass('uppercaseall');
}else{
$('.preview-text').removeClass('uppercaseall');
}
removeTemplateSelection();
});
$('#SelectShadowEffect').on('change', function() {
console.log(this.value )
if ($('#SelectShadowEffect').is(":checked")){
$('.preview-text').addClass('addshadoweffect');
var highTextColor = $('#selectFontHighlightColor').val()
$('.addshadoweffect').css('-webkit-text-stroke-color', String(highTextColor))
}else{
$('.preview-text').removeClass('addshadoweffect');
}
removeTemplateSelection();
});
$('.design_template').click(function() {
// Get the data-id attribute value of the clicked image
var id = $(this).data('set');
removeTemplateSelection()
applySettingTemplates(id);
$(this).addClass('img-border');
});
function removeTemplateSelection(){
$('.design_template').removeClass('img-border');
}
function applySettingTemplates(templateId){
if(settingTemplates[templateId]){
console.log(settingTemplates[templateId]);
$('#selectFontFamily').val(settingTemplates[templateId].font_family);
$('#selectFontFamily').trigger('change')
$('#selectFontStyle').val(settingTemplates[templateId].font_style);
$('#selectFontStyle').trigger('change')
$('#SelectCaptionPosition').val(settingTemplates[templateId].caption_position);
$('#SelectCaptionPosition').trigger('change')
$('#SelectCaptionLines').val(settingTemplates[templateId].caption_lines);
$('#SelectCaptionLines').trigger('input')
$('#SelectHeighlightType').val(settingTemplates[templateId].highlight_style);
$('#SelectHeighlightType').trigger('input')
$('#SelectUpperCaseAll').prop('checked', false)
$('#SelectShadowEffect').prop('checked', false)
if(settingTemplates[templateId].uppercase == '1'){
$('#SelectUpperCaseAll').prop('checked', true)
}
$('#SelectUpperCaseAll').trigger('input')
if(settingTemplates[templateId].shadow == '1'){
$('#SelectShadowEffect').prop('checked', true)
}
$('#SelectShadowEffect').trigger('input')
$('#selectFontSize').val(settingTemplates[templateId].font_size);
$('#selectFontSize').trigger('change')
$('#selectFontColor').val(settingTemplates[templateId].font_color);
$('#selectFontColor').trigger('input')
$('#selectFontHighlightColor').val(settingTemplates[templateId].spoken_word_color);
$('#selectFontHighlightColor').trigger('input')
$('#selectBoxColor').val(settingTemplates[templateId].box_color);
$('#selectBoxColor').trigger('input')
if(settingTemplates[templateId].box_color == ''){
$('#selectBoxColor').parents('.boxcolor').hide();
}
}
}
$("#captionSettingModal").on("hidden.bs.modal", function () {
// put your default event here
applySettingTemplates(0);
});
</script>
<!-- Login Modal -->
<div class="signinmodal" id="signInModal" tabindex="-1" aria-labelledby="signInModal" aria-hidden="true" style="display:none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header p-4">
<h5 class="modal-title" id="exampleModalLabel">Login</h5>
<button type="button" class="btn-close close_log_in" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<div class="row gy-3" id="custom_log_in_success" style="display:none;">
<h5>Check your email</h5>
<p>You should receive an email in the next few seconds with a link to sign you in. Be sure to check your spam folder.</p>
</div>
<div id="log_in_main">
<form action="#" method="post" id="form_custom_log_in" onsubmit="return false;">
<div class="row gy-3">
<div class="col-12" style="color:#FF0000;" id="custom_log_in_error"></div>
<div class="col-12">
<label for="email" class="form-label fw-bold">Email <span class="text-danger">*</span></label>
<input type="email" class="form-control border-dark p-3" name="email_log" id="email_log" placeholder="[email protected]" required="">
</div>
<div class="col-12">
<div class="d-grid">
<button class="btn btn-lg btn-primary btn_custom_log_in" style="font-size: 18px;" type="button">Sign in with email</button>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-12">
<p class="mt-4 mb-4 fw-bold text-center">Or</p>
<div class="mb-4">
<a href="/google/main" class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="34px" height="28px" preserveAspectRatio="xMidYMid" viewBox="0 0 256 262" id="google"><path fill="#4285F4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"></path><path fill="#34A853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"></path><path fill="#FBBC05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"></path><path fill="#EB4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"></path></svg>
<span class="ms-2 fs-6">Sign In with Google</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- light-dark mode button -->
<!--<a href="javascript: void(0);" id="mode" class="mode-btn text-white rounded-end" onclick="toggleBtn()">
<i class="uil uil-brightness mode-dark mx-auto"></i>
<i class="uil uil-moon bx-spin mode-light"></i>
</a>-->
<!-- START NAVBAR -->
<nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky sticky-light" id="navbar">
<div class="container-fluid">
<!-- LOGO -->
<a class="navbar-brand logo text-uppercase" href="/">
PASTORS.AI
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="mdi mdi-menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto" id="navbar-navlist">
<!-- <li class="nav-item">-->
<!-- <a class="nav-link" href="#features">Use Cases</a>-->
<!-- </li>-->
<li class="nav-item">
<a class="nav-link" href="#features">Sermon Repurposing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sermonclips">SERMON CLIPS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">AI RESOURCES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sermon-translations">SERMON TRANSLATIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#demo">Demo</a>
</li>
</ul>
<div class="ms-auto">
<a class="btn bg-gradiant" href="/google/main" style="display:none;">Login / Signup</a>
<a class="btn bg-gradiant log_in" href="javascript:void(0);">Login / Signup</a>
</div>
</div>
</div>
</nav>
<!-- END NAVBAR -->
<!-- home section -->
<section class="home-4 bg-soft-primary" id="home">
<!-- start container -->
<div class="container">
<div class="home-content">
<div class="row align-items-center">
<div class="col-lg-6" style="text-align:right;">
<!-- <img src="/static/images/final.gif" alt="" class="img-fluid">-->
<!-- <img src="/static/images/gif_new_trans.gif" alt="" class="img-fluid" style="max-width:75%;">-->
<!-- <img src="/static/images/pc_background_1_updated.png" alt="" class="img-fluid" style="max-width:75%;">-->
<img src="/static/images/pc_background_2.png" alt="" class="img-fluid" style="max-width:75%;">
<!-- <video autoplay muted class="img-fluid" style="max-width:60%;" controls="controls">-->
<!-- <source src="/static/images/video.mp4" type="video/mp4" />-->
<!-- </video>-->
</div>
<div class="col-lg-6 ">
<h1>AI for Churches</h1>
<p class="text-muted mt-4">Get Bible studies, devotionals, and clips based on your sermon in 30 minutes—just from a YouTube link</p>
<div class="d-flex mt-4">
<a href="/#demo" class="btn bg-gradiant">Free demo</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="logo-box ">
<div class="tns-outer" id="client-slider-ow"><div class="tns-liveregion tns-visually-hidden" aria-live="polite" aria-atomic="true">slide <span class="current">8</span> of 6</div><div id="client-slider-mw" class="tns-ovh"><div class="tns-inner" id="client-slider-iw"><div class="client-slider tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" id="client-slider" style="transition-duration: 0s; transform: translate3d(-35%, 0px, 0px);"><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@apostolicchurchdallas/" target="_blank"> <img src="/static/images/apostolic_logo.png" alt="" class="img-fluid apostolic_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/@wisdominternational" target="_blank"> <img src="/static/images/wisdom_logo.png" alt="" class="img-fluid wisdom_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@lakepointechurchlive/" target="_blank"> <img src="/static/images/lake_point_logo.png" alt="" class="img-fluid lake_point_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@fiumc/" target="_blank"> <img src="/static/images/fiumc_logo.png" alt="" class="img-fluid fiumc_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@ChristianLifeCenterTinley/" target="_blank"> <img src="/static/images/christian_life_logo.png" alt="" class="img-fluid christian_life_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@hopecitychurchcc/" target="_blank"> <img src="/static/images/hope_city_logo.png" alt="" class="img-fluid hope_city_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@apostolicchurchdallas/" target="_blank"> <img src="/static/images/apostolic_logo.png" alt="" class="img-fluid apostolic_logo"></a>
</div>
<div class="item text-center tns-item tns-slide-active" id="client-slider-item0">
<a href="/@wisdominternational" target="_blank"> <img src="/static/images/wisdom_logo.png" alt="" class="img-fluid wisdom_logo"></a>
</div>
<div class="item text-center tns-item" id="client-slider-item1" aria-hidden="true" tabindex="-1">
<a href="/church/@lakepointechurchlive/" target="_blank"> <img src="/static/images/lake_point_logo.png" alt="" class="img-fluid lake_point_logo"></a>
</div>
<div class="item text-center tns-item" id="client-slider-item2" aria-hidden="true" tabindex="-1">
<a href="/church/@fiumc/" target="_blank"> <img src="/static/images/fiumc_logo.png" alt="" class="img-fluid fiumc_logo"></a>
</div>
<!-- <div class="item text-center">-->
<!-- <a href="/@BaysideChapelOregon" target="_blank"> <img src="/static/images/bayside_logo.png" alt="" class="img-fluid bayside_logo"></a>-->
<!-- </div>-->
<!-- <div class="item text-center">-->
<!-- <a href="/@becomenew" target="_blank"> <img src="/static/images/become_new_logo.png" alt="" class="img-fluid become_new_logo"></a>-->
<!-- </div>-->
<div class="item text-center tns-item" id="client-slider-item3" aria-hidden="true" tabindex="-1">
<a href="/church/@ChristianLifeCenterTinley/" target="_blank"> <img src="/static/images/christian_life_logo.png" alt="" class="img-fluid christian_life_logo"></a>
</div>
<!--<div class="item text-center">
<a href="/@redeemingbabel" target="_blank"> <img src="/static/images/redeemingbabel_logo.png" alt="" class="img-fluid redeemingbabel_logo"></a>
</div>-->
<div class="item text-center tns-item" id="client-slider-item4" aria-hidden="true" tabindex="-1">
<a href="/church/@hopecitychurchcc/" target="_blank"> <img src="/static/images/hope_city_logo.png" alt="" class="img-fluid hope_city_logo"></a>
</div>
<!-- <div class="item text-center">
<a href="/@xchurch" target="_blank"> <img src="/static/images/xchurch_logo.png" alt="" class="img-fluid xchurch_logo"></a>
</div> -->
<!-- <div class="item text-center">-->
<!-- <a href="/@nimble.church" target="_blank"> <img src="/static/images/nimble_logo.png" alt="" class="img-fluid nimble_logo"></a>-->
<!-- </div>-->
<div class="item text-center tns-item" id="client-slider-item5" aria-hidden="true" tabindex="-1">
<a href="/church/@apostolicchurchdallas/" target="_blank"> <img src="/static/images/apostolic_logo.png" alt="" class="img-fluid apostolic_logo"></a>
</div>
<div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/@wisdominternational" target="_blank"> <img src="/static/images/wisdom_logo.png" alt="" class="img-fluid wisdom_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@lakepointechurchlive/" target="_blank"> <img src="/static/images/lake_point_logo.png" alt="" class="img-fluid lake_point_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@fiumc/" target="_blank"> <img src="/static/images/fiumc_logo.png" alt="" class="img-fluid fiumc_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@ChristianLifeCenterTinley/" target="_blank"> <img src="/static/images/christian_life_logo.png" alt="" class="img-fluid christian_life_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@hopecitychurchcc/" target="_blank"> <img src="/static/images/hope_city_logo.png" alt="" class="img-fluid hope_city_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/church/@apostolicchurchdallas/" target="_blank"> <img src="/static/images/apostolic_logo.png" alt="" class="img-fluid apostolic_logo"></a>
</div><div class="item text-center tns-item tns-slide-cloned" aria-hidden="true" tabindex="-1">
<a href="/@wisdominternational" target="_blank"> <img src="/static/images/wisdom_logo.png" alt="" class="img-fluid wisdom_logo"></a>
</div></div></div></div></div>
</div>
</div>
</div>
</div>
<!-- end container -->
</section>
<!-- end home section -->
<!-- start features -->
<div class="section features" id="features">
<!-- start container -->
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="title text-center">
<h6 class="mb-0 fw-bold text-primary">Sermon Repurposing</h6>
<h2 class="f-40">Your sermon, beyond Sunday</h2>
<p class="text-muted">Enter a YouTube link of your church service and get sermon-based resources in 30 minutes.</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row align-items-center">
<div class="col-lg-4 order-2 order-lg-first">
<div class="features-item text-start text-lg-end">
<div class="icon avatar-sm text-center ms-lg-auto rounded-circle">
<img src="/static/images/clips.png">
</div>
<div class="content mt-3">
<h5>Automated clips</h5>
<p>Ready-to-share captioned clips of the best parts of the sermon, with no editing required <a href="/sermons/78069/5/" target="_blank">(example)</a></p>
</div>
</div>
<div class="features-item text-start text-lg-end mt-5">
<div class="icon avatar-sm text-center ms-lg-auto rounded-circle">
<img src="/static/images/podcast.png">
</div>
<div class="content mt-3">
<h5>Podcasts</h5>
<p>AI podcast discussing each service (<a href="/sermons/80559/8/" target="_blank">example</a>), available on the <a href="#pricing">Automated + Team plans</a>
</p></div>
</div>
<div class="features-item text-start text-lg-end mt-5 mb-5">
<div class="icon avatar-sm text-center ms-lg-auto rounded-circle">
<img src="/static/images/devotionals.png">
</div>
<div class="content mt-3">
<h5>Devotionals</h5>
<p>5-day devotional with Scripture and timestamped links to the key points of the sermon <a href="/sermons/78057/3/" target="_blank">(example)</a></p>
</div>
</div>
</div>
<div class="col-lg-4">
<img src="/static/images/features_new.png" alt="" class="img-fluid w-100">
<!-- <img src="/static/images/mobilescreen_usescase_new_final.png" alt="" class="img-fluid w-100">-->
<!-- <img src="/static/images/mobilescreen_usescase_new.png" alt="" class="img-fluid w-100">-->
</div>
<div class="col-lg-4 order-last">
<div class="features-item">
<div class="icon avatar-sm text-center rounded-circle">
<img src="/static/images/summaries.png">
</div>
<div class="content mt-3">
<h5>Discussion questions</h5>
<p>Sermon-based Bible study with timestamped links to the relevant parts of the message <a href="/sermons/78050/2/" target="_blank">(example)</a></p>
</div>
</div>
<div class="features-item mt-5">
<div class="icon avatar-sm text-center rounded-circle">
<img src="/static/images/chat.png">
</div>
<div class="content mt-3">
<h5>Chat w/ the sermon</h5>
<p>Make your own resources by asking the chatbot anything about the sermon <a href="/sermons/78066/6/" target="_blank">(example)</a></p>
</div>
</div>
<div class="features-item mt-5">
<div class="icon avatar-sm text-center rounded-circle">
<img src="/static/images/manuscript.png">
</div>
<div class="content mt-3">
<h5>Manuscript uploads</h5>
<p>Upload your sermon manuscript and create resources before Sunday service <a href="/video/chat/78634" target="_blank">(example)</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div>
<!-- end features -->
<!-- slider section -->
<section class="section app-slider bg-light" id="sermonclips">
<!-- start container -->
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="title text-center mb-5">
<h6 class="mb-0 fw-bold text-primary">Sermon Clips</h6>
<!-- <h2 class="f-40">Get Reels + Shorts for every sermon</h2>-->
<h2 class="f-40">Automated sermon clips for social media</h2>
<!-- <p class="text-muted">Get 10 clips from each sermon (with or without captions) to post to social media</p>-->
<p class="text-muted">No searching or editing required. Just pick your favorites from the captioned clips that AI makes for you</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="swiper-container swiper-container-horizontal">
<div class="fream-phone ">
<img src="/static/images/phone-fream.png" alt="" class="img-fluid">
</div>
<div class="swiper-wrapper" style="transform: translate3d(-720px, 0px, 0px); transition-duration: 5000ms;"><div class="swiper-slide border-radius swiper-slide-duplicate" data-swiper-slide-index="3" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4033" target="_blank"><img src="/static/images/image4.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.youtube.com/shorts/7a4EqJl_7c4" target="_blank"><img src="/static/images/4.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/4_new.png" alt="" class="img-fluid">
</div><div class="swiper-slide border-radius swiper-slide-duplicate" data-swiper-slide-index="4" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4034" target="_blank"><img src="/static/images/image5.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.youtube.com/shorts/EyuCbVSyRTg" target="_blank"><img src="/static/images/5.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/5_new.png" alt="" class="img-fluid">
</div><div class="swiper-slide border-radius swiper-slide-duplicate" data-swiper-slide-index="5" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4035" target="_blank"><img src="/static/images/image6.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.instagram.com/reel/C56Z2OyqFxK/" target="_blank"><img src="/static/images/6.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/6_new.png" alt="" class="img-fluid">
</div>
<div class="swiper-slide border-radius swiper-slide-prev" data-swiper-slide-index="0" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4030" target="_blank"><img src="/static/images/image1.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.youtube.com/shorts/sO6KWbt6-rs" target="_blank"><img src="/static/images/1.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/1_new.png" alt="" class="img-fluid">
</div>
<div class="swiper-slide border-radius swiper-slide-active" data-swiper-slide-index="1" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4031" target="_blank"><img src="/static/images/image2.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.instagram.com/reel/C56ZEppKVlS/" target="_blank"><img src="/static/images/2.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/2_new.png" alt="" class="img-fluid">
</div>
<div class="swiper-slide border-radius swiper-slide-next" data-swiper-slide-index="2" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4032" target="_blank"><img src="/static/images/image3.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.youtube.com/shorts/daYA0dGCo8Y" target="_blank"><img src="/static/images/3.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/3_new.png" alt="" class="img-fluid">
</div>
<div class="swiper-slide border-radius" data-swiper-slide-index="3" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4033" target="_blank"><img src="/static/images/image4.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.youtube.com/shorts/7a4EqJl_7c4" target="_blank"><img src="/static/images/4.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/4_new.png" alt="" class="img-fluid">
</div>
<div class="swiper-slide border-radius" data-swiper-slide-index="4" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4034" target="_blank"><img src="/static/images/image5.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.youtube.com/shorts/EyuCbVSyRTg" target="_blank"><img src="/static/images/5.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/5_new.png" alt="" class="img-fluid">
</div>
<div class="swiper-slide border-radius" data-swiper-slide-index="5" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4035" target="_blank"><img src="/static/images/image6.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.instagram.com/reel/C56Z2OyqFxK/" target="_blank"><img src="/static/images/6.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/6_new.png" alt="" class="img-fluid">
</div>
<div class="swiper-slide border-radius swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="0" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4030" target="_blank"><img src="/static/images/image1.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.youtube.com/shorts/sO6KWbt6-rs" target="_blank"><img src="/static/images/1.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/1_new.png" alt="" class="img-fluid">
</div><div class="swiper-slide border-radius swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="1" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4031" target="_blank"><img src="/static/images/image2.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.instagram.com/reel/C56ZEppKVlS/" target="_blank"><img src="/static/images/2.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/2_new.png" alt="" class="img-fluid">
</div><div class="swiper-slide border-radius swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="2" style="width: 210px; margin-right: 30px;">
<!--<a href="/video/chat/4032" target="_blank"><img src="/static/images/image3.png" alt="" class="img-fluid"></a>-->
<!--<a href="https://www.youtube.com/shorts/daYA0dGCo8Y" target="_blank"><img src="/static/images/3.jpg" alt="" class="img-fluid"></a>-->
<img src="/static/images/3_new.png" alt="" class="img-fluid">
</div></div>
<!-- navigation buttons -->
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
</div>
</div>
</div>
<!-- end container -->
</div>
</section>
<!-- end section -->
<!-- pricing section -->
<section class="section pricing" id="pricing">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="title text-center mb-5">
<h6 class="mb-0 fw-bold text-primary">Pricing</h6>
<h2 class="f-40">Monthly plans for any church</h2>
<!-- <p class="text-muted">All plans are monthly and can be canceled anytime. There’s also a free option for small churches to make 2 chatbots/month and 5 sermon clips/month</p>-->
<!-- <p class="text-muted">There’s also a free plan (2 sermons/month) for small churches. And an enterprise plan for global ministries that want a customized solution.</p>-->
</div>
</div>
</div>
<div class="row flex-nowrap no-gutters">
<div class="col-lg-4 price-item shadow-sm overflow-hidden">
<div>
<!-- <div class="topbar-header bg-primary py-2 text-center">-->
<!-- <h6 class="mb-0 text-white fw-normal">Most popular</h6>-->
<!-- </div>-->
<div class="price-up-box p-4">
<div class="badge bg-primary fw-normal f-14">Basic</div>
<div class="price-tag mt-2">
<h2 class="text-dark mb-0 f-40"><sup class="f-22 fw-normal">$</sup>20<sup class="f-16 fw-normal"> /month</sup>
</h2>
</div>
<p class="text-muted mb-1"> 5 sermons per month</p>
<!-- <p class="text-muted mb-0">For most businesses that want to optimize web query.</p>-->
</div>
<div class="border border-3"></div>
<div class="price-down-box p-4" style="padding-bottom:0.5rem !important;">
<ul class="list-unstyled " style="font-size:14px;">
<li><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
AI resources created from the sermon (summary, Bible study, devotional, clips, quotes, transcript, chatbot) all on one page like <a style="font-size: inherit;" href="/sermons/48483/" target="_blank">this</a>
</li>
<!-- <li><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>-->
<!-- Resources ready in 15 minutes-->
<!-- </li>-->
<li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Create resources from sermon manuscripts before Sundays
</li>
<li><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Dedicated page for all your church’s AI resources like <a style="font-size: inherit;" href="/church/@lakeshorechristianchurch/" target="_blank">this</a>
</li>
</ul>
<a href="/google/main/settings" class="btn btn-sm btn-primary mt-3"><i class="mdi mdi-check-all me-2"></i>Subscribe</a>
</div>
</div>
</div>
<div class="col-lg-4 price-item shadow-sm overflow-hidden mt-4 mt-lg-0" style="margin:0 10px;">
<div>
<div class="border border-3"></div>
<div class="price-up-box active p-4">
<div class="badge bg-primary fw-normal f-14">Automated (recommended)</div>
<div class="price-tag mt-2">
<h2 class="text-white mb-0 f-40"><sup class="f-22 fw-normal">$</sup>50<sup class="f-16 fw-normal"> /month</sup></h2>
</div>
<p class="text-white-50 mb-1">10 sermons per month</p>
<!-- <p class="text-white-50 mb-0">For most businesses that want to optimize web query.</p>-->
</div>
<div class="price-down-box p-4">
<ul class="list-unstyled " style="font-size:14px;">
<li><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Resources created automatically from your Sunday livestream on Youtube, and emailed to your team by Monday 8am
</li>
<!-- <li><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>-->
<!-- Sermon clips and resources automatically emailed to you and your staff, guaranteed by Monday morning-->
<!-- </li>-->
<!-- <li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Up to 5 staff members get emailed on Monday morning
</li> -->
<!-- <li><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>-->
<!-- Customizable captions and <a href="javascript:void(0);" class="captionSetting">templates for sermon clips</a>-->
<!-- </li>-->
<!-- <li><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>-->
<!-- Use youtube videos longer than 2 hours-->
<!-- </li>-->
<li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Chatbot trained on your entire Youtube channel like <a style="font-size: inherit;" href="/church/@3wchurchmiami/#channel_landing_chatbot" target="_blank">this</a>
</li>
<li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
AI podcast discussion of each sermon like <a href="/sermons/77644/8/" target="_blank">this</a>
</li>
<li><br></li>
</ul>
<!-- <a href="" class="btn btn-sm text-primary mt-3"><i class="mdi mdi-check-all me-2"></i>your-->
<!-- plane</a>-->
<a href="/google/main/settings" class="btn btn-sm btn-primary mt-3"><i class="mdi mdi-check-all me-2"></i>Subscribe</a>
</div>
</div>
</div>
<div class="col-lg-4 price-item shadow-sm overflow-hidden mt-4 mt-lg-0" style="margin:0 10px;">
<div style="padding-bottom:3px;">
<div class="price-up-box p-4">
<div class="badge bg-primary fw-normal f-14">Team</div>
<div class="price-tag mt-2">
<h2 class="text-dark mb-0 f-40"><sup class="f-22 fw-normal">$</sup>100<sup class="f-16 fw-normal"> /month</sup></h2>
</div>
<p class="text-muted mb-1">20 sermons per month</p>
</div>
<div class="border border-3"></div>
<div class="price-down-box p-4">
<ul class="list-unstyled " style="font-size:14px;">
<li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Shared dashboard and sermon quota with up to 5 members of your team
</li>
<li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Custom chatbot trained on your entire Youtube channel AND your church website, which you can embed as a chat widget like <a style="font-size: inherit;" href="https://menlo.church/#pastorsAI" target="_blank">this</a>
</li>
<li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Monthly zoom calls with founder for customer support
</li>
<!-- <li><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>-->
<!-- Option for custom chatbot embeddable as a chat widget <a href="https://www.menlo.church/" target="_blank">(example)</a> on your website-->
<!-- </li>-->
<!-- <li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>-->
<!-- Zoom calls with founder for customer support-->
<!-- </li>-->
<li><br></li>
<li><br></li>
</ul>
<a href="/google/main/settings" class="btn btn-sm btn-primary"><i class="mdi mdi-check-all me-2"></i>Subscribe</a>
</div>
</div>
</div>
<!--<div class="col-lg-4 price-item shadow-sm overflow-hidden mt-4 mt-lg-0">
<div style="padding-bottom:3px;">
<div class="price-up-box p-4">
<div class="badge bg-primary fw-normal f-14">Global Ministry</div>
<div class="price-tag mt-2">
<h2 class="text-dark mb-0 f-40"><sup class="f-22 fw-normal">$</sup>1000<sup class="f-16 fw-normal"> /month</sup></h2>
</div>
<p class="text-muted mb-1">Answer 5,000 questions per month</p>
</div>
<div class="border border-3"></div>
<div class="price-down-box p-4">
<ul class="list-unstyled " style="font-size:14px;">
<li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Chatbot that can instantly answer any faith-related question based on your ministry’s library of content <a href="https://wisdomonline.org/">(example)</a>
</li>
<li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Daily fetching of all youtube content
</li>
<li><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Customizable system prompt
</li>
<li class="mt-2"><i class="mdi mdi-check-circle-outline f-20 align-middle me-2 text-primary"></i>
Email collection form within chatbot
</li>
<li><br></li>
<li><br></li>
</ul>
<a href="/google/main/settings" class="btn btn-sm btn-primary"><i class="mdi mdi-check-all me-2"></i>Subscribe</a>
</div>
</div>
</div>-->
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="title text-center" style="margin-top:15px;">
<p class="text-muted">There's also a free plan for small churches to get AI resources for 2 sermons per month</p>
</div>
</div>
</div>
</div>
</section>
<!--End of pricing-->
<!-- service section -->
<section class="section service bg-light" id="service">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="title text-center mb-5">
<h6 class="mb-0 fw-bold text-primary">Church AI Resources</h6>
<h2 class="f-35">All your AI resources on one page</h2>
<div class="border-phone">
<p class="text-muted">All your church's AI resources in one place, ready for your team on Monday</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-between">
<div class="col-lg-4">
<div class="service-box text-center d-block">
<a href="/church/@TFHLeesburg/" target="_blank" class="d-block">
<div class="service-icon p-4">
<img src="/static/images/fathershouse.png" width="190">
</div>
<div class="service-content mt-4">
<h5 class="fw-bold">The Father’s House</h5>
<!-- <p class="text-muted">TFH’s chatbot is trained on content from thefathershouse.com and nearly 1000 videos from their youtube</p>-->
</div>
</a>
</div>
</div>
<div class="col-lg-4 pt-4 pt-lg-0">
<div class="service-box text-center">
<a href="/church/@MenloChurch/" target="_blank" class="d-block">
<div class="service-icon p-4">
<img src="/static/images/menio.png">
</div>
<div class="service-content mt-4">
<h5 class="fw-bold"> Menlo Church</h5>
<!-- <p class="text-muted">The Menlo Church chatbot is trained on its website information and 3 years of streamed youtube content</p>-->
</div>
</a>
</div>
</div>
<div class="col-lg-4 pt-4 pt-lg-0">
<div class="service-box text-center">
<a href="/church/@LimitlessLifeTV/" target="_blank" class="d-block">
<div class="service-icon p-4">
<img src="/static/images/left_n_new.png">
</div>
<div class="service-content mt-4">
<h5 class="fw-bold">Limitless Church</h5>
<!-- <p class="text-muted">This church plant in Woodland, CA has their chatbot welcoming visitors to learn more about their church</p>-->
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
<!-- contact section -->
<section class="section contact overflow-hidden" id="demo">
<!-- start container -->
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="title text-center">
<!--<h6 class="mb-0 fw-bold text-primary">Contact Us</h6>
<h2 class="f-40">How can we help?</h2>
<p class="text-muted">For partnership inquiries, we’ll reply with a calendar to pick a time to zoom</p>-->
<!--CB-7351-->
<h6 class="mb-0 fw-bold text-primary">Demo</h6>
<h2 class="f-40">Try it for free</h2>
<p class="text-muted" style="margin-bottom:0 !important;">Just enter a Youtube URL of your church service and you'll get an email within 30 minutes with AI resources made from the sermon</p>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-12">
<div class="contact-box">
<div class="custom-form mt-4" style="margin-top:0 !important;">
<form method="post" id="newvideobot" action="/#demo" enctype="multipart/form-data">
<input id="csrf_token" name="csrf_token" type="hidden" value="IjkzNjNkNDBkNWQxNjRiMGEzMTg1ZThlOGMzNWIwOGI5NTU2MzFlMTUi.ZyttuQ.Z0TCW-PflpZRv_wCulta9cj8FsA">
<input name="is_demo" value="1" type="hidden">
<p id="error-msg" style="opacity: 1;">
<!-- <div class="alert alert-warning">*Please enter a Name*</div> -->
</p>
<div id="simple-msg"></div>
<!-- <div class="row">
<div class="col-lg-6">
<div class="form-group">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
</div>
</div>
</div> -->
<div class="row">
<div class="col-lg-6">
<div class="form-group mt-2">
</div>
</div>
</div>
<div class="row my-2">
<div class="col-lg-4 d-grid"> </div>
<div class="col-lg-4 d-grid">
<input class="form-control contact-form" id="church_channel" name="church_channel" placeholder="Youtube video URL" required="" type="text" value="">
<input class="form-control contact-form" id="owner_email" name="owner_email" placeholder="Email address" required="" type="email" value="">
</div>
<div class="col-lg-4 d-grid"> </div>
</div>
<div class="row my-2">
<div class="col-lg-4 d-grid"> </div>
<div class="col-lg-4 d-grid">
<input class="btn btn-rounded btn-primary submitButton" id="submit" name="submit" type="submit" value="Get resources">
<!-- <input type="submit" id="submit" name="send" class="submitBnt btn btn-rounded btn-primary" value="Send Message"> -->
</div>
<div class="col-lg-4 d-grid"> </div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</section>
<!-- end section -->
<section class="bottom-footer py-4" style="display:none;">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<p class="mb-0 text-center text-muted">
<!-- ©<script>document.write(new Date().getFullYear())</script> Pastor.ai -->
<!--<a href="mailto:[email protected]" target="_blank">
<img class="img-thumbnail footer-icon" src="/static/images/email-1.svg" alt="Email">
</a>-->
<a href="https://twitter.com/pastorsai" target="_blank">
<img class="img-thumbnail footer-icon" src="/static/images/twitter.svg" alt="Twitter">
</a> [email protected]
<!--<a href="https://www.youtube.com/@pastors-ai" target="_blank">
<img class="img-thumbnail footer-icon" src="/static/images/youtube.svg" alt="YouTube">
</a>-->
</p>
</div>
</div>
</div>
</section>
<!-- end footer -->
<!-- Style switcher -->
<!--<div class="style-switcher" id="style-switcher" onclick="toggleSwitcher()" style="left: -189px;">
<div>
<h6>Select your color</h6>
<ul class="pattern list-unstyled mb-0">
<li>
<a class="color1" href="javascript: void(0);" onclick="setColor('default')"></a>
</li>
<li>
<a class="color2" href="javascript: void(0);" onclick="setColor('blue')"></a>
</li>
<li>
<a class="color3" href="javascript: void(0);" onclick="setColor('warning')"></a>
</li>
</ul>
</div>
<div class="bottom">
<a href="javascript: void(0);" class="settings rounded-end"><i class="uil uil-setting text-white"
style="display: inline; line-height: 46px;"></i></a>
</div>
</div>-->
<!-- end switcher-->
<!--Bootstrap Js-->
<script src="/static/js/bootstrap.bundle.min.js"></script>
<!-- Slider Js -->
<script src="/static/js/tiny-slider.js"></script>
<script src="/static/js/swiper.min.js"></script>
<!-- <script src="js/smooth-scroll.polyfills.min.js"></script> -->
<!-- counter -->
<!-- <script src="js/counter.init.js"></script> -->
<!-- App Js -->
<script src="/static/js/app_new.js"></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
var slider = tns({
container: '.client-slider',
loop: true,
autoplay: true,
mouseDrag: true,
controls: false,
navPosition: "bottom",
nav: false,
autoplayTimeout: 5000,
speed: 900,
center: false,
animateIn: "fadeIn",
animateOut: "fadeOut",
controlsText: ['←', '→'],
autoplayButtonOutput: false,
gutter: 30,
responsive: {
992: {
gutter: 30,
items: 4
},
}
});
$( "#newvideobot" ).on( "submit", function( event ) {
$('#submit').prop("disabled", true);
});
// $('.submitButton input[type=submit]').click(function() {
// console.log('CLICKED')
// $(this).attr('disabled', 'disabled');
// $(this).parents('form').submit();
// });
</script>
<script>
function openSelectFile(){
document.querySelector('.selectFile').click();
}
function newFileSelected(e){
// console.log('**** e = ', e)
}
window.onload=function(){
if(document.getElementById('selectFile'))
{ document.getElementById('selectFile').addEventListener('change', function(e) {
if (e.target.files[0]) {
var getSize = e.target.files[0].size;
const fileSize = Math.round((getSize / 1024));
// if(fileSize >= 20){
if(fileSize >= 20000){
document.getElementById('church_channel').value = '';
document.getElementById('selectFile').value = '';
document.getElementById("newvideobot").reset();
document.getElementById('output').innerHTML = 'Sorry, our file limit is 20MB. Please try a smaller file or email us at [email protected] if you have a bigger file'
}else{
document.getElementById('church_channel').value = e.target.files[0].name
}
}
});
}
}
/********For Log In Pop-up*************************/
function isGmail(email) {
// Regular expression to match the domain part of the email
var domainRegex = /@gmail\.com$/;
// Test if the email matches the regular expression
return domainRegex.test(email);
}
$('.log_in').on('click',function(){
$('#custom_log_in_success').hide('');
$('#signInModal').show();
});
$('.close_log_in').on('click',function(){
$('#custom_log_in_success').hide('');
$('#signInModal').hide();
});
$(document).on('keyup', '#email_log', function (e) {
e.stopPropagation();
e.preventDefault();
if (e.keyCode === 13) {
$('.btn_custom_log_in').trigger('click');
}
});
$('.btn_custom_log_in').on('click', function(){
$('#custom_log_in_success').hide('');
let email = $.trim($('#email_log').val());
if(email == ''){
$('#custom_log_in_error').html('Please enter email');
}else if(isGmail(email)){
$('#custom_log_in_error').html('Please sign in with Google');
}else{
$('#custom_log_in_error').html('');
let csrf_token = "IjkzNjNkNDBkNWQxNjRiMGEzMTg1ZThlOGMzNWIwOGI5NTU2MzFlMTUi.ZyttuQ.Z0TCW-PflpZRv_wCulta9cj8FsA";
$.ajax({
type: "POST",
url: "/verifyLogin/redirectPath",
data: JSON.stringify({email_log:email}),
contentType: "application/json",
headers: {
"X-CSRFToken": csrf_token,
},
success: function (response) {
if(response.status && response.status == 'error'){
$('#custom_log_in_error').html(response.message);
}else if(response.status && response.status == 'success'){
$('#log_in_main').hide();
$('#custom_log_in_success').show();
setTimeout(function(){
$('#custom_log_in_success').hide();
$('#signInModal').hide();
$('#log_in_main').show()
}, 5000);
}
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
}
});
if(window.location.hash === "#login") {
if($('.log_in') && $('.log_in').length > 0){
$('#custom_log_in_success').hide('');
$('#signInModal').show();
}
}
</script>
<!-- Google tag (gtag.js) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-E96QMGSM57"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-E96QMGSM57');
</script>
<div id="clr-picker" class="clr-picker"><input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="Color value field"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="Saturation and brightness selector. Use up, down, left and right arrow keys to select."><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="Hue slider"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="Opacity slider"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>Color format</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear" aria-label="Clear the selected color">Clear</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="Close color picker">Close</button></div><span id="clr-open-label" hidden="">Open color picker</span><span id="clr-swatch-label" hidden="">Color swatch</span></div></body></html>