Hugging Face's logo

Spaces:
AlanMars
/
QYL-one-page-website
Running

App Files Community
AlanMars commited on
Commit
8550654
•
1 Parent(s): b64431d

Add SPA

Browse files
Files changed (4) hide show
  1. index.html +113 -16
  2. static/assets/css/styles.css +101 -0
  3. static/assets/jpg/qr-code.jpg +0 -0
  4. style.css +0 -28
index.html CHANGED
@@ -1,19 +1,116 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
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>RACIO</title>
7
+ <link rel="stylesheet" href="./static/assets/css/styles.css" />
8
+ </head>
9
+ <body>
10
+ <header>
11
+ <div class="container">
12
+ <h1>RACIO</h1>
13
+ <nav>
14
+ <ul>
15
+ <li><a href="#about">About</a></li>
16
+ <li><a href="#services">Services</a></li>
17
+ <li><a href="#contact">Contact</a></li>
18
+ </ul>
19
+ </nav>
20
+ </div>
21
+ </header>
22
+
23
+ <section id="about">
24
+ <div class="container">
25
+ <h2>About RACIO</h2>
26
+ <p>
27
+ RACIO stands for Redundancy, Availability, Consistency,
28
+ Isolation and Observability. It refers to five key aspects
29
+ or principles of a database or information system.
30
+ </p>
31
+
32
+ <p>The principles are:</p>
33
+
34
+ <div class="container">
35
+ <li>
36
+ Redundancy - Duplicate data or components are
37
+ incorporated to improve reliability. For example, having
38
+ backup databases or storage arrays.
39
+ </li>
40
+ <li>
41
+ Availability - The system is operational and functioning
42
+ as required. This means preventing things like loss of
43
+ network connectivity, power outages, hardware failures,
44
+ software errors, etc. High availability is a key goal.
45
+ </li>
46
+ <li>
47
+ Consistency - The data within the system is accurate and
48
+ consistent (not contradictory). Transactions must
49
+ preserve the database's integrity constraints and leave
50
+ the data in a consistent state.
51
+ </li>
52
+ <li>
53
+ Isolation - Concurrent transactions do not impact each
54
+ other. Changes made by one transaction are isolated from
55
+ other transactions until completed. This prevents dirty
56
+ reads, non-repeatable reads and phantoms.
57
+ </li>
58
+ <li>
59
+ Observability - The internal state of the system can be
60
+ determined through its outputs. Monitoring and logging
61
+ are used to meet this principle.
62
+ </li>
63
+ </div>
64
+ </div>
65
+ </section>
66
+
67
+ <section id="services">
68
+ <div class="container">
69
+ <h2>RICIO Services</h2>
70
+ <div class="service-box">
71
+ <h3>Basic</h3>
72
+ <p>
73
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
74
+ Donec viverra augue ac lacus efficitur, at maximus velit
75
+ tristique.
76
+ </p>
77
+ </div>
78
+ <div class="service-box">
79
+ <h3>Pro</h3>
80
+ <p>
81
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
82
+ Donec viverra augue ac lacus efficitur, at maximus velit
83
+ tristique.
84
+ </p>
85
+ </div>
86
+ <div class="service-box">
87
+ <h3>Max</h3>
88
+ <p>
89
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
90
+ Donec viverra augue ac lacus efficitur, at maximus velit
91
+ tristique.
92
+ </p>
93
+ </div>
94
+ </div>
95
+ </section>
96
+
97
+ <section id="contact">
98
+ <div class="container">
99
+ <h2>Contact Me</h2>
100
+ <form>
101
+ <input type="text" name="name" placeholder="Name" />
102
+ <input type="email" name="email" placeholder="Email" />
103
+ <textarea name="message" placeholder="Message"></textarea>
104
+ <button type="submit">Submit</button>
105
+ </form>
106
+ </div>
107
+ </section>
108
+
109
+ <footer>
110
+ <div class="container" center="center">
111
+ <p>Copyright 2023 @ 睿轩智人</p>
112
+ <img src="./static/assets/jpg/qr-code.jpg" width="100" height="100" class="center">
113
+ </div>
114
+ </footer>
115
+ </body>
116
  </html>
static/assets/css/styles.css ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ box-sizing: border-box;
3
+ }
4
+
5
+ body {
6
+ font-family: Arial, Helvetica, sans-serif;
7
+ }
8
+
9
+ .container {
10
+ width: 80%;
11
+ margin: auto;
12
+ }
13
+
14
+ header {
15
+ background: #333;
16
+ color: #fff;
17
+ padding: 1rem;
18
+ }
19
+
20
+ header h1 {
21
+ display: inline-block;
22
+ }
23
+
24
+ header nav {
25
+ float: right;
26
+ }
27
+
28
+ header nav ul {
29
+ list-style: none;
30
+ margin: 0;
31
+ padding: 0;
32
+ }
33
+
34
+ header nav li {
35
+ display: inline-block;
36
+ }
37
+
38
+ header nav a {
39
+ color: #fff;
40
+ text-decoration: none;
41
+ padding: 1rem;
42
+ }
43
+
44
+ section {
45
+ padding: 2rem 0;
46
+ }
47
+
48
+ .service-box {
49
+ padding: 1rem;
50
+ border: 1px solid #ddd;
51
+ margin-bottom: 1rem;
52
+ }
53
+
54
+ form input,
55
+ form textarea {
56
+ display: block;
57
+ width: 100%;
58
+ padding: 0.5rem;
59
+ margin-bottom: 1rem;
60
+ }
61
+
62
+ form button {
63
+ padding: 0.5rem 1rem;
64
+ }
65
+
66
+ footer {
67
+ background: #ddd;
68
+ padding: 1rem;
69
+ }
70
+
71
+ center {
72
+ display: block;
73
+ margin-left: auto;
74
+ margin-right: auto;
75
+ width: 50%;
76
+ }
77
+
78
+
79
+ @media (max-width: 768px) {
80
+ header nav {
81
+ float: none;
82
+ }
83
+
84
+ .menu {
85
+ display: none;
86
+ }
87
+
88
+ .menu-toggle {
89
+ display: inline-block;
90
+ }
91
+ }
92
+
93
+ @media (min-width: 769px) {
94
+ .menu-toggle {
95
+ display: none;
96
+ }
97
+
98
+ .menu {
99
+ display: inline-block;
100
+ }
101
+ }
static/assets/jpg/qr-code.jpg ADDED
style.css DELETED
@@ -1,28 +0,0 @@
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
- }