Hugging Face's logo

Spaces:
AIPairProgrammingForAzure
/
CardFonts
Running

App Files Community
awacke1 commited on
Commit
1e86a0d
·
verified ·
1 Parent(s): cf00a34

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +86 -19
index.html CHANGED
@@ -1,19 +1,86 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Card Font Display</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ line-height: 1.6;
11
+ margin: 0;
12
+ padding: 20px;
13
+ background-color: #f0f0f0;
14
+ }
15
+ .card {
16
+ background-color: white;
17
+ border-radius: 10px;
18
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
19
+ margin-bottom: 20px;
20
+ padding: 20px;
21
+ width: 300px;
22
+ }
23
+ .title {
24
+ font-size: 18px;
25
+ font-weight: bold;
26
+ margin-bottom: 10px;
27
+ }
28
+ .body-text {
29
+ font-size: 12px;
30
+ margin-bottom: 10px;
31
+ }
32
+ .text-box {
33
+ background-color: #f9f9f9;
34
+ border: 1px solid #ddd;
35
+ font-size: 10px;
36
+ padding: 5px;
37
+ }
38
+ #fontControls {
39
+ margin-bottom: 20px;
40
+ }
41
+ select {
42
+ margin-right: 10px;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <div id="fontControls">
48
+ <select id="titleFont">
49
+ <option value="Futura, sans-serif">Futura</option>
50
+ <option value="Helvetica, sans-serif">Helvetica</option>
51
+ <option value="'Trajan Pro', serif">Trajan Pro</option>
52
+ <option value="Garamond, serif">Garamond</option>
53
+ </select>
54
+ <select id="bodyFont">
55
+ <option value="'Minion Pro', serif">Minion Pro</option>
56
+ <option value="Palatino, serif">Palatino</option>
57
+ <option value="'Times New Roman', serif">Times New Roman</option>
58
+ <option value="'Myriad Pro', sans-serif">Myriad Pro</option>
59
+ </select>
60
+ <select id="textBoxFont">
61
+ <option value="Verdana, sans-serif">Verdana</option>
62
+ <option value="Tahoma, sans-serif">Tahoma</option>
63
+ </select>
64
+ </div>
65
+
66
+ <div id="cardContainer" class="card">
67
+ <div id="cardTitle" class="title">Card Title</div>
68
+ <div id="cardBody" class="body-text">This is the main text of the card. It contains important information about the card's effects or abilities.</div>
69
+ <div id="cardTextBox" class="text-box">Flavor text or additional information goes here. It might be slightly condensed to fit more text.</div>
70
+ </div>
71
+
72
+ <script>
73
+ function updateFonts() {
74
+ document.getElementById('cardTitle').style.fontFamily = document.getElementById('titleFont').value;
75
+ document.getElementById('cardBody').style.fontFamily = document.getElementById('bodyFont').value;
76
+ document.getElementById('cardTextBox').style.fontFamily = document.getElementById('textBoxFont').value;
77
+ }
78
+
79
+ document.getElementById('titleFont').addEventListener('change', updateFonts);
80
+ document.getElementById('bodyFont').addEventListener('change', updateFonts);
81
+ document.getElementById('textBoxFont').addEventListener('change', updateFonts);
82
+
83
+ updateFonts();
84
+ </script>
85
+ </body>
86
+ </html>