RubyGems - fronty-gem - Versions diffs - 0.1.0 - Mend

fronty-gem 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

checksums.yaml +7 -0
data/.gitignore +1 -0
data/Gemfile +6 -0
data/LICENSE.txt +21 -0
data/README.md +39 -0
data/Rakefile +2 -0
data/app/controllers/concerns/dynamic_content.rb +160 -0
data/app/controllers/designers_controller.rb +257 -0
data/app/controllers/pages_controller.rb +23 -0
data/app/views/designers/editor.html.erb +245 -0
data/app/views/pages/404.html.erb +2 -0
data/app/views/pages/welcome.html.erb +2 -0
data/bin/console +14 -0
data/bin/setup +8 -0
data/config/initializers/assets.rb +2 -0
data/config/routes.rb +20 -0
data/fronty-gem.gemspec +37 -0
data/lib/config/routes.rb +3 -0
data/lib/fronty-gem.rb +5 -0
data/lib/fronty-gem/version.rb +3 -0
data/lib/tasks/fronty.rake +14 -0
data/vendor/assets/demo/album/album.css +39 -0
data/vendor/assets/demo/album/index.html +231 -0
data/vendor/assets/demo/blog/blog.css +130 -0
data/vendor/assets/demo/blog/index.html +230 -0
data/vendor/assets/demo/carousel/carousel.css +91 -0
data/vendor/assets/demo/carousel/index.html +186 -0
data/vendor/assets/demo/narrow-jumbotron/index.html +82 -0
data/vendor/assets/demo/narrow-jumbotron/narrow-jumbotron.css +80 -0
data/vendor/assets/demo/offcanvas/index.html +158 -0
data/vendor/assets/demo/offcanvas/offcanvas.css +79 -0
data/vendor/assets/demo/offcanvas/offcanvas.js +7 -0
data/vendor/assets/demo/pricing/index.html +141 -0
data/vendor/assets/demo/pricing/pricing.css +25 -0
data/vendor/assets/demo/product/index.html +177 -0
data/vendor/assets/demo/product/product.css +79 -0
data/vendor/assets/fonts/line-awesome.eot +0 -0
data/vendor/assets/fonts/line-awesome.svg +2628 -0
data/vendor/assets/fonts/line-awesome.ttf +0 -0
data/vendor/assets/fonts/line-awesome.woff +0 -0
data/vendor/assets/fonts/line-awesome.woff2 +0 -0
data/vendor/assets/images/icons/alert.svg +66 -0
data/vendor/assets/images/icons/arrow-down.svg +60 -0
data/vendor/assets/images/icons/arrow-right.svg +60 -0
data/vendor/assets/images/icons/badge.svg +81 -0
data/vendor/assets/images/icons/breadcrumbs.svg +77 -0
data/vendor/assets/images/icons/button.svg +78 -0
data/vendor/assets/images/icons/button_group.svg +81 -0
data/vendor/assets/images/icons/button_toolbar.svg +87 -0
data/vendor/assets/images/icons/cart.svg +62 -0
data/vendor/assets/images/icons/categories.svg +62 -0
data/vendor/assets/images/icons/chart.svg +1 -0
data/vendor/assets/images/icons/checkbox.svg +66 -0
data/vendor/assets/images/icons/checkout.svg +62 -0
data/vendor/assets/images/icons/chevron-down.svg +67 -0
data/vendor/assets/images/icons/chevron-right.svg +67 -0
data/vendor/assets/images/icons/components/cart.svg +16 -0
data/vendor/assets/images/icons/components/checkbox.svg +1 -0
data/vendor/assets/images/icons/components/contact-form.svg +13 -0
data/vendor/assets/images/icons/components/map.svg +12 -0
data/vendor/assets/images/icons/container.svg +66 -0
data/vendor/assets/images/icons/facebook.svg +1 -0
data/vendor/assets/images/icons/file.svg +1 -0
data/vendor/assets/images/icons/filters.svg +62 -0
data/vendor/assets/images/icons/folder.svg +1 -0
data/vendor/assets/images/icons/form.svg +66 -0
data/vendor/assets/images/icons/grid_row.svg +66 -0
data/vendor/assets/images/icons/heading.svg +66 -0
data/vendor/assets/images/icons/hr.svg +66 -0
data/vendor/assets/images/icons/image.svg +62 -0
data/vendor/assets/images/icons/instagram.svg +62 -0
data/vendor/assets/images/icons/jumbotron.svg +66 -0
data/vendor/assets/images/icons/label.svg +73 -0
data/vendor/assets/images/icons/link.svg +1 -0
data/vendor/assets/images/icons/list_group.svg +66 -0
data/vendor/assets/images/icons/map.svg +62 -0
data/vendor/assets/images/icons/maps.png +0 -0
data/vendor/assets/images/icons/minus_round.svg +1 -0
data/vendor/assets/images/icons/navbar.svg +66 -0
data/vendor/assets/images/icons/pagination.svg +68 -0
data/vendor/assets/images/icons/panel.svg +66 -0
data/vendor/assets/images/icons/paragraph.svg +66 -0
data/vendor/assets/images/icons/paypal.svg +1 -0
data/vendor/assets/images/icons/play-button.svg +42 -0
data/vendor/assets/images/icons/plus_round.svg +1 -0
data/vendor/assets/images/icons/product.png +0 -0
data/vendor/assets/images/icons/product.svg +62 -0
data/vendor/assets/images/icons/product_gallery.svg +68 -0
data/vendor/assets/images/icons/products.svg +62 -0
data/vendor/assets/images/icons/progressbar.svg +67 -0
data/vendor/assets/images/icons/radio.svg +66 -0
data/vendor/assets/images/icons/search.svg +69 -0
data/vendor/assets/images/icons/select_input.svg +67 -0
data/vendor/assets/images/icons/slider.svg +62 -0
data/vendor/assets/images/icons/table.svg +66 -0
data/vendor/assets/images/icons/text_area.svg +66 -0
data/vendor/assets/images/icons/text_input.svg +66 -0
data/vendor/assets/images/icons/twitter.svg +55 -0
data/vendor/assets/images/icons/user.svg +62 -0
data/vendor/assets/images/icons/video.svg +45 -0
data/vendor/assets/images/icons/well.svg +82 -0
data/vendor/assets/images/svg/icon-a.svg +235 -0
data/vendor/assets/images/svg/icon-b.svg +224 -0
data/vendor/assets/images/svg/icon-c.svg +224 -0
data/vendor/assets/images/svg/icon-d.svg +224 -0
data/vendor/assets/images/svg/logo.svg +41 -0
data/vendor/assets/images/thumbnails/XX__.png +0 -0
data/vendor/assets/images/thumbnails/comparison.png +0 -0
data/vendor/assets/images/thumbnails/details-with-title-complate.png +0 -0
data/vendor/assets/images/thumbnails/details.png +0 -0
data/vendor/assets/images/thumbnails/footer-with-links.png +0 -0
data/vendor/assets/images/thumbnails/footer.png +0 -0
data/vendor/assets/images/thumbnails/header.png +0 -0
data/vendor/assets/images/thumbnails/jumbotron-with-title.png +0 -0
data/vendor/assets/images/thumbnails/jumbotron.png +0 -0
data/vendor/assets/images/thumbnails/linkbar.png +0 -0
data/vendor/assets/images/thumbnails/liticle.png +0 -0
data/vendor/assets/images/thumbnails/logobar.png +0 -0
data/vendor/assets/images/thumbnails/page-title.png +0 -0
data/vendor/assets/images/thumbnails/quiz-complate.png +0 -0
data/vendor/assets/images/thumbnails/quiz-with-hero-complate.png +0 -0
data/vendor/assets/images/thumbnails/result-complate.png +0 -0
data/vendor/assets/images/thumbnails/review-section.png +0 -0
data/vendor/assets/images/thumbnails/review-v2-complate.png +0 -0
data/vendor/assets/images/thumbnails/review-v3-complate.png +0 -0
data/vendor/assets/images/thumbnails/review_section_v4_complate.png +0 -0
data/vendor/assets/images/thumbnails/split-hero-complate.png +0 -0
data/vendor/assets/images/thumbnails/subtitle-with-button-complate.png +0 -0
data/vendor/assets/images/thumbnails/subtitle-with-link.png +0 -0
data/vendor/assets/images/thumbnails/unknown-complate.png +0 -0
data/vendor/assets/images/thumbnails/unknown1-complate.png +0 -0
data/vendor/assets/images/thumbnails/video-section-complate.png +0 -0
data/vendor/assets/javascript/fronty-designer-init.js +491 -0
data/vendor/assets/javascript/fronty-designer.js +16518 -0
data/vendor/assets/stylesheets/fronty-designer.css +11255 -0
metadata +235 -0

