admin/Ollama.html

Ollama.html · 5.0 KiB · HTML Raw

#superraw {
    position: relative;
    width: 80%;
    margin: 40px auto;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

#superraw:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #2ecc71 50%, #9b59b6 50%);
    background-size: 100% 100%;
    background-repeat: repeat;
    opacity: 0.5;
    transform: scale(0) translateY(-100px);
    transition: transform 0.5s ease-out;
  }

#superraw:hover:after {
    transform: scale(1) translateY(0);
  }

.super-title {
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }

.form-group {
    margin-bottom: 20px;
  }

.label {
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }

.form-control {
    font-size: 16px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

.tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    color: #333;
  }

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
  }

.tooltip:hover {
    display: block;
  }

/* Add some animations */
  @keyframes pulse {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }

#submit-button {
    animation: pulse 1s ease-out infinite;
  }

#error-messages {
    animation: shake 1s ease-out infinite;
  }

@keyframes shake {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-5px);
    }
    100% {
      transform: translateX(0);
    }
  }
</style>

<form id="superraw" action="https://example.com/submit-form" method="post">
  <div class="super-title">Unleash Your Inner Awesomeness!</div>
  <div class="super-tagline">Join the ranks of the most elite, the crème de la crème, the ones who dare to be bold!</div>
  
  
  <div class="form-group">
    <label for="first-name" class="label">Enter Your First Name <span class="font-awsome">%</span></label>
    <input type="text" id="first-name" name="first-name" class="form-control" placeholder="Your Name" required>
    <span class="tooltip">Please don't be a rookie, enter your real name!</span>
  </div>
  
  
  <div class="form-group">
    <label for="last-name" class="label">Enter Your Last Name (Optional, but we're watching you) <span class="font-awsome">!</span></label>
    <input type="text" id="last-name" name="last-name" class="form-control" placeholder="Your Last Name" required>
    <span class="tooltip">Keep it real, keep it awesome, keep it yours!</span>
  </div>
  
  
  <div class="form-group">
    <label for="email" class="label">Email Address (We'll send you a certificate of badassery) <span class="font-emoji">Email</span></label>
    <input type="email" id="email" name="email" class="form-control" placeholder="yourEmail@example.com" required>
    <span class="tooltip">Don't be a ghost, leave a trail of awesomeness!</span>
  </div>
  
  
  <div class="form-group">
    <label for="phone-number" class="label">Phone Number (Optional, but we can reach out to congratulate you) <span class="font-emoji">Phone</span></label>
    <input type="tel" id="phone-number" name="phone-number" class="form-control" placeholder="Your Phone Number">
    <span class="tooltip">Keep it real, keep it loud, keep it proud!</span>
  </div>
  
  
  <div class="form-group">
    <label for="message" class="label">What Makes You a Super Badass? Share Your Story! <span class="font-emoji">Book</span></label>
    <textarea id="message" name="message" class="form-control" placeholder="Type something that will make us proud of you"></textarea>
    <span class="tooltip">Let your voice be heard, let your awesomeness shine!</span>
  </div>
  
  
  <button type="submit" id="submit-button" class="btn btn-awsome">Unleash Your Inner Badass!</button>
  <span class="tooltip">Are you ready to unleash your inner awesomeness? Grab the moment, and hold it tight!</span>
  
  
  <div id="error-messages" class="error-messages">
    <span class="font-emoji">❗️</span> Oops, it looks like you made a mistake! Try again, and don't be afraid to get a little crazy!
  </div>
</form>

1	<style>
2	/* Add some blue, griddy vibes */
3	body {
4	background-color: #3498db;
5	background-image: linear-gradient(to bottom, #3498db 50%, #2ecc71 50%);
6	background-size: 100% 100%;
7	background-repeat: repeat;
8	font-family: Arial, sans-serif;
9	}
10
11	#superraw {
12	position: relative;
13	width: 80%;
14	margin: 40px auto;
15	background-color: rgba(255, 255, 255, 0.9);
16	padding: 20px;
17	border: 1px solid #ccc;
18	border-radius: 10px;
19	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
20	}
21
22	#superraw:after {
23	content: "";
24	position: absolute;
25	top: 0;
26	left: 0;
27	width: 100%;
28	height: 100%;
29	background-image: linear-gradient(to bottom, #2ecc71 50%, #9b59b6 50%);
30	background-size: 100% 100%;
31	background-repeat: repeat;
32	opacity: 0.5;
33	transform: scale(0) translateY(-100px);
34	transition: transform 0.5s ease-out;
35	}
36
37	#superraw:hover:after {
38	transform: scale(1) translateY(0);
39	}
40
41	.super-title {
42	font-size: 24px;
43	font-weight: bold;
44	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
45	}
46
47	.form-group {
48	margin-bottom: 20px;
49	}
50
51	.label {
52	font-size: 16px;
53	font-weight: bold;
54	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
55	}
56
57	.form-control {
58	font-size: 16px;
59	padding: 10px;
60	border: 1px solid #ccc;
61	border-radius: 5px;
62	}
63
64	.tooltip {
65	display: none;
66	position: absolute;
67	top: 100%;
68	left: 50%;
69	transform: translateX(-50%);
70	background-color: #f1f1f1;
71	border: 1px solid #ddd;
72	padding: 10px;
73	border-radius: 5px;
74	color: #333;
75	}
76
77	.tooltip::after {
78	content: "";
79	position: absolute;
80	top: 100%;
81	left: 50%;
82	transform: translateX(-50%);
83	border-width: 10px;
84	border-style: solid;
85	border-color: transparent transparent #fff transparent;
86	}
87
88	.tooltip:hover {
89	display: block;
90	}
91
92	/* Add some animations */
93	@keyframes pulse {
94	0% {
95	transform: scale(0);
96	}
97	50% {
98	transform: scale(1);
99	}
100	100% {
101	transform: scale(0);
102	}
103	}
104
105	#submit-button {
106	animation: pulse 1s ease-out infinite;
107	}
108
109	#error-messages {
110	animation: shake 1s ease-out infinite;
111	}
112
113	@keyframes shake {
114	0% {
115	transform: translateX(0);
116	}
117	50% {
118	transform: translateX(-5px);
119	}
120	100% {
121	transform: translateX(0);
122	}
123	}
124	</style>
125
126	<form id="superraw" action="https://example.com/submit-form" method="post">
127	<div class="super-title">Unleash Your Inner Awesomeness!</div>
128	<div class="super-tagline">Join the ranks of the most elite, the crème de la crème, the ones who dare to be bold!</div>
129
130	<!-- First Name -->
131	<div class="form-group">
132	<label for="first-name" class="label">Enter Your First Name <span class="font-awsome">%</span></label>
133	<input type="text" id="first-name" name="first-name" class="form-control" placeholder="Your Name" required>
134	<span class="tooltip">Please don't be a rookie, enter your real name!</span>
135	</div>
136
137	<!-- Last Name -->
138	<div class="form-group">
139	<label for="last-name" class="label">Enter Your Last Name (Optional, but we're watching you) <span class="font-awsome">!</span></label>
140	<input type="text" id="last-name" name="last-name" class="form-control" placeholder="Your Last Name" required>
141	<span class="tooltip">Keep it real, keep it awesome, keep it yours!</span>
142	</div>
143
144	<!-- Email -->
145	<div class="form-group">
146	<label for="email" class="label">Email Address (We'll send you a certificate of badassery) <span class="font-emoji">Email</span></label>
147	<input type="email" id="email" name="email" class="form-control" placeholder="[email protected]" required>
148	<span class="tooltip">Don't be a ghost, leave a trail of awesomeness!</span>
149	</div>
150
151	<!-- Phone Number -->
152	<div class="form-group">
153	<label for="phone-number" class="label">Phone Number (Optional, but we can reach out to congratulate you) <span class="font-emoji">Phone</span></label>
154	<input type="tel" id="phone-number" name="phone-number" class="form-control" placeholder="Your Phone Number">
155	<span class="tooltip">Keep it real, keep it loud, keep it proud!</span>
156	</div>
157
158	<!-- Message (Share Your Awesomeness Story) -->
159	<div class="form-group">
160	<label for="message" class="label">What Makes You a Super Badass? Share Your Story! <span class="font-emoji">Book</span></label>
161	<textarea id="message" name="message" class="form-control" placeholder="Type something that will make us proud of you"></textarea>
162	<span class="tooltip">Let your voice be heard, let your awesomeness shine!</span>
163	</div>
164
165	<!-- Submit Button -->
166	<button type="submit" id="submit-button" class="btn btn-awsome">Unleash Your Inner Badass!</button>
167	<span class="tooltip">Are you ready to unleash your inner awesomeness? Grab the moment, and hold it tight!</span>
168
169	<!-- Error Messages -->
170	<div id="error-messages" class="error-messages">
171	<span class="font-emoji">❗️</span> Oops, it looks like you made a mistake! Try again, and don't be afraid to get a little crazy!
172	</div>
173	</form>