FHome_AI/index.html at main · SlizR/FHome_AI · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FHome AI® - Education AI®</title>
    <link rel="icon" href="favicon.ico">
    <meta name="description" content="FHome AI® is an educational AI created by Sliz for personal and learning use, offering versatile features to assist students, teachers, and knowledge seekers.">
    <meta name="keywords" content="AI, education, training, schoolchildren, students, FHome, Sliz, artificial intelligence">
    <meta name="author" content="Sliz®">
    <meta name="robots" content="index, follow">
    <link rel="icon" type="image/ico" href="https://fhai.pp.ua/favicon.ico">
    <link rel="apple-touch-icon" href="https://fhai.pp.ua/icon.png">
    <meta property="og:title" content="FHome AI® - Education AI®">
    <meta property="og:description" content="FHome AI® – AI created by Sliz for training and personal use. Features at your discretion.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://fhai.pp.ua/">
    <meta property="og:image" content="https://fhai.pp.ua/favicon.ico">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="FHome AI® - Education AI®">
    <meta name="twitter:description" content="FHome AI® – AI created by Sliz for training and personal use. Features at your discretion.">
    <meta name="twitter:image" content="https://fhai.pp.ua/icon.png">
    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "FHome AI®",
  "url": "https://fhai.pp.ua/",
  "logo": "https://fhai.pp.ua/favicon.ico",
  "description": "FHome AI® is an educational AI created by Sliz for personal and learning use, offering versatile features to assist students, teachers, and knowledge seekers."
}
    </script>
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#2ea67d">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <img src="icon.png" alt="FHome AI®" class="logo">
                <span class="brand">FHome AI®</span>
            </div>
            <button class="toggle-sidebar-btn" style="position:absolute; top:10px; right:10px;" onclick="toggleSidebar()">×</button>

            <button class="new-chat-btn" onclick="createNewChat()">+ New Chat</button>
            <div class="chats-list" id="chatsList"></div>

            <button class="settings-btn" onclick="openSettings()">
                ⚙️ Setting
            </button>
        </div>

        <div class="main-content">
            <div class="chat-header" id="chatHeader">
                <button class="toggle-sidebar-btn" onclick="openChatModal()">☰</button>

                <span class="chat-title-mobile" id="chatTitleMobile">New Chat</span>

                <div class="chat-header-right">
              <div class="daily-counter" id="dailyCounter" title="Messages left">50</div>
              <button class="mini-new-chat-btn" onclick="createNewChat()" title="">+</button>
              <button class="header-settings-btn" onclick="openSettings()">⚙️</button>
            </div>
            </div>

            <div class="messages-container" id="messagesContainer">
                <div class="empty-state">
                    <div class="empty-state-icon">⌘</div>
                    <div class="empty-state-title">Welcome to FHome AI®</div>
                    <div class="empty-state-text">Your intelligent assistant powered by advanced AI. Ask me anything and I'll help you find answers!</div>
                </div>
            </div>

            <div class="input-area">
                <div class="input-wrapper">
                    <input type="text" class="message-input" id="messageInput" placeholder="Ask FHome AI® anything..." onkeypress="handleKeyPress(event)">
                    <button class="send-btn" id="sendBtn" onclick="sendMessage()">➤</button>
                </div>
<div class="mode-selector">
    <button class="mode-btn" data-mode="mind" title="Untra-informational slow responses">Mind</button>
    <button class="mode-btn" data-mode="dev" title="Developer mode (only coding)">Dev</button>
    <button class="mode-btn" data-mode="teacher" title="Teacher help with lessons">Teacher</button>
    <button class="mode-btn" data-mode="short" title="Short, Ultra-fast answers">Short</button>
</div>
            </div>
        </div>
    </div>

    <div id="tooltip" class="tooltip"></div>

    <div id="chatModal" class="modal">
    <div class="modal-content chat-modal-content">
        <div class="modal-header">
            Chats
            <button class="close-btn" onclick="closeChatModal()">✕</button>
        </div>

        <button class="new-chat-btn" onclick="createNewChat()">+ New Chat</button>

        <div id="chatModalList" class="chats-list">
            </div>
    </div>
</div>

    <div class="modal" id="settingsModal">
        <div class="modal-content">
            <div class="modal-header">
                <span>Settings</span>
                <button class="close-btn" onclick="closeSettings()">×</button>
            </div>
            <div class="setting-group">
                <label class="setting-label">Your Name</label>
                <input type="text" class="setting-input" id="userNameInput" placeholder="Enter your name">
            </div>
            <div class="setting-group avatar-setting-group">
    <label class="setting-label">Your Avatar URL</label>
    <div style="display:flex; align-items:center; gap:10px; width:100%;">
        <input type="text" class="setting-input" id="userAvatarInput" placeholder="Enter image URL">
        <img id="avatarPreview" class="avatar-preview" style="display: none;">
    </div>
</div>
            <div class="setting-group">
                <label class="setting-label">Message Border Radius: <span id="radiusValue">18</span>px</label>
                <div class="slider-container">
                    <input type="range" min="0" max="30" value="18" class="slider" id="radiusSlider">
                </div>
                </div>

                <div class="setting-group">
                <label class="setting-label">Your Age</label>
                <input type="number" class="setting-input" id="userAgeInput" placeholder="Enter your age">
                </div>

                <div class="setting-group">
                <label class="setting-label">Your Hobbies</label>
                <input type="text" class="setting-input" id="userHobbyInput" placeholder="Your hobbies">
                </div>

                <div class="setting-group">
                <label class="setting-label">About You</label>
                <textarea class="setting-input" id="userBioInput" placeholder="Tell something about yourself"></textarea>
                </div>

                <div class="setting-group">
                <label class="setting-label">Your wishes for AI</label>
                <textarea class="setting-input" id="userPreferencesInput" placeholder="For example: always talk like a generation beta"></textarea>
                </div>

<div class="settings-footer">
    <span>FHome AI® • v939.stable • © 2025 Sliz®</span>
    <a href="https://fhai.pp.ua/help/" class="help-center-btn" title="Help Center / FAQ">?</a>
</div>
            </div>
        </div>
    </div>

<script src="script.js"></script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XRWRWPG4M0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XRWRWPG4M0');
</script>
<!-- start webpushr code -->
<script>(function(w,d, s, id) {if(typeof(w.webpushr)!=='undefined') return;w.webpushr=w.webpushr||function(){(w.webpushr.q=w.webpushr.q||[]).push(arguments)};var js, fjs = d.getElementsByTagName(s)[0];js = d.createElement(s); js.id = id;js.async=1;js.src = "https://cdn.webpushr.com/app.min.js";fjs.parentNode.appendChild(js);}(window,document, 'script', 'webpushr-jssdk'));webpushr('setup',{'key':'BAxqqqinvcIUKNuY9BF61D_1LFcvVbbIKDUt4iBr1m7VxfhkpwdrBDiMQoXUWdtxQ19Ju8ZjsrYIvXg7IKLOcLA' });</script>
<!-- end webpushr code -->
</body>
</html>