commit f985fb61686fb9e62a5d664b41b0836c0512deb4 Author: Chris Olson Date: Sun Jun 14 19:56:38 2026 -0400 Initial commit diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..542224c --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,28 @@ +## Pine Creek website — quick orientation for AI coding agents + +This is a small static-ish website whose source lives at the repository root. Keep suggestions focused, minimal, and specific to the existing patterns. + +- Entry / what to edit + - `index.php` is the site's entry point (contains the HTML structure, nav, hero, and sections). Edit content/structure here. + - `css/` contains SCSS source and compiled CSS. `css/main.scss` imports partials from `css/components/` (e.g. `_nav.scss`, `_slide.scss`). + - `js/main.js` is the single client-side script — it controls the hamburger/nav, slides, and a light client-side prompt-based auth. + +- Architecture & patterns (observable) + - No framework/tooling files found (no package.json, build scripts). The project is organized as plain HTML/CSS/JS served from `index.php`. + - SCSS pattern: variables at top of `main.scss` (colors, breakpoints), mixins for fonts (`Libre`, `Lato`), and partials under `css/components/` imported by `main.scss`. + - JS pattern: single-file imperative DOM manipulation (`document.getElementById`, `querySelector`, event handlers). Use `const`/`let`, short arrow functions and maintain global-scope structure similar to `js/main.js`. + - Static assets: images in `img/` follow numeric patterns (e.g. `vineyard-0.jpg`, `house-0.jpg`) used by slide logic in `main.js`. + +- Development / preview notes (inferred) + - No CI or build discovered. To preview locally you can serve the folder with a simple server. A safe, minimal option: run `php -S localhost:8000` from the project root and open `http://localhost:8000/`. + - SCSS is present but not compiled by repo tooling. If modifying SCSS, compile to `css/main.css` using a local tool (example): `sass css/main.scss css/main.css` (assumption: developer will run this locally). + +- Conventions and gotchas to follow when changing code + - Keep CSS partials modular. Add new component styles under `css/components/` and import them in `css/main.scss` rather than editing compiled `css/main.css` directly. + - JS uses simple DOM IDs/classes; prefer selecting elements by the same IDs/classes and follow the existing event-handler pattern (assign functions to `onclick`, small helpers like `toggleNav`, `openNav`, `closeNav`). + - The project contains a client-side “light auth” in `js/main.js` that checks literal passwords (`'12345'`, `'abcde'`). Treat this as insecure; if asked to modify auth, recommend server-side changes and note security concerns. + +- When merging or editing `.github/copilot-instructions.md` + - Preserve any human-authored guidance already present. If adding new items, keep them concise and cite files (e.g. `index.php`, `css/main.scss`, `css/components/_nav.scss`, `js/main.js`). + +If anything above is unclear or you want more detail (build commands, preferred local dev workflow, or to add sample sass npm scripts), tell me which parts to expand or confirm and I will update this file. diff --git a/README.md b/README.md new file mode 100644 index 0000000..0023704 --- /dev/null +++ b/README.md @@ -0,0 +1,34 @@ +# pine-creek-hoa + +Pine Creek website + +Preview locally (static): + +You can preview the static site by serving the project root. Two simple options: + +1) Python's simple HTTP server (static): + +```bash +cd /home/pi/PineCreek/webdev/website +python3 -m http.server 8000 +# then open http://localhost:8000/index.html +``` + +2) PHP built-in server (if you prefer): + +```bash +cd /home/pi/PineCreek/webdev/website +php -S localhost:8000 +# then open http://localhost:8000/index.html +``` + +Notes: +- A new `index.html` (HTML5, responsive meta) was added alongside the existing `index.php` so you can host on static hosts like GitHub Pages or Google Cloud Storage. +- SCSS source is in `css/main.scss`. The repo does not include a toolchain; compile SCSS locally if you edit styles: + +```bash +# using Dart Sass +sass css/main.scss css/main.css +``` + +If you'd like, I can add an npm-based toolchain (package.json + scripts) to automate building SCSS and a deploy script for GitHub Pages. diff --git a/css/components/_nav.scss b/css/components/_nav.scss new file mode 100644 index 0000000..24eeaea --- /dev/null +++ b/css/components/_nav.scss @@ -0,0 +1,166 @@ +nav.main-nav { + background: $white; + border-bottom-left-radius: 100% 64px; + border-bottom-right-radius: 100% 64px; + box-shadow: 0 4px 5px 0px rgba(0,0,0,.16); + display: flex; + padding: 16px 0 32px; + position: fixed; + width: 100%; + z-index: 1; + + .mobile-nav { + align-items: center; + display: flex; + flex-direction: row; + + .mobile-nav--logo { + display: none; + max-width: 100px; + + img { + width: 100%; + } + + @media (max-width: $m-break) { + display: block; + } + } + + .hamburger { + cursor: pointer; + display: none; + margin-left: auto; + position: relative; + width: 30px; + z-index: 1; + + &> div { + background-color: $black; + border-radius: 2px; + height: 5px; + margin-bottom: 5px; + transition: .25s; + width: 30px; + + &:last-child { + margin-bottom: 0; + } + } + + &:hover { + &> div { + background-color: $gray; + } + } + + @media (max-width: $m-break) { + display: block; + } + + &.in { + & div:first-child { + position: relative; + top: 1px; + transform: rotate(45deg); + } + & div:nth-child(2) { + transform: translate(-17px); + width: 40px; + } + & div:last-child { + bottom: 1px; + position: relative; + transform: rotate(-45deg); + } + } + } + } + + ul { + align-items: center; + display: flex; + flex-direction: row; + margin: 0; + padding: 0; + + @media (max-width: $m-break) { + background-color: $white; + flex-direction: column; + height: 100%; + left: 100%; + padding: 24px; + position: fixed; + top: 0; + transition: .25s; + width: 100%; + + &.in { + left: 0; + } + } + + li { + @include Libre; + + list-style: none; + width: 100%; + + a { + @include Libre; + + color: $black; + display: inline-block; + font-size: 11px; + letter-spacing: 1px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + width: 100%; + + @media (max-width: $m-break) { + font-size: 14px; + padding-bottom: 16px; + width: 50%; + } + } + + &:nth-child(-n+3) { + a { + text-align: left; + + @media (max-width: $m-break) { + text-align: left; + } + } + } + + &:nth-last-child(-n+3) { + a { + text-align: right; + + @media (max-width: $m-break) { + text-align: left; + } + } + } + + &.main-nav--logo { + a { + img { + margin: 0 8px; + } + } + + @media (max-width: $m-break) { + display: none; + } + } + } + } + + @media (max-width: $m-break) { + border-radius: 0; + padding: 24px 0; + } + } \ No newline at end of file diff --git a/css/components/_slide.scss b/css/components/_slide.scss new file mode 100644 index 0000000..7e918bc --- /dev/null +++ b/css/components/_slide.scss @@ -0,0 +1,89 @@ +.slides { + position: relative; + + &.vineyard { + min-height: 300px; + img { + height: 300px; + } + } + + &.house { + min-height: 400px; + img { + height: 400px; + } + } + + + + img { + border-radius: 5px; + object-fit: cover; + opacity: 1; + transition: .15s; + width: 100%; + + &::selection { + background: rgba(255,255,255,0); + } + + &.out { + opacity: 0; + } + } + + .slides-arrow { + align-items: center; + background: $white; + border-radius: 5px; + cursor: pointer; + display: flex; + height: 50px; + justify-content: center; + left: -25px; + opacity: 1; + position: absolute; + right: auto; + top: 50%; + transform: translateY(-50%); + transition: .15s; + width: 50px; + + &.out { + opacity: 0; + pointer-events: none; + } + + svg { + background-color: $light-gray; + border-radius: 3px; + color: $white; + height: 32px; + padding: 4px; + pointer-events: none; + transition: .1s; + width: 32px; + } + + &:last-child { + left: auto; + right: -25px; + } + + &:hover { + svg { + background-color: darken($light-gray, 5%); + border-radius: 4px; + transform: scale(1.15); + } + } + + &:active { + svg { + background-color: darken($light-gray, 10%); + transform: scale(1.1); + } + } + } + } \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..9dbe87f --- /dev/null +++ b/css/main.css @@ -0,0 +1,265 @@ +.btn { + font-family: "Libre Baskerville", serif; + font-size: 14px; +} + +.btn-primary { + background-color: #AB996D; + border-color: #AB996D; +} +.btn-primary:hover { + background-color: #917f54; + border-color: #917f54; +} +.btn-primary:active, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active:focus { + background-color: #81714a; + border-color: #81714a; + box-shadow: 0 0 0 0.2rem rgba(129, 113, 74, 0.5); +} + +body { + font-family: "Lato", sans-serif; + background-color: #ffffff; + color: #231F20; + margin: 0; + overflow-x: hidden; +} + +p, a, li, span, div { + font-family: "Lato", sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Libre Baskerville", serif; +} + +.page-content { + padding: 110px 0 0 0; + position: relative; + top: -32px; +} +.page-content .hero-text h1 { + font-size: 64px; + margin-top: 0; +} + +nav.main-nav { + background: #ffffff; + border-bottom-left-radius: 100% 64px; + border-bottom-right-radius: 100% 64px; + box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.16); + display: flex; + padding: 16px 0 32px; + position: fixed; + width: 100%; + z-index: 1; +} +nav.main-nav .mobile-nav { + align-items: center; + display: flex; + flex-direction: row; +} +nav.main-nav .mobile-nav .mobile-nav--logo { + display: none; + max-width: 100px; +} +nav.main-nav .mobile-nav .mobile-nav--logo img { + width: 100%; +} +@media (max-width: 991px) { + nav.main-nav .mobile-nav .mobile-nav--logo { + display: block; + } +} +nav.main-nav .mobile-nav .hamburger { + cursor: pointer; + display: none; + margin-left: auto; + position: relative; + width: 30px; + z-index: 1; +} +nav.main-nav .mobile-nav .hamburger > div { + background-color: #231F20; + border-radius: 2px; + height: 5px; + margin-bottom: 5px; + transition: 0.25s; + width: 30px; +} +nav.main-nav .mobile-nav .hamburger > div:last-child { + margin-bottom: 0; +} +nav.main-nav .mobile-nav .hamburger:hover > div { + background-color: #585858; +} +@media (max-width: 991px) { + nav.main-nav .mobile-nav .hamburger { + display: block; + } +} +nav.main-nav .mobile-nav .hamburger.in div:first-child { + position: relative; + top: 1px; + transform: rotate(45deg); +} +nav.main-nav .mobile-nav .hamburger.in div:nth-child(2) { + transform: translate(-17px); + width: 40px; +} +nav.main-nav .mobile-nav .hamburger.in div:last-child { + bottom: 1px; + position: relative; + transform: rotate(-45deg); +} +nav.main-nav ul { + align-items: center; + display: flex; + flex-direction: row; + margin: 0; + padding: 0; +} +@media (max-width: 991px) { + nav.main-nav ul { + background-color: #ffffff; + flex-direction: column; + height: 100%; + left: 100%; + padding: 24px; + position: fixed; + top: 0; + transition: 0.25s; + width: 100%; + } + nav.main-nav ul.in { + left: 0; + } +} +nav.main-nav ul li { + font-family: "Libre Baskerville", serif; + list-style: none; + width: 100%; +} +nav.main-nav ul li a { + font-family: "Libre Baskerville", serif; + color: #231F20; + display: inline-block; + font-size: 11px; + letter-spacing: 1px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + width: 100%; +} +@media (max-width: 991px) { + nav.main-nav ul li a { + font-size: 14px; + padding-bottom: 16px; + width: 50%; + } +} +nav.main-nav ul li:nth-child(-n+3) a { + text-align: left; +} +@media (max-width: 991px) { + nav.main-nav ul li:nth-child(-n+3) a { + text-align: left; + } +} +nav.main-nav ul li:nth-last-child(-n+3) a { + text-align: right; +} +@media (max-width: 991px) { + nav.main-nav ul li:nth-last-child(-n+3) a { + text-align: left; + } +} +nav.main-nav ul li.main-nav--logo a img { + margin: 0 8px; +} +@media (max-width: 991px) { + nav.main-nav ul li.main-nav--logo { + display: none; + } +} +@media (max-width: 991px) { + nav.main-nav { + border-radius: 0; + padding: 24px 0; + } +} + +.slides { + position: relative; +} +.slides.vineyard { + min-height: 300px; +} +.slides.vineyard img { + height: 300px; +} +.slides.house { + min-height: 400px; +} +.slides.house img { + height: 400px; +} +.slides img { + border-radius: 5px; + object-fit: cover; + opacity: 1; + transition: 0.15s; + width: 100%; +} +.slides img::selection { + background: rgba(255, 255, 255, 0); +} +.slides img.out { + opacity: 0; +} +.slides .slides-arrow { + align-items: center; + background: #ffffff; + border-radius: 5px; + cursor: pointer; + display: flex; + height: 50px; + justify-content: center; + left: -25px; + opacity: 1; + position: absolute; + right: auto; + top: 50%; + transform: translateY(-50%); + transition: 0.15s; + width: 50px; +} +.slides .slides-arrow.out { + opacity: 0; + pointer-events: none; +} +.slides .slides-arrow svg { + background-color: #bebebe; + border-radius: 3px; + color: #ffffff; + height: 32px; + padding: 4px; + pointer-events: none; + transition: 0.1s; + width: 32px; +} +.slides .slides-arrow:last-child { + left: auto; + right: -25px; +} +.slides .slides-arrow:hover svg { + background-color: #b1b1b1; + border-radius: 4px; + transform: scale(1.15); +} +.slides .slides-arrow:active svg { + background-color: #a5a5a5; + transform: scale(1.1); +} + +/*# sourceMappingURL=main.css.map */ diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..558d312 --- /dev/null +++ b/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["main.scss","components/_nav.scss","components/_slide.scss"],"names":[],"mappings":"AAsBA;EAPE;EASA;;;AAGF;EACE,kBA3BK;EA4BL,cA5BK;;AA8BL;EACE;EACA;;AAGF;EAIE;EACA;EACA;;;AAIJ;EA5BE;EA+BA,kBA/CM;EAgDN,OA7CM;EA8CN;EACA;;;AAGF;EArCE;;;AAyCF;EA5CE;;;AAgDF;EACE;EACA;EACA;;AAGE;EACE;EACA;;;ACvEN;EACI,YDCI;ECAJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBDjCF;ECkCE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE,kBDjDL;;ACqDC;EA3BF;IA4BI;;;AAIA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI,kBDrFA;ICsFA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EDvFJ;EC0FM;EACA;;AAEA;ED7FN;ECgGQ,OD1GF;EC2GE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAZF;IAaI;IACA;IACA;;;AAKF;EACE;;AAEA;EAHF;IAII;;;AAMJ;EACE;;AAEA;EAHF;IAII;;;AAOF;EACE;;AAIJ;EAPF;IAQI;;;AAMR;EAjKJ;IAkKQ;IACA;;;;ACnKR;EACI;;AAEA;EACE;;AACA;EACE;;AAIJ;EACE;;AACA;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA,YFnCE;EEoCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE,kBFtDK;EEuDL;EACA,OF1DA;EE2DA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;EACA;;AAKF;EACE;EACA","file":"main.css"} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..65a7eae --- /dev/null +++ b/css/main.scss @@ -0,0 +1,84 @@ +// colors +$gold: #AB996D; +$white: #ffffff; +$gray: #585858; +$light-gray: #bebebe; +$black: #231F20; + +// breakpoints +$xs-break: 575px; +$s-break: 767px; +$m-break: 991px; +$l-break: 1199px; + +// fonts +@mixin Libre { + font-family: 'Libre Baskerville', serif; +} +@mixin Lato { + font-family: 'Lato', sans-serif; +} + +//btns +.btn { + @include Libre; + font-size: 14px; +} + +.btn-primary { + background-color: $gold; + border-color: $gold; + + &:hover { + background-color: darken($gold, 10%); + border-color: darken($gold, 10%); + } + + &:active, + &:focus, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled):active:focus { + background-color: darken($gold, 15%); + border-color: darken($gold, 15%); + box-shadow: 0 0 0 0.2rem rgba(129, 113, 74, .5); + } +} + +body { + @include Lato; + + background-color: $white; + color: $black; + margin: 0; + overflow-x: hidden; +} + +// Enable native smooth-scrolling for in-page anchor navigation +// This complements the JS smooth-scroll and works when JS is unavailable +html { + scroll-behavior: smooth; +} + +p, a, li, span, div { + @include Lato; +} + +h1, h2, h3, h4, h5, h6 { + @include Libre; +} + +.page-content { + padding: 110px 0 0 0; + position: relative; + top: -32px; + + .hero-text { + h1 { + font-size: 64px; + margin-top: 0; + } + } +} + +@import 'components/nav'; +@import 'components/slide'; \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..7beb292 --- /dev/null +++ b/favicon.ico @@ -0,0 +1,2 @@ +Placeholder favicon file for Pine Creek website. +Replace this with a real 16x16/32x32 .ico when available. diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/Pine Creek Car Magnet Design.pdf b/img/Pine Creek Car Magnet Design.pdf new file mode 100644 index 0000000..d834d32 Binary files /dev/null and b/img/Pine Creek Car Magnet Design.pdf differ diff --git a/img/Pine Creek Emblem.docx b/img/Pine Creek Emblem.docx new file mode 100644 index 0000000..8bc5564 Binary files /dev/null and b/img/Pine Creek Emblem.docx differ diff --git a/img/Pine Creek Logo.jpg b/img/Pine Creek Logo.jpg new file mode 100644 index 0000000..0e1d49b Binary files /dev/null and b/img/Pine Creek Logo.jpg differ diff --git a/img/Pine Creek Map.jpg b/img/Pine Creek Map.jpg new file mode 100644 index 0000000..4593931 Binary files /dev/null and b/img/Pine Creek Map.jpg differ diff --git a/img/PineCreekLogo.svg b/img/PineCreekLogo.svg new file mode 100644 index 0000000..bde7442 --- /dev/null +++ b/img/PineCreekLogo.svg @@ -0,0 +1,659 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/house-0.jpg b/img/house-0.jpg new file mode 100644 index 0000000..4293801 Binary files /dev/null and b/img/house-0.jpg differ diff --git a/img/house-1.jpg b/img/house-1.jpg new file mode 100644 index 0000000..15deafc Binary files /dev/null and b/img/house-1.jpg differ diff --git a/img/house-10.jpg b/img/house-10.jpg new file mode 100644 index 0000000..dc86372 Binary files /dev/null and b/img/house-10.jpg differ diff --git a/img/house-11.jpg b/img/house-11.jpg new file mode 100644 index 0000000..9378f61 Binary files /dev/null and b/img/house-11.jpg differ diff --git a/img/house-12.jpg b/img/house-12.jpg new file mode 100644 index 0000000..f12bdb4 Binary files /dev/null and b/img/house-12.jpg differ diff --git a/img/house-13.jpg b/img/house-13.jpg new file mode 100644 index 0000000..e89afdd Binary files /dev/null and b/img/house-13.jpg differ diff --git a/img/house-14.jpg b/img/house-14.jpg new file mode 100644 index 0000000..b37dec0 Binary files /dev/null and b/img/house-14.jpg differ diff --git a/img/house-15.jpg b/img/house-15.jpg new file mode 100644 index 0000000..b6dd40b Binary files /dev/null and b/img/house-15.jpg differ diff --git a/img/house-16.jpg b/img/house-16.jpg new file mode 100644 index 0000000..b81ee7b Binary files /dev/null and b/img/house-16.jpg differ diff --git a/img/house-17.jpg b/img/house-17.jpg new file mode 100644 index 0000000..0abca55 Binary files /dev/null and b/img/house-17.jpg differ diff --git a/img/house-2.jpg b/img/house-2.jpg new file mode 100644 index 0000000..7b8b820 Binary files /dev/null and b/img/house-2.jpg differ diff --git a/img/house-3.jpg b/img/house-3.jpg new file mode 100644 index 0000000..aba564b Binary files /dev/null and b/img/house-3.jpg differ diff --git a/img/house-4.jpg b/img/house-4.jpg new file mode 100644 index 0000000..8dfe1fa Binary files /dev/null and b/img/house-4.jpg differ diff --git a/img/house-5.jpg b/img/house-5.jpg new file mode 100644 index 0000000..c82fe3e Binary files /dev/null and b/img/house-5.jpg differ diff --git a/img/house-6.jpg b/img/house-6.jpg new file mode 100644 index 0000000..6bcf4b5 Binary files /dev/null and b/img/house-6.jpg differ diff --git a/img/house-7.jpg b/img/house-7.jpg new file mode 100644 index 0000000..20207c3 Binary files /dev/null and b/img/house-7.jpg differ diff --git a/img/house-8.jpg b/img/house-8.jpg new file mode 100644 index 0000000..79c0f26 Binary files /dev/null and b/img/house-8.jpg differ diff --git a/img/house-9.jpg b/img/house-9.jpg new file mode 100644 index 0000000..8070c65 Binary files /dev/null and b/img/house-9.jpg differ diff --git a/img/intro_short.mp4 b/img/intro_short.mp4 new file mode 100644 index 0000000..57efc98 Binary files /dev/null and b/img/intro_short.mp4 differ diff --git a/img/kannapolis-nc.jpg b/img/kannapolis-nc.jpg new file mode 100644 index 0000000..f5a7930 Binary files /dev/null and b/img/kannapolis-nc.jpg differ diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..4a1bf74 --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,307 @@ + + + + +Asset 2 + + + + + + + + + + + + diff --git a/img/scan0018.pdf b/img/scan0018.pdf new file mode 100644 index 0000000..bb49eec Binary files /dev/null and b/img/scan0018.pdf differ diff --git a/img/vineyard-0.jpg b/img/vineyard-0.jpg new file mode 100644 index 0000000..31bf5e3 Binary files /dev/null and b/img/vineyard-0.jpg differ diff --git a/img/vineyard-1.jpg b/img/vineyard-1.jpg new file mode 100644 index 0000000..6b0ef87 Binary files /dev/null and b/img/vineyard-1.jpg differ diff --git a/img/vineyard-2.jpg b/img/vineyard-2.jpg new file mode 100644 index 0000000..5ba9d40 Binary files /dev/null and b/img/vineyard-2.jpg differ diff --git a/img/vineyard-3.jpg b/img/vineyard-3.jpg new file mode 100644 index 0000000..a9cace3 Binary files /dev/null and b/img/vineyard-3.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..30a8a1d --- /dev/null +++ b/index.html @@ -0,0 +1,165 @@ + + + + + + Pine Creek HOA + + + + + + + + + + + + + +
+ + +
+ +
+
+ +
+
+ +
+
+
+

