From f6be728c1968edd28bea0c8fe0432f743dfacf51 Mon Sep 17 00:00:00 2001 From: Adrian Amaglio Date: Tue, 1 Aug 2023 17:26:50 +0200 Subject: [PATCH] temp --- backend-docker/Dockerfile | 16 +- backend-docker/entrypoint.sh | 6 + css/main.css | 6 + db.json | 2875 ++++++++++++++++++++++++++++++++++ grapesjs | 2 +- js/main.js | 60 +- 6 files changed, 2940 insertions(+), 25 deletions(-) create mode 100644 db.json diff --git a/backend-docker/Dockerfile b/backend-docker/Dockerfile index bed1e29..ec13641 100644 --- a/backend-docker/Dockerfile +++ b/backend-docker/Dockerfile @@ -1,18 +1,16 @@ FROM node:20-alpine # Workdir -RUN mkdir /usr/local/app -RUN chown 33:33 /usr/local/app -WORKDIR /usr/local/app - -ADD entrypoint.sh /usr/local/bin +RUN mkdir /usr/lib/json-server +#RUN chown 33:33 /usr/lib/json-server +WORKDIR /usr/lib/json-server # Install modules RUN npm install -g json-server -USER 33 +ADD entrypoint.sh /usr/local/bin + +#USER 33 -# Cant kill with ctrl+c -#ENTRYPOINT ["/usr/local/bin/json-server", "db.json"] ENTRYPOINT ["entrypoint.sh"] -CMD ["json-server", "-H", "0.0.0.0", "db.json"] +CMD ["json-server", "-H", "0.0.0.0", "/usr/lib/json-server/db.json"] diff --git a/backend-docker/entrypoint.sh b/backend-docker/entrypoint.sh index f49c0be..45ebd26 100755 --- a/backend-docker/entrypoint.sh +++ b/backend-docker/entrypoint.sh @@ -1,3 +1,9 @@ #!/bin/sh +if [ ! -f db.json ] ; then + touch db.json +fi +if [ ! -s db.json ] ; then + echo '{"projects": [ {"id": 1, "data": {"assets": [], "styles": [], "pages": []} } ]}' > db.json +fi "$@" diff --git a/css/main.css b/css/main.css index a7a067e..f2e9f4a 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,9 @@ .red { color: #f24b4b; } +.gjs-block { + width: auto; + height: auto; + min-height: auto; +} + diff --git a/db.json b/db.json new file mode 100644 index 0000000..0012c25 --- /dev/null +++ b/db.json @@ -0,0 +1,2875 @@ +{ + "projects": [ + { + "id": 1, + "data": { + "assets": [ + { + "type": "image", + "src": "./img/team1.jpg", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "./img/team2.jpg", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "./img/team3.jpg", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "https://via.placeholder.com/350x250/78c5d6/fff", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "https://via.placeholder.com/350x250/459ba8/fff", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "https://via.placeholder.com/350x250/79c267/fff", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "https://via.placeholder.com/350x250/c5d647/fff", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "https://via.placeholder.com/350x250/f28c33/fff", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "https://via.placeholder.com/350x250/e868a2/fff", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "https://via.placeholder.com/350x250/cc4360/fff", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "./img/work-desk.jpg", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "./img/phone-app.png", + "unitDim": "px", + "height": 0, + "width": 0 + }, + { + "type": "image", + "src": "./img/bg-gr-v.png", + "unitDim": "px", + "height": 0, + "width": 0 + } + ], + "styles": [ + { + "selectors": [ + "clearfix" + ], + "style": { + "clear": "both" + } + }, + { + "selectors": [ + "header-banner" + ], + "style": { + "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" + } + }, + { + "selectors": [ + "container-width" + ], + "style": { + "width": "90%", + "max-width": "1150px", + "margin": "0 auto" + } + }, + { + "selectors": [ + "logo-container" + ], + "style": { + "float": "left", + "width": "50%" + } + }, + { + "selectors": [ + "logo" + ], + "style": { + "background-color": "#fff", + "border-radius": "5px", + "width": "130px", + "padding": "10px", + "min-height": "30px", + "text-align": "center", + "line-height": "30px", + "color": "#4d114f", + "font-size": "23px" + } + }, + { + "selectors": [ + "menu" + ], + "style": { + "float": "right", + "width": "50%" + } + }, + { + "selectors": [ + "menu-item" + ], + "style": { + "float": "right", + "font-size": "15px", + "color": "#eee", + "width": "130px", + "padding": "10px", + "min-height": "50px", + "text-align": "center", + "line-height": "30px", + "font-weight": "400" + } + }, + { + "selectors": [ + "lead-title" + ], + "style": { + "margin": "150px 0 30px 0", + "font-size": "40px" + } + }, + { + "selectors": [ + "sub-lead-title" + ], + "style": { + "max-width": "650px", + "line-height": "30px", + "margin-bottom": "30px", + "color": "#c6c6c6" + } + }, + { + "selectors": [ + "lead-btn" + ], + "style": { + "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" + } + }, + { + "selectors": [ + "lead-btn" + ], + "style": { + "background-color": "#ffffff", + "color": "#4c114e" + }, + "state": "hover" + }, + { + "selectors": [ + "lead-btn" + ], + "style": { + "background-color": "#4d114f", + "color": "#fff" + }, + "state": "active" + }, + { + "selectors": [ + "flex-sect" + ], + "style": { + "background-color": "#fafafa", + "padding": "100px 0", + "font-family": "Helvetica, serif" + } + }, + { + "selectors": [ + "flex-title" + ], + "style": { + "margin-bottom": "15px", + "font-size": "2em", + "text-align": "center", + "font-weight": "700", + "color": "#555", + "padding": "5px" + } + }, + { + "selectors": [ + "flex-desc" + ], + "style": { + "margin-bottom": "55px", + "font-size": "1em", + "color": "rgba(0, 0, 0, 0.5)", + "text-align": "center", + "padding": "5px" + } + }, + { + "selectors": [ + "cards" + ], + "style": { + "padding": "20px 0", + "display": "flex", + "justify-content": "space-around", + "flex-flow": "wrap" + } + }, + { + "selectors": [ + "card" + ], + "style": { + "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" + } + }, + { + "selectors": [ + "card" + ], + "style": { + "margin-top": "-5px", + "box-shadow": "0 20px 30px 0 rgba(0, 0, 0, 0.2)" + }, + "state": "hover" + }, + { + "selectors": [ + "card-header" + ], + "style": { + "height": "155px", + "background-image": "url(\"https://via.placeholder.com/350x250/78c5d6/fff\")", + "background-size": "cover", + "background-position": "center center" + } + }, + { + "selectors": [ + "card-header", + "ch2" + ], + "style": { + "background-image": "url(\"https://via.placeholder.com/350x250/459ba8/fff\")" + } + }, + { + "selectors": [ + "card-header", + "ch3" + ], + "style": { + "background-image": "url(\"https://via.placeholder.com/350x250/79c267/fff\")" + } + }, + { + "selectors": [ + "card-header", + "ch4" + ], + "style": { + "background-image": "url(\"https://via.placeholder.com/350x250/c5d647/fff\")" + } + }, + { + "selectors": [ + "card-header", + "ch5" + ], + "style": { + "background-image": "url(\"https://via.placeholder.com/350x250/f28c33/fff\")" + } + }, + { + "selectors": [ + "card-header", + "ch6" + ], + "style": { + "background-image": "url(\"https://via.placeholder.com/350x250/e868a2/fff\")" + } + }, + { + "selectors": [ + "card-body" + ], + "style": { + "padding": "15px 15px 5px 15px", + "color": "#555" + } + }, + { + "selectors": [ + "card-title" + ], + "style": { + "font-size": "1.4em", + "margin-bottom": "5px" + } + }, + { + "selectors": [ + "card-sub-title" + ], + "style": { + "color": "#b3b3b3", + "font-size": "1em", + "margin-bottom": "15px" + } + }, + { + "selectors": [ + "card-desc" + ], + "style": { + "font-size": "0.85rem", + "line-height": "17px" + } + }, + { + "selectors": [ + "am-sect" + ], + "style": { + "padding-top": "100px", + "padding-bottom": "100px", + "font-family": "Helvetica, serif" + } + }, + { + "selectors": [ + "img-phone" + ], + "style": { + "float": "left" + } + }, + { + "selectors": [ + "am-container" + ], + "style": { + "display": "flex", + "flex-wrap": "wrap", + "align-items": "center", + "justify-content": "space-around" + } + }, + { + "selectors": [ + "am-content" + ], + "style": { + "float": "left", + "padding": "7px", + "width": "490px", + "color": "#444", + "font-weight": "100", + "margin-top": "50px" + } + }, + { + "selectors": [ + "am-pre" + ], + "style": { + "padding": "7px", + "color": "#b1b1b1", + "font-size": "15px" + } + }, + { + "selectors": [ + "am-title" + ], + "style": { + "padding": "7px", + "font-size": "25px", + "font-weight": "400" + } + }, + { + "selectors": [ + "am-desc" + ], + "style": { + "padding": "7px", + "font-size": "17px", + "line-height": "25px" + } + }, + { + "selectors": [ + "am-post" + ], + "style": { + "padding": "7px", + "line-height": "25px", + "font-size": "13px" + } + }, + { + "selectors": [ + "blk-sect" + ], + "style": { + "padding-top": "100px", + "padding-bottom": "100px", + "background-color": "#222222", + "font-family": "Helvetica, serif" + } + }, + { + "selectors": [ + "blk-title" + ], + "style": { + "color": "#fff", + "font-size": "25px", + "text-align": "center", + "margin-bottom": "15px" + } + }, + { + "selectors": [ + "blk-desc" + ], + "style": { + "color": "#b1b1b1", + "font-size": "15px", + "text-align": "center", + "max-width": "700px", + "margin": "0 auto", + "font-weight": "100" + } + }, + { + "selectors": [ + "price-cards" + ], + "style": { + "margin-top": "70px", + "display": "flex", + "flex-wrap": "wrap", + "align-items": "center", + "justify-content": "space-around" + } + }, + { + "selectors": [ + "price-card-cont" + ], + "style": { + "width": "300px", + "padding": "7px", + "float": "left" + } + }, + { + "selectors": [ + "price-card" + ], + "style": { + "margin": "0 auto", + "min-height": "350px", + "background-color": "#d983a6", + "border-radius": "5px", + "font-weight": "100", + "color": "#fff", + "width": "90%" + } + }, + { + "selectors": [ + "pc-title" + ], + "style": { + "font-weight": "100", + "letter-spacing": "3px", + "text-align": "center", + "font-size": "25px", + "background-color": "rgba(0, 0, 0, 0.1)", + "padding": "20px" + } + }, + { + "selectors": [ + "pc-desc" + ], + "style": { + "padding": "75px 0", + "text-align": "center" + } + }, + { + "selectors": [ + "pc-feature" + ], + "style": { + "color": "rgba(255,255,255,0.5)", + "background-color": "rgba(0, 0, 0, 0.1)", + "letter-spacing": "2px", + "font-size": "15px", + "padding": "10px 20px" + } + }, + { + "selectors": [ + "pc-feature" + ], + "style": { + "background-color": "transparent" + }, + "state": "nth-of-type(2n)" + }, + { + "selectors": [ + "pc-amount" + ], + "style": { + "background-color": "rgba(0, 0, 0, 0.1)", + "font-size": "35px", + "text-align": "center", + "padding": "35px 0" + } + }, + { + "selectors": [ + "pc-regular" + ], + "style": { + "background-color": "#da78a0" + } + }, + { + "selectors": [ + "pc-enterprise" + ], + "style": { + "background-color": "#d66a96" + } + }, + { + "selectors": [ + "footer-under" + ], + "style": { + "background-color": "#312833", + "padding-bottom": "100px", + "padding-top": "100px", + "min-height": "500px", + "color": "#eee", + "position": "relative", + "font-weight": "100", + "font-family": "Helvetica,serif" + } + }, + { + "selectors": [ + "led" + ], + "style": { + "border-radius": "100%", + "width": "10px", + "height": "10px", + "background-color": "rgba(0, 0, 0, 0.15)", + "float": "left", + "margin": "2px", + "transition": "all 5s ease" + } + }, + { + "selectors": [ + "led" + ], + "style": { + "background-color": "#c29fca", + "undefined": "undefined", + "box-shadow": "0 0 5px #9d7aa5, 0 0 10px #e6c3ee", + "transition": "all 0s ease" + }, + "state": "hover" + }, + { + "selectors": [ + "copyright" + ], + "style": { + "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" + } + }, + { + "selectors": [ + "made-with" + ], + "style": { + "float": "left", + "width": "50%", + "padding": "5px 0" + } + }, + { + "selectors": [ + "foot-social-btns" + ], + "style": { + "display": "none", + "float": "right", + "width": "50%", + "text-align": "right", + "padding": "5px 0" + } + }, + { + "selectors": [ + "footer-container" + ], + "style": { + "display": "flex", + "flex-wrap": "wrap", + "align-items": "stretch", + "justify-content": "space-around" + } + }, + { + "selectors": [ + "foot-list" + ], + "style": { + "float": "left", + "width": "200px" + } + }, + { + "selectors": [ + "foot-list-title" + ], + "style": { + "font-weight": "400", + "margin-bottom": "10px", + "padding": "0.5em 0" + } + }, + { + "selectors": [ + "foot-list-item" + ], + "style": { + "color": "rgba(238, 238, 238, 0.8)", + "font-size": "0.8em", + "padding": "0.5em 0" + } + }, + { + "selectors": [ + "foot-list-item" + ], + "style": { + "color": "rgba(238, 238, 238, 1)" + }, + "state": "hover" + }, + { + "selectors": [ + "foot-form-cont" + ], + "style": { + "width": "300px", + "float": "right" + } + }, + { + "selectors": [ + "foot-form-title" + ], + "style": { + "color": "rgba(255,255,255,0.75)", + "font-weight": "400", + "margin-bottom": "10px", + "padding": "0.5em 0", + "text-align": "right", + "font-size": "2em" + } + }, + { + "selectors": [ + "foot-form-desc" + ], + "style": { + "font-size": "0.8em", + "color": "rgba(255,255,255,0.55)", + "line-height": "20px", + "text-align": "right", + "margin-bottom": "15px" + } + }, + { + "selectors": [ + "form" + ], + "style": { + "border-radius": "3px", + "padding": "10px 15px", + "background-color": "rgba(0,0,0,0.2)" + } + }, + { + "selectors": [ + "input" + ], + "style": { + "width": "100%", + "margin-bottom": "15px", + "padding": "7px 10px", + "border-radius": "2px", + "color": "#fff", + "background-color": "#554c57", + "border": "none" + } + }, + { + "selectors": [ + "textarea" + ], + "style": { + "width": "100%", + "margin-bottom": "15px", + "padding": "7px 10px", + "border-radius": "2px", + "color": "#fff", + "background-color": "#554c57", + "border": "none" + } + }, + { + "selectors": [ + "select" + ], + "style": { + "width": "100%", + "margin-bottom": "15px", + "padding": "7px 10px", + "border-radius": "2px", + "color": "#fff", + "background-color": "#554c57", + "border": "none", + "height": "30px" + } + }, + { + "selectors": [ + "sub-input" + ], + "style": { + "width": "100%", + "margin-bottom": "15px", + "padding": "7px 10px", + "border-radius": "2px", + "color": "#fff", + "background-color": "#554c57", + "border": "none" + } + }, + { + "selectors": [ + "label" + ], + "style": { + "width": "100%", + "display": "block" + } + }, + { + "selectors": [ + "button" + ], + "style": { + "width": "100%", + "margin": "15px 0", + "background-color": "#785580", + "border": "none", + "color": "#fff", + "border-radius": "2px", + "padding": "7px 10px", + "font-size": "1em", + "cursor": "pointer" + } + }, + { + "selectors": [ + "sub-btn" + ], + "style": { + "width": "100%", + "margin": "15px 0", + "background-color": "#785580", + "border": "none", + "color": "#fff", + "border-radius": "2px", + "padding": "7px 10px", + "font-size": "1em", + "cursor": "pointer" + } + }, + { + "selectors": [ + "sub-btn" + ], + "style": { + "background-color": "#91699a" + }, + "state": "hover" + }, + { + "selectors": [ + "sub-btn" + ], + "style": { + "background-color": "#573f5c" + }, + "state": "active" + }, + { + "selectors": [ + "blk-row" + ], + "style": { + "content": "\"\"", + "clear": "both", + "display": "block" + }, + "state": ":after" + }, + { + "selectors": [ + "blk-row" + ], + "style": { + "padding": "10px" + } + }, + { + "selectors": [ + "blk1" + ], + "style": { + "width": "100%", + "padding": "10px", + "min-height": "75px" + } + }, + { + "selectors": [ + "blk2" + ], + "style": { + "float": "left", + "width": "50%", + "padding": "10px", + "min-height": "75px" + } + }, + { + "selectors": [ + "blk3" + ], + "style": { + "float": "left", + "width": "33.3333%", + "padding": "10px", + "min-height": "75px" + } + }, + { + "selectors": [ + "blk37l" + ], + "style": { + "float": "left", + "width": "30%", + "padding": "10px", + "min-height": "75px" + } + }, + { + "selectors": [ + "blk37r" + ], + "style": { + "float": "left", + "width": "70%", + "padding": "10px", + "min-height": "75px" + } + }, + { + "selectors": [ + "heading" + ], + "style": { + "padding": "10px" + } + }, + { + "selectors": [ + "paragraph" + ], + "style": { + "padding": "10px" + } + }, + { + "selectors": [ + "bdg-sect" + ], + "style": { + "padding-top": "100px", + "padding-bottom": "100px", + "font-family": "Helvetica, serif", + "background-color": "#fafafa" + } + }, + { + "selectors": [ + "bdg-title" + ], + "style": { + "text-align": "center", + "font-size": "2em", + "margin-bottom": "55px", + "color": "#555555" + } + }, + { + "selectors": [ + "badges" + ], + "style": { + "padding": "20px", + "display": "flex", + "justify-content": "space-around", + "align-items": "flex-start", + "flex-wrap": "wrap" + } + }, + { + "selectors": [ + "badge" + ], + "style": { + "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" + } + }, + { + "selectors": [ + "badge-header" + ], + "style": { + "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" + } + }, + { + "selectors": [ + "blurer" + ], + "style": { + "filter": "blur(5px)" + } + }, + { + "selectors": [ + "badge-name" + ], + "style": { + "font-size": "1.4em", + "margin-bottom": "5px" + } + }, + { + "selectors": [ + "badge-role" + ], + "style": { + "color": "#777", + "font-size": "1em", + "margin-bottom": "25px" + } + }, + { + "selectors": [ + "badge-desc" + ], + "style": { + "font-size": "0.85rem", + "line-height": "20px" + } + }, + { + "selectors": [ + "badge-avatar" + ], + "style": { + "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" + } + }, + { + "selectors": [ + "badge-body" + ], + "style": { + "margin": "35px 10px" + } + }, + { + "selectors": [ + "badge-foot" + ], + "style": { + "color": "#fff", + "background-color": "#a290a5", + "padding-top": "13px", + "padding-bottom": "13px", + "display": "flex", + "justify-content": "center" + } + }, + { + "selectors": [ + "badge-link" + ], + "style": { + "height": "35px", + "width": "35px", + "line-height": "35px", + "font-weight": "700", + "background-color": "#fff", + "color": "#a290a5", + "display": "block", + "border-radius": "100%", + "margin": "0 10px" + } + }, + { + "selectors": [ + "quote" + ], + "style": { + "color": "#777", + "font-weight": "300", + "padding": "10px", + "box-shadow": "-5px 0 0 0 #ccc", + "font-style": "italic", + "margin": "20px 30px" + } + }, + { + "selectors": [ + "foot-form-cont" + ], + "style": { + "width": "400px" + }, + "mediaText": "(max-width: 768px)", + "atRuleType": "media" + }, + { + "selectors": [ + "foot-form-title" + ], + "style": { + "width": "autopx" + }, + "mediaText": "(max-width: 768px)", + "atRuleType": "media" + }, + { + "selectors": [ + "foot-lists" + ], + "style": { + "display": "none" + }, + "mediaText": "(max-width: 480px)", + "atRuleType": "media" + } + ], + "pages": [ + { + "frames": [ + { + "component": { + "type": "wrapper", + "stylable": [ + "background", + "background-color", + "background-image", + "background-repeat", + "background-attachment", + "background-position", + "background-size" + ], + "components": [ + { + "tagName": "header", + "classes": [ + "header-banner" + ], + "components": [ + { + "classes": [ + "container-width" + ], + "attributes": { + "id": "i1z7" + }, + "components": [ + { + "classes": [ + "logo-container" + ], + "components": [ + { + "type": "text", + "classes": [ + "logo" + ], + "components": [ + { + "type": "textnode", + "content": "GrapesJS" + } + ] + } + ] + }, + { + "tagName": "nav", + "classes": [ + "menu" + ], + "components": [ + { + "type": "text", + "classes": [ + "menu-item" + ], + "components": [ + { + "type": "textnode", + "content": "BUILDER" + } + ] + }, + { + "type": "text", + "classes": [ + "menu-item" + ], + "components": [ + { + "type": "textnode", + "content": "TEMPLATE" + } + ] + }, + { + "type": "text", + "classes": [ + "menu-item" + ], + "components": [ + { + "type": "textnode", + "content": "WEB" + } + ] + } + ] + }, + { + "classes": [ + "clearfix" + ] + }, + { + "type": "text", + "classes": [ + "lead-title" + ], + "attributes": { + "id": "ixq7n" + }, + "components": [ + { + "type": "textnode", + "content": "Build your templates without coding" + }, + { + "tagName": "br", + "void": true + } + ] + }, + { + "type": "text", + "classes": [ + "sub-lead-title" + ], + "components": [ + { + "type": "textnode", + "content": "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" + } + ] + }, + { + "type": "text", + "classes": [ + "lead-btn" + ], + "components": [ + { + "type": "textnode", + "content": "Hover me" + } + ] + } + ] + } + ] + }, + { + "tagName": "section", + "classes": [ + "flex-sect" + ], + "components": [ + { + "classes": [ + "container-width" + ], + "components": [ + { + "type": "text", + "classes": [ + "flex-title" + ], + "components": [ + { + "type": "textnode", + "content": "Flex is the new black" + } + ] + }, + { + "type": "text", + "classes": [ + "flex-desc" + ], + "components": [ + { + "type": "textnode", + "content": "With flexbox system you're able to build complex layouts easily and with free responsivity" + } + ] + }, + { + "classes": [ + "cards" + ], + "components": [ + { + "classes": [ + "card" + ], + "components": [ + { + "classes": [ + "card-header" + ] + }, + { + "classes": [ + "card-body" + ], + "components": [ + { + "type": "text", + "classes": [ + "card-title" + ], + "components": [ + { + "type": "textnode", + "content": "Title one" + } + ] + }, + { + "type": "text", + "classes": [ + "card-sub-title" + ], + "components": [ + { + "type": "textnode", + "content": "Subtitle one" + } + ] + }, + { + "type": "text", + "classes": [ + "card-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore" + } + ] + } + ] + } + ] + }, + { + "classes": [ + "card" + ], + "components": [ + { + "classes": [ + "card-header", + "ch2" + ] + }, + { + "classes": [ + "card-body" + ], + "components": [ + { + "type": "text", + "classes": [ + "card-title" + ], + "components": [ + { + "type": "textnode", + "content": "Title two" + } + ] + }, + { + "type": "text", + "classes": [ + "card-sub-title" + ], + "components": [ + { + "type": "textnode", + "content": "Subtitle two" + } + ] + }, + { + "type": "text", + "classes": [ + "card-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore" + } + ] + } + ] + } + ] + }, + { + "classes": [ + "card" + ], + "components": [ + { + "classes": [ + "card-header", + "ch3" + ] + }, + { + "classes": [ + "card-body" + ], + "components": [ + { + "type": "text", + "classes": [ + "card-title" + ], + "components": [ + { + "type": "textnode", + "content": "Title three" + } + ] + }, + { + "type": "text", + "classes": [ + "card-sub-title" + ], + "components": [ + { + "type": "textnode", + "content": "Subtitle three" + } + ] + }, + { + "type": "text", + "classes": [ + "card-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore" + } + ] + } + ] + } + ] + }, + { + "classes": [ + "card" + ], + "components": [ + { + "classes": [ + "card-header", + "ch4" + ] + }, + { + "classes": [ + "card-body" + ], + "components": [ + { + "type": "text", + "classes": [ + "card-title" + ], + "components": [ + { + "type": "textnode", + "content": "Title four" + } + ] + }, + { + "type": "text", + "classes": [ + "card-sub-title" + ], + "components": [ + { + "type": "textnode", + "content": "Subtitle four" + } + ] + }, + { + "type": "text", + "classes": [ + "card-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore" + } + ] + } + ] + } + ] + }, + { + "classes": [ + "card" + ], + "components": [ + { + "classes": [ + "card-header", + "ch5" + ] + }, + { + "classes": [ + "card-body" + ], + "components": [ + { + "type": "text", + "classes": [ + "card-title" + ], + "components": [ + { + "type": "textnode", + "content": "Title five" + } + ] + }, + { + "type": "text", + "classes": [ + "card-sub-title" + ], + "components": [ + { + "type": "textnode", + "content": "Subtitle five" + } + ] + }, + { + "type": "text", + "classes": [ + "card-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore" + } + ] + } + ] + } + ] + }, + { + "classes": [ + "card" + ], + "components": [ + { + "classes": [ + "card-header", + "ch6" + ] + }, + { + "classes": [ + "card-body" + ], + "components": [ + { + "type": "text", + "classes": [ + "card-title" + ], + "components": [ + { + "type": "textnode", + "content": "Title six" + } + ] + }, + { + "type": "text", + "classes": [ + "card-sub-title" + ], + "components": [ + { + "type": "textnode", + "content": "Subtitle six" + } + ] + }, + { + "type": "text", + "classes": [ + "card-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "tagName": "section", + "classes": [ + "am-sect" + ], + "components": [ + { + "classes": [ + "container-width" + ], + "components": [ + { + "classes": [ + "am-container" + ], + "components": [ + { + "type": "image", + "resizable": { + "ratioDefault": 1 + }, + "classes": [ + "img-phone" + ], + "attributes": { + "src": "./img/phone-app.png" + } + }, + { + "classes": [ + "am-content" + ], + "components": [ + { + "type": "text", + "classes": [ + "am-pre" + ], + "components": [ + { + "type": "textnode", + "content": "ASSET MANAGER" + } + ] + }, + { + "type": "text", + "classes": [ + "am-title" + ], + "components": [ + { + "type": "textnode", + "content": "Manage your images with Asset Manager" + } + ] + }, + { + "type": "text", + "classes": [ + "am-desc" + ], + "components": [ + { + "type": "textnode", + "content": "You can create image blocks with the command from the left panel and edit them with double click" + } + ] + }, + { + "type": "text", + "classes": [ + "am-post" + ], + "components": [ + { + "type": "textnode", + "content": "Image uploading is not allowed in this demo" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "tagName": "section", + "classes": [ + "blk-sect" + ], + "components": [ + { + "classes": [ + "container-width" + ], + "components": [ + { + "type": "text", + "classes": [ + "blk-title" + ], + "components": [ + { + "type": "textnode", + "content": "Blocks" + } + ] + }, + { + "type": "text", + "classes": [ + "blk-desc" + ], + "components": [ + { + "type": "textnode", + "content": "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" + } + ] + }, + { + "classes": [ + "price-cards" + ], + "components": [ + { + "classes": [ + "price-card-cont" + ], + "components": [ + { + "classes": [ + "price-card" + ], + "components": [ + { + "type": "text", + "classes": [ + "pc-title" + ], + "components": [ + { + "type": "textnode", + "content": "Starter" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Some random list" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature", + "odd-feat" + ], + "components": [ + { + "type": "textnode", + "content": "+ Starter feature 1" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature" + ], + "components": [ + { + "type": "textnode", + "content": "+ Starter feature 2" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature", + "odd-feat" + ], + "components": [ + { + "type": "textnode", + "content": "+ Starter feature 3" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature" + ], + "components": [ + { + "type": "textnode", + "content": "+ Starter feature 4" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-amount", + "odd-feat" + ], + "components": [ + { + "type": "textnode", + "content": "$ 9,90/mo" + } + ] + } + ] + } + ] + }, + { + "classes": [ + "price-card-cont" + ], + "components": [ + { + "classes": [ + "price-card", + "pc-regular" + ], + "components": [ + { + "type": "text", + "classes": [ + "pc-title" + ], + "components": [ + { + "type": "textnode", + "content": "Regular" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Some random list" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature", + "odd-feat" + ], + "components": [ + { + "type": "textnode", + "content": "+ Regular feature 1" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature" + ], + "components": [ + { + "type": "textnode", + "content": "+ Regular feature 2" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature", + "odd-feat" + ], + "components": [ + { + "type": "textnode", + "content": "+ Regular feature 3" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature" + ], + "components": [ + { + "type": "textnode", + "content": "+ Regular feature 4" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-amount", + "odd-feat" + ], + "components": [ + { + "type": "textnode", + "content": "$ 19,90/mo" + } + ] + } + ] + } + ] + }, + { + "classes": [ + "price-card-cont" + ], + "components": [ + { + "classes": [ + "price-card", + "pc-enterprise" + ], + "components": [ + { + "type": "text", + "classes": [ + "pc-title" + ], + "components": [ + { + "type": "textnode", + "content": "Enterprise" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Some random list" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature", + "odd-feat" + ], + "components": [ + { + "type": "textnode", + "content": "+ Enterprise feature 1" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature" + ], + "components": [ + { + "type": "textnode", + "content": "+ Enterprise feature 2" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature", + "odd-feat" + ], + "components": [ + { + "type": "textnode", + "content": "+ Enterprise feature 3" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-feature" + ], + "components": [ + { + "type": "textnode", + "content": "+ Enterprise feature 4" + } + ] + }, + { + "type": "text", + "classes": [ + "pc-amount", + "odd-feat" + ], + "components": [ + { + "type": "textnode", + "content": "$ 29,90/mo" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "tagName": "section", + "classes": [ + "bdg-sect" + ], + "components": [ + { + "classes": [ + "container-width" + ], + "components": [ + { + "tagName": "h1", + "type": "text", + "classes": [ + "bdg-title" + ], + "components": [ + { + "type": "textnode", + "content": "The team" + } + ] + }, + { + "classes": [ + "badges" + ], + "components": [ + { + "classes": [ + "badge" + ], + "components": [ + { + "classes": [ + "badge-header" + ] + }, + { + "type": "image", + "resizable": { + "ratioDefault": 1 + }, + "classes": [ + "badge-avatar" + ], + "attributes": { + "src": "img/team1.jpg" + } + }, + { + "classes": [ + "badge-body" + ], + "components": [ + { + "type": "text", + "classes": [ + "badge-name" + ], + "components": [ + { + "type": "textnode", + "content": "Adam Smith" + } + ] + }, + { + "type": "text", + "classes": [ + "badge-role" + ], + "components": [ + { + "type": "textnode", + "content": "CEO" + } + ] + }, + { + "type": "text", + "classes": [ + "badge-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit" + } + ] + } + ] + }, + { + "classes": [ + "badge-foot" + ], + "components": [ + { + "tagName": "span", + "type": "text", + "classes": [ + "badge-link" + ], + "components": [ + { + "type": "textnode", + "content": "f" + } + ] + }, + { + "tagName": "span", + "type": "text", + "classes": [ + "badge-link" + ], + "components": [ + { + "type": "textnode", + "content": "t" + } + ] + }, + { + "tagName": "span", + "type": "text", + "classes": [ + "badge-link" + ], + "components": [ + { + "type": "textnode", + "content": "ln" + } + ] + } + ] + } + ] + }, + { + "classes": [ + "badge" + ], + "components": [ + { + "classes": [ + "badge-header" + ] + }, + { + "type": "image", + "resizable": { + "ratioDefault": 1 + }, + "classes": [ + "badge-avatar" + ], + "attributes": { + "src": "img/team2.jpg" + } + }, + { + "classes": [ + "badge-body" + ], + "components": [ + { + "type": "text", + "classes": [ + "badge-name" + ], + "components": [ + { + "type": "textnode", + "content": "John Black" + } + ] + }, + { + "type": "text", + "classes": [ + "badge-role" + ], + "components": [ + { + "type": "textnode", + "content": "Software Engineer" + } + ] + }, + { + "type": "text", + "classes": [ + "badge-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit" + } + ] + } + ] + }, + { + "classes": [ + "badge-foot" + ], + "components": [ + { + "tagName": "span", + "type": "text", + "classes": [ + "badge-link" + ], + "components": [ + { + "type": "textnode", + "content": "f" + } + ] + }, + { + "tagName": "span", + "type": "text", + "classes": [ + "badge-link" + ], + "components": [ + { + "type": "textnode", + "content": "t" + } + ] + }, + { + "tagName": "span", + "type": "text", + "classes": [ + "badge-link" + ], + "components": [ + { + "type": "textnode", + "content": "ln" + } + ] + } + ] + } + ] + }, + { + "classes": [ + "badge" + ], + "components": [ + { + "classes": [ + "badge-header" + ] + }, + { + "type": "image", + "resizable": { + "ratioDefault": 1 + }, + "classes": [ + "badge-avatar" + ], + "attributes": { + "src": "img/team3.jpg" + } + }, + { + "classes": [ + "badge-body" + ], + "components": [ + { + "type": "text", + "classes": [ + "badge-name" + ], + "components": [ + { + "type": "textnode", + "content": "Jessica White" + } + ] + }, + { + "type": "text", + "classes": [ + "badge-role" + ], + "components": [ + { + "type": "textnode", + "content": "Web Designer" + } + ] + }, + { + "type": "text", + "classes": [ + "badge-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit" + } + ] + } + ] + }, + { + "classes": [ + "badge-foot" + ], + "components": [ + { + "tagName": "span", + "type": "text", + "classes": [ + "badge-link" + ], + "components": [ + { + "type": "textnode", + "content": "f" + } + ] + }, + { + "tagName": "span", + "type": "text", + "classes": [ + "badge-link" + ], + "components": [ + { + "type": "textnode", + "content": "t" + } + ] + }, + { + "tagName": "span", + "type": "text", + "classes": [ + "badge-link" + ], + "components": [ + { + "type": "textnode", + "content": "ln" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "tagName": "footer", + "classes": [ + "footer-under" + ], + "components": [ + { + "classes": [ + "container-width" + ], + "components": [ + { + "classes": [ + "footer-container" + ], + "components": [ + { + "classes": [ + "foot-lists" + ], + "components": [ + { + "classes": [ + "foot-list" + ], + "components": [ + { + "type": "text", + "classes": [ + "foot-list-title" + ], + "components": [ + { + "type": "textnode", + "content": "About us" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Contact" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Events" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Company" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Jobs" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Blog" + } + ] + } + ] + }, + { + "classes": [ + "foot-list" + ], + "components": [ + { + "type": "text", + "classes": [ + "foot-list-title" + ], + "components": [ + { + "type": "textnode", + "content": "Services" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Education" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Partner" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Community" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Forum" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Download" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-list-item" + ], + "components": [ + { + "type": "textnode", + "content": "Upgrade" + } + ] + } + ] + }, + { + "classes": [ + "clearfix" + ] + } + ] + }, + { + "classes": [ + "form-sub" + ], + "components": [ + { + "classes": [ + "foot-form-cont" + ], + "components": [ + { + "type": "text", + "classes": [ + "foot-form-title" + ], + "components": [ + { + "type": "textnode", + "content": "Subscribe" + } + ] + }, + { + "type": "text", + "classes": [ + "foot-form-desc" + ], + "components": [ + { + "type": "textnode", + "content": "Subscribe to our newsletter to receive exclusive offers and the latest news" + } + ] + }, + { + "type": "input", + "void": true, + "classes": [ + "sub-input" + ], + "attributes": { + "type": "text", + "name": "name", + "placeholder": "Name" + } + }, + { + "type": "input", + "void": true, + "classes": [ + "sub-input" + ], + "attributes": { + "type": "text", + "name": "email", + "placeholder": "Email" + } + }, + { + "type": "button", + "classes": [ + "sub-btn" + ], + "attributes": { + "type": "button" + }, + "text": "Submit", + "components": [ + { + "type": "textnode", + "content": "Submit" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "classes": [ + "copyright" + ], + "components": [ + { + "classes": [ + "container-width" + ], + "components": [ + { + "type": "text", + "classes": [ + "made-with" + ], + "components": [ + { + "type": "textnode", + "content": "\n made with GrapesJS\n " + } + ] + }, + { + "type": "text", + "classes": [ + "foot-social-btns" + ], + "components": [ + { + "type": "textnode", + "content": "facebook twitter linkedin mail" + } + ] + }, + { + "classes": [ + "clearfix" + ] + } + ] + } + ] + } + ] + } + ] + } + } + ], + "id": "sldRXeNfASv974i4" + } + ] + } + } + ] +} \ No newline at end of file diff --git a/grapesjs b/grapesjs index f8b66a1..8893dbe 160000 --- a/grapesjs +++ b/grapesjs @@ -1 +1 @@ -Subproject commit f8b66a1d7e28b6c156cb7d6c61d2951872e9675f +Subproject commit 8893dbe2e79972e5c34806e71075d2e94a4a9e3e diff --git a/js/main.js b/js/main.js index 0b5a585..4e62302 100644 --- a/js/main.js +++ b/js/main.js @@ -7,27 +7,57 @@ if (projectID == '' || isNaN(projectID)) { } else { const projectEndpoint = `/projects/${projectID}`; var editor = grapesjs.init({ - container : '#gjs', - components: '
Le chargement du projet est en cours. Si ce message ne disparait pas, le chargement a sans doutes échoué…
', + container : '#gjs', + //plugins: ['grapesjs-preset-webpage', 'customBlocks', 'customTypes'], + //components: '
Le chargement du projet est en cours. Si ce message ne disparait pas, le chargement a sans doutes échoué…
', i18n: { locale: 'fr', // default locale detectLocale: false, // by default, the editor will detect the language //localeFallback: 'en', // default fallback messages: {fr}, }, - storageManager: { - type: 'remote', - stepsBeforeSave: 1, - autosave: true, - options: { - remote: { - urlLoad: projectEndpoint, - urlStore: projectEndpoint, - fetchOptions: opts => (opts.method === 'POST' ? { method: 'PATCH' } : {}), - onStore: data => ({ id: projectID, data }), - onLoad: result => result.data, - } + storageManager: { + type: 'remote', + stepsBeforeSave: 1, + autosave: true, + options: { + remote: { + urlLoad: projectEndpoint, + urlStore: projectEndpoint, + fetchOptions: opts => (opts.method === 'POST' ? { method: 'PATCH' } : {}), + onStore: data => ({ id: projectID, data }), + onLoad: result => result.data, } } - }); + }, + //blockManager: { + // appendTo: '#blocks', + // blocks: [ + // { + // id: 'section', // id is mandatory + // label: 'Section', // You can use HTML/SVG inside labels + // attributes: { class:'gjs-block-section' }, + // content: `
+ //

Ho ! Mais c’est un titre !

+ //
Il faut regarder avec le cœur. L’essentiel est invisible pour les yeux. C’est du petit prince ;)
+ //
`, + // }, { + // id: 'text', + // label: 'Text', + // content: '
Voici un bloc de texte tout seul :o
', + // }, { + // id: 'image', + // label: 'Image', + // // Select the component once it's dropped + // select: true, + // // You can pass components as a JSON instead of a simple HTML string, + // // in this case we also use a defined component type `image` + // content: { type: 'image' }, + // // This triggers `active` event on dropped components and the `image` + // // reacts by opening the AssetManager + // activate: true, + // } + // ] + //}, + }); }