Journeys_WantHome/Views/Home/Dashboard.cshtml

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = "_LooperLayout";
}

@section Style {
    <link rel="stylesheet" href="~/assets/vendor/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css">
}

@section Script {
    <script src="~/assets/vendor/sortablejs/Sortable.min.js"></script>
    <script src="~/assets/vendor/nestable2/jquery.nestable.min.js"></script>
    <script src="~/assets/javascript/custom/dashboard.js" asp-append-version="true"></script>
    <script>
        const numberInput = document.getElementById('myNumberInput');
        numberInput.addEventListener('input', function (event) {
            const value = event.target.value;
            const formattedValue = value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            event.target.value = formattedValue;
        });
    </script>
}

<!-- .page-inner -->
<div class="page-inner">
    <!-- .page-title-bar -->
    <header class="page-title-bar">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">
                    <a href="#"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>Dashboard</a>
                </li>
            </ol>
        </nav>
        <h1 class="page-title"> 社群平台排行榜 </h1>
    </header><!-- /.page-title-bar -->
    <!-- .page-section -->
    <div class="page-section">
        <!-- .section-block -->
        <div class="section-block" style="display: none;">
            <h2 class="section-title"> Nestable </h2>
            <p class="text-muted"> Drag & drop hierarchical list with mouse and touch compatibility. </p>
        </div><!-- /.section-block -->
        <!-- grid row -->
        <div class="row" id="card_group">
        </div><!-- /grid row -->
        <!-- grid row -->
        <div class="row" id="card_group2">
        </div><!-- /grid row -->
    </div><!-- /.page-section -->
</div><!-- /.page-inner -->

<!-- .modal -->
<form id="clientYoutubeForm" name="clientYoutubeForm">
    <div class="modal fade" id="YoutubeModal" tabindex="-1" role="dialog" aria-labelledby="YoutubeModalLabel"  data-backdrop="static" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="optionItemModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">最近五則影片</span> <input id="optionItem_name" type="text" class="form-control form-control-lg" value="" placeholder="最近五則影片" readonly="readonly" required="">
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <!-- .masonry-layout -->
                    <div class="row" id="youtube_layout">


                    </div><!-- /.masonry-layout -->
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->
<!-- .modal -->
<form id="clientFacebookForm" name="clientFacebookForm">
    <div class="modal fade" id="FacebookModal" tabindex="-1" role="dialog" aria-labelledby="FacebookModalLabel" data-backdrop="static" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="optionItemModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">最近五則貼文資料</span> <input id="optionItem_name" type="text" class="form-control form-control-lg" value="" placeholder="最近五則貼文資料" readonly="readonly" required="">
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <!-- .masonry-layout -->
                    <div class="row" id="facebook_layout">
                    </div><!-- /.masonry-layout -->
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->
<!-- .modal -->
<form id="clientInstagramPostForm" name="clientInstagramPostForm">
    <div class="modal fade" id="InstagramPostModal" tabindex="-1" role="dialog" aria-labelledby="InstagramPostModalLabel" data-backdrop="static" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="optionItemModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">最近6則資料</span> <input id="optionItem_name" type="text" class="form-control form-control-lg" value="" placeholder="最近6則資料" readonly="readonly" required="">
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <!-- .masonry-layout -->
                    <div class="row" id="instagramPost_layout">
                    </div><!-- /.masonry-layout -->
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->