File size: 11,759 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 |
<div>
<div style="display: flex;justify-content: space-between;">
<div class="potd">
👑 POTD 👑
</div>
<div>
<label class="toggle-btn">
<span class="toggle-letter">Filter NSFW</span>
<input type="checkbox" v-model="filterNsfw" @change="fetchBests">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="product-slider" v-if="bestFeeds.length > 0">
<div class="pinterest-gallery">
<template v-for="(imageData, j) in bestFeeds" :key="j">
<div class="pinterest-item">
<button @click="openModal(imageData)">
<img :src="imageData.url">
</button>
<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="12" zoomAndPan="magnify" viewBox="0 0 39 38.999999" height="12" 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 href="javascript:void(0);" target="_self" @click="(e)=>moveFeedProfileTab(e,imageData.nickname)" class="item-author">by {{imageData.nickname}}</a>
</div>
</div>
</div>
</template>
</div>
</div>
<div :class="{promptModal: showModal}" v-if="showModal">
<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 class="modal-writer" href="javascript:void(0);" target="_self" @click="(e)=>moveFeedProfileTab(e,currentItem.nickname)">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>
</div> |