https://lechatbot.com/uxai

1<!DOCTYPE html>
2<html lang="tr">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>UX&AI Blog | UX and AI Design Insights</title>
8    <meta name="description" content="UX ve Yapay Zeka tasarımı üzerine güncel yazılarımızı keşfedin.">
9    <meta name="keywords" content="UX, AI, Design, Blog, Yapay Zeka, User Experience, AI Design">
10    <meta name="author" content="UX&AI">
11
12    <!-- Open Graph / Facebook -->
13    <meta property="og:type" content="website">
14    <meta property="og:url" content="https://lechatbot.com/uxai.html">
15    <meta property="og:title" content="UX&AI Blog | UX and AI Design Insights">
16    <meta property="og:description" content="UX ve Yapay Zeka tasarımı üzerine güncel yazılarımızı keşfedin.">
17    <meta property="og:image" content="https://lechatbot.com/uxai_logo.png">
18    <meta property="og:site_name" content="UX&AI">
19
20    <link rel="canonical" href="https://lechatbot.com/uxai.html">
21    <link rel="icon" type="image/png" href="/uxai_logo.png">
22    <link rel="preconnect" href="https://fonts.googleapis.com">
23    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
24    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
25        rel="stylesheet">
26    

26<script src="https://unpkg.com/lucide@latest"></script>

26
27    <style>
28        :root {
29            --blog-teal: #F9A502;
30            /* Orange/Yellow from the logo */
31            --blog-bg: #f8f9fa;
32            --sidebar-width: 380px;
33            --header-height: 120px;
34        }
35
36        body {
37            background-color: var(--white);
38            margin: 0;
39            padding: 0;
40            height: 100vh;
41            display: flex;
42            flex-direction: column;
43            overflow: hidden;
44            font-family: var(--font-blog);
45        }
46
47        .blog-header {
48            height: var(--header-height);
49            background: var(--white);
50            display: flex;
51            align-items: center;
52            justify-content: space-between;
53            /* Ensure logo and menu button are at opposite ends */
54            padding: 0 2rem;
55            border-bottom: 2px solid var(--blog-teal);
56            /* Visible brand border */
57            z-index: 1100;
58        }
59
60        .header-logo {
61            height: 100px;
62            cursor: pointer;
63            transition: var(--transition);
64        }
65
66        .logo-container {
67            display: flex;
68            align-items: center;
69            gap: 0.5rem;
70            text-decoration: none;
71        }
72
73        .logo-text {
74            font-size: 2.2rem;
75            font-weight: 700;
76            color: #F9A502;
77            font-family: 'Quicksand', sans-serif;
78            letter-spacing: -1px;
79        }
80
81        .back-btn {
82            display: flex;
83            align-items: center;
84            gap: 8px;
85            text-decoration: none;
86            color: var(--dark);
87            font-weight: 600;
88            transition: var(--transition);
89        }
90
91        .back-btn:hover {
92            color: var(--blog-teal);
93        }
94
95        /* Layout Wrapper */
96        .blog-wrapper {
97            display: flex;
98            flex: 1;
99        }
100
101        /* Scroller */
102        .blog-main-scroller {
103            flex: 1;
104            overflow-y: auto;
105            display: flex;
106            flex-direction: column;
107        }
108
109        /* Sidebar */
110        .blog-sidebar {
111            width: var(--sidebar-width);
112            background: var(--blog-bg);
113            border-right: 1px solid #eee;
114            display: flex;
115            flex-direction: column;
116            position: sticky;
117            top: 0;
118            height: calc(100vh - var(--header-height));
119            z-index: 100;
120        }
121
122        .sidebar-filter {
123            padding: 1rem;
124            border-bottom: 1px solid #eee;
125        }
126
127        .filter-input {
128            width: 100%;
129            padding: 0.6rem 0.8rem;
130            border: 1px solid #ddd;
131            border-radius: 10px;
132            font-family: inherit;
133            font-size: 0.85rem;
134            outline: none;
135            transition: border-color 0.3s;
136        }
137
138        .filter-input:focus {
139            border-color: var(--blog-teal);
140        }
141
142        .tags-cloud {
143            padding: 0.8rem 1rem;
144            display: flex;
145            flex-wrap: wrap;
146            gap: 6px;
147            border-bottom: 1px solid #eee;
148        }
149
150        .tag-filter {
151            background: var(--white);
152            color: #666;
153            padding: 4px 10px;
154            border-radius: 16px;
155            font-size: 0.75rem;
156            font-weight: 600;
157            cursor: pointer;
158            transition: all 0.2s;
159            border: 1px solid #eee;
160        }
161
162        .tag-filter:hover {
163            border-color: var(--blog-teal);
164            color: var(--blog-teal);
165        }
166
167        .tag-filter.active {
168            background: var(--blog-teal);
169            color: white;
170            border-color: var(--blog-teal);
171        }
172
173        .posts-list {
174            flex: 1;
175            overflow-y: auto;
176            padding: 0;
177            /* Flush to boundaries */
178            display: flex;
179            flex-direction: column;
180        }
181
182        .post-item {
183            padding: 1.5rem 1.5rem;
184            cursor: pointer;
185            transition: all 0.2s;
186            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
187            /* Subtle separator */
188            display: flex;
189            flex-direction: column;
190            gap: 0.5rem;
191            color: white;
192            /* Default text color for improved readability on colored backgrounds */
193        }
194
195        .post-item:hover {
196            opacity: 0.9;
197            transform: none;
198            box-shadow: none;
199        }
200
201        .post-item.active {
202            border-left: 8px solid white;
203            /* Distinct active state indicator */
204            padding-left: 1rem;
205        }
206
207        .post-item-category {
208            display: none;
209            /* Hide category as requested */
210        }
211
212        .post-item-title {
213            font-size: 1.1rem;
214            font-weight: 700;
215            line-height: 1.4;
216            color: white;
217        }
218
219        .post-item-date {
220            font-size: 0.85rem;
221            color: rgba(255, 255, 255, 0.8);
222        }
223
224        /* Content Area */
225        .blog-content {
226            flex: 1;
227            background: var(--white);
228            padding: 4rem 2rem;
229        }
230
231        .content-inner {
232            max-width: 800px;
233            margin: 0 auto;
234        }
235
236        .content-hero-image {
237            width: 100%;
238            aspect-ratio: 16 / 9;
239            border-radius: 20px;
240            background-size: cover;
241            background-position: center;
242            margin-bottom: 3rem;
243            display: none;
244        }
245
246        .content-title {
247            font-size: 2.8rem;
248            line-height: 1.2;
249            color: var(--post-accent-color, var(--blog-teal));
250            margin-bottom: 1.5rem;
251            font-weight: 700;
252        }
253
254        /* New Feature Specific Styles */
255        .tldr-box {
256            background: #fff9f0;
257            /* Default, can be refined */
258            border-left: 5px solid var(--post-accent-color, var(--blog-teal));
259            padding: 2rem;
260            border-radius: 0 15px 15px 0;
261            margin: 2rem 0;
262            font-size: 1.1rem;
263            line-height: 1.6;
264        }
265
266        .tldr-box h3 {
267            margin-top: 0;
268            color: var(--post-accent-color, var(--blog-teal));
269            font-size: 1.2rem;
270            text-transform: uppercase;
271            letter-spacing: 1px;
272            margin-bottom: 0.8rem;
273            font-family: var(--font-blog);
274        }
275
276        .spotify-player {
277            margin: 3rem 0;
278            border-radius: 12px;
279            overflow: hidden;
280            background: #000;
281        }
282
283        .post-tags {
284            display: flex;
285            flex-wrap: wrap;
286            gap: 8px;
287            margin-top: 1rem;
288        }
289
290        .tag-badge {
291            background: #eee;
292            color: #666;
293            padding: 4px 12px;
294            border-radius: 20px;
295            font-size: 0.75rem;
296            font-weight: 600;
297        }
298
299        .pin-icon {
300            color: var(--blog-teal);
301            font-size: 0.9rem;
302            margin-right: 4px;
303        }
304
305        .content-meta {
306            color: var(--primary);
307            font-weight: 600;
308            margin-bottom: 3rem;
309            font-size: 1rem;
310        }
311
312        .content-body {
313            font-size: 1.15rem;
314            line-height: 1.8;
315            color: #333;
316        }
317
318        .content-body img {
319            max-width: 100%;
320            border-radius: 12px;
321            margin: 2rem 0;
322        }
323
324        .content-placeholder {
325            display: flex;
326            flex-direction: column;
327            align-items: center;
328            justify-content: center;
329            height: 100%;
330            color: #ccc;
331            text-align: center;
332        }
333
334        .content-placeholder i {
335            font-size: 4rem;
336            margin-bottom: 1rem;
337        }
338
339        /* Mobile Responsive Improvements */
340        #menu-toggle {
341            display: none;
342            background: none;
343            border: none;
344            color: var(--blog-teal);
345            cursor: pointer;
346            padding: 10px;
347            z-index: 1000;
348        }
349
350        @media (max-width: 992px) {
351            #menu-toggle {
352                display: block;
353            }
354
355            .blog-sidebar {
356                position: fixed;
357                top: 0;
358                left: 0;
359                width: 100vw;
360                height: 100vh;
361                z-index: 1000;
362                /* Just below header */
363                transform: translateX(-100%);
364                transition: transform 0.3s ease;
365                box-shadow: none;
366                background: white;
367                display: flex;
368                flex-direction: column;
369                padding-top: var(--header-height);
370            }
371
372            .blog-sidebar.active {
373                transform: translateX(0);
374            }
375
376            .sidebar-filter {
377                padding: 1rem;
378            }
379
380            .blog-content {
381                width: 100%;
382                height: calc(100vh - var(--header-height));
383                padding: 2rem 1rem;
384            }
385
386            .content-title {
387                font-size: 2rem;
388            }
389        }
390
391        /* Footer Styles */
392        .blog-footer {
393            background-color: #F5A202;
394            color: #002E2C;
395            padding: 3rem 4rem;
396            display: flex;
397            justify-content: space-between;
398            align-items: center;
399            gap: 4rem;
400        }
401
402        .footer-logo {
403            height: 120px;
404            transition: all 0.3s ease;
405            display: block;
406        }
407
408        .footer-logo:hover {
409            transform: scale(1.05);
410        }
411
412        .footer-text {
413            flex: 1;
414            max-width: 700px;
415            text-align: left;
416            font-size: 0.85rem;
417            line-height: 1.6;
418            font-weight: 600;
419        }
420
421        .footer-text p {
422            margin: 0;
423        }
424
425        .footer-link {
426            color: #002E2C;
427            text-decoration: underline;
428            font-weight: 700;
429        }
430
431        @media (max-width: 768px) {
432            .blog-footer {
433                flex-direction: column-reverse;
434                text-align: center;
435                padding: 2rem;
436                gap: 2rem;
437            }
438
439            .footer-text {
440                text-align: center;
441            }
442
443            .footer-logo {
444                height: 80px;
445            }
446        }
447    </style>
448  

