diff options
Diffstat (limited to 'src/lib/Tools/Wrapped.svelte')
| -rw-r--r-- | src/lib/Tools/Wrapped.svelte | 201 |
1 files changed, 98 insertions, 103 deletions
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte index 2c5009d7..ea2d7536 100644 --- a/src/lib/Tools/Wrapped.svelte +++ b/src/lib/Tools/Wrapped.svelte @@ -554,19 +554,13 @@ </div> </div> <div class="list"> - <p> - <button on:click={screenshot} data-umami-event="Generate Wrapped"> - Generate image - </button> - </p> - <div class:card={generated}> <div id="wrapped-final" /> {#if generated} <p /> - <blockquote> + <blockquote style="margin: 0 0 0 1.5rem;"> Click on the image to download, or right click and select "Save Image As...". </blockquote> {/if} @@ -576,102 +570,103 @@ <p /> {/if} - <details open> - <summary>Options</summary> - <div id="options"> - <details class="no-shadow" open> - <summary>Display</summary> - - <input type="checkbox" bind:checked={watermark} /> Show watermark<br /> - <input type="checkbox" bind:checked={transparency} /> Enable background transparency<br - /> - <input type="checkbox" bind:checked={lightMode} /> - Enable light mode<br /> - <input type="checkbox" bind:checked={topGenresTags} /> - Show top genres and tags<br /> - <input - type="checkbox" - bind:checked={disableActivityHistory} - disabled={selectedYear !== currentYear} - /> - Hide activity history<br /> - <input type="checkbox" bind:checked={highestRatedMediaPercentage} /> Show highest - rated media percentages<br /> - <input type="checkbox" bind:checked={highestRatedGenreTagPercentage} /> Show highest - rated genre and tag percentages<br /> - <select bind:value={activityHistoryPosition}> - <option value="ORIGINAL">Original</option> - <option value="TOP">Top</option> - <option value="BELOW_TOP">Below Top</option> - </select> - Activity history position<br /> - <select bind:value={highestRatedCount}> - {#each [3, 4, 5, 6, 7, 8, 9, 10] as count} - <option value={count}>{count}</option> - {/each} - </select> - Highest rated media count<br /> - <select bind:value={genreTagCount}> - {#each [3, 4, 5, 6, 7, 8, 9, 10] as count} - <option value={count}>{count}</option> - {/each} - </select> - Highest genre and tag count<br /> - <button on:click={updateWidth}>Find best fit</button> - <button on:click={() => (width -= 25)}>-25px</button> - <button on:click={() => (width += 25)}>+25px</button> - Width adjustment<br /> - </details> - - <details class="no-shadow" open> - <summary>Calculation</summary> - - <input type="checkbox" bind:checked={useFullActivityHistory} /> - Enable full-year activity<button class="smaller-button" on:click={pruneFullYear} - >Refresh data</button - > - <br /> - <select bind:value={selectedYear}> - {#each Array.from({ length: currentYear - 2012 }) as _, i} - <option value={currentYear - i}> - {currentYear - i} - </option> - {/each} - </select> - Calculate for year<br /> - <select bind:value={mediaSort}> - <option value={SortOptions.SCORE}>Score</option> - <option value={SortOptions.MINUTES_WATCHED}>Minutes Watched/Read</option> - </select> - Anime and manga sort<br /> - <select bind:value={genreTagsSort}> - <option value={SortOptions.SCORE}>Score</option> - <option value={SortOptions.MINUTES_WATCHED}>Minutes Watched/Read</option> - <option value={SortOptions.COUNT}>Count</option> - </select> - Genre and tag sort<br /> - <input type="checkbox" bind:checked={includeMusic} /> Include music<br /> - <input type="checkbox" bind:checked={includeRepeats} /> Include rewatches & rereads<br - /> - <input type="checkbox" bind:checked={includeSpecials} /> Include specials<br /> - <input type="checkbox" bind:checked={includeOVAs} /> Include OVAs<br /> - <input type="checkbox" bind:checked={includeMovies} /> Include movies<br /> - <input - type="text" - bind:value={excludedKeywordsInput} - on:keypress={(e) => { - e.key === 'Enter' && submitExcludedKeywords(); - }} - /> - Excluded keywords - <button on:click={submitExcludedKeywords} title="Or click your Enter key" - >Submit</button - > - <br /> - <SettingHint>Comma separated list (e.g., "My Hero, Kaguya")</SettingHint> - </details> - </div> - </details> + <div id="options" class="card"> + <button on:click={screenshot} data-umami-event="Generate Wrapped"> + Generate image + </button> + + <details class="no-shadow" open> + <summary>Display</summary> + + <input type="checkbox" bind:checked={watermark} /> Show watermark<br /> + <input type="checkbox" bind:checked={transparency} /> Enable background transparency<br + /> + <input type="checkbox" bind:checked={lightMode} /> + Enable light mode<br /> + <input type="checkbox" bind:checked={topGenresTags} /> + Show top genres and tags<br /> + <input + type="checkbox" + bind:checked={disableActivityHistory} + disabled={selectedYear !== currentYear} + /> + Hide activity history<br /> + <input type="checkbox" bind:checked={highestRatedMediaPercentage} /> Show highest + rated media percentages<br /> + <input type="checkbox" bind:checked={highestRatedGenreTagPercentage} /> Show highest + rated genre and tag percentages<br /> + <select bind:value={activityHistoryPosition}> + <option value="ORIGINAL">Original</option> + <option value="TOP">Top</option> + <option value="BELOW_TOP">Below Top</option> + </select> + Activity history position<br /> + <select bind:value={highestRatedCount}> + {#each [3, 4, 5, 6, 7, 8, 9, 10] as count} + <option value={count}>{count}</option> + {/each} + </select> + Highest rated media count<br /> + <select bind:value={genreTagCount}> + {#each [3, 4, 5, 6, 7, 8, 9, 10] as count} + <option value={count}>{count}</option> + {/each} + </select> + Highest genre and tag count<br /> + <button on:click={updateWidth}>Find best fit</button> + <button on:click={() => (width -= 25)}>-25px</button> + <button on:click={() => (width += 25)}>+25px</button> + Width adjustment<br /> + </details> + + <details class="no-shadow" open> + <summary>Calculation</summary> + + <input type="checkbox" bind:checked={useFullActivityHistory} /> + Enable full-year activity<button class="smaller-button" on:click={pruneFullYear} + >Refresh data</button + > + <br /> + <select bind:value={selectedYear}> + {#each Array.from({ length: currentYear - 2012 }) as _, i} + <option value={currentYear - i}> + {currentYear - i} + </option> + {/each} + </select> + Calculate for year<br /> + <select bind:value={mediaSort}> + <option value={SortOptions.SCORE}>Score</option> + <option value={SortOptions.MINUTES_WATCHED}>Minutes Watched/Read</option> + </select> + Anime and manga sort<br /> + <select bind:value={genreTagsSort}> + <option value={SortOptions.SCORE}>Score</option> + <option value={SortOptions.MINUTES_WATCHED}>Minutes Watched/Read</option> + <option value={SortOptions.COUNT}>Count</option> + </select> + Genre and tag sort<br /> + <input type="checkbox" bind:checked={includeMusic} /> Include music<br /> + <input type="checkbox" bind:checked={includeRepeats} /> Include rewatches & rereads<br + /> + <input type="checkbox" bind:checked={includeSpecials} /> Include specials<br /> + <input type="checkbox" bind:checked={includeOVAs} /> Include OVAs<br /> + <input type="checkbox" bind:checked={includeMovies} /> Include movies<br /> + <input + type="text" + bind:value={excludedKeywordsInput} + on:keypress={(e) => { + e.key === 'Enter' && submitExcludedKeywords(); + }} + /> + Excluded keywords + <button on:click={submitExcludedKeywords} title="Or click your Enter key" + >Submit</button + > + <br /> + <SettingHint>Comma separated list (e.g., "My Hero, Kaguya")</SettingHint> + </details> + </div> </div> </div> {:catch} |