Welcome to Pine Creek

+
Kannapolis' Premier Gated community
+
+
+

Pine Creek is one of the Greater Charlotte Area’s premier gated communities offering custom built homes in North Carolina’s Cabarrus County.

+

The neighborhood features elegant custom built homes based on French country designs and influences, and homes range in size from 4,500 to over 11,000 square feet. Each home is carefully positioned on lots of one acre or more in order to preserve the natural beauty of the original landscape and to protect each homeowner’s privacy.

+

Create lifelong memories with your family in a luxury, custom home in a secure and quiet community. Welcome home to Pine Creek.

+
+
+
+ +
+
+
+ +
+
+
+

The Vineyard

+

A subsect of Pine Creek, The Vineyard is its own haven. Enclosed by lush grape vines and woods, The Vineyard custom homes feature Spanish/Tuscan styled architectural designs.

+ Learn More +
+
+
+ +
+ +
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+

Build Your Custom Home in Pine Creek

+

While Pine Creek does not have a list of pre-approved custom home builders in order to provide owners with more flexibility in who builds their future custom home, Pine Creek Homeowners’ Association does evaluate proposed plans in accordance to the guidance in Pine Creek Covenants.

+

The primary focus of this approval process is to ensure all proposed home designs, architectural details and landscape designs align with the existing custom homes in Pine Creek. The HOA is pleased to provide feedback to a potential buyer on home plan renderings to confirm your vision would be in harmony with the style of the neighborhood.

