diff --git a/samples/index_style.css b/samples/index.css similarity index 100% rename from samples/index_style.css rename to samples/index.css diff --git a/samples/index.html b/samples/index.html index 1f189a4..41e3933 100644 --- a/samples/index.html +++ b/samples/index.html @@ -4,35 +4,19 @@ Welcome to the dApps! - + +
-

Welcome to the dApps!

+

Welcome to THE dApps!

- - + +
-
- - -
-
- - -
-
- - -
-
- - -
- +
- diff --git a/samples/index.js b/samples/index.js new file mode 100644 index 0000000..34a4901 --- /dev/null +++ b/samples/index.js @@ -0,0 +1,41 @@ +let ECI = ''; +let pod = true; + +async function attach(event) { + event.preventDefault(); + ECI = document.getElementById('PicoECI').value; + console.log("Pico ECI: ", ECI); + window.location.href = 'pod.html'; +} + +function toggleDetachAttachButtons() { + const detachPodButton = document.getElementById('detachPod'); + const attachPodButton = document.getElementById('attachPod'); + + if (pod) { + pod = false; + detachPodButton.style.display = 'none'; + attachPodButton.style.display = 'inline-block'; + } else { + pod = true; + const modal = document.getElementById('myModal'); + modal.style.display = 'block'; + detachPodButton.style.display = 'inline-block'; + attachPodButton.style.display = 'none'; + } +} + +async function allPhotos() { + const sharedPhotosButton = document.getElementById('listAllSharedPhotos'); + const allPhotosButton = document.getElementById('listAllPhotos'); + allPhotosButton.classList.add('active'); + sharedPhotosButton.classList.remove('active'); + +} + +async function sharedPhotos() { + const sharedPhotosButton = document.getElementById('listAllSharedPhotos'); + const allPhotosButton = document.getElementById('listAllPhotos'); + sharedPhotosButton.classList.add('active'); + allPhotosButton.classList.remove('active'); +} diff --git a/samples/index_script.js b/samples/index_script.js deleted file mode 100644 index a0e8c67..0000000 --- a/samples/index_script.js +++ /dev/null @@ -1,35 +0,0 @@ -document.addEventListener('DOMContentLoaded', function() { - var button = document.getElementById('attachButton'); - - button.addEventListener('click', function(event) { - event.preventDefault(); - - const podURL = document.getElementById('podURL').value; - const webID = document.getElementById('webID').value; - const clientID = document.getElementById('clientID').value; - const clientSecret = document.getElementById('clientSecret').value; - const tokenURL = document.getElementById('tokenURL').value; - - // change the ECI to make it work on your pico - const queryURL = "http://localhost:3001/sky/event/cltqlszq00012ycu4dtvt55l9/1556/test/connect_storage"; - const queryParams = new URLSearchParams({ - storageURL: podURL, - webID: webID, - clientID: clientID, - clientSecret: clientSecret, - tokenURL: tokenURL - }).toString(); - - const attachURL = `${queryURL}?${queryParams}`; - - fetch(attachURL, { - method: 'POST', - }) - .then(response => response.json()) - .then(data => { - console.log(data); - window.location.href = 'pod.html'; - }) - .catch(error => console.error('Error:', error)); - }); -}); \ No newline at end of file diff --git a/samples/pod.css b/samples/pod.css new file mode 100644 index 0000000..a9352f7 --- /dev/null +++ b/samples/pod.css @@ -0,0 +1,119 @@ +button { + width: 5em; + padding: 10px; + border: none; + border-radius: 4px; + color: white; + background-color: #007bff; + cursor: pointer; +} + +.detach-button { + width: 10em; + position: fixed; + top: 10px; + right: 10px; + padding: 10px 20px; + border: none; + border-radius: 4px; +} + +.attach-button { + width: 10em; + position: fixed; + top: 10px; + right: 10px; + padding: 10px 20px; + border: none; + border-radius: 4px; + display: none; +} + +#searchInput { + width: 20em; +} + +.toggle-button { + padding: 8px 20px; + background-color: #0056b3; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.toggle-button.active { + background-color: #007bff; +} + +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 2; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +.modal-content { + position: absolute; + width: 100%; + max-width: 400px; + padding: 50px 75px 50px 50px; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background-color: white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 8px; + text-align: center; +} + +body, html { + height: 100%; + margin: 0; + font-family: Arial, sans-serif; + background-color: #f0f4f8; +} + +h2 { + color: #333; + margin-bottom: 40px; +} + +.input-group { + position: relative; + margin-bottom: 20px; +} + +input[type="text"], input[type="password"] { + width: 100%; + padding: 10px; + border: 2px solid #ddd; + border-radius: 4px; + margin-top: 8px; +} + +input[type="text"]:focus, input[type="password"]:focus { + border-color: #007bff; + outline: none; +} + +label { + position: absolute; + top: -8px; + left: 10px; + background-color: white; + padding: 0 5px; + color: #007bff; +} + +button:hover { + background-color: #0056b3; +} + + diff --git a/samples/pod.html b/samples/pod.html index 68c2389..9eaf24c 100644 --- a/samples/pod.html +++ b/samples/pod.html @@ -4,20 +4,51 @@ Pod + + -

Welcome to your pod!

+

Welcome to your pico!

+ +
- + + +
- sample - - -
- - + sample +
+ + +
+ - - \ No newline at end of file + diff --git a/samples/pod_script.js b/samples/pod_script.js deleted file mode 100644 index 0b80ede..0000000 --- a/samples/pod_script.js +++ /dev/null @@ -1,20 +0,0 @@ -document.addEventListener('DOMContentLoaded', function() { - var button = document.getElementById('detachPod'); - - button.addEventListener('click', function(event) { - event.preventDefault(); - - // change the ECI to make it work on your pico - const detachURL = "http://localhost:3001/sky/event/cltqlszq00012ycu4dtvt55l9/1556/test/disconnect_storage"; - - fetch(detachURL, { - method: 'POST', - }) - .then(response => response.json()) - .then(data => { - console.log(data); - window.location.href = 'index.html'; - }) - .catch(error => console.error('Error:', error)); - }); -}); \ No newline at end of file