Hugging Face's logo

Spaces:
micole66
/
photo-chooser
Running

App Files Community
micole66 commited on
Commit
20428d9
·
1 Parent(s): 51daeb5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +48 -94
index.html CHANGED
@@ -1,97 +1,51 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <title>Photo Comparison</title>
5
- <style>
6
- body {
7
- font-family: Arial, sans-serif;
8
- margin: 0;
9
- padding: 0;
10
- background-color: #f8f8f8;
11
- }
12
- h1 {
13
- text-align: center;
14
- color: #333;
15
- margin-top: 20px;
16
- }
17
- form {
18
- text-align: center;
19
- margin-top: 50px;
20
- }
21
- input[type="file"] {
22
- display: block;
23
- margin: 0 auto;
24
- }
25
- button[type="button"] {
26
- display: block;
27
- margin: 0 auto;
28
- padding: 10px 20px;
29
- background-color: #333;
30
- color: #fff;
31
- border: none;
32
- border-radius: 4px;
33
- font-size: 16px;
34
- cursor: pointer;
35
- }
36
- button[type="button"]:hover {
37
- background-color: #444;
38
- }
39
- div {
40
- text-align: center;
41
- margin-top: 50px;
42
- }
43
- img {
44
- max-width: 100%;
45
- height: auto;
46
- border: 1px solid #ccc;
47
- box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
48
- margin: 10px;
49
- }
50
- p {
51
- text-align: center;
52
- font-size: 20px;
53
- color: #333;
54
- margin-top: 50px;
55
- }
56
- </style>
57
- </head>
58
- <body>
59
- <h1>Choose the Best Photo</h1>
60
- <form>
61
- <input type="file" id="photo1Input" accept="image/*">
62
- <input type="file" id="photo2Input" accept="image/*">
63
- <br><br>
64
- <button type="button" onclick="choosePhoto()">Choose Best Photo</button>
65
- </form>
66
- <div>
67
- <img src="" alt="Photo 1" id="photo1">
68
- <img src="" alt="Photo 2" id="photo2">
69
- </div>
70
- <p id="result"></p>
71
- <script>
72
- function choosePhoto() {
73
- var photo1 = document.getElementById("photo1");
74
- var photo2 = document.getElementById("photo2");
75
- var photo1Input = document.getElementById("photo1Input");
76
- var photo2Input = document.getElementById("photo2Input");
77
-
78
- // Set image sources to uploaded files
79
- photo1.src = URL.createObjectURL(photo1Input.files[0]);
80
- photo2.src = URL.createObjectURL(photo2Input.files[0]);
81
-
82
- // Determine which photo is larger
83
- var size1 = photo1.naturalWidth * photo1.naturalHeight;
84
- var size2 = photo2.naturalWidth * photo2.naturalHeight;
85
-
86
- // Display result
87
- if (size1 > size2) {
88
- document.getElementById("result").innerHTML = "The best photo is Photo 1.";
89
- } else if (size2 > size1) {
90
- document.getElementById("result").innerHTML = "The best photo is Photo 2.";
91
- } else {
92
- document.getElementById("result").innerHTML = "Both photos are equally good.";
93
- }
94
- }
95
- </script>
96
- </body>
97
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>Photo Score App</title>
5
+ <style>
6
+ body {background-color:#f2f2f2;font-family:Arial,sans-serif;color:#333;}
7
+ h1 {text-align:center;font-size:2em;margin-top:30px;color:#4CAF50;}
8
+ form {margin:50px auto;padding:20px;background-color:#fff;border-radius:10px;
9
+ box-shadow:0 0 10px #888;width:400px;display:flex;flex-direction:column;align-items:center;}
10
+ label {font-size:1.2em;margin-top:10px;color:#555;}
11
+ input[type="file"] {margin-top:10px;font-size:1.2em;padding:10px;border:none;
12
+ background-color:#eee;border-radius:5px;width:80%;}
13
+ button {margin-top:20px;font-size:1.2em;padding:10px;border:none;background-color:#4CAF50;
14
+ color:#fff;border-radius:5px;cursor:pointer;transition:background-color 0.3s;}
15
+ button:hover {background-color:#3e8e41;}
16
+ #best-photo {max-width:400px;max-height:400px;margin-top:50px;display:block;
17
+ border-radius:10px;box-shadow:0 0 10px #888;}
18
+ h2 {margin-top:30px;font-size:1.8em;color:#4CAF50;}
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <h1>Photo Score App</h1>
23
+ <form method="POST" action="" enctype="multipart/form-data">
24
+ <label for="photo1">Photo 1:</label>
25
+ <input type="file" name="photo1" id="photo1">
26
+ <label for="photo2">Photo 2:</label>
27
+ <input type="file" name="photo2" id="photo2">
28
+ <button type="submit" name="submit">Find Best Photo</button>
29
+ </form>
30
+ <div>
31
+ <h2>Best Photo:</h2>
32
+ <img src="" id="best-photo">
33
+ </div>
34
+ <script>
35
+ function calculateScore(photo) {return Math.floor(Math.random() * 10) + 1;}
36
+ function comparePhotos(photo1, photo2) {
37
+ let score1 = calculateScore(photo1);
38
+ let score2 = calculateScore(photo2);
39
+ return (score1 > score2) ? photo1 : photo2;
40
+ }
41
+ document.querySelector('form').addEventListener('submit', function(event) {
42
+ event.preventDefault();
43
+ let photo1 = document.querySelector('#photo1').files[0];
44
+ let photo2 = document.querySelector('#photo2').files[0];
45
+ let bestPhoto = comparePhotos(photo1, photo2);
46
+ let bestPhotoUrl = URL.createObjectURL(bestPhoto);
47
+ document.querySelector('#best-photo').src = bestPhotoUrl;
48
+ });
49
+ </script>
50
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  </html>