Webpage contest: Gemini2.5 Qwen3 KimiK2 Claude4

Prompt

Create a webpage copying hackernews, it should handle routing that mimics clicking a HN thread with many comments in it. It should handle this internally rather than actually redirecting to another URL.

A system prompt was added to support web rendering

Google

Gemini 2.5 Pro

Of course! Here is a self-contained webpage that mimics the look and functionality of Hacker News, including client-side routing to view a comment thread without reloading the page.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hacker News Clone</title>
    <style>
        body {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 10pt;
            color: #333;
            background-color: #f6f6ef;
            margin: 0;
            padding: 8px;
        }

        #app {
            max-width: 900px;
            margin: 0 auto;
            background-color: #f6f6ef;
        }

        .header {
            background-color: #ff6600;
            display: flex;
            align-items: center;
            padding: 4px;
        }

        .header .logo {
            border: 1px solid white;
            margin-right: 8px;
            font-weight: bold;
            color: black;
            padding: 1px 6px;
        }

        .header .site-title {
            font-weight: bold;
            color: black;
            cursor: pointer;
        }
        
        .header .nav-links {
            margin-left: 10px;
            color: black;
        }

        .header .nav-links a {
            color: black;
            text-decoration: none;
            margin: 0 5px;
        }

        .content {
            padding: 10px 0;
        }

        .story-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .story-list li {
            margin-bottom: 8px;
            display: flex;
            align-items: flex-start;
        }

        .story-list .rank {
            color: #828282;
            width: 30px;
            text-align: right;
            margin-right: 5px;
        }
        
        .story-list .vote {
            width: 20px;
            text-align: center;
            padding-top: 3px;
        }
        
        .story-list .vote a {
            color: #828282;
            text-decoration: none;
        }

        .story {
            display: flex;
            flex-direction: column;
        }
        
        .story .title a {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
        
        .story .title a:visited {
            color: #828282;
        }

        .story .domain {
            color: #828282;
            font-size: 8pt;
            margin-left: 5px;
        }

        .story .subtext {
            color: #828282;
            font-size: 7pt;
            margin-top: 2px;
        }
        
        .story .subtext a {
            color: #828282;
            text-decoration: none;
            cursor: pointer;
        }
        
        .story .subtext a:hover {
            text-decoration: underline;
        }
        
        /* Comments View */
        .comments-view .story-header {
            margin-bottom: 15px;
        }
        
        .comment-form {
            margin: 20px 0;
        }
        
        .comment-form textarea {
            width: 100%;
            max-width: 500px;
            height: 100px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
        }
        
        .comment-form button {
            background-color: #ff6600;
            border: none;
            color: white;
            padding: 8px 12px;
            cursor: pointer;
        }
        
        .comment-tree {
            margin-top: 10px;
        }
        
        .comment {
            margin-bottom: 15px;
        }
        
        .comment-meta {
            color: #828282;
            font-size: 8pt;
            margin-bottom: 5px;
        }

        .comment-text {
            line-height: 1.4;
            overflow-wrap: break-word;
        }
        
        .comment-children {
            margin-left: 25px;
            border-left: 1px solid #e7e7e7;
            padding-left: 15px;
        }
    </style>
</head>
<body>

    <div id="app">
        <!-- App content will be rendered here by JavaScript -->
    </div>

    <script>
        // --- DATA ---
        // In a real app, this would come from an API.
        const stories = [
            { id: 1, title: 'I tried to ask a question on Stack Overflow but I am not smart enough', url: 'blog.ploeh.dk', points: 1210, author: 'jgrahamc', timeAgo: '11 hours ago', commentCount: 503 },
            { id: 2, title: 'Show HN: A self-hosted, offline-first, open-source note-taking app', url: 'github.com/notes-app', points: 987, author: 'notedev', timeAgo: '8 hours ago', commentCount: 231 },
            { id: 3, title: 'The forgotten history of how automakers invented the crime of "jaywalking"', url: 'vox.com', points: 543, author: 'chris-sm', timeAgo: '15 hours ago', commentCount: 312 },
            { id: 4, title: 'What I learned from interviewing 500+ software engineers', url: 'interviewing.io', points: 721, author: 'aline', timeAgo: '9 hours ago', commentCount: 450 },
            { id: 5, title: 'Why is it so hard to see the Milky Way?', url: 'theatlantic.com', points: 230, author: 'danielle', timeAgo: '2 days ago', commentCount: 88 }
        ];

        const commentsData = {
            // Comments for Story ID 1
            1: [
                { id: 101, author: 'peter', timeAgo: '10 hours ago', text: "This resonates so much. The platform has become hostile to genuine curiosity. The drive to close questions as duplicates, even when the context is subtly different, is overwhelming.", children: [
                    { id: 102, author: 'sarah', timeAgo: '9 hours ago', text: "I agree. I once had a question closed that linked to a 'duplicate' from 8 years prior, using a completely deprecated version of the library I was asking about. It's not helpful.", children: [
                        {id: 105, author: 'jgrahamc', timeAgo: '8 hours ago', text: "Exactly this. The 'timeless' answer ideal doesn't work when the technology landscape changes every 18 months. Context is everything.", children: []}
                    ]},
                    { id: 103, author: 'mike', timeAgo: '7 hours ago', text: "The problem is reputation farming. People get points for flagging and closing, so there's an incentive to be a 'hall monitor' instead of being helpful.", children: []}
                ]},
                { id: 104, author: 'dev_guy', timeAgo: '10 hours ago', text: "While I see your point, there's also the problem of extreme low-effort questions. 'My code doesn't work, pls fix' with no context. There has to be a balance.", children: [
                    { id: 106, author: 'debugger', timeAgo: '6 hours ago', text: "True, but the current system feels like it punishes genuine newcomers who just don't know the 'rules' yet. It's an onboarding problem.", children: []}
                ]}
            ],
            // Empty comments for other stories for this example
            2: [], 3: [], 4: [], 5: []
        };
        
        // --- STATE ---
        let currentView = 'list'; // 'list' or 'comments'
        let currentStoryId = null;

        // --- APP CONTAINER ---
        const app = document.getElementById('app');

        // --- RENDER FUNCTIONS ---
        
        function renderHeader() {
            return `
                <div class="header">
                    <span class="logo">Y</span>
                    <span class="site-title" onclick="showStoryList()">Hacker News Clone</span>
                    <div class="nav-links">
                        <a href="#">new</a> | <a href="#">past</a> | <a href="#">comments</a> | <a href="#">ask</a> | <a href="#">show</a> | <a href="#">jobs</a> | <a href="#">submit</a>
                    </div>
                </div>
            `;
        }

        function renderStoryList() {
            let storyListHtml = stories.map((story, index) => `
                <li>
                    <span class="rank">${index + 1}.</span>
                    <div class="vote"><a href="#">▲</a></div>
                    <div class="story">
                        <div class="title">
                            <a onclick="showComments(${story.id})">${story.title}</a>
                            <span class="domain">(${story.url})</span>
                        </div>
                        <div class="subtext">
                            ${story.points} points by ${story.author} ${story.timeAgo} | 
                            <a onclick="showComments(${story.id})">${story.commentCount} comments</a>
                        </div>
                    </div>
                </li>
            `).join('');

            return `
                <div class="content">
                    <ol class="story-list">${storyListHtml}</ol>
                </div>
            `;
        }
        
        function renderCommentsView(storyId) {
            const story = stories.find(s => s.id === storyId);
            if (!story) return '<div>Story not found.</div>';
            
            const comments = commentsData[storyId] || [];

            return `
                <div class="content comments-view">
                    <div class="story-header">
                        <div class="story">
                            <div class="title">
                                <a href="#">${story.title}</a>
                                <span class="domain">(${story.url})</span>
                            </div>
                            <div class="subtext">
                                ${story.points} points by ${story.author} ${story.timeAgo}
                            </div>
                        </div>
                    </div>
                    
                    <div class="comment-form">
                        <textarea placeholder="Leave a comment..."></textarea>
                        <button>add comment</button>
                    </div>

                    <div class="comment-tree">
                        ${renderCommentTree(comments)}
                    </div>
                </div>
            `;
        }

        function renderCommentTree(comments) {
            if (!comments || comments.length === 0) {
                return '';
            }
            
            return comments.map(comment => `
                <div class="comment">
                    <div class="comment-meta">
                        ▲ ${comment.author} ${comment.timeAgo}
                    </div>
                    <div class="comment-text">${comment.text}</div>
                    ${comment.children && comment.children.length > 0 ? `
                        <div class="comment-children">
                            ${renderCommentTree(comment.children)}
                        </div>
                    ` : ''}
                </div>
            `).join('');
        }
        
        function render() {
            let viewHtml = '';
            if (currentView === 'list') {
                viewHtml = renderStoryList();
            } else if (currentView === 'comments') {
                viewHtml = renderCommentsView(currentStoryId);
            }
            app.innerHTML = renderHeader() + viewHtml;
        }

        // --- ROUTING / EVENT HANDLERS ---
        
        function showStoryList() {
            // This function is attached to onclick events
            currentView = 'list';
            currentStoryId = null;
            window.scrollTo(0, 0);
            render();
        }

        function showComments(storyId) {
            // This function is attached to onclick events
            currentView = 'comments';
            currentStoryId = storyId;
            window.scrollTo(0, 0);
            render();
        }

        // --- INITIAL RENDER ---
        document.addEventListener('DOMContentLoaded', () => {
            render();
        });

    </script>
</body>
</html>
```

Drag to resize

Alibaba

Qwen3 235B A22B (Non-reasoning)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mini Hacker News</title>
  <style>
    body { 
      display: flex; 
      height: 100vh; 
      margin: 0; 
      font-family: sans-serif;
    }
    #stories { 
      width: 50%; 
      overflow-y: auto; 
      padding: 20px; 
      border-right: 1px solid #ccc; 
      background: #f7f7f7;
    }
    #content { 
      width: 50%; 
      overflow-y: auto; 
      padding: 20px;
    }
    #stories ul, #content ul { 
      list-style-type: none; 
      padding-left: 10px; 
    }
    #stories li { 
      margin-bottom: 10px; 
    }
    ul ul { 
      margin-left: 20px; 
    }
    a {
      color: #3366cc;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div id="stories"></div>
  <div id="content">Click a story to view comments.</div>
  <script>
    // Mock data for Hacker News clone with nested replies
    const stories = [
      {
        id: 1,
        title: 'New JavaScript Engine V8 PERFORMANCE Breakthroughs',
        comments: [
          {
            author: 'techgeek',
            text: 'This is a parent comment with no replies yet.',
            replies: []
          },
          {
            author: 'v8team',
            text: 'Behind the scenes: New optimizations in Ignition interpreter...',
            replies: [
              {
                author: 'dev_hype',
                text: 'Tail call optimization finally implemented!!',
                replies: []
              },
              {
                author: 'perf_wizard',
                text: 'Expected performance improvements across async/await scenarios',
                replies: [
                  {
                    author: 'async_ninja',
                    text: 'This will transform how Gen Z develops Node.js apps',
                    replies: []
                  }
                ]
              }
            ]
          },
          {
            author: 'browsersRock',
            text: 'Great news for web developers!',
            replies: []
          }
        ]
      },
      {
        id: 2,
        title: 'The Future of Open Source: 2024 Predictions',
        comments: [
          {
            author: 'openSourcerer',
            text: 'New licensing models will dominate conversation threads',
            replies: [
              {
                author: 'licenseWalker',
                text: 'Corporate adoption of Apache 2.0 + Commons Clause seems contradictory',
                replies: []
              }
            ]
          },
          {
            author: 'AGPLfanatic',
            text: 'Copyright assignment agreements will face stricter regulatory scrutiny',
            replies: [
              {
                author: 'complianceOFFICER',
                text: 'Looking into MIT + Compliance requirements for enterprise deployment',
                replies: [
                  {
                    author: 'execCEO',
                    text: 'Balancing innovation with legal requirements tricky in competitive landscape',
                    replies: [
                      {
                        author: 'shareholder101',
                        text: 'Ultimate test of ethical stewardship frameworks',
                        replies: [
                          {
                            author: 'stockAnalyst',
                            text: 'Long-term market impact remains uncertain without standardized compliance frameworks',
                            replies: []
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ];

    // Display the list of stories in the left panel
    function displayStories() {
      const storiesDiv = document.getElementById('stories');
      storiesDiv.innerHTML = '';
      const ul = document.createElement('ul');
      stories.forEach(story => {
        const li = document.createElement('li');
        const link = document.createElement('a');
        link.href = `/story/${story.id}`;
        link.textContent = story.title;
        link.addEventListener('click', function(e) {
          e.preventDefault();
          history.pushState({ storyId: story.id }, '', `/story/${story.id}`);
          renderComments(story.comments);
        });
        li.appendChild(link);
        ul.appendChild(li);
      });
      storiesDiv.appendChild(ul);
    }

    // Recursive function to render comments and replies
    function renderComments(comments) {
      const contentDiv = document.getElementById('content');
      contentDiv.innerHTML = '<h2>Comments</h2>';
      
      // Recursive helper to build comment tree
      function buildCommentTree(commentsArray, depth = 0) {
        const list = document.createElement('ul');
        commentsArray.forEach(comment => {
          const item = document.createElement('li');
          item.innerHTML = `<strong>${comment.author}</strong>: ${comment.text}`;
          
          // Render nested replies if any exist
          if (comment.replies && comment.replies.length > 0) {
            const subComments = buildCommentTree(comment.replies, depth + 1);
            item.appendChild(subComments);
          }
          
          list.appendChild(item);
        });
        return list;
      }

      contentDiv.appendChild(buildCommentTree(comments));
    }

    // Handle browser navigation (back/forward) events
    window.addEventListener('popstate', function(e) {
      const path = window.location.pathname;
      if (path.startsWith('/story/')) {
        const id = parseInt(path.split('/')[2], 10);
        const story = stories.find(s => s.id === id);
        if (story) {
          renderComments(story.comments);
        } else {
          displayStories();
        }
      } else {
        displayStories();
      }
    });

    // Handle initial page load and direct URL access
    function onInitialLoad() {
      const path = window.location.pathname;
      if (path.startsWith('/story/')) {
        const id = parseInt(path.split('/')[2], 10);
        const story = stories.find(s => s.id === id);
        if (story) {
          renderComments(story.comments);
        } else {
          displayStories();
        }
      } else {
        displayStories();
      }
    }

    // Initialize on DOM load
    document.addEventListener('DOMContentLoaded', function () {
      onInitialLoad();
    });
  </script>
</body>
</html>

Drag to resize

Moonshot AI

Kimi K2

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hacker News</title>
    <style>
        body {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 10pt;
            margin: 0;
            padding: 0;
            background-color: #f6f6ef;
            color: #000;
        }
        .header {
            background-color: #ff6600;
            padding: 2px;
            display: flex;
            align-items: center;
        }
        .header img {
            width: 18px;
            height: 18px;
            border: 1px solid #fff;
            margin-right: 4px;
            margin-left: 2px;
        }
        .header .nav {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }
        .header .nav a {
            color: #000;
            text-decoration: none;
            margin: 0 4px;
        }
        .header .nav .separator {
            color: #000;
        }
        .content {
            max-width: 1180px;
            padding: 10px;
            margin: 0 auto;
        }
        .story {
            background: #fff;
            padding: 8px;
            margin-bottom: 8px;
            border-top: 1px solid #ff6600;
        }
        .story .title {
            font-size: 18px;
            line-height: 1.3;
        }
        .story .title a {
            color: #000;
            text-decoration: none;
        }
        .story .title .site {
            color: #828282;
            font-size: 11px;
            margin-left: 4px;
        }
        .story .meta {
            margin: 5px 0;
            color: #828282;
            font-size: 9pt;
        }
        .story .meta a {
            color: #828282;
            text-decoration: none;
        }
        .comments {
            background: #fff;
            padding: 8px;
        }
        .comment {
            margin: 5px 0;
            padding-left: 40px;
        }
        .comment .meta {
            color: #828282;
            font-size: 8pt;
            margin: 0;
        }
        .comment .text {
            margin: 5px 0;
            color: #000;
            line-height: 1.3;
        }
        .comment .reply a {
            color: #828282;
            font-size: 8pt;
            text-decoration: none;
        }
        .indent {
            padding-left: 40px;
            border-left: 1px solid #eee;
        }
        .hidden {
            display: none;
        }
        .toggle-comments:hover {
            cursor: pointer;
        }
        .refresh {
            margin-left: auto;
            color: #000;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACGSURBVDjLxZPRCgFBEIXnNqKCoOiKg/AJXINQDtRH8AG+gOtbqIB7cA9CKT7ALQjuQCAQCAQCgUAgEAgEfgnOzjNZbmZnZ3e5mQ3AAWgD9S/7FgAOkH2nVgAbYN8SWN8CLKz7bwJnocgwwAuwJIEi36kVwJskcQLOWgFVSeTzEFgCey2Bg6j+twEgSjK5BloCSZKcA1VJKqEuSSXUJ6mEhiSV0IikEhqRVEIjkkpoRFIJjUgqoRFJJTQiqYRGJJXQiKQSmpH0CdRXMOj30gGgAAAAAElFTkSuQmCC">
        <div class="nav">
            <a href="/">Hacker News</a>
            <span class="separator">|</span>
            <a href="/newest">new</a>
            <span class="separator">|</span>
            <a href="/front">past</a>
            <span class="separator">|</span>
            <a href="/newcomments">comments</a>
            <span class="separator">|</span>
            <a href="/ask">ask</a>
            <span class="separator">|</span>
            <a href="/show">show</a>
            <span class="separator">|</span>
            <a href="/jobs">jobs</a>
            <span class="separator">|</span>
            <a href="/submit">submit</a>
            <a href="/" class="refresh" onclick="Router.handleRoute('/'); return false;">refresh</a>
        </div>
    </div>

    <div id="main" class="content">
        <!-- Content injected here -->
    </div>

    <script>
        // Simple SPA router
        const Router = {
            routes: {
                '/': () => showHomepage(),
                'default': () => showHomepage(),
            },

            init() {
                window.addEventListener('hashchange', () => this.checkRoute());
                this.checkRoute();
            },

            handleRoute(route) {
                window.history.pushState({}, '', route);
                this.checkRoute();
            },

            checkRoute() {
                const hash = window.location.pathname;
                const route = this.routes[hash] || this.routes['default'];
                route();
            }
        };

        // Mock data for a thread
        const mockThread = {
            id: '12345678',
            title: 'Ask HN: How do you manage state in complex client-side applications?',
            points: 842,
            author: 'throwaway2024',
            time: '9 hours ago',
            comments: 437,
            site: 'github.com',
            url: 'https://github.com/user/project',
            text: "I've been working on a large React application for two years and I'm struggling with state management. We've used Redux, Zustand, and even React Context, but there's always a point where selecting the right state management strategy becomes difficult.<p>Specifically, I'm interested in how teams handle:<p>- Caching server responses<br>- Managing form states<br>- Handling complex async flows<br>- Avoiding re-renders<p>Looking for battle-tested approaches from teams who've scaled apps to 100k+ LOC."
        };

        // Mock comments (with nested structure)
        const mockComments = [
            {
                id: 'c1',
                author: 'john_carmack',
                time: '8 hours ago',
                text: 'Redux is dying. Use Zustand or Jotai.',
                children: [
                    {
                        id: 'c1a',
                        author: 'redux_addict',
                        time: '7 hours ago',
                        text: 'Redux Toolkit is actually remarkably good. The boilerplate complaint is from people who haven\'t used RTK.',
                        children: [
                            {
                                id: 'c1a1',
                                author: 'john_carmack',
                                time: '6 hours ago',
                                text: 'Even with RTK, the mental model is complex compared to simple observables.'
                            }
                        ]
                    }
                ]
            },
            {
                id: 'c2',
                author: 'dan_abramov',
                time: '8 hours ago',
                text: 'At Meta, we use [Relay](https://relay.dev) for fetching data, and [Recoil](https://recoiljs.org) for client state. Recoil handles atomic state beautifully - you compose selectors and get exactly the fine-grained updates you want.',
                children: [
                    {
                        id: 'c2a',
                        author: 'react_dev',
                        time: '7 hours ago',
                        text: 'But Recoil is still experimental. Production teams are using Zustand + React Query successfully.'
                    }
                ]
            },
            {
                id: 'c3',
                author: 'mojombo',
                time: '7 hours ago',
                text: 'State management is a lie. Most apps don\'t need centralized state. Nearly everything can be derived from the URL or API.',
                children: [
                    {
                        id: 'c3a',
                        author: 'skeptic',
                        time: '6 hours ago',
                        text: 'Try telling that to our 800 ms form interaction times.',
                        children: [
                            {
                                id: 'c3a1',
                                author: 'mojombo',
                                time: '6 hours ago',
                                text: 'Sure, then you optimize specifically for perf, not general state. Use RSC + Server Actions for forms. Cache aggressively.'
                            }
                        ]
                    }
                ]
            }
        ];

        // Render a comment recursively
        function renderComment(comment, depth = 0) {
            return `
                <div class="comment">
                    <div class="meta">
                        ${comment.author} ${comment.time} 
                        <span class="toggle-comments" data-id="${comment.id}">[-]</span>
                    </div>
                    <div class="text">${comment.text}</div>
                    <div class="reply"><a href="#">reply</a></div>
                    <div id="children-${comment.id}" class="${depth === 0 ? 'indent' : ''}">
                        ${comment.children ? comment.children.map(c => renderComment(c, depth + 1)).join('') : ''}
                    </div>
                </div>
            `;
        }

        // Show the homepage (list view)
        function showHomepage() {
            const main = document.getElementById('main');
            main.innerHTML = `
                <div class="story">
                    <div class="title">
                        <a href="/item?id=${mockThread.id}" class="story-link" data-id="${mockThread.id}">${mockThread.title}</a>
                        <span class="site">(${mockThread.site})</span>
                    </div>
                    <div class="meta">
                        ${mockThread.points} points by <a href="/user?id=${mockThread.author}">${mockThread.author}</a> <a href="/item?id=${mockThread.id}">${mockThread.time}</a> | <a href="/hide?id=${mockThread.id}">hide</a> | <a href="/past?">past</a> | <a href="/item?id=${mockThread.id}">${mockThread.comments} comments</a>
                    </div>
                </div>
                <!-- Additional mock stories... -->
                ${Array(9).fill(0).map((_, i) => `
                    <div class="story">
                        <div class="title">
                            <a href="/item?id=story${i+1}" class="story-link" data-id="${i+1}">Ask HN: What's your favorite programming tool/utility?</a>
                            <span class="site">(github.com)</span>
                        </div>
                        <div class="meta">
                            ${243-i*20} points by <a href="/user?id=throwaway${i+1}">throwaway${i+1}</a> <a href="/item?id=story${i+1}">${i+1} hours ago</a> | <a href="/hide?id=story${i+1}">hide</a> | <a href="/past?">past</a> | <a href="/item?id=story${i+1}">${47-i*3} comments</a>
                        </div>
                    </div>
                `).join('')}
                <div style="margin-top:15px;"><a href="/">More</a></div>
            `;

            // Add click listeners to stories for routing
            document.querySelectorAll('.story-link').forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    Router.handleRoute(`/item?id=${link.dataset.id}`);
                    showThread();
                });
            });
        }

        // Show the thread (detail view)
        function showThread() {
            const main = document.getElementById('main');
            main.innerHTML = `
                <div class="story">
                    <div class="title">
                        <a href="${mockThread.url}">${mockThread.title}</a>
                        <span class="site">(${mockThread.site})</span>
                    </div>
                    <div class="meta">
                        ${mockThread.points} points by <a href="/user?id=${mockThread.author}">${mockThread.author}</a> <a href="/item?id=${mockThread.id}">${mockThread.time}</a> | <a href="/hide?id=${mockThread.id}">hide</a> | <a href="/past?">past</a> | <a href="#" onclick="Router.handleRoute('/'); return false;">home</a>
                    </div>
                    <div class="text">${mockThread.text}</div>
                </div>
                <div class="comments">
                    <div style="margin: 10px 0;">${mockComments.length} comments</div>
                    ${mockComments.map(renderComment).join('')}
                </div>
            `;
        }

        // Initialize the router
        Router.init();
    </script>
</body>
</html>
```

Drag to resize

Anthropic

Claude 4 Sonnet (Non-reasoning)

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hacker News Clone</title>
    <style>
        body {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 10pt;
            margin: 0;
            padding: 0;
            background-color: #f6f6ef;
        }
        
        .header {
            background-color: #ff6600;
            padding: 2px;
            font-size: 10pt;
        }
        
        .header table {
            width: 100%;
            border-spacing: 0;
        }
        
        .header td {
            padding: 2px;
        }
        
        .logo {
            border: 1px solid #ff6600;
            width: 18px;
            height: 18px;
            background-color: #fff;
        }
        
        .header a {
            color: #000;
            text-decoration: none;
        }
        
        .header a:hover {
            text-decoration: underline;
        }
        
        .container {
            background-color: #f6f6ef;
            padding: 8px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .story {
            margin-bottom: 5px;
        }
        
        .story-title {
            font-size: 10pt;
        }
        
        .story-title a {
            color: #000;
            text-decoration: none;
        }
        
        .story-title a:visited {
            color: #828282;
        }
        
        .story-meta {
            font-size: 7pt;
            color: #828282;
            margin-top: 2px;
        }
        
        .story-meta a {
            color: #828282;
            text-decoration: none;
        }
        
        .story-meta a:hover {
            text-decoration: underline;
        }
        
        .rank {
            color: #828282;
            text-align: right;
            padding-right: 5px;
            font-size: 7pt;
            width: 25px;
        }
        
        .spacer {
            height: 5px;
        }
        
        .comment-page {
            display: none;
        }
        
        .comment-page.active {
            display: block;
        }
        
        .comment-header {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e5e5e5;
        }
        
        .comment {
            margin-bottom: 15px;
            border-left: 1px solid #e5e5e5;
            padding-left: 10px;
        }
        
        .comment-meta {
            font-size: 7pt;
            color: #828282;
            margin-bottom: 5px;
        }
        
        .comment-text {
            font-size: 9pt;
            line-height: 1.4;
            margin-bottom: 5px;
        }
        
        .comment-actions {
            font-size: 7pt;
        }
        
        .comment-actions a {
            color: #828282;
            text-decoration: none;
            margin-right: 10px;
        }
        
        .comment-actions a:hover {
            text-decoration: underline;
        }
        
        .reply {
            margin-left: 40px;
            margin-top: 10px;
        }
        
        .back-link {
            margin-bottom: 20px;
            font-size: 8pt;
        }
        
        .back-link a {
            color: #828282;
            text-decoration: none;
        }
        
        .back-link a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="header">
        <table>
            <tr>
                <td>
                    <span class="logo"></span>
                </td>
                <td style="padding-left: 4px;">
                    <a href="#" onclick="showMainPage()"><b>Hacker News</b></a>
                </td>
                <td style="text-align: right; padding-right: 4px;">
                    <a href="#">new</a> |
                    <a href="#">past</a> |
                    <a href="#">comments</a> |
                    <a href="#">ask</a> |
                    <a href="#">show</a> |
                    <a href="#">jobs</a> |
                    <a href="#">submit</a>
                </td>
            </tr>
        </table>
    </div>

    <div class="container">
        <!-- Main page with story list -->
        <div id="main-page">
            <table>
                <tr>
                    <td class="rank">1.</td>
                    <td>
                        <div class="story">
                            <div class="story-title">
                                <a href="#" onclick="showComments(1)">Ask HN: What's the best way to learn system design?</a>
                            </div>
                            <div class="story-meta">
                                85 points by techuser123 3 hours ago | <a href="#" onclick="showComments(1)">67 comments</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr><td colspan="2" class="spacer"></td></tr>
                
                <tr>
                    <td class="rank">2.</td>
                    <td>
                        <div class="story">
                            <div class="story-title">
                                <a href="#" onclick="showComments(2)">Show HN: I built a minimal text editor in pure JavaScript</a>
                            </div>
                            <div class="story-meta">
                                142 points by devmaker 5 hours ago | <a href="#" onclick="showComments(2)">89 comments</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr><td colspan="2" class="spacer"></td></tr>
                
                <tr>
                    <td class="rank">3.</td>
                    <td>
                        <div class="story">
                            <div class="story-title">
                                <a href="#" onclick="showComments(3)">The Future of Web Development: WebAssembly vs JavaScript</a>
                            </div>
                            <div class="story-meta">
                                203 points by webdev_guru 7 hours ago | <a href="#" onclick="showComments(3)">156 comments</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr><td colspan="2" class="spacer"></td></tr>
                
                <tr>
                    <td class="rank">4.</td>
                    <td>
                        <div class="story">
                            <div class="story-title">
                                <a href="#" onclick="showComments(4)">Why I switched from React to Vue and never looked back</a>
                            </div>
                            <div class="story-meta">
                                78 points by frontend_fan 8 hours ago | <a href="#" onclick="showComments(4)">92 comments</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr><td colspan="2" class="spacer"></td></tr>
                
                <tr>
                    <td class="rank">5.</td>
                    <td>
                        <div class="story">
                            <div class="story-title">
                                <a href="#" onclick="showComments(5)">Ask HN: Best practices for remote team collaboration?</a>
                            </div>
                            <div class="story-meta">
                                56 points by remoteworker 12 hours ago | <a href="#" onclick="showComments(5)">43 comments</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <!-- Comment pages for each story -->
        <div id="comments-1" class="comment-page">
            <div class="back-link">
                <a href="#" onclick="showMainPage()">← Back to main page</a>
            </div>
            <div class="comment-header">
                <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;">
                    Ask HN: What's the best way to learn system design?
                </div>
                <div class="story-meta">
                    85 points by techuser123 3 hours ago | 67 comments
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">systemsexpert 2 hours ago</div>
                <div class="comment-text">
                    I'd recommend starting with "Designing Data-Intensive Applications" by Martin Kleppmann. It's an excellent foundation for understanding distributed systems concepts.
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
                
                <div class="comment reply">
                    <div class="comment-meta">techuser123 2 hours ago</div>
                    <div class="comment-text">
                        Thanks! I've heard great things about that book. Any specific chapters you'd recommend starting with?
                    </div>
                    <div class="comment-actions">
                        <a href="#">reply</a>
                    </div>
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">cloudarchitect 1 hour ago</div>
                <div class="comment-text">
                    Practice is key! I'd suggest building small distributed systems projects. Start with a simple chat application using websockets, then move to more complex scenarios like building a URL shortener or designing a basic social media feed.
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">scalability_pro 45 minutes ago</div>
                <div class="comment-text">
                    Don't forget about the fundamentals! Make sure you understand:
                    <br>• CAP theorem
                    <br>• Database sharding vs replication
                    <br>• Load balancing strategies
                    <br>• Caching patterns (Redis, Memcached)
                    <br>• Message queues (Kafka, RabbitMQ)
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
        </div>

        <div id="comments-2" class="comment-page">
            <div class="back-link">
                <a href="#" onclick="showMainPage()">← Back to main page</a>
            </div>
            <div class="comment-header">
                <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;">
                    Show HN: I built a minimal text editor in pure JavaScript
                </div>
                <div class="story-meta">
                    142 points by devmaker 5 hours ago | 89 comments
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">jsdev_ninja 4 hours ago</div>
                <div class="comment-text">
                    This is really impressive! How did you handle syntax highlighting without any external libraries?
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
                
                <div class="comment reply">
                    <div class="comment-meta">devmaker 4 hours ago</div>
                    <div class="comment-text">
                        Thanks! I used regular expressions to tokenize the code and wrapped different token types in spans with CSS classes. It's not as sophisticated as Monaco or CodeMirror, but it works well for basic highlighting.
                    </div>
                    <div class="comment-actions">
                        <a href="#">reply</a>
                    </div>
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">performance_guru 3 hours ago</div>
                <div class="comment-text">
                    How's the performance with large files? I'm curious about your approach to handling documents with thousands of lines.
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">codereviewer 2 hours ago</div>
                <div class="comment-text">
                    Nice work! A few suggestions:
                    <br>• Consider implementing virtual scrolling for better performance
                    <br>• Add keyboard shortcuts (Ctrl+S, Ctrl+Z, etc.)
                    <br>• Maybe add a plugin system for extensibility?
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
        </div>

        <div id="comments-3" class="comment-page">
            <div class="back-link">
                <a href="#" onclick="showMainPage()">← Back to main page</a>
            </div>
            <div class="comment-header">
                <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;">
                    The Future of Web Development: WebAssembly vs JavaScript
                </div>
                <div class="story-meta">
                    203 points by webdev_guru 7 hours ago | 156 comments
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">wasmexpert 6 hours ago</div>
                <div class="comment-text">
                    I think the comparison is missing the point. WebAssembly isn't meant to replace JavaScript entirely - they're complementary technologies. WASM excels at computationally intensive tasks while JS remains perfect for DOM manipulation and general web scripting.
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
                
                <div class="comment reply">
                    <div class="comment-meta">webdev_guru 5 hours ago</div>
                    <div class="comment-text">
                        You're absolutely right! I should have emphasized that point more in the article. They work best together, not as competitors.
                    </div>
                    <div class="comment-actions">
                        <a href="#">reply</a>
                    </div>
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">rust_dev 5 hours ago</div>
                <div class="comment-text">
                    The ability to compile Rust, C++, and Go to WebAssembly is game-changing for web performance. We're seeing 10x performance improvements in our data processing pipelines by using WASM modules instead of pure JS.
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">skeptical_dev 4 hours ago</div>
                <div class="comment-text">
                    While WASM is impressive, let's not forget the debugging experience is still quite poor compared to JavaScript. The tooling needs to mature before widespread adoption.
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
        </div>

        <div id="comments-4" class="comment-page">
            <div class="back-link">
                <a href="#" onclick="showMainPage()">← Back to main page</a>
            </div>
            <div class="comment-header">
                <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;">
                    Why I switched from React to Vue and never looked back
                </div>
                <div class="story-meta">
                    78 points by frontend_fan 8 hours ago | 92 comments
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">react_advocate 7 hours ago</div>
                <div class="comment-text">
                    Interesting perspective! What specific pain points did you encounter with React that Vue solved better?
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
                
                <div class="comment reply">
                    <div class="comment-meta">frontend_fan 7 hours ago</div>
                    <div class="comment-text">
                        Mainly the learning curve for new team members and the verbosity of certain patterns. Vue's template syntax felt more intuitive, and the single-file components made organization cleaner for our use case.
                    </div>
                    <div class="comment-actions">
                        <a href="#">reply</a>
                    </div>
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">framework_neutral 6 hours ago</div>
                <div class="comment-text">
                    Both are excellent frameworks. The choice often comes down to team expertise, project requirements, and ecosystem needs. React has a larger ecosystem, but Vue definitely has a gentler learning curve.
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
        </div>

        <div id="comments-5" class="comment-page">
            <div class="back-link">
                <a href="#" onclick="showMainPage()">← Back to main page</a>
            </div>
            <div class="comment-header">
                <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;">
                    Ask HN: Best practices for remote team collaboration?
                </div>
                <div class="story-meta">
                    56 points by remoteworker 12 hours ago | 43 comments
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">remote_manager 11 hours ago</div>
                <div class="comment-text">
                    Communication is everything! We use Slack for quick updates, have daily standups via video call, and maintain detailed project documentation in Notion. The key is being intentional about async communication.
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">distributed_team_lead 10 hours ago</div>
                <div class="comment-text">
                    Don't underestimate the importance of overlap hours when working across time zones. We ensure at least 4 hours of overlap between team members and schedule important meetings during those windows.
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
            
            <div class="comment">
                <div class="comment-meta">productivity_hacker 9 hours ago</div>
                <div class="comment-text">
                    Tools that have worked well for us:
                    <br>• Figma for design collaboration
                    <br>• Linear for project management
                    <br>• Loom for async video explanations
                    <br>• GitHub for code reviews and discussions
                </div>
                <div class="comment-actions">
                    <a href="#">reply</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        function showMainPage() {
            // Hide all comment pages
            const commentPages = document.querySelectorAll('.comment-page');
            commentPages.forEach(page => page.classList.remove('active'));
            
            // Show main page
            document.getElementById('main-page').style.display = 'block';
            
            // Update URL without page reload
            history.pushState({page: 'main'}, 'Hacker News Clone', '#main');
        }

        function showComments(storyId) {
            // Hide main page
            document.getElementById('main-page').style.display = 'none';
            
            // Hide all comment pages
            const commentPages = document.querySelectorAll('.comment-page');
            commentPages.forEach(page => page.classList.remove('active'));
            
            // Show specific comment page
            document.getElementById(`comments-${storyId}`).classList.add('active');
            
            // Update URL without page reload
            history.pushState({page: 'comments', storyId: storyId}, `Story ${storyId} Comments`, `#comments-${storyId}`);
        }

        // Handle browser back/forward buttons
        window.addEventListener('popstate', function(event) {
            if (event.state) {
                if (event.state.page === 'main') {
                    showMainPage();
                } else if (event.state.page === 'comments') {
                    showComments(event.state.storyId);
                }
            } else {
                showMainPage();
            }
        });

        // Initialize the page
        history.replaceState({page: 'main'}, 'Hacker News Clone', '#main');
    </script>
</body>
</html>
```

Drag to resize

Of course! Here is a self-contained webpage that mimics the look and functionality of Hacker News, including client-side routing to view a comment thread without reloading the page. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hacker News Clone</title> <style> body { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: #333; background-color: #f6f6ef; margin: 0; padding: 8px; } #app { max-width: 900px; margin: 0 auto; background-color: #f6f6ef; } .header { background-color: #ff6600; display: flex; align-items: center; padding: 4px; } .header .logo { border: 1px solid white; margin-right: 8px; font-weight: bold; color: black; padding: 1px 6px; } .header .site-title { font-weight: bold; color: black; cursor: pointer; } .header .nav-links { margin-left: 10px; color: black; } .header .nav-links a { color: black; text-decoration: none; margin: 0 5px; } .content { padding: 10px 0; } .story-list { list-style: none; padding: 0; margin: 0; } .story-list li { margin-bottom: 8px; display: flex; align-items: flex-start; } .story-list .rank { color: #828282; width: 30px; text-align: right; margin-right: 5px; } .story-list .vote { width: 20px; text-align: center; padding-top: 3px; } .story-list .vote a { color: #828282; text-decoration: none; } .story { display: flex; flex-direction: column; } .story .title a { color: #000; text-decoration: none; cursor: pointer; } .story .title a:visited { color: #828282; } .story .domain { color: #828282; font-size: 8pt; margin-left: 5px; } .story .subtext { color: #828282; font-size: 7pt; margin-top: 2px; } .story .subtext a { color: #828282; text-decoration: none; cursor: pointer; } .story .subtext a:hover { text-decoration: underline; } /* Comments View */ .comments-view .story-header { margin-bottom: 15px; } .comment-form { margin: 20px 0; } .comment-form textarea { width: 100%; max-width: 500px; height: 100px; border: 1px solid #ccc; margin-bottom: 5px; } .comment-form button { background-color: #ff6600; border: none; color: white; padding: 8px 12px; cursor: pointer; } .comment-tree { margin-top: 10px; } .comment { margin-bottom: 15px; } .comment-meta { color: #828282; font-size: 8pt; margin-bottom: 5px; } .comment-text { line-height: 1.4; overflow-wrap: break-word; } .comment-children { margin-left: 25px; border-left: 1px solid #e7e7e7; padding-left: 15px; } </style> </head> <body> <div id="app">  </div> <script> // --- DATA --- // In a real app, this would come from an API. const stories = [ { id: 1, title: 'I tried to ask a question on Stack Overflow but I am not smart enough', url: 'blog.ploeh.dk', points: 1210, author: 'jgrahamc', timeAgo: '11 hours ago', commentCount: 503 }, { id: 2, title: 'Show HN: A self-hosted, offline-first, open-source note-taking app', url: 'github.com/notes-app', points: 987, author: 'notedev', timeAgo: '8 hours ago', commentCount: 231 }, { id: 3, title: 'The forgotten history of how automakers invented the crime of "jaywalking"', url: 'vox.com', points: 543, author: 'chris-sm', timeAgo: '15 hours ago', commentCount: 312 }, { id: 4, title: 'What I learned from interviewing 500+ software engineers', url: 'interviewing.io', points: 721, author: 'aline', timeAgo: '9 hours ago', commentCount: 450 }, { id: 5, title: 'Why is it so hard to see the Milky Way?', url: 'theatlantic.com', points: 230, author: 'danielle', timeAgo: '2 days ago', commentCount: 88 } ]; const commentsData = { // Comments for Story ID 1 1: [ { id: 101, author: 'peter', timeAgo: '10 hours ago', text: "This resonates so much. The platform has become hostile to genuine curiosity. The drive to close questions as duplicates, even when the context is subtly different, is overwhelming.", children: [ { id: 102, author: 'sarah', timeAgo: '9 hours ago', text: "I agree. I once had a question closed that linked to a 'duplicate' from 8 years prior, using a completely deprecated version of the library I was asking about. It's not helpful.", children: [ {id: 105, author: 'jgrahamc', timeAgo: '8 hours ago', text: "Exactly this. The 'timeless' answer ideal doesn't work when the technology landscape changes every 18 months. Context is everything.", children: []} ]}, { id: 103, author: 'mike', timeAgo: '7 hours ago', text: "The problem is reputation farming. People get points for flagging and closing, so there's an incentive to be a 'hall monitor' instead of being helpful.", children: []} ]}, { id: 104, author: 'dev_guy', timeAgo: '10 hours ago', text: "While I see your point, there's also the problem of extreme low-effort questions. 'My code doesn't work, pls fix' with no context. There has to be a balance.", children: [ { id: 106, author: 'debugger', timeAgo: '6 hours ago', text: "True, but the current system feels like it punishes genuine newcomers who just don't know the 'rules' yet. It's an onboarding problem.", children: []} ]} ], // Empty comments for other stories for this example 2: [], 3: [], 4: [], 5: [] }; // --- STATE --- let currentView = 'list'; // 'list' or 'comments' let currentStoryId = null; // --- APP CONTAINER --- const app = document.getElementById('app'); // --- RENDER FUNCTIONS --- function renderHeader() { return ` <div class="header"> <span class="logo">Y</span> <span class="site-title" onclick="showStoryList()">Hacker News Clone</span> <div class="nav-links"> <a href="#">new</a> | <a href="#">past</a> | <a href="#">comments</a> | <a href="#">ask</a> | <a href="#">show</a> | <a href="#">jobs</a> | <a href="#">submit</a> </div> </div> `; } function renderStoryList() { let storyListHtml = stories.map((story, index) => ` <li> <span class="rank">${index + 1}.</span> <div class="vote"><a href="#">▲</a></div> <div class="story"> <div class="title"> <a onclick="showComments(${story.id})">${story.title}</a> <span class="domain">(${story.url})</span> </div> <div class="subtext"> ${story.points} points by ${story.author} ${story.timeAgo} | <a onclick="showComments(${story.id})">${story.commentCount} comments</a> </div> </div> </li> `).join(''); return ` <div class="content"> <ol class="story-list">${storyListHtml}</ol> </div> `; } function renderCommentsView(storyId) { const story = stories.find(s => s.id === storyId); if (!story) return '<div>Story not found.</div>'; const comments = commentsData[storyId] || []; return ` <div class="content comments-view"> <div class="story-header"> <div class="story"> <div class="title"> <a href="#">${story.title}</a> <span class="domain">(${story.url})</span> </div> <div class="subtext"> ${story.points} points by ${story.author} ${story.timeAgo} </div> </div> </div> <div class="comment-form"> <textarea placeholder="Leave a comment..."></textarea> <button>add comment</button> </div> <div class="comment-tree"> ${renderCommentTree(comments)} </div> </div> `; } function renderCommentTree(comments) { if (!comments || comments.length === 0) { return ''; } return comments.map(comment => ` <div class="comment"> <div class="comment-meta"> ▲ ${comment.author} ${comment.timeAgo} </div> <div class="comment-text">${comment.text}</div> ${comment.children && comment.children.length > 0 ? ` <div class="comment-children"> ${renderCommentTree(comment.children)} </div> ` : ''} </div> `).join(''); } function render() { let viewHtml = ''; if (currentView === 'list') { viewHtml = renderStoryList(); } else if (currentView === 'comments') { viewHtml = renderCommentsView(currentStoryId); } app.innerHTML = renderHeader() + viewHtml; } // --- ROUTING / EVENT HANDLERS --- function showStoryList() { // This function is attached to onclick events currentView = 'list'; currentStoryId = null; window.scrollTo(0, 0); render(); } function showComments(storyId) { // This function is attached to onclick events currentView = 'comments'; currentStoryId = storyId; window.scrollTo(0, 0); render(); } // --- INITIAL RENDER --- document.addEventListener('DOMContentLoaded', () => { render(); }); </script> </body> </html> ```

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Mini Hacker News</title> <style> body { display: flex; height: 100vh; margin: 0; font-family: sans-serif; } #stories { width: 50%; overflow-y: auto; padding: 20px; border-right: 1px solid #ccc; background: #f7f7f7; } #content { width: 50%; overflow-y: auto; padding: 20px; } #stories ul, #content ul { list-style-type: none; padding-left: 10px; } #stories li { margin-bottom: 10px; } ul ul { margin-left: 20px; } a { color: #3366cc; text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <div id="stories"></div> <div id="content">Click a story to view comments.</div> <script> // Mock data for Hacker News clone with nested replies const stories = [ { id: 1, title: 'New JavaScript Engine V8 PERFORMANCE Breakthroughs', comments: [ { author: 'techgeek', text: 'This is a parent comment with no replies yet.', replies: [] }, { author: 'v8team', text: 'Behind the scenes: New optimizations in Ignition interpreter...', replies: [ { author: 'dev_hype', text: 'Tail call optimization finally implemented!!', replies: [] }, { author: 'perf_wizard', text: 'Expected performance improvements across async/await scenarios', replies: [ { author: 'async_ninja', text: 'This will transform how Gen Z develops Node.js apps', replies: [] } ] } ] }, { author: 'browsersRock', text: 'Great news for web developers!', replies: [] } ] }, { id: 2, title: 'The Future of Open Source: 2024 Predictions', comments: [ { author: 'openSourcerer', text: 'New licensing models will dominate conversation threads', replies: [ { author: 'licenseWalker', text: 'Corporate adoption of Apache 2.0 + Commons Clause seems contradictory', replies: [] } ] }, { author: 'AGPLfanatic', text: 'Copyright assignment agreements will face stricter regulatory scrutiny', replies: [ { author: 'complianceOFFICER', text: 'Looking into MIT + Compliance requirements for enterprise deployment', replies: [ { author: 'execCEO', text: 'Balancing innovation with legal requirements tricky in competitive landscape', replies: [ { author: 'shareholder101', text: 'Ultimate test of ethical stewardship frameworks', replies: [ { author: 'stockAnalyst', text: 'Long-term market impact remains uncertain without standardized compliance frameworks', replies: [] } ] } ] } ] } ] } ] } ]; // Display the list of stories in the left panel function displayStories() { const storiesDiv = document.getElementById('stories'); storiesDiv.innerHTML = ''; const ul = document.createElement('ul'); stories.forEach(story => { const li = document.createElement('li'); const link = document.createElement('a'); link.href = `/story/${story.id}`; link.textContent = story.title; link.addEventListener('click', function(e) { e.preventDefault(); history.pushState({ storyId: story.id }, '', `/story/${story.id}`); renderComments(story.comments); }); li.appendChild(link); ul.appendChild(li); }); storiesDiv.appendChild(ul); } // Recursive function to render comments and replies function renderComments(comments) { const contentDiv = document.getElementById('content'); contentDiv.innerHTML = '<h2>Comments</h2>'; // Recursive helper to build comment tree function buildCommentTree(commentsArray, depth = 0) { const list = document.createElement('ul'); commentsArray.forEach(comment => { const item = document.createElement('li'); item.innerHTML = `<strong>${comment.author}</strong>: ${comment.text}`; // Render nested replies if any exist if (comment.replies && comment.replies.length > 0) { const subComments = buildCommentTree(comment.replies, depth + 1); item.appendChild(subComments); } list.appendChild(item); }); return list; } contentDiv.appendChild(buildCommentTree(comments)); } // Handle browser navigation (back/forward) events window.addEventListener('popstate', function(e) { const path = window.location.pathname; if (path.startsWith('/story/')) { const id = parseInt(path.split('/')[2], 10); const story = stories.find(s => s.id === id); if (story) { renderComments(story.comments); } else { displayStories(); } } else { displayStories(); } }); // Handle initial page load and direct URL access function onInitialLoad() { const path = window.location.pathname; if (path.startsWith('/story/')) { const id = parseInt(path.split('/')[2], 10); const story = stories.find(s => s.id === id); if (story) { renderComments(story.comments); } else { displayStories(); } } else { displayStories(); } } // Initialize on DOM load document.addEventListener('DOMContentLoaded', function () { onInitialLoad(); }); </script> </body> </html>

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hacker News</title> <style> body { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; margin: 0; padding: 0; background-color: #f6f6ef; color: #000; } .header { background-color: #ff6600; padding: 2px; display: flex; align-items: center; } .header img { width: 18px; height: 18px; border: 1px solid #fff; margin-right: 4px; margin-left: 2px; } .header .nav { display: flex; align-items: center; flex-grow: 1; } .header .nav a { color: #000; text-decoration: none; margin: 0 4px; } .header .nav .separator { color: #000; } .content { max-width: 1180px; padding: 10px; margin: 0 auto; } .story { background: #fff; padding: 8px; margin-bottom: 8px; border-top: 1px solid #ff6600; } .story .title { font-size: 18px; line-height: 1.3; } .story .title a { color: #000; text-decoration: none; } .story .title .site { color: #828282; font-size: 11px; margin-left: 4px; } .story .meta { margin: 5px 0; color: #828282; font-size: 9pt; } .story .meta a { color: #828282; text-decoration: none; } .comments { background: #fff; padding: 8px; } .comment { margin: 5px 0; padding-left: 40px; } .comment .meta { color: #828282; font-size: 8pt; margin: 0; } .comment .text { margin: 5px 0; color: #000; line-height: 1.3; } .comment .reply a { color: #828282; font-size: 8pt; text-decoration: none; } .indent { padding-left: 40px; border-left: 1px solid #eee; } .hidden { display: none; } .toggle-comments:hover { cursor: pointer; } .refresh { margin-left: auto; color: #000; text-decoration: none; } </style> </head> <body> <div class="header"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACGSURBVDjLxZPRCgFBEIXnNqKCoOiKg/AJXINQDtRH8AG+gOtbqIB7cA9CKT7ALQjuQCAQCAQCgUAgEAgEfgnOzjNZbmZnZ3e5mQ3AAWgD9S/7FgAOkH2nVgAbYN8SWN8CLKz7bwJnocgwwAuwJIEi36kVwJskcQLOWgFVSeTzEFgCey2Bg6j+twEgSjK5BloCSZKcA1VJKqEuSSXUJ6mEhiSV0IikEhqRVEIjkkpoRFIJjUgqoRFJJTQiqYRGJJXQiKQSmpH0CdRXMOj30gGgAAAAAElFTkSuQmCC"> <div class="nav"> <a href="/">Hacker News</a> <span class="separator">|</span> <a href="/newest">new</a> <span class="separator">|</span> <a href="/front">past</a> <span class="separator">|</span> <a href="/newcomments">comments</a> <span class="separator">|</span> <a href="/ask">ask</a> <span class="separator">|</span> <a href="/show">show</a> <span class="separator">|</span> <a href="/jobs">jobs</a> <span class="separator">|</span> <a href="/submit">submit</a> <a href="/" class="refresh" onclick="Router.handleRoute('/'); return false;">refresh</a> </div> </div> <div id="main" class="content">  </div> <script> // Simple SPA router const Router = { routes: { '/': () => showHomepage(), 'default': () => showHomepage(), }, init() { window.addEventListener('hashchange', () => this.checkRoute()); this.checkRoute(); }, handleRoute(route) { window.history.pushState({}, '', route); this.checkRoute(); }, checkRoute() { const hash = window.location.pathname; const route = this.routes[hash] || this.routes['default']; route(); } }; // Mock data for a thread const mockThread = { id: '12345678', title: 'Ask HN: How do you manage state in complex client-side applications?', points: 842, author: 'throwaway2024', time: '9 hours ago', comments: 437, site: 'github.com', url: 'https://github.com/user/project', text: "I've been working on a large React application for two years and I'm struggling with state management. We've used Redux, Zustand, and even React Context, but there's always a point where selecting the right state management strategy becomes difficult.<p>Specifically, I'm interested in how teams handle:<p>- Caching server responses<br>- Managing form states<br>- Handling complex async flows<br>- Avoiding re-renders<p>Looking for battle-tested approaches from teams who've scaled apps to 100k+ LOC." }; // Mock comments (with nested structure) const mockComments = [ { id: 'c1', author: 'john_carmack', time: '8 hours ago', text: 'Redux is dying. Use Zustand or Jotai.', children: [ { id: 'c1a', author: 'redux_addict', time: '7 hours ago', text: 'Redux Toolkit is actually remarkably good. The boilerplate complaint is from people who haven\'t used RTK.', children: [ { id: 'c1a1', author: 'john_carmack', time: '6 hours ago', text: 'Even with RTK, the mental model is complex compared to simple observables.' } ] } ] }, { id: 'c2', author: 'dan_abramov', time: '8 hours ago', text: 'At Meta, we use [Relay](https://relay.dev) for fetching data, and [Recoil](https://recoiljs.org) for client state. Recoil handles atomic state beautifully - you compose selectors and get exactly the fine-grained updates you want.', children: [ { id: 'c2a', author: 'react_dev', time: '7 hours ago', text: 'But Recoil is still experimental. Production teams are using Zustand + React Query successfully.' } ] }, { id: 'c3', author: 'mojombo', time: '7 hours ago', text: 'State management is a lie. Most apps don\'t need centralized state. Nearly everything can be derived from the URL or API.', children: [ { id: 'c3a', author: 'skeptic', time: '6 hours ago', text: 'Try telling that to our 800 ms form interaction times.', children: [ { id: 'c3a1', author: 'mojombo', time: '6 hours ago', text: 'Sure, then you optimize specifically for perf, not general state. Use RSC + Server Actions for forms. Cache aggressively.' } ] } ] } ]; // Render a comment recursively function renderComment(comment, depth = 0) { return ` <div class="comment"> <div class="meta"> ${comment.author} ${comment.time} <span class="toggle-comments" data-id="${comment.id}">[-]</span> </div> <div class="text">${comment.text}</div> <div class="reply"><a href="#">reply</a></div> <div id="children-${comment.id}" class="${depth === 0 ? 'indent' : ''}"> ${comment.children ? comment.children.map(c => renderComment(c, depth + 1)).join('') : ''} </div> </div> `; } // Show the homepage (list view) function showHomepage() { const main = document.getElementById('main'); main.innerHTML = ` <div class="story"> <div class="title"> <a href="/item?id=${mockThread.id}" class="story-link" data-id="${mockThread.id}">${mockThread.title}</a> <span class="site">(${mockThread.site})</span> </div> <div class="meta"> ${mockThread.points} points by <a href="/user?id=${mockThread.author}">${mockThread.author}</a> <a href="/item?id=${mockThread.id}">${mockThread.time}</a> | <a href="/hide?id=${mockThread.id}">hide</a> | <a href="/past?">past</a> | <a href="/item?id=${mockThread.id}">${mockThread.comments} comments</a> </div> </div>  ${Array(9).fill(0).map((_, i) => ` <div class="story"> <div class="title"> <a href="/item?id=story${i+1}" class="story-link" data-id="${i+1}">Ask HN: What's your favorite programming tool/utility?</a> <span class="site">(github.com)</span> </div> <div class="meta"> ${243-i*20} points by <a href="/user?id=throwaway${i+1}">throwaway${i+1}</a> <a href="/item?id=story${i+1}">${i+1} hours ago</a> | <a href="/hide?id=story${i+1}">hide</a> | <a href="/past?">past</a> | <a href="/item?id=story${i+1}">${47-i*3} comments</a> </div> </div> `).join('')} <div style="margin-top:15px;"><a href="/">More</a></div> `; // Add click listeners to stories for routing document.querySelectorAll('.story-link').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); Router.handleRoute(`/item?id=${link.dataset.id}`); showThread(); }); }); } // Show the thread (detail view) function showThread() { const main = document.getElementById('main'); main.innerHTML = ` <div class="story"> <div class="title"> <a href="${mockThread.url}">${mockThread.title}</a> <span class="site">(${mockThread.site})</span> </div> <div class="meta"> ${mockThread.points} points by <a href="/user?id=${mockThread.author}">${mockThread.author}</a> <a href="/item?id=${mockThread.id}">${mockThread.time}</a> | <a href="/hide?id=${mockThread.id}">hide</a> | <a href="/past?">past</a> | <a href="#" onclick="Router.handleRoute('/'); return false;">home</a> </div> <div class="text">${mockThread.text}</div> </div> <div class="comments"> <div style="margin: 10px 0;">${mockComments.length} comments</div> ${mockComments.map(renderComment).join('')} </div> `; } // Initialize the router Router.init(); </script> </body> </html> ```

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hacker News Clone</title> <style> body { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; margin: 0; padding: 0; background-color: #f6f6ef; } .header { background-color: #ff6600; padding: 2px; font-size: 10pt; } .header table { width: 100%; border-spacing: 0; } .header td { padding: 2px; } .logo { border: 1px solid #ff6600; width: 18px; height: 18px; background-color: #fff; } .header a { color: #000; text-decoration: none; } .header a:hover { text-decoration: underline; } .container { background-color: #f6f6ef; padding: 8px; max-width: 1200px; margin: 0 auto; } .story { margin-bottom: 5px; } .story-title { font-size: 10pt; } .story-title a { color: #000; text-decoration: none; } .story-title a:visited { color: #828282; } .story-meta { font-size: 7pt; color: #828282; margin-top: 2px; } .story-meta a { color: #828282; text-decoration: none; } .story-meta a:hover { text-decoration: underline; } .rank { color: #828282; text-align: right; padding-right: 5px; font-size: 7pt; width: 25px; } .spacer { height: 5px; } .comment-page { display: none; } .comment-page.active { display: block; } .comment-header { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; } .comment { margin-bottom: 15px; border-left: 1px solid #e5e5e5; padding-left: 10px; } .comment-meta { font-size: 7pt; color: #828282; margin-bottom: 5px; } .comment-text { font-size: 9pt; line-height: 1.4; margin-bottom: 5px; } .comment-actions { font-size: 7pt; } .comment-actions a { color: #828282; text-decoration: none; margin-right: 10px; } .comment-actions a:hover { text-decoration: underline; } .reply { margin-left: 40px; margin-top: 10px; } .back-link { margin-bottom: 20px; font-size: 8pt; } .back-link a { color: #828282; text-decoration: none; } .back-link a:hover { text-decoration: underline; } </style> </head> <body> <div class="header"> <table> <tr> <td> <span class="logo"></span> </td> <td style="padding-left: 4px;"> <a href="#" onclick="showMainPage()"><b>Hacker News</b></a> </td> <td style="text-align: right; padding-right: 4px;"> <a href="#">new</a> | <a href="#">past</a> | <a href="#">comments</a> | <a href="#">ask</a> | <a href="#">show</a> | <a href="#">jobs</a> | <a href="#">submit</a> </td> </tr> </table> </div> <div class="container">  <div id="main-page"> <table> <tr> <td class="rank">1.</td> <td> <div class="story"> <div class="story-title"> <a href="#" onclick="showComments(1)">Ask HN: What's the best way to learn system design?</a> </div> <div class="story-meta"> 85 points by techuser123 3 hours ago | <a href="#" onclick="showComments(1)">67 comments</a> </div> </div> </td> </tr> <tr><td colspan="2" class="spacer"></td></tr> <tr> <td class="rank">2.</td> <td> <div class="story"> <div class="story-title"> <a href="#" onclick="showComments(2)">Show HN: I built a minimal text editor in pure JavaScript</a> </div> <div class="story-meta"> 142 points by devmaker 5 hours ago | <a href="#" onclick="showComments(2)">89 comments</a> </div> </div> </td> </tr> <tr><td colspan="2" class="spacer"></td></tr> <tr> <td class="rank">3.</td> <td> <div class="story"> <div class="story-title"> <a href="#" onclick="showComments(3)">The Future of Web Development: WebAssembly vs JavaScript</a> </div> <div class="story-meta"> 203 points by webdev_guru 7 hours ago | <a href="#" onclick="showComments(3)">156 comments</a> </div> </div> </td> </tr> <tr><td colspan="2" class="spacer"></td></tr> <tr> <td class="rank">4.</td> <td> <div class="story"> <div class="story-title"> <a href="#" onclick="showComments(4)">Why I switched from React to Vue and never looked back</a> </div> <div class="story-meta"> 78 points by frontend_fan 8 hours ago | <a href="#" onclick="showComments(4)">92 comments</a> </div> </div> </td> </tr> <tr><td colspan="2" class="spacer"></td></tr> <tr> <td class="rank">5.</td> <td> <div class="story"> <div class="story-title"> <a href="#" onclick="showComments(5)">Ask HN: Best practices for remote team collaboration?</a> </div> <div class="story-meta"> 56 points by remoteworker 12 hours ago | <a href="#" onclick="showComments(5)">43 comments</a> </div> </div> </td> </tr> </table> </div>  <div id="comments-1" class="comment-page"> <div class="back-link"> <a href="#" onclick="showMainPage()">← Back to main page</a> </div> <div class="comment-header"> <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;"> Ask HN: What's the best way to learn system design? </div> <div class="story-meta"> 85 points by techuser123 3 hours ago | 67 comments </div> </div> <div class="comment"> <div class="comment-meta">systemsexpert 2 hours ago</div> <div class="comment-text"> I'd recommend starting with "Designing Data-Intensive Applications" by Martin Kleppmann. It's an excellent foundation for understanding distributed systems concepts. </div> <div class="comment-actions"> <a href="#">reply</a> </div> <div class="comment reply"> <div class="comment-meta">techuser123 2 hours ago</div> <div class="comment-text"> Thanks! I've heard great things about that book. Any specific chapters you'd recommend starting with? </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> </div> <div class="comment"> <div class="comment-meta">cloudarchitect 1 hour ago</div> <div class="comment-text"> Practice is key! I'd suggest building small distributed systems projects. Start with a simple chat application using websockets, then move to more complex scenarios like building a URL shortener or designing a basic social media feed. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> <div class="comment"> <div class="comment-meta">scalability_pro 45 minutes ago</div> <div class="comment-text"> Don't forget about the fundamentals! Make sure you understand: <br>• CAP theorem <br>• Database sharding vs replication <br>• Load balancing strategies <br>• Caching patterns (Redis, Memcached) <br>• Message queues (Kafka, RabbitMQ) </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> </div> <div id="comments-2" class="comment-page"> <div class="back-link"> <a href="#" onclick="showMainPage()">← Back to main page</a> </div> <div class="comment-header"> <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;"> Show HN: I built a minimal text editor in pure JavaScript </div> <div class="story-meta"> 142 points by devmaker 5 hours ago | 89 comments </div> </div> <div class="comment"> <div class="comment-meta">jsdev_ninja 4 hours ago</div> <div class="comment-text"> This is really impressive! How did you handle syntax highlighting without any external libraries? </div> <div class="comment-actions"> <a href="#">reply</a> </div> <div class="comment reply"> <div class="comment-meta">devmaker 4 hours ago</div> <div class="comment-text"> Thanks! I used regular expressions to tokenize the code and wrapped different token types in spans with CSS classes. It's not as sophisticated as Monaco or CodeMirror, but it works well for basic highlighting. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> </div> <div class="comment"> <div class="comment-meta">performance_guru 3 hours ago</div> <div class="comment-text"> How's the performance with large files? I'm curious about your approach to handling documents with thousands of lines. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> <div class="comment"> <div class="comment-meta">codereviewer 2 hours ago</div> <div class="comment-text"> Nice work! A few suggestions: <br>• Consider implementing virtual scrolling for better performance <br>• Add keyboard shortcuts (Ctrl+S, Ctrl+Z, etc.) <br>• Maybe add a plugin system for extensibility? </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> </div> <div id="comments-3" class="comment-page"> <div class="back-link"> <a href="#" onclick="showMainPage()">← Back to main page</a> </div> <div class="comment-header"> <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;"> The Future of Web Development: WebAssembly vs JavaScript </div> <div class="story-meta"> 203 points by webdev_guru 7 hours ago | 156 comments </div> </div> <div class="comment"> <div class="comment-meta">wasmexpert 6 hours ago</div> <div class="comment-text"> I think the comparison is missing the point. WebAssembly isn't meant to replace JavaScript entirely - they're complementary technologies. WASM excels at computationally intensive tasks while JS remains perfect for DOM manipulation and general web scripting. </div> <div class="comment-actions"> <a href="#">reply</a> </div> <div class="comment reply"> <div class="comment-meta">webdev_guru 5 hours ago</div> <div class="comment-text"> You're absolutely right! I should have emphasized that point more in the article. They work best together, not as competitors. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> </div> <div class="comment"> <div class="comment-meta">rust_dev 5 hours ago</div> <div class="comment-text"> The ability to compile Rust, C++, and Go to WebAssembly is game-changing for web performance. We're seeing 10x performance improvements in our data processing pipelines by using WASM modules instead of pure JS. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> <div class="comment"> <div class="comment-meta">skeptical_dev 4 hours ago</div> <div class="comment-text"> While WASM is impressive, let's not forget the debugging experience is still quite poor compared to JavaScript. The tooling needs to mature before widespread adoption. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> </div> <div id="comments-4" class="comment-page"> <div class="back-link"> <a href="#" onclick="showMainPage()">← Back to main page</a> </div> <div class="comment-header"> <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;"> Why I switched from React to Vue and never looked back </div> <div class="story-meta"> 78 points by frontend_fan 8 hours ago | 92 comments </div> </div> <div class="comment"> <div class="comment-meta">react_advocate 7 hours ago</div> <div class="comment-text"> Interesting perspective! What specific pain points did you encounter with React that Vue solved better? </div> <div class="comment-actions"> <a href="#">reply</a> </div> <div class="comment reply"> <div class="comment-meta">frontend_fan 7 hours ago</div> <div class="comment-text"> Mainly the learning curve for new team members and the verbosity of certain patterns. Vue's template syntax felt more intuitive, and the single-file components made organization cleaner for our use case. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> </div> <div class="comment"> <div class="comment-meta">framework_neutral 6 hours ago</div> <div class="comment-text"> Both are excellent frameworks. The choice often comes down to team expertise, project requirements, and ecosystem needs. React has a larger ecosystem, but Vue definitely has a gentler learning curve. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> </div> <div id="comments-5" class="comment-page"> <div class="back-link"> <a href="#" onclick="showMainPage()">← Back to main page</a> </div> <div class="comment-header"> <div class="story-title" style="font-size: 12pt; margin-bottom: 5px;"> Ask HN: Best practices for remote team collaboration? </div> <div class="story-meta"> 56 points by remoteworker 12 hours ago | 43 comments </div> </div> <div class="comment"> <div class="comment-meta">remote_manager 11 hours ago</div> <div class="comment-text"> Communication is everything! We use Slack for quick updates, have daily standups via video call, and maintain detailed project documentation in Notion. The key is being intentional about async communication. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> <div class="comment"> <div class="comment-meta">distributed_team_lead 10 hours ago</div> <div class="comment-text"> Don't underestimate the importance of overlap hours when working across time zones. We ensure at least 4 hours of overlap between team members and schedule important meetings during those windows. </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> <div class="comment"> <div class="comment-meta">productivity_hacker 9 hours ago</div> <div class="comment-text"> Tools that have worked well for us: <br>• Figma for design collaboration <br>• Linear for project management <br>• Loom for async video explanations <br>• GitHub for code reviews and discussions </div> <div class="comment-actions"> <a href="#">reply</a> </div> </div> </div> </div> <script> function showMainPage() { // Hide all comment pages const commentPages = document.querySelectorAll('.comment-page'); commentPages.forEach(page => page.classList.remove('active')); // Show main page document.getElementById('main-page').style.display = 'block'; // Update URL without page reload history.pushState({page: 'main'}, 'Hacker News Clone', '#main'); } function showComments(storyId) { // Hide main page document.getElementById('main-page').style.display = 'none'; // Hide all comment pages const commentPages = document.querySelectorAll('.comment-page'); commentPages.forEach(page => page.classList.remove('active')); // Show specific comment page document.getElementById(`comments-${storyId}`).classList.add('active'); // Update URL without page reload history.pushState({page: 'comments', storyId: storyId}, `Story ${storyId} Comments`, `#comments-${storyId}`); } // Handle browser back/forward buttons window.addEventListener('popstate', function(event) { if (event.state) { if (event.state.page === 'main') { showMainPage(); } else if (event.state.page === 'comments') { showComments(event.state.storyId); } } else { showMainPage(); } }); // Initialize the page history.replaceState({page: 'main'}, 'Hacker News Clone', '#main'); </script> </body> </html> ```