143 lines
10 KiB
PHP
143 lines
10 KiB
PHP
<?php
|
|
require_once('.htac_header.php');
|
|
require_once('.htac_nav.php');
|
|
?>
|
|
<div>
|
|
<section class="container-fluid bg-gradient-to-t from-white to-[#05b3a420] h-fit shadow">
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row place-content-between place-items-center">
|
|
<div class="flex flex-col justify-center place-items-start">
|
|
<p class="text-5xl font-bold text-center"><span class="text-[#05b3a4]">D</span>WD <span class="text-[#05b3a4]">C</span>onsultancy <span class="text-[#05b3a4]">S</span>ervices</p>
|
|
<button onclick="d.showModal()" class="bg-[#05b3a4] w-fit px-6 py-2 rounded-tl-full rounded-br-full hover:shadow-xl hover:scale-105 duration-700 text-white font-bold">Get in Touch</button>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<img class="" src="/img/motherboard1.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="container mx-auto px-4 mt-10">
|
|
<h1 class="text-3xl font-bold text-center py-16">PC Configuration for NAS_Server</h1>
|
|
<div class="flex flex-col md:flex-row place-content-center gap-6 ">
|
|
<div class="flex flex-col">
|
|
<model-viewer id="computer_model" class="computerwidth computerborder bg-[#05b3a430]" src="/img/computer_light_pc.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="/img/poster.png" shadow-intensity="1" camera-target="-2.135m 1.38m 0.17m" camera-orbit="88deg 85deg 8.99m" field-of-view="30deg">
|
|
<div class="progress-bar hide" slot="progress-bar">
|
|
<div class="update-bar"></div>
|
|
</div>
|
|
<!-- <div class="inline-flex" id="ar-prompt">
|
|
<img src="https://modelviewer.dev/shared-assets/icons/hand.png" />
|
|
<button class="-mt-2" slot="ar-button" id="ar-button">View in your space</button>
|
|
</div> -->
|
|
</model-viewer>
|
|
<!-- <img class="rounded-lg " src="/img/computer.jpg" alt="" /> -->
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<p class="text-3xl font-bold ">Price 1,40,000.00/- Only</p>
|
|
<!-- <p><b>Processors:</b> <span>Intel® i5 Processors</span></p> -->
|
|
<p><b>Hard Drive:</b><span> 48TB (16TB * 4)</span></p>
|
|
<p><b>RAM:</b><span> 16GB RAM</span></p>
|
|
<div class="flex"><button class="w-full py-3 text-2xl font-bold text-white hover:text-[#05b3a4] bg-[#05b3a4] hover:bg-gray-900 rounded-xl hover:scale-105 duration-700 hover:shadow-lg">Buy Now</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-10">
|
|
<h1 class="text-2xl font-bold pb-1">What is NAS Server?</h1>
|
|
<p class="text-justify py-1">Imagine you have a big collection of movies, photos, music, and important documents. You want to be able to access these files from any device you own, whether it's your computer, smartphone, or tablet. However, keeping all these files on a single device can get messy, and if that device gets lost or breaks, you could lose everything.</p>
|
|
<p class="text-justify py-1">Now, picture a special kind of device that's like your personal file storage but way smarter—that's a NAS server, short for Network Attached Storage.</p>
|
|
<p class="text-justify py-1">Think of a NAS server as your own digital storage hub. It's a box that connects to your home network (like your Wi-Fi), and you can load it up with all your files. It's like having a central library for your digital stuff. This way, you don't have to keep everything on just one computer.</p>
|
|
<p class="text-justify py-1">When you want to watch a movie on your TV, listen to some music, or show off pictures to your friends, you don't have to search through all your devices. Instead, you simply connect to your NAS server over the network, and voilà, your files are right there, ready to be enjoyed.</p>
|
|
<p class="text-justify py-1">But a NAS server isn't just a dumb storage box. It's like a helpful butler for your files. It can be set up to automatically organise your files neatly into folders, making them easy to find. Plus, you can set up special permissions, like giving your family access to certain folders but keeping your personal stuff private.</p>
|
|
<p class="text-justify py-1">Imagine you're at work, and you suddenly remember that you forgot to send an important document to your colleague. With a NAS server, you can use your phone to quickly access that document from home and send it off—all without having to bother anyone at home.</p>
|
|
<p class="text-justify py-1">NAS servers also have extra tricks up their sleeves. Some can automatically back up your devices, ensuring that you don't lose precious files even if something goes wrong. And if you're worried about space, you can simply pop in more hard drives into the NAS server to expand its storage capacity.</p>
|
|
<p class="text-justify py-1">So, to sum it up, a NAS server is like your digital storage organiser and butler, sitting on your home network, ready to serve up your files whenever and wherever you need them. It keeps your digital life tidy, accessible, and secure, all without requiring you to juggle files across different devices.</p>
|
|
</div>
|
|
</section>
|
|
<section class="">
|
|
<div>
|
|
<dialog id="d" class=" rounded-lg">
|
|
<div>
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between; border-bottom: 6px solid #05b3a4; padding-bottom: 0px; align-items: center;">
|
|
<h2 class="text-3xl font-bold text-[#05b3a4]">Get In Touch</h2>
|
|
<form method="dialog"><button class="text-3xl text-[#05b3a4] bg-[#05b3a410] hover:bg-[#05b3a450] duration-700 rounded-full px-1">✘</button></form>
|
|
</div>
|
|
<form id="contactForm" style="display: flex; flex-direction: column; margin-bottom: 6px; margin-top: 6px;">
|
|
<div id="formSection">
|
|
<div style="display: flex; flex-direction: column;">
|
|
<label for="name">Name:</label>
|
|
<input name="name" id="name" type="text" style="border: 2px solid #05b3a480; border-radius: 10px; padding: 10px;" placeholder="Your Name" required/>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column;">
|
|
<label for="email">E-mail:</label>
|
|
<input name="email" id="email" type="email" style="border: 2px solid #05b3a480; border-radius: 10px; padding: 10px;" placeholder="Ex: example@email.com" required/>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column;">
|
|
<label for="mobile">Mobile: <span class="text-xs">(with country code)</span></label>
|
|
<input name="mobile" id="mobile" type="text" style="border: 2px solid #05b3a480; border-radius: 10px; padding: 10px;" placeholder="Ex: +91 0123456789" />
|
|
</div>
|
|
<div style="display: flex; flex-direction: column;">
|
|
<label for="content">Message:</label>
|
|
<textarea name="content" id="content" cols="34" rows="8" style="border: 2px solid #05b3a480; border-radius: 10px; padding: 10px;" placeholder="Write your Message..." required></textarea>
|
|
</div>
|
|
<div class="flex flex-col mt-4">
|
|
<input type="submit" value="Submit" class="bg-[#05b3a4] cursor-pointer rounded-md p-1.5 text-white font-bold" />
|
|
</div>
|
|
</div>
|
|
<div id="thankYouSection" style="display: none;">
|
|
<p class="text-3xl text-center font-bold p-20 sm:p-24 h-full">Thank You!</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script is:inline>
|
|
// const modelViewer = document.getElementById('computer_model');
|
|
// modelViewer.addEventListener('click', function() {
|
|
// if (modelViewer.paused) {
|
|
// modelViewer.play();
|
|
// // modelViewer.style.backgroundColor = "#05b3a4"
|
|
// } else {
|
|
// modelViewer.pause();
|
|
// }
|
|
// });
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const contactForm = document.getElementById('contactForm');
|
|
const formSection = document.getElementById('formSection');
|
|
const thankYouSection = document.getElementById('thankYouSection');
|
|
const nameInput = document.getElementById('name');
|
|
const emailInput = document.getElementById('email');
|
|
const phoneInput = document.getElementById('mobile');
|
|
const contentInput = document.getElementById('content');
|
|
|
|
contactForm.addEventListener('submit', async function (event) {
|
|
event.preventDefault();
|
|
|
|
const formData = {
|
|
name: nameInput.value,
|
|
email: emailInput.value,
|
|
phone: phoneInput.value,
|
|
content: contentInput.value,
|
|
form_name: "DWD SiliconPin - (NAS - Server Page)",
|
|
};
|
|
// console.log("Form Data", formData)
|
|
const url = 'https://api8.siliconpin.com/items/contact';
|
|
try {
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
if (response.ok) {
|
|
console.log('Form data submitted successfully');
|
|
formSection.style.display = 'none';
|
|
thankYouSection.style.display = 'block';
|
|
} else {
|
|
console.error('Failed to submit form data');
|
|
}
|
|
} catch (error) {
|
|
console.error('An error occurred:', error);
|
|
}
|
|
});
|
|
});
|
|
</script>
|