Ledger test

---

<div class="hard-drive" id="hardDrive"><img src="https://wethepeopleinc.net/images/harddrive.jpg" alt="Hard Drive"></div>

<div id="upload-prompt" class="upload-prompt">

    <input type="file" id="file-input" multiple>

    <button onclick="uploadFiles()">Submit</button>

    <p id="feedback"></p>

</div>

<style>

    .hard-drive {

        cursor: pointer;

        position: relative;

        display: inline-block;

        margin: 10px;

    }

    .hard-drive img {

        width: 150px;

        height: 100px;

    }

    .upload-prompt {

        display: none;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        background: white;

        padding: 20px;

        border: 2px solid black;

    }

    .drop-zone {

        border: 2px dashed #ccc;

        padding: 20px;

        text-align: center;

        margin-top: 10px;

    }

    .drop-zone.dragover {

        border-color: #000;

        background: #e1e1e1;

    }

</style>

<script>

    const hardDrive = document.getElementById('hardDrive');

    const uploadPrompt = document.getElementById('upload-prompt');

    const fileInput = document.getElementById('file-input');

    const feedback = document.getElementById('feedback');

    hardDrive.addEventListener('click', () => {

        uploadPrompt.style.display = 'block';

    });

    // Drag and Drop functionality

    hardDrive.addEventListener('dragover', (e) => {

        e.preventDefault();

        hardDrive.classList.add('drop-zone');

        hardDrive.classList.add('dragover');

    });

    hardDrive.addEventListener('dragleave', () => {

        hardDrive.classList.remove('dragover');

    });

    hardDrive.addEventListener('drop', (e) => {

        e.preventDefault();

        hardDrive.classList.remove('dragover');

        const files = e.dataTransfer.files;

        handleFiles(files);

    });

    fileInput.addEventListener('change', (e) => {

        handleFiles(e.target.files);

    });

    function uploadFiles() {

        const files = fileInput.files;

        if (files.length > 0) {

            handleFiles(files);

        }

        uploadPrompt.style.display = 'none';

    }

    function handleFiles(files) {

        feedback.textContent = `Deposited ${files.length} file(s) into the hard drive!`;

        // Note: This is a simulation. For actual open-source storage, you'd need a server to handle uploads.

        setTimeout(() => feedback.textContent = '', 3000);

        fileInput.value = ''; // Reset input

    }

    document.addEventListener('click', (e) => {

        if (!e.target.closest('.upload-prompt') && !e.target.closest('.hard-drive')) {

            uploadPrompt.style.display = 'none';

        }

    });

</script>