+ View open lots + Contact us +
+
+
+ +
+ +
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+

Call Kannapolis, NC ‘Home’

+

Kannapolis, North Carolina is a family-oriented town filled with Southern charm. Kannapolis was originally developed in 1906 to be the home to Cannon Mills. Even though the mill is no longer open, Kannapolis has exploded with residential and business development and has become home to families desiring to live close to uptown with the small town, country feel.

+

The town is conveniently located; right off of I-85 and within 30 minutes of uptown Charlotte and Charlotte Douglas International Airport. With growing businesses, a vast array of shops and restaurants, a beautiful downtown, Cabarrus County schools and highly sought after private schools, and the grandeur of the NC Research Campus, Kannapolis is a wonderful place to call home.

+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+

Pine Creek Homeowners’ Association

+
+

The Pine Creek Homeowners’ Association consists of board members voted into position by homeowners within the neighborhood. The Homeowner’s Association is responsible for approving proposed building plans and ongoing maintenance of homes within the neighborhood to ensure homes are built and managed to meet the aesthetics of Pine Creek and the Vineyards.

+
+
+ + +
+
+

Contact Us

+

Email: info@pinecreekhoa.example

+
+
+
+ + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..000d797 --- /dev/null +++ b/js/main.js @@ -0,0 +1,178 @@ +const hamburger = document.getElementById('hamburger'), + mainNav = document.querySelector('#mainNav ul'), + navItem = document.getElementsByClassName('nav-item') + +// Nav toggle, open, close +const toggleNav = () => { + !(mainNav.classList.contains('in')) ? ( + mainNav.classList.add('in'), + hamburger.classList.add('in') + ) : ( + mainNav.classList.remove('in'), + hamburger.classList.remove('in') + ) + }, + openNav = () => mainNav.classList.add('in'), + closeNav = () => mainNav.classList.remove('in') + +// Hamburger menu icon click +hamburger.onclick = toggleNav + +// Nav items on click: close nav (mobile) and smooth-scroll to anchor targets +for (let i = 0; i < navItem.length; i++) { + navItem[i].onclick = function (e) { + // prevent default anchor jump; we'll smooth-scroll with offset instead + e.preventDefault() + // close mobile nav if open + closeNav() + + const href = this.getAttribute('href') || '' + if (href.startsWith('#')) { + const target = document.querySelector(href) + if (target) { + // compute offset to account for fixed header + const header = document.getElementById('mainNav') + const headerHeight = header ? header.offsetHeight : 0 + const extra = 8 // small spacing under header + const targetY = window.pageYOffset + target.getBoundingClientRect().top - headerHeight - extra + + window.scrollTo({ top: targetY, behavior: 'smooth' }) + return + } + } + + // fallback: follow the link if it's not an in-page anchor + if (href) window.location.href = href + } +} + +// If the page is loaded with a hash or the hash changes, adjust scroll to account for the fixed header +const scrollToHashWithOffset = (hash) => { + if (!hash) return + const target = document.querySelector(hash) + if (!target) return + const header = document.getElementById('mainNav') + const headerHeight = header ? header.offsetHeight : 0 + const extra = 8 + const targetY = window.pageYOffset + target.getBoundingClientRect().top - headerHeight - extra + // Use a short timeout to allow browser default jump to complete before adjusting + setTimeout(() => window.scrollTo({ top: targetY, behavior: 'smooth' }), 50) +} + +window.addEventListener('load', () => scrollToHashWithOffset(location.hash)) +window.addEventListener('hashchange', () => scrollToHashWithOffset(location.hash)) + +// light auth +window.onload = () => { + const board = document.getElementById('boardPage'), + owner = document.getElementById('ownerPage') + + if (board || owner) { + const response = prompt('Please enter the password.') + + switch (response) { + case '12345': + console.log('Board Member') + break + case 'abcde': + console.log('Owner') + break + default: + console.log('Access Denied') + break + } + } +} + +// Slides + +const slidesVineyard = document.getElementById('slidesVineyard'), + slidesVineyardLeft = document.querySelector('#slidesVineyard .slides-arrow:nth-last-child(2)'), + slidesVineyardRight = document.querySelector('#slidesVineyard .slides-arrow:last-child'), + slidesVineyardImg = document.querySelector('#slidesVineyard .slides-img'), + slidesHouse = document.getElementById('slidesHouse'), + slidesHouseLeft = document.querySelector('#slidesHouse .slides-arrow:nth-last-child(2)'), + slidesHouseRight = document.querySelector('#slidesHouse .slides-arrow:last-child'), + slidesHouseImg = document.querySelector('#slidesHouse .slides-img') + +let vineyardImgs = 0 + +slidesVineyardRight.onclick = () => { + vineyardImgs = vineyardImgs + 1 + slidesVineyardImg.classList.add('out') + setTimeout(() => { + slidesVineyardImg.setAttribute('src', 'img/vineyard-' + vineyardImgs + '.jpg') + slidesVineyardImg.classList.remove('out') + if (vineyardImgs >= 1) { + slidesVineyardLeft.classList.remove('out') + } + }, 150) +} + +slidesVineyardLeft.onclick = () => { + slidesVineyardImg.classList.add('out') + + setTimeout(() => { + slidesVineyardImg.classList.remove('out') + if (vineyardImgs > 0) { + vineyardImgs = vineyardImgs - 1 + slidesVineyardImg.setAttribute('src', 'img/vineyard-' + vineyardImgs + '.jpg') + } + if (vineyardImgs < 1) { + slidesVineyardLeft.classList.add('out') + } + }, 150) +} + +const imgVineyardError = (image) => { + vineyardImgs = 0 + image.src = 'img/vineyard-0.jpg' + + setTimeout(() => { + if (vineyardImgs < 1) { + slidesVineyardLeft.classList.add('out') + } + }, 150) + return true +} + +let houseImgs = 0 + +slidesHouseRight.onclick = () => { + houseImgs = houseImgs + 1 + slidesHouseImg.classList.add('out') + setTimeout(() => { + slidesHouseImg.setAttribute('src', 'img/house-' + houseImgs + '.jpg') + slidesHouseImg.classList.remove('out') + if (houseImgs >= 1) { + slidesHouseLeft.classList.remove('out') + } + }, 150) +} + +slidesHouseLeft.onclick = () => { + slidesHouseImg.classList.add('out') + + setTimeout(() => { + slidesHouseImg.classList.remove('out') + if (houseImgs > 0) { + houseImgs = houseImgs - 1 + slidesHouseImg.setAttribute('src', 'img/house-' + houseImgs + '.jpg') + } + if (houseImgs < 1) { + slidesHouseLeft.classList.add('out') + } + }, 150) +} + +const imgHouseError = (image) => { + houseImgs = 0 + image.src = 'img/house-0.jpg' + + setTimeout(() => { + if (houseImgs < 1) { + slidesHouseLeft.classList.add('out') + } + }, 150) + return true +} \ No newline at end of file diff --git a/old.index.php b/old.index.php new file mode 100644 index 0000000..d82d16f --- /dev/null +++ b/old.index.php @@ -0,0 +1,166 @@ + + + + + + + + Pine Creek HOA + + + + + + + + + + + + + + + +
+ +
+
+ +
+
+ +
+
+
+

