psy2

Sleeping

App Files Files Community

DmitrMakeev commited on Jul 9, 2024

Commit

3293cdd

verified ·

1 Parent(s): 2138b6a

Update se_mes_im2.html

Browse files

Files changed (1) hide show

se_mes_im2.html +127 -42

se_mes_im2.html CHANGED Viewed

@@ -1,43 +1,128 @@
-      <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Camera Image</title>
-    </head>
-    <body>
-        <h1>Upload Image</h1>
-        <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
-            <input type="file" name="photo">
-            <button type="submit">Upload</button>
-        </form>
-        <div id="message"></div>
-        <h1>Latest Image</h1>
-        <img id="cameraImage" src="/image" alt="Image" style="width:100%;">
-        <script>
-            document.getElementById('uploadForm').addEventListener('submit', function(event) {
-                event.preventDefault();
-                var formData = new FormData(this);
-                fetch('/upload', {
-                    method: 'POST',
-                    body: formData
-                })
-                .then(response => {
-                    if (response.ok) {
-                        return response.text();
-                    }
-                    throw new Error('Network response was not ok.');
-                })
-                .then(data => {
-                    document.getElementById('message').innerText = data;
-                    var image = document.getElementById("cameraImage");
-                    var fullUrl = data.split('saved to ')[1];
-                    image.src = fullUrl + "?" + new Date().getTime();
-                })
-                .catch(error => {
-                    document.getElementById('message').innerText = 'Error: ' + error.message;
-                });
             });
-        </script>
-    </body>
-    </html>

+ <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Camera Image</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            background-color: #4CAF50;
+            color: white;
+            padding: 20px;
+            margin: 0;
+            border-bottom: 2px solid #388E3C;
+        }
+        .input-row {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        .input-row input, .input-row textarea {
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        #messageInput, #urlFileInput, #fileNameInput {
+            width: 80%;
+            margin-top: 20px;
+        }
+        #progressBarContainer {
+            width: 80%;
+            margin: 20px auto;
+        }
+        #progressBar {
+            width: 100%;
+            background-color: #ddd;
+        }
+        #progress {
+            width: 0%;
+            height: 30px;
+            background-color: #4CAF50;
+            text-align: center;
+            line-height: 30px;
+            color: white;
+        }
+        #sendButton {
+            color: white;
+            background-color: #4CAF50;
+            border: none;
+            cursor: pointer;
+            padding: 10px 20px;
+            font-size: 16px;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+        #sendButton:hover {
+            background-color: #388E3C;
+        }
+        #cameraImage {
+            width: 300px;
+            height: 300px;
+            margin-top: 20px;
+        }
+        #imageUrl {
+            margin-top: 20px;
+            font-size: 16px;
+            color: #333;
+            cursor: pointer;
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <h1>Upload Image</h1>
+    <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
+        <input type="file" name="photo">
+        <button type="submit">Upload</button>
+    </form>
+    <div id="message"></div>
+    <h1>Latest Image</h1>
+    <img id="cameraImage" src="/image" alt="Image">
+    <div id="imageUrl" onclick="copyToClipboard(this)">Click to copy URL</div>
+    <script>
+        document.getElementById('uploadForm').addEventListener('submit', function(event) {
+            event.preventDefault();
+            var formData = new FormData(this);
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => {
+                if (response.ok) {
+                    return response.text();
+                }
+                throw new Error('Network response was not ok.');
+            })
+            .then(data => {
+                document.getElementById('message').innerText = data;
+                var image = document.getElementById("cameraImage");
+                var fullUrl = data.split('saved to ')[1];
+                image.src = fullUrl + "?" + new Date().getTime();
+                document.getElementById('imageUrl').innerText = fullUrl;
+            })
+            .catch(error => {
+                document.getElementById('message').innerText = 'Error: ' + error.message;
             });
+        });
+        function copyToClipboard(element) {
+            var tempInput = document.createElement("input");
+            tempInput.value = element.innerText;
+            document.body.appendChild(tempInput);
+            tempInput.select();
+            document.execCommand("copy");
+            document.body.removeChild(tempInput);
+            alert("URL copied to clipboard: " + element.innerText);
+        }
+    </script>
+</body>
+</html>