Garowe police application

[leoseadsagaaro-ui]

<title>Police API Example</title>

<style>
    body {
        font-family: Arial, sans-serif;
        background: #f2f2f2;
        padding: 20px;
    }
    .button {
        padding: 10px 20px;
        background: #007bff;
        color: white;
        border: none;
        text-decoration: none;
        border-radius: 5px;
        cursor: pointer;
    }
    pre {
        background: white;
        padding: 15px;
        margin-top: 20px;
        border-radius: 6px;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
</style>

<h2>Police API – Outcome for Crime</h2>

<!-- 🔗 LINK TO API -->
<a class="button" href="https://data.police.uk/api/outcomes-for-crime/e11dade0a92a912d12329b9b2abb856ac9520434ad6845c30f503e9901d140f1" target="_blank">
    Open API Link
</a>

<!-- ▶️ FETCH BUTTON -->
<button class="button" onclick="loadData()">Fetch Data</button>

<!-- 📦 OUTPUT -->
<pre id="output">Click "Fetch Data" to load API response...</pre>

<script>
    function loadData() {
        const url = "https://data.police.uk/api/outcomes-for-crime/e11dade0a92a912d12329b9b2abb856ac9520434ad6845c30f503e9901d140f1";

        fetch(url)
            .then(response => response.json())
            .then(data => {
                document.getElementById("output").textContent =
                    JSON.stringify(data, null, 4);
            })
            .catch(error => {
                document.getElementById("output").textContent = "Error loading data: " + error;
            });
    }
</script>