Welcome to Pine Creek

+
Kannapolis' Premier Gated community
+
+
+

Pine Creek is one of the Greater Charlotte Area’s premier gated communities offering custom built homes in North Carolina’s Cabarrus County.

+

The neighborhood features elegant custom built homes based on French country designs and influences, and homes range in size from 4,500 to over 11,000 square feet. Each home is carefully positioned on lots of one acre or more in order to preserve the natural beauty of the original landscape and to protect each homeowner’s privacy.

+

Create lifelong memories with your family in a luxury, custom home in a secure and quiet community. Welcome home to Pine Creek.

+
+
+
+ +
+
+
+ +
+
+
+

The Vineyard

+

A subsect of Pine Creek, The Vineyard is its own haven. Enclosed by lush grape vines and woods, The Vineyard custom homes feature Spanish/Tuscan styled architectural designs.

+ Learn More +
+
+
+ +
+ +
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+

Build Your Custom Home in Pine Creek

+

While Pine Creek does not have a list of pre-approved custom home builders in order to provide owners with more flexibility in who builds their future custom home, Pine Creek Homeowners’ Association does evaluate proposed plans in accordance to the guidance in Pine Creek Covenants.

+

The primary focus of this approval process is to ensure all proposed home designs, architectural details and landscape designs align with the existing custom homes in Pine Creek. The HOA is pleased to provide feedback to a potential buyer on home plan renderings to confirm your vision would be in harmony with the style of the neighborhood.

+ View open lots + Contact us +
+
+
+ +
+ +
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+

Call Kannapolis, NC ‘Home’

+

Kannapolis, North Carolina is a family-oriented town filled with Southern charm. Kannapolis was originally developed in 1906 to be the home to Cannon Mills. Even though the mill is no longer open, Kannapolis has exploded with residential and business development and has become home to families desiring to live close to uptown with the small town, country feel.

+

The town is conveniently located; right off of I-85 and within 30 minutes of uptown Charlotte and Charlotte Douglas International Airport. With growing businesses, a vast array of shops and restaurants, a beautiful downtown, Cabarrus County schools and highly sought after private schools, and the grandeur of the NC Research Campus, Kannapolis is a wonderful place to call home.

+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+

Pine Creek Homeowners’ Association

+
+

The Pine Creek Homeowners’ Association consists of board members voted into position by homeowners within the neighborhood. The Homeowner’s Association is responsible for approving proposed building plans and ongoing maintenance of homes within the neighborhood to ensure homes are built and managed to meet the aesthetics of Pine Creek and the Vineyards.

+
+
+ +
+ + + + + +