<div class="content post-editing-form">
<div class="valign user-heading">
<img src="{{ME avatar}}" class="img-circle">
<div>
<span>{{ME username}}</span>
<span class="pp_area">{{LANG image}}</span>
</div>
</div>
<form class="form" id="upload-post-image" action="{{CONFIG site_url}}/aj/posts/upload-post-images">
<div class="images-renderer">
<div class="valign select-images" onclick="$('#upload-images').trigger('click');">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.689 503.689" xml:space="preserve"><path style="fill:#ffffff;" d="M16.502,135.838L396.564,34.225c11.815-3.151,24.418,3.938,27.569,15.754l75.225,279.237 c3.151,11.815-3.938,24.025-16.148,27.175L103.149,458.004c-11.815,3.151-24.418-3.938-27.569-15.754L0.749,163.013 C-2.402,151.198,4.687,138.989,16.502,135.838z"/> <path style="fill:#208DB2;" d="M48.404,158.287L380.81,69.672c9.058-2.363,18.511,3.151,21.268,12.209l62.228,231.188 c2.363,9.058-3.151,18.511-12.209,20.874L119.69,422.558c-9.058,2.363-18.511-3.151-21.268-12.209L36.195,179.161 C33.438,170.102,38.952,160.65,48.404,158.287z"/> <path style="fill:#ffffff;" d="M85.425,131.899H481.24c12.603,0,22.449,10.24,22.449,22.449v293.415 c0,12.603-10.24,22.449-22.449,22.449H85.425c-12.603,0-22.449-10.24-22.449-22.449V154.349 C62.976,142.139,73.216,131.899,85.425,131.899z"/> <path style="fill:#A3E0F5;" d="M111.813,163.407h343.828c9.452,0,17.329,7.877,17.329,17.329V421.77 c0,9.452-7.877,17.329-17.329,17.329H111.813c-9.452,0-17.329-7.877-17.329-17.329V180.736 C94.484,171.284,101.967,163.407,111.813,163.407z"/> <path style="fill:#EFC75E;" d="M94.484,180.736v84.283c3.938,0.394,7.877,0.788,11.815,0.788c50.018,0,90.585-40.566,90.585-90.585 c0-3.938-0.394-7.877-0.788-11.815h-84.283C101.967,163.407,94.484,171.284,94.484,180.736z"/> <path style="fill:#3DB39E;" d="M123.235,356.392c-9.846,0-19.692,0.788-28.751,1.969v63.409c0,9.452,7.877,17.329,17.329,17.329 h131.151c0.788-3.545,1.182-6.695,1.182-10.24C244.145,388.687,190.189,356.392,123.235,356.392z"/> <path style="fill:#4BC2AD;" d="M397.745,320.945c-107.914,0-195.742,52.775-196.923,118.154h254.425 c9.452,0,17.329-7.877,17.329-17.329v-91.766C449.339,324.49,424.133,320.945,397.745,320.945z"/></svg>
<h5>{{LANG choose_up210img}}</h5>
</div>
<?php if ($config['face_filter'] == 'on') { ?>
<div id="from_camera_button" class="open_camera_">
<a href="javascript:void(0);" class="valign" onclick="open_camera()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"></path></svg> {{LANG from_camera}}</a>
</div>
<?php } ?>
</div>
<?php if ($config['face_filter'] == 'on') { ?>
<div id="camera_container" class="camera_1">
<canvas width="100%" height="100%" class="camera_2" id='jeeFaceFilterCanvas'></canvas>
<span class="camera_3" onclick="close_camera_()"><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg></span>
<span class="valign camera_4" onclick="capture_image_()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"></path></svg></span>
<span class="valign camera_6" onclick="record_video_()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z"></path></svg></span>
<span class="camera_7" onclick="stop_record_video_()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M18,18H6V6H18V18Z"></path></svg></span>
<span class="camera_timer">
<label id="minutes">00</label>:<label id="seconds">00</label>
</span>
<div class="camera_5" id="filters_container">
<div class="item" onclick="add_face_filter('fireworks')">
<img src="{{CONFIG site_url}}/media/img/Fireworks.jpg">
</div>
<div class="item" onclick="add_face_filter('faceDeform')">
<img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
</div>
<div class="item" onclick="add_face_filter('luffys_hat_1')">
<img src="{{CONFIG site_url}}/media/img/hat-1.png">
</div>
<div class="item" onclick="add_face_filter('luffys_hat_2')">
<img src="{{CONFIG site_url}}/media/img/hat-2.jpg">
</div>
<div class="item" onclick="add_face_filter('cloud')">
<img src="{{CONFIG site_url}}/media/img/cloud.jpg">
</div>
<div class="item" onclick="add_face_filter('butterflies')">
<img src="{{CONFIG site_url}}/media/img/butterfly.png">
</div>
<div class="item" onclick="add_face_filter('gltf')">
<img src="{{CONFIG site_url}}/media/img/mask.jpg">
</div>
</div>
<div id="camera_button" class="show_filters_" onclick="show_filters()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.47,4.35L20.13,3.79V12.82L22.56,6.96C22.97,5.94 22.5,4.77 21.47,4.35M1.97,8.05L6.93,20C7.24,20.77 7.97,21.24 8.74,21.26C9,21.26 9.27,21.21 9.53,21.1L16.9,18.05C17.65,17.74 18.11,17 18.13,16.26C18.14,16 18.09,15.71 18,15.45L13,3.5C12.71,2.73 11.97,2.26 11.19,2.25C10.93,2.25 10.67,2.31 10.42,2.4L3.06,5.45C2.04,5.87 1.55,7.04 1.97,8.05M18.12,4.25A2,2 0 0,0 16.12,2.25H14.67L18.12,10.59"></path></svg>
</div>
</div>
<div class="filters_1" id="capture_test">
<img src="" class="filters_2" id="filter_image_">
<span class="filters_3" onclick="close_image_()"><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24"><path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg></span>
</div>
<div class="filters_1" id="video_test">
<video id="video_" controls></video>
<span class="filters_3" onclick="close_video_()"><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24"><path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg></span>
</div>
<?php } ?>
<div class="form-group">
<textarea class="form-control pp_make_post" name="caption" rows="3" placeholder="{{LANG add_post_caption}}"></textarea>
</div>
<div class="form-group publish">
<div class="loading_cont hidden"></div>
<button type="reset" class="btn btn-default btn-mat" id="close-anim-image-modal">{{LANG close}}</button>
<button type="submit" class="btn btn-main btn-mat" id="submit_image_btn">{{LANG publish}}</button>
</div>
<input class="hidden" id="upload-images" type="file" name="images[]" multiple accept="image/*">
<input class="hidden" type="file" name="filter_image">
<input type="hidden" name="hash" value="<?php echo($context['csrf_token']) ?>">
</form>
</div>
<?php if ($config['face_filter'] == 'on') { ?>
<script type="text/javascript">
function add_face_filter(type) {
if (typeof(JEEFACEFILTERAPI) != 'undefined') {
var tracks = JEEFACEFILTERAPI.getVideoInfo().getTracks();
for (var i = 0; i < tracks.length; i++) {
tracks[i].stop();
}
}
$('#filters_container').hide();
$('.fireworks').remove();
$('.faceDeform').remove();
$('.luffys_hat_1').remove();
$('.luffys_hat_2').remove();
$('.cloud').remove();
$('.butterflies').remove();
$('.gltf').remove();
if (type == 'fireworks') {
$('head').append($('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/jeelizFaceFilter.js',
class:'fireworks'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/v90/three.min.js',
class:'fireworks'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/JeelizResizer.js',
class:'fireworks'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/Tween.min.js',
class:'fireworks'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/fireworks/demo.js',
class:'fireworks'
}));
main();
}
else if(type == 'faceDeform'){
$('head').append($('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/jeelizFaceFilter.js',
class:'faceDeform'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/v90/three.min.js',
class:'faceDeform'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/JeelizResizer.js',
class:'faceDeform'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/faceDeform/demo.js',
class:'faceDeform'
}));
main();
}
else if(type == 'luffys_hat_1'){
$('head').append($('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/jeelizFaceFilter.js',
class:'luffys_hat_1'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/v90/three.min.js',
class:'luffys_hat_1'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/JeelizResizer.js',
class:'luffys_hat_1'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/luffys_hat_1/demo.js',
class:'luffys_hat_1'
}));
main();
}
else if(type == 'luffys_hat_2'){
$('head').append($('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/jeelizFaceFilter.js',
class:'luffys_hat_2'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/v90/three.min.js',
class:'luffys_hat_2'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/JeelizResizer.js',
class:'luffys_hat_2'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/luffys_hat_2/demo.js',
class:'luffys_hat_2'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/luffys_hat_2/scripts/addDragEventListener.js',
class:'luffys_hat_2'
}));
main();
}
else if(type == 'cloud'){
$('head').append($('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/jeelizFaceFilter.js',
class:'cloud'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/v90/three.min.js',
class:'cloud'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/JeelizResizer.js',
class:'cloud'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/Tween.min.js',
class:'cloud'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/cloud/demo.js',
class:'cloud'
}));
main();
}
else if(type == 'butterflies'){
$('head').append($('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/jeelizFaceFilter.js',
class:'butterflies'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/v90/three.min.js',
class:'butterflies'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/JeelizResizer.js',
class:'butterflies'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/Tween.min.js',
class:'butterflies'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/butterflies/demo.js',
class:'butterflies'
}));
main();
}
else if(type == 'gltf'){
$('head').append($('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/jeelizFaceFilter.js',
class:'gltf'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/v91/threeModified.js',
class:'gltf'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/includes/v90/GLTFLoader.js',
class:'gltf'
}),$('<script>',{
src: '{{CONFIG site_url}}/sys/import3p/face_filters/js/gltf/demo.js',
class:'gltf'
}));
main();
}
}
</script>
<?php } ?>
<?php
include $context['dirname_theme'].'/home/templates/home/js/script.upload.images.html';
?>
<!-- <script src="{{CONFIG site_url}}/sys/import3p/face_filters/record/js/third_party/webgl_teapot/demo.js"></script> -->