Hugging Face's logo

Spaces:
flopro
/
sf-7e4
Running

App Files Community
flopro commited on
Commit
b285804
·
verified ·
1 Parent(s): 5fdf0b6

Add 3 files

Browse files
Files changed (3) hide show
  1. index.html +31 -19
  2. script.js +22 -0
  3. style.css +90 -19
index.html CHANGED
@@ -1,19 +1,31 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Babel Library Location Converter</title><meta charset="UTF-8" /></head><body><div class="flex justify-center items-center bg-gray-900">
2
+ <div class="w-full max-w-screen-2xl">
3
+ <div class="w-full flex items-center justify-center">
4
+ <form class="w-auto mx-2">
5
+ <label for="hodson-input" class="block text-sm text-gray-700">Library Location</label>
6
+ <input type="text" id="location-input" class="block bg-white shadow border border-gray-400 px-3 py-2 mb-1 rounded-sm w-full" />
7
+ <button type="submit" class="bg-gray-500 hover:bg-gray-700 px-4 py-2 text-white rounded-md hover:bg-gray-700 focus:ring focus:ring-gray-300">
8
+ Convert
9
+ </button>
10
+ <div class="mt-2">
11
+ <label for="room-input" class="block text-xs text-gray-700">Room</label>
12
+ <input type="room" id="room-input" class="block bg-white shadow border border-gray-400 px-3 py-2 mb-1 rounded-sm w-full" />
13
+ </div>
14
+ <div class="mt-2">
15
+ <label for="wall-input" class="block text-xs text-gray-700">Wall</label>
16
+ <input type="wall" id="wall-input" class="block bg-white shadow border border-gray-400 px-3 py-2 mb-1 rounded-sm w-full" />
17
+ </div>
18
+ <div class="mt-2">
19
+ <label for="shelf-input" class="block text-xs text-gray-700">Shelf</label>
20
+ <input type="shelf" id="shelf-input" class="block bg-white shadow border border-gray-400 px-3 py-2 mb-1 rounded-sm w-full" />
21
+ </div>
22
+ <div class="mt-2">
23
+ <label for="book-input" class="block text-xs text-gray-700">Book</label>
24
+ <input type="book" id="book-input" class="block bg-white shadow border border-gray-400 px-3 py-2 mb-1 rounded-sm w-full" />
25
+ </div>
26
+ <div class="mt-2">
27
+ <label for="page-input" class="block text-xs text-gray-700">Page</label>
28
+ <input type="page" id="page-input" class="block bg-white shadow border border-gray-400 px-3 py-2 mb-1 rounded-sm w-full" />
29
+ </div>
30
+ </form> </div>
31
+ </div></div></body></html></body></html>
script.js ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ let converter = () => {
2
+ let location = document.getElementById("location-input").value; // get the location input
3
+ encodedLocation = encode('location'); // encode the location
4
+ let bookRoomWallShelfBookPage = encodedLocation.split("."); // split the location into its components (we only care about the first 5)
5
+ let book = bookRoomWallShelfBookPage[0];
6
+ let room = bookRoomWallShelfBookPage[1];
7
+ let wall = bookRoomWallShelfBookPage[2];
8
+ let shelf = bookRoomWallShelfBookPage[3];
9
+ let page = bookRoomWallShelfBookPage[4];
10
+ let bookIndex = getBookIndex(book, room, wall, shelf);
11
+ console.log("bookIndex:", bookIndex);
12
+ let pages = getBookPages(bookIndex);
13
+ console.log("pages:", pages);
14
+ let roomIndex = getRoomIndex(room);
15
+ console.log("roomIndex:", roomIndex);
16
+ let shelfIndex = getShelfIndex(shelf);
17
+ console.log("shelfIndex:", shelfIndex);
18
+ let wallIndex = getWallIndex(wall);
19
+ console.log("wallIndex:", wallIndex);
20
+ };
21
+
22
+ const encode = (string) = https/stackoverflow.com/ sendo# so- 203294.1352949#ACT=1)
style.css CHANGED
@@ -1,28 +1,99 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .wrapper {
2
+ display: flex;
3
+ flex-direction: column;
4
+ height:100%;
5
+ width:100%;
6
+ justify-content: center;
7
+ align-items: center;
8
+ font-family: Arial, Helvetica, sans-serif;
9
  }
10
 
11
+ .tools {
12
+ background-color: #f78fb3;
13
+ width: 10rem;
14
+ padding: 2rem;
15
+ display: flex;
16
+ flex-direction: column;
17
+ align-items: center;
18
+ justify-content: center;
19
+ overflow: hidden;
20
  }
21
 
22
+ .tools .title {
23
+ font-size: 1.5rem;
24
+ font-weight: bold;
25
+ margin-bottom: 1rem;
 
26
  }
27
 
28
+ .tools .type-input-trio {
29
+ display: flex;
30
+ flex-direction: row;
31
+ margin: 1em;
 
 
32
  }
33
 
34
+ .tools .type-input-trio-label {
35
+ margin-right: .75em;
36
  }
37
+
38
+ .tools .type-input {
39
+ width: 100%;
40
+ height: 2em;
41
+ font-size: larger;
42
+ background-color: unset;
43
+ color: inherit;
44
+ }
45
+
46
+ .tools .button {
47
+ width: 100%;
48
+ height: 5em;
49
+ font-size: larger;
50
+ background-color: #f78fb3;
51
+ color: #fff;
52
+ border: unset;
53
+ border-radius: 1em;
54
+ box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
55
+ cursor: pointer;
56
+ user-select: none;
57
+ -webkit-user-select: none;
58
+ -moz-user-select: none;
59
+ -ms-user-select: none;
60
+ }
61
+
62
+ .book-info {
63
+ display: flex;
64
+ flex-direction: column;
65
+ align-items: center;
66
+ justify-content: center;
67
+ width: 20rem;
68
+ height: 15rem;
69
+ display: flex;
70
+ flex-direction: column;
71
+ border: unset;
72
+ background-color: #8cbceb;
73
+ padding: 1em;
74
+ border-radius: 1em;
75
+ margin: 1rem;
76
+ box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
77
+ cursor: pointer;
78
+ user-select: none;
79
+ -webkit-user-select: none;
80
+ -moz-user-select: none;
81
+ -ms-user-select: none;
82
+ }
83
+
84
+ .book-info .book-name {
85
+ font-size: 1.5rem;
86
+ font-weight: bold;
87
+ color: #fff;
88
+ margin-bottom: 1em;
89
+ }
90
+
91
+ .book-info .book-text {
92
+ color: #fff;
93
+ }
94
+
95
+ .preview {
96
+ width: 100%;
97
+ height: 20rem;
98
+ background-color: #8cbceb;
99
+ }