Files
admin_hura_8/template/article/form.html
2024-03-06 09:19:26 +07:00

359 lines
23 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<div class="global-breadcrumb-container">
<a href="/admin/article"> Bài viết </a>
<a href=""> Form cập nhật Bài viết </a>
</div>
<div class="max-w-[1141px] m-auto">
<div class="flex flex-wrap items-start m-[16px_0]">
<div class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px] flex flex-wrap items-center justify-between">
{% if global.url contains 'id=' %}
<p class="font-bold text-[20px]"> Sửa nội dung </p>
<p class="w-[100%] text-[#6B7280] order-[1]">
ROG FALCHION LOW PROFILE CHƠI GAME TRÊN MAC LÀ CHUYỆN NHỎ
</p>
{% else %}
<p class="font-bold text-[20px]"> Thêm mới </p>
{% endif %}
<div class="flex items-center">
<a href="/admin/article/form" class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
<span class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
<span>Thêm nội dung mới</span>
</a>
<a href="" class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
<span class="far fa-folder mr-2"></span>
<span>Quản lý danh mục</span>
</a>
<a href="/admin/article" title="Danh sách nội dung" class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
</div>
</div>
<div class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
<a href="javascript:void(0)" style="color: #Fff;background: #0041E8;" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa </a>
{% if global.url contains 'id=' %}
<a href="/admin/article/tag?id=1" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
<a href="/admin/article/relation?id=1&related_item_type=product" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên quan: Sản phẩm </a>
<a href="/admin/article/relation?id=1&related_item_type=product-category" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên quan: Danh mục sản phẩm </a>
{% endif %}
</div>
<form method="post" enctype="multipart/form-data" class="w-[852px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Thông tin cơ bản </p>
<div class="mb-[15px] flex flex-wrap items-center">
<p class="mb-[7px] w-[100%] font-[600]">Ảnh đại diện </p>
<div class="inline-block">
<img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
</div>
<label class="cursor-pointer">
<span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
<input type="file" name="file_thumbnail">
</label>
</div>
<div class="mb-[15px] flex flex-wrap items-center">
<p class="mb-[7px] w-[100%] font-[600]"> Ảnh nền trong chi tiết </p>
<div class="inline-block">
<img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
</div>
<label class="cursor-pointer">
<span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
<input type="file" name="file_thumbnail">
</label>
</div>
<div class="p-[12px_20px] m-[15px_0] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] rounded-[4px]">
<p class="font-bold mb-2"> Danh mục <i class="font-[300] text-[#6B7280]"> * có thể chọn nhiều danh mục  </i> </p>
<div class="overflow-auto max-h-[250px]">
<div class="mb-1">
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
<input type="checkbox" value="1" class="scale-[1.5] mr-2">
<b> Danh mục cấp 1 </b>
</label>
</div>
<div class="mb-1">
<p class="font-bold mb-[5px]"> Danh mục cấp 1 </p>
<div class="pl-[25px]">
<!-- KHÔNG CÓ danh mục con -->
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
<input type="checkbox" value="2" class="scale-[1.5] mr-2">
<span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span>
</label> <br>
<!-- CÓ danh mục con -->
<div>
<p class="font-bold mb-[5px]"> Danh mục cấp 2 </p>
<div class="pl-[25px]">
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
<input type="checkbox" value="2" class="scale-[1.5] mr-2">
<span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 3 </span>
</label> <br>
</div>
</div>
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br><div> <p class="font-bold mb-[5px]"> Danh mục cấp 2 </p><div class="pl-[25px]"> <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 3 </span> </label> <br></div></div><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br>
</div>
</div>
<!-- clone -->
<div class="mb-1"> <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="1" class="scale-[1.5] mr-2"> <b> Danh mục cấp 1 </b> </label> </div><div class="mb-1"> <p class="font-bold mb-[5px]"> Danh mục cấp 1 </p><div class="pl-[25px]"> <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input type="checkbox" value="2" class="scale-[1.5] mr-2"> <span class="text-[#6B7280] group-hover:text-[#000]"> Danh mục cấp 2 </span> </label> <br></div></div>
<!-- // -->
</div>
</div>
<div class="mb-[15px]">
<p class="mb-[7px] w-[100%] font-[600]"> Tiêu đề </p>
<input type="text" value="" class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"/>
</div>
<div class="mb-[15px]">
<p class="mb-[7px] w-[100%] font-[600]"> Link Index </p>
<input type="text" value="" class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"/>
</div>
<div class="mb-[15px]">
<p class="mb-[7px] w-[100%] font-[600]"> Link tham khảo (link web ngoài nếu có) </p>
<input type="text" value="" class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"/>
</div>
<div class="mb-[15px]">
<p class="mb-[7px] w-[100%] font-[600]"> Tóm tắt chính </p>
<textarea class="w-[100%] min-h-[90px] max-h-[150px] outline-[0px] p-[10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
</div>
<div>
<p class="mb-[7px] w-[100%] font-[600]"> Tags (Mỗi cụm từ 1 dòng) </p>
<textarea class="w-[100%] min-h-[90px] max-h-[150px] outline-[0px] p-[10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
</div>
</div>
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
<div class="flex flex-wrap items-center justify-between mb-3">
<p class="font-bold text-[20px] leading-[20px]"> Mô tả (nếu có) </p>
<div class="flex items-center font-[500] leading-[35px]">
<a href="" class="group flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
<span class="icons icon-upload group-hover:filter-none"></span>
<span> Upload ảnh </span>
</a>
<a href="" class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
<i class="far fa-folder mr-2"></i>
<span> Quản lý </span>
</a>
<a href="" class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
<i class="fa fa-image mr-2"></i>
<span> Chọn ảnh trong kho ảnh </span>
</a>
</div>
<div class="flex overflow-auto pb-2 w-[100%]">
<a href="javascript:void(0)" class="min-w-[100px] m-[10px_10px_0_0]">
<img src="https://via.placeholder.com/2000x800" class="h-[40px] block"/>
</a>
</div>
</div>
<div class="mb-[15px]">
<textarea id="js-desc"> </textarea>
</div>
<div>
<p class="mb-[7px] w-[100%] font-[600]"> Thứ tự <i class="font-[300] text-[13px]"> (* số cao xếp trước)</i> </p>
<input type="text" value="" class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"/>
</div>
</div>
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Dùng cho SEO </p>
<div class="mb-[15px]">
<p class="mb-[7px] w-[100%] font-[600]">
Url canonical
<i class="text-[13px] font-[300]"> * để trống sẽ dùng link mặc định của hệ thống </i>
</p>
<input type="text" value="" class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"/>
</div>
<div class="mb-[15px]">
<p class="mb-[7px] w-[100%] font-[600]">
Meta Title
<i class="text-[13px] font-[300]">  0 ký tự , 0 từ </i>
</p>
<input type="text" value="" class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"/>
</div>
<div class="mb-[15px]">
<p class="mb-[7px] w-[100%] font-[600]">
Meta Keywords
<i class="text-[13px] font-[300]">  0 ký tự , 0 từ </i>
</p>
<input type="text" value="" class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"/>
</div>
<div class="mb-[15px]">
<p class="mb-[7px] w-[100%] font-[600]">
Meta Description
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ (Khuyến nghị: 160 ký tự) </i>
</p>
<textarea class="w-[100%] min-h-[90px] max-h-[150px] outline-[0px] p-[10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
</div>
<div class="mb-[15px] flex items-start">
<p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Cho phép Google Index </p>
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="scale-[1.4] mr-2">
<span> Cho phép Google Index </span>
</label>
</div>
<div class="flex items-start">
<p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Hiển thị Mục lục đầu bài viết </p>
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="scale-[1.4] mr-2">
<span> Cho phép hiển thị </span>
</label>
</div>
</div>
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Quản trị hiển thị </p>
<div class="mb-[15px] flex flex-wrap">
<p class="w-[230px] font-bold">Thời gian của bài viết</p>
<div>
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
<input type="radio" value="0" name="info[article_time_set]" class="left-0" checked="">
<span> Thời gian tạo bài </span>
</label>
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
<input type="radio" value="1" name="info[article_time_set]" class="left-0">
<span> Chọn thời gian </span>
</label>
<div class="w-[100%] hidden" id="js-publish_time">
<div class="flex items-center m-[10px_0]">
<div class="relative mr-[20px]">
<i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
<input type="date" name="from_time_date" value="" placeholder="Từ ngày" class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
</div>
<p class="mr-[10px]"> Giờ </p>
<select name="info[from_time_minute]" id="from_time_minute" style="width: 85px;" class="border border-[#d8d8d8] h-[36px] rounded-[4px] pl-[5px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
<option value="00:00">00:00</option><option value="00:30">00:30</option><option value="01:00">01:00</option><option value="01:30">01:30</option><option value="02:00">02:00</option><option value="02:30">02:30</option><option value="03:00">03:00</option><option value="03:30">03:30</option><option value="04:00">04:00</option><option value="04:30">04:30</option><option value="05:00">05:00</option><option value="05:30">05:30</option><option value="06:00">06:00</option><option value="06:30">06:30</option><option value="07:00">07:00</option><option value="07:30">07:30</option><option value="08:00">08:00</option><option value="08:30">08:30</option><option value="09:00">09:00</option><option value="09:30">09:30</option><option value="10:00">10:00</option><option value="10:30">10:30</option><option value="11:00">11:00</option><option value="11:30">11:30</option><option value="12:00">12:00</option><option value="12:30">12:30</option><option value="13:00">13:00</option><option value="13:30">13:30</option><option value="14:00">14:00</option><option value="14:30">14:30</option><option value="15:00">15:00</option><option value="15:30">15:30</option><option value="16:00">16:00</option><option value="16:30">16:30</option><option value="17:00">17:00</option><option value="17:30">17:30</option><option value="18:00">18:00</option><option value="18:30">18:30</option><option value="19:00">19:00</option><option value="19:30">19:30</option><option value="20:00">20:00</option><option value="20:30">20:30</option><option value="21:00">21:00</option><option value="21:30">21:30</option><option value="22:00">22:00</option><option value="22:30">22:30</option><option value="23:00">23:00</option><option value="23:30">23:30</option>
</select>
</div>
</div>
</div>
<i class="w-[100%] font-[300] text-[#6B7280] mt-[5px]">(Hiển thị cho người xem thời gian thật của bài thay vì thời gian cập nhật)</i>
</div>
<div class="mb-[15px] flex flex-wrap">
<p class="w-[230px] font-bold"> Trạng thái </p>
<div>
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
<input type="radio" value="0" name="info[status]" class="left-0" checked="">
<span> Bản nháp </span>
</label>
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
<input type="radio" value="1" name="info[status]" class="left-0">
<span> Cho hiển thị </span>
</label>
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
<input type="radio" value="-1" name="info[status]" class="left-0">
<span> Chờ duyệt </span>
</label>
</div>
</div>
<div class="flex flex-wrap items-center">
<p class="w-[230px] font-bold"> Xem thử </p>
<a href="" target="_blank" class="inline-block font-[600] border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[30px] p-[0_12px] transition hover:bg-[#0041E8] hover:text-white">
Xem bài viết tại trang web
</a>
</div>
</div>
<input type="submit" value="Cập nhật" class="inline-block m-[16px] cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]"/>
</form>
</div>
</div>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea#js-desc',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script>
<script>
$(function(){
$("input[name='info[article_time_set]']").click(function(){
if($(this).val() == 1) $("#js-publish_time").show();
else $("#js-publish_time").hide();
}) ;
});
</script>