data/app/controllers/pages_controller.rb ADDED Viewed

@@ -0,0 +1,23 @@
+class PagesController < ApplicationController
+	include DynamicContent
+	def index
+		set_dynamic_content('pages', request.path)
+		id = @dynamic_content.id
+		if id
+			if @dynamic_content.redirect_to
+				return redirect_to @dynamic_content.redirect_to
+			end
+			render 'page-' + id.to_s, layout: false
+		else
+			if csv_is_empty('pages')
+				render 'welcome'
+			else
+				render '404'
+			end
+		end
+	end
+end

data/app/views/designers/editor.html.erb ADDED Viewed

@@ -0,0 +1,245 @@
+<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <meta name="description" content="">    <meta name="author" content="">        <base href="">    <title>Fronty Designer</title>              <%= csrf_meta_tag %><%= stylesheet_link_tag "fronty-designer" %>
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous"></head><body><script id="fronty-filemanager-page-custom" type="text/html">
+  <li data-url="{%=url%}" data-page="{%=name%}">
+    <a href="#" class="page-remove mr-4 pull-right text-decoration-none"><i class="la la-remove"></i></a>
+    <a href="#" class="page-edit mr-2 pull-right text-decoration-none">
+      <i class="la la-pencil"></i>
+    </a>
+    <label for="{%=name%}">
+      <a href="{%=url%}" {%if (thumbnail && !redirect_to) { %}data-thumbnail="{%=thumbnail%}" {% } %} {%if (redirect_to)
+         { %}data-redirect="{%=redirect_to%}" {% } %} rel="popover"
+         data-placement="right" data-trigger="hover">
+        {%=title%}
+        {%if (redirect_to) { %}<i class="la la-share-square"></i>{% } %}
+      </a>
+    </label>
+    <input type="checkbox" checked id="{%=name%}"/>
+    <ol></ol>
+  </li>
+</script>
+<script id="fronty-input-popoverinput" type="text/html">
+  <div class="btn-group">
+    <a class="btn btn-outline-secondary btn-sm dropdown-toggle" href="#" role="button" data-toggle="dropdown"
+       aria-haspopup="true" aria-expanded="false">
+      {%= value %}
+    </a>
+    <div class="dropdown-menu">
+      <div class="btn-group-sm {%if (extraclass) { %}{%=extraclass%}{% } %}" data-toggle="buttons">
+        {% for ( var i = 0; i < options.length; i++ ) { %}
+        <label class="btn mt-0  {%if (options[i].checked) { %}active{% } %}" for="{%=key%}{%=i%} "
+               title="{%=options[i].title%}">
+          <input name="{%=key%}" class="custom-control-input" type="radio" value="{%=options[i].value%}"
+                 id="{%=key%}{%=i%}" {%if (options[i].checked) { %}checked="{%=options[i].checked%}" {% } %}>
+          {%if (options[i].icon) { %}<i class="{%=options[i].icon%}"></i>{% } %}
+          {%if (options[i].text) { %}<span>{%=options[i].text%}</span>{% } %}
+        </label>
+        {% } %}
+      </div>
+    </div>
+  </div>
+</script>
+<script id="fronty-input-rangeinputtest" type="text/html">
+  <div>
+    <div class="row no-gutters">
+      <div class="col-9">
+        <input name="{%=key%}" type="range" min="{%=min%}" max="{%=max%}" step="{%=step%}" class="form-control"/>
+      </div>
+      <div class="col-3">
+        <span class="ml-2"></span>px
+      </div>
+    </div>
+  </div>
+</script>
+<script id="fronty-input-textinput-id" type="text/html">
+	<div>
+		<input name="{%=key%}" type="text" class="form-control"/>
+    <input type="hidden">
+  </div>
+</script>
+<script id="fronty-input-event-tracker" type="text/html">
+  <div class="toggle">
+    <input type="checkbox" name="{%=key%}" value="{%=on%}" data-value-off="{%=off%}" data-value-on="{%=on%}"
+           class="toggle-checkbox" id="{%=key%}">
+    <label class="toggle-label" for="{%=key%}">
+      <span class="toggle-inner"></span>
+      <span class="toggle-switch" style="height: 16px;"></span>
+    </label>
+    <br>
+    <textarea name="event-code" cols="30" rows="10" class="d-none"></textarea>
+    <button class="d-none">Save</button>
+  </div>
+</script>
+<!-- Modal -->
+<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+     aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <form name="editForm">
+          <input type="hidden" name="id">
+          <div class="form-group row">
+            <label class="col-sm-3 control-label">
+              <p>Title</p>
+            </label>
+            <div class="col-sm-9 input">
+              <input type="text" class="form-control" placeholder="Title" name="title">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-sm-3 control-label">
+              <p>Route</p>
+            </label>
+            <div class="col-sm-9 input">
+              <input type="text" class="form-control" placeholder="Route" name="route">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-sm-3 control-label">
+              <p>Redirect Url</p>
+            </label>
+            <div class="col-sm-9 input">
+              <input type="text" class="form-control" placeholder="Redirect Url" name="redirect">
+            </div>
+          </div>
+          <div class="form-group">
+            <button class="btn btn-primary">Save</button>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="modal fade" id="new-page-modal" tabindex="-1" role="dialog" style=""
+     aria-modal="true">
+  <div class="modal-dialog" role="document">
+    <form>
+      <div class="modal-content">
+        <div class="modal-header"><p class="modal-title text-primary"><i class="la la-lg la-file"></i> New page</p>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><small><i
+                  class="la la-close"></i></small></span></button>
+        </div>
+        <div class="modal-body text">
+          <div class="form-group row border-bottom pt-1 pb-3 font-weight-bold">
+            <label class="col-6">
+              <input checked="" name="new_page_type" value="new_page_type_existing" type="radio">
+              Based on existing page
+            </label>
+            <label class="col-6">
+              <input name="new_page_type" value="new_page_type_upload" type="radio">
+              Upload new design
+            </label>
+          </div>
+          <div class="form-group row page-type new_page_type_existing pb-3" data-key="type">
+            <label class="col-sm-3 control-label" for="input-model">
+              Template <abbr class="badge badge-pill badge-secondary"
+                             title="This template will be used as a start">?</abbr>
+            </label>
+            <div class="col-sm-9 input">
+              <div>
+                <select class="form-control custom-select" name="startTemplateUrl">
+                  <option value=""></option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="form-group row page-type new_page_type_upload d-none my-3 pb-3">
+            <label class="col-sm-4 mr-1 control-label">Upload new design: </label>
+            <input name="image" value="Browse a page design" type="file">
+          </div>
+          <div class="form-group row" data-key="href">
+            <label class="col-sm-3 control-label" for="input-model">
+              <p>Title</p>
+            </label>
+            <div class="col-sm-9 input">
+              <div><input name="title" class="form-control" placeholder="My page" required="" type="text"></div>
+            </div>
+          </div>
+          <div class="form-group row" data-key="href">
+            <label class="col-sm-3 control-label" for="input-model">
+              <p>Route</p>
+            </label>
+            <div class="col-sm-9 input">
+              <div>
+                <input name="route" class="form-control" placeholder="/index" required="" type="text">
+                <label for="is_home">is homepage?</label>
+                <input name="is_home" value="1" type="checkbox">
+              </div>
+            </div>
+          </div>
+          <div class="form-group row" data-key="href">
+            <label class="col-sm-3 control-label" for="input-model"><p>Redirect</p></label>
+            <div class="col-sm-9 input">
+              <div>
+                <input name="redirectUrl" class="form-control" placeholder="Redirect URL" type="text">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-primary btn-lg" type="submit"><i class="la la-check"></i> Create page</button>
+          <button class="btn btn-secondary btn-lg" type="reset" data-dismiss="modal"><i class="la la-close"></i> Cancel
+          </button>
+        </div>
+      </div>
+      <input name="authenticity_token"
+             value="<%= form_authenticity_token %>"
+             type="hidden"></form>
+  </div>
+</div>
+<div class="alert flash-message d-none">
+  <span class="alert-text"></span>
+  <button class="alert-close close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<!-- Image edit modal-->
+<div class="modal fade" id="image-edit-modal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-xl h-100 my-0 py-3 py-lg-4 modal-xl" role="document">
+    <div class="modal-content" style="min-height: 100%;">
+      <div class="modal-body p-0">
+        <div id="tui-image-editor"></div>
+      </div>
+      <button type="button" data-dismiss="modal" style="right: 14px;top: 12px;"
+              class="btn btn-secondary btn-sm rounded-circle position-absolute ">
+        <i class="la la-close" style="vertical-align: middle;"></i>
+      </button>
+    </div>
+  </div>
+</div>
+<link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
+<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css">
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.js"></script>
+<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
+<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.0/tui-color-picker.js"></script>
+<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
+<div id="fronty-builder"><div id="top-panel"><img src="/assets/svg/logo.svg" alt="Fronty" class="float-left" id="logo"><div class="btn-group mr-3" role="group">  <button class="btn btn-light" title="Undo (Ctrl/Cmd + Z)" id="undo-btn" data-fronty-action="undo" data-fronty-shortcut="ctrl+z">  <i class="la la-undo"></i>  </button>  <button class="btn btn-light"  title="Redo (Ctrl/Cmd + Shift + Z)" id="redo-btn" data-fronty-action="redo" data-fronty-shortcut="ctrl+shift+z">  <i class="la la-undo la-flip-horizontal"></i>  </button></div><div class="btn-group mr-3" role="group">  <button class="btn btn-light" title="Designer Mode (Free component dragging)" id="designer-mode-btn" data-toggle="button" aria-pressed="false" data-fronty-action="setDesignerMode">  <i class="la la-hand-grab-o"></i>  </button>  <button class="btn btn-light" title="Preview" id="preview-btn" type="button" data-toggle="button" aria-pressed="false" data-fronty-action="preview">  <i class="la la-eye"></i>  </button>  <button class="btn btn-light" title="Fullscreen (F11)" id="fullscreen-btn" data-toggle="button" aria-pressed="false" data-fronty-action="fullscreen">  <i class="la la-arrows"></i>  </button></div><div class="btn-group mr-3" role="group">  <button class="btn btn-light" title="Save locally" id="save-btn"  data-fronty-shortcut="ctrl+e">  <i class="la la-save"></i>  </button>    <button class="btn btn-light" title="Download" id="save-btn" data-fronty-action="download" download="index.html">  <i class="la la-download"></i>  </button></div><div class="btn-group float-right responsive-btns" role="group">  <button id="mobile-view" data-view="mobile" class="btn btn-light"  title="Mobile view" data-fronty-action="viewport">  <i class="la la-mobile-phone"></i>  </button>  <button id="tablet-view"  data-view="tablet" class="btn btn-light"  title="Tablet view" data-fronty-action="viewport">  <i class="la la-tablet"></i>  </button>    <button id="desktop-view"  data-view="" class="btn btn-light"  title="Desktop view" data-fronty-action="viewport">  <i class="la la-laptop"></i>  </button></div></div><div id="left-panel">  <div id="filemanager"> <div class="header"><a href="#" class="text-secondary">Pages</a><div class="btn-group responsive-btns mr-4 float-right" role="group">  <button class="btn btn-link btn-sm" title="New file" id="new-file-btn" data-fronty-action="newPage" data-fronty-shortcut="">  <i class="la la-file"></i> <small>New page</small>  </button>    </div></div><div class="tree"><ol></ol></div>  </div>      <div class="drag-elements"><div class="header"><ul class="nav nav-tabs" id="elements-tabs" role="tablist">  <li class="nav-item component-tab"><a class="nav-link active" id="components-tab" data-toggle="tab" href="#components" role="tab" aria-controls="components" aria-selected="true"><i class="la la-lg la-cube"></i> <div><small>Components</small></div></a>  </li>  <li class="nav-item blocks-tab"><a class="nav-link" id="blocks-tab" data-toggle="tab" href="#blocks" role="tab" aria-controls="blocks" aria-selected="false"><i class="la la-lg la-image"></i> <div><small>Blocks</small></div></a>  </li>  <li class="nav-item component-properties-tab" style="display:none"><a class="nav-link" id="components-tab" data-toggle="tab" href="#properties" role="tab" aria-controls="blocks" aria-selected="false"><i class="la la-lg la-cog"></i> <div><small>Properties</small></div></a>  </li></ul><div class="tab-content">  <div class="tab-pane fade show active" id="components" role="tabpanel" aria-labelledby="components-tab">     <div class="search">  <input class="form-control form-control-sm component-search" placeholder="Search components" type="text" data-fronty-action="componentSearch" data-fronty-on="keyup">  <button class="clear-backspace"  data-fronty-action="clearComponentSearch">  <i class="la la-close"></i>  </button>  </div><div class="drag-elements-sidepane sidepane">  <div>  <ul class="components-list clearfix" data-type="leftpanel"></ul>  </div></div>    </div>  <div class="tab-pane fade" id="blocks" role="tabpanel" aria-labelledby="blocks-tab">     <div class="search">  <input class="form-control form-control-sm block-search" placeholder="Search blocks" type="text" data-fronty-action="blockSearch" data-fronty-on="keyup">  <button class="clear-backspace"  data-fronty-action="clearBlockSearch">  <i class="la la-close"></i>  </button>  </div><div class="drag-elements-sidepane sidepane">  <div>  <ul class="blocks-list clearfix" data-type="leftpanel"></ul>  </div></div>    </div><div class="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="blocks-tab"><div class="component-properties-sidepane"><div><div class="component-properties"><div class="mt-4 text-center">Click on an element to edit.</div></div></div></div></div></div></div>  </div></div><div id="canvas"><div id="iframe-wrapper"><div id="iframe-layer"><div id="highlight-box"><div id="highlight-name"></div><div id="section-actions"><a id="add-section-btn" href="" title="Add element"><i class="la la-plus"></i></a></div></div><div id="select-box"><div id="wysiwyg-editor"><a id="bold-btn" href="" title="Bold"><i><strong>B</strong></i></a><a id="italic-btn" href="" title="Italic"><i>I</i></a><a id="underline-btn" href="" title="Underline"><u>u</u></a><a id="strike-btn" href="" title="Strikeout"><strike>S</strike></a><a id="link-btn" href="" title="Create link"><strong>a</strong></a></div><div id="select-actions"><a id="drag-btn" href="" title="Drag element"><i class="la la-arrows"></i></a><a id="parent-btn" href="" title="Select parent"><i class="la la-level-down la-rotate-180"></i></a><a id="up-btn" href="" title="Move element up"><i class="la la-arrow-up"></i></a><a id="down-btn" href="" title="Move element down"><i class="la la-arrow-down"></i></a><a id="clone-btn" href="" title="Clone element"><i class="la la-copy"></i></a><a id="delete-btn" href="" title="Remove element"><i class="la la-trash"></i></a></div></div><div id="add-section-box" class="drag-elements"><div class="header"><ul class="nav nav-tabs" id="box-elements-tabs" role="tablist">  <li class="nav-item component-tab"><a class="nav-link active" id="box-components-tab" data-toggle="tab" href="#box-components" role="tab" aria-controls="components" aria-selected="true"><i class="la la-lg la-cube"></i> <div><small>Components</small></div></a>  </li>  <li class="nav-item blocks-tab"><a class="nav-link" id="box-blocks-tab" data-toggle="tab" href="#box-blocks" role="tab" aria-controls="blocks" aria-selected="false"><i class="la la-lg la-image"></i> <div><small>Blocks</small></div></a>  </li>  <li class="nav-item component-properties-tab" style="display:none"><a class="nav-link" id="components-tab" data-toggle="tab" href="#box-properties" role="tab" aria-controls="blocks" aria-selected="false"><i class="la la-lg la-cog"></i> <div><small>Properties</small></div></a>  </li></ul><div class="section-box-actions"><div id="close-section-btn" class="btn btn-light btn-sm bg-white btn-sm float-right"><i class="la la-close"></i></div><div class="small mt-1 mr-3 float-right"><div class="custom-control custom-radio custom-control-inline">  <input type="radio" id="add-section-insert-mode-after" value="after" checked="true" name="add-section-insert-mode" class="custom-control-input">  <label class="custom-control-label" for="add-section-insert-mode-after">After</label></div><div class="custom-control custom-radio custom-control-inline">  <input type="radio" id="add-section-insert-mode-inside" value="inside" name="add-section-insert-mode" class="custom-control-input">  <label class="custom-control-label" for="add-section-insert-mode-inside">Inside</label></div></div></div><div class="tab-content">  <div class="tab-pane fade show active" id="box-components" role="tabpanel" aria-labelledby="components-tab">     <div class="search">  <input class="form-control form-control-sm component-search" placeholder="Search components" type="text" data-fronty-action="addBoxComponentSearch" data-fronty-on="keyup">  <button class="clear-backspace"  data-fronty-action="clearComponentSearch">  <i class="la la-close"></i>  </button>  </div><div>  <div>  <ul class="components-list clearfix" data-type="addbox"></ul>  </div></div>    </div>  <div class="tab-pane fade" id="box-blocks" role="tabpanel" aria-labelledby="blocks-tab">     <div class="search">  <input class="form-control form-control-sm block-search" placeholder="Search blocks" type="text" data-fronty-action="addBoxBlockSearch" data-fronty-on="keyup">  <button class="clear-backspace"  data-fronty-action="clearBlockSearch">  <i class="la la-close"></i>  </button>  </div><div>  <div>  <ul class="blocks-list clearfix"  data-type="addbox"></ul>  </div></div>    </div><div class="tab-pane fade" id="box-properties" role="tabpanel" aria-labelledby="blocks-tab"><div class="component-properties-sidepane"><div><div class="component-properties"><div class="mt-4 text-center">Click on an element to edit.</div></div></div></div></div></div></div></div></div><iframe src="about:none" id="iframe1"></iframe></div></div><div id="right-panel"><div class="component-properties"></div></div><div id="bottom-panel"><div class="btn-group" role="group">  <button id="code-editor-btn btn-sm" data-view="mobile" class="btn btn-light btn-sm"  title="Code editor" data-fronty-action="toggleEditor">  <i class="la la-code"></i> Code editor  </button> <div id="toggleEditorJsExecute" class="custom-control custom-checkbox mt-1" style="display:none"><input type="checkbox" class="custom-control-input" id="customCheck" name="example1" data-fronty-action="toggleEditorJsExecute"><label class="custom-control-label" for="customCheck"><small>Run javascript code on edit</small></label></div></div><div id="fronty-code-editor"><textarea class="form-control"></textarea><div></div></div></div><script id="fronty-input-textinput" type="text/html"><div><input name="{%=key%}" type="text" class="form-control"/></div></script><script id="fronty-input-checkboxinput" type="text/html"><div class="custom-control custom-checkbox">  <input name="{%=key%}" class="custom-control-input" type="checkbox" id="{%=key%}_check">  <label class="custom-control-label" for="{%=key%}_check">{% if (typeof text !== 'undefined') { %} {%=text%} {% } %}</label></div></script><script id="fronty-input-radioinput" type="text/html"><div>{% for ( var i = 0; i < options.length; i++ ) { %}<label class="custom-control custom-radio  {% if (typeof inline !== 'undefined' && inline == true) { %}custom-control-inline{% } %}"  title="{%=options[i].title%}">  <input name="{%=key%}" class="custom-control-input" type="radio" value="{%=options[i].value%}" id="{%=key%}{%=i%}" {%if (options[i].checked) { %}checked="{%=options[i].checked%}"{% } %}>  <label class="custom-control-label" for="{%=key%}{%=i%}">{%=options[i].text%}</label></label>{% } %}</div></script><script id="fronty-input-radiobuttoninput" type="text/html"><div class="btn-group btn-group-toggle  {%if (extraclass) { %}{%=extraclass%}{% } %} clearfix" data-toggle="buttons">{% for ( var i = 0; i < options.length; i++ ) { %}<label class="btn  btn-outline-primary  {%if (options[i].checked) { %}active{% } %}" for="{%=key%}{%=i%} " title="{%=options[i].title%}">  <input name="{%=key%}" class="custom-control-input" type="radio" value="{%=options[i].value%}" id="{%=key%}{%=i%}" {%if (options[i].checked) { %}checked="{%=options[i].checked%}"{% } %}>  {%if (options[i].icon) { %}<i class="{%=options[i].icon%}"></i>{% } %}  {%=options[i].text%}</label>{% } %}</div></script><script id="fronty-input-toggle" type="text/html">    <div class="toggle">        <input type="checkbox" name="{%=key%}" value="{%=on%}" data-value-off="{%=off%}" data-value-on="{%=on%}" class="toggle-checkbox" id="{%=key%}">        <label class="toggle-label" for="{%=key%}">            <span class="toggle-inner"></span>            <span class="toggle-switch"></span>        </label>    </div></script><script id="fronty-input-header" type="text/html"><h6 class="header">{%=header%}</h6></script><script id="fronty-input-select" type="text/html"><div><select class="form-control custom-select">{% for ( var i = 0; i < options.length; i++ ) { %}<option value="{%=options[i].value%}">{%=options[i].text%}</option>{% } %}</select></div></script><script id="fronty-input-listinput" type="text/html"><div class="row">{% for ( var i = 0; i < options.length; i++ ) { %}<div class="col-6"><div class="input-group"><input name="{%=key%}_{%=i%}" type="text" class="form-control" value="{%=options[i].text%}"/><div class="input-group-append"><button class="input-group-text btn btn-sm btn-danger"><i class="la la-trash la-lg"></i></button></div>  </div>  <br/></div>{% } %}{% if (typeof hide_remove === 'undefined') { %}<div class="col-12"><button class="btn btn-sm btn-outline-primary"><i class="la la-trash la-lg"></i> Add new</button></div>{% } %}</div></script><script id="fronty-input-grid" type="text/html"><div class="row"><div class="mb-1 col-12"><label>Flexbox</label><select class="form-control custom-select" name="col"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col !== 'undefined') && col == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div><div class="col-6"><label>Extra small</label><select class="form-control custom-select" name="col-xs"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col_xs !== 'undefined') && col_xs == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div><div class="col-6"><label>Small</label><select class="form-control custom-select" name="col-sm"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col_sm !== 'undefined') && col_sm == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div><div class="col-6"><label>Medium</label><select class="form-control custom-select" name="col-md"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col_md !== 'undefined') && col_md == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div><div class="col-6 mb-1"><label>Large</label><select class="form-control custom-select" name="col-lg"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col_lg !== 'undefined') && col_lg == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div>{% if (typeof hide_remove === 'undefined') { %}<div class="col-12"><button class="btn btn-sm btn-outline-light text-danger"><i class="la la-trash la-lg"></i> Remove</button></div>{% } %}</div></script><script id="fronty-input-textvalue" type="text/html"><div class="row"><div class="col-6 mb-1"><label>Value</label><input name="value" type="text" value="{%=value%}" class="form-control"/></div><div class="col-6 mb-1"><label>Text</label><input name="text" type="text" value="{%=text%}" class="form-control"/></div>{% if (typeof hide_remove === 'undefined') { %}<div class="col-12"><button class="btn btn-sm btn-outline-light text-danger"><i class="la la-trash la-lg"></i> Remove</button></div>{% } %}</div></script><script id="fronty-input-rangeinput" type="text/html"><div><input name="{%=key%}" type="range" min="{%=min%}" max="{%=max%}" step="{%=step%}" class="form-control"/></div></script><script id="fronty-input-imageinput" type="text/html"><div><input name="{%=key%}" type="text" class="form-control"/><input name="file" type="file" class="form-control"/></div></script><script id="fronty-input-colorinput" type="text/html"><div><input name="{%=key%}" type="color" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %}  pattern="#[a-f0-9]{6}" class="form-control"/></div></script><script id="fronty-input-numberinput" type="text/html"><div><input name="{%=key%}" type="number" value="{%=value%}"   {% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %}   {% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %}   {% if (typeof step !== 'undefined' && step != false) { %}step="{%=step%}"{% } %} class="form-control"/></div></script><script id="fronty-input-button" type="text/html"><div><button class="btn btn-sm btn-primary"><i class="la  {% if (typeof icon !== 'undefined') { %} {%=icon%} {% } else { %} la-plus {% } %} la-lg"></i> {%=text%}</button></div></script><script id="fronty-input-cssunitinput" type="text/html"><div class="input-group" id="cssunit-{%=key%}"><input name="number" type="number"  {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %}   {% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %}   {% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %}   {% if (typeof step !== 'undefined' && step != false) { %}step="{%=step%}"{% } %} class="form-control"/> <div class="input-group-append"><select class="form-control custom-select small-arrow" name="unit"><option value="em">em</option><option value="px">px</option><option value="%">%</option><option value="rem">rem</option><option value="auto">auto</option></select></div></div></script><script id="fronty-filemanager-page" type="text/html"><li data-url="{%=url%}" data-page="{%=name%}"><label for="{%=name%}"><span>{%=title%}</span></label> <input type="checkbox" checked id="{%=name%}" /><ol></ol></li></script><script id="fronty-filemanager-component" type="text/html"><li data-url="{%=url%}" data-component="{%=name%}" class="file"><a href="{%=url%}"><span>{%=title%}</span></a></li></script><script id="fronty-input-sectioninput" type="text/html"><label class="header" data-header="{%=key%}" for="header_{%=key%}"><span>&ensp;{%=header%}</span> <div class="header-arrow"></div></label> <input class="header_check" type="checkbox" {% if (typeof expanded !== 'undefined' && expanded == false) { %} {% } else { %}checked="true"{% } %} id="header_{%=key%}"> <div class="section" data-section="{%=key%}"></div></script><script id="fronty-property" type="text/html"><div class="form-group {% if (typeof col !== 'undefined' && col != false) { %} col-sm-{%=col%} d-inline-block {% } else { %}row{% } %}" data-key="{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}>{% if (typeof name !== 'undefined' && name != false) { %}<label class="{% if (typeof inline === 'undefined' ) { %}col-sm-4{% } %} control-label" for="input-model">{%=name%}</label>{% } %}<div class="{% if (typeof inline === 'undefined') { %}col-sm-{% if (typeof name !== 'undefined' && name != false) { %}8{% } else { %}12{% } } %} input"></div></div> </script><script id="fronty-input-autocompletelist" type="text/html"><div><input name="{%=key%}" type="text" class="form-control"/><div class="form-control autocomplete-list" style="min=height: 150px; overflow: auto;">                  <div id="featured-product43"><i class="la la-close"></i> MacBook                    <input name="product[]" value="43" type="hidden">                  </div>                                  <div id="featured-product40"><i class="la la-close"></i> iPhone                    <input name="product[]" value="40" type="hidden">                  </div>                                  <div id="featured-product42"><i class="la la-close"></i> Apple Cinema 30"                    <input name="product[]" value="42" type="hidden">                  </div>                                  <div id="featured-product30"><i class="la la-close"></i> Canon EOS 5D                    <input name="product[]" value="30" type="hidden">                  </div></div></div></script><div class="modal fade" id="textarea-modal" tabindex="-1" role="dialog" aria-labelledby="textarea-modal" aria-hidden="true">  <div class="modal-dialog modal-lg" role="document">    <div class="modal-content">      <div class="modal-header">        <p class="modal-title text-primary"><i class="la la-lg la-save"></i> Export html</p>        <button type="button" class="close" data-dismiss="modal" aria-label="Close">          <span aria-hidden="true"><small><i class="la la-close"></i></small></span>        </button>      </div>      <div class="modal-body">                <textarea rows="25" cols="150" class="form-control"></textarea>            </div>      <div class="modal-footer">        <button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal"><i class="la la-close"></i> Close</button>      </div>    </div>  </div></div><div class="modal fade" id="message-modal" tabindex="-1" role="dialog">  <div class="modal-dialog" role="document">    <div class="modal-content">      <div class="modal-header">        <p class="modal-title text-primary"><i class="la la-lg la-comment"></i> Fronty Designer</p>        <button type="button" class="close" data-dismiss="modal" aria-label="Close">          <span aria-hidden="true"><small><i class="la la-close"></i></small></span>        </button>      </div>      <div class="modal-body">        <p>Page was successfully saved!.</p>      </div>      <div class="modal-footer">                <button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal"><i class="la la-close"></i> Close</button>      </div>    </div>  </div></div><div class="modal fade" id="new-page-modal" tabindex="-1" role="dialog">  <div class="modal-dialog" role="document">        <form>    <div class="modal-content">      <div class="modal-header">        <p class="modal-title text-primary"><i class="la la-lg la-file"></i> New page</p>        <button type="button" class="close" data-dismiss="modal" aria-label="Close">          <span aria-hidden="true"><small><i class="la la-close"></i></small></span>        </button>      </div>      <div class="modal-body text"><div class="form-group row" data-key="type">      <label class="col-sm-3 control-label" for="input-model">Template <abbr class="badge badge-pill badge-secondary" title="This template will be used as a start">?</abbr> </label>      <div class="col-sm-9 input"><div>    <select class="form-control custom-select" name="startTemplateUrl">                              </select>    </div></div>     </div><div class="form-group row" data-key="href">      <label class="col-sm-3 control-label" for="input-model"><p>Page name</p></label>      <div class="col-sm-9 input"><div>   <input name="title" type="text" class="form-control" placeholder="My page" required>  </div></div>     </div><div class="form-group row" data-key="href">      <label class="col-sm-3 control-label" for="input-model"><p>File name</p></label>      <div class="col-sm-9 input"><div>   <input name="fileName" type="text" class="form-control" placeholder="my-page.html" required>  </div></div>     </div>      </div>      <div class="modal-footer">        <button class="btn btn-primary btn-lg" type="submit"><i class="la la-check"></i> Create page</button>        <button class="btn btn-secondary btn-lg" type="reset" data-dismiss="modal"><i class="la la-close"></i> Cancel</button>      </div>    </div>       </form>  </div></div><%= javascript_include_tag "fronty-designer" %><%= javascript_include_tag "fronty-designer-init" %>
+                <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
+                <link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css">
+                <script src="https://cdn.jsdelivr.net/npm/tui-code-snippet@1.5.0/dist/tui-code-snippet.min.js"></script>
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.require.min.js"></script>
+                <script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.js"></script>
+                <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
+            </body></html>

