{"id":9,"date":"2025-07-12T20:26:39","date_gmt":"2025-07-12T20:26:39","guid":{"rendered":"http:\/\/api-dashboard.com.ddev.site\/api-dashboard-demo\/"},"modified":"2025-07-12T20:26:39","modified_gmt":"2025-07-12T20:26:39","slug":"api-dashboard-demo","status":"publish","type":"page","link":"https:\/\/api-dashboard.211j.com\/","title":{"rendered":"API Dashboard Demo"},"content":{"rendered":"        <div class=\"api-dashboard-container\" data-refresh=\"60\">\n            <div class=\"api-dashboard-header\">\n                <h2>Real-Time Data Dashboard<\/h2>\n                <div class=\"last-updated\">Last updated: <span id=\"last-update-time\">11:36:46 PM<\/span><\/div>\n            <\/div>\n            \n            <div class=\"api-dashboard-grid\">\n                                    <div class=\"dashboard-widget\" data-source=\"weather\">\n                                <div class=\"widget-header\">\n            <h3>Weather - London<\/h3>\n        <\/div>\n        <div class=\"widget-content weather-widget\">\n            <div class=\"weather-main\">\n                <div class=\"temperature\">28\u00b0C<\/div>\n                <div class=\"description\">Clear sky<\/div>\n            <\/div>\n            <div class=\"weather-details\">\n                <div class=\"detail\">\n                    <span class=\"label\">Feels like:<\/span>\n                    <span class=\"value\">14\u00b0C<\/span>\n                <\/div>\n                <div class=\"detail\">\n                    <span class=\"label\">Humidity:<\/span>\n                    <span class=\"value\">42%<\/span>\n                <\/div>\n                <div class=\"detail\">\n                    <span class=\"label\">Wind:<\/span>\n                    <span class=\"value\">7 km\/h<\/span>\n                <\/div>\n                <div class=\"detail\">\n                    <span class=\"label\">Pressure:<\/span>\n                    <span class=\"value\">1013 hPa<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n                            <\/div>\n                                    <div class=\"dashboard-widget\" data-source=\"stocks\">\n                                <div class=\"widget-header\">\n            <h3>Stock Market<\/h3>\n            <span class=\"market-status\">Closed - Weekend<\/span>\n        <\/div>\n        <div class=\"widget-content stocks-widget\">\n            <table class=\"stocks-table\">\n                <thead>\n                    <tr>\n                        <th>Symbol<\/th>\n                        <th>Price<\/th>\n                        <th>Change<\/th>\n                        <th>Volume<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                                            <tr>\n                            <td class=\"symbol\">\n                                <strong>AAPL<\/strong>\n                                <small>Apple Inc.<\/small>\n                            <\/td>\n                            <td class=\"price\">$180.25<\/td>\n                            <td class=\"change positive\">\n                                +5.25                                (3.00%)\n                            <\/td>\n                            <td class=\"volume\">16,233,912<\/td>\n                        <\/tr>\n                                            <tr>\n                            <td class=\"symbol\">\n                                <strong>GOOGL<\/strong>\n                                <small>Alphabet Inc.<\/small>\n                            <\/td>\n                            <td class=\"price\">$135.24<\/td>\n                            <td class=\"change negative\">\n                                -4.76                                (-3.40%)\n                            <\/td>\n                            <td class=\"volume\">44,327,362<\/td>\n                        <\/tr>\n                                            <tr>\n                            <td class=\"symbol\">\n                                <strong>MSFT<\/strong>\n                                <small>Microsoft Corporation<\/small>\n                            <\/td>\n                            <td class=\"price\">$365.56<\/td>\n                            <td class=\"change negative\">\n                                -14.44                                (-3.80%)\n                            <\/td>\n                            <td class=\"volume\">27,682,883<\/td>\n                        <\/tr>\n                                            <tr>\n                            <td class=\"symbol\">\n                                <strong>AMZN<\/strong>\n                                <small>Amazon.com Inc.<\/small>\n                            <\/td>\n                            <td class=\"price\">$174.25<\/td>\n                            <td class=\"change positive\">\n                                +4.25                                (2.50%)\n                            <\/td>\n                            <td class=\"volume\">20,386,777<\/td>\n                        <\/tr>\n                                    <\/tbody>\n            <\/table>\n        <\/div>\n                            <\/div>\n                                    <div class=\"dashboard-widget\" data-source=\"crypto\">\n                                <div class=\"widget-header\">\n            <h3>Cryptocurrency<\/h3>\n        <\/div>\n        <div class=\"widget-content crypto-widget\">\n                            <div class=\"crypto-item\">\n                    <div class=\"crypto-header\">\n                        <span class=\"crypto-name\">Bitcoin<\/span>\n                        <span class=\"crypto-symbol\">BIT<\/span>\n                    <\/div>\n                    <div class=\"crypto-price\">\n                        $41,040.00                    <\/div>\n                    <div class=\"crypto-change negative\">\n                                                -8.80%\n                    <\/div>\n                    <div class=\"crypto-stats\">\n                        <div class=\"stat\">\n                            <span class=\"label\">24h High:<\/span>\n                            <span class=\"value\">$43,092.00<\/span>\n                        <\/div>\n                        <div class=\"stat\">\n                            <span class=\"label\">24h Low:<\/span>\n                            <span class=\"value\">$38,988.00<\/span>\n                        <\/div>\n                    <\/div>\n                    <!-- Chart disabled to prevent performance issues -->\n                    <div class=\"crypto-trend\" style=\"height: 40px; background: #f5f5f5; border-radius: 4px; margin-top: 10px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;\">\n                        Trend Chart\n                    <\/div>\n                <\/div>\n                            <div class=\"crypto-item\">\n                    <div class=\"crypto-header\">\n                        <span class=\"crypto-name\">Ethereum<\/span>\n                        <span class=\"crypto-symbol\">ETH<\/span>\n                    <\/div>\n                    <div class=\"crypto-price\">\n                        $3,141.00                    <\/div>\n                    <div class=\"crypto-change positive\">\n                        +                        4.70%\n                    <\/div>\n                    <div class=\"crypto-stats\">\n                        <div class=\"stat\">\n                            <span class=\"label\">24h High:<\/span>\n                            <span class=\"value\">$3,298.05<\/span>\n                        <\/div>\n                        <div class=\"stat\">\n                            <span class=\"label\">24h Low:<\/span>\n                            <span class=\"value\">$2,983.95<\/span>\n                        <\/div>\n                    <\/div>\n                    <!-- Chart disabled to prevent performance issues -->\n                    <div class=\"crypto-trend\" style=\"height: 40px; background: #f5f5f5; border-radius: 4px; margin-top: 10px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;\">\n                        Trend Chart\n                    <\/div>\n                <\/div>\n                    <\/div>\n                            <\/div>\n                                    <div class=\"dashboard-widget\" data-source=\"news\">\n                                <div class=\"widget-header\">\n            <h3>Latest News<\/h3>\n        <\/div>\n        <div class=\"widget-content news-widget\">\n                            <article class=\"news-item\">\n                    <h4 class=\"news-title\">\n                        <a href=\"#\" target=\"_blank\">\n                            Major Tech Company Announces Revolutionary AI Breakthrough                        <\/a>\n                    <\/h4>\n                    <div class=\"news-meta\">\n                        <span class=\"news-source\">TechNews Daily<\/span>\n                        <span class=\"news-time\">2 hours ago<\/span>\n                    <\/div>\n                    <p class=\"news-description\">Scientists have developed a new AI model that surpasses human performance in complex reasoning tasks.<\/p>\n                <\/article>\n                            <article class=\"news-item\">\n                    <h4 class=\"news-title\">\n                        <a href=\"#\" target=\"_blank\">\n                            Breakthrough in Quantum Computing Achieved                        <\/a>\n                    <\/h4>\n                    <div class=\"news-meta\">\n                        <span class=\"news-source\">Science Journal<\/span>\n                        <span class=\"news-time\">8 hours ago<\/span>\n                    <\/div>\n                    <p class=\"news-description\">Researchers demonstrate stable quantum bits that could revolutionize computing power.<\/p>\n                <\/article>\n                            <article class=\"news-item\">\n                    <h4 class=\"news-title\">\n                        <a href=\"#\" target=\"_blank\">\n                            Latest Innovations in 5G Technology                        <\/a>\n                    <\/h4>\n                    <div class=\"news-meta\">\n                        <span class=\"news-source\">News Source 3<\/span>\n                        <span class=\"news-time\">14 hours ago<\/span>\n                    <\/div>\n                    <p class=\"news-description\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n                <\/article>\n                    <\/div>\n                            <\/div>\n                            <\/div>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/api-dashboard.211j.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api-dashboard.211j.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/api-dashboard.211j.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/api-dashboard.211j.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/api-dashboard.211j.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":0,"href":"https:\/\/api-dashboard.211j.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"wp:attachment":[{"href":"https:\/\/api-dashboard.211j.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}