448<script type="module" crossorigin src="/assets/uxai-CKFMEUlP.js"></script>

448
449  <link rel="modulepreload" crossorigin href="/assets/firebase-BmbSka2m.js">
450  <link rel="modulepreload" crossorigin href="/assets/main-CLju4K6_.js">
451  <link rel="stylesheet" crossorigin href="/assets/firebase-BhM-JAE9.css">
452</head>
453
454<body>
455    <header class="blog-header">
456        <a href="/uxai.html" class="logo-container">
457            <img src="/uxai_logo.png" alt="UX&AI Logo" class="header-logo">
458            <span class="logo-text">UX&AI</span>
459        </a>
460        <button id="menu-toggle" aria-label="Menüyü Aç">
461            <i data-lucide="menu"></i>
462        </button>
463    </header>
464
465    <div class="blog-main-scroller">
466        <div class="blog-wrapper">
467            <aside class="blog-sidebar">
468                <div class="sidebar-filter">
469                    <input type="text" id="filter-input" class="filter-input" placeholder="Yazılarda ara...">
470                </div>
471                <div id="sidebar-tags" class="tags-cloud">
472                    <!-- Tags injected here -->
473                </div>
474                <div id="posts-list" class="posts-list">
475                    <!-- Posts injected here -->
476                </div>
477            </aside>
478
479            <main id="blog-content" class="blog-content">
480                <div id="content-placeholder" class="content-placeholder">
481                    <i data-lucide="brain"></i>
482                    <p>Okumak için bir yazı seçin</p>
483                </div>
484                <div id="content-viewer" class="content-inner" style="display: none;">
485                    <div id="content-image" class="content-hero-image"></div>
486                    <h1 id="content-title" class="content-title"></h1>
487                    <div id="content-meta" class="content-meta"></div>
488                    <div id="content-body" class="content-body"></div>
489                </div>
490            </main>
491        </div>
492
493        <footer class="blog-footer">
494            <div class="footer-text">
495                <p>
496                    UX&AI kullanıcı deneyimi, yapay zekâ, psikoloji, dilbilim gibi farklı disiplinlerdeki akademik
497                    araştırmaları derleyen bir platformdur.
498                    Tüm metin, ses ve görsel içerikler ChatGPT, Gemini ve NotebookLM araçlarıyla hazırlanmıştır.
499                    Soru ve talepleriniz için <a href="mailto:[email protected]"
500                        class="footer-link">[email protected]</a> adresini ziyaret edebilirsiniz.
501                </p>
502            </div>
503            <a href="https://lechatbot.com" target="_blank" rel="noopener">
504                <img src="/logo.png" alt="Le Chatbot" class="footer-logo">
505            </a>
506        </footer>
507    </div>
508
509</body>
510
511</html>