data/app/views/pages/404.html.erb ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <h1>Error 404</h1>
2	+ <h2>Page not found!</h2>

data/app/views/pages/welcome.html.erb ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <h1><%= @title %></h1>
2	+ <a href="/designer">Make your first page with Fronty</a>

data/bin/console ADDED Viewed

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+require "bundler/setup"
+require "fronty_designer"
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+require "irb"
+IRB.start(__FILE__)

data/bin/setup ADDED Viewed

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+bundle install
+# Do any other automated setup that you need to do here

data/config/initializers/assets.rb ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ Rails.application.config.assets.precompile +=
2	+ %w(.png .jpg .jpeg .gif .svg .ttf .woff .woff2 *.eot bootstrap.min fronty-designer.css fronty-designer.js fronty-designer-init.js)

data/config/routes.rb ADDED Viewed

@@ -0,0 +1,20 @@
+Rails.application.routes.draw do
+	root 'pages#index', as: 'home'
+	get 'designer' => 'designers#index'
+	get 'get_pages' => 'designers#get_pages'
+  # Git
+  match '/designer/git_pull', to: 'designers#git_pull', via: 'post'
+  match '/designer/git_push', to: 'designers#git_push', via: 'post'
+	match '/designer/create', to: 'designers#create', via: 'post'
+	match '/designer/remove', to: 'designers#remove', via: 'post'
+	match '/designer/update', to: 'designers#update', via: 'post'
+	match '/designer/get_page_by_route', to: 'designers#get_page_by_route', via: 'post'
+	match '/designer/save', to: 'designers#save', via: 'post'
+	match '/designer/create_new_page', to: 'designers#create_new_page', via: 'post'
+	get '/designer/get_status/*job_id' => 'designers#get_status'
+	get '*path', to: 'pages#index'
+end

