Hugging Face's logo

Spaces:
daydreamer-json
/
me
Running

App Files Community
daydreamer-json commited on
Commit
29775e0
·
verified ·
1 Parent(s): ebcd8ed

upd

Browse files
Files changed (2) hide show
  1. index.html +44 -19
  2. style.css +44 -19
index.html CHANGED
@@ -1,19 +1,44 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en" data-bs-theme="light">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
+ <title>daydreamer-json</title>
7
+ <!-- Responsive viewport meta -->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <!-- JavaScript load -->
10
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"></script>
15
+ <!-- CSS load -->
16
+ <link rel="stylesheet prefetch" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
17
+ <link rel="stylesheet prefetch" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
18
+ <link rel="stylesheet prefetch" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/fontawesome.min.css">
19
+ <link rel="preconnect" href="https://rsms.me">
20
+ <link rel="stylesheet prefetch" href="https://rsms.me/inter/inter.css">
21
+ <link rel="preconnect" href="https://cdn.jsdelivr.net">
22
+ <link rel="stylesheet prefetch" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css">
23
+ <link rel="preconnect" href="https://fonts.googleapis.com">
24
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
25
+ <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">
26
+ <link rel="stylesheet prefetch" href="https://huggingface.co/spaces/daydreamer-json/babylonjs_test/resolve/main/apple_fonts.css">
27
+ <link rel="stylesheet prefetch" href="style.css">
28
+ </head>
29
+ <body>
30
+ <div id="backgroundFluidDiv" class=""></div>
31
+ <div id="backgroundFilterLayerDiv" class=""></div>
32
+ <div id="mainContainer" class="container-fluid px-0 py-0">
33
+ <div id="topTitleDiv" class="py-5">
34
+ <div class="py-5">
35
+ <p id="topTitleH1" class="fs-1 fw-bold user-select-none text-center d-lg-none">daydreamer-json</p>
36
+ <p id="topTitleH1Big" class="fw-bold user-select-none text-center d-none d-lg-block">daydreamer-json</p>
37
+ <p id="topTitleSub" class="fs-5 user-select-none text-center d-lg-none">More freely, just the way I like it.</p>
38
+ <p id="topTitleSubBig" class="fs-2 user-select-none text-center d-none d-lg-block">More freely, just the way I like it.</p>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ <hr class="my-0">
43
+ </body>
44
+ </html>
style.css CHANGED
@@ -1,28 +1,53 @@
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
+ body, .tooltip {
2
+ font-family: 'SF Pro Text', 'Inter', 'Noto Sans JP', system-ui, sans-serif
3
+ }
4
+ pre, code {
5
+ font-family: 'Fira Code', 'SF Mono', 'Noto Sans JP', ui-monospace, monospace, sans-serif;
6
  }
7
 
8
+ .user-drag-none {
9
+ user-drag: none;
10
+ -webkit-user-drag: none;
11
+ -moz-user-select: none;
12
  }
13
 
14
+ #backgroundFluidDiv {
15
+ position: fixed;
16
+ left: 0;
17
+ top: 0;
18
+ width: 100%;
19
+ height: 100%;
20
+ display: flex;
21
+ visibility: visible;
22
+ justify-content: center;
23
+ align-items: center;
24
+ background-color: rgba(255,255,255,1.0);
25
+ z-index: -1000;
26
+ background-image: url('https://placehold.jp/a0a0a0/000000/3072x4096.png');
27
+ /* background-attachment: fixed; */
28
+ background-position: bottom;
29
+ background-size: contain;
30
+ background-repeat: no-repeat;
31
  }
32
 
33
+ #backgroundFilterLayerDiv {
34
+ position: fixed;
35
+ left: 0;
36
+ top: 0;
37
+ width: 100%;
38
+ height: 100%;
39
+ display: flex;
40
+ visibility: visible;
41
+ justify-content: center;
42
+ align-items: center;
43
+ background-color: rgba(255,255,255,0.5);
44
+ z-index: -999;
45
  }
46
 
47
+ #topTitleDiv {
48
+ backdrop-filter: blur(16px);
49
  }
50
+
51
+ #topTitleH1Big {
52
+ font-size: calc(1.875rem + 2.375vw);
53
+ }