1
<div class="flex-container flexFlowColumn justifyLeft flexGap10">
2
    <div>
3
        <h2 class="marginBot10 flex-container">
4
            <span data-i18n="Hi,">Hi,</span><span class="userName margin0"></span>
5
            <div data-require-accounts class="userChangeNameButton right_menu_button" title="Change display name.">
6
                <i class="fa-fw fa-solid fa-pencil fa-xs"></i>
7
            </div>
8
        </h2>
9
        <div class="accountsDisabledHint" style="display: none;">
10
            <span data-i18n="To enable multi-account features, restart the SillyTavern server with">To enable multi-account features, restart the SillyTavern server with</span> <code>enableUserAccounts</code> <span data-i18n="set to true in the config.yaml file.">set to true in the config.yaml file.</span>
11
        </div>
12
    </div>
13
    <div>
14
        <h3 data-i18n="Account Info">
15
            Account Info
16
        </h3>
17
        <div class="flex-container flexGap10">
18
            <div class="flex-container flexFlowColumn alignItemsCenter flexNoGap">
19
                <div class="avatar" data-i18n="[title]To change your user avatar, use the buttons below or select a default persona in the Persona Management menu." title="To change your user avatar, use the buttons below or select a default persona in the Persona Management menu.">
20
                    <img src="img/ai4.png" alt="avatar">
21
                </div>
22
                <div class="flex-container alignItemsCenter">
23
                    <div class="userAvatarChange right_menu_button" data-i18n="[title]Set your custom avatar." title="Set your custom avatar.">
24
                        <i class="fa-fw fa-solid fa-image"></i>
25
                    </div>
26
                    <div class="userAvatarRemove right_menu_button" data-i18n="[title]Remove your custom avatar." title="Remove your custom avatar.">
27
                        <i class="fa-fw fa-solid fa-trash"></i>
28
                    </div>
29
                </div>
30
                <form>
31
                    <input type="file" class="avatarUpload" accept="image/*" hidden>
32
                </form>
33
            </div>
34
            <div class="flex1 flex-container flexGap10">
35
                <div class="flex-container flexFlowColumn">
36
                    <div>
37
                        <span data-i18n="Handle:">Handle:</span>
38
                        <span class="userHandle"></span>
39
                    </div>
40
                    <div>
41
                        <span data-i18n="Role:">Role:</span>
42
                        <span class="userRole"></span>
43
                    </div>
44
                </div>
45
                <div class="flex-container flexFlowColumn">
46
                    <div>
47
                        <span data-i18n="Created:">Created:</span>
48
                        <span class="userCreated"></span>
49
                    </div>
50
                    <div>
51
                        <span data-i18n="Password:">Password:</span>
52
                        <i class="hasPassword fa-fw fa-solid fa-lock" data-i18n="[title]This account is password protected." title="This account is password protected."></i>
53
                        <i class="noPassword fa-fw fa-solid fa-lock-open" data-i18n="[title]This account is not password protected." title="This account is not password protected."></i>
54
                    </div>
55
                </div>
56
            </div>
57
        </div>
58
    </div>
59
    <div>
60
        <h3 data-i18n="Account Actions">
61
            Account Actions
62
        </h3>
63
        <div class="flex-container flexFlowColumn flexNoGap">
64
            <div data-require-accounts class="flex-container">
65
                <div class="userChangePasswordButton menu_button menu_button_icon" title="Change your password.">
66
                    <i class="fa-fw fa-solid fa-key"></i>
67
                    <span data-i18n="Change Password">Change Password</span>
68
                </div>
69
            </div>
70
            <div class="flex-container">
71
                <div class="userSettingsSnapshotsButton menu_button menu_button_icon" data-i18n="[title]Manage your settings snapshots." title="Manage your settings snapshots.">
72
                    <i class="fa-fw fa-solid fa-camera"></i>
73
                    <span data-i18n="Settings Snapshots">Settings Snapshots</span>
74
                </div>
75
                <div class="userBackupButton menu_button menu_button_icon" data-i18n="[title]Download a complete backup of your user data." title="Download a complete backup of your user data.">
76
                    <i class="fa-fw fa-solid fa-download"></i>
77
                    <span data-i18n="Download Backup">Download Backup</span>
78
                </div>
79
            </div>
80
        </div>
81
    </div>
82
    <div>
83
        <h3 data-i18n="Danger Zone">
84
            Danger Zone
85
        </h3>
86
        <div class="flex-container">
87
            <div class="userResetSettingsButton menu_button menu_button_icon" data-i18n="[title]Reset your settings to factory defaults." title="Reset your settings to factory defaults.">
88
                <i class="fa-fw fa-solid fa-cog warning"></i>
89
                <span data-i18n="Reset Settings">Reset Settings</span>
90
            </div>
91
            <div class="userResetAllButton menu_button menu_button_icon" data-i18n="[title]Wipe all user data and reset your account to factory settings." title="Wipe all user data and reset your account to factory settings.">
92
                <i class="fa-fw fa-solid fa-skull warning"></i>
93
                <span data-i18n="Reset Everything">Reset Everything</span>
94
            </div>
95
        </div>
96
    </div>
97
</div>