sd_feed/html/feedtab.html

<div class="feed-tab-header" style="display:flex;width:100%;justify-content:space-between;" id="feed-header">
    <div class="feed-tab-class"> 
        <button
                v-for="(item, index) in modeSelectList"
                :key="index"
                class="feed-tab-default"
                :class="{ 'selected' : item.value === mode}"
                @click="setMode(item.value)"
            >{{ item.name }}</button>
        <button
            class="feed-tab-default"
            :class="{ 'selected' : mode === 'nicknameSearch'}"
            id="feed-user-tab"
            @click="setNicknameSearch">
        </button>
    </div>
    <div class="feed-tab-class-search">
        <input id="prompt-input" type="text" v-model="prompt"  @keyup.enter="fetchNewImage" style="margin-right:5px;">
        <button @click="fetchNewImage" id="feed-search-btn">Search</button>
    </div>
</div>
<div>
    <div class="product-slider" style="display:flex;justify-content:center;">
        <div style="display:flex;justify-content:flex-end;width:100%;margin-top:20px;">
            <div style="display:flex;">
                <button style="margin-right:20px;" @click="selectRealTag" class="tag-button" :class="{ 'tag-button-selected': realTag, 'tag-button-unselected': !realTag }">REAL</button>
            </div>
            <div style="display:flex;">
                <button style="margin-right:100px;" @click="selectAnimeTag" class="tag-button" :class="{ 'tag-button-selected': animeTag, 'tag-button-unselected': !animeTag }">ILLUST</button>
            </div>
            <div>
                <label class="toggle-btn">
                    <span class="toggle-letter">Filter NSFW</span>
                    <input type="checkbox"  v-model="filterNsfw" @change="fetchNewImage">
                    <span class="slider round"></span>
                </label>
            </div>
        </div>
    </div>
    <div class="product-slider" style="display:flex;justify-content:center;" v-if="mode=='nicknameSearch'">
        <div class="page-max-width">
            <div style="max-width:100%;display:flex;align-items: start;">
                <div style="margin-left:37px;margin-right:37px;margin-bottom:37px;">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" zoomAndPan="magnify" viewBox="0 0 39 38.999999" height="160" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="-3.9" width="46.8" fill="#ffffff" y="-3.9" height="46.799999" fill-opacity="1"/><rect x="-3.9" width="46.8" fill="#ffffff" y="-3.9" height="46.799999" fill-opacity="1"/><rect x="-3.9" width="46.8" fill="#ffffff" y="-3.9" height="46.799999" fill-opacity="1"/><path fill="#000000" d="M 33.289062 5.710938 C 29.605469 2.027344 24.707031 0 19.5 0 C 14.292969 0 9.394531 2.027344 5.710938 5.710938 C 2.027344 9.394531 0 14.292969 0 19.5 C 0 24.707031 2.027344 29.605469 5.710938 33.289062 C 9.394531 36.972656 14.292969 39 19.5 39 C 24.707031 39 29.605469 36.972656 33.289062 33.289062 C 36.972656 29.605469 39 24.707031 39 19.5 C 39 14.292969 36.972656 9.394531 33.289062 5.710938 Z M 6.597656 6.597656 C 10.042969 3.148438 14.625 1.25 19.5 1.25 C 24.375 1.25 28.957031 3.148438 32.402344 6.597656 C 35.851562 10.042969 37.746094 14.625 37.746094 19.5 C 37.746094 23.550781 36.433594 27.402344 34.011719 30.566406 C 32.085938 27.871094 29.007812 26.277344 25.664062 26.277344 L 13.335938 26.277344 C 9.992188 26.277344 6.914062 27.871094 4.988281 30.566406 C 2.5625 27.402344 1.25 23.550781 1.25 19.5 C 1.25 14.625 3.148438 10.042969 6.597656 6.597656 Z M 19.5 25.25 C 24.507812 25.25 28.585938 21.171875 28.585938 16.164062 C 28.585938 11.152344 24.507812 7.078125 19.5 7.078125 C 14.488281 7.078125 10.414062 11.152344 10.414062 16.164062 C 10.414062 21.171875 14.488281 25.25 19.5 25.25 Z M 19.5 25.25 " fill-opacity="1" fill-rule="nonzero"/></svg>
                </div>
                <div>
                    <div style="display:flex;align-items:center;">
                        <div style="padding: 10px; border-radius: 5px; display:flex;align-items:center;">
                            <p style="line-height:normal;line-height:0;font-size: 25px;font-weight: 800;margin-right: 10px;">By.</p>
                            <p style="line-height: 0;font-size: 20px;margin-right: 10p;">{{searchNickname}}</p>
                        </div>
                    </div>
                    <div v-html="parsedSearchProfile" style="padding: 10px; border-radius: 5px; display:flex;align-items:center;">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="product-slider" style="display:flex;justify-content:center;" v-if="mode=='private'">
        <div class="page-max-width">
            <div style="max-width:100%;display:flex;align-items: start;">
                <div style="margin-left:37px;margin-right:37px;margin-bottom:37px;">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" zoomAndPan="magnify" viewBox="0 0 39 38.999999" height="160" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="-3.9" width="46.8" fill="#ffffff" y="-3.9" height="46.799999" fill-opacity="1"/><rect x="-3.9" width="46.8" fill="#ffffff" y="-3.9" height="46.799999" fill-opacity="1"/><rect x="-3.9" width="46.8" fill="#ffffff" y="-3.9" height="46.799999" fill-opacity="1"/><path fill="#000000" d="M 33.289062 5.710938 C 29.605469 2.027344 24.707031 0 19.5 0 C 14.292969 0 9.394531 2.027344 5.710938 5.710938 C 2.027344 9.394531 0 14.292969 0 19.5 C 0 24.707031 2.027344 29.605469 5.710938 33.289062 C 9.394531 36.972656 14.292969 39 19.5 39 C 24.707031 39 29.605469 36.972656 33.289062 33.289062 C 36.972656 29.605469 39 24.707031 39 19.5 C 39 14.292969 36.972656 9.394531 33.289062 5.710938 Z M 6.597656 6.597656 C 10.042969 3.148438 14.625 1.25 19.5 1.25 C 24.375 1.25 28.957031 3.148438 32.402344 6.597656 C 35.851562 10.042969 37.746094 14.625 37.746094 19.5 C 37.746094 23.550781 36.433594 27.402344 34.011719 30.566406 C 32.085938 27.871094 29.007812 26.277344 25.664062 26.277344 L 13.335938 26.277344 C 9.992188 26.277344 6.914062 27.871094 4.988281 30.566406 C 2.5625 27.402344 1.25 23.550781 1.25 19.5 C 1.25 14.625 3.148438 10.042969 6.597656 6.597656 Z M 19.5 25.25 C 24.507812 25.25 28.585938 21.171875 28.585938 16.164062 C 28.585938 11.152344 24.507812 7.078125 19.5 7.078125 C 14.488281 7.078125 10.414062 11.152344 10.414062 16.164062 C 10.414062 21.171875 14.488281 25.25 19.5 25.25 Z M 19.5 25.25 " fill-opacity="1" fill-rule="nonzero"/></svg>
                </div>
                <template v-if="!editMode">
                    <div>
                        <div style="display:flex;align-items:center;">
                            <div style="padding: 10px; border-radius: 5px; display:flex;align-items:center;">
                                <p style="line-height:normal;line-height:0;font-size: 25px;font-weight: 800;margin-right: 10px;">By.</p>
                                <p style="line-height: 0;font-size: 20px;margin-right: 10p;">{{nickname}}</p>
                            </div>
                            <button @click="setEditMode" style="width:24px;height:24px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
                            </button>
                        </div>
                        <div style="padding: 10px; border-radius: 5px; display:flex;align-items:center;" v-html="parsedProfile">
                        </div>
                        <div style="padding: 10px; border-radius: 5px; display:flex;align-items:center;">
                            If you have any question or want to modify your data contact us at Discord: #Zag5956
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div style="width:100%;">
                        <div style="width:100%;">
                    <input  style="padding: 10px; border-radius: 5px; border: 1px solid #ccc; flex-grow: 1;" type="text" v-model="nickname">
                    <button  style="width:24px;height:24px;margin-right:15px;margin-left:15px;" @click="saveNickname">💾</button>
                    <button style="width:24px;height:24px;" @click="setEditMode">
                        ✖️
                    </button>
                    </div>
                    <div style="width:100%;">
                        <textarea v-model="profile" @input="handleTextareaInput" id="profile-writer-type" class="profile-writer-type" placeholder="Type your profile"></textarea>
                    </div>
                    </div>
                </template>
            </div>
            <div style="display:flex;justify-content:center;" v-if="imageList.length == 0 & mode=='private'" class="private-upload">
                <div style="width:100%;">
                    <label for="image-input-file" style="background-color:#AFB6BD;width:100%;aspect-ratio:1/1;">
                        <div style="background-color:#AFB6BD;width:100%;aspect-ratio:1/1;display:flex; align-items:center;justify-content:center;">
                            <div style="background-color:white;width:80%;aspect-ratio:1/1;display:flex; align-items:center;justify-content:center;">
                                <div v-if="!loading">
                                    <div style="color:#AFB6BD;font-size:18px;display:flex;justify-content:center;">
                                        Please Upload Image
                                    </div>
                                    <div style="color:#AFB6BD;font-size:15px;display:flex;justify-content:center;">-or-</div>
                                    <div style="color:#AFB6BD;font-size:18px;display:flex;justify-content:center;">Click and upload</div>
                                </div>
                                <div v-if="loading">
                                    <div style="color:#AFB6BD;font-size:18px;display:center;justify-content:center;">
                                        Loading Image...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </label>
                    <input
                        id="image-input-file"
                        type="file"
                        multiple
                        accept="image/*"
                        style="display:none;"
                        @change="uploadImage"
                    >
                </div>
            </div>
        </div>
    </div>
    <div class="product-slider" v-if="imageList.length > 0">
        <div class="pinterest-column-gallery" id="columns">
            <div v-if="mode=='private'" class="pinterest-column-item">
                <label for="image-input-file" style="background-color:#AFB6BD;width:100%;aspect-ratio:1/1;">
                    <div style="background-color:#AFB6BD;width:100%;aspect-ratio:1/1;display:flex; align-items:center;justify-content:center;">
                        <div style="background-color:white;width:80%;aspect-ratio:1/1;display:flex; align-items:center;justify-content:center;">
                            <div v-if="!uploadLoading">
                                <div style="color:#AFB6BD;font-size:18px;display:flex;justify-content:center;">
                                    Please Upload Image
                                </div>
                                <div style="color:#AFB6BD;font-size:15px;display:flex;justify-content:center;">-or-</div>
                                <div style="color:#AFB6BD;font-size:18px;display:flex;justify-content:center;">Click and upload</div>
                            </div>
                            <div v-if="uploadLoading">
                                <div style="color:#AFB6BD;font-size:18px;display:center;justify-content:center;">
                                    Loading Image...
                                </div>
                            </div>
                        </div>
                    </div>
                </label>
                <input
                    id="image-input-file"
                    type="file"
                    multiple
                    accept="image/*"
                    style="display:none;"
                    @change="uploadImage"
                >
            </div>
            <template v-for="(imageData, j) in sortedDataList" :key="j">
               <div  class="pinterest-column-item">
                    <img :src="imageData.url" @click="openModal(imageData)">
                    <div class="item-overlay">
                        <div style="display:flex;align-items: center;height:100%;">
                            <template v-if="!imageData.liked">
                                <div class="liked-button-div not-liked-div" @click="addToWishList(imageData)">
                                    <button class="like-button">👍 {{formatNumber(imageData.likecount)}}</button>
                                </div>
                            </template>
                            <template v-else>
                                <div class="liked-button-div already-liked-div" @click="deleteWishList(imageData)">
                                    <button class="like-button already-liked-button">👍 {{formatNumber(imageData.likecount)}}</button>
                                </div>
                            </template>
                        <div style="
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-left:5px;
                                height:100%;
                            ">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" zoomAndPan="magnify" viewBox="0 0 39 38.999999" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="a06d7ef085"><path d="M 1.484375 7.214844 L 37.484375 7.214844 L 37.484375 31.964844 L 1.484375 31.964844 Z M 1.484375 7.214844 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#a06d7ef085)"><path fill="#ffffff" d="M 19.484375 7.214844 C 11.300781 7.214844 4.316406 12.347656 1.484375 19.589844 C 4.316406 26.835938 11.300781 31.964844 19.484375 31.964844 C 27.664062 31.964844 34.652344 26.835938 37.484375 19.589844 C 34.652344 12.347656 27.671875 7.214844 19.484375 7.214844 Z M 19.484375 27.839844 C 14.96875 27.839844 11.300781 24.144531 11.300781 19.589844 C 11.300781 15.039062 14.96875 11.339844 19.484375 11.339844 C 24 11.339844 27.664062 15.039062 27.664062 19.589844 C 27.664062 24.144531 24 27.839844 19.484375 27.839844 Z M 19.484375 14.640625 C 16.777344 14.640625 14.574219 16.859375 14.574219 19.589844 C 14.574219 22.320312 16.777344 24.539062 19.484375 24.539062 C 22.191406 24.539062 24.394531 22.320312 24.394531 19.589844 C 24.394531 16.859375 22.191406 14.640625 19.484375 14.640625 Z M 19.484375 14.640625 " fill-opacity="1" fill-rule="nonzero"/></g></svg>
                        </div>
                        <div style="display:flex;justify-content: center;align-items: center;color:white;">
                            {{formatNumber(imageData.total_clicks)}}
                        </div>
                        <div style="display: flex;justify-content: center;align-items: center;margin-left:5px;height:100%;">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 39 38.999999" height="16" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="6d2be58645"><path d="M 2.515625 24 L 36.265625 24 L 36.265625 39 L 2.515625 39 Z M 2.515625 24 " clip-rule="nonzero"/></clipPath></defs><path fill="#ffffff" d="M 19.453125 0.21875 C 18.429688 0.21875 17.601562 1.054688 17.601562 2.085938 L 17.601562 22.101562 L 13.253906 17.730469 C 11.507812 16.023438 8.933594 18.601562 10.632812 20.367188 C 10.632812 20.367188 18.144531 27.925781 18.144531 27.925781 C 18.84375 28.65625 20.0625 28.632812 20.765625 27.925781 C 20.765625 27.925781 28.277344 20.367188 28.277344 20.367188 C 29.96875 18.605469 27.410156 16.023438 25.652344 17.730469 C 25.652344 17.730469 21.308594 22.101562 21.308594 22.101562 L 21.308594 2.085938 C 21.308594 1.054688 20.476562 0.21875 19.453125 0.21875 Z M 19.453125 0.21875 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#6d2be58645)"><path fill="#ffffff" d="M 4.433594 24.738281 C 3.410156 24.738281 2.578125 25.574219 2.578125 26.605469 L 2.578125 29.359375 C 2.578125 34.554688 6.78125 38.78125 11.945312 38.78125 L 26.964844 38.78125 C 32.128906 38.78125 36.328125 34.554688 36.328125 29.359375 L 36.328125 26.605469 C 36.328125 25.574219 35.5 24.738281 34.476562 24.738281 C 33.453125 24.738281 32.621094 25.574219 32.621094 26.605469 L 32.621094 29.359375 C 32.621094 32.496094 30.082031 35.050781 26.964844 35.050781 L 11.945312 35.050781 C 8.824219 35.050781 6.289062 32.496094 6.289062 29.359375 L 6.289062 26.605469 C 6.289062 25.574219 5.457031 24.738281 4.433594 24.738281 Z M 4.433594 24.738281 " fill-opacity="1" fill-rule="nonzero"/></g></svg>
                        </div>
                        <div style="display:flex;justify-content: center;align-items: center;color:white;">
                            {{formatNumber(imageData.total_sendto)}}
                        </div>
                        <div style="display: flex;justify-content: center;align-items: center;margin-left:5px;height:100%;">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" zoomAndPan="magnify" viewBox="0 0 39 38.999999" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="ae37d71e45"><path d="M 5.074219 5.542969 L 33.574219 5.542969 L 33.574219 33.292969 L 5.074219 33.292969 Z M 5.074219 5.542969 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#ae37d71e45)"><path fill="#ffffff" d="M 11.796875 33.273438 C 11.722656 33.273438 11.648438 33.253906 11.582031 33.21875 C 11.4375 33.136719 11.347656 32.988281 11.347656 32.820312 L 11.347656 28.015625 L 9.152344 28.015625 C 6.902344 28.015625 5.074219 26.171875 5.074219 23.90625 L 5.074219 9.671875 C 5.074219 7.410156 6.902344 5.566406 9.152344 5.566406 L 29.492188 5.566406 C 31.742188 5.566406 33.570312 7.410156 33.570312 9.671875 L 33.570312 23.90625 C 33.570312 26.171875 31.742188 28.015625 29.492188 28.015625 L 20.226562 28.015625 C 17.496094 29.746094 14.765625 31.472656 12.035156 33.203125 C 11.964844 33.25 11.878906 33.273438 11.796875 33.273438 Z M 11.796875 33.273438 " fill-opacity="1" fill-rule="nonzero"/></g></svg>
                        </div>
                        <div style="display:flex;justify-content: center;align-items: center;color:white;">
                            {{formatNumber(imageData.total_comments)}}
                        </div>
                    </div>
                    <div style="display:flex;align-items:center;">
                        <a class="item-author" @click="moveFeedProfileTab(imageData.nickname)" href="javascript:void(0);">by {{imageData.nickname}}</a>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>
