tomcritchlow.github.io/stories-test.html at master · tomcritchlow/tomcritchlow.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Stories Prototype</title>
    <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            background: #f8f9fa;
            font-family: sans-serif;
        }
        .stories-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow-y: auto;
            scroll-snap-type: y mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .stories-container::-webkit-scrollbar {
            display: none;
        }
        .story {
            scroll-snap-align: start;
            min-height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .hero-image {
            width: 100%;
            height: 40vh;
            object-fit: cover;
        }
        .story-content {
            padding: 20px;
            width: 90%;
            text-align: left;
        }
        .story-headline {
            font-size:30px;
        }
        .story-byline {
            font-size: 0.9rem;
            color: #777;
            margin-bottom: 10px;
        }
        .story-paragraph {
            font-size: 1rem;
            color: #444;
            margin-bottom: 15px;
        }
        .story-link {
            display: inline-block;
            background: #E5EDFF;
            padding: 10px 20px;
            border-radius: 12px;
            text-decoration: none;
            text-align: center;
        }
        .story-link:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="stories-container" id="stories-container">
    </div>

    <script>
        const stories = [
            {
                headline: "Google’s co-founder tells AI staff to stop ‘building nanny products’",
                byline: "by Alex Heath on Feb 28, 2025",
                paragraph: "For the last couple years, it has been evident that Google co-founder Sergey Brin is back in the building. This week, he sent a clear message to hundreds of employees in Google’s DeepMind AI division, known as GDM: the pressure to win the AGI race is on.",
                image: "https://platform.theverge.com/wp-content/uploads/sites/2/2025/02/Sergey-Brin-CL-site-wide-2.png?quality=90&strip=all&crop=0%2C10.732984293194%2C100%2C78.534031413613&w=1200",
                url: "https://www.theverge.com/command-line-newsletter/622045/google-ai-nanny-products"
            },
            {
                headline: "Nets' Cam Thomas Talks About Return to Action",
                byline: "by Declan Harris on Mar 1, 2025",
                paragraph: "On Friday night, the Brooklyn Nets welcomed the Portland Trail Blazers into the Barclays Center, as they looked to cap off February, looking to extend their winning record throughout the month.Things would be looking up for the Nets as they welcomed back their leading scorer, Cam Thomas, back into the starting lineup after he had spent nearly two months on the bench due to a strained left hamstring.",
                image: "https://images2.minutemediacdn.com/image/upload/c_crop,w_1924,h_1082,x_0,y_235/c_fill,w_1440,ar_16:9,f_auto,q_auto,g_auto/images/ImagnImages/mmsport/inside_the_nets/01jn9zqz0d83bv00sr42.jpg",
                url: "https://www.si.com/nba/nets/news/brooklyn-nets-cam-thomas-talks-about-return-to-action"
            },
            {
        "headline": "Siri\u2019s real AI upgrade could still be years away",
        "byline": "By Wes Davis",
        "paragraph": "Apple Intelligence was supposed to finally deliver a more natural version of Siri, but now, people who work in Apple\u2019s AI department believe the company won\u2019t release a \u201dtrue modernized, conversational version of Siri \u2026 until iOS 20 at best in 2027,\u201c writes Bloomberg\u2019s Mark Gurman in today\u2019s Power O...",
        "image": "https://platform.theverge.com/wp-content/uploads/sites/2/2025/02/STK071_APPLE_B.jpg?quality=90&strip=all&crop=0%2C10.732984293194%2C100%2C78.534031413613&w=1200",
        "url": "https://www.theverge.com/news/622465/siris-real-ai-upgrade-could-still-be-years-away"
    },
    {
        "headline": "Bluey makes her Lego debut at Toy Fair",
        "byline": "By Alice Jovan\u00e9e",
        "paragraph": "A brand new lineup of five Bluey Lego sets, inspired by everyone\u2019s favorite precocious Blue Heeler and her family, are set to arrive on June 1. While the collaboration with Bluey was teased back in January, Lego officially unveiled the entire lineup at this year\u2019s Toy Fair, which includes three trad...",
        "image": "https://platform.polygon.com/wp-content/uploads/sites/2/2025/02/Screenshot-2025-02-28-124709.png?quality=90&strip=all&crop=0%2C1.9063928663035%2C100%2C96.187214267393&w=1200",
        "url": "https://www.polygon.com/news/531810/lego-bluey-set-where-to-buy-toy-fair"
    },
    {
        "headline": "Best design codes and how to enter design codes in Monster Hunter Wilds",
        "byline": "By Ana Diaz",
        "paragraph": "Design codes in Monster Hunter Wilds allow you to load pre-made designs for your hunter during the character creator, formally called the \u201ccharacter editor.\u201d\nBest design codes and how to enter design codes in Monster Hunter Wilds\nHow to get an expertly made pre-designed character\nIt\u2019s perfect for pe...",
        "image": "https://platform.polygon.com/wp-content/uploads/sites/2/2025/02/polygon-mosaic-21-1.png?quality=90&strip=all&crop=0%2C10.732984293194%2C100%2C78.534031413613&w=1200",
        "url": "https://www.polygon.com/monster-hunter-wilds-guide/530854/character-creator-editor-codes-how-to-enter-create"
    },
    {
        "headline": "Lego is giving away an exclusive Steering Wheel for free. Here\u2019s how to get yours.",
        "byline": "By Joseph Green",
        "paragraph": "FREE LEGO: On March 9, build a Lego Steering Wheel model at participating stores and take it home with you for free. Find participating stores here.\nLego has been feeling generous lately. On Feb. 9, customers had the opportunity to build a Lego Valentine's Day Heart and take it home with them for fr...",
        "image": "https://helios-i.mashable.com/imagery/articles/017iJYMjqmRFhyrURzpOs8X/hero-image.fill.size_1200x675.v1740661790.jpg",
        "url": "https://mashable.com/article/free-lego-steering-wheel-deal"
    },
    {
        "headline": "Animals are swept up in the 'Flow' of this Oscar-nominated flood film",
        "byline": "By Unknown Author",
        "paragraph": "Review\nMovie Reviews\nReview\nMovie Reviews\nAnimals are swept up in the 'Flow' of this Oscar-nominated flood film\nAnimals are swept up in the 'Flow' of this Oscar-nominated flood film\nPerhaps the most famous line in ancient Greek thought comes from the philosopher Heraclitus, who said, You cannot step...",
        "image": "https://npr.brightspotcdn.com/dims3/default/strip/false/crop/1600x900+0+0/resize/1400/quality/100/format/jpeg/?url=http%3A%2F%2Fnpr-brightspot.s3.amazonaws.com%2F29%2F18%2F9df7dad34ae18f54a3f2025ee3e6%2F34685id-0002-flow-image-019-w1600.jpg",
        "url": "https://www.npr.org/2025/02/28/nx-s1-5307209/flow-review-oscars"
    },
    {
        "headline": "20 Italian Recipes You\u2019ve Probably Never Tried",
        "byline": "By https://www.facebook.com/allrecipes",
        "paragraph": "Recipes Global Cuisines European Italian 20 Italian Recipes You\u2019ve Probably Never Tried You're bound to find one you\u2019ve missed out on. By Keaton Larson Keaton Larson Keaton Larson is a SEO writer for Allrecipes. He has worked in the front and back of house of many restaurants, doing everything for s...",
        "image": "https://www.allrecipes.com/thmb/999Nazx_EH8i52qMxw9JojHlMME=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/8727930_Lemon-Garlic-Butter-Chicken-Spiedini_Dotdash-Meredith-Food-Studios_2x1-63ade32e4ea042cba5d14dd719acd75e.jpg",
        "url": "https://www.allrecipes.com/italian-recipes-youve-never-tried-11688055"
    },
    {
        "headline": "What Does a Robot With a Soul Sound Like?",
        "byline": "By Hanna Rosin",
        "paragraph": "What Does a Robot With a Soul Sound Like?\nThe Wild Robot\u2019s sound designer breaks it down.\nSubscribe here: Apple Podcasts | Spotify | YouTube | Overcast | Pocket Casts\nThe movie The Wild Robot features a robot with a quality that, in a different context, would put the audience on alert: an operating ...",
        "image": "https://cdn.theatlantic.com/thumbor/eG3wLzFTW7B8Lj-8t9cuWRpPiPQ=/0x81:4000x2164/1200x625/media/img/mt/2025/02/Radio_Atlantic_the_wild_robot_horizontal/original.jpg",
        "url": "https://www.theatlantic.com/podcasts/archive/2025/02/wild-robot-sound-design/681856/"
    }
        ];

        const storiesContainer = document.getElementById("stories-container");

        function preloadImages() {
            stories.forEach(story => {
                const img = new Image();
                img.src = story.image;
            });
        }

        function truncateText(text, maxLength) {
            return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
        }

        function getDomain(url) {
           return new URL(url).hostname.replace("www.", ""); // Removes 'www.' for a cleaner look
        }

        function renderStories() {
            stories.forEach(story => {
                const storyElement = document.createElement("div");
                storyElement.classList.add("story");

                storyElement.innerHTML = `
                    <img class="hero-image" src="${story.image}" alt="Story image">
                    <div class="ph3 pv4 w-100">
                        <div class="story-headline fw4 lh-title">${story.headline}</div>
                        <div class="story-byline flex mv3"><img class="dib h1 pr2" src="https://www.google.com/s2/favicons?sz=64&domain_url=${story.url}" />${getDomain(story.url)} ${story.byline}</div>
                        <div class="lh-copy"><p>${truncateText(story.paragraph,250)}</p></div>
                        <a class="story-link link black fr mt4" href="${story.url}" target="_blank">read more on ${getDomain(story.url)} ></a>
                    </div>
                `;
                storiesContainer.appendChild(storyElement);
            });
        }

        preloadImages();
        renderStories();
    </script>
</body>
</html>