initial commit

This commit is contained in:
equippedcoding-master
2025-09-17 09:37:06 -05:00
parent 86108ca47e
commit e2c98790b2
55389 changed files with 6206730 additions and 0 deletions

View File

@@ -0,0 +1,315 @@
<style>
/* 64ac15 */
/* *,
*:before,
*:after {
box-sizing: border-box;
} */
/* body {
padding: 1em;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
color: #b9b9b9;
background-color: #e3e3e3;
} */
.myh4 {
color: #f0a500;
}
.mycontainer {
max-width: 50%;
}
.mycontainer
.input,
.mycontainer
.input[type="radio"] + label,
.input[type="checkbox"] + label:before,
select option,
select {
width: 100%;
padding: 1em;
line-height: 1.4;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 3px;
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.mycontainer
.input:focus {
outline: 0;
border-color: #bd8200;
}
.mycontainer
.input:focus + .myinput-icon i {
color: #f0a500;
}
.mycontainer
.input:focus + .myinput-icon:after {
border-right-color: #f0a500;
}
.mycontainer
.input[type="radio"] {
display: none;
}
.mycontainer
.input[type="radio"] + label,
select {
display: inline-block;
width: 50%;
text-align: center;
float: left;
border-radius: 0;
}
.mycontainer
.input[type="radio"] + label:first-of-type {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mycontainer
.input[type="radio"] + label:last-of-type {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mycontainer
.input[type="radio"] + label i {
padding-right: 0.4em;
}
.mycontainer
.input[type="radio"]:checked + label,
.input:checked + label:before,
select:focus,
select:active {
background-color: #f0a500;
color: #fff;
border-color: #bd8200;
}
.mycontainer
.input[type="checkbox"] {
display: none;
}
.mycontainer
.input[type="checkbox"] + label {
position: relative;
display: block;
padding-left: 1.6em;
}
.mycontainer
.input[type="checkbox"] + label:before {
position: absolute;
top: 0.2em;
left: 0;
display: block;
width: 1em;
height: 1em;
padding: 0;
content: "";
}
.mycontainer
.input[type="checkbox"] + label:after {
position: absolute;
top: 0.45em;
left: 0.2em;
font-size: 0.8em;
color: #fff;
opacity: 0;
font-family: FontAwesome;
content: "\f00c";
}
.mycontainer
.input:checked + label:after {
opacity: 1;
}
.mycontainer
select {
height: 3.4em;
line-height: 2;
}
.mycontainer
select:first-of-type {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mycontainer
select:last-of-type {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mycontainer
select:focus,
select:active {
outline: 0;
}
.mycontainer
select option {
background-color: #f0a500;
color: #fff;
}
.myinput-group {
margin-bottom: 1em;
zoom: 1;
}
.myinput-group:before,
.myinput-group:after {
content: "";
display: table;
}
.myinput-group:after {
clear: both;
}
group-icon .myinput-icon i {
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.mycontainer {
max-width: 38em;
padding: 1em 3em 2em 3em;
margin: 0em auto;
background-color: #fff;
border-radius: 4.2px;
box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.2);
}
.myrow {
zoom: 1;
}
.myrow:before,
.myrow:after {
content: "";
display: table;
}
.myrow:after {
clear: both;
}
.mycol-half {
padding-right: 10px;
float: left;
width: 50%;
}
.mycol-half:last-of-type {
padding-right: 0;
}
.mycol-third {
padding-right: 10px;
float: left;
width: 33.33333333%;
}
.mycol-third:last-of-type {
padding-right: 0;
}
@media only screen and (max-width: 540px) {
.mycol-half {
width: 100%;
padding-right: 0;
}
}
</style>
<div class="mycontainer">
<form>
<div class="myrow">
<h4 class="myh4">Account</h4>
<div class="myinput-group myinput-group-icon">
<input class="input" type="text" placeholder="Full Name"/>
<div class="myinput-icon"><i class="fa fa-user"></i></div>
</div>
<div class="myinput-group myinput-group-icon">
<input class="input" type="email" placeholder="Email Adress"/>
<div class="myinput-icon"><i class="fa fa-envelope"></i></div>
</div>
<div class="myinput-group input-group-icon">
<input class="input" type="password" placeholder="Password"/>
<div class="myinput-icon"><i class="fa fa-key"></i></div>
</div>
</div>
<div class="myrow">
<div class="mycol-half">
<h4>Date of Birth</h4>
<div class="myinput-group">
<div class="mycol-third">
<input class="input" type="text" placeholder="DD"/>
</div>
<div class="mycol-third">
<input class="input" type="text" placeholder="MM"/>
</div>
<div class="mycol-third">
<input class="input" type="text" placeholder="YYYY"/>
</div>
</div>
</div>
<div class="mycol-half">
<h4 class="myh4">Gender</h4>
<div class="myinput-group">
<input class="input" id="gender-male" type="radio" name="gender" value="male"/>
<label for="gender-male">Male</label>
<input class="input" id="gender-female" type="radio" name="gender" value="female"/>
<label for="gender-female">Female</label>
</div>
</div>
</div>
<div class="myrow">
<h4>Payment Details</h4>
<div class="myinput-group">
<input class="input" id="payment-method-card" type="radio" name="payment-method" value="card" checked="true"/>
<label for="payment-method-card"><span><i class="fa fa-cc-visa"></i>Credit Card</span></label>
<input class="input" id="payment-method-paypal" type="radio" name="payment-method" value="paypal"/>
<label for="payment-method-paypal"> <span><i class="fa fa-cc-paypal"></i>Paypal</span></label>
</div>
<div class="myinput-group myinput-group-icon">
<input class="input" type="text" placeholder="Card Number"/>
<div class="myinput-icon"><i class="fa fa-credit-card"></i></div>
</div>
<div class="mycol-half">
<div class="myinput-group myinput-group-icon">
<input class="input" type="text" placeholder="Card CVC"/>
<div class="input-icon"><i class="fa fa-user"></i></div>
</div>
</div>
<div class="mycol-half">
<div class="myinput-group">
<select>
<option>01 Jan</option>
<option>02 Jan</option>
</select>
<select>
<option>2015</option>
<option>2016</option>
</select>
</div>
</div>
</div>
<div class="myrow">
<h4>Terms and Conditions</h4>
<div class="myinput-group">
<input class="input" id="terms" type="checkbox"/>
<label for="terms">I accept the terms and conditions for signing up to this service, and hereby confirm I have read the privacy policy.</label>
</div>
</div>
</form>
</div>

View File

@@ -0,0 +1,330 @@
var gl_plugins = [
'gjs-blocks-basic',
//'grapesjs-plugin-forms',
'grapesjs-component-countdown',
'grapesjs-plugin-export',
'grapesjs-tabs',
'grapesjs-custom-code',
'grapesjs-touch',
'grapesjs-parser-postcss',
'grapesjs-tooltip',
'grapesjs-tui-image-editor',
'grapesjs-typed',
'grapesjs-style-bg',
'grapesjs-preset-webpage',
'grapesjs-my-plugin'
//'grapesjs-navbar'
];
var gl_pluginsOpts = {
'gjs-blocks-basic': { flexGrid: true },
'grapesjs-tui-image-editor': {
script: [
// 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
],
style: [
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
],
},
'grapesjs-tabs': {
tabsBlock: { category: 'Extra' }
},
'grapesjs-typed': {
block: {
category: 'Extra',
content: {
type: 'typed',
'type-speed': 40,
strings: [
'Text row one',
'Text row two',
'Text row three',
],
}
}
},
'grapesjs-preset-webpage': {
modalImportTitle: 'Import Template',
modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
modalImportContent: function(editor) {
return editor.getHtml() + '<style>'+editor.getCss()+'</style>'
},
},
};
var Link = "";
function hello(pages){
var cal = [];
for(var i=0; i < pages.length; i++){
var link = pages[i].link + "/pages/" + pages[i].name + ".php";
if(pages[i].name == "home"){
link = pages[i].link + "/" + pages[i].name + ".php";
}
cal.push([pages[i].variable, link]);
}
for(var i=0; i < pages.length; i++){
for(var n=0; n < cal.length; n++){
pages[i].component = VariableStringExchange(cal[n][0], cal[n][1], pages[i].component);
}
}
return pages;
}
var gl_pageManager = {
pages: [
{
name: 'home',
variable: "home",
link: Link,
component: gl_html_index ,
styles: gl_css_index
}
]
};
gl_pageManager.pages = hello(gl_pageManager.pages);
//console.log(gl_pageManager.pages[0].styles);
var gl_style_manager = {
sectors: [{
name: 'General',
properties:[
{
extend: 'float',
type: 'radio',
default: 'none',
options: [
{ value: 'none', className: 'fa fa-times'},
{ value: 'left', className: 'fa fa-align-left'},
{ value: 'right', className: 'fa fa-align-right'}
],
},
'display',
{ extend: 'position', type: 'select' },
'top',
'right',
'left',
'bottom',
],
}, {
name: 'Dimension',
open: false,
properties: [
'width',
{
id: 'flex-width',
type: 'integer',
name: 'Width',
units: ['px', '%'],
property: 'flex-basis',
toRequire: 1,
},
'height',
'max-width',
'min-height',
'margin',
'padding'
],
},{
name: 'Typography',
open: false,
properties: [
'font-family',
'font-size',
'font-weight',
'letter-spacing',
'color',
'line-height',
{
extend: 'text-align',
options: [
{ id : 'left', label : 'Left', className: 'fa fa-align-left'},
{ id : 'center', label : 'Center', className: 'fa fa-align-center' },
{ id : 'right', label : 'Right', className: 'fa fa-align-right'},
{ id : 'justify', label : 'Justify', className: 'fa fa-align-justify'}
],
},
{
property: 'text-decoration',
type: 'radio',
default: 'none',
options: [
{ id: 'none', label: 'None', className: 'fa fa-times'},
{ id: 'underline', label: 'underline', className: 'fa fa-underline' },
{ id: 'line-through', label: 'Line-through', className: 'fa fa-strikethrough'}
],
},
'text-shadow'
],
},{
name: 'Decorations',
open: false,
properties: [
'opacity',
'border-radius',
'border',
'box-shadow',
'background', // { id: 'background-bg', property: 'background', type: 'bg' }
],
},{
name: 'Extra',
open: false,
buildProps: [
'transition',
'perspective',
'transform'
],
},{
name: 'Flex',
open: false,
properties: [{
name: 'Flex Container',
property: 'display',
type: 'select',
defaults: 'block',
list: [
{ value: 'block', name: 'Disable'},
{ value: 'flex', name: 'Enable'}
],
},{
name: 'Flex Parent',
property: 'label-parent-flex',
type: 'integer',
},{
name: 'Direction',
property: 'flex-direction',
type: 'radio',
defaults: 'row',
list: [{
value: 'row',
name: 'Row',
className: 'icons-flex icon-dir-row',
title: 'Row',
},{
value: 'row-reverse',
name: 'Row reverse',
className: 'icons-flex icon-dir-row-rev',
title: 'Row reverse',
},{
value: 'column',
name: 'Column',
title: 'Column',
className: 'icons-flex icon-dir-col',
},{
value: 'column-reverse',
name: 'Column reverse',
title: 'Column reverse',
className: 'icons-flex icon-dir-col-rev',
}],
},{
name: 'Justify',
property: 'justify-content',
type: 'radio',
defaults: 'flex-start',
list: [{
value: 'flex-start',
className: 'icons-flex icon-just-start',
title: 'Start',
},{
value: 'flex-end',
title: 'End',
className: 'icons-flex icon-just-end',
},{
value: 'space-between',
title: 'Space between',
className: 'icons-flex icon-just-sp-bet',
},{
value: 'space-around',
title: 'Space around',
className: 'icons-flex icon-just-sp-ar',
},{
value: 'center',
title: 'Center',
className: 'icons-flex icon-just-sp-cent',
}],
},{
name: 'Align',
property: 'align-items',
type: 'radio',
defaults: 'center',
list: [{
value: 'flex-start',
title: 'Start',
className: 'icons-flex icon-al-start',
},{
value: 'flex-end',
title: 'End',
className: 'icons-flex icon-al-end',
},{
value: 'stretch',
title: 'Stretch',
className: 'icons-flex icon-al-str',
},{
value: 'center',
title: 'Center',
className: 'icons-flex icon-al-center',
}],
},{
name: 'Flex Children',
property: 'label-parent-flex',
type: 'integer',
},{
name: 'Order',
property: 'order',
type: 'integer',
defaults: 0,
min: 0
},{
name: 'Flex',
property: 'flex',
type: 'composite',
properties : [{
name: 'Grow',
property: 'flex-grow',
type: 'integer',
defaults: 0,
min: 0
},{
name: 'Shrink',
property: 'flex-shrink',
type: 'integer',
defaults: 0,
min: 0
},{
name: 'Basis',
property: 'flex-basis',
type: 'integer',
units: ['px','%',''],
unit: '',
defaults: 'auto',
}],
},{
name: 'Align',
property: 'align-self',
type: 'radio',
defaults: 'auto',
list: [{
value: 'auto',
name: 'Auto',
},{
value: 'flex-start',
title: 'Start',
className: 'icons-flex icon-al-start',
},{
value : 'flex-end',
title: 'End',
className: 'icons-flex icon-al-end',
},{
value : 'stretch',
title: 'Stretch',
className: 'icons-flex icon-al-str',
},{
value : 'center',
title: 'Center',
className: 'icons-flex icon-al-center',
}],
}]
}
],
};

View File

@@ -0,0 +1,30 @@
function VariableStringExchange(variable,replacement,string){
//var variable = "$500";
//var replacement = "$200";
//var string = "I expect five hundred dollars {$500}."
//var regExp = /\{([^)]+)\}/;
var replace = "{" + variable + "}";
var re = new RegExp(replace,"g");
for(var i=0; i < 5; i++){
string = string.replace(replace, replacement);
}
return string;
/*
var regExp = "{" + variable + "}";
var matches = regExp.exec(string);
new RegExp(replace,"g");
if(matches != null){
console.log("match " + (matches[1] + " - " + variable));
if(matches[1] == variable){
string = string.replace(/\{([^)]+)\}/g, replacement);
}
}
*/
}
window.VariableStringExchange = VariableStringExchange;

View File

@@ -0,0 +1,582 @@
$(document).ready(function () {
const DEVELOPMENT = true;
//localStorage.clear();
var lp = './img/';
var plp = 'https://via.placeholder.com/350x250/';
var images = [];/*[
lp+'team1.jpg', lp+'team2.jpg', lp+'team3.jpg', plp+'78c5d6/fff/image1.jpg', plp+'459ba8/fff/image2.jpg', plp+'79c267/fff/image3.jpg',
plp+'c5d647/fff/image4.jpg', plp+'f28c33/fff/image5.jpg', plp+'e868a2/fff/image6.jpg', plp+'cc4360/fff/image7.jpg',
lp+'work-desk.jpg', lp+'phone-app.png', lp+'bg-gr-v.png'
]*/;
var WEBSITE = {
projectData: null,
pagesData: [/*{
enabled:true,
name: "",
id: "",
html: "",
css: ""
}*/]
};
// nnnn
//console.log(gl_plugins)
var mydata = {
username: "user",
retrieve_website_data: true,
project_name: "project_1"
};
if(DEVELOPMENT){
var helpmeout = {
ImagesDirectory: "assets",
ImageUploadURL: "./other/request.php",
ImageUploadName: "upload_image",
WebsiteData: null
};
localStorage.clear();
RunInitialization(helpmeout);
}else{
$.post('./other/request.php',mydata,function(websitedata,x,t){
//console.log(JSON.parse(websitedata));
RunInitialization(JSON.parse(websitedata));
});
}
function RunInitialization(websitedata) {
var assetManager = {
params: { project_name: "project_1" },
upload: websitedata.ImageUploadURL,
uploadName: websitedata.ImageUploadName,
embedAsBase64: true,
assets: images
};
//console.log(gl_pageManager.pages[3].component);
var editor = grapesjs.init({
height: '100%',
container : '#gjs',
fromElement: true,
showOffsets: true,
canvas: {
scripts: [
"https://code.jquery.com/jquery-3.6.3.min.js",
"./other/js/output.js",
"../../../core/js/main.js",
"https://www.paypal.com/sdk/js?client-id=test&currency=USD&intent=capture&enable-funding=venmo"],
styles: [
"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap",
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"]
},
assetManager: assetManager,
pageManager: gl_pageManager,
storageManager: { autosave:false },
selectorManager: { componentFirst: true },
styleManager: gl_style_manager,
plugins: gl_plugins,
pluginsOpts: gl_pluginsOpts
});
if(websitedata.WebsiteData!=null){
websitedata.WebsiteData = JSON.parse(websitedata.WebsiteData);
WEBSITE = JSON.parse(websitedata.WebsiteData);
}else{
var data = editor.getProjectData();
editor.Storage.store(data);
WEBSITE['projectData'] = data;
WEBSITE['pagesData'] = getTmpPagesArray(editor);
}
console.log(WEBSITE);
if(websitedata.WebsiteData != null){
//editor.loadProjectData(websitedata.WebsiteData.projectData);
}
editor.on('asset:upload:response', (response) => {
console.log(response);
const am = editor.AssetManager;
});
setTimeout(function(){
//const selectedPage = editor.Pages.getSelected();
//selectedPage.setName("home");
//console.log(selectedPage);
},500);
editor.I18n.addMessages({
en: {
styleManager: {
properties: {
'background-repeat': 'Repeat',
'background-position': 'Position',
'background-attachment': 'Attachment',
'background-size': 'Size'
}
},
}
});
var pn = editor.Panels;
var modal = editor.Modal;
var cmdm = editor.Commands;
// Update canvas-clear command
cmdm.add('canvas-clear', function() {
if(confirm('Are you sure to clean the canvas?')) {
editor.runCommand('core:canvas-clear')
setTimeout(function(){ localStorage.clear()}, 0)
}
});
// nnnn
// Add info command
var mdlClass = 'gjs-mdl-dialog-sm';
var infoContainer = document.getElementById('info-panel');
cmdm.add('open-info', function() {
var mdlDialog = document.querySelector('.gjs-mdl-dialog');
mdlDialog.className += ' ' + mdlClass;
infoContainer.style.display = 'block';
modal.setTitle('Save');
modal.setContent(infoContainer);
modal.open();
modal.getModel().once('change:open', function() {
mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
})
});
pn.addButton('options', {
id: 'open-info11',
className: 'fa fa-floppy-o',
command: function() {
editor.runCommand('open-info');
},
attributes: {
'title': 'Save',
'data-tooltip-pos': 'bottom',
},
});
// nnnn
var infoContainer2 = document.getElementById('panel-pubish');
cmdm.add('open-info2', function() {
var mdlDialog = document.querySelector('.gjs-mdl-dialog');
mdlDialog.className += ' ' + mdlClass;
infoContainer2.style.display = 'block';
modal.setTitle('Publish');
modal.setContent(infoContainer2);
modal.open();
modal.getModel().once('change:open', function() {
mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
})
});
function overlay(active,autoDeactivateTime){
var el = document.getElementById("cover-spin");
if(el==null || el==undefined){
var div = document.createElement("div");
div.id = "cover-spin";
document.body.appendChild(div);
el = document.getElementById("cover-spin");
document.body.appendChild(el);
}
if(active){
el.style["display"] = "block";
if(autoDeactivateTime!=undefined){
setTimeout(function(){ el.style["display"] = "none"; }, autoDeactivateTime)
}
}else{
el.style["display"] = "none";
}
};
function PublishWebsite(e){
document.getElementById("panel-save-save").click();
console.log("publishing...");
overlay(true,9000);
// pppp
$.post('./other/request.php',{
publish_website:true,
username:"cradle2careertxxyz",
data: JSON.stringify(WEBSITE)
},function(responseData,responseStatus,responseObject){
console.log(responseData);
});
}
pn.addButton('options', {
id: 'open-info12',
className: 'fa fa-cloud',
command: function() {
editor.runCommand('open-info2');
//document.getElementById("panel-publish-publish").removeEventListener("click",PublishWebsite);
document.getElementById("panel-publish-publish").addEventListener("click",PublishWebsite);
},
attributes: {
'title': 'Publish',
'data-tooltip-pos': 'bottom',
},
});
pn.addButton('options', {
id: 'open-info13',
className: 'fa fa-external-link',
command: function() {
if(confirm("Are you sure you want to exit!")){
console.log("exiting");
window.location.href = '../';
}else{
console.log("continuing");
}
},
attributes: {
'title': 'Exit',
'data-tooltip-pos': 'bottom',
},
});
var infoContainer3 = document.getElementById('panel-pages');
cmdm.add('open-info3', function() {
var mdlDialog = document.querySelector('.gjs-mdl-dialog');
mdlDialog.className += ' ' + mdlClass;
infoContainer3.style.display = 'block';
modal.setTitle('Pages');
modal.setContent(infoContainer3);
modal.open();
modal.getModel().once('change:open', function() {
mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
});
// TODO: @style - wrong way to chage width of dialog
modal.getContentEl().parentElement.parentElement.style = "width:400px;";
});
function addPageLink(id,name,enabled){
var li = document.createElement("li");
var textNode = document.createElement("span");
textNode.innerHTML = name;
textNode.style = "margin-left:10px";
var btn1 = document.createElement("button");
btn1.innerHTML = "Select";
btn1.className = "select-page";
btn1.dataset.id = id;
btn1.dataset.name = name;
var btn2 = document.createElement("button");
btn2.innerHTML = enabled ? "Disable" : "Enable";
btn2.className = "enable-page";
btn2.dataset.id = id;
btn2.dataset.name = name;
li.appendChild(btn1);
li.appendChild(btn2);
li.appendChild(textNode);
var ul = document.getElementById("panel-pages-list");
ul.appendChild(li);
//document.getElementsByClassName('gjs-mdl-dialog-sm')[0].
}
pn.addButton('options', {
id: 'open-info14',
className: 'fa fa-file-o',
command: function() {
editor.runCommand('open-info3');
document.getElementById("panel-pages-list").innerHTML = "";
AddPagesEvents();
// pppp
editor.Pages.getAll().map(page => {
const component = page.getMainComponent();
var data = { html: editor.getHtml({ component }), css: editor.getCss({ component }) };
// pppp
addPageLink(page.getId(), page.getName(), GetPageEnabled(page.getId()));
AddPagesEvents();
});
},
attributes: {
'title': 'Pages',
'data-tooltip-pos': 'bottom',
}
});
function AddPagesEvents(){
var elements = document.getElementsByClassName("select-page");
var myFunction = function(e) {
editor.Pages.select(e.target.dataset.id);
};
for (var i = 0; i < elements.length; i++) {
elements[i].removeEventListener('click', myFunction, false);
replaceElement(elements[i]);
elements[i].addEventListener('click', myFunction, false);
}
var enablePageBtns = document.getElementsByClassName("enable-page");
var enablePageFunction = function(e) {
//console.log(WEBSITE);
for(var i=0; i < WEBSITE['pagesData'].length; i++){
if(WEBSITE['pagesData'][i].id == e.target.dataset.id){
WEBSITE['pagesData'][i].enabled = !WEBSITE['pagesData'][i].enabled;
e.target.innerHTML = WEBSITE['pagesData'][i].enabled ? "Disable" : "Enable";
console.log(WEBSITE['pagesData'][i]);
break;
}
}
};
for (var i = 0; i < enablePageBtns.length; i++) {
enablePageBtns[i].removeEventListener('click', enablePageFunction, false);
replaceElement(enablePageBtns[i]);
enablePageBtns[i].addEventListener('click', enablePageFunction, false);
}
}
function replaceElement(old_element){
//var old_element = enablePageBtns[i];
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
}
function GetPageEnabled(id){
var isEnabled = true;
for(var i=0; i < WEBSITE['pagesData'].length; i++){
if(WEBSITE['pagesData'][i].id == id){
isEnabled = WEBSITE['pagesData'][i].enabled;
break;
}
}
return isEnabled;
}
// pppp
document.getElementById("add-new-page-btn").addEventListener('click',function(e){
var val = document.getElementById("add-new-page-input").value;
if(val==""){ return; }
var page = editor.Pages.add({
name: val,
styles: `.my-class { color: red }`,
component: '<div class="my-class">' + val + ' Page</div>'
});
addPageLink(page.getId(),page.getName(),GetPageEnabled(page.getId()));
AddPagesEvents();
document.getElementById("add-new-page-input").value = "";
});
function getTmpPagesArray(editor){
var tmpPages = [];
editor.Pages.getAll().map(page => {
const component = page.getMainComponent();
var isEnabled = GetPageEnabled(page.getId());
tmpPages.push({
enabled: isEnabled,
name: page.getName(),
id: page.getId(),
html: editor.getHtml({ component }),
css: editor.getCss({ component })
});
});
return tmpPages;
}
// pppp
document.getElementById("panel-save-save").addEventListener('click',function(e){
console.log("saving...");
var data = editor.getProjectData();
editor.Storage.store(data);
WEBSITE['projectData'] = data;
WEBSITE['pagesData'] = getTmpPagesArray(editor);
console.log(WEBSITE);
$.post('./other/request.php',{
save_website:true,
username:"cradle2careertxxyz",
project_name: "project_1",
project_data: JSON.stringify(WEBSITE)
},function(responseData,responseStatus,responseObject){
//console.log(responseData);
});
//console.log(data);
modal.close();
});
document.getElementById("panel-save-cancel").addEventListener('click',function(e){
console.log("save cancel");
modal.close();
});
/*
document.getElementById("panel-publish-publish").addEventListener('click',function(e){
document.getElementById("panel-save-save").click();
console.log("publish");
modal.close();
});
*/
document.getElementById("panel-publish-cancel").addEventListener('click',function(e){
console.log("publish cancel");
modal.close();
});
// Simple warn notifier
var origWarn = console.warn;
toastr.options = {
closeButton: true,
preventDuplicates: true,
showDuration: 250,
hideDuration: 150
};
console.warn = function (msg) {
if (msg.indexOf('[undefined]') == -1) {
toastr.warning(msg);
}
origWarn(msg);
};
// gjs-layer gjs-layer__t-wrapp no-select gjs-two-color open
// Add and beautify tooltips
[['sw-visibility', 'Show Borders'], ['preview', 'Preview'], ['fullscreen', 'Fullscreen'],
['export-template', 'Export'], ['undo', 'Undo'], ['redo', 'Redo'],
['gjs-open-import-webpage', 'Import'], ['canvas-clear', 'Clear canvas']]
.forEach(function(item) {
pn.getButton('options', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'});
});
[['open-sm', 'Style Manager'], ['open-layers', 'Layers'], ['open-blocks', 'Blocks']]
.forEach(function(item) {
pn.getButton('views', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'});
});
var titles = document.querySelectorAll('*[title]');
for (var i = 0; i < titles.length; i++) {
var el = titles[i];
var title = el.getAttribute('title');
title = title ? title.trim(): '';
if(!title)
break;
el.setAttribute('data-tooltip', title);
el.setAttribute('title', '');
}
// Store and load events
// nnnn
editor.on('storage:load', function(e) {
console.log('Loaded ', e);
});
editor.on('storage:store', function(e) { console.log('Stored ', e) });
// Do stuff on load
editor.on('load', function() {
//console.log("LOADED!");
// uuuu
var $ = grapesjs.$;
// Show borders by default
pn.getButton('options', 'sw-visibility').set('active', 1);
/*
// Show logo with the version
var logoCont = document.querySelector('.gjs-logo-cont');
document.querySelector('.gjs-logo-version').innerHTML = 'v' + grapesjs.version;
var logoPanel = document.querySelector('.gjs-pn-commands');
logoPanel.appendChild(logoCont);
*/
// Load and show settings and style manager
var openTmBtn = pn.getButton('views', 'open-tm');
openTmBtn && openTmBtn.set('active', 1);
var openSm = pn.getButton('views', 'open-sm');
openSm && openSm.set('active', 1);
// Remove trait view
pn.removeButton('views', 'open-tm');
// Add Settings Sector
var traitsSector = $('<div class="gjs-sm-sector no-select">'+
'<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
'<div class="gjs-sm-properties" style="display: none;"></div></div>');
var traitsProps = traitsSector.find('.gjs-sm-properties');
traitsProps.append($('.gjs-trt-traits'));
$('.gjs-sm-sectors').before(traitsSector);
traitsSector.find('.gjs-sm-sector-title').on('click', function(){
var traitStyle = traitsProps.get(0).style;
var hidden = traitStyle.display == 'none';
if (hidden) {
traitStyle.display = 'block';
} else {
traitStyle.display = 'none';
}
});
// Open block manager
var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
openBlocksBtn && openBlocksBtn.set('active', 1);
// Move Ad
//$('#gjs').append($('.ad-cont'));
});
/*
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74284223-1', 'auto');
ga('send', 'pageview');
*/
// nnnn
//console.log(editor.Storage);
//editor.Storage.SetAutoSave(false);
/*
// This is our custom script (avoid using arrow functions)
const script = function() {
alert('Hi');
// `this` is bound to the component element
console.log('the element', this);
};
// Define a new custom component
editor.Components.addType('comp-with-js', {
model: {
defaults: {
script
}
}
});
// Create a block for the component, so we can drop it easily
editor.Blocks.add('test-block', {
label: 'Navbar',
attributes: { class: 'fa fa-text' },
content: { type: 'comp-with-js' },
content: gl_navbar
});
*/
}// end RunInitialization function
});// end

View File

@@ -0,0 +1,34 @@
$(document).ready(function(e){
$("#page-what_we_do").click(function(e){
e.preventDefault();
console.log(e);
//window.location.href = 'pages/what_we_do.html';
});
$(".button-33").click(function(e){
e.preventDefault();
window.location.href = 'pages/ways_to_donate.html';
});
});

View File

@@ -0,0 +1,234 @@
<?php
?>
<header class="header-banner">
<div class="container-width">
<div class="logo-container">
<div class="logo">GrapesJS</div>
</div>
<nav class="menu">
<div class="menu-item">BUILDER</div>
<div class="menu-item">TEMPLATE</div>
<div class="menu-item">WEB</div>
</nav>
<div class="clearfix"></div>
<div class="lead-title">Build your templates without coding</div>
<div class="sub-lead-title">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel</div>
<div class="lead-btn">Hover me</div>
</div>
</header>
<section class="flex-sect">
<div class="container-width">
<div class="flex-title">Flex is the new black</div>
<div class="flex-desc">With flexbox system you're able to build complex layouts easily and with free responsivity</div>
<div class="cards">
<div class="card">
<div class="card-header"></div>
<div class="card-body">
<div class="card-title">Title one</div>
<div class="card-sub-title">Subtitle one</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch2"></div>
<div class="card-body">
<div class="card-title">Title two</div>
<div class="card-sub-title">Subtitle two</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch3"></div>
<div class="card-body">
<div class="card-title">Title three</div>
<div class="card-sub-title">Subtitle three</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch4"></div>
<div class="card-body">
<div class="card-title">Title four</div>
<div class="card-sub-title">Subtitle four</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch5"></div>
<div class="card-body">
<div class="card-title">Title five</div>
<div class="card-sub-title">Subtitle five</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch6"></div>
<div class="card-body">
<div class="card-title">Title six</div>
<div class="card-sub-title">Subtitle six</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
</div>
</div>
</section>
<section class="am-sect">
<div class="container-width">
<div class="am-container">
<img class="img-phone" onmousedown="return false" src="../grapesjs3/img/phone-app.png"/>
<div class="am-content">
<div class="am-pre">ASSET MANAGER</div>
<div class="am-title">Manage your images with Asset Manager</div>
<div class="am-desc">You can create image blocks with the command from the left panel and edit them with double click</div>
<div class="am-post">Image uploading is not allowed in this demo</div>
</div>
</div>
</div>
</section>
<section class="blk-sect">
<div class="container-width">
<div class="blk-title">Blocks</div>
<div class="blk-desc">Each element in HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style</div>
<div class="price-cards">
<div class="price-card-cont">
<div class="price-card">
<div class="pc-title">Starter</div>
<div class="pc-desc">Some random list</div>
<div class="pc-feature odd-feat">+ Starter feature 1</div>
<div class="pc-feature">+ Starter feature 2</div>
<div class="pc-feature odd-feat">+ Starter feature 3</div>
<div class="pc-feature">+ Starter feature 4</div>
<div class="pc-amount odd-feat">$ 9,90/mo</div>
</div>
</div>
<div class="price-card-cont">
<div class="price-card pc-regular">
<div class="pc-title">Regular</div>
<div class="pc-desc">Some random list</div>
<div class="pc-feature odd-feat">+ Regular feature 1</div>
<div class="pc-feature">+ Regular feature 2</div>
<div class="pc-feature odd-feat">+ Regular feature 3</div>
<div class="pc-feature">+ Regular feature 4</div>
<div class="pc-amount odd-feat">$ 19,90/mo</div>
</div>
</div>
<div class="price-card-cont">
<div class="price-card pc-enterprise">
<div class="pc-title">Enterprise</div>
<div class="pc-desc">Some random list</div>
<div class="pc-feature odd-feat">+ Enterprise feature 1</div>
<div class="pc-feature">+ Enterprise feature 2</div>
<div class="pc-feature odd-feat">+ Enterprise feature 3</div>
<div class="pc-feature">+ Enterprise feature 4</div>
<div class="pc-amount odd-feat">$ 29,90/mo</div>
</div>
</div>
</div>
</div>
</section>
<section class="bdg-sect">
<div class="container-width">
<h1 class="bdg-title">The team</h1>
<div class="badges">
<div class="badge">
<div class="badge-header"></div>
<img class="badge-avatar" src="../grapesjs3/img/team1.jpg">
<div class="badge-body">
<div class="badge-name">Adam Smith</div>
<div class="badge-role">CEO</div>
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
</div>
<div class="badge-foot">
<span class="badge-link">f</span>
<span class="badge-link">t</span>
<span class="badge-link">ln</span>
</div>
</div>
<div class="badge">
<div class="badge-header"></div>
<img class="badge-avatar" src="../grapesjs3/img/team2.jpg">
<div class="badge-body">
<div class="badge-name">John Black</div>
<div class="badge-role">Software Engineer</div>
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
</div>
<div class="badge-foot">
<span class="badge-link">f</span>
<span class="badge-link">t</span>
<span class="badge-link">ln</span>
</div>
</div>
<div class="badge">
<div class="badge-header"></div>
<img class="badge-avatar" src="../grapesjs3/img/team3.jpg">
<div class="badge-body">
<div class="badge-name">Jessica White</div>
<div class="badge-role">Web Designer</div>
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
</div>
<div class="badge-foot">
<span class="badge-link">f</span>
<span class="badge-link">t</span>
<span class="badge-link">ln</span>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-under">
<div class="container-width">
<div class="footer-container">
<div class="foot-lists">
<div class="foot-list">
<div class="foot-list-title">About us</div>
<div class="foot-list-item">Contact</div>
<div class="foot-list-item">Events</div>
<div class="foot-list-item">Company</div>
<div class="foot-list-item">Jobs</div>
<div class="foot-list-item">Blog</div>
</div>
<div class="foot-list">
<div class="foot-list-title">Services</div>
<div class="foot-list-item">Education</div>
<div class="foot-list-item">Partner</div>
<div class="foot-list-item">Community</div>
<div class="foot-list-item">Forum</div>
<div class="foot-list-item">Download</div>
<div class="foot-list-item">Upgrade</div>
</div>
<div class="clearfix"></div>
</div>
<div class="form-sub">
<div class="foot-form-cont">
<div class="foot-form-title">Subscribe</div>
<div class="foot-form-desc">Subscribe to our newsletter to receive exclusive offers and the latest news</div>
<input name="name" class="sub-input" placeholder="Name" />
<input name="email" class="sub-input" placeholder="Email"/>
<button class="sub-btn" type="button">Submit</button>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="container-width">
<div class="made-with">
made with GrapesJS
</div>
<div class="foot-social-btns">facebook twitter linkedin mail</div>
<div class="clearfix"></div>
</div>
</div>
</footer>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,386 @@
@charset "UTF-8";
/* Overlay */
#cover-spin {
position:fixed;
width:100%;
left:0;right:0;top:0;bottom:0;
background-color: rgba(255,255,255,0.7);
z-index:9999;
display:none;
}
@-webkit-keyframes spin {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#cover-spin::after {
content:'';
display:block;
position:absolute;
left:48%;top:40%;
width:40px;height:40px;
border-style:solid;
border-color:black;
border-top-color:transparent;
border-width: 4px;
border-radius:50%;
-webkit-animation: spin .8s linear infinite;
animation: spin .8s linear infinite;
}
/* End of Overlay */
/* background: #262626; */
.navigation {
height: 70px;
background: #fff;
margin-bottom: 15px;
}
.brand {
position: absolute;
padding-left: 5px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-donate-btn {
background: rgb(42, 110, 181);
width: 10rem;
height: 3rem;
margin-left: 8rem;
margin-top: 1rem;
border: none;
color: rgb(25, 173, 72);
text-align: center;
text-decoration: none;
cursor: pointer;
border-radius: 16px;
}
/* max-width: 1000px; */
.nav-container {
max-width: 1215px;
margin: 0 auto;
}
nav {
width: 88%;
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 10px;
line-height: 70px;
background: #fff;
color: rgb(42, 110, 181);
text-decoration: none;
}
/* background: #262626; */
nav ul li a:hover,
nav ul li a:visited:hover {
/* background: #2581DC; */
/* color: #ffffff; */
}
/* nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
} */
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
/* transform: scale(1.05) rotate(-1deg); */
/* background-color: rgb(25, 173, 72); */
.nav-dropdown a:hover {
background-color: rgba(44,187,99);
box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 999;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
/* #262626;*/
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: white;
height: 70px;
width: 70px;
}
.nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
.nav-toggle span,
.nav-toggle span:before,
.nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: rgb(42, 110, 181);
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
.nav-toggle span:before {
top: -10px;
}
.nav-toggle span:after {
bottom: -10px;
}
.nav-toggle.active span {
background-color: transparent;
}
.nav-toggle.active span:before, .nav-toggle.active span:after {
top: 0;
}
.nav-toggle.active span:before {
transform: rotate(45deg);
}
.nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
.button-34 {
display: none;
}
.mobile-donate-btn {
position: absolute;
padding-left: 5px;
float: left;
line-height: 5px;
text-transform: uppercase;
font-size: 1.4em;
}
.donate-icon1:before {
margin: -20px 0px 0px -17px;
}
@media only screen and (max-width: 920px) {
.nav-mobile {
display: block;
}
.button-33 {
display: none;
}
.button-34 {
display: block;
width: 3.5rem;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
@media screen and (min-width: 921px) {
.nav-list {
display: block !important;
}
}
@media screen and (min-width: 1900px) {
.nav-container{
max-width: 1850px;
}
nav {
width: 105rem;
}
.nav-donate-btn {
margin-left: 50rem;
}
}
@media screen and (min-width: 1264px) {
.nav-donate-btn {
margin-left: 14rem;
}
}
/* CSS */
.button-33 {
background-color: #c2fbd7;
border-radius: 100px;
box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
color: green;
cursor: pointer;
display: inline-block;
font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
padding: 7px 20px;
text-align: center;
text-decoration: none;
transition: all 250ms;
border: 0;
font-size: 16px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-33:hover {
box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
transform: scale(1.05) rotate(-1deg);
}
.temp-container {
height: 500px;
}
.main_nav_link {
position: relative;
padding: 0 10px;
}
.main_nav_link:after {
content: "";
position: absolute;
background-color: rgb(25, 173, 72);;
height: 3px;
width: 0;
left: 0;
bottom: -10px;
margin-bottom: 15px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: translate(-50%, 0); /*Add this*/
}
/* .main_nav_link:hover:after {
width: 100%;
} */
a.main_nav_link:hover {
color: rgb(25, 173, 72);
}
.mnl_about:hover:after{
margin-left: 49%;
width:80%
}
.mnl_news:hover:after{
margin-left: 49%;
width:85%
}
.mnl_young:hover:after{
margin-left: 49%;
width:85%
}
.mnl_you:hover:after{
margin-left: 50%;
width:85%
}
.mnl_contact:hover:after{
margin-left: 49%;
width:80%
}
.mnl_ini:hover:after{
margin-left: 49%;
width:85%
}

View File

@@ -0,0 +1,81 @@
<!--
<div class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown-btn"><a href="#">About<i class="fa fa-caret-down"></i></a></li>
<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
-->
<!--
<div class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#home">Home</a>
<a href="#news">Gallery</a>
<div class="dropdown">
<button class="dropbtn">About Us<i class="nav-drop-icon fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#" id="page-what_we_do" class="navigation-link" data-navlink="">What We Do</a>
<a href="#" id="page-our_story" class="navigation-link" data-navlink="">Our Story</a>
<a href="#" id="page-meet_the_board" class="navigation-link" data-navlink="">Meet The Board</a>
<a href="#" id="page-financials" class="navigation-link" data-navlink="">Financials</a>
<a href="#" id="page-resources" class="navigation-link" data-navlink="">Resources</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">I'm a Young Parent<i class="nav-drop-icon fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">I'm Ready to Apply</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">You Can Help<i class="nav-drop-icon fa fa-caret-down"></i></button></button>
<div class="dropdown-content">
<a href="#" id="page-ways_to_donate" class="navigation-link" data-navlink="">Ways to Donate</a>
<a href="#" id="page-volunteer" class="navigation-link" data-navlink="">Volunteer</a>
<a href="#" id="page-partnerships" class="navigation-link" data-navlink="">Partnerships</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Contact<i class="nav-drop-icon fa fa-caret-down"></i></button></button>
<div class="dropdown-content">
<a href="#" id="page-media_kit" class="navigation-link" data-navlink="">Media Kit</a>
<a href="#" id="page-mailing_list" class="navigation-link" data-navlink="">Join Our Mailing List</a>
<a href="#" id="page-contact_us" class="navigation-link" data-navlink="">Contact Us</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Initiatives<i class="nav-drop-icon fa fa-caret-down"></i></button></button>
<div class="dropdown-content">
<a href="#" id="page-fill_the_bag" class="navigation-link" data-navlink="">Fill The Bag</a>
<a href="#" id="page-moms2prom" class="navigation-link" data-navlink="">MomsProm/Tux n' Tails</a>
<a href="#" id="page-foundation" class="navigation-link" data-navlink="">Foundation to Fatherhood</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News & Events<i class="nav-drop-icon fa fa-caret-down"></i></button></button>
<div class="dropdown-content">
<a href="#" id="page-sponsor" class="navigation-link" data-navlink="">Sponsorship Opportunities</a>
<a href="#" id="page-news" class="navigation-link" data-navlink="">News</a>
<a href="#" id="page-events" class="navigation-link" data-navlink="">Events</a>
</div>
</div>
</div>
-->

View File

@@ -0,0 +1,6 @@
<h3>Contact Us</h3>
<div class="temp-container"></div>

View File

@@ -0,0 +1,5 @@
<h1>Events</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1 @@

View File

@@ -0,0 +1,5 @@
<h1>Fill The Bag</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,4 @@
<h1>Financials</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,5 @@
<h3>Foundations of Fatherhood</h3>
<div class="temp-container"></div>

View File

@@ -0,0 +1,5 @@
<h1>I'm Ready To Apply</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,5 @@
<h3>Join Our Mailing List</h3>
<div class="temp-container"></div>

View File

@@ -0,0 +1,4 @@
<h3>Media Kit</h3>
<div class="temp-container"></div>

View File

@@ -0,0 +1 @@

View File

@@ -0,0 +1,4 @@
<h1>Meet The Board</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,4 @@
<h1>Moms2Prom/Tux n' Tails</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,4 @@
<h1>News</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1 @@

View File

@@ -0,0 +1,4 @@
<h3>Our Story</h3>
<div class="temp-container"></div>

View File

@@ -0,0 +1,4 @@
<h1>Partnerships</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,5 @@
<h1>Resources</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,4 @@
<h1>Sponsorship Opportunities</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,85 @@
<style>
.nav-drop-icon {
margin-left: 9px;
}
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #ffffff;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: rgb(42, 110, 181);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: rgb(42, 110, 181);
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
/* background-color: red; */
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
</style>

View File

@@ -0,0 +1,3 @@
<h1>Volunteer</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,116 @@
<h1>Ways To Donate</h1>
<!--
<h2>PayPal Standard Payments Integration | Client Demo 1</h2>
<div class="row">
<div class="d-flex justify-content-center">
<div id="paypal-button-container"></div>
</div>
</div>
-->
<div class="payment-container">
<div class="container">
<div class="row">
<div class="col-5">
<div id="paypal-button-container" class="paypal-button-container"></div>
</div>
</div>
<div class="row">
<div class="col-5">
<div class="card_container">
<form id="card-form">
<label for="card-number">Card Number</label>
<div id="card-number" class="card_field"></div>
<div style="display: flex; flex-direction: row;">
<div>
<label for="expiration-date">Expiration Date</label>
<div id="expiration-date" class="card_field"></div>
</div>
<div style="margin-left: 10px;">
<label for="cvv">CVV</label>
<div id="cvv" class="card_field"></div>
</div>
</div>
<label for="card-holder-name">Name on Card</label>
<input
type="text"
id="card-holder-name"
name="card-holder-name"
autocomplete="off"
placeholder="card holder name"
/>
<div>
<label for="card-billing-address-street">Billing Address</label>
<input
type="text"
id="card-billing-address-street"
name="card-billing-address-street"
autocomplete="off"
placeholder="street address"
/>
</div>
<div>
<label for="card-billing-address-unit">&nbsp;</label>
<input
type="text"
id="card-billing-address-unit"
name="card-billing-address-unit"
autocomplete="off"
placeholder="unit"
/>
</div>
<div>
<input
type="text"
id="card-billing-address-city"
name="card-billing-address-city"
autocomplete="off"
placeholder="city"
/>
</div>
<div>
<input
type="text"
id="card-billing-address-state"
name="card-billing-address-state"
autocomplete="off"
placeholder="state"
/>
</div>
<div>
<input
type="text"
id="card-billing-address-zip"
name="card-billing-address-zip"
autocomplete="off"
placeholder="zip / postal code"
/>
</div>
<div>
<input
type="text"
id="card-billing-address-country"
name="card-billing-address-country"
autocomplete="off"
placeholder="country code"
/>
</div>
<br />
<button value="submit" id="submit" class="btn btn-success">Pay</button>
</form>
</div>
</div>
</div>
</div><!--Container-->
</div><!--payment-container-->
<div class="temp-container"></div>

View File

@@ -0,0 +1,179 @@
.payment-container {
margin-top: 150px;
}
.paypal-button-container {
border-radius: 5px;
background-color: #FFFFFF;
padding: 20px;
max-width: 760px;
width: 100%;
margin: 0 auto;
}
.card_container {
border-radius: 5px;
background-color: #FFFFFF;
padding: 20px;
max-width: 760px;
width: 100%;
margin: 0 auto;
}
.card_field{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
height:40px;
background:white;
font-size:17px;
color:#3a3a3a;
font-family:helvetica, tahoma, calibri, sans-serif;
}
.card_field_50{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
height:40px;
background:white;
font-size:17px;
color:#3a3a3a;
font-family:helvetica, tahoma, calibri, sans-serif;
}
.card_field_75{
width: 75%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
height:40px;
background:white;
font-size:17px;
color:#3a3a3a;
font-family:helvetica, tahoma, calibri, sans-serif;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
height:40px;
background:white;
font-size:17px;
color:#3a3a3a;
font-family:helvetica, tahoma, calibri, sans-serif;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.message_container {
border-radius: 5px;
background:#FFFFFF;
font-size:13px;
font-family:monospace;
padding: 20px;
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
}
.spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px; /* half width of the spinner gif */
margin-top: -50px; /* half height of the spinner gif */
text-align:center;
z-index:1234;
overflow: auto;
width: 100px; /* width of the spinner gif */
height: 102px; /* height of the spinner gif +2px to fix IE8 issue */
}
.button_container {
display: flex;
justify-content: center;
}
.Pbutton:hover {
background-color: powderblue;
}
.Pbutton {
width:229px;
height:49px;
background:lightblue;
border:1px dotted black;
font-size:17px;
color:#3a3a3a;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
margin: 0 auto;
}
.btn_small{
width:130px;
height:39px;
background:lightblue;
border:1px dotted black;
font-size:14px;
color:#3a3a3a;
}
.btn_small:hover {
background-color: powderblue;
}

View File

@@ -0,0 +1,4 @@
<h1>What We Do</h1>
<div class="temp-container"></div>

View File

@@ -0,0 +1,2 @@

View File

@@ -0,0 +1,248 @@
<?php
require_once dirname( __DIR__, 2 ) . "/core/includes/init.php";
$rootDirectoryLevel = 4;
if(Input::get('publish_website')){
publish_website();
}
if(Input::get('save_website')){
save_website();
}
if(Input::get('retrieve_website_data')){
retrieve_website_data();
}
if(Input::get('upload_image')){
upload_image();
}
function retrieve_website_data(){
$project_name = Input::get('project_name');
$db = new DB();
$response = array(
'ImagesDirectory' => null,
'ImageUploadURL' => null
);
$rows = $db->query("SELECT * FROM webbuilder WHERE ProjectName='".$project_name."'");
if($rows->count() > 0){
$response['WebsiteData'] = $rows->first()->WebsiteData;
$response['ImagesDirectory'] = $rows->first()->ImagesDirectory;
$response['ImageUploadURL'] = $rows->first()->ImageUploadURL;
$response['ImageUploadName'] = $rows->first()->ImageUploadName;
echo json_encode($response);
}
}
function upload_image(){
if (isset($_FILES['upload_image']['tmp_name'])) {
$project_name = Input::get('project_name');
$db = new DB();
$rows = $db->query("SELECT * FROM webbuilder WHERE ProjectName='".$project_name."'");
if($rows->count() > 0){
$ImagesDirectory = $rows->first()->ImagesDirectory;
$dest = dirname( __DIR__, 3 ) . "/". $ImagesDirectory . "/" . $_FILES["upload_image"]["name"][0];
if(move_uploaded_file($_FILES["upload_image"]["tmp_name"][0], $dest)){
$h = "../../" . $ImagesDirectory . "/" . $_FILES["upload_image"]["name"][0];
$my = array("data" => array($h));
echo json_encode($my);
}else{
echo "failure";
}
}
} else {
echo "total failure";
}
}
function save_website(){
$project_name = Input::get('project_name');
$project_data = Input::get('project_data');
$db = new DB();
$rows = $db->query("SELECT * FROM webbuilder WHERE ProjectName='" .$project_name . "'");
if($rows->count() > 0){
$db2 = new DB();
$db->updateFields('webbuilder',array(
'WebsiteData' => $project_data
),array(
'ProjectName' => $project_name
));
$db2 = null;
}
$db = null;
echo "success";
// $user = $db->insert('webbuilder',array(
// 'WebsiteData' => $project_data,
// ),array(
// 'ProjectName' => $project_name
// ));
}
if(Input::get('runthis')){
runthis();
}
//https://www2.cradle2careertx.xyz/portal/admin/webbuilder/other/request.php?runthis=true
function runthis(){
$handle = curl_init();
$url = "https://api-m.sandbox.paypal.com/v1/oauth2/token";
curl_setopt($handle, CURLOPT_URL, $url);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
curl_setopt($handle, CURLOPT_HEADER, "Content-Type: application/x-www-form-urlencoded");
curl_setopt($handle, CURLOPT_USERPWD, "AVNCC3PbfoL6D2rUNClTQM93rlELt8KDgn_E1R7QggLC_X2alPFjfGAlueuuLl7sD5FRs46Fx4SA3OF3:EJVgtHL1opRz4TvQmAgCARsinQhtCHH2JX5aa5y_EooG-KUD99exFwc9T9v4gY7Qnr_4dMA0ZRi2sAYS");
curl_setopt($handle, CURLOPT_POSTFIELDS, "grant_type=client_credentials");
$content = curl_exec($handle);
$content = json_decode($content);
print_r($content->access_token);
echo "<br>";
//A21AAI1w_ZXn5eZNezCIod0wsMIOxc9u6pgI5O1abgO6Im9GMhaPTTcFTEAYOvrqzFoBBcFkTyNe_WgOxhxZivsSavokPAF9Q
$headers = [
"Content-Type: application/json",
"Authorization: Bearer " . $content->access_token,
"Accept-Language: en_US"
];
$handle = curl_init();
$url = "https://api-m.sandbox.paypal.com/v1/identity/generate-token";
curl_setopt($handle, CURLOPT_URL, $url);
curl_setopt($handle, CURLOPT_POST, 1);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
curl_setopt($handle, CURLOPT_HTTPHEADER, $headers);
$content2 = curl_exec($handle);
$content2 = json_decode($content2);
var_dump($content2->client_token);
}
function publish_website(){
global $rootDirectoryLevel;
$data = json_decode( Input::get("data") );
if (!file_exists(dirname( __DIR__, $rootDirectoryLevel ) . "/pages/")) {
mkdir(dirname( __DIR__, $rootDirectoryLevel ) . "/pages", 0777, true);
}
$mainDir = dirname( __DIR__, $rootDirectoryLevel );
$pagesDir = $mainDir . "/pages";
$files = glob($pagesDir); // get all file names
foreach($files as $file){ // iterate files
if(is_file($file)) {
$files .= "\t" . $file;
unlink($file); // delete file
}
}
array_map( 'unlink', array_filter((array) glob($pagesDir . "/*") ) );
for($i=0; $i < count($data->pagesData); $i++){
if($data->pagesData[$i]->enabled == false) { continue; }
if($data->pagesData[$i]->name == "home"){
$htmlFile = $mainDir . "/index.php";
$contents = html_boilerplate("Cradle 2 Career",$data->pagesData[$i]->name, $data->pagesData[$i]->html,"pages/");
createFile($htmlFile, $contents);
}else{
$htmlFile = $pagesDir . "/" . $data->pagesData[$i]->name . ".php";
$contents = html_boilerplate("Cradle 2 Career",$data->pagesData[$i]->name, $data->pagesData[$i]->html,"");
createFile($htmlFile, $contents);
}
$cssFile = $pagesDir . "/" . $data->pagesData[$i]->name . ".css";
createFile($cssFile, $data->pagesData[$i]->css);
}
echo $file; //"SERVER PUBLISHED";
}
function createFile($file,$content){
$myfile = fopen($file, "w") or die("Unable to open file!");
fwrite($myfile, $content);
fclose($myfile);
}
function html_boilerplate($title,$pageName,$body,$prefix){
$jsFile = "";
if($pageName == "home"){
$jsFile = "core/js/main.js";
}else{
$jsFile = "../core/js/main.js";
}
$hello = $prefix . $pageName;
$html = "<?php
\$handle = curl_init();
\$url = \"https://api-m.sandbox.paypal.com/v1/oauth2/token\";
curl_setopt(\$handle, CURLOPT_URL, \$url);
curl_setopt(\$handle, CURLOPT_RETURNTRANSFER, true);
curl_setopt(\$handle, CURLOPT_HEADER, \"Content-Type: application/x-www-form-urlencoded\");
curl_setopt(\$handle, CURLOPT_USERPWD, \"AVNCC3PbfoL6D2rUNClTQM93rlELt8KDgn_E1R7QggLC_X2alPFjfGAlueuuLl7sD5FRs46Fx4SA3OF3:EJVgtHL1opRz4TvQmAgCARsinQhtCHH2JX5aa5y_EooG-KUD99exFwc9T9v4gY7Qnr_4dMA0ZRi2sAYS\");
curl_setopt(\$handle, CURLOPT_POSTFIELDS, \"grant_type=client_credentials\");
\$content = curl_exec(\$handle);
\$content = json_decode(\$content);
\$headers = [
\"Content-Type: application/json\",
\"Authorization: Bearer \" . \$content->access_token,
\"Accept-Language: en_US\"
];
\$handle = curl_init();
\$url = \"https://api-m.sandbox.paypal.com/v1/identity/generate-token\";
curl_setopt(\$handle, CURLOPT_URL, \$url);
curl_setopt(\$handle, CURLOPT_POST, 1);
curl_setopt(\$handle, CURLOPT_RETURNTRANSFER, true);
curl_setopt(\$handle, CURLOPT_HTTPHEADER, \$headers);
\$content2 = curl_exec(\$handle);
\$content2 = json_decode(\$content2);
\$clientToken = \$content2->client_token;
?>
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
<title>$title</title>
<link rel=\"stylesheet\" href=\"$hello.css\">
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\">
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap\">
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css\">
<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css\" integrity=\"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65\" crossorigin=\"anonymous\">
<!-- Sample PayPal credentials (client-id) are included -->
<!-- <script src=\"https://www.paypal.com/sdk/js?client-id=test&currency=USD&intent=capture&enable-funding=venmo\" data-sdk-integration-source=\"integrationbuilder\"></script> -->
<script src=\"https://www.paypal.com/sdk/js?components=buttons,hosted-fields&client-id=AbehsBM-Cg5UwIx6pAWObkiltltLPwN82QlhN-u4qwYMD7Fzly_mDmUGYnSJqHuMLIWjhBk9I5iKsvIN\"data-client-token=\"<?php echo \$clientToken; ?>\"></script>
<script src=\"https://code.jquery.com/jquery-3.6.3.min.js\" integrity=\"sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=\" crossorigin=\"anonymous\"></script>
<script src=\"$jsFile\"></script>
</head>
" . $body . "
</html>
";
return $html;
}

View File

@@ -0,0 +1,563 @@
<style>
.clearfix{ clear:both}
.header-banner{
padding-top: 35px;
padding-bottom: 100px;
color: #ffffff;
font-family: Helvetica, serif;
font-weight: 100;
background-image:url("https://grapesjs.com/img/bg-gr-v.png"), url("https://grapesjs.com/img/work-desk.jpg");
background-attachment:scroll, scroll;
background-position:left top, center center;
background-repeat:repeat-y, no-repeat;
background-size: contain, cover;
}
.container-width{
width: 90%;
max-width: 1150px;
margin: 0 auto;
}
.logo-container{
float: left;
width: 50%;
}
.logo{
background-color: #fff;
border-radius: 5px;
width: 130px;
padding: 10px;
min-height: 30px;
text-align: center;
line-height: 30px;
color: #4d114f;
font-size: 23px;
}
.menu {
float: right;
width: 50%;
}
.menu-item{
float:right;
font-size: 15px;
color:#eee;
width: 130px;
padding: 10px;
min-height: 50px;
text-align: center;
line-height: 30px;
font-weight: 400;
}
.lead-title{
margin: 150px 0 30px 0;
font-size: 40px;
}
.sub-lead-title{
max-width: 650px;
line-height:30px;
margin-bottom:30px;
color: #c6c6c6;
}
.lead-btn{
margin-top: 15px;
padding:10px;
width:190px;
min-height:30px;
font-size:20px;
text-align:center;
letter-spacing:3px;
line-height:30px;
background-color:#d983a6;
border-radius:5px;
transition: all 0.5s ease;
cursor: pointer;
}
.lead-btn:hover{
background-color:#ffffff;
color:#4c114e;
}
.lead-btn:active{
background-color:#4d114f;
color:#fff;
}
.flex-sect{
background-color: #fafafa;
padding: 100px 0;
font-family: Helvetica, serif;
}
.flex-title{
margin-bottom: 15px;
font-size: 2em;
text-align: center;
font-weight: 700;
color:#555;
padding: 5px;
}
.flex-desc{
margin-bottom: 55px;
font-size: 1em;
color: rgba(0, 0, 0, 0.5);
text-align: center;
padding: 5px;
}
.cards{
padding: 20px 0;
display: flex;
justify-content: space-around;
flex-flow: wrap;
}
.card{
background-color: white;
height: 300px;
width:300px;
margin-bottom:30px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 2px;
transition: all 0.5s ease;
font-weight: 100;
overflow: hidden;
}
.card:hover{
margin-top: -5px;
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
}
.card-header{
height: 155px;
background-image:url("https://via.placeholder.com/350x250/78c5d6/fff/image1.jpg");
background-size:cover;
background-position:center center;
}
.card-header.ch2{
background-image:url("https://via.placeholder.com/350x250/459ba8/fff/image2.jpg");
}
.card-header.ch3{
background-image:url("https://via.placeholder.com/350x250/79c267/fff/image3.jpg");
}
.card-header.ch4{
background-image:url("https://via.placeholder.com/350x250/c5d647/fff/image4.jpg");
}
.card-header.ch5{
background-image:url("https://via.placeholder.com/350x250/f28c33/fff/image5.jpg");
}
.card-header.ch6{
background-image:url("https://via.placeholder.com/350x250/e868a2/fff/image6.jpg");
}
.card-body{
padding: 15px 15px 5px 15px;
color: #555;
}
.card-title{
font-size: 1.4em;
margin-bottom: 5px;
}
.card-sub-title{
color: #b3b3b3;
font-size: 1em;
margin-bottom: 15px;
}
.card-desc{
font-size: 0.85rem;
line-height: 17px;
}
.am-sect{
padding-top: 100px;
padding-bottom: 100px;
font-family: Helvetica, serif;
}
.img-phone{
float: left;
}
.am-container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
/*
.am-container{
perspective: 1000px;
}*/
.am-content{
float:left;
padding:7px;
width: 490px;
color: #444;
font-weight: 100;
margin-top: 50px;
}
.am-pre{
padding:7px;
color:#b1b1b1;
font-size:15px;
}
.am-title{
padding:7px;
font-size:25px;
font-weight: 400;
}
.am-desc{
padding:7px;
font-size:17px;
line-height:25px;
}
.am-post{
padding:7px;
line-height:25px;
font-size:13px;
}
.blk-sect{
padding-top: 100px;
padding-bottom: 100px;
background-color: #222222;
font-family: Helvetica, serif;
}
.blk-title{
color:#fff;
font-size:25px;
text-align:center;
margin-bottom: 15px;
}
.blk-desc{
color:#b1b1b1;
font-size:15px;
text-align:center;
max-width:700px;
margin:0 auto;
font-weight:100;
}
.price-cards{
margin-top: 70px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.price-card-cont{
width: 300px;
padding: 7px;
float:left;
}
.price-card{
margin:0 auto;
min-height:350px;
background-color:#d983a6;
border-radius:5px;
font-weight: 100;
color: #fff;
width: 90%;
}
.pc-title{
font-weight:100;
letter-spacing:3px;
text-align:center;
font-size:25px;
background-color:rgba(0, 0, 0, 0.1);
padding:20px;
}
.pc-desc{
padding: 75px 0;
text-align: center;
}
.pc-feature{
color:rgba(255,255,255,0.5);
background-color:rgba(0, 0, 0, 0.1);
letter-spacing:2px;
font-size:15px;
padding:10px 20px;
}
.pc-feature:nth-of-type(2n){
background-color:transparent;
}
.pc-amount{
background-color:rgba(0, 0, 0, 0.1);
font-size: 35px;
text-align: center;
padding: 35px 0;
}
.pc-regular{
background-color: #da78a0;
}
.pc-enterprise{
background-color: #d66a96;
}
.footer-under{
background-color: #312833;
padding-bottom: 100px;
padding-top: 100px;
min-height: 500px;
color:#eee;
position: relative;
font-weight: 100;
font-family: Helvetica,serif;
}
.led{
border-radius: 100%;
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, 0.15);
float: left;
margin: 2px;
transition: all 5s ease;
}
.led:hover{
background-color: #c29fca;/* #eac229 */
box-shadow: 0 0 5px #9d7aa5, 0 0 10px #e6c3ee;/* 0 0 10px 0 #efc111 */
transition: all 0s ease;
}
.copyright {
background-color: rgba(0, 0, 0, 0.15);
color: rgba(238, 238, 238, 0.5);
bottom: 0;
padding: 1em 0;
position: absolute;
width: 100%;
font-size: 0.75em;
}
.made-with{
float: left;
width: 50%;
padding: 5px 0;
}
.foot-social-btns{
display: none;
float: right;
width: 50%;
text-align: right;
padding: 5px 0;
}
.footer-container{
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-around;
}
.foot-list {
float: left;
width: 200px;
}
.foot-list-title {
font-weight: 400;
margin-bottom: 10px;
padding: 0.5em 0;
}
.foot-list-item {
color: rgba(238, 238, 238, 0.8);
font-size: 0.8em;
padding: 0.5em 0;
}
.foot-list-item:hover {
color: rgba(238, 238, 238, 1);
}
.foot-form-cont{
width: 300px;
float: right;
}
.foot-form-title{
color: rgba(255,255,255,0.75);
font-weight: 400;
margin-bottom: 10px;
padding: 0.5em 0;
text-align: right;
font-size: 2em;
}
.foot-form-desc{
font-size: 0.8em;
color: rgba(255,255,255,0.55);
line-height: 20px;
text-align: right;
margin-bottom: 15px;
}
.form {
border-radius: 3px;
padding: 10px 15px;
background-color: rgba(0,0,0,0.2);
}
.input,
.textarea,
.select,
.sub-input {
width: 100%;
margin-bottom: 15px;
padding: 7px 10px;
border-radius: 2px;
color:#fff;
background-color: #554c57;
border: none;
}
.select {
height: 30px;
}
.label {
width: 100%;
display: block;
}
.button,
.sub-btn{
width: 100%;
margin: 15px 0;
background-color: #785580;
border: none;
color:#fff;
border-radius: 2px;
padding: 7px 10px;
font-size: 1em;
cursor: pointer;
}
.sub-btn:hover{
background-color: #91699a;
}
.sub-btn:active{
background-color: #573f5c;
}
.blk-row::after{
content: "";
clear: both;
display: block;
}
.blk-row{
padding: 10px;
}
.blk1{
width: 100%;
padding: 10px;
min-height: 75px;
}
.blk2{
float: left;
width: 50%;
padding: 10px;
min-height: 75px;
}
.blk3{
float: left;
width: 33.3333%;
padding: 10px;
min-height: 75px;
}
.blk37l{
float: left;
width: 30%;
padding: 10px;
min-height: 75px;
}
.blk37r{
float: left;
width: 70%;
padding: 10px;
min-height: 75px;
}
.heading{padding: 10px;}
.paragraph{padding: 10px;}
.bdg-sect{
padding-top:100px;
padding-bottom:100px;
font-family: Helvetica, serif;
background-color: #fafafa;
}
.bdg-title{
text-align: center;
font-size: 2em;
margin-bottom: 55px;
color: #555555;
}
.badges{
padding:20px;
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}
.badge{
width: 290px;
font-family: Helvetica, serif;
background-color: white;
margin-bottom:30px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 3px;
font-weight: 100;
overflow: hidden;
text-align: center;
}
.badge-header{
height: 115px;
background-image:url("https://grapesjs.com/img/bg-gr-v.png"), url("https://grapesjs.com/img/work-desk.jpg");
background-position:left top, center center;
background-attachment:scroll, fixed;
overflow: hidden;
}
.blurer{
filter: blur(5px);
}
.badge-name{
font-size: 1.4em;
margin-bottom: 5px;
}
.badge-role{
color: #777;
font-size: 1em;
margin-bottom: 25px;
}
.badge-desc{
font-size: 0.85rem;
line-height: 20px;
}
.badge-avatar{
width:100px;
height:100px;
border-radius: 100%;
border: 5px solid #fff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
margin-top: -75px;
position: relative;
}
.badge-body{
margin: 35px 10px;
}
.badge-foot{
color:#fff;
background-color:#a290a5;
padding-top:13px;
padding-bottom:13px;
display: flex;
justify-content: center;
}
.badge-link{
height: 35px;
width: 35px;
line-height: 35px;
font-weight: 700;
background-color: #fff;
color: #a290a5;
display: block;
border-radius: 100%;
margin: 0 10px;
}
.quote{
color:#777;
font-weight: 300;
padding: 10px;
box-shadow: -5px 0 0 0 #ccc;
font-style: italic;
margin: 20px 30px;
}
@media (max-width: 768px){
.foot-form-cont{
width:400px;
}
.foot-form-title{
width:autopx;
}
}
@media (max-width: 480px){
.foot-lists{
display:none;
}
}
</style>