<template v-if="this.showModal">
    <div class="promptModal">
        <div class="prompt-modal-page">
            <div class="prompt-modal-image" @click="closeOutsideModal">
                <img :src="src" alt="Pretty Image" class="prompt-modal-image-tag"/>
            </div>
            <div class="prompt-modal-sidebar">
                <div class="modal-sidebar-header">
                    <div style="display:flex;">
                        <div class="modal-like-wrapper">
                            <template v-if="!currentItem.liked">
                                <div class="big-liked-button-div not-liked-div" @click="addToWishList(currentItem)">
                                    <button class="like-button">👍 {{formatNumber(currentItem.likecount)}}</button>
                                </div>
                            </template>
                            <template v-else>
                                <div class="big-liked-button-div already-liked-div" @click="deleteWishList(currentItem)">
                                    <button class="like-button already-liked-button">👍 {{formatNumber(currentItem.likecount)}}</button>
                                </div>
                            </template>
                        </div>
                        <div class="modal-writer-wrappers">
                            <a href="javascript:void(0);" @click="moveFeedProfileTab(currentItem.nickname)"  class="modal-writer">By {{currentItem.nickname}}</a>
                            <div class="modal-writer-time">{{currentItem.created_at}}</div>
                        </div>
                    </div>
                    <div class="modal-writer-wrapper-exit" @click="close()">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
                            <path d="M19.9037 17.8831L27.752 25.7314V27.7998H25.6837L17.8354 19.9514L9.98703 27.7998H7.9187V25.7314L15.767 17.8831L7.9187 10.0348V7.96643H9.98703L17.8354 15.8148L25.6837 7.96643H27.752V10.0348L19.9037 17.8831Z" fill="white"/>
                            <rect x="1.32679" y="1.37439" width="33.0173" height="33.0173" rx="4.50866" stroke="#0E0E0E" stroke-width="0.982675"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="modal-write-input-wrapper">
                    <div class="modal-write-input-div">
                        <textarea v-model="comment" @input="handleTextareaInput" id="modal-writer-type" class="modal-writer-type" @focus="makeSaveButtonVisible" placeholder="Type your comment"></textarea>
                    </div>
                    <div style="display:flex;justify-content:center;width:100%;">
                        <div v-if="showCommentWrite" class="write-row-button">
                            <button class="btn-write-row btn-cancel" @click="hideSaveButtonVisible">Cancel</button>
                            <button class="btn-write-row btn-save" @click="writeComment()">Comment</button>
                                         </div>
                    </div>
                </div>
                <div style="margin-top:10px;border-bottom: 1px solid #AFB6BD;padding-bottom:17px;">
                    <template v-for="(commentData, j) in comments" :key="j">
                        <div style="margin-left:10px;margin-right:10px;">
                            <div style="display:flex;width:100%;margin-bottom:12px;color:white;">
                                <div style="margin-right:10px;color:white;font-size:17px;font-weight:700;">{{commentData.user.nickname}}</div>
                                <div style="color:white;font-size:12px;font-weight:300;">{{commentData.created_at}}</div>
                            </div>
                            <div style="display:flex;width:100%;color:white;">
                                <div style="color:white;font-size:13px;">{{commentData.text}}</div>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="prompt-send-to">
                    <button class="btn-send-to btn-send-to-text" @click="this.sendToTextToImage()">Send to t2i</button>
                    <button class="btn-send-to btn-send-to-img" @click="this.sendToImageToImage()">Send to i2i</button>
                </div>
                <div style="margin-top:12px;">
                    <div style="margin-left: 10px;margin-right: 10px;">
                        <div style="color:white;margin-bottom:12px;">Generation Data</div>
                        <div style="box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;padding-left:20px;padding-right:20px;padding-top:10px;padding-bottom:10px;border: 1px solid #AFB6BD;border-radius: 5px;color:white;">
                            <template v-for="(value, key) in metadata">
                                <template v-if="/^[A-Z]/.test(key)">
                                    {{key}}:{{value}},
                                </template>
                            </template>
                        </div>
                        <div style="display:flex;justify-content:center;margin-top:20px;">
                            <button @click="copyClipboard" style="text-align:center;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;padding-top:10px;padding-bottom:10px;border: 1px solid #AFB6BD;border-radius: 5px;color:white;width:100%;">
                            <div style="color:white;margin:auto;">Copy Generation Data</div></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>