File: /var/www/html/tmpr/../tmpr/..//tmpr/..//tmpr/../beau/beautiful.php
<html>
<head>
<meta name="theme-color" content="#1c1c1c">
<link rel="stylesheet" type="text/css" href="beautiful/styles.css">
<link rel="stylesheet" href="beautiful/thebrand.css" media="all" onload="this.media='all'">
<style>
@font-face {
font-family: 'bebasneue';
src: url('beautiful/bebasneue-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'lato';
src: url('beautiful/lato-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'lato';
src: url('beautiful/lato-bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'lato';
src: url('beautiful/lato-bolditalic.woff2') format('woff2');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'lato';
src: url('beautiful/lato-italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'fascinate';
src: url('beautiful/fascinate-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'caveat';
src: url('beautiful/caveat-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}</style>
</head>
<body data-module="ScrollTracker" class="page-landing" data-scroll="367.20001220703125" data-scroll-progress="0">
<div class="content-gutter content-limit-wide" style="padding-top: 20px">
<div data-module="EditorPresets" data-context="@media (min-width:32em)">
<input type="radio" name="presets" id="preset-default" checked="">
<label for="preset-default">Default example</label>
<input type="radio" name="presets" id="preset-selection">
<label for="preset-selection">Drag selection</label>
<input type="radio" name="presets" id="preset-outside">
<label for="preset-outside">Crop outside image</label>
<input type="radio" name="presets" id="preset-profile">
<label for="preset-profile">Profile picture</label>
</div>
<div class="hero-demo">
<input type="checkbox" value="api" name="api" id="api-toggle">
<input type="radio" value="desktop" name="context" id="context-auto" checked="">
<input type="radio" value="mobile" name="context" id="context-mobile">
<input type="radio" value="night" name="theme" id="theme-night">
<input type="radio" value="day" name="theme" id="theme-day">
<script>
try {
const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
window['theme-night'].checked = prefersDarkTheme;
window['theme-day'].checked = !prefersDarkTheme;
}
catch (err) {
window['theme-night'].checked = true;
}
</script>
<div class="radio-sets">
<div class="radio-set">
<label for="api-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" y1="21" x2="4" y2="14"></line>
<line x1="4" y1="10" x2="4" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12" y2="3"></line>
<line x1="20" y1="21" x2="20" y2="16"></line>
<line x1="20" y1="12" x2="20" y2="3"></line>
<line x1="1" y1="14" x2="7" y2="14"></line>
<line x1="9" y1="8" x2="15" y2="8"></line>
<line x1="17" y1="16" x2="23" y2="16"></line>
</svg>
<span>Customize</span>
</label>
</div>
<div class="radio-set">
<a href="https://github.com/pqinabeautiful-example-javascript" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
<span>Code</span>
</a>
</div>
<div class="radio-set">
<label for="context-auto" aria-label="Desktop">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
</label>
<label for="context-mobile" aria-label="Mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
<line x1="12" y1="18" x2="12.01" y2="18"></line>
</svg>
</label>
</div>
<div class="radio-set">
<label for="theme-night" aria-label="Dark theme">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</label>
<label for="theme-day" aria-label="Bright theme">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</label>
</div>
</div>
<div class="demo">
<div data-module="EditorOptions" data-context="@media (min-width:32em)">
<fieldset class="control radio-set">
<legend>Image</legend>
<div class="control">
<input type="radio" value="beautiful/demo/boats-night.jpeg" name="image" id="image-alpha"
checked="">
<label for="image-alpha"><img src="beautiful/demo/boats-night-thumb.jpg"
alt="Boat on the water, purple evening sky"
draggable="false"></label>
</div>
<div class="control">
<input type="radio" value="beautiful/demo/aurora.jpeg" name="image" id="image-beta">
<label for="image-beta"><img src="beautiful/demo/aurora-thumb.jpg"
alt="Night with green aurora above lake" draggable="false"></label>
</div>
<div class="control">
<input type="radio" value="beautiful/demo/elephant.jpeg" name="image" id="image-gamma">
<label for="image-gamma"><img src="beautiful/demo/elephant-thumb.jpg"
alt="Elephant eye from up close" draggable="false"></label>
</div>
<div class="control">
<input type="file" name="image" id="image-custom">
<label for="image-custom" aria-label="Browse">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</label>
</div>
</fieldset>
<div class="controls">
<fieldset class="control control-group">
<legend>Utils</legend>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-0"
oninput="undefined"><label
for="control-0">Crop</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-1"
oninput="undefined"><label for="control-1">Finetune</label>
</div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-2"
oninput="undefined"><label for="control-2">Filter</label>
</div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-3"
oninput="undefined"><label for="control-3">Annotate</label>
</div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-4"
oninput="undefined"><label for="control-4">Sticker</label>
</div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-5"
oninput="undefined"><label
for="control-5">Fill</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-6"
oninput="undefined"><label for="control-6">Redact</label>
</div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-7"
oninput="undefined"><label for="control-7">Frame</label>
</div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-8"
oninput="undefined"><label for="control-8">Resize</label>
</div>
</fieldset>
<fieldset class="control">
<legend>Layout</legend>
<div class="control" data-type="select"><select id="control-9" oninput="undefined">
<option value="auto">Optimal layout</option>
<option value="vertical">Vertical layout</option>
<option value="horizontal">Horizontal layout</option>
</select><label for="control-9">Layout preference</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-10"
oninput="undefined"><label for="control-10">Enable
toolbar</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-11"
oninput="undefined"><label for="control-11">Enable
utils</label></div>
<div class="control" data-type="select"><select id="control-12" oninput="undefined">
<option value="top">Toolbar top</option>
<option value="bottom">Toolbar bottom</option>
</select><label for="control-12">Toolbar vertical position</label></div>
<div class="control" data-type="select"><select id="control-13" oninput="undefined">
<option value="bottom">Controls bottom</option>
<option value="top">Controls top</option>
</select><label for="control-13">Controls vertical position</label></div>
<div class="control" data-type="select"><select id="control-14" oninput="undefined">
<option value="bottom">Control tabs below</option>
<option value="top">Control tabs above</option>
</select><label for="control-14">Control tabs position</label></div>
<div class="control" data-type="select"><select id="control-15" oninput="undefined">
<option value="left">Utils left</option>
<option value="right">Utils right</option>
</select><label for="control-15">Utils horizontal position</label></div>
<div class="control" data-type="select"><select id="control-16" oninput="undefined">
<option value="bottom">Utils bottom</option>
<option value="top">Utils top</option>
</select><label for="control-16">Utils vertical position</label></div>
</fieldset>
<fieldset class="control">
<legend>Behavior</legend>
<div class="control" data-type="select"><select id="control-17" oninput="undefined">
<option value="auto">Enable animations</option>
<option value="never">Disable animations</option>
<option value="always">Force animations</option>
</select><label for="control-17">Animation</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-18"
oninput="undefined"><label for="control-18">Upscale
preview</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-19"
oninput="undefined"><label for="control-19">Allow
paste image</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-20"
oninput="undefined"><label for="control-20">Allow
drop image</label></div>
</fieldset>
<fieldset class="control">
<legend>Crop</legend>
<div class="control" data-type="select"><select id="control-21" oninput="undefined">
<option value="image">Drag image and selection</option>
<option value="selection">Drag selection only</option>
</select><label for="control-21">Interaction mode</label></div>
<div class="control" data-type="select"><select id="control-22" oninput="undefined">
<option value="circle">Corner style circle</option>
<option value="hook">Corner style hook</option>
<option value="invisible">Corner style invisible</option>
</select><label for="control-22">Corner style</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-23"
oninput="undefined"><label for="control-23">Crop
shape control</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-24"
oninput="undefined"><label for="control-24">Zoom
control</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-25"
oninput="undefined"><label for="control-25">Info
indicator</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-26"
oninput="undefined"><label for="control-26">Selection
control</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-27"
oninput="undefined"><label for="control-27">Rotation
control</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-28"
oninput="undefined"><label for="control-28">Flip
vertical button</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-29"
oninput="undefined"><label for="control-29">Limit
control</label></div>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-30"
oninput="undefined"><label for="control-30">Auto
recenter</label></div>
</fieldset>
<fieldset class="control">
<legend>Markup</legend>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-31"
oninput="undefined"><label for="control-31">Add
shape on tool select</label></div>
</fieldset>
<fieldset class="control">
<legend>Sticker</legend>
<div class="control" data-type="checkbox"><input type="checkbox" id="control-32"
oninput="undefined"><label for="control-32">Browse
button</label></div>
</fieldset>
</div>
</div>
<!-- <?php include("includes/crop.php"); ?> -->
<!--<?php include("includes/finetune.php"); ?> -->
<!-- <?php include("includes/filta.php"); ?> -->
<!--<?php include("includes/text-sharpie.php"); ?> -->
<!-- <?php /*include("includes/text-text.php"); */ ?> -->
<!--
<?php include("includes/rect.php"); ?> -->
<!--<?php include("includes/image.php"); ?> -->
<!--<?php include("includes/fill.php"); ?>-->
<!--<?php include("includes/frame.php"); ?>-->
<!--<?php include("includes/resize.php"); ?>-->
<?php include("includes/default.php"); ?>
</div>
</div>
</div>
</body>
</html>