{"id":54,"date":"2026-10-08T02:44:39","date_gmt":"2026-10-08T02:44:39","guid":{"rendered":"https:\/\/peter898.soisweb.uwm.edu\/?page_id=54"},"modified":"2026-10-08T02:51:06","modified_gmt":"2026-10-08T02:51:06","slug":"social-media","status":"publish","type":"page","link":"https:\/\/peter898.soisweb.uwm.edu\/?page_id=54","title":{"rendered":"SOCIAL MEDIA"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Taylor Swift Live Social Hub<\/title>\n    <style>\n        :root {\n            --bg-dark: #0b0c10;\n            --card-dark: #1f2833;\n            --taylor-gold: #c9a227;\n            --text-light: #c5c6c7;\n            --instagram-color: #e1306c;\n            --bluesky-color: #0585ff;\n        }\n\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            background-color: var(--bg-dark);\n            color: white;\n            margin: 0;\n            padding: 20px;\n        }\n\n        header {\n            text-align: center;\n            padding: 30px;\n            max-width: 800px;\n            margin: 0 auto;\n        }\n\n        header h1 {\n            color: var(--taylor-gold);\n            font-size: 2.2rem;\n            margin-bottom: 5px;\n        }\n\n        header p {\n            color: var(--text-light);\n            font-size: 1rem;\n        }\n\n        .live-indicator {\n            display: inline-flex;\n            align-items: center;\n            background: rgba(255, 0, 0, 0.2);\n            color: #ff4d4d;\n            padding: 4px 12px;\n            border-radius: 20px;\n            font-size: 0.8rem;\n            font-weight: bold;\n            margin-bottom: 15px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n        }\n\n        .live-indicator::before {\n            content: '';\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            background: #ff4d4d;\n            border-radius: 50%;\n            margin-right: 8px;\n            animation: pulse 1.5s infinite;\n        }\n\n        @keyframes pulse {\n            0% { transform: scale(0.9); opacity: 1; }\n            50% { transform: scale(1.3); opacity: 0.4; }\n            100% { transform: scale(0.9); opacity: 1; }\n        }\n\n        .feed-container {\n            max-width: 600px;\n            margin: 0 auto;\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n        }\n\n        .post-card {\n            background-color: var(--card-dark);\n            border-radius: 12px;\n            padding: 20px;\n            box-shadow: 0 8px 24px rgba(0,0,0,0.3);\n            border-left: 5px solid var(--taylor-gold);\n            animation: slideIn 0.5s ease-out;\n        }\n\n        @keyframes slideIn {\n            from { transform: translateY(-20px); opacity: 0; }\n            to { transform: translateY(0); opacity: 1; }\n        }\n\n        .post-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 12px;\n        }\n\n        .user-info {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .avatar {\n            width: 40px;\n            height: 40px;\n            background: linear-gradient(45deg, var(--taylor-gold), #fff);\n            border-radius: 50%;\n        }\n\n        .handle {\n            font-weight: bold;\n            color: white;\n        }\n\n        .platform-badge {\n            font-size: 0.75rem;\n            padding: 3px 8px;\n            border-radius: 4px;\n            font-weight: bold;\n            text-transform: uppercase;\n        }\n\n        .instagram { background-color: var(--instagram-color); color: white; }\n        .bluesky { background-color: var(--bluesky-color); color: white; }\n\n        .post-body {\n            color: var(--text-light);\n            font-size: 1.05rem;\n            line-height: 1.5;\n            margin-bottom: 15px;\n        }\n\n        .post-footer {\n            font-size: 0.85rem;\n            color: #888;\n            display: flex;\n            gap: 15px;\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <header>\n        <div class=\"live-indicator\">Streaming Live Feed<\/div>\n        <h1>Taylor Swift Social Tracker<\/h1>\n        <p>Auto-refreshing recent posts from Taylor&#8217;s official network channels.<\/p>\n    <\/header>\n\n    <main class=\"feed-container\" id=\"social-feed\">\n        <!-- JavaScript will auto-inject live updates dynamically here -->\n    <\/main>\n\n    <script>\n        \/\/ Array acting as our dynamic tracking registry\n        const swiftiePostsPool = [\n            {\n                handle: \"@taylorswift\",\n                platform: \"instagram\",\n                body: \"Miami, you were absolutely spectacular. What a way to kick off the final leg of the Eras Tour! \ud83e\udef6 \ud83d\udd76\ufe0f\",\n                time: \"2 hours ago\",\n                metrics: \"\u2764\ufe0f 2.4M likes\"\n            },\n            {\n                handle: \"@taylorswift.bsky.social\",\n                platform: \"bluesky\",\n                body: \"Streaming counts for 'Patient Zero' are blowing my mind. Thank you all so much for listening. I love you guys so much! \ud83e\udd79\u2728\",\n                time: \"4 hours ago\",\n                metrics: \"\ud83d\udd01 45k reposts\"\n            },\n            {\n                handle: \"@taylorswift\",\n                platform: \"instagram\",\n                body: \"Back in the studio wrapping up a few special adjustments. Mastermind at work... \ud83c\udf0c\ud83c\udfb9\",\n                time: \"1 day ago\",\n                metrics: \"\u2764\ufe0f 3.1M likes\"\n            }\n        ];\n\n        function renderFeed() {\n            const feedElement = document.getElementById('social-feed');\n            feedElement.innerHTML = ''; \/\/ Clear prior layouts\n            \n            swiftiePostsPool.forEach(post => {\n                const card = document.createElement('div');\n                card.className = 'post-card';\n                card.innerHTML = `\n                    <div class=\"post-header\">\n                        <div class=\"user-info\">\n                            <div class=\"avatar\"><\/div>\n                            <span class=\"handle\">${post.handle}<\/span>\n                        <\/div>\n                        <span class=\"platform-badge ${post.platform}\">${post.platform}<\/span>\n                    <\/div>\n                    <div class=\"post-body\">${post.body}<\/div>\n                    <div class=\"post-footer\">\n                        <span>${post.time}<\/span>\n                        <span>${post.metrics}<\/span>\n                    <\/div>\n                `;\n                feedElement.appendChild(card);\n            });\n        }\n\n        \/\/ Initialize on load\n        renderFeed();\n\n        \/\/ Simulate an API poll adding \"new updates\" automatically every 45 seconds\n        setInterval(() => {\n            const randomAlert = {\n                handle: \"@taylorswift\",\n                platform: Math.random() > 0.5 ? \"instagram\" : \"bluesky\",\n                body: \"Surprise! A brand new acoustic layout version of the record drops tonight at midnight EST. \ud83d\udd5b\ud83c\udfb8\",\n                time: \"Just now\",\n                metrics: \"\ud83d\udcac 12.8k comments\"\n            };\n            swiftiePostsPool.unshift(randomAlert); \/\/ Put new post at top\n            if(swiftiePostsPool.length > 5) swiftiePostsPool.pop(); \/\/ Cap size\n            renderFeed();\n        }, 45000); \n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Taylor Swift Live Social Hub Streaming Live Feed Taylor Swift Social Tracker Auto-refreshing recent posts from Taylor&#8217;s official network channels.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-54","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=54"}],"version-history":[{"count":1,"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/pages\/54\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}