Hugging Face's logo

YaTharThShaRma999
/
newer_project

Model card Files Community
YaTharThShaRma999 commited on
Commit
99cab51
•
1 Parent(s): 6453bba

Update test.html

Browse files
Files changed (1) hide show
  1. test.html +105 -101
test.html CHANGED
@@ -1,108 +1,112 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
-
4
  <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Hermes Chat App</title>
8
- <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap" rel="stylesheet">
9
- <style>
10
- body {
11
- font-family: 'Comfortaa', cursive;
12
- background-image: linear-gradient(120deg, #FF6D00, #FFD600, #FF6D00);
13
- background-size: 300% 300%;
14
- animation: gradientAnimation 5s ease infinite;
15
- color: #fff;
16
- display: flex;
17
- flex-direction: column;
18
- align-items: center;
19
- justify-content: center;
20
- height: 100vh;
21
- margin: 0;
22
- padding: 4rem;
23
- }
24
-
25
- @keyframes gradientAnimation {
26
- 0% {
27
- background-position: 0% 50%;
28
- }
29
- 50% {
30
- background-position: 100% 50%;
31
- }
32
- 100% {
33
- background-position: 0% 50%;
34
- }
35
- }
36
-
37
- h1 {
38
- font-size: 3rem;
39
- text-align: center;
40
- margin-bottom: 2rem;
41
- }
42
-
43
- p {
44
- font-size: 1.2rem;
45
- text-align: center;
46
- max-width: 400px;
47
- }
48
-
49
- #bottom-text {
50
- position: fixed;
51
- bottom: 2rem;
52
- left: 2rem;
53
- color: rgba(255, 255, 255, 0.5);
54
- }
55
-
56
- .chat-button {
57
- display: inline-block;
58
- padding: 1rem 2rem;
59
- background-color: #333;
60
- color: #fff;
61
- font-size: 1rem;
62
- text-decoration: none;
63
- border-radius: 4px;
64
- margin-left: 150px;
65
- transition: background-color 0.3s ease;
66
- }
67
-
68
- .chat-button:hover {
69
- background-color: #555;
70
- }
71
-
72
- .hidden {
73
- display: none;
74
- }
75
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  </head>
77
-
78
  <body>
79
- <section id="page1">
80
- <h1>Chat with Hermes</h1>
81
- <p>Hermes can chat about music, images, videos, and the real world</p>
82
- <a href="#page2" class="chat-button">Chat</a>
83
- </section>
84
-
85
- <section id="page2" class="hidden">
86
- <h1>Hello</h1>
87
- </section>
88
-
89
- <div id="bottom-text">
90
- <p>&copy; 2023 Hermes Chat App. All rights reserved.</p>
91
  </div>
92
-
93
- <script>
94
- document.addEventListener("DOMContentLoaded", function() {
95
- const chatButton = document.querySelector(".chat-button");
96
- const page1 = document.querySelector("#page1");
97
- const page2 = document.querySelector("#page2");
98
-
99
- chatButton.addEventListener("click", function(event) {
100
- event.preventDefault();
101
- page1.classList.add("hidden");
102
- page2.classList.remove("hidden");
103
- });
104
- });
105
- </script>
106
  </body>
107
-
108
  </html>
 
1
  <!DOCTYPE html>
2
+ <html>
 
3
  <head>
4
+ <title>Chat with Hermes</title>
5
+ <style>
6
+ body {
7
+ margin: 0;
8
+ padding: 0;
9
+ font-family: Arial, sans-serif;
10
+ text-align: center;
11
+ background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #b1f8f2, #ffecd2);
12
+ background-size: 400% 400%;
13
+ animation: gradientAnimation 10s ease infinite;
14
+ }
15
+
16
+ @keyframes gradientAnimation {
17
+ 0% { background-position: 0% 50%; }
18
+ 50% { background-position: 100% 50%; }
19
+ 100% { background-position: 0% 50%; }
20
+ }
21
+
22
+ .container {
23
+ display: flex;
24
+ flex-direction: column;
25
+ justify-content: center;
26
+ align-items: center;
27
+ height: 100vh;
28
+ }
29
+
30
+ h1 {
31
+ font-size: 48px;
32
+ margin-bottom: 20px;
33
+ color: #fff;
34
+ letter-spacing: 2px;
35
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
36
+ }
37
+
38
+ .button {
39
+ display: inline-block;
40
+ padding: 20px 40px;
41
+ background-color: #ffffff;
42
+ border-radius: 50px;
43
+ text-decoration: none;
44
+ color: #000000;
45
+ font-weight: bold;
46
+ font-size: 24px;
47
+ transition: background-color 0.3s ease;
48
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
49
+ }
50
+
51
+ .button:hover {
52
+ background-color: #f2f2f2;
53
+ }
54
+
55
+ .hello-container {
56
+ display: flex;
57
+ flex-direction: column;
58
+ justify-content: flex-start;
59
+ align-items: center;
60
+ height: 100vh;
61
+ animation: teleportAnimation 1.5s ease-in-out;
62
+ }
63
+
64
+ @keyframes teleportAnimation {
65
+ 0% { transform: scale(1.2) translateY(-50px); opacity: 0; }
66
+ 50% { transform: scale(1) translateY(0); opacity: 1; }
67
+ 100% { transform: scale(1.2) translateY(-50px); opacity: 0; }
68
+ }
69
+
70
+ .return-link {
71
+ position: fixed;
72
+ bottom: 20px;
73
+ right: 20px;
74
+ background-color: #ffffff;
75
+ color: #000000;
76
+ text-decoration: none;
77
+ font-size: 16px;
78
+ padding: 10px 15px;
79
+ border-radius: 20px;
80
+ transition: background-color 0.3s ease;
81
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
82
+ display: none;
83
+ }
84
+
85
+ #page2 .return-link {
86
+ display: inline-block;
87
+ }
88
+
89
+ .embedded-website {
90
+ width: 100%;
91
+ max-width: 80%;
92
+ height: 70vh;
93
+ margin-top: 20vh;
94
+ overflow: hidden;
95
+ }
96
+ </style>
97
  </head>
 
98
  <body>
99
+ <div id="page1" class="container">
100
+ <h1>Chat with Hermes</h1>
101
+ <a class="button" href="#page2">Chat</a>
102
+ </div>
103
+
104
+ <div id="page2" class="hello-container">
105
+ <h1 style="margin-top: 10vh;">Hello</h1>
106
+ <div class="embedded-website">
107
+ <iframe src="https://yatharthsharma999-jupyterspace.hf.space" frameborder="0" allowfullscreen width="100%"></iframe>
 
 
 
108
  </div>
109
+ <a class="return-link" href="#page1">Return to Homepage</a>
110
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
111
  </body>
 
112
  </html>