<?php
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
error_reporting(E_WARNING);
ini_set('display_errors', 'On');
?>
<!DOCTYPE html>
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Sample Publication< / title >
< style > / * !
* Bootswatch v4.0.0
* Homepage: https://bootswatch.com
* Copyright 2012-2018 Thomas Park
* Licensed under MIT
* Based on Bootstrap
*//*!
* Bootstrap v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");:root{--blue:#2196F3;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#e51c23;--orange:#fd7e14;--yellow:#ff9800;--green:#4CAF50;--teal:#20c997;--cyan:#9C27B0;--white:#fff;--gray:#666;--gray-dark:#222;--primary:#2196F3;--secondary:#fff;--success:#4CAF50;--info:#9C27B0;--warning:#ff9800;--danger:#e51c23;--light:#fff;--dark:#222;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-family-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:0.8125rem;font-weight:400;line-height:1.5;color:#444;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0 !important}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#2196F3;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0a6ebd;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre,code,kbd,samp{font-family:monospace, monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}caption{padding-top:0.75rem;padding-bottom:0.75rem;color:#666;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{padding:0;border-style:none}input[type="radio"],input[type="checkbox"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px;-webkit-appearance:no
.tile-bin {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 5px;
margin: 10mm 10mm 10mm 10mm;
}
.pub-content {
border: 1px solid grey;
margin: 0px auto;
box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.75);
margin-bottom: 20px;
overflow: auto;
}
.page-safe-line div {
display: none;
background-color: grey;
position: relative;
}
.page-safe-line .bottom {
height: 1px;
left: 0;
right: 0;
}
.tile {
margin: 5px;
}
.tile-html {
min-height: 10px;
}
.tile-html img {
max-width: 100%;
}
@media print {
@page {
margin: 10mm 10mm 10mm 10mm;
}
.tile-bin {
margin: 0px;
overflow: visible;
}
.pub-content {
z-index: 999999;
border: 0px;
box-shadow: none;
overflow: visible;
}
.btn-group, .footer {
display: none;
}
.page-safe-line {
display: none;
}
}< / style >
< style >
.pub-content {
<?php
$pubvars = json_decode($_POST['vars']);
foreach ($pubvars as $name => $val) {
echo "--$name: $val;\n";
}
?>
}
.pub-content {
<?php echo $_POST [ 'pub' ]; //include __DIR__ . "/pub_styles/" . $_GET["pub"] . "/pub.css"; ?>
}
<?php echo $_POST [ 'extra' ]; //include __DIR__ . "/pub_styles/" . $_GET["pub"] . "/extra.css"; ?>
.pub-content {
background-image: url('<?php echo $_POST [ 'bgurl' ]; ?> ');
}
.pub-content {
max-width: 8.5in;
height: 11in;
}
@media (max-width: 900px) {
.pub-content {
height: auto;
min-height: 11in;
}
}
.page-safe-line .bottom {
top: calc(11in - 5mm);
}
< / style >
< style media = "all" >
.tile-style-dots {
<?php include __DIR__ . "/tile_styles/dots/tile.css" ; ?>
}
.tile-style-double {
<?php include __DIR__ . "/tile_styles/double/tile.css" ; ?>
}
.tile-style-line {
<?php include __DIR__ . "/tile_styles/line/tile.css" ; ?>
}
.tile-style-shadow {
<?php include __DIR__ . "/tile_styles/shadow/tile.css" ; ?>
}
#tile-29 {
order: 1;
width: 100%;
flex-basis: 100%;
flex: 0 0 calc(100% - 10px);
}
#tile-31 {
order: 1;
width: 50%;
flex-basis: 50%;
flex: 0 0 calc(50% - 10px);
}
#tile-30 {
order: 2;
width: 50%;
flex-basis: 50%;
flex: 0 0 calc(50% - 10px);
}
#tile-32 {
order: 3;
width: 100%;
flex-basis: 100%;
flex: 0 0 calc(100% - 10px);
}
#tile-33 {
order: 1;
width: 75%;
flex-basis: 75%;
flex: 0 0 calc(75% - 10px);
}
#tile-34 {
order: 1;
width: 25%;
flex-basis: 25%;
flex: 0 0 calc(25% - 10px);
}
#tile-35 {
order: 1;
width: 50%;
flex-basis: 50%;
flex: 0 0 calc(50% - 10px);
}
< / style >
< style >
.theme_bin {
}
.theme_bin label input[type=radio] {
visibility: hidden;
position: absolute;
}
.theme_bin label input[type=radio] + .theme {
cursor: pointer;
border: 0px solid transparent;
margin: 2px;
}
.theme_bin label input[type=radio]:checked + .theme {
border: 3px solid rgba(0,0,0,.8);
}
.theme_bin label .theme .theme_colors {
width: 100%;
min-width: 5rem;
height: 2rem;
}
< / style >
<?php
$error = "";
if (json_decode($_POST['vars']) === null) {
$error .= "Invalid JSON for color variables!";
}
if (json_decode($_POST['meta']) === null) {
if ($error != "") {
$error .= "< br / > ";
}
$error .= "Invalid JSON for metadata!";
}
if ($error != "") {
?>
< div class = "alert alert-danger" >< b > Error:</ b >< br /> <?php echo $error ; ?> </ div >
<?php
}
?>
< h4 > Theme menu preview:< / h4 >
< div class = "theme_bin" >
< label >
< style >
#theme_blue {
background: #083045;
color: #eef0f1;
}
#themecolors_blue {
background-image: linear-gradient(
90deg,
#284a5c,
#284a5c 0%,
#284a5c 33.333333333333%,
#bc9e52 33.333333333333%,
#bc9e52 66.666666666667%,
#1EB1FF 66.666666666667%,
#1EB1FF 100% );
}
< / style >
< input type = "radio" name = "style" value = "blue" / >
< div class = "card theme" id = "theme_blue" >
< div class = "theme_colors" id = "themecolors_blue" >
< / div >
< div class = "card-body m-0 p-1" >
Blue < / div >
< / div >
< / label >
<?php
$info = json_decode($_POST['meta'], TRUE);
$s = 1;
$colorvars = json_decode($_POST['vars'], TRUE);
$themecsscolors = "";
$totalcolors = count($info['colors']);
for ($i = 0; $i < $totalcolors; $i++) {
if ($i == 0) {
$themecsscolors = $info['colors'][$i] . ",\n";
}
$themecsscolors .= $info['colors'][$i] . " " . (($i) / $totalcolors * 100) . "%,\n";
$themecsscolors .= $info['colors'][$i] . " " . (($i + 1) / $totalcolors * 100) . "%";
if ($i != $totalcolors - 1) {
$themecsscolors .= ",\n";
}
}
?>
< label >
< style >
#theme_<?php echo $s ; ?> {
background: <?php echo $colorvars [ 'background' ]; ?> ;
color: <?php echo $colorvars [ 'text' ]; ?> ;
}
#themecolors_<?php echo $s ; ?> {
background-image: linear-gradient(
90deg,
<?php echo $themecsscolors ; ?>
);
}
< / style >
< input type = "radio" name = "style" value = " <?php echo $s ; ?> " checked />
< div class = "card theme" id = "theme_ <?php echo $s ; ?> " >
< div class = "theme_colors" id = "themecolors_ <?php echo $s ; ?> " >
< / div >
< div class = "card-body m-0 p-1" >
<?php echo $info [ 'name' ]; ?>
< / div >
< / div >
< / label >
< label >
< style >
#theme_plain {
background: #ffffff;
color: #000000;
}
#themecolors_plain {
background-image: linear-gradient(
90deg,
#000000,
#000000 0%,
#000000 33.333333333333%,
#ffffff 33.333333333333%,
#ffffff 66.666666666667%,
#2196F3 66.666666666667%,
#2196F3 100% );
}
< / style >
< input type = "radio" name = "style" value = "plain" / >
< div class = "card theme" id = "theme_plain" >
< div class = "theme_colors" id = "themecolors_plain" >
< / div >
< div class = "card-body m-0 p-1" >
Plain < / div >
< / div >
< / label >
< label >
< style >
#theme_sepia {
background: #d4c69f;
color: #000000;
}
#themecolors_sepia {
background-image: linear-gradient(
90deg,
#bc7652,
#bc7652 0%,
#bc7652 33.333333333333%,
#ffe46f 33.333333333333%,
#ffe46f 66.666666666667%,
#ff9e01 66.666666666667%,
#ff9e01 100% );
}
< / style >
< input type = "radio" name = "style" value = "sepia" / >
< div class = "card theme" id = "theme_sepia" >
< div class = "theme_colors" id = "themecolors_sepia" >
< / div >
< div class = "card-body m-0 p-1" >
Sepia < / div >
< / div >
< / label >
< / div >
< h4 > Theme preview:< / h4 >
< div class = "pub-content" >
< div class = "page-safe-line" >
< div class = "bottom" > < / div >
< / div >
< div class = "tile-bin" >
< div class = "tile" id = "tile-29" data-tileid = "29" data-page = "1" data-styleid = "1" data-width = "4" data-order = "1" >
< div id = "tile-29-content" class = "tile-style-none" >
< div class = "tile-html" > < h1 > Test Publication Header 1< / h1 > < h2 > Header 2< / h2 > < h3 > Header 3< br > < / h3 > < / div >
< / div >
< / div >
< div class = "tile" id = "tile-31" data-tileid = "31" data-page = "1" data-styleid = "1" data-width = "2" data-order = "1" >
< div id = "tile-31-content" class = "tile-style-dots" >
< div class = "tile-html" > < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeclare hoc
quidem. Quis istum dolorem timet? Bonum integritas corporis: misera
debilitas. Estne, quaeso, inquam, sitienti in bibendo voluptas? Memini
vero, inquam; Prioris generis est docilitas, memoria; < br > < / p > < / div >
< / div >
< / div >
< div class = "tile" id = "tile-30" data-tileid = "30" data-page = "1" data-styleid = "1" data-width = "2" data-order = "2" >
< div id = "tile-30-content" class = "tile-style-double" >
< div class = "tile-html" > < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeclare hoc
quidem. Quis istum dolorem timet? Bonum integritas corporis: misera
debilitas. Estne, quaeso, inquam, sitienti in bibendo voluptas? Memini
vero, inquam; Prioris generis est docilitas, memoria; < br > < / p > < / div >
< / div >
< / div >
< div class = "tile" id = "tile-32" data-tileid = "32" data-page = "1" data-styleid = "1" data-width = "4" data-order = "3" >
< div id = "tile-32-content" class = "tile-style-line" >
< div class = "tile-html" > < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. < b > Nunc agendum est subtilius.< / b > Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico? Causa autem fuit huc veniendi ut quosdam hinc libros promerem. Hoc loco tenere se Triarius non potuit. < i > De illis, cum volemus.< / i > Duo Reges: constructio interrete. < / p > < p >
< br > < / p > < pre > Nam cum in Graeco sermone haec ipsa quondam rerum nomina
novarum * * non videbantur, quae nunc consuetudo diuturna
trivit;
< / pre > < p >
< / p > < dl > < dt > < dfn > Nos commodius agimus.< / dfn > < / dt > < dd > Sed plane dicit quod intellegit< / dd > < / dl >
< br > < p > < / p > < ul > < li > Nobis Heracleotes ille Dionysius flagitiose descivisse videtur a Stoicis propter oculorum dolorem.< / li > < li > Quasi vero aut concedatur in omnibus stultis aeque magna esse vitia, et eadem inbecillitate et inconstantia< br > < / li > < / ul > < blockquote cite = "http://loripsum.net" >
Nam haec ipsa mihi erunt< br > < / blockquote > < ol > < li > Sed in rebus apertissimis nimium longi sumus.< / li > < li > Rapior illuc, revocat autem Antiochus, nec est praeterea, quem audiamus.< / li > < / ol > < p > < mark > Eaedem res maneant alio modo.< / mark > Summum ením bonum exposuit vacuitatem doloris; Quod ea non occurrentia fingunt, vincunt Aristonem; Prioris generis est docilitas, memoria; Beatus autem esse in maximarum rerum timore nemo potest. Ut scias me intellegere, primum idem esse dico voluptatem, quod ille don. Sed ad bona praeterita redeamus. < i > Is es profecto tu.< / i > Quod quidem iam fit etiam in Academia < / p > < / div >
< / div >
< / div >
< / div >
< / div >
< div class = "pub-content" >
< div class = "page-safe-line" >
< div class = "bottom" > < / div >
< / div >
< div class = "tile-bin" >
< div class = "tile" id = "tile-33" data-tileid = "33" data-page = "2" data-styleid = "1" data-width = "3" data-order = "1" >
< div id = "tile-33-content" class = "tile-style-shadow" >
< div class = "tile-html" > < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita graviter et severe voluptatem secrevit a bono. Bonum negas esse divitias, praeposìtum esse dicis? Facillimum id quidem est, inquam. Qui potest igitur habitare in beata vita summi mali metus? < / p > < p >
< br > < / p > < ul > < li > Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate.< / li > < li > Inquit, dasne adolescenti veniam?< / li > < li > Duo Reges: constructio interrete.< / li > < li > Idem etiam dolorem saepe perpetiuntur, ne, si id non faciant, incidant in maiorem.< / li > < / ul > < p >
< br > < / p > < blockquote cite = "http://loripsum.net" >
Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse
< / blockquote > < p >
< br > < / p > < / div >
< / div >
< / div >
< div class = "tile" id = "tile-34" data-tileid = "34" data-page = "2" data-styleid = "1" data-width = "1" data-order = "1" >
< div id = "tile-34-content" class = "tile-style-1" >
< div class = "tile-html" > < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid est, quod ab ea absolvi et perfici debeat? At ego quem huic anteponam non audeo dicere; Duo Reges: constructio interrete. Illa tamen simplicia, vestra versuta. Quid dubitas igitur mutare principia naturae? Summus dolor plures dies manere non potest? Videmus igitur ut conquiescere ne infantes quidem possint. Sed ne, dum huic obsequor, vobis molestus sim < / p > < / div >
< / div >
< / div >
< div class = "tile" id = "tile-35" data-tileid = "35" data-page = "2" data-styleid = "1" data-width = "2" data-order = "1" >
< div id = "tile-35-content" class = "tile-style-1" >
< div class = "tile-html" > < p > < img style = "width: 200px;" src = "https://picsum.photos/200/300" > < br > < / p > < / div >
< / div >
< / div >
< / div >
< / div >