data/fronty-gem.gemspec ADDED Viewed

@@ -0,0 +1,37 @@
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "fronty-gem/version"
+Gem::Specification.new do |spec|
+  spec.name          = "fronty-gem"
+  spec.version       = FrontyGem::VERSION
+  spec.authors       = ["Miqayel Manvelyan"]
+  spec.email         = ["miqayel.m@vardanyan.am"]
+  spec.summary       = 'asd'
+  spec.description   = 'asdasdasd'
+  spec.homepage      = "http://google.com"
+  spec.license       = "MIT"
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  if spec.respond_to?(:metadata)
+    spec.metadata["allowed_push_host"] = "https://rubygems.org"
+  else
+    raise "RubyGems 2.0 or newer is required to protect against " \
+      "public gem pushes."
+  end
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+  spec.add_development_dependency "bundler", "~> 2"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_dependency "interactor", "~> 3.0"
+  spec.add_dependency "rest-client"
+end

data/lib/config/routes.rb ADDED Viewed

@@ -0,0 +1,3 @@
+Rails.application.routes.draw do
+	get '/designer' => 'designers#index'
+end

data/lib/fronty-gem.rb ADDED Viewed

@@ -0,0 +1,5 @@
+require "fronty-gem/version"
+module FrontyGem
+	class Engine < ::Rails::Engine; end
+end

