File size: 25,744 Bytes
34097e9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 |
<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> |