winsdominoes
/
winscloud-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

stuff before slep

This commit is contained in:
WinsDominoes 2024-05-08 20:50:59 +07:00
parent 6abfcbbcc4
commit 1a357b8747
4 changed files with 94 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
assets/css/style.css
View File

@ -11,6 +11,9 @@
--light-nav-backdrop-color: #fafafa;
--light-nav-shade-color: rgba(0, 0, 0, 0.12);
--light-nav-darker-shade-color: rgba(0, 0, 0, 0.12);
--light-card-bg-color: #ffffff;
--light-card-fg-color: rgba(0, 0, 0, 0.8);
--light-card-shade-color: rgba(0, 0, 0, 0.07);
--dark-bg: #242424;
--dark-fg-color: #ffffff;
@ -19,7 +22,10 @@
--dark-nav-border-color: #ffffff;
--dark-nav-backdrop-color: #242424;
--dark-nav-shade-color: rgba(0, 0, 0, 0.36);
--dark-nav-darker-shade-color: rgba(0, 0, 0, 0.9);
--dark-nav-darker-shade-color: rgba(0, 0, 0, 0.9);
--dark-card-bg-color: rgba(255, 255, 255, 0.08);
--dark-card-fg-color: #ffffff;
--dark-card-shade-color: rgba(0, 0, 0, 0.36);
}
@font-face {
@ -45,7 +51,7 @@ html, body {
box-sizing: border-box;
}
h1, h2, h3, h4, h5 {
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
@ -67,6 +73,10 @@ header {
color-scheme: dark;
}
.text-bold {
font-weight: 600;
}
.nav {
width: 100%;
height: 50px;
@ -196,9 +206,52 @@ header {
}
.main-banner h1 {
font-size: calc(50px + .5vw);
font-size: calc(45px + .5vw);
}
.main-banner p {
font-size: calc(12px + .5vw);
}
.main-apps {
display: flex;
flex-direction: column;
text-align: center;
justify-items: center;
}
.main-apps > #heading {
margin: 2rem 0 1rem 0;
}
.app-grid {
display: grid;
align-items: center;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.app-grid__item {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
text-align: start;
padding-block: .5rem;
padding-inline: .5rem 1rem;
max-width: fit-content;
cursor: pointer;
color: light-dark(var(--light-card-fg-color), var(--dark-card-fg-color));
background-color: light-dark(var(--light-card-bg-color), var(--dark-card-bg-color));
box-shadow: 1px 1px 5px 0 light-dark(var(--light-card-shade-color), var(--dark-card-shade-color));
text-decoration: none;
border-radius: 1rem;
}
.app-grid__item > img {
max-width: 100%;
height: 128px;
}

BIN
assets/images/icons/apps/dateapp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

39
index.html
View File

@ -46,8 +46,45 @@
<h1>Apps by WinsCloud</h1>
<p>Discover amazing apps developed by me! (<a href="https://winsdominoes.net">Win</a>) and my friends.</p>
</div>
<div class="main-details">
<div class="main-apps">
<div id="heading">
<h1>Apps</h1>
</div>
<div class="app-grid">
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
<img src="assets/images/icons/apps/dateapp.png" alt="Date Calculator">
<div class="details">
<span class="text-bold">Date Calculator</span>
<p>
App for calculating dates.
</p>
</div>
</a>
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
<img src="https://git.winscloud.net/repo-avatars/828b37c6b4e0493035c0b9d3e263dc855e88ddd5340afcd14f027c55c0726ddc" alt="Runoff">
<div class="details">
<span class="text-bold">Runoff</span>
<p>
Manage your startup apps and scripts!
</p>
</div>
</a>
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
<img src="https://git.winscloud.net/repo-avatars/1afe8fbd0d0acb779caa1779e16ed0533404d24598e207d82d02b141adde09ba" alt="Aekasarn">
<div class="details">
<span class="text-bold">Aekasarn</span>
<p>
A full and complete PDF viewer.
</p>
</div>
</a>
</div>
</div>
</div>
</main>

212
thingy.html
View File

@ -1,212 +0,0 @@
<main>
<div id="mainCarousel" class="carousel container slide mt-5 mb-2" data-bs-ride="carousel">
<div class="carousel-inner">
<img src="assets/images/banners/banner.jpg" alt="EMPower Renewable Energy Banner" id="mainBanner"
class="rounded-4">
</div>
</div>
<div class="container" data-bs-spy="scroll" data-bs-target="#mainNavbar">
<div id="serviceSection" class="container px-4 py-5" id="featured-3">
<h2 class="pb-2 border-bottom">About Us</h2>
<div class="row g-4 py-4 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<i class="bi bi-person-fill"></i>
</div>
<h3 class="fs-2 text-body-emphasis">ทีมงานมืออาชีพ</h3>
<p>เรามีทีมงานมืออาชีพพร้อมด้วยประสบการณ์ในการติดตั้งระบบ Solar Rooftop มามากกว่า 10 ปี
พร้อมสำหรับการติดตั้งในสถานที่ต่างๆ</p>
</div>
<div class="feature col">
<div
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<i class="bi bi-lightbulb-fill"></i>
</div>
<h3 class="fs-2 text-body-emphasis">อุปกรณ์คุณภาพ</h3>
<p>เราใช้อุปกรณ์เช่น Inverter หรือ แผงโซล่าเซลล์ที่มีประสิทธิภาพสูงในราคาที่ย่อมเยา</p>
</div>
<div class="feature col">
<div
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<i class="bi bi-calendar-check-fill"></i>
</div>
<h3 class="fs-2 text-body-emphasis">บริการดูแล</h3>
<p>เรามีบริการหลังการติดตั้ง เช่น การติดตั้งระบบ Monitor Software
และบริการดูแลระบบและล้างแผงโซล่าเซลล์ 2 ปี - 2 ครั้งใน 1 ปี - พร้อมการรับประกัน 5 ปี</p>
</div>
</div>
</div>
<div id="offerSection" class="container px-4">
<h2 class="pb-2 border-bottom">Our Offers</h2>
<div class="text-center">
<div class="pt-4 pb-4">
<h3>Single Phase Plans - ระบบไฟฟ้า 1 เฟส</h3>
<span>ทางบริษัทจะดำเนินการขออนุญาตขนานไฟกับการไฟฟ้าฯให้กับทางลูกค้า</span>
</div>
<div class="row row-cols-1 row-cols-lg-2 mb-3 text-center justify-content-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">3.3 kW Plan</h4>
</div>
<div class="card-body">
<h1 class="display-4 fw-bold card-title pricing-card-title">฿130,000*</h1>
<span class="text-danger">* ราคาไม่รวม VAT</span>
<ul class="list-group mt-3 mb-3">
<li class="list-group-item active">สามารถลดค่าไฟได้ประมาณ <span class="fw-bold text-decoration-underline">2,000 บาท / เดือน</span></li>
<li class="list-group-item">สำหรับผู้ใช้ระบบไฟฟ้า 1 Phase</li>
<li class="list-group-item list-group-item-secondary">แผงโซล่าเซลล์ Tier 1 จำนวน 6 แผง</li>
<li class="list-group-item">อินเวอร์เตอร์ Huawei 3kW</li>
<li class="list-group-item list-group-item-secondary">พื้นที่ติดตั้ง 15 ตารางเมตร</li>
<li class="list-group-item">บริการล้างแผงฟรี ปีละ 2 ครั้ง ในระยะเวลา 2 ปี</li>
<li class="list-group-item list-group-item-secondary">ประกันงานติดตั้ง 3 ปี</li>
<li class="list-group-item"><span class="fw-bold">ฟรีสำรวจหน้างาน</span></li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm border-primary">
<div class="card-header py-3 text-bg-primary border-primary">
<h4 class="my-0 fw-normal">5.5kW Plan</h4>
</div>
<div class="card-body">
<h1 class="display-4 fw-bold card-title pricing-card-title">฿155,000*</h1>
<span class="text-danger">* ราคาไม่รวม VAT</span>
<ul class="list-group mt-3 mb-3">
<li class="list-group-item active">สามารถลดค่าไฟได้ประมาณ <span class="fw-bold text-decoration-underline">3,000 บาท / เดือน</span></li>
<li class="list-group-item">สำหรับผู้ใช้ระบบไฟฟ้า 1 Phase</li>
<li class="list-group-item list-group-item-secondary">แผงโซล่าเซลล์ Tier 1 จำนวน 10 แผง</li>
<li class="list-group-item">อินเวอร์เตอร์ Huawei 5kW</li>
<li class="list-group-item list-group-item-secondary">พื้นที่ติดตั้ง 22 ตารางเมตร</li>
<li class="list-group-item">บริการล้างแผงฟรี ปีละ 2 ครั้ง ในระยะเวลา 2 ปี</li>
<li class="list-group-item list-group-item-secondary">ประกันงานติดตั้ง 3 ปี</li>
<li class="list-group-item"><span class="fw-bold">ฟรีสำรวจหน้างาน</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="pt-4 pb-4">
<h3>Three Phase Plans - ระบบไฟฟ้า 3 เฟส</h3>
<span>ทางบริษัทจะดำเนินการขออนุญาตขนานไฟกับการไฟฟ้าฯให้กับทางลูกค้า</span>
</div>
<div class="row row-cols-1 row-cols-lg-2 mb-3 text-center justify-content-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm border-primary">
<div class="card-header py-3 text-bg-primary border-primary">
<h4 class="my-0 fw-normal">5.5 kW Plan</h4>
</div>
<div class="card-body">
<h1 class="display-4 fw-bold card-title pricing-card-title">฿165,000*</h1>
<span class="text-danger">* ราคาไม่รวม VAT</span>
<ul class="list-group mt-3 mb-3">
<li class="list-group-item active">สามารถลดค่าไฟได้ประมาณ <span class="fw-bold text-decoration-underline">3,000 บาท / เดือน</span></li>
<li class="list-group-item">สำหรับผู้ใช้ระบบไฟฟ้า 3 Phase</li>
<li class="list-group-item list-group-item-secondary">แผงโซล่าเซลล์ Tier 1 จำนวน 10 แผง</li>
<li class="list-group-item">อินเวอร์เตอร์ Huawei 5kW</li>
<li class="list-group-item list-group-item-secondary">พื้นที่ติดตั้ง 22 ตารางเมตร</li>
<li class="list-group-item">บริการล้างแผงฟรี ปีละ 2 ครั้ง ในระยะเวลา 2 ปี</li>
<li class="list-group-item list-group-item-secondary">ประกันงานติดตั้ง 3 ปี</li>
<li class="list-group-item"><span class="fw-bold">ฟรีสำรวจหน้างาน</span></li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">9.9kW Plan</h4>
</div>
<div class="card-body">
<h1 class="display-4 fw-bold card-title pricing-card-title">฿260,000*</h1>
<span class="text-danger">* ราคาไม่รวม VAT</span>
<ul class="list-group mt-3 mb-3">
<li class="list-group-item active">สามารถลดค่าไฟได้ประมาณ <span class="fw-bold text-decoration-underline">6,000 บาท / เดือน</span></li>
<li class="list-group-item">สำหรับผู้ใช้ระบบไฟฟ้า 3 Phase</li>
<li class="list-group-item list-group-item-secondary">แผงโซล่าเซลล์ Tier 1 จำนวน 18 แผง</li>
<li class="list-group-item">อินเวอร์เตอร์ Huawei 10kW</li>
<li class="list-group-item list-group-item-secondary">พื้นที่ติดตั้ง 40 ตารางเมตร</li>
<li class="list-group-item">บริการล้างแผงฟรี ปีละ 2 ครั้ง ในระยะเวลา 2 ปี</li>
<li class="list-group-item list-group-item-secondary">ประกันงานติดตั้ง 3 ปี</li>
<li class="list-group-item"><span class="fw-bold">ฟรีสำรวจหน้างาน</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="gallerySection" class="container px-4 py-4">
<h2 class="pb-2 border-bottom">Gallery</h2>
<div class="album">
<div class="row row-cols-1 row-cols-md-3 align-items-center g-3">
<div class='col d-grid gap-3'>
<div class='card shadow-sm'>
<img src='assets/images/gallery/1.jpg' class='bd-placeholder-img card-img-top'
style='max-width: 100%; height: auto' />
</div>
<div class='card shadow-sm'>
<img src='assets/images/gallery/7.jpg' class='bd-placeholder-img card-img-top'
style='max-width: 100%; height: auto' />
</div>
</div>
<div class='col d-grid gap-3'>
<div class='card shadow-sm'>
<img src='assets/images/gallery/3.jpg' class='bd-placeholder-img card-img-top'
style='max-width: 100%; height: auto' />
</div>
<div class='card shadow-sm'>
<img src='assets/images/gallery/6.jpg' class='bd-placeholder-img card-img-top'
style='max-width: 100%; height: auto' />
</div>
</div>
<div class='col d-grid gap-3'>
<div class='card shadow-sm'>
<img src='assets/images/gallery/2.jpg' class='bd-placeholder-img card-img-top'
style='max-width: 100%; height: auto' />
</div>
<div class='card shadow-sm'>
<img src='assets/images/gallery/4.jpg' class='bd-placeholder-img card-img-top'
style='max-width: 100%; height: auto' />
</div>
<div class='card shadow-sm'>
<img src='assets/images/gallery/5.jpg' class='bd-placeholder-img card-img-top'
style='max-width: 100%; height: auto' />
</div>
</div>
</div>
</div>
</div>
<div id="contactSection" class="container px-4 py-2" id="icon-grid">
<div class="border-bottom"></div>
<div class="my-5 text-center">
<h1 class="display-3 fw-bold">Get In Touch</h1>
<p class="fs-5">Interested in our work? Let us provide you with our experience in steel fabrication
for your next project.</p>
<div class="row align-items-center justify-content-center">
<h2>
Tel: <a href="tel:+66866119049">+66-86-611-9049</a> (คุณทวี)
</h2>
<h2>
Tel: <a href="tel:+66935569624">+66-93-556-9624</a> (คุณฝน)
</h2>
<div id="socialMediaSection" class="grid gap-0 column-gap-3 justify-content-center">
<a href="https://web.facebook.com/emprenewableth" class="icon-link link-body-emphasis">
<i class="fs-3 bi bi-facebook"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</main>