data/lib/fronty-gem/version.rb ADDED Viewed

@@ -0,0 +1,3 @@
+module FrontyGem
+  VERSION = "0.1.0"
+end

data/lib/tasks/fronty.rake ADDED Viewed

@@ -0,0 +1,14 @@
+def get_token
+  print('Token: ')
+  STDIN.gets.chop
+end
+namespace :fronty do
+  task :login => :environment do
+    token = get_token()
+    File.open('.token', 'w+') do |f|
+      f.write(token)
+    end
+  end
+end

data/vendor/assets/demo/album/album.css ADDED Viewed

@@ -0,0 +1,39 @@
+:root {
+  --jumbotron-padding-y: 3rem;
+}
+.jumbotron {
+  padding-top: var(--jumbotron-padding-y);
+  padding-bottom: var(--jumbotron-padding-y);
+  margin-bottom: 0;
+  background-color: #fff;
+}
+@media (min-width: 768px) {
+  .jumbotron {
+    padding-top: calc(var(--jumbotron-padding-y) * 2);
+    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
+  }
+}
+.jumbotron p:last-child {
+  margin-bottom: 0;
+}
+.jumbotron-heading {
+  font-weight: 300;
+}
+.jumbotron .container {
+  max-width: 40rem;
+}
+footer {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+footer p {
+  margin-bottom: .25rem;
+}
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

data/vendor/assets/demo/album/index.html ADDED Viewed

@@ -0,0 +1,231 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="../../../../favicon.ico">
+    <title>Album example for Bootstrap</title>
+    <!-- Bootstrap core CSS -->
+    <link href="../../css/editor.css" rel="stylesheet">
+    <!-- Custom styles for this template -->
+    <link href="album.css" rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <div class="collapse bg-dark" id="navbarHeader">
+        <div class="container">
+          <div class="row">
+            <div class="col-sm-8 col-md-7 py-4">
+              <h4 class="text-white">About</h4>
+              <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
+            </div>
+            <div class="col-sm-4 offset-md-1 py-4">
+              <h4 class="text-white">Contact</h4>
+              <ul class="list-unstyled">
+                <li><a href="#" class="text-white">Follow on Twitter</a></li>
+                <li><a href="#" class="text-white">Like on Facebook</a></li>
+                <li><a href="#" class="text-white">Email me</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="navbar navbar-dark bg-dark box-shadow">
+        <div class="container d-flex justify-content-between">
+          <a href="#" class="navbar-brand d-flex align-items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
+            <strong>Album</strong>
+          </a>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+        </div>
+      </div>
+    </header>
+    <main role="main">
+      <section class="jumbotron text-center">
+        <div class="container">
+          <h1 class="jumbotron-heading">Album example</h1>
+          <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
+          <p>
+            <a href="#" class="btn btn-primary my-2">Main call to action</a>
+            <a href="#" class="btn btn-secondary my-2">Secondary action</a>
+          </p>
+        </div>
+      </section>
+      <div class="album py-5 bg-light">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+                <div class="card-body">
+                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="btn-group">
+                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                    </div>
+                    <small class="text-muted">9 mins</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+                <div class="card-body">
+                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="btn-group">
+                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                    </div>
+                    <small class="text-muted">9 mins</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+                <div class="card-body">
+                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="btn-group">
+                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                    </div>
+                    <small class="text-muted">9 mins</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+                <div class="card-body">
+                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="btn-group">
+                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                    </div>
+                    <small class="text-muted">9 mins</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+                <div class="card-body">
+                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="btn-group">
+                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                    </div>
+                    <small class="text-muted">9 mins</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+                <div class="card-body">
+                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="btn-group">
+                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                    </div>
+                    <small class="text-muted">9 mins</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+                <div class="card-body">
+                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="btn-group">
+                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                    </div>
+                    <small class="text-muted">9 mins</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+                <div class="card-body">
+                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="btn-group">
+                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                    </div>
+                    <small class="text-muted">9 mins</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+                <div class="card-body">
+                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="btn-group">
+                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                    </div>
+                    <small class="text-muted">9 mins</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer class="text-muted">
+      <div class="container">
+        <p class="float-right">
+          <a href="#">Back to top</a>
+        </p>
+        <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
+        <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
+      </div>
+    </footer>
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="../../js/vendor/popper.min.js"></script>
+    <script src="../../js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/holderjs@2.9.4/holder.js"></script>
+  </body>
+</html>