anydev/anydev-website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

background change

Browse Source
This commit is contained in:
Helldragon67 2024-10-19 13:20:20 +08:00
parent 8ffa4e3eb8
commit 6f01a9da9c
3 changed files with 1 additions and 99 deletions
assets/css
contact.css
package.json
partials/components
contact-page.hbs

63
assets/css/contact.css

@ -1,63 +0,0 @@
.contact-form {
background: linear-gradient(to bottom right, #F9B208, #E72E77); /* Gradient background */
padding: 30px;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
text-align: left;
}
.form-row {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.form-field {
flex: 1;
}
.form-field label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: black;
}
.form-field input,
.form-field textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 15px;
background-color: white; /* Field background */
color: black; /* Text color */
transition: border-color 0.3s;
}
.form-field input:focus,
.form-field textarea:focus {
outline: none;
border-color: #E72E77; /* Pink focus */
}
.form-field textarea {
height: 120px;
}
.submit-button {
display: block;
width: 100%;
padding: 12px;
background-color: #28a745; /* Green button color */
color: white;
border: none;
border-radius: 8px; /* Rounded corners */
font-size: 16px;
font-weight: bold; /* Bold text */
text-transform: uppercase; /* Full caps */
cursor: pointer;
transition: background-color 0.3s;
}
.submit-button:disabled {
background-color: #ddd;
cursor: not-allowed;
}
.submit-button:hover:not(:disabled) {
background-color: #218838; /* Darker green on hover */
}

2
package.json

@ -95,7 +95,7 @@
},
"site_background_color": {
"type": "color",
"default": "#ffffff"
"default": "linear-gradient(to bottom right, #F9B208, #E72E77)"
},
"header_and_footer_color": {
"type": "select",

35
partials/components/contact-page.hbs

@ -1,35 +0,0 @@
<link rel="stylesheet" href="{{asset "css/contact.css"}}">
{{#is "page" url="https://anydev.info/contact/"}}
<div class="contact-form">
<form action="mailto:anydev.anyway@gmail.com" method="post" enctype="text/plain" id="contactForm">
<div class="form-row">
<div class="form-field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required>
</div>
<div class="form-field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email" required>
</div>
</div>
<div class="form-field">
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Your message" required></textarea>
</div>
<button type="submit" class="submit-button" id="submitBtn" disabled>Send Message</button>
</form>
</div>
<script>
const form = document.getElementById('contactForm');
const submitBtn = document.getElementById('submitBtn');
form.addEventListener('input', () => {
const isFormFilled = form.name.value && form.email.value && form.message.value;
submitBtn.disabled = !isFormFilled;
});
</script>
{{/is}}