| <!DOCTYPE html> |
| <html lang="ur" dir="rtl"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>📚 خوش آمدید</title> |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&display=swap" rel="stylesheet"> |
| <style> |
| body { font-family: 'Noto Nastaliq Urdu', serif; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; min-height: 100vh; } |
| .container { max-width: 700px; margin: auto; padding: 2rem; } |
| h1 { text-align: center; font-size: 2.5rem; margin-bottom: 2rem; } |
| ul { list-style: none; padding: 0; } |
| li { background: rgba(255,255,255,0.1); margin: 1rem 0; padding: 1rem; border-radius: 10px; transition: background 0.3s; } |
| li:hover { background: rgba(255,255,255,0.2); cursor: pointer; } |
| a { text-decoration: none; color: white; display: block; } |
| .portfolio { margin-top: 3rem; padding: 1.5rem; background: rgba(255,255,255,0.1); border-radius: 10px; text-align: center; } |
| .portfolio h2 { font-size: 1.8rem; margin-bottom: 1rem; } |
| .portfolio p { font-size: 1rem; margin-bottom: 1rem; } |
| .portfolio a { display: inline-block; padding: 0.75rem 2rem; background: #ffffff33; border-radius: 30px; font-weight: bold; transition: background 0.3s; } |
| .portfolio a:hover { background: #ffffff55; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>📚 خوش آمدید</h1> |
| <ul id="storyList"> |
| |
| </ul> |
|
|
| <div class="portfolio"> |
| <h2>About Developer</h2> |
| <p>Hello! I am <strong>Abdullah Tarar</strong>, a passionate developer specialized in web development, automation,and AI integrations.</p> |
| <a href="portfolio.html" target="_blank">View My Portfolio</a> |
| </div> |
| </div> |
|
|
| <script> |
| async function loadStories() { |
| try { |
| const response = await fetch('Story.json'); |
| const stories = await response.json(); |
| |
| const list = document.getElementById('storyList'); |
| stories.forEach(story => { |
| const li = document.createElement('li'); |
| const link = document.createElement('a'); |
| link.href = `index.html?file=${story.file}`; |
| link.textContent = story.title; |
| li.appendChild(link); |
| list.appendChild(li); |
| }); |
| } catch (error) { |
| console.error('کہانیاں لوڈ کرنے میں مسئلہ ہوا:', error); |
| } |
| } |
| |
| window.addEventListener('load', loadStories); |
| </script> |
| </body> |
| </html> |
|
|
