It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate.

Source: https://Www.marvelfight.cc/

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8"/>
  6. <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  7. <!-- SEO Meta Tags -->
  8. <title>MarvelFight | Marvel Game News & Strategy Hub</title>
  9. <meta content="MarvelFight is a professional Marvel game strategy and news platform, providing the latest guides, character builds, team compositions, in-depth analysis, and version previews for Marvel Super War, Marvel Future Fight, Marvel Contest of Champions, and more. Your one-stop destination for all Marvel game enthusiasts!" name="description"/>
  10. <meta content=":Marvel game guides,Marvel Super War guide,Marvel Future Fight guide,Marvel Contest of Champions guide,Marvel games,character builds,team compositions,Marvel news,game strategies,MarvelFight" name="keywords"/>
  11. <link href="https://www.marvelfight.cc/" rel="canonical"/>
  12. <link href="/game_logo.png" rel="icon" type="image/x-icon"/>
  13. <style>
  14.        /* Global Styles */
  15.        :root {
  16.            --primary-color: #e23636; /* Marvel red */
  17.            --secondary-color: #0476f2; /* Marvel blue */
  18.            --accent-color: #ffd700; /* Gold for highlights */
  19.            --dark-bg: #1a1a1a;
  20.            --light-bg: #f5f5f5;
  21.            --text-light: #ffffff;
  22.            --text-dark: #333333;
  23.        }
  24.        
  25.        * {
  26.            margin: 0;
  27.            padding: 0;
  28.            box-sizing: border-box;
  29.            font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  30.        }
  31.        
  32.        body {
  33.            background-color: var(--dark-bg);
  34.            color: var(--text-light);
  35.            overflow-x: hidden;
  36.            background-image: linear-gradient(60deg, #1a1a1a 0%, #2c2c2c 100%);
  37.        }
  38.        
  39.        /* Custom Scrollbar */
  40.        ::-webkit-scrollbar {
  41.            width: 8px;
  42.        }
  43.        
  44.        ::-webkit-scrollbar-track {
  45.            background: var(--dark-bg);
  46.        }
  47.        
  48.        ::-webkit-scrollbar-thumb {
  49.            background: var(--primary-color);
  50.            border-radius: 4px;
  51.        }
  52.        
  53.        /* Header Styles */
  54.        .header {
  55.            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  56.            padding: 1rem 0;
  57.            position: sticky;
  58.            top: 0;
  59.            z-index: 1000;
  60.            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  61.        }
  62.        
  63.        .navbar {
  64.            display: flex;
  65.            justify-content: space-between;
  66.            align-items: center;
  67.            max-width: 1200px;
  68.            margin: 0 auto;
  69.            padding: 0 2rem;
  70.        }
  71.        
  72.        .logo {
  73.            font-size: 2rem;
  74.            font-weight: 800;
  75.            letter-spacing: 1px;
  76.            color: var(--text-light);
  77.            text-transform: uppercase;
  78.            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  79.        }
  80.        
  81.        .logo span {
  82.            color: var(--accent-color);
  83.        }
  84.        
  85.        .nav-links {
  86.            display: flex;
  87.            list-style: none;
  88.        }
  89.        
  90.        .nav-links li {
  91.            margin-left: 2rem;
  92.        }
  93.        
  94.        .nav-links a {
  95.            color: var(--text-light);
  96.            text-decoration: none;
  97.            font-weight: 600;
  98.            font-size: 1.1rem;
  99.            text-transform: uppercase;
  100.            letter-spacing: 1px;
  101.            transition: all 0.3s ease;
  102.            position: relative;
  103.            padding-bottom: 8px;
  104.        }
  105.        
  106.        .nav-links a:hover {
  107.            color: var(--accent-color);
  108.        }
  109.        
  110.        .nav-links a::after {
  111.            content: '';
  112.            position: absolute;
  113.            width: 0;
  114.            height: 3px;
  115.            bottom: -5px;
  116.            left: 0;
  117.            background-color: var(--accent-color);
  118.            transition: width 0.3s ease;
  119.        }
  120.        
  121.        .nav-links a:hover::after, .nav-links a.active::after {
  122.            width: 100%;
  123.        }
  124.  
  125.        .nav-links a.active {
  126.            color: var(--accent-color);
  127.        }
  128.        
  129.        /* Hero Section */
  130.        .hero {
  131.            height: 80vh;
  132.            background-image: url('https://wallpapercave.com/wp/wp9096042.jpg');
  133.            background-size: cover;
  134.            background-position: center;
  135.            position: relative;
  136.            color: var(--text-light);
  137.            display: flex;
  138.            align-items: center;
  139.            justify-content: center;
  140.        }
  141.        
  142.        .hero::before {
  143.            content: '';
  144.            position: absolute;
  145.            top: 0;
  146.            left: 0;
  147.            width: 100%;
  148.            height: 100%;
  149.            background: rgba(0, 0, 0, 0.6);
  150.        }
  151.        
  152.        .hero-content {
  153.            position: relative;
  154.            z-index: 1;
  155.            text-align: center;
  156.            max-width: 800px;
  157.            padding: 0 2rem;
  158.        }
  159.        
  160.        .hero h1 {
  161.            font-size: 4rem;
  162.            margin-bottom: 1rem;
  163.            text-transform: uppercase;
  164.            letter-spacing: 2px;
  165.            text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  166.            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
  167.            -webkit-background-clip: text;
  168.            -webkit-text-fill-color: transparent;
  169.        }
  170.        
  171.        .hero p {
  172.            font-size: 1.2rem;
  173.            margin-bottom: 2rem;
  174.            line-height: 1.5;
  175.        }
  176.        
  177.        .hero-btn {
  178.            display: inline-block;
  179.            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  180.            color: var(--text-light);
  181.            padding: 1rem 2.5rem;
  182.            font-size: 1.1rem;
  183.            text-transform: uppercase;
  184.            text-decoration: none;
  185.            border-radius: 50px;
  186.            font-weight: 600;
  187.            letter-spacing: 1px;
  188.            transition: transform 0.3s ease, box-shadow 0.3s ease;
  189.            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  190.            cursor: pointer;
  191.        }
  192.        
  193.        .hero-btn:hover {
  194.            transform: translateY(-5px);
  195.            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  196.        }
  197.        
  198.        /* Generic Section Styles */
  199.        .content-section {
  200.            padding: 5rem 2rem;
  201.        }
  202.        .content-section .container {
  203.            max-width: 1200px;
  204.            margin: 0 auto;
  205.        }
  206.        
  207.        .section-title {
  208.            text-align: center;
  209.            font-size: 2.5rem;
  210.            margin-bottom: 3rem;
  211.            text-transform: uppercase;
  212.            letter-spacing: 2px;
  213.            color: var(--accent-color);
  214.            position: relative;
  215.            padding-bottom: 1rem;
  216.        }
  217.        
  218.        .section-title::after {
  219.            content: '';
  220.            position: absolute;
  221.            width: 100px;
  222.            height: 5px;
  223.            bottom: 0;
  224.            left: 50%;
  225.            transform: translateX(-50%);
  226.            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  227.        }
  228.        
  229.        .article-grid {
  230.            display: grid;
  231.            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  232.            gap: 2rem;
  233.        }
  234.        
  235.        .article-card {
  236.            background: rgba(255, 255, 255, 0.05);
  237.            border-radius: 15px;
  238.            overflow: hidden;
  239.            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  240.            transition: transform 0.3s ease, box-shadow 0.3s ease;
  241.            position: relative;
  242.            display: flex;
  243.            flex-direction: column;
  244.        }
  245.        
  246.        .article-card:hover {
  247.            transform: translateY(-10px);
  248.            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  249.        }
  250.        
  251.        .article-img-link {
  252.            display: block;
  253.            height: 220px;
  254.            overflow: hidden;
  255.        }
  256.        
  257.        .article-img-link img {
  258.            width: 100%;
  259.            height: 100%;
  260.            object-fit: cover;
  261.            transition: transform 0.5s ease;
  262.        }
  263.        
  264.        .article-card:hover .article-img-link img {
  265.            transform: scale(1.1);
  266.        }
  267.        
  268.        .article-tag {
  269.            position: absolute;
  270.            top: 15px;
  271.            left: 15px;
  272.            background: var(--primary-color);
  273.            color: var(--text-light);
  274.            padding: 0.5rem 1rem;
  275.            border-radius: 50px;
  276.            font-weight: 600;
  277.            font-size: 0.8rem;
  278.            text-transform: uppercase;
  279.            letter-spacing: 1px;
  280.        }
  281.        
  282.        .article-content {
  283.            padding: 1.5rem;
  284.            flex-grow: 1;
  285.            display: flex;
  286.            flex-direction: column;
  287.        }
  288.        
  289.        .article-title {
  290.            font-size: 1.5rem;
  291.            margin-bottom: 0.5rem;
  292.            color: var(--text-light);
  293.        }
  294.        
  295.        .article-excerpt {
  296.            color: #cccccc;
  297.            margin-bottom: 1rem;
  298.            line-height: 1.5;
  299.            flex-grow: 1;
  300.        }
  301.        
  302.        .article-meta {
  303.            display: flex;
  304.            justify-content: space-between;
  305.            align-items: center;
  306.            font-size: 0.9rem;
  307.            color: #999999;
  308.            margin-top: auto;
  309.        }
  310.        
  311.        .article-author {
  312.            display: flex;
  313.            align-items: center;
  314.        }
  315.        
  316.        .article-author-icon {
  317.            width: 25px;
  318.            height: 25px;
  319.            border-radius: 50%;
  320.            margin-right: 0.5rem;
  321.            background-color: var(--secondary-color);
  322.            display: inline-flex;
  323.            justify-content: center;
  324.            align-items: center;
  325.            font-weight: bold;
  326.        }
  327.  
  328.        /* Popular Tags Section */
  329.        .tags-section {
  330.            background-color: rgba(255, 215, 0, 0.05);
  331.        }
  332.        .tags-container {
  333.            text-align: center;
  334.        }
  335.        .tags-list {
  336.            display: flex;
  337.            flex-wrap: wrap;
  338.            justify-content: center;
  339.            gap: 1rem;
  340.            list-style: none;
  341.            padding: 0;
  342.        }
  343.        .tags-list a {
  344.            display: inline-block;
  345.            background: rgba(255, 255, 255, 0.1);
  346.            color: var(--accent-color);
  347.            padding: 0.5rem 1.5rem;
  348.            border-radius: 50px;
  349.            text-decoration: none;
  350.            font-weight: 600;
  351.            border: 1px solid rgba(255, 215, 0, 0.2);
  352.            transition: all 0.3s ease;
  353.        }
  354.        .tags-list a:hover {
  355.            background: var(--accent-color);
  356.            color: var(--dark-bg);
  357.            transform: translateY(-3px);
  358.            box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2);
  359.        }
  360.  
  361.        /* Community Section */
  362.        .community {
  363.            background-color: rgba(226, 54, 54, 0.1);
  364.            padding: 5rem 2rem;
  365.        }
  366.        
  367.        .community-container {
  368.            max-width: 1200px;
  369.            margin: 0 auto;
  370.            display: flex;
  371.            flex-direction: column;
  372.            align-items: center;
  373.        }
  374.        
  375.        .community-text {
  376.            text-align: center;
  377.            max-width: 700px;
  378.            margin-bottom: 3rem;
  379.        }
  380.        
  381.        .community-text p {
  382.            font-size: 1.2rem;
  383.            color: #cccccc;
  384.            line-height: 1.6;
  385.            margin-bottom: 2rem;
  386.        }
  387.        
  388.        /* Newsletter */
  389.        .newsletter {
  390.            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  391.            padding: 4rem 2rem;
  392.            color: var(--text-light);
  393.            text-align: center;
  394.        }
  395.        
  396.        .newsletter h2 {
  397.            font-size: 2.5rem;
  398.            margin-bottom: 1rem;
  399.        }
  400.        
  401.        .newsletter p {
  402.            max-width: 600px;
  403.            margin: 0 auto 2rem;
  404.            font-size: 1.1rem;
  405.        }
  406.        
  407.        .newsletter-form {
  408.            display: flex;
  409.            max-width: 500px;
  410.            margin: 0 auto;
  411.            overflow: hidden;
  412.            border-radius: 50px;
  413.            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  414.        }
  415.        
  416.        .newsletter-input {
  417.            flex: 1;
  418.            padding: 1rem 1.5rem;
  419.            border: none;
  420.            outline: none;
  421.            font-size: 1rem;
  422.        }
  423.        
  424.        .newsletter-btn {
  425.            background: var(--dark-bg);
  426.            color: var(--text-light);
  427.            border: none;
  428.            padding: 1rem 1.5rem;
  429.            cursor: pointer;
  430.            font-weight: 600;
  431.            text-transform: uppercase;
  432.            letter-spacing: 1px;
  433.            transition: background 0.3s ease;
  434.        }
  435.        
  436.        .newsletter-btn:hover {
  437.            background: #000000;
  438.        }
  439.        
  440.        /* Footer */
  441.        .footer {
  442.            background-color: #0e0e0e;
  443.            padding: 4rem 2rem 2rem;
  444.        }
  445.        
  446.        .footer-container {
  447.            max-width: 1200px;
  448.            margin: 0 auto;
  449.        }
  450.        
  451.        .footer-grid {
  452.            display: grid;
  453.            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  454.            gap: 3rem;
  455.            margin-bottom: 3rem;
  456.        }
  457.        
  458.        .footer-widget h3 {
  459.            font-size: 1.3rem;
  460.            margin-bottom: 1.5rem;
  461.            color: var(--accent-color);
  462.            position: relative;
  463.            padding-bottom: 10px;
  464.        }
  465.        
  466.        .footer-widget h3::after {
  467.            content: '';
  468.            position: absolute;
  469.            bottom: 0;
  470.            left: 0;
  471.            width: 50px;
  472.            height: 3px;
  473.            background: var(--primary-color);
  474.        }
  475.        
  476.        .footer-list {
  477.            list-style: none;
  478.            padding: 0;
  479.        }
  480.        
  481.        .footer-list li {
  482.            color: #999999;
  483.            line-height: 1.6;
  484.            margin-bottom: 0.8rem;
  485.        }
  486.        
  487.        .footer-bottom {
  488.            text-align: center;
  489.            padding-top: 2rem;
  490.            border-top: 1px solid #333333;
  491.            color: #666666;
  492.        }
  493.  
  494.        /* Toast Notification */
  495.        .toast-notification {
  496.            position: fixed;
  497.            top: 20px;
  498.            right: 20px;
  499.            background-color: #28a745;
  500.            color: white;
  501.            padding: 15px 25px;
  502.            border-radius: 5px;
  503.            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  504.            z-index: 2000;
  505.            opacity: 0;
  506.            transform: translateY(-20px);
  507.            transition: opacity 0.5s ease, transform 0.5s ease;
  508.        }
  509.        .toast-notification.show {
  510.            opacity: 1;
  511.            transform: translateY(0);
  512.        }
  513.        
  514.        /* Media Queries */
  515.        @media screen and (max-width: 768px) {
  516.            .navbar {
  517.                flex-direction: column;
  518.                padding: 1rem;
  519.            }
  520.            
  521.            .logo {
  522.                margin-bottom: 1rem;
  523.            }
  524.            
  525.            .nav-links {
  526.                width: 100%;
  527.                justify-content: space-around;
  528.            }
  529.            
  530.            .nav-links li {
  531.                margin: 0;
  532.            }
  533.            
  534.            .hero h1 {
  535.                font-size: 2.5rem;
  536.            }
  537.            
  538.            .article-grid {
  539.                grid-template-columns: 1fr;
  540.            }
  541.            
  542.            .newsletter-form {
  543.                flex-direction: column;
  544.                border-radius: 10px;
  545.            }
  546.            
  547.            .newsletter-input {
  548.                border-radius: 10px 10px 0 0;
  549.            }
  550.            
  551.            .newsletter-btn {
  552.                border-radius: 0 0 10px 10px;
  553.            }
  554.        }
  555.        
  556.        /* Animation Keyframes */
  557.        @keyframes pulse {
  558.            0% { transform: scale(1); }
  559.            50% { transform: scale(1.05); }
  560.            100% { transform: scale(1); }
  561.        }
  562.        
  563.        .pulse {
  564.            animation: pulse 2s infinite;
  565.        }
  566.        
  567.    </style>
  568. <script type="application/ld+json">{
  569.  "@context": "https://schema.org",
  570.  "@type": "WebSite",
  571.  "name": "MarvelFight",
  572.  "url": "https://www.marvelfight.cc",
  573.  "publisher": {
  574.    "@type": "Organization",
  575.    "@id": "https://www.marvelfight.cc/#website",
  576.    "name": "MarvelFight",
  577.    "url": "https://www.marvelfight.cc",
  578.    "description": "MarvelFight is a professional Marvel game strategy and news platform, providing the latest guides, character builds, team compositions, in-depth analysis, and version previews for Marvel Super War, Marvel Future Fight, Marvel Contest of Champions, and more. Your one-stop destination for all Marvel game enthusiasts!",
  579.    "foundingDate": "2023",
  580.    "logo": {
  581.      "@type": "ImageObject",
  582.      "url": "https://www.marvelfight.cc/game_logo.png",
  583.      "caption": "MarvelFight Logo"
  584.    }
  585.  }
  586. }</script></head>
  587. <body>
  588. <!-- Header -->
  589. <header class="header">
  590. <nav class="navbar">
  591. <div class="logo">MarvelFight</div>
  592. <ul class="nav-links" id="nav-links-container">
  593. <!-- Navigation links will be dynamically inserted here -->
  594. </ul>
  595. </nav>
  596. </header>
  597. <!-- Hero Section -->
  598. <section class="hero">
  599. <div class="hero-content">
  600. <h1>MARVEL Duel Chronicles</h1>
  601. <p>Dive into the ultimate gaming experience with our in-depth guides, reviews, and news about MARVEL Duel - the most thrilling superhero battle arena game of the year!</p>
  602. <a class="hero-btn pulse" id="explore-now-btn">Explore Now</a>
  603. </div>
  604. </section>
  605. <!-- Content Sections will be dynamically generated below -->
  606. <main id="main-content">
  607. <!-- Industry News -->
  608. <section class="content-section" id="industry-news">
  609. <div class="container">
  610. <h2 class="section-title">Industry News</h2>
  611. <div class="article-grid" id="latest_all_grid">
  612. <!-- Articles will be injected here -->
  613. </div>
  614. </div>
  615. </section>
  616. <!-- Recent Posts -->
  617. <section class="content-section" id="recent-posts" style="background-color: rgba(4, 118, 242, 0.1);">
  618. <div class="container">
  619. <h2 class="section-title">Recent Posts</h2>
  620. <div class="article-grid" id="latest_news_grid">
  621. <!-- Articles will be injected here -->
  622. </div>
  623. </div>
  624. </section>
  625. <!-- Knowledge Base -->
  626. <section class="content-section" id="knowledge-base">
  627. <div class="container">
  628. <h2 class="section-title">Knowledge Base</h2>
  629. <div class="article-grid" id="latest_guides_grid">
  630. <!-- Articles will be injected here -->
  631. </div>
  632. </div>
  633. </section>
  634. <!-- Highlights Review -->
  635. <section class="content-section" id="highlights-review" style="background-color: rgba(255, 255, 255, 0.05);">
  636. <div class="container">
  637. <h2 class="section-title">Highlights Review</h2>
  638. <div class="article-grid" id="latest_articles_grid">
  639. <!-- Articles will be injected here -->
  640. </div>
  641. </div>
  642. </section>
  643. </main>
  644. <!-- Popular Tags Section -->
  645. <section class="content-section tags-section">
  646. <div class="container tags-container">
  647. <h2 class="section-title">Popular Tags</h2>
  648. <ul class="tags-list" id="popular-tags-list">
  649. <!-- Tags will be injected here -->
  650. </ul>
  651. </div>
  652. </section>
  653. <!-- Community Section -->
  654. <section class="community">
  655. <div class="community-container">
  656. <h2 class="section-title">Join Our Community</h2>
  657. <div class="community-text">
  658. <p>Connect with fellow MARVEL Duel enthusiasts, share your strategies, participate in community tournaments, and stay updated with the latest meta developments.</p>
  659. <a class="hero-btn" id="join-discord-btn">Join Discord Server</a>
  660. </div>
  661. </div>
  662. </section>
  663. <!-- Newsletter Section -->
  664. <section class="newsletter">
  665. <h2>Stay In The Loop</h2>
  666. <p>Subscribe to our newsletter for exclusive guides, character builds, and insider information on upcoming MARVEL Duel content.</p>
  667. <form class="newsletter-form" id="newsletter-form">
  668. <input class="newsletter-input" placeholder="Enter your email" required="" type="email"/>
  669. <button class="newsletter-btn" type="submit">Subscribe</button>
  670. </form>
  671. </section>
  672. <!-- Footer -->
  673. <footer class="footer">
  674. <div class="footer-container">
  675. <div class="footer-grid" id="footer-grid-container">
  676. <!-- Footer widgets will be dynamically inserted here -->
  677. </div>
  678. <div class="footer-bottom">
  679. <p id="copyright-text">© 2023. All rights reserved.</p>
  680. </div>
  681. </div>
  682. </footer>
  683. <!-- Toast Notification Element -->
  684. <div class="toast-notification" id="toast-notification"></div>
  685. <script>
  686.        document.addEventListener("DOMContentLoaded", function() {
  687.            
  688.            // --- CONFIGURATION ---
  689.            const JSON_URL = '/data/index.json';
  690.  
  691.            // --- UTILITY FUNCTIONS ---
  692.            
  693.            /**
  694.             * Shows a toast notification message.
  695.             * @param {string} message The message to display.
  696.             * @param {string} type 'success' or 'error'.
  697.             */
  698.            function showToast(message, type = 'success') {
  699.                const toast = document.getElementById('toast-notification');
  700.                if (!toast) return;
  701.  
  702.                toast.textContent = message;
  703.                toast.style.backgroundColor = type === 'success' ? '#28a745' : '#dc3545';
  704.                toast.classList.add('show');
  705.  
  706.                setTimeout(() => {
  707.                    toast.classList.remove('show');
  708.                }, 3000);
  709.            }
  710.  
  711.            // --- DYNAMIC POPULATION FUNCTIONS ---
  712.  
  713.            /**
  714.             * Populates the navigation bar.
  715.             * @param {Array} navData Array of navigation objects.
  716.             */
  717.            function populateNavigation(navData) {
  718.                const navContainer = document.getElementById('nav-links-container');
  719.                if (!navContainer || !navData) return;
  720.  
  721.                navContainer.innerHTML = ''; // Clear existing
  722.                const currentPage = window.location.pathname;
  723.  
  724.                navData.forEach(item => {
  725.                    const li = document.createElement('li');
  726.                    const a = document.createElement('a');
  727.                    a.textContent = item.label;
  728.                    a.href = item.link;
  729.  
  730.                    // Highlight active page
  731.                    if (item.link === currentPage || (item.link === '/' && (currentPage === '/index.html' || currentPage === '/'))) {
  732.                        a.classList.add('active');
  733.                    }
  734.                    
  735.                    li.appendChild(a);
  736.                    navContainer.appendChild(li);
  737.                });
  738.            }
  739.  
  740.            /**
  741.             * Creates and returns an article card HTML element.
  742.             * @param {Object} article The article data object.
  743.             * @returns {HTMLElement} The article card element.
  744.             */
  745.            function createArticeCard(article) {
  746.                const card = document.createElement('article');
  747.                card.className = 'article-card';
  748.                card.innerHTML = `
  749.                    <a href="${article.link}" class="article-img-link">
  750.                        <img src="${article.image}" alt="${article.title}">
  751.                    </a>
  752.                    <span class="article-tag">${article.game || 'Game'}</span>
  753.                    <div class="article-content">
  754.                        <h3 class="article-title">${article.title}</h3>
  755.                        <p class="article-excerpt">${article.excerpt}</p>
  756.                        <div class="article-meta">
  757.                            <div class="article-author">
  758.                                <span class="article-author-icon">${article.author.charAt(0)}</span>
  759.                                <span>${article.author}</span>
  760.                            </div>
  761.                            <span>${article.date}</span>
  762.                        </div>
  763.                    </div>
  764.                `;
  765.                return card;
  766.            }
  767.  
  768.            /**
  769.             * Populates a grid with articles.
  770.             * @param {string} gridId The ID of the grid container.
  771.             * @param {Array} articlesData The array of article data.
  772.             */
  773.            function populateArticleGrid(gridId, articlesData) {
  774.                const grid = document.getElementById(gridId);
  775.                if (!grid || !articlesData) return;
  776.                
  777.                grid.innerHTML = ''; // Clear existing
  778.                articlesData.forEach(article => {
  779.                    grid.appendChild(createArticeCard(article));
  780.                });
  781.            }
  782.  
  783.            /**
  784.             * Populates the popular tags section.
  785.             * @param {Array} tagsData Array of tag objects.
  786.             */
  787.            function populateTags(tagsData) {
  788.                const tagsList = document.getElementById('popular-tags-list');
  789.                if (!tagsList || !tagsData) return;
  790.  
  791.                tagsList.innerHTML = ''; // Clear existing
  792.                tagsData.forEach(tag => {
  793.                    const li = document.createElement('li');
  794.                    const a = document.createElement('a');
  795.                    a.href = tag.link;
  796.                    a.textContent = tag.name;
  797.                    li.appendChild(a);
  798.                    tagsList.appendChild(li);
  799.                });
  800.            }
  801.  
  802.            /**
  803.             * Populates the footer.
  804.             * @param {Array} footerData Array of footer widget objects.
  805.             * @param {string} copyrightText The copyright text.
  806.             */
  807.            function populateFooter(footerData, copyrightText) {
  808.                const footerGrid = document.getElementById('footer-grid-container');
  809.                const copyrightEl = document.getElementById('copyright-text');
  810.                
  811.                if (footerGrid && footerData) {
  812.                    footerGrid.innerHTML = ''; // Clear existing
  813.                    footerData.forEach(widget => {
  814.                        const widgetDiv = document.createElement('div');
  815.                        widgetDiv.className = 'footer-widget';
  816.                        
  817.                        const title = document.createElement('h3');
  818.                        title.textContent = widget.title;
  819.                        widgetDiv.appendChild(title);
  820.  
  821.                        const list = document.createElement('ul');
  822.                        list.className = 'footer-list';
  823.                        widget.contents.forEach(content => {
  824.                            const listItem = document.createElement('li');
  825.                            listItem.innerHTML = content;
  826.                            list.appendChild(listItem);
  827.                        });
  828.                        widgetDiv.appendChild(list);
  829.                        footerGrid.appendChild(widgetDiv);
  830.                    });
  831.                }
  832.  
  833.                if (copyrightEl && copyrightText) {
  834.                    copyrightEl.textContent = copyrightText;
  835.                }
  836.            }
  837.  
  838.  
  839.            // --- MAIN EXECUTION ---
  840.            
  841.            /**
  842.             * Fetches data and populates the entire page.
  843.             */
  844.            async function initializePage() {
  845.                try {
  846.                    const response = await fetch(JSON_URL);
  847.                    if (!response.ok) {
  848.                        throw new Error(`HTTP error! Status: ${response.status}`);
  849.                    }
  850.                    const data = await response.json();
  851.  
  852.                    // Populate dynamic sections
  853.                    populateNavigation(data.navigation);
  854.                    populateArticleGrid('latest_all_grid', data.latest_all);
  855.                    populateArticleGrid('latest_news_grid', data.latest_news);
  856.                    populateArticleGrid('latest_guides_grid', data.latest_guides);
  857.                    populateArticleGrid('latest_articles_grid', data.latest_articles);
  858.                    populateTags(data.tag);
  859.                    populateFooter(data.footer, data.copyright);
  860.  
  861.                } catch (error) {
  862.                    console.error("Failed to load page data:", error);
  863.                    // Optionally show an error to the user
  864.                    const mainContent = document.getElementById('main-content');
  865.                    if(mainContent) mainContent.innerHTML = `<p style="text-align:center; padding: 5rem;">Failed to load content. Please try again later.</p>`;
  866.                }
  867.            }
  868.  
  869.            initializePage();
  870.  
  871.  
  872.            // --- EVENT LISTENERS ---
  873.  
  874.            // Smooth scroll for "Explore Now" button
  875.            const exploreBtn = document.getElementById('explore-now-btn');
  876.            if (exploreBtn) {
  877.                exploreBtn.addEventListener('click', (e) => {
  878.                    e.preventDefault();
  879.                    document.getElementById('main-content').scrollIntoView({
  880.                        behavior: 'smooth'
  881.                    });
  882.                });
  883.            }
  884.  
  885.            // "Join Discord" button
  886.            const discordBtn = document.getElementById('join-discord-btn');
  887.            if(discordBtn) {
  888.                discordBtn.addEventListener('click', (e) => {
  889.                    e.preventDefault();
  890.                    showToast('Success');
  891.                });
  892.            }
  893.  
  894.            // Newsletter form submission
  895.            const newsletterForm = document.getElementById('newsletter-form');
  896.            if (newsletterForm) {
  897.                newsletterForm.addEventListener('submit', (e) => {
  898.                    e.preventDefault();
  899.                    showToast('subscribe successful');
  900.                    newsletterForm.reset();
  901.                });
  902.            }
  903.        });
  904.    </script>
  905. </body>
  906. </html>

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda