first commit

.env

@@ -0,0 +1,26 @@
+NUXT_AUTH_SECRET=bFcOqf37V1DgSxsibuZ79jSIaI4MZ9TCB1Y7iWZFJZrtZdUJapesSi0dXo2Bx8xY
+
+GITHUB_CLIENT_ID='Ov23liUt9B61O46Mdfm4'
+GITHUB_CLIENT_SECRET='c7fc8dcb1b2c8f22120608425d07d5efd995baaf'
+GITHUB_SCOPE=['user:email']
+
+GOOGLE_CLIENT_ID='915364976256-691m0s87as2r5vdbqr96f6humblseobt.apps.googleusercontent.com'
+GOOGLE_CLIENT_SECRET='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'
+GOOGLE_REDIRECT_URL=http://localhost:3000/api/auth/callback/google
+
+AUTH_NO_SECRET=MlBdj44xjhZIlxQIiz4ZuszB1yvRMW0A
+BASE_SITE_URL=http://localhost:3000
+BASE_SITE_NAME='Beyhan Oğur'
+NODE_ENV='development'
+PORT=3000
+APP_TITLE='Beyhan Oğur'
+NUXT_API_SECRET='6YdkEwOZC0j5K9a5vJtJQGIuwAoqGG4c'
+PUBLIC_API_BASE=http://127.0.0.1:8080
+# NUXT_PUBLIC_API_BASE=https://api.beyhano.com.tr
+
+CLOUD_FLARE_SITE_KEY='0x4AAAAAACHzHKvlEwMamxCM'
+CLOUD_FLARE_SECRET='0x4AAAAAACHzHHisTSFzGw15HvwXF3yXRIg'
+
+# JWT için gizli anahtar. Güvenlik için bunu daha karmaşık bir değerle değiştirin.
+JWT_SECRET="VtkvoMMPdHAxijvPw4QlyPPIWWxHKdfBIrWCXlS7ZfsZGq4DsjXz6dT5MjFlOlMfHJAgFIigv21uk14jdfJI3h2pia"
+DEBUG_ENABLED=true

.gitignore

@@ -0,0 +1,19 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

Temp/login_register.md

@@ -0,0 +1,299 @@
+
+## Example Login Request
+
+```bash
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/auth/login' \
+  -H 'accept: application/json' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "email": "beyhan@beyhan.dev",
+  "password": "1923btO**"
+}'
+```
+
+**Request URL**
+
+```
+http://localhost:8080/api/v1/auth/login
+```
+
+---
+
+## Example Successful Response
+
+**HTTP Status Code:** `200 OK`
+
+**Response Body:**
+
+```json
+{
+  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2LCJlbWFpbCI6ImJleWhhbkBiZXloYW4uZGV2IiwiaXNfYWRtaW4iOnRydWUsImZpcnN0X25hbWUiOiJCZXloYW4iLCJsYXN0X25hbWUiOiJPxJ91ciIsInRva2VuX3R5cGUiOiJhY2Nlc3MiLCJzdWIiOiI2IiwiZXhwIjoxNzcxODI5NTM2LCJpYXQiOjE3NzE4MjIzMzZ9.Rq5XEOjMtE96-UDo2BqscsDEIMCfIwuIrzWAknIeHBA",
+  "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2LCJlbWFpbCI6ImJleWhhbkBiZXloYW4uZGV2IiwiaXNfYWRtaW4iOnRydWUsImZpcnN0X25hbWUiOiJCZXloYW4iLCJsYXN0X25hbWUiOiJPxJ91ciIsInRva2VuX3R5cGUiOiJyZWZyZXNoIiwic3ViIjoiNiIsImV4cCI6MTc3NDQxNDMzNiwiaWF0IjoxNzcxODIyMzM2fQ.FX4IwpZ5QcVuyWkFRT9QGTjk92GxJMlo2KlnTRBxiI4",
+  "user": {
+    "email": "beyhan@beyhan.dev",
+    "first_name": "Beyhan",
+    "id": 6,
+    "is_admin": true,
+    "last_name": "Oğur",
+    "username": "Beyhan Oğur"
+  }
+}
+```
+
+**Response Headers:**
+
+```
+access-control-allow-credentials: true
+access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With
+access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS
+access-control-allow-origin: http://localhost:8080
+access-control-max-age: 600
+content-length: 770
+content-type: application/json; charset=utf-8
+date: Mon,23 Feb 2026 04:52:15 GMT
+vary: Origin
+```
+
+---
+
+## Example Get Current User ("/me") Request
+
+```bash
+curl -X 'GET' \
+  'http://localhost:8080/api/v1/auth/me' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2LCJlbWFpbCI6ImJleWhhbkBiZXloYW4uZGV2IiwiaXNfYWRtaW4iOnRydWUsImZpcnN0X25hbWUiOiJCZXloYW4iLCJsYXN0X25hbWUiOiJPxJ91ciIsInRva2VuX3R5cGUiOiJhY2Nlc3MiLCJzdWIiOiI2IiwiZXhwIjoxNzcxODI5NTM2LCJpYXQiOjE3NzE4MjIzMzZ9.Rq5XEOjMtE96-UDo2BqscsDEIMCfIwuIrzWAknIeHBA'
+```
+
+**Request URL**
+
+```
+http://localhost:8080/api/v1/auth/me
+```
+
+---
+
+## Example Successful Response
+
+**HTTP Status Code:** `200 OK`
+
+**Response Body:**
+
+```json
+{
+  "user": {
+    "email": "beyhan@beyhan.dev",
+    "first_name": "Beyhan",
+    "id": 6,
+    "is_admin": true,
+    "last_name": "Oğur"
+  }
+}
+```
+
+**Response Headers:**
+
+```
+content-length: 103
+content-type: application/json; charset=utf-8
+date: Mon,23 Feb 2026 04:54:28 GMT
+```
+
+---
+
+## Example Refresh Token Request
+
+```bash
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/auth/refresh' \
+  -H 'accept: application/json' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2LCJlbWFpbCI6ImJleWhhbkBiZXloYW4uZGV2IiwiaXNfYWRtaW4iOnRydWUsImZpcnN0X25hbWUiOiJCZXloYW4iLCJsYXN0X25hbWUiOiJPxJ91ciIsInRva2VuX3R5cGUiOiJyZWZyZXNoIiwic3ViIjoiNiIsImV4cCI6MTc3NDQxNDMzNiwiaWF0IjoxNzcxODIyMzM2fQ.FX4IwpZ5QcVuyWkFRT9QGTjk92GxJMlo2KlnTRBxiI4"
+}'
+```
+
+**Request URL**
+
+```
+http://localhost:8080/api/v1/auth/refresh
+```
+
+---
+
+## Example Successful Response
+
+**HTTP Status Code:** `200 OK`
+
+**Response Body:**
+
+```json
+{
+  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2LCJlbWFpbCI6ImJleWhhbkBiZXloYW4uZGV2IiwiaXNfYWRtaW4iOnRydWUsImZpcnN0X25hbWUiOiJCZXloYW4iLCJsYXN0X25hbWUiOiJPxJ91ciIsInRva2VuX3R5cGUiOiJhY2Nlc3MiLCJzdWIiOiI2IiwiZXhwIjoxNzcxODI5NzQ3LCJpYXQiOjE3NzE4MjI1NDd9.gw2lmGRfRyuDcicitWXgx0l48FbDWWieWcOrs2McTbw",
+  "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2LCJlbWFpbCI6ImJleWhhbkBiZXloYW4uZGV2IiwiaXNfYWRtaW4iOnRydWUsImZpcnN0X25hbWUiOiJCZXloYW4iLCJsYXN0X25hbWUiOiJPxJ91ciIsInRva2VuX3R5cGUiOiJyZWZyZXNoIiwic3ViIjoiNiIsImV4cCI6MTc3NDQxNDU0NywiaWF0IjoxNzcxODIyNTQ3fQ.9soEk6LvbG-BjV5fcmyu5MQMaerq7PT8QUXsqIasoF4"
+}
+```
+
+**Response Headers:**
+
+```
+access-control-allow-credentials: true
+access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With
+access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS
+access-control-allow-origin: http://localhost:8080
+access-control-max-age: 600
+content-length: 642
+content-type: application/json; charset=utf-8
+date: Mon,23 Feb 2026 04:55:46 GMT
+vary: Origin
+```
+
+---
+
+## Example Register Request
+
+```bash
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/auth/register' \
+  -H 'accept: application/json' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "email": "string@strind.com",
+  "first_name": "string",
+  "last_name": "string",
+  "password": "string",
+  "username": "string"
+}'
+```
+
+**Request URL**
+
+```
+http://localhost:8080/api/v1/auth/register
+```
+
+---
+
+## Example Successful Response
+
+**HTTP Status Code:** `201 Created`
+
+**Response Body:**
+
+```json
+{
+  "message": "registration successful, please verify your email before login",
+  "user": {
+    "email": "string@strind.com",
+    "email_verified": false,
+    "first_name": "string",
+    "id": 47,
+    "is_admin": false,
+    "last_name": "string",
+    "username": "string"
+  }
+}
+```
+
+**Response Headers:**
+
+```
+access-control-allow-credentials: true
+access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With
+access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS
+access-control-allow-origin: http://localhost:8080
+access-control-max-age: 600
+content-length: 224
+content-type: application/json; charset=utf-8
+date: Mon,23 Feb 2026 04:56:57 GMT
+vary: Origin
+```
+
+---
+
+## Example Resend Verification Email Request
+
+```bash
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/auth/resend-verification' \
+  -H 'accept: application/json' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "email": "string@strind.com"
+}'
+```
+
+**Request URL**
+
+```
+http://localhost:8080/api/v1/auth/resend-verification
+```
+
+---
+
+## Example Successful Response
+
+**HTTP Status Code:** `200 OK`
+
+**Response Body:**
+
+```json
+{
+  "message": "verification email has been sent"
+}
+```
+
+**Response Headers:**
+
+```
+access-control-allow-credentials: true
+access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With
+access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS
+access-control-allow-origin: http://localhost:8080
+access-control-max-age: 600
+content-length: 46
+content-type: application/json; charset=utf-8
+date: Mon,23 Feb 2026 04:59:08 GMT
+vary: Origin
+```
+
+---
+
+## Example Verify Email Request
+
+```bash
+curl -X 'GET' \
+  'http://localhost:8080/api/v1/auth/verify-email?token=8e89c1ad1e52453894bd1a4bdd2ca9ac1f27d3f862f5dc9858ae5412e31d409e' \
+  -H 'accept: application/json'
+```
+
+**Request URL**
+
+```
+http://localhost:8080/api/v1/auth/verify-email?token=8e89c1ad1e52453894bd1a4bdd2ca9ac1f27d3f862f5dc9858ae5412e31d409e
+```
+
+---
+
+## Example Successful Response
+
+**HTTP Status Code:** `200 OK`
+
+**Response Body:**
+
+```json
+{
+  "message": "email verified successfully"
+}
+```
+
+**Response Headers:**
+
+```
+content-length: 41
+content-type: application/json; charset=utf-8
+date: Mon,23 Feb 2026 05:00:13 GMT
+```
+
+---

app/app.vue

@@ -0,0 +1,10 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+// Canvas theme: body.stretched required for full-width layout
+useHead({ bodyAttrs: { class: 'stretched' } })
+</script>

app/components/AppFooter.vue

@@ -0,0 +1,248 @@
+<template>
+    <footer id="footer" class="dark">
+      <div class="container">
+
+        <!-- Footer Widgets
+        ============================================= -->
+        <div class="footer-widgets-wrap">
+
+          <div class="row col-mb-50">
+            <div class="col-lg-8">
+
+              <div class="row col-mb-50">
+                <div class="col-md-4">
+
+                  <div class="widget">
+
+                    <img src="/images/footer-widget-logo.png" alt="Image" class="footer-logo">
+
+                    <p>We believe in <strong>Simple</strong>, <strong>Creative</strong> &amp; <strong>Flexible</strong> Design Standards.</p>
+
+                    <div style="background: url('/images/world-map.png') no-repeat center center; background-size: 100%;">
+                      <address>
+                        <strong>Headquarters:</strong><br>
+                        795 Folsom Ave, Suite 600<br>
+                        San Francisco, CA 94107<br>
+                      </address>
+                      <abbr title="Phone Number"><strong>Phone:</strong></abbr> (1) 8547 632521<br>
+                      <abbr title="Fax"><strong>Fax:</strong></abbr> (1) 11 4752 1433<br>
+                      <abbr title="Email Address"><strong>Email:</strong></abbr> info@canvas.com
+                    </div>
+
+                  </div>
+
+                </div>
+
+                <div class="col-md-4">
+
+                  <div class="widget widget_links">
+
+                    <h4>Blogroll</h4>
+
+                    <ul>
+                      <li><a href="https://codex.wordpress.org/">Documentation</a></li>
+                      <li><a href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a></li>
+                      <li><a href="https://wordpress.org/extend/plugins/">Plugins</a></li>
+                      <li><a href="https://wordpress.org/support/">Support Forums</a></li>
+                      <li><a href="https://wordpress.org/extend/themes/">Themes</a></li>
+                      <li><a href="https://wordpress.org/news/">Canvas Blog</a></li>
+                      <li><a href="https://planet.wordpress.org/">Canvas Planet</a></li>
+                    </ul>
+
+                  </div>
+
+                </div>
+
+                <div class="col-md-4">
+
+                  <div class="widget">
+                    <h4>Recent Posts</h4>
+
+                    <div id="post-list-footer" class="posts-sm row col-mb-30">
+                      <div class="entry col-12">
+                        <div class="grid-inner row">
+                          <div class="col">
+                            <div class="entry-title">
+                              <h4><a href="#">Lorem ipsum dolor sit amet, consectetur</a></h4>
+                            </div>
+                            <div class="entry-meta">
+                              <ul>
+                                <li>10th July 2021</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="entry col-12">
+                        <div class="grid-inner row">
+                          <div class="col">
+                            <div class="entry-title">
+                              <h4><a href="#">Elit Assumenda vel amet dolorum quasi</a></h4>
+                            </div>
+                            <div class="entry-meta">
+                              <ul>
+                                <li>10th July 2021</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="entry col-12">
+                        <div class="grid-inner row">
+                          <div class="col">
+                            <div class="entry-title">
+                              <h4><a href="#">Debitis nihil placeat, illum est nisi</a></h4>
+                            </div>
+                            <div class="entry-meta">
+                              <ul>
+                                <li>10th July 2021</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+
+            </div>
+
+            <div class="col-lg-4">
+
+              <div class="row col-mb-50">
+                <div class="col-md-4 col-lg-12">
+                  <div class="widget">
+
+                    <div class="row col-mb-30">
+                      <div class="col-lg-6">
+                        <div class="counter counter-small"><span data-from="50" data-to="15065421" data-refresh-interval="80" data-speed="3000" data-comma="true"/></div>
+                        <h5 class="mb-0">Total Downloads</h5>
+                      </div>
+
+                      <div class="col-lg-6">
+                        <div class="counter counter-small"><span data-from="100" data-to="18465" data-refresh-interval="50" data-speed="2000" data-comma="true"/></div>
+                        <h5 class="mb-0">Clients</h5>
+                      </div>
+                    </div>
+
+                  </div>
+                </div>
+
+                <div class="col-md-5 col-lg-12">
+                  <div class="widget subscribe-widget">
+                    <h5><strong>Subscribe</strong> to Our Newsletter to get Important News, Amazing Offers &amp; Inside Scoops:</h5>
+                    <div class="widget-subscribe-form-result"/>
+                    <form id="widget-subscribe-form" action="include/subscribe.php" method="post" class="mb-0">
+                      <div class="input-group mx-auto">
+                        <div class="input-group-text"><i class="bi-envelope-plus"/></div>
+                        <input id="widget-subscribe-form-email" type="email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Enter your Email">
+                        <button class="btn btn-success" type="submit">Subscribe</button>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+
+                <div class="col-md-3 col-lg-12">
+                  <div class="widget">
+
+                    <div class="row col-mb-30">
+                      <div class="col-6 col-md-12 col-lg-6 d-flex align-items-center">
+                        <a href="#" class="social-icon text-white border-transparent bg-facebook me-2 mb-0 float-none">
+                          <i class="fa-brands fa-facebook-f"/>
+                          <i class="fa-brands fa-facebook-f"/>
+                        </a>
+                        <a href="#" class="ms-1"><small class="d-block"><strong>Like Us</strong><br>on Facebook</small></a>
+                      </div>
+                      <div class="col-6 col-md-12 col-lg-6 d-flex align-items-center">
+                        <a href="#" class="social-icon text-white border-transparent bg-rss me-2 mb-0 float-none">
+                          <i class="fa-solid fa-rss"/>
+                          <i class="fa-solid fa-rss"/>
+                        </a>
+                        <a href="#" class="ms-1"><small class="d-block"><strong>Subscribe</strong><br>to RSS Feeds</small></a>
+                      </div>
+                    </div>
+
+                  </div>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+
+        </div><!-- .footer-widgets-wrap end -->
+
+      </div>
+
+      <!-- Copyrights
+      ============================================= -->
+      <div id="copyrights">
+        <div class="container">
+
+          <div class="row col-mb-30">
+
+            <div class="col-md-6 text-center text-md-start">
+              Copyrights &copy; 2023 All Rights Reserved by Canvas Inc.<br>
+              <div class="copyright-links"><a href="#">Terms of Use</a> / <a href="#">Privacy Policy</a></div>
+            </div>
+
+            <div class="col-md-6 text-center text-md-end">
+              <div class="d-flex justify-content-center justify-content-md-end mb-2">
+                <a href="#" class="social-icon border-transparent si-small h-bg-facebook">
+                  <i class="fa-brands fa-facebook-f"/>
+                  <i class="fa-brands fa-facebook-f"/>
+                </a>
+
+                <a href="#" class="social-icon border-transparent si-small h-bg-x-twitter">
+                  <i class="fa-brands fa-x-twitter"/>
+                  <i class="fa-brands fa-x-twitter"/>
+                </a>
+
+                <a href="#" class="social-icon border-transparent si-small h-bg-google">
+                  <i class="fa-brands fa-google"/>
+                  <i class="fa-brands fa-google"/>
+                </a>
+
+                <a href="#" class="social-icon border-transparent si-small h-bg-pinterest">
+                  <i class="fa-brands fa-pinterest-p"/>
+                  <i class="fa-brands fa-pinterest-p"/>
+                </a>
+
+                <a href="#" class="social-icon border-transparent si-small h-bg-vimeo">
+                  <i class="fa-brands fa-vimeo-v"/>
+                  <i class="fa-brands fa-vimeo-v"/>
+                </a>
+
+                <a href="#" class="social-icon border-transparent si-small h-bg-github">
+                  <i class="fa-brands fa-github"/>
+                  <i class="fa-brands fa-github"/>
+                </a>
+
+                <a href="#" class="social-icon border-transparent si-small h-bg-yahoo">
+                  <i class="fa-brands fa-yahoo"/>
+                  <i class="fa-brands fa-yahoo"/>
+                </a>
+
+                <a href="#" class="social-icon border-transparent si-small me-0 h-bg-linkedin">
+                  <i class="fa-brands fa-linkedin"/>
+                  <i class="fa-brands fa-linkedin"/>
+                </a>
+              </div>
+
+              <i class="bi-envelope"/> info@canvas.com <span class="middot">&middot;</span> <i class="fa-solid fa-phone"/> +1-11-6541-6369 <span class="middot">&middot;</span> <i class="bi-skype"/> CanvasOnSkype
+            </div>
+
+          </div>
+
+        </div>
+      </div><!-- #copyrights end -->
+    </footer><!-- #footer end -->
+
+</template>
+
+<script setup lang="ts">
+</script>

app/components/AppHeader.vue

@@ -0,0 +1,80 @@
+<template>
+  <header id="header" class="full-header">
+    <div id="header-wrap">
+      <div class="container">
+        <div class="header-row top-search-parent">
+
+          <!-- Logo -->
+          <div id="logo">
+            <a href="/">
+              <img class="logo-default" srcset="/images/logo.png, /images/logo@2x.png 2x" src="/images/logo@2x.png" alt="Canvas Logo">
+              <img class="logo-dark" srcset="/images/logo-dark.png, /images/logo-dark@2x.png 2x" src="/images/logo-dark@2x.png" alt="Canvas Logo">
+            </a>
+          </div>
+
+          <div class="header-misc">
+            <div id="top-search" class="header-misc-icon">
+              <a id="top-search-trigger" href="#"><i class="uil uil-search"/><i class="bi-x-lg"/></a>
+            </div>
+            <div id="top-cart" class="header-misc-icon d-none d-sm-block">
+              <a id="top-cart-trigger" href="#"><i class="uil uil-shopping-bag"/><span class="top-cart-number">5</span></a>
+              <div class="top-cart-content">
+                <div class="top-cart-title">
+                  <h4>Shopping Cart</h4>
+                </div>
+                <div class="top-cart-items">
+                  <div class="top-cart-item">
+                    <div class="top-cart-item-image">
+                      <a href="#"><img src="/images/shop/small/1.jpg" alt="Blue Round-Neck Tshirt"></a>
+                    </div>
+                    <div class="top-cart-item-desc">
+                      <div class="top-cart-item-desc-title">
+                        <a href="#">Blue Round-Neck Tshirt with a Button</a>
+                        <span class="top-cart-item-price d-block">$19.99</span>
+                      </div>
+                      <div class="top-cart-item-quantity">x 2</div>
+                    </div>
+                  </div>
+                  <div class="top-cart-item">
+                    <div class="top-cart-item-image">
+                      <a href="#"><img src="/images/shop/small/6.jpg" alt="Light Blue Denim Dress"></a>
+                    </div>
+                    <div class="top-cart-item-desc">
+                      <div class="top-cart-item-desc-title">
+                        <a href="#">Light Blue Denim Dress</a>
+                        <span class="top-cart-item-price d-block">$24.99</span>
+                      </div>
+                      <div class="top-cart-item-quantity">x 3</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="top-cart-action">
+                  <span class="top-checkout-price">$114.95</span>
+                  <a href="#" class="button button-3d button-small m-0">View Cart</a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="primary-menu-trigger">
+            <button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
+              <span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"/></span>
+            </button>
+          </div>
+
+          <!-- Primary Navigation -->
+          <AppPrimaryMenu />
+
+          <form class="top-search-form" action="search.html" method="get">
+            <input type="text" name="q" class="form-control" value="" placeholder="Type &amp; Hit Enter.." autocomplete="off">
+          </form>
+
+        </div>
+      </div>
+    </div>
+    <div class="header-wrap-clone" />
+  </header>
+</template>
+
+<script setup lang="ts">
+</script>

app/components/GotoTop.vue

@@ -0,0 +1,6 @@
+<template>
+  <div id="gotoTop" class="uil uil-angle-up" aria-hidden="true" />
+</template>
+
+<script setup lang="ts">
+</script>

app/components/LoginComponent.vue

@@ -0,0 +1,130 @@
+<template>
+  <!-- Page Title -->
+  <section class="page-title bg-transparent">
+    <div class="container">
+      <div class="page-title-row">
+        <div class="page-title-content">
+          <h1>Giriş</h1>
+        </div>
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item"><NuxtLink to="/">Ana Sayfa</NuxtLink></li>
+            <li class="breadcrumb-item active" aria-current="page">Giriş</li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+  </section>
+
+  <section id="content">
+    <div class="content-wrap">
+      <div class="container">
+        <div class="row g-5 justify-content-center">
+          <div class="col-md-6 col-lg-5">
+            <div class="card mb-0 p-2 border-default bg-contrast-100">
+              <div class="card-body p-4">
+                <h3 class="mb-4">Hesabınıza giriş yapın</h3>
+
+                <form class="row mb-0" @submit.prevent="onSubmit">
+                  <div class="col-12 form-group">
+                    <label for="login-email">E-posta</label>
+                    <input
+                      id="login-email"
+                      v-model="email"
+                      type="email"
+                      class="form-control"
+                      :class="{ 'is-invalid': fieldError.email }"
+                      autocomplete="email"
+                      placeholder="ornek@email.com"
+                    >
+                    <div v-if="fieldError.email" class="invalid-feedback">{{ fieldError.email }}</div>
+                  </div>
+                  <div class="col-12 form-group">
+                    <label for="login-password">Şifre</label>
+                    <input
+                      id="login-password"
+                      v-model="password"
+                      type="password"
+                      class="form-control"
+                      :class="{ 'is-invalid': fieldError.password }"
+                      autocomplete="current-password"
+                    >
+                    <div v-if="fieldError.password" class="invalid-feedback">{{ fieldError.password }}</div>
+                  </div>
+                  <div class="col-12 form-group">
+                    <div ref="turnstileWrapRef" class="turnstile-form-widget">
+                      <NuxtTurnstile
+                        ref="turnstileRef"
+                        v-model="turnstileToken"
+                        :options="{ theme: 'light' }"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-12 form-group">
+                    <button
+                      type="submit"
+                      class="btn btn-secondary w-100 m-0"
+                      :disabled="loading"
+                    >
+                      {{ loading ? 'Giriş yapılıyor...' : 'Giriş yap' }}
+                    </button>
+                  </div>
+                </form>
+
+                <div class="divider divider-center my-4">
+                  <span>veya</span>
+                </div>
+
+                <div class="d-flex flex-column gap-2">
+                  <button
+                    type="button"
+                    class="btn btn-outline-secondary"
+                    :disabled="loading"
+                    @click="signInWith('github')"
+                  >
+                    <Icon name="mdi:github" class="me-2" size="1.25em" />
+                    GitHub ile giriş yap
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-outline-secondary"
+                    :disabled="loading"
+                    @click="signInWith('google')"
+                  >
+                    <Icon name="mdi:google" class="me-2" size="1.25em" />
+                    Google ile giriş yap
+                  </button>
+                </div>
+
+                <p class="mt-4 mb-0 text-center">
+                  Hesabınız yok mu?
+                  <NuxtLink to="/auth/register">Kayıt olun</NuxtLink>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useLogin } from '~/composables/useLogin'
+import { useTurnstileScale } from '~/composables/useTurnstileScale'
+
+const turnstileWrapRef = ref<HTMLElement | null>(null)
+useTurnstileScale(turnstileWrapRef)
+
+const {
+  email,
+  password,
+  turnstileToken,
+  turnstileRef,
+  fieldError,
+  loading,
+  onSubmit,
+  signInWith,
+} = useLogin()
+</script>

app/components/PageTitle.vue

@@ -0,0 +1,105 @@
+<template>
+  <!-- Arka plan resmi tam genişlikte section uzerine uygulanir -->
+  <section class="page-title" :style="props.image && imageType === 'background'
+    ? { backgroundImage: `url(${props.image})`, backgroundSize: 'cover', backgroundPosition: 'center' }
+    : undefined" :class="{ 'has-bg-image': props.image && imageType === 'background' }">
+    <div class="container">
+      <div class="page-title-row">
+        <!-- Inline resim secenegi -->
+        <img v-if="props.image && imageType === 'inline'" :src="props.image" alt="page image"
+          class="page-title-image" />
+
+        <div class="page-title-content">
+          <h1 :style="props.color ? { color: props.color } : undefined">{{ props.title }}</h1>
+          <span v-if="props.subtitle" :style="props.color ? { color: props.color } : undefined">{{ props.subtitle
+            }}</span>
+        </div>
+
+        <nav v-if="props.breadcrumbs?.length" aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li v-for="(item, i) in props.breadcrumbs" :key="i" class="breadcrumb-item"
+              :class="{ active: i === props.breadcrumbs.length - 1 }"
+              :aria-current="i === props.breadcrumbs.length - 1 ? 'page' : undefined">
+              <a v-if="i < props.breadcrumbs.length - 1" :href="item.href">{{ item.label }}</a>
+              <template v-else>{{ item.label }}</template>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+interface Breadcrumb {
+  label: string
+  href?: string
+}
+
+// Provide defaults for props that are not required
+const props = defineProps<{
+  title: string
+  subtitle?: string
+  breadcrumbs?: Breadcrumb[]
+  // Banner'dan gelen renk (#ff2600 gibi hex deger)
+  color?: string
+  // Arka plan resim URL'si
+  image?: string
+  // Resmin kullanim sekli: background veya inline
+  imageType?: 'background' | 'inline'
+}>()
+
+// computed ile reaktif imageType — prop async güncellendiğinde de doğru çalışır
+const imageType = computed(() => props.imageType ?? 'background')
+</script>
+
+<style scoped>
+/* Tam genislik arka plan - container disinda */
+.page-title {
+  width: 100%;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+}
+
+.page-title.has-bg-image {
+  color: #fff;
+}
+
+.page-title .container {
+  width: 100%;
+}
+
+.page-title-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 40px 20px;
+  min-height: 400px;
+}
+
+.page-title-image {
+  max-width: 140px;
+  max-height: 140px;
+  object-fit: cover;
+  margin-right: 20px;
+  border-radius: 8px;
+}
+
+.page-title-content h1 {
+  margin: 0 0 6px 0;
+}
+
+@media (max-width: 768px) {
+  .page-title-row {
+    flex-direction: column;
+    text-align: center;
+    min-height: 300px;
+  }
+
+  .page-title-image {
+    margin: 0 0 12px 0;
+  }
+}
+</style>

app/components/RegisterComponent.vue

@@ -0,0 +1,204 @@
+<template>
+  <!-- Page Title -->
+  <section class="page-title bg-transparent">
+    <div class="container">
+      <div class="page-title-row">
+        <div class="page-title-content">
+          <h1>Kayıt ol</h1>
+        </div>
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item"><NuxtLink to="/">Ana Sayfa</NuxtLink></li>
+            <li class="breadcrumb-item active" aria-current="page">Kayıt</li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+  </section>
+
+  <section id="content">
+    <div class="content-wrap">
+      <div class="container">
+        <div class="row g-5 justify-content-center">
+          <div class="col-md-8 col-lg-6">
+            <div class="card mb-0 p-2 border-default bg-contrast-100">
+              <div class="card-body p-4">
+                <h3 class="mb-4">Yeni hesap oluşturun</h3>
+                <p class="text-muted small mb-4">
+                  Kayıt sonrası e-posta adresinize doğrulama linki gönderilecektir. Giriş yapmadan önce e-postanızı doğrulamanız gerekir.
+                </p>
+
+                <div v-if="success" class="alert alert-success" role="alert">
+                  <p class="mb-0">{{ success }}</p>
+                  <button
+                    v-if="!resendSent"
+                    type="button"
+                    class="btn btn-link btn-sm p-0 mt-2"
+                    :disabled="resendLoading"
+                    @click="resendVerification"
+                  >
+                    {{ resendLoading ? 'Gönderiliyor...' : 'Doğrulama e-postasını yeniden gönder' }}
+                  </button>
+                  <span v-else class="d-block mt-2 small text-success">E-posta gönderildi.</span>
+                </div>
+
+                <form v-if="!success" class="row g-3" @submit.prevent="onSubmit">
+                  <div class="col-md-6 form-group">
+                    <label for="reg-first_name">Ad</label>
+                    <input
+                      id="reg-first_name"
+                      v-model="first_name"
+                      type="text"
+                      class="form-control"
+                      :class="{ 'is-invalid': fieldError.first_name }"
+                      autocomplete="given-name"
+                    >
+                    <div v-if="fieldError.first_name" class="invalid-feedback">{{ fieldError.first_name }}</div>
+                  </div>
+                  <div class="col-md-6 form-group">
+                    <label for="reg-last_name">Soyad</label>
+                    <input
+                      id="reg-last_name"
+                      v-model="last_name"
+                      type="text"
+                      class="form-control"
+                      :class="{ 'is-invalid': fieldError.last_name }"
+                      autocomplete="family-name"
+                    >
+                    <div v-if="fieldError.last_name" class="invalid-feedback">{{ fieldError.last_name }}</div>
+                  </div>
+                  <div class="col-12 form-group">
+                    <label for="reg-username">Kullanıcı adı</label>
+                    <input
+                      id="reg-username"
+                      v-model="username"
+                      type="text"
+                      class="form-control"
+                      :class="{ 'is-invalid': fieldError.username }"
+                      autocomplete="username"
+                    >
+                    <div v-if="fieldError.username" class="invalid-feedback">{{ fieldError.username }}</div>
+                  </div>
+                  <div class="col-12 form-group">
+                    <label for="reg-email">E-posta</label>
+                    <input
+                      id="reg-email"
+                      v-model="email"
+                      type="email"
+                      class="form-control"
+                      :class="{ 'is-invalid': fieldError.email }"
+                      autocomplete="email"
+                      placeholder="ornek@email.com"
+                    >
+                    <div v-if="fieldError.email" class="invalid-feedback">{{ fieldError.email }}</div>
+                  </div>
+                  <div class="col-md-6 form-group">
+                    <label for="reg-password">Şifre</label>
+                    <input
+                      id="reg-password"
+                      v-model="password"
+                      type="password"
+                      class="form-control"
+                      :class="{ 'is-invalid': fieldError.password }"
+                      autocomplete="new-password"
+                    >
+                    <div v-if="fieldError.password" class="invalid-feedback">{{ fieldError.password }}</div>
+                  </div>
+                  <div class="col-md-6 form-group">
+                    <label for="reg-password_confirm">Şifre (tekrar)</label>
+                    <input
+                      id="reg-password_confirm"
+                      v-model="password_confirm"
+                      type="password"
+                      class="form-control"
+                      :class="{ 'is-invalid': fieldError.password_confirm }"
+                      autocomplete="new-password"
+                    >
+                    <div v-if="fieldError.password_confirm" class="invalid-feedback">{{ fieldError.password_confirm }}</div>
+                  </div>
+                  <div class="col-12 form-group">
+                    <div ref="turnstileWrapRef" class="turnstile-form-widget">
+                      <NuxtTurnstile
+                        ref="turnstileRef"
+                        v-model="turnstileToken"
+                        :options="{ theme: 'light' }"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-12 form-group">
+                    <button
+                      type="submit"
+                      class="btn btn-dark w-100 m-0"
+                      :disabled="loading"
+                    >
+                      {{ loading ? 'Kaydediliyor...' : 'Kayıt ol' }}
+                    </button>
+                  </div>
+                </form>
+
+                <template v-if="!success">
+                  <div class="divider divider-center my-4">
+                    <span>veya</span>
+                  </div>
+                  <div class="d-flex flex-column gap-2">
+                    <button
+                      type="button"
+                      class="btn btn-outline-secondary"
+                      :disabled="loading"
+                      @click="signInWith('github')"
+                    >
+                      <Icon name="mdi:github" class="me-2" size="1.25em" />
+                      GitHub ile kayıt ol
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-outline-secondary"
+                      :disabled="loading"
+                      @click="signInWith('google')"
+                    >
+                      <Icon name="mdi:google" class="me-2" size="1.25em" />
+                      Google ile kayıt ol
+                    </button>
+                  </div>
+                </template>
+
+                <p class="mt-4 mb-0 text-center">
+                  Zaten hesabınız var mı?
+                  <NuxtLink to="/auth/login">Giriş yapın</NuxtLink>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRegister } from '~/composables/useRegister'
+import { useTurnstileScale } from '~/composables/useTurnstileScale'
+
+const turnstileWrapRef = ref<HTMLElement | null>(null)
+useTurnstileScale(turnstileWrapRef)
+
+const {
+  email,
+  first_name,
+  last_name,
+  username,
+  password,
+  password_confirm,
+  turnstileToken,
+  turnstileRef,
+  fieldError,
+  success,
+  loading,
+  resendLoading,
+  resendSent,
+  onSubmit,
+  resendVerification,
+  signInWith,
+} = useRegister()
+</script>

app/composables/useLogin.ts

@@ -0,0 +1,80 @@
+import Swal from 'sweetalert2'
+import { loginSchema, getFirstZodError, getFieldErrors } from '~~/lib/validations/auth'
+
+export function useLogin () {
+  const { signIn } = useAuth()
+  const router = useRouter()
+  const route = useRoute()
+
+  const email = ref('')
+  const password = ref('')
+  const turnstileToken = ref<string | null>(null)
+  const turnstileRef = ref<{ reset: () => void } | null>(null)
+  const fieldError = ref<Record<string, string>>({})
+  const loading = ref(false)
+
+  const callbackUrl = computed(() => (route.query.callbackUrl as string) || '/')
+
+  async function onSubmit () {
+    fieldError.value = {}
+    const parsed = loginSchema.safeParse({ email: email.value, password: password.value })
+    if (!parsed.success) {
+      fieldError.value = getFieldErrors(parsed.error)
+      await Swal.fire({ icon: 'error', title: 'Doğrulama hatası', text: getFirstZodError(parsed.error) })
+      return
+    }
+    if (!turnstileToken.value) {
+      await Swal.fire({ icon: 'warning', title: 'Güvenlik doğrulaması', text: 'Lütfen güvenlik kutusunu işaretleyin.' })
+      return
+    }
+    loading.value = true
+    try {
+      const result = await signIn('credentials', {
+        email: email.value,
+        password: password.value,
+        turnstile_token: turnstileToken.value,
+        callbackUrl: callbackUrl.value,
+      })
+      if (result?.error) {
+        const msg = result.error === 'CredentialsSignin' ? 'E-posta veya şifre hatalı.' : String(result.error)
+        await Swal.fire({ icon: 'error', title: 'Giriş başarısız', text: msg })
+        turnstileRef.value?.reset()
+        turnstileToken.value = null
+        return
+      }
+      await Swal.fire({ icon: 'success', title: 'Giriş başarılı', timer: 1500, showConfirmButton: false })
+      if (result?.url) await router.push(result.url)
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Giriş yapılamadı.'
+      await Swal.fire({ icon: 'error', title: 'Hata', text: msg })
+      turnstileRef.value?.reset()
+      turnstileToken.value = null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function signInWith (provider: 'github' | 'google') {
+    loading.value = true
+    try {
+      await signIn(provider, { callbackUrl: callbackUrl.value })
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Giriş yapılamadı.'
+      await Swal.fire({ icon: 'error', title: 'Hata', text: msg })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    email,
+    password,
+    turnstileToken,
+    turnstileRef,
+    fieldError,
+    loading,
+    callbackUrl,
+    onSubmit,
+    signInWith,
+  }
+}

app/composables/useRegister.ts

@@ -0,0 +1,116 @@
+import Swal from 'sweetalert2'
+import type { RegisterResponse, RegisterRequestWithTurnstile } from '~~/lib/types/auth'
+import { registerSchema, getFirstZodError, getFieldErrors } from '~~/lib/validations/auth'
+
+export function useRegister () {
+  const { signIn } = useAuth()
+  const route = useRoute()
+
+  const email = ref('')
+  const first_name = ref('')
+  const last_name = ref('')
+  const username = ref('')
+  const password = ref('')
+  const password_confirm = ref('')
+  const turnstileToken = ref<string | null>(null)
+  const turnstileRef = ref<{ reset: () => void } | null>(null)
+  const fieldError = ref<Record<string, string>>({})
+  const success = ref('')
+  const loading = ref(false)
+  const resendLoading = ref(false)
+  const resendSent = ref(false)
+
+  const callbackUrl = computed(() => (route.query.callbackUrl as string) || '/')
+
+  async function onSubmit () {
+    fieldError.value = {}
+    const parsed = registerSchema.safeParse({
+      email: email.value,
+      first_name: first_name.value,
+      last_name: last_name.value,
+      username: username.value,
+      password: password.value,
+      password_confirm: password_confirm.value,
+    })
+    if (!parsed.success) {
+      fieldError.value = getFieldErrors(parsed.error)
+      await Swal.fire({ icon: 'error', title: 'Doğrulama hatası', text: getFirstZodError(parsed.error) })
+      return
+    }
+    if (!turnstileToken.value) {
+      await Swal.fire({ icon: 'warning', title: 'Güvenlik doğrulaması', text: 'Lütfen güvenlik kutusunu işaretleyin.' })
+      return
+    }
+    loading.value = true
+    try {
+      const body: RegisterRequestWithTurnstile = {
+        email: email.value,
+        first_name: first_name.value,
+        last_name: last_name.value,
+        username: username.value,
+        password: password.value,
+        turnstile_token: turnstileToken.value,
+      }
+      const data = await $fetch<RegisterResponse>('/api/auth/register', { method: 'POST', body })
+      success.value = data.message
+      await Swal.fire({ icon: 'success', title: 'Kayıt başarılı', text: data.message })
+    } catch (e: unknown) {
+      const err = e as { data?: { message?: string; detail?: string | string[] }; message?: string }
+      const msg = err?.data?.message ?? err?.data?.detail ?? err?.message ?? 'Kayıt yapılamadı.'
+      const text = Array.isArray(msg) ? msg.join(' ') : String(msg)
+      await Swal.fire({ icon: 'error', title: 'Kayıt hatası', text })
+      turnstileRef.value?.reset()
+      turnstileToken.value = null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function resendVerification () {
+    resendLoading.value = true
+    try {
+      await $fetch<{ message: string }>('/api/auth/resend-verification', {
+        method: 'POST',
+        body: { email: email.value },
+      })
+      resendSent.value = true
+      await Swal.fire({ icon: 'success', text: 'Doğrulama e-postası gönderildi.', timer: 2000, showConfirmButton: false })
+    } catch {
+      await Swal.fire({ icon: 'error', text: 'E-posta gönderilemedi.' })
+    } finally {
+      resendLoading.value = false
+    }
+  }
+
+  async function signInWith (provider: 'github' | 'google') {
+    loading.value = true
+    try {
+      await signIn(provider, { callbackUrl: callbackUrl.value })
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Giriş yapılamadı.'
+      await Swal.fire({ icon: 'error', title: 'Hata', text: msg })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    email,
+    first_name,
+    last_name,
+    username,
+    password,
+    password_confirm,
+    turnstileToken,
+    turnstileRef,
+    fieldError,
+    success,
+    loading,
+    resendLoading,
+    resendSent,
+    callbackUrl,
+    onSubmit,
+    resendVerification,
+    signInWith,
+  }
+}

app/composables/useTurnstileScale.ts

@@ -0,0 +1,38 @@
+import { onBeforeUnmount, onMounted, type Ref } from 'vue'
+
+/** Cloudflare Turnstile varsayılan genişliği (px) */
+const TURNSTILE_WIDTH = 300
+
+/**
+ * Turnstile widget'ı sarmalayan elementin genişliğine göre --turnstile-scale CSS değişkenini günceller.
+ * Böylece widget form alanı genişliğinde görünür.
+ */
+export function useTurnstileScale(wrapperRef: Ref<HTMLElement | null>) {
+  function updateScale() {
+    const el = wrapperRef.value
+    if (!el) return
+    const w = el.offsetWidth
+    if (w > 0) {
+      const scale = w / TURNSTILE_WIDTH
+      el.style.setProperty('--turnstile-scale', String(scale))
+    }
+  }
+
+  let observer: ResizeObserver | null = null
+
+  onMounted(() => {
+    updateScale()
+    const el = wrapperRef.value
+    if (el && typeof ResizeObserver !== 'undefined') {
+      observer = new ResizeObserver(updateScale)
+      observer.observe(el)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (observer && wrapperRef.value) {
+      observer.unobserve(wrapperRef.value)
+      observer = null
+    }
+  })
+}

app/layouts/default.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="wrapper">
+    <AppHeader />
+    <slot />
+    <AppFooter />
+    <GotoTop />
+  </div>
+</template>
+
+<script setup lang="ts">
+// Explicit imports so header/footer/gototop are not lazy-loaded (avoids hydration issues)
+import AppHeader from '~/components/AppHeader.vue'
+import AppFooter from '~/components/AppFooter.vue'
+import GotoTop from '~/components/GotoTop.vue'
+</script>

app/pages/auth/login.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <LoginComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

app/pages/auth/register.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <RegisterComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

app/pages/index.vue

@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import type { Banner } from "~~/types/banner";
+import type { PostResponse } from "~~/types/post";
+
+import { useSettingStore } from '~/stores/setting';
+import { useBannerStore } from '~/stores/banner';
+
+const _settings = useSettingStore();
+const { settings } = storeToRefs(_settings);
+
+const _bannerStore = useBannerStore();
+const { banner } = storeToRefs(_bannerStore);
+
+// API base URL — goreceli image path'ini tam URL'e donustur
+const config = useRuntimeConfig();
+const apiBase = (config.public.BASE_API_URL as string) || 'http://127.0.0.1:8080';
+
+// Banner'dan gelen ilk banner'in resim URL'si (tam URL)
+const bannerImageUrl = computed(() => {
+  const img = banner.value?.[0]?.image;
+  if (!img) return undefined;
+  if (img.startsWith('http')) return img;
+  return `${apiBase.replace(/\/$/, '')}${img}`;
+});
+
+// Resim path'ini tam URL'e donustur
+const imgUrl = (path: string) => {
+  if (!path) return '';
+  if (path.startsWith('http')) return path;
+  return `${apiBase.replace(/\/$/, '')}${path}`;
+};
+
+// Tarihi gg.aa.yyyy formatina cevir
+const formatDate = (dateStr?: string) => {
+  if (!dateStr) return '';
+  return new Date(dateStr).toLocaleDateString('tr-TR', {
+    day: '2-digit', month: 'long', year: 'numeric'
+  });
+};
+
+const breadcrumbs = [
+  { label: 'Home', href: '#' },
+  { label: 'Blog' }
+]
+
+useSeoMeta({
+  title: 'Blog',
+  description: 'En son haberler ve makaleler',
+})
+
+// Postlari API'dan cek
+const route = useRoute();
+const page = computed(() => Number(route.query.page) || 1);
+
+const { data: postsData, refresh } = await useFetch<PostResponse>(() => `${apiBase}/api/v1/posts?page=${page.value}`);
+const posts = computed(() => postsData.value?.data ?? []);
+const postMeta = computed(() => postsData.value?.meta);
+
+// Sayfa degistirme fonksiyonu
+const changePage = (newPage: number) => {
+  if (newPage < 1 || (postMeta.value && newPage > Math.ceil(postMeta.value.total / postMeta.value.per_page))) return;
+  navigateTo({ query: { ...route.query, page: newPage } });
+};
+
+// Toplam sayfa sayisi
+const totalPages = computed(() => {
+  if (!postMeta.value) return 1;
+  return Math.ceil(postMeta.value.total / postMeta.value.per_page);
+});
+</script>
+
+<template>
+  <div>
+    <PageTitle title="Blog" subtitle="Our Latest News" :breadcrumbs="breadcrumbs" :image="bannerImageUrl"
+      :color="banner?.[0]?.color" imageType="background" />
+    <!-- Content
+      ============================================= -->
+    <section id="content">
+      <div class="content-wrap">
+        <div class="container">
+          <div class="row gx-5 col-mb-80">
+            <!-- Post Content
+            ============================================= -->
+            <main class="postcontent col-lg-9">
+              <!-- Postlar API'dan geliyor -->
+              <div id="posts" class="row gutter-40">
+
+                <div v-for="post in posts" :key="post.ID" class="entry col-12">
+                  <div class="grid-inner row g-0">
+                    <!-- Sol: Post resmi -->
+                    <div class="col-md-4">
+                      <div class="entry-image">
+                        <NuxtLink :to="`/blog/${post.slug}`">
+                          <img :src="imgUrl(post.images_min || post.images)" :alt="post.title"
+                            style="width:100%; height:200px; object-fit:cover;" />
+                        </NuxtLink>
+                      </div>
+                    </div>
+                    <!-- Sag: Post icerigi -->
+                    <div class="col-md-8 ps-md-4">
+                      <div class="entry-title title-sm">
+                        <h2>
+                          <NuxtLink :to="`/blog/${post.slug}`">{{ post.title }}</NuxtLink>
+                        </h2>
+                      </div>
+                      <div class="entry-meta">
+                        <ul>
+                          <li><i class="uil uil-schedule" /> {{ formatDate(post.UpdatedAt || post.CreatedAt) }}
+                            <span v-if="post.UpdatedAt && post.UpdatedAt !== post.CreatedAt"
+                              style="font-size: 0.8em; opacity: 0.8;">
+                              (Güncellendi)
+                            </span>
+                          </li>
+                          <li v-if="post.categories?.length">
+                            <i class="uil uil-folder-open" />
+                            <template v-for="(cat, ci) in post.categories" :key="cat.ID">
+                              <NuxtLink :to="`/kategori/${cat.slug}`">{{ cat.title }}</NuxtLink>
+                              <span v-if="ci < post.categories.length - 1">, </span>
+                            </template>
+                          </li>
+                          <li v-if="post.tags?.length">
+                            <i class="uil uil-tag" />
+                            <template v-for="(tag, ti) in post.tags" :key="tag.ID">
+                              <span>{{ tag.name }}</span>
+                              <span v-if="ti < post.tags.length - 1">, </span>
+                            </template>
+                          </li>
+                        </ul>
+                      </div>
+                      <div class="entry-content">
+                        <p>{{ post.content.substring(0, 150) }}{{ post.content.length > 150 ? '...' : '' }}</p>
+                        <NuxtLink :to="`/blog/${post.slug}`" class="more-link">Devamını Oku</NuxtLink>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Post bulunamadiysa -->
+                <div v-if="!posts.length" class="col-12 text-center py-5">
+                  <p>Henüz gönderi bulunamadı.</p>
+                </div>
+
+              </div><!-- #posts end -->
+
+              <!-- Pager
+              ============================================= -->
+              <div v-if="totalPages > 1" class="d-flex justify-content-between mt-5">
+                <button class="btn btn-outline-secondary" :disabled="page <= 1" @click="changePage(page - 1)">
+                  &larr; Daha Eski
+                </button>
+                <div class="align-self-center">
+                  Sayfa {{ page }} / {{ totalPages }}
+                </div>
+                <button class="btn btn-outline-dark" :disabled="page >= totalPages" @click="changePage(page + 1)">
+                  Daha Yeni &rarr;
+                </button>
+              </div>
+              <!-- .pager end -->
+
+            </main><!-- .postcontent end -->
+
+            <!-- Sidebar
+            ============================================= -->
+            <aside class="sidebar col-lg-3">
+              <div class="sidebar-widgets-wrap">
+
+
+
+
+
+                <div class="widget">
+
+                  <ul id="canvas-tab" class="nav canvas-tabs tabs nav-tabs size-sm mb-3" role="tablist">
+                    <li class="nav-item" role="presentation">
+                      <button id="canvas-tab-1" class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-1"
+                        type="button" role="tab" aria-controls="canvas-tab-1" aria-selected="true">Popular</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                      <button id="canvas-tab-2" class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-2"
+                        type="button" role="tab" aria-controls="canvas-tab-2" aria-selected="false">Recents</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                      <button id="canvas-tab-3" class="nav-link uil uil-comments-alt" data-bs-toggle="pill"
+                        data-bs-target="#tab-3" type="button" role="tab" aria-controls="canvas-tab-3"
+                        aria-selected="false" />
+                    </li>
+                  </ul>
+
+                  <div id="canvas-TabContent" class="tab-content">
+
+                    <div id="tab-1" class="tab-pane show active" role="tabpanel" aria-labelledby="canvas-tab-1"
+                      tabindex="0">
+                      <div id="popular-post-list-sidebar" class="posts-sm row col-mb-30">
+                        <div class="entry col-12">
+                          <div class="grid-inner row g-0">
+                            <div class="col-auto">
+                              <div class="entry-image">
+                                <a href="#"><img class="rounded-circle" src="/images/magazine/small/3.jpg"
+                                    alt="Image"></a>
+                              </div>
+                            </div>
+                            <div class="col ps-3">
+                              <div class="entry-title">
+                                <h4><a href="#">Lorem ipsum dolor sit amet, consectetur</a></h4>
+                              </div>
+                              <div class="entry-meta">
+                                <ul>
+                                  <li><i class="uil uil-comments-alt" /> 35 Comments</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div class="entry col-12">
+                          <div class="grid-inner row g-0">
+                            <div class="col-auto">
+                              <div class="entry-image">
+                                <a href="#"><img class="rounded-circle" src="/images/magazine/small/2.jpg"
+                                    alt="Image"></a>
+                              </div>
+                            </div>
+                            <div class="col ps-3">
+                              <div class="entry-title">
+                                <h4><a href="#">Elit Assumenda vel amet dolorum quasi</a></h4>
+                              </div>
+                              <div class="entry-meta">
+                                <ul>
+                                  <li><i class="uil uil-comments-alt" /> 24 Comments</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div class="entry col-12">
+                          <div class="grid-inner row g-0">
+                            <div class="col-auto">
+                              <div class="entry-image">
+                                <a href="#"><img class="rounded-circle" src="/images/magazine/small/1.jpg"
+                                    alt="Image"></a>
+                              </div>
+                            </div>
+                            <div class="col ps-3">
+                              <div class="entry-title">
+                                <h4><a href="#">Debitis nihil placeat, illum est nisi</a></h4>
+                              </div>
+                              <div class="entry-meta">
+                                <ul>
+                                  <li><i class="uil uil-comments-alt" /> 19 Comments</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div id="tab-2" class="tab-pane" role="tabpanel" aria-labelledby="canvas-tab-2" tabindex="0">
+                      <div id="recent-post-list-sidebar" class="posts-sm row col-mb-30">
+                        <div class="entry col-12">
+                          <div class="grid-inner row g-0">
+                            <div class="col-auto">
+                              <div class="entry-image">
+                                <a href="#"><img class="rounded-circle" src="/images/magazine/small/1.jpg"
+                                    alt="Image"></a>
+                              </div>
+                            </div>
+                            <div class="col ps-3">
+                              <div class="entry-title">
+                                <h4><a href="#">Lorem ipsum dolor sit amet, consectetur</a></h4>
+                              </div>
+                              <div class="entry-meta">
+                                <ul>
+                                  <li>10th July 2021</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div class="entry col-12">
+                          <div class="grid-inner row g-0">
+                            <div class="col-auto">
+                              <div class="entry-image">
+                                <a href="#"><img class="rounded-circle" src="/images/magazine/small/2.jpg"
+                                    alt="Image"></a>
+                              </div>
+                            </div>
+                            <div class="col ps-3">
+                              <div class="entry-title">
+                                <h4><a href="#">Elit Assumenda vel amet dolorum quasi</a></h4>
+                              </div>
+                              <div class="entry-meta">
+                                <ul>
+                                  <li>10th July 2021</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div class="entry col-12">
+                          <div class="grid-inner row g-0">
+                            <div class="col-auto">
+                              <div class="entry-image">
+                                <a href="#"><img class="rounded-circle" src="/images/magazine/small/3.jpg"
+                                    alt="Image"></a>
+                              </div>
+                            </div>
+                            <div class="col ps-3">
+                              <div class="entry-title">
+                                <h4><a href="#">Debitis nihil placeat, illum est nisi</a></h4>
+                              </div>
+                              <div class="entry-meta">
+                                <ul>
+                                  <li>10th July 2021</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div id="tab-3" class="tab-pane" role="tabpanel" aria-labelledby="canvas-tab-3" tabindex="0">
+                      <div id="recent-comments-list-sidebar" class="posts-sm row col-mb-30">
+                        <div class="entry col-12">
+                          <div class="grid-inner row g-0">
+                            <div class="col-auto">
+                              <div class="entry-image">
+                                <a href="#"><img class="rounded-circle" src="/images/icons/avatar.jpg"
+                                    alt="User Avatar"></a>
+                              </div>
+                            </div>
+                            <div class="col ps-3">
+                              <strong>John Doe:</strong> Veritatis recusandae sunt repellat distinctio...
+                            </div>
+                          </div>
+                        </div>
+
+                        <div class="entry col-12">
+                          <div class="grid-inner row g-0">
+                            <div class="col-auto">
+                              <div class="entry-image">
+                                <a href="#"><img class="rounded-circle" src="/images/icons/avatar.jpg"
+                                    alt="User Avatar"></a>
+                              </div>
+                            </div>
+                            <div class="col ps-3">
+                              <strong>Mary Jane:</strong> Possimus libero, earum officia architecto maiores....
+                            </div>
+                          </div>
+                        </div>
+
+                        <div class="entry col-12">
+                          <div class="grid-inner row g-0">
+                            <div class="col-auto">
+                              <div class="entry-image">
+                                <a href="#"><img class="rounded-circle" src="/images/icons/avatar.jpg"
+                                    alt="User Avatar"></a>
+                              </div>
+                            </div>
+                            <div class="col ps-3">
+                              <strong>Site Admin:</strong> Deleniti magni labore laboriosam odio...
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                  </div>
+
+                </div>
+                <div class="widget">
+                  <h4>Tag Cloud</h4>
+                  <div class="tagcloud">
+                    <a href="#">general</a>
+                    <a href="#">videos</a>
+                    <a href="#">music</a>
+                    <a href="#">media</a>
+                    <a href="#">photography</a>
+                    <a href="#">parallax</a>
+                    <a href="#">ecommerce</a>
+                    <a href="#">terms</a>
+                    <a href="#">coupons</a>
+                    <a href="#">modern</a>
+                  </div>
+
+                </div>
+
+              </div>
+            </aside><!-- .sidebar end -->
+          </div>
+
+        </div>
+      </div>
+    </section><!-- #content end -->
+  </div>
+</template>
+
+<style scoped></style>

app/plugins/01.fetch_setting.ts

@@ -0,0 +1,20 @@
+import type {Setting} from "~~/types/setting";
+
+export default defineNuxtPlugin(async () => {
+
+
+    const { useSettingStore } = await import('@/stores/setting')
+    const settingStore = useSettingStore()
+
+    const config = useRuntimeConfig();
+    const apiUrl = config.public.BASE_API_URL;
+
+    try {
+        const data = await $fetch<Setting>(`${apiUrl}/api/v1/setting`)
+        if (data) {
+            settingStore.setSettings(data)
+        }
+    } catch (error) {
+        console.error('Failed to fetch settings:', error)
+    }
+})

app/plugins/02.fetch_banner.ts

@@ -0,0 +1,20 @@
+import type { Banner } from "~~/types/banner";
+
+export default defineNuxtPlugin(async () => {
+
+
+    const { useBannerStore } = await import('@/stores/banner')
+    const bannerStore = useBannerStore()
+
+    const config = useRuntimeConfig();
+    const apiUrl = config.public.BASE_API_URL;
+
+    try {
+        const data = await $fetch<Banner[]>(`${apiUrl}/api/v1/hero`)
+        if (data) {
+            bannerStore.setBanner(data)
+        }
+    } catch (error) {
+        console.error('Failed to fetch banners:', error)
+    }
+})

app/plugins/03.fetch_product_tree.ts

@@ -0,0 +1,20 @@
+import type {ProductTree} from "~~/types/banner";
+
+export default defineNuxtPlugin(async () => {
+
+
+    const { useProductTreeStore } = await import('@/stores/productTree')
+    const productTreeStore = useProductTreeStore()
+
+    const config = useRuntimeConfig();
+    const apiUrl = config.public.BASE_API_URL;
+
+    try {
+        const data = await $fetch<ProductTree[]>(`${apiUrl}/api/v1/products-tree/`)
+        if (data) {
+            productTreeStore.setProductTree(data)
+        }
+    } catch (error) {
+        console.error('Failed to fetch product tree:', error)
+    }
+})

app/plugins/04.cart-persist.client.ts

@@ -0,0 +1,15 @@
+import { useCartStore } from '~/stores/cart';
+
+export default defineNuxtPlugin(() => {
+    const cartStore = useCartStore();
+    const storageKey = cartStore.getStorageKey();
+
+    cartStore.hydrateFromStorage(localStorage.getItem(storageKey));
+
+    cartStore.$subscribe(
+        () => {
+            localStorage.setItem(storageKey, cartStore.toStoragePayload());
+        },
+        { detached: true }
+    );
+});

app/plugins/body-class.client.ts

@@ -0,0 +1,9 @@
+/**
+ * Canvas theme requires body.stretched for full-width layout.
+ * Ensures body has the class on client (useHead bodyAttrs may not apply in all cases).
+ */
+export default defineNuxtPlugin(() => {
+  if (import.meta.client && document?.body) {
+    document.body.classList.add('stretched')
+  }
+})

app/plugins/sweetalert2.client.ts

@@ -0,0 +1,5 @@
+import Swal from 'sweetalert2'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.provide('swal', Swal)
+})

app/stores/banner.ts

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia';
+import type { Banner } from '~~/types/banner';
+
+interface BannerState {
+    banner: Banner[];
+}
+
+export const useBannerStore = defineStore('banner', {
+    state: (): BannerState => ({
+        banner: [],
+    }),
+    actions: {
+        setBanner(newBanner: Banner[]): void {
+            this.banner = newBanner;
+        }
+    }
+});
+

app/stores/cart.ts

@@ -0,0 +1,177 @@
+import { defineStore } from 'pinia';
+import type { Product } from '~~/types/product';
+
+export interface CartItem {
+    product: Product;
+    quantity: number;
+}
+
+export type CouponType = 'percent' | 'fixed';
+
+export interface CartCoupon {
+    code: string;
+    type: CouponType;
+    value: number;
+    description?: string;
+    minSubtotal?: number;
+}
+
+interface CartState {
+    items: CartItem[];
+    coupon: CartCoupon | null;
+}
+
+const CART_STORAGE_KEY = 'nuxt-shop-cart-v1';
+
+const AVAILABLE_COUPONS: CartCoupon[] = [
+    {
+        code: 'SALE10',
+        type: 'percent',
+        value: 10,
+        description: '10% indirim',
+    },
+    {
+        code: 'WELCOME50',
+        type: 'fixed',
+        value: 50,
+        description: '50 TL indirim',
+        minSubtotal: 300,
+    },
+];
+
+export const useCartStore = defineStore('cart', {
+    state: (): CartState => ({
+        items: [],
+        coupon: null,
+    }),
+    getters: {
+        totalQuantity: (state): number =>
+            state.items.reduce((total, item) => total + item.quantity, 0),
+        subtotal: (state): number =>
+            state.items.reduce(
+                (total, item) => total + item.product.price * item.quantity,
+                0
+            ),
+        discountAmount(): number {
+            if (!this.coupon) return 0;
+            if (this.coupon.minSubtotal && this.subtotal < this.coupon.minSubtotal) {
+                return 0;
+            }
+            const rawDiscount =
+                this.coupon.type === 'percent'
+                    ? (this.subtotal * this.coupon.value) / 100
+                    : this.coupon.value;
+            return Math.min(rawDiscount, this.subtotal);
+        },
+        total(): number {
+            return Math.max(this.subtotal - this.discountAmount, 0);
+        },
+        totalPrice(): number {
+            return this.total;
+        },
+        getItem:
+            (state) =>
+            (slug: string): CartItem | undefined =>
+                state.items.find((item) => item.product.slug === slug),
+    },
+    actions: {
+        addItem(product: Product, quantity = 1): void {
+            if (!Number.isFinite(quantity) || quantity <= 0) {
+                return;
+            }
+            const existingItem = this.items.find(
+                (item) => item.product.slug === product.slug
+            );
+
+            if (existingItem) {
+                existingItem.quantity += quantity;
+                existingItem.product = product;
+                return;
+            }
+
+            this.items.push({ product, quantity });
+        },
+        setItemQuantity(slug: string, quantity: number): void {
+            if (!Number.isFinite(quantity)) {
+                return;
+            }
+            const item = this.items.find((entry) => entry.product.slug === slug);
+
+            if (!item) {
+                return;
+            }
+
+            if (quantity <= 0) {
+                this.items = this.items.filter(
+                    (entry) => entry.product.slug !== slug
+                );
+                return;
+            }
+
+            item.quantity = Math.floor(quantity);
+        },
+        removeItem(slug: string): void {
+            this.items = this.items.filter(
+                (item) => item.product.slug !== slug
+            );
+        },
+        clearCart(): void {
+            this.items = [];
+            this.coupon = null;
+        },
+        setItems(items: CartItem[]): void {
+            this.items = items;
+        },
+        applyCouponCode(code: string): boolean {
+            const normalizedCode = code.trim().toUpperCase();
+            if (!normalizedCode) return false;
+            const coupon = AVAILABLE_COUPONS.find(
+                (entry) => entry.code === normalizedCode
+            );
+            if (!coupon) return false;
+            if (coupon.minSubtotal && this.subtotal < coupon.minSubtotal) {
+                return false;
+            }
+            this.coupon = coupon;
+            return true;
+        },
+        clearCoupon(): void {
+            this.coupon = null;
+        },
+        setCoupon(coupon: CartCoupon | null): void {
+            this.coupon = coupon;
+        },
+        hydrateFromStorage(payload: string | null): void {
+            if (!payload) return;
+            try {
+                const parsed = JSON.parse(payload) as {
+                    items?: CartItem[];
+                    coupon?: CartCoupon | null;
+                };
+                if (Array.isArray(parsed.items)) {
+                    this.items = parsed.items.filter(
+                        (entry) =>
+                            entry &&
+                            entry.product &&
+                            typeof entry.product.slug === 'string' &&
+                            typeof entry.quantity === 'number'
+                    );
+                }
+                if (parsed.coupon && typeof parsed.coupon.code === 'string') {
+                    this.coupon = parsed.coupon;
+                }
+            } catch {
+                // Ignore invalid storage payloads
+            }
+        },
+        toStoragePayload(): string {
+            return JSON.stringify({
+                items: this.items,
+                coupon: this.coupon,
+            });
+        },
+        getStorageKey(): string {
+            return CART_STORAGE_KEY;
+        },
+    },
+});

app/stores/productTree.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+import type { ProductTree } from '~~/types/banner';
+
+interface ProductTreeState {
+    productTree: ProductTree[];
+}
+
+export const useProductTreeStore = defineStore('productTree', {
+    state: (): ProductTreeState => ({
+        productTree: [],
+    }),
+    actions: {
+        setProductTree(newProductTree: ProductTree[]): void {
+            this.productTree = newProductTree;
+        }
+    }
+});

app/stores/setting.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+import type { Setting } from '~~/types/setting';
+
+interface SettingState {
+    settings: Setting | null;
+}
+
+export const useSettingStore = defineStore('setting', {
+    state: (): SettingState => ({
+        settings: null,
+    }),
+    actions: {
+        setSettings(newSettings: Setting | null): void {
+            this.settings = newSettings;
+        }
+    }
+});

eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

lib/types/auth.ts

@@ -0,0 +1,94 @@
+/**
+ * Auth API types (backend /api/v1/auth/*)
+ * @see Temp/login_register.md
+ */
+
+/** User object in login response */
+export interface AuthUserLogin {
+  id: number
+  email: string
+  first_name: string
+  last_name: string
+  username: string
+  is_admin: boolean
+}
+
+/** User object in /me response (no username in doc, but same shape) */
+export interface AuthUserMe {
+  id: number
+  email: string
+  first_name: string
+  last_name: string
+  is_admin: boolean
+}
+
+/** User object in register response */
+export interface AuthUserRegister {
+  id: number
+  email: string
+  first_name: string
+  last_name: string
+  username: string
+  email_verified: boolean
+  is_admin: boolean
+}
+
+// --- Login ---
+export interface LoginRequest {
+  email: string
+  password: string
+}
+
+export interface LoginResponse {
+  access_token: string
+  refresh_token: string
+  user: AuthUserLogin
+}
+
+// --- Me ---
+export interface MeResponse {
+  user: AuthUserMe
+}
+
+// --- Refresh ---
+export interface RefreshRequest {
+  refresh_token: string
+}
+
+export interface RefreshResponse {
+  access_token: string
+  refresh_token: string
+}
+
+// --- Register ---
+export interface RegisterRequest {
+  email: string
+  first_name: string
+  last_name: string
+  password: string
+  username: string
+}
+
+/** Client sends turnstile_token to our proxy; backend receives only RegisterRequest */
+export interface RegisterRequestWithTurnstile extends RegisterRequest {
+  turnstile_token: string
+}
+
+export interface RegisterResponse {
+  message: string
+  user: AuthUserRegister
+}
+
+// --- Resend verification ---
+export interface ResendVerificationRequest {
+  email: string
+}
+
+export interface ResendVerificationResponse {
+  message: string
+}
+
+// --- Verify email ---
+export interface VerifyEmailResponse {
+  message: string
+}

lib/validations/auth.ts

@@ -0,0 +1,42 @@
+import { z } from 'zod'
+
+export const loginSchema = z.object({
+  email: z.string().min(1, 'E-posta gerekli').email('Geçerli bir e-posta girin'),
+  password: z.string().min(1, 'Şifre gerekli'),
+})
+
+export const registerSchema = z.object({
+  email: z.string().min(1, 'E-posta gerekli').email('Geçerli bir e-posta girin'),
+  first_name: z.string().min(1, 'Ad gerekli').max(100, 'Ad en fazla 100 karakter olabilir'),
+  last_name: z.string().min(1, 'Soyad gerekli').max(100, 'Soyad en fazla 100 karakter olabilir'),
+  username: z.string().min(1, 'Kullanıcı adı gerekli').max(150, 'Kullanıcı adı en fazla 150 karakter olabilir'),
+  password: z.string().min(6, 'Şifre en az 6 karakter olmalı'),
+  password_confirm: z.string().min(1, 'Şifre tekrarı gerekli'),
+}).refine((data) => data.password === data.password_confirm, {
+  message: 'Şifreler eşleşmiyor',
+  path: ['password_confirm'],
+})
+
+export type LoginInput = z.infer<typeof loginSchema>
+export type RegisterInput = z.infer<typeof registerSchema>
+
+export function getFirstZodError (err: z.ZodError): string {
+  const issues = (err as { issues?: Array<{ message?: string }>; errors?: Array<{ message?: string }> }).issues
+    ?? (err as { errors?: Array<{ message?: string }> }).errors
+    ?? []
+  const first = issues[0]
+  return first ? (first.message || 'Doğrulama hatası') : 'Doğrulama hatası'
+}
+
+/** Map Zod error to field-level errors for form display */
+export function getFieldErrors (err: z.ZodError): Record<string, string> {
+  const issues = (err as { issues?: Array<{ path: unknown[]; message?: string }>; errors?: Array<{ path: unknown[]; message?: string }> }).issues
+    ?? (err as { errors?: Array<{ path: unknown[]; message?: string }> }).errors
+    ?? []
+  const out: Record<string, string> = {}
+  for (const e of issues) {
+    const path = e.path?.[0]
+    if (path != null && typeof path === 'string' && e.message) out[path] = e.message
+  }
+  return out
+}

nuxt.config.ts

@@ -0,0 +1,84 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  auth: {
+    // Full auth endpoint URL (origin + /api/auth). This prevents /session recursion.
+    // Prefer setting AUTH_ORIGIN in your environment (e.g. https://example.com)
+    baseURL: `${(
+        process.env.AUTH_ORIGIN ||
+        process.env.BASE_SITE_URL ||
+        `http://localhost:${process.env.PORT || 3000}`
+    ).replace(/\/$/, '')}/api/auth`,
+  },
+  turnstile: {
+    siteKey: process.env.CLOUD_FLARE_SITE_KEY,
+  },
+  runtimeConfig: {
+    //private (server-side only - güvenli)
+    turnstile: {
+      // This can be overridden at runtime via the NUXT_TURNSTILE_SECRET_KEY
+      // environment variable.
+      secretKey: process.env.CLOUD_FLARE_SECRET,
+    },
+    yourOrigin: "",
+    apiSecret: "",
+    authOrigin: process.env.AUTH_ORIGIN,
+    jwtSecret: process.env.JWT_SECRET,
+    googleToken: process.env.NUXT_GOOGLE_TOKEN,
+    authSecret: process.env.NUXT_AUTH_SECRET,
+    githubClientId: process.env.GITHUB_CLIENT_ID,
+    githubClientSecret: process.env.GITHUB_CLIENT_SECRET,
+    googleClientId: process.env.GOOGLE_CLIENT_ID,
+    googleClientSecret: process.env.GOOGLE_CLIENT_SECRET,
+    public: {
+      //public (client-side accessible); backend for login/register API
+      BASE_API_URL: process.env.PUBLIC_API_BASE || process.env.PUBLIC_API_BASE,
+      BASE_SITE_URL: process.env.BASE_SITE_URL,
+      yourOrigin: "",
+      apiBase: "",
+    },
+  },
+  modules: [
+    '@nuxt/a11y',
+    '@nuxt/content',
+    '@nuxt/eslint',
+    '@nuxt/fonts',
+    '@nuxt/hints',
+    '@nuxt/icon',
+    '@nuxt/image',
+    '@nuxt/scripts',
+    '@nuxtjs/sitemap',
+    '@nuxtjs/turnstile',
+    '@sidebase/nuxt-auth',
+    '@pinia/nuxt'
+  ],
+  app: {
+    head: {
+      title: 'Avigo Multipurpose Theme',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
+      ],
+      link: [
+        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' },
+        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital@0;1&display=swap' },
+
+        { rel: 'stylesheet', href: '/style.css' },
+        { rel: 'stylesheet', href: '/css/font-icons.css' },
+        { rel: 'stylesheet', href: '/css/custom.css' },
+      ],
+      script: [
+        { src: '/js/plugins.min.js', defer: true },
+        { src: '/js/functions.bundle.js', defer: true },
+      ]
+    }
+  },
+  vite: {
+    build: {
+      sourcemap: false,
+    },
+  },
+
+})

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "nuxtfiber",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@nuxt/a11y": "1.0.0-alpha.1",
+    "@nuxt/content": "3.11.2",
+    "@nuxt/eslint": "1.15.1",
+    "@nuxt/fonts": "0.14.0",
+    "@nuxt/hints": "1.0.0-alpha.7",
+    "@nuxt/icon": "2.2.1",
+    "@nuxt/image": "2.0.0",
+    "@nuxt/scripts": "0.13.2",
+    "@nuxtjs/sitemap": "7.6.0",
+    "@nuxtjs/turnstile": "1.1.1",
+    "@pinia/nuxt": "0.11.3",
+    "@sidebase/nuxt-auth": "1.2.0",
+    "better-sqlite3": "^12.6.2",
+    "next-auth": "~4.21.1",
+    "nuxt": "^4.3.1",
+    "pinia": "^3.0.4",
+    "sharp": "^0.34.5",
+    "sweetalert2": "^11.26.20",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.28",
+    "vue-router": "^4.6.4",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.0",
+    "@vueuse/core": "^14.2.1",
+    "@vueuse/nuxt": "^14.2.1",
+    "eslint": "^10.0.1"
+  }
+}

public/css/calendar.css

@@ -0,0 +1,518 @@
+.fc-calendar-container {
+	position: relative;
+	width: 100%;
+	height: auto;
+}
+
+.fc-calendar {
+	width: 100%;
+	height: 100%;
+}
+
+.fc-calendar .fc-head {
+	background: #ccc;
+	color: #fff;
+}
+
+.fc-calendar .fc-body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	height: -moz-calc(100% - 30px);
+	height: -webkit-calc(100% - 30px);
+	height: calc(100% - 30px);
+	border: 1px solid #ddd;
+}
+
+.fc-calendar .fc-row {
+	width: 100%;
+	border-bottom: 1px solid #ddd;
+}
+
+.fc-four-rows .fc-row  {
+	height: 25%;
+}
+
+.fc-five-rows .fc-row  {
+	height: 20%;
+}
+
+.fc-six-rows .fc-row {
+	height: 16.66%;
+	height: -moz-calc(100%/6);
+	height: -webkit-calc(100%/6);
+	height: calc(100%/6);
+}
+
+.fc-calendar .fc-row > div,
+.fc-calendar .fc-head > div {
+	display: inline-block;
+	height: 100%;
+	width:  14.28%; /* 100% / 7 */
+	width: -moz-calc(100%/7);
+	width: -webkit-calc(100%/7);
+	width: calc(100%/7);
+	position: relative;
+}
+
+/* IE 9 is rounding up the calc it seems */
+.ie9 .fc-calendar .fc-row > div,
+.ie9 .fc-calendar .fc-head > div {
+	width:  14.2%;
+}
+
+.fc-calendar .fc-row > div {
+	border-right: 1px solid #ddd;
+	padding: 4px;
+	overflow: hidden;
+	position: relative;
+	vertical-align: middle;
+}
+
+.fc-calendar .fc-head > div {
+	text-align: center;
+}
+
+.fc-calendar .fc-row > div > span.fc-date {
+	width: 30px;
+	height: 20px;
+	font-size: 20px;
+	line-height: 20px;
+	font-weight: 700;
+	color: #ddd;
+	text-shadow: 0 -1px 0 rgba(255,255,255,0.8);
+	bottom: 5px;
+	right: 5px;
+	text-align: right;
+}
+
+.fc-calendar .fc-starttime,
+.fc-calendar .fc-endtime {
+	display: none;
+}
+
+.fc-calendar .fc-row > div > span.fc-weekday {
+	padding-left: 5px;
+	display: none;
+}
+
+.fc-calendar .fc-row > div.fc-today {
+	background: #fff4c3;
+}
+
+.fc-calendar .fc-row > div.fc-out {
+	opacity: 0.6;
+}
+
+.fc-calendar .fc-row > div:last-child,
+.fc-calendar .fc-head > div:last-child {
+	border-right: none;
+}
+
+.fc-calendar .fc-row:last-child {
+	border-bottom: none;
+}
+
+/* Custom Events Calendar
+-----------------------------------------------------------------*/
+
+.events-calendar {
+	position: relative;
+	width: 100%;
+	height: auto;
+}
+
+.fc-calendar-container {
+	height: auto;
+	bottom: 0px;
+	width: 100%;
+}
+
+.events-calendar-header {
+	height: 50px;
+	position: relative;
+}
+
+.events-calendar-header h2,
+.events-calendar-header h3 {
+	float: left;
+	text-shadow: none;
+	margin-bottom: 0;
+}
+
+.events-calendar-header h2 {
+	width: 60%;
+}
+
+.events-calendar-header h2 a,
+.events-calendar-header h2 span {
+	font-size: 18px;
+	white-space: nowrap;
+}
+
+.events-calendar-header h3 {
+	width: 40%;
+	color: #666;
+	font-size: 20px;
+	text-align: right;
+	padding-top: 7px;
+	padding-right: 130px;
+}
+
+.events-calendar-header h3 span { color: #666; }
+
+.events-calendar-header nav {
+	position: absolute;
+	right: 0;
+	top: 5px;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.events-calendar-header nav span {
+	float: left;
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	position: relative;
+	color: transparent;
+	cursor: pointer;
+	background: #444;
+	margin: 0 1px;
+	font-size: 14px;
+	border-radius: 0 3px 3px 0;
+	box-shadow: none;
+}
+
+.events-calendar-header nav span:first-child {
+	border-radius: 3px 0 0 3px;
+}
+
+.events-calendar-header nav span:hover {
+	background: #222;
+}
+
+.events-calendar-header span i {
+	color: #FFF;
+	text-align: center;
+	width: 100%;
+}
+
+.events-calendar-header nav span:last-child {
+	margin-left: 20px;
+	border-radius: 3px;
+}
+
+.fc-calendar {
+	background: #F5F5F5;
+	width: 100%;
+	height: auto;
+	margin-top: 10px;
+	border-radius: 5px;
+}
+
+.fc-calendar .fc-head {
+	background: #444;
+	color: rgba(255,255,255,0.9);
+	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+	border-radius: 5px 5px 0 0;
+	height: 40px;
+	line-height: 40px;
+	padding: 0 20px;
+}
+
+.fc-calendar .fc-head > div {
+	font-weight: 300;
+	text-transform: uppercase;
+	font-size: 14px;
+	letter-spacing: 2px;
+	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
+}
+
+.fc-calendar .fc-row > div > span.fc-date {
+	position: absolute;
+	color: #333;
+	text-shadow: none;
+	font-size: 28px;
+	font-weight: 300;
+	bottom: auto;
+	right: auto;
+	top: 10px;
+	left: 8px;
+	text-align: left;
+	text-shadow: none;
+}
+
+.fc-calendar .fc-body {
+	border: none;
+	height: 568px;
+	padding: 20px;
+}
+
+.fc-calendar .fc-row {
+	box-shadow: inset 0 -1px 0 #E5E5E5;
+	border: none;
+}
+
+.fc-calendar .fc-row:last-child {
+	box-shadow: none !important;
+}
+
+.fc-calendar .fc-row:first-child > div:first-child {
+	border-radius: 5px 0 0 0;
+}
+
+.fc-calendar .fc-row:first-child > div:last-child {
+	border-radius: 0 5px 0 0;
+}
+
+.fc-calendar .fc-row:last-child > div:first-child {
+	border-radius: 0 0 0 5px;
+}
+
+.fc-calendar .fc-row:last-child > div:last-child {
+	border-radius: 0 0 5px 0;
+}
+
+.fc-calendar .fc-row > div {
+	box-shadow: -1px 0 0 #E5E5E5;
+	border: none;
+	padding: 10px;
+}
+
+.fc-calendar .fc-row > div:first-child{
+	box-shadow: none !important;
+}
+
+.fc-calendar .fc-row > div.fc-today {
+	background: #1E73BE;
+	box-shadow: inset 0 0 100px rgba(255,255,255,0.2);
+}
+
+.fc-calendar .fc-row > div.fc-today > span.fc-date {
+	color: #FFF;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+}
+
+.fc-calendar .fc-row > div.fc-today:after {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0.2;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
+	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
+	background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -o-llinear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
+	background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -ms-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
+	background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
+}
+
+.fc-calendar .fc-row > div > div {
+	margin-top: 35px;
+}
+
+.fc-calendar .fc-row > div > div a,
+.fc-calendar .fc-row > div > div span {
+	position: relative;
+	z-index: 1;
+	color: #FFF;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
+	font-size: 12px;
+	display: inline-block;
+	padding: 3px 5px;
+	border-radius: 2px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+	margin-bottom: 1px;
+	background: #1E73BE;
+	-webkit-transition: background-color .3s ease-in-out;
+	-moz-transition: background-color .3s ease-in-out;
+	-ms-transition: background-color .3s ease-in-out;
+	-o-transition: background-color .3s ease-in-out;
+	transition: background-color .3s ease-in-out;
+}
+
+.fc-calendar .fc-row > div > div a:hover { background: #444 !important; }
+
+.fc-calendar .fc-row > div.fc-today > div a,
+.fc-calendar .fc-row > div.fc-today > div span {
+	color: #FFF;
+	background: rgba(255,255,255,0.2);
+}
+
+.dark .events-calendar-header h2,
+.dark .events-calendar-header h3 {
+	text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
+}
+
+.dark .events-calendar-header h2 { color: #FFF; }
+
+.dark .events-calendar-header h2 a,
+.dark .events-calendar-header h2 span { color: rgba(255,255,255,0.3); }
+
+.dark .events-calendar-header h2 a { color: rgba(255,255,255,0.5); }
+
+.dark .events-calendar-header h2 a:hover { color: rgba(255,255,255,0.9); }
+
+.dark .events-calendar-header h3 {
+	color: #CCC;
+	color: rgba(255,255,255,0.6);
+}
+
+.dark .events-calendar-header h3 span { color: #CCC; }
+
+.dark .events-calendar-header nav span {
+	background: rgba(255,255,255,0.3);
+	box-shadow: inset 0 1px rgba(255,255,255,0.2);
+}
+
+.dark .events-calendar-header nav span:hover { background: rgba(255,255,255,0.5); }
+
+.dark .events-calendar-header span i { color: #FFF; }
+
+.dark .fc-calendar { background: rgba(255,255,255,0.1); }
+
+.dark .fc-calendar .fc-head {
+	background: rgba(255,255,255,0.2);
+	color: rgba(255,255,255,0.9);
+	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+}
+
+.dark .fc-calendar .fc-head > div { text-shadow: 0 1px 1px rgba(0,0,0,0.4); }
+
+.dark .fc-calendar .fc-row > div > span.fc-date {
+	color: rgba(255,255,255,0.9);
+	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+}
+
+.dark .fc-calendar .fc-row { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.10); }
+
+.dark .fc-calendar .fc-row > div { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.10); }
+
+.dark .fc-calendar .fc-row > div.fc-today {
+	background: transparent;
+	box-shadow: inset 0 0 100px rgba(255,255,255,0.2);
+}
+
+.dark .fc-calendar .fc-row > div > div a,
+.dark .fc-calendar .fc-row > div > div span {
+	color: rgba(255,255,255,0.7);
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
+	background: rgba(255,255,255,0.1);
+}
+
+.dark .fc-calendar .fc-row > div > div a:hover { background: rgba(255,255,255,0.3) !important; }
+
+
+@media screen and (max-width: 991px) {
+
+	.events-calendar-header,
+	.events-calendar-header nav,
+	.events-calendar,
+	.fc-calendar-container,
+	.fc-calendar,
+	.fc-calendar .fc-head,
+	.fc-calendar .fc-row > div > span.fc-date {
+		position: relative;
+		top: auto;
+		left: auto;
+		bottom: auto;
+		right: auto;
+		height: auto;
+		width: auto;
+	}
+
+	.fc-calendar .fc-body { height: auto; }
+
+	.fc-calendar { margin: 20px 0; }
+
+	.events-calendar-header h2,
+	.events-calendar-header h3 {
+		float: none;
+		width: auto;
+		text-align: left;
+		padding: 0;
+	}
+
+	.fc-calendar .fc-row,
+	.ie9 .fc-calendar .fc-row > div,
+	.fc-calendar .fc-row > div {
+		height: auto;
+		width: 100%;
+		border: none;
+	}
+
+	.fc-calendar .fc-row > div {
+		float: none;
+		min-height: 50px;
+		box-shadow: inset 0 -1px #E5E5E5 !important;
+		border-radius: 0px !important;
+	}
+
+	.fc-calendar .fc-row > div:first-child { box-shadow: inset 0 -1px #E5E5E5 !important; }
+
+	.fc-calendar .fc-row > div:empty{
+		min-height: 0;
+		height: 0;
+		box-shadow: none !important;
+		padding: 0;
+	}
+
+	.fc-calendar .fc-row {
+		box-shadow: none;
+	}
+
+	.fc-calendar .fc-head {
+		display: none;
+	}
+
+	.fc-calendar .fc-row > div > div {
+		margin-top: 0px;
+		padding-left: 10px;
+		max-width: 68%;
+		display: inline-block;
+	}
+
+	.fc-calendar .fc-row > div.fc-today {
+		background: #1E73BE;
+	}
+
+	.fc-calendar .fc-row > div.fc-today:after {
+		display: none;
+	}
+
+	.fc-calendar .fc-row > div > span.fc-date {
+		width: 30px;
+		display: inline-block;
+		text-align: right;
+	}
+
+	.fc-calendar .fc-row > div > span.fc-weekday {
+		display: inline-block;
+		width: 40px;
+		color: #999;
+		font-size: 10px;
+		text-transform: uppercase;
+	}
+
+
+	.dark .fc-calendar .fc-row > div { box-shadow: inset 0 -1px rgba(255,255,255,0.2) !important; }
+
+	.dark .fc-calendar .fc-row > div.fc-today { background: rgba(255, 255, 255, 0.2); }
+
+	.dark .fc-calendar .fc-row > div > span.fc-weekday,
+	.fc-calendar .fc-row > div.fc-today > span.fc-weekday {
+		color: #fff;
+		color: rgba(255,255,255,0.7);
+	}
+
+}

public/css/components/bs-rating.css

@@ -0,0 +1,11 @@
+/*!
+ * bootstrap-star-rating v4.1.0
+ * http://plugins.krajee.com/star-rating
+ *
+ * Author: Kartik Visweswaran
+ * Copyright: 2013 - 2021, Kartik Visweswaran, Krajee.com
+ *
+ * Licensed under the BSD 3-Clause
+ * https://github.com/kartik-v/bootstrap-star-rating/blob/master/LICENSE.md
+ */
+.rating-loading{width:25px;height:25px;font-size:0;color:#fff;background:top left no-repeat;border:none}.rating-container .rating-stars{position:relative;cursor:pointer;vertical-align:middle;display:inline-block;overflow:hidden;white-space:nowrap}.rating-container .rating-stars:focus{outline:dotted 1px}.rating-input{display:absolute;cursor:pointer;width:100%;height:1px;bottom:0;left:0;font-size:1px;border:none;background:0 0;opacity:0;padding:0;margin:0}.caption-badge,.rating-container .caption .label{line-height:1;text-align:center;border-radius:.25rem}.rating-container.is-display-only .rating-stars{cursor:default}.rating-disabled .rating-stars{cursor:not-allowed}.rating-container .star{display:inline-block;margin:0 2px;text-align:center}.rating-container .empty-stars{color:#aaa}.rating-container .filled-stars{position:absolute;left:0;top:0;margin:auto;color:#fde16d;white-space:nowrap;overflow:hidden;-webkit-text-stroke:1px #777;text-shadow:1px 1px #999}.rating-rtl{float:right}.rating-animate .filled-stars{transition:width .25s ease}.rating-rtl .filled-stars{left:auto;right:0;transition:none;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.rating-rtl.is-star .filled-stars{right:.06em}.rating-rtl.is-heart .empty-stars{margin-right:.07em}.rating-container .clear-rating{color:#aaa;cursor:not-allowed;display:inline-block;vertical-align:middle;font-size:60%;padding-right:5px}.clear-rating-active{cursor:pointer!important}.clear-rating-active:hover{color:#843534}.rating-container .caption .label{display:inline-block;padding:.25em .4em;vertical-align:baseline}.rating-container .caption{color:#999;display:inline-block;vertical-align:middle;line-height:1;margin-left:5px;margin-right:0}.rating-rtl .caption{margin-right:5px;margin-left:0}@media print{.rating-container .clear-rating{display:none}}.rating-xl{font-size:48px}.rating-lg{font-size:40px}.rating-md{font-size:32px}.rating-sm{font-size:24px}.rating-xs{font-size:16px}.rating-xl .caption{font-size:20px}.rating-lg .caption{font-size:18px}.rating-md .caption{font-size:16px}.rating-sm .caption{font-size:14px}.rating-xs .caption{font-size:12px}.caption-badge{font-family:Arial,Helvetica,sans-serif;display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;color:#fff;white-space:nowrap;vertical-align:baseline}.caption-secondary{background-color:#6c757d}.caption-danger{background-color:#dc3545}.caption-warning{background-color:#ffc107;color:#212529}.caption-info{background-color:#0dcaf0;color:#212529}.caption-primary{background-color:#0d6efd}.caption-success{background-color:#198754}

public/css/components/bs-switches-vars.css

@@ -0,0 +1,520 @@
+/* ========================================================================
+ * bootstrap-switch - v3.3.2
+ * ====================================================================== */
+
+.bootstrap-switch {
+	display: inline-block;
+	direction: ltr;
+	cursor: pointer;
+	border-radius: 2px;
+	border: 1px solid;
+	border-color: #CCC;
+	position: relative;
+	text-align: left;
+	overflow: hidden;
+	line-height: 8px;
+	z-index: 0;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	vertical-align: middle;
+	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+.bootstrap-switch .bootstrap-switch-container {
+	display: inline-block;
+	top: 0;
+	border-radius: 2px;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off,
+.bootstrap-switch .bootstrap-switch-label {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: inline-block !important;
+	height: 100%;
+	padding: 6px 12px;
+	font-size: 14px;
+	line-height: 20px;
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off {
+	text-align: center;
+	z-index: 1;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on i,
+.bootstrap-switch .bootstrap-switch-handle-off i {
+	position: relative;
+	font-size: 16px;
+	left: -1px;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
+	color: #fff;
+	background: #337ab7;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
+	color: #fff;
+	background: #5bc0de;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
+	color: #fff;
+	background: #5cb85c;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
+	background: #f0ad4e;
+	color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
+	color: #fff;
+	background: #d9534f;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
+	color: #000;
+	background: #eeeeee;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-themecolor,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-themecolor {
+	color: #FFF;
+	background: #1ABC9C;
+	background: var(--themecolor);
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-black,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-black {
+	color: #FFF;
+	background: #000;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-white,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-white {
+	color: #000;
+	background: #F5F5F5;
+}
+
+.bootstrap-switch .bootstrap-switch-label {
+	text-align: center;
+	margin-top: -1px;
+	margin-bottom: -1px;
+	z-index: 100;
+	color: #333333;
+	background: #ffffff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on {
+	border-bottom-left-radius: 1px;
+	border-top-left-radius: 1px;
+}
+.bootstrap-switch .bootstrap-switch-handle-off {
+	border-bottom-right-radius: 1px;
+	border-top-right-radius: 1px;
+}
+.bootstrap-switch input[type='radio'],
+.bootstrap-switch input[type='checkbox'] {
+	position: absolute !important;
+	top: 0;
+	left: 0;
+	margin: 0;
+	z-index: -1;
+	opacity: 0;
+	filter: alpha(opacity=0);
+}
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
+	padding: 1px 5px;
+	font-size: 12px;
+	line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
+	padding: 5px 10px;
+	font-size: 12px;
+	line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
+	padding: 6px 16px;
+	font-size: 18px;
+	line-height: 1.3333333;
+}
+.bootstrap-switch.bootstrap-switch-disabled,
+.bootstrap-switch.bootstrap-switch-readonly,
+.bootstrap-switch.bootstrap-switch-indeterminate { cursor: default !important; }
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+	cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
+	-webkit-transition: margin-left 0.2s ease;
+	-o-transition: margin-left 0.2s ease;
+	transition: margin-left 0.2s ease;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+	border-bottom-left-radius: 0;
+	border-top-left-radius: 0;
+	border-bottom-right-radius: 1px;
+	border-top-right-radius: 1px;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+	border-bottom-right-radius: 0;
+	border-top-right-radius: 0;
+	border-bottom-left-radius: 1px;
+	border-top-left-radius: 1px;
+}
+.bootstrap-switch.bootstrap-switch-focused {
+	outline: 0;
+}
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+	border-bottom-right-radius: 1px;
+	border-top-right-radius: 1px;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+	border-bottom-left-radius: 1px;
+	border-top-left-radius: 1px;
+}
+
+.bootstrap-switch-label:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 10px;
+    height: 3px;
+    margin-top: -2px;
+    margin-left: -5px;
+    display: inline-block;
+    border-top: 1px solid #DDD;
+    border-bottom: 1px solid #DDD;
+}
+
+
+
+
+
+
+/* --------------------------------------------------------------
+	SWITCH
+--------------------------------------------------------------  */
+.switch-toggle {
+	position: absolute;
+	margin-left: -9999px;
+	visibility: hidden;
+}
+
+.switch-toggle + label {
+	display: block;
+	position: relative;
+	cursor: pointer;
+	outline: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+/* --------------------------------------------------------------
+	SWITCH 1 - ROUND
+----------------------------------------------------------------- */
+input.switch-toggle-round + label {
+	padding: 2px;
+	width: 60px;
+	height: 30px;
+	background-color: #DDD;
+	-webkit-border-radius: 15px;
+	-o-border-radius: 15px;
+	border-radius: 15px;
+}
+
+input.switch-toggle-round + label:before,
+input.switch-toggle-round + label:after {
+	display: block;
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	bottom: 1px;
+	content: "";
+}
+
+input.switch-toggle-round + label:before {
+	right: 1px;
+	background-color: #F1F1F1;
+	-webkit-border-radius: 15px;
+	-o-border-radius: 15px;
+	border-radius: 15px;
+	-webkit-transition: background 0.4s;
+	-moz-transition: background 0.4s;
+	-o-transition: background 0.4s;
+	transition: background 0.4s;
+}
+
+input.switch-toggle-round + label:after {
+	width: 28px;
+	background-color: #FFF;
+	-webkit-border-radius: 100%;
+	-o-border-radius: 100%;
+	border-radius: 100%;
+	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+	-webkit-transition: margin 0.4s;
+	-moz-transition: margin 0.4s;
+	-o-transition: margin 0.4s;
+	transition: margin 0.4s;
+}
+
+input.switch-toggle-round:checked + label:before {
+	background-color: #1ABC9C;
+	background-color: var(--themecolor);
+}
+input.switch-toggle-round:checked + label:after { margin-left: 30px; }
+
+/* --------------------------------------------------------------
+	SWITCH 1 - ROUND- MINI
+----------------------------------------------------------------- */
+input.switch-rounded-mini.switch-toggle-round + label {
+	padding: 1px;
+	width: 32px;
+	height: 16px;
+	-webkit-border-radius: 8px;
+	-o-border-radius: 8px;
+	border-radius: 8px;
+}
+
+input.switch-rounded-mini.switch-toggle-round + label:before {
+	-webkit-border-radius: 8px;
+	-o-border-radius: 8px;
+	border-radius: 8px;
+}
+
+input.switch-rounded-mini.switch-toggle-round + label:after { width: 15px; }
+input.switch-rounded-mini.switch-toggle-round:checked + label:after { margin-left: 15px; }
+
+/* --------------------------------------------------------------
+	SWITCH 1 - ROUND- LARGE
+----------------------------------------------------------------- */
+input.switch-rounded-large.switch-toggle-round + label {
+	width: 90px;
+	height: 45px;
+	-webkit-border-radius: 45px;
+	-o-border-radius: 45px;
+	border-radius: 45px;
+}
+
+input.switch-rounded-large.switch-toggle-round + label:before {
+	-webkit-border-radius: 45px;
+	-o-border-radius: 45px;
+	border-radius: 45px;
+}
+
+input.switch-rounded-large.switch-toggle-round + label:after { width: 43px; }
+input.switch-rounded-large.switch-toggle-round:checked + label:after { margin-left: 45px; }
+
+
+/* --------------------------------------------------------------
+	SWITCH 1 - ROUND- XLARGE
+----------------------------------------------------------------- */
+input.switch-rounded-xlarge.switch-toggle-round + label {
+	width: 120px;
+	height: 60px;
+	-webkit-border-radius: 60px;
+	-o-border-radius: 60px;
+	border-radius: 60px;
+}
+
+input.switch-rounded-xlarge.switch-toggle-round + label:before {
+	-webkit-border-radius: 60px;
+	-o-border-radius: 60px;
+	border-radius: 60px;
+}
+
+input.switch-rounded-xlarge.switch-toggle-round + label:after { width: 58px; }
+input.switch-rounded-xlarge.switch-toggle-round:checked + label:after { margin-left: 60px; }
+
+
+/* -----------------------------------------------------------
+	SWITCH 2 - ROUND FLAT
+-------------------------------------------------------------- */
+input.switch-toggle-flat + label {
+	padding: 2px;
+	width: 60px;
+	height: 30px;
+	background-color: #DDD;
+	-webkit-border-radius: 30px;
+	-moz-border-radius: 30px;
+	-ms-border-radius: 30px;
+	-o-border-radius: 30px;
+	border-radius: 30px;
+	-webkit-transition: background 0.4s;
+	-moz-transition: background 0.4s;
+	-o-transition: background 0.4s;
+	transition: background 0.4s;
+}
+
+input.switch-toggle-flat + label:before,
+input.switch-toggle-flat + label:after {
+	display: block;
+	position: absolute;
+	content: "";
+}
+
+input.switch-toggle-flat + label:before {
+	top: 2px;
+	left: 2px;
+	bottom: 2px;
+	right: 2px;
+	background-color: #FFF;
+	-webkit-border-radius: 30px;
+	-moz-border-radius: 30px;
+	-ms-border-radius: 30px;
+	-o-border-radius: 30px;
+	border-radius: 30px;
+	-webkit-transition: background 0.4s;
+	-moz-transition: background 0.4s;
+	-o-transition: background 0.4s;
+	transition: background 0.4s;
+}
+
+input.switch-toggle-flat + label:after {
+	top: 4px;
+	left: 4px;
+	bottom: 4px;
+	width: 22px;
+	background-color: #DDD;
+	-webkit-border-radius: 22px;
+	-moz-border-radius: 22px;
+	-ms-border-radius: 22px;
+	-o-border-radius: 22px;
+	border-radius: 22px;
+	-webkit-transition: margin 0.4s, background 0.4s;
+	-moz-transition: margin 0.4s, background 0.4s;
+	-o-transition: margin 0.4s, background 0.4s;
+	transition: margin 0.4s, background 0.4s;
+}
+
+input.switch-toggle-flat:checked + label {
+	background-color: #1ABC9C;
+	background-color: var(--themecolor);
+}
+
+input.switch-toggle-flat:checked + label:after {
+	margin-left: 30px;
+	background-color: #1ABC9C;
+	background-color: var(--themecolor);
+}
+
+
+/* -----------------------------------------------------------
+	SWITCH 2 - FLAT - MINI
+-------------------------------------------------------------- */
+input.switch-flat-mini.switch-toggle-flat + label {
+	padding: 1px;
+	width: 32px;
+	height: 16px;
+	-webkit-border-radius: 16px;
+	-o-border-radius: 16px;
+	border-radius: 16px;
+}
+
+input.switch-flat-mini.switch-toggle-flat + label:before {
+	top: 1px;
+	left: 1px;
+	bottom: 1px;
+	right: 1px;
+	-webkit-border-radius: 16px;
+	-o-border-radius: 16px;
+	border-radius: 16px;
+}
+
+input.switch-flat-mini.switch-toggle-flat + label:after {
+	top: 2px;
+	left: 2px;
+	bottom: 2px;
+	width: 12px;
+	-webkit-border-radius: 12px;
+	-o-border-radius: 12px;
+	border-radius: 12px;
+}
+
+input.switch-flat-mini.switch-toggle-flat:checked + label:after { margin-left: 16px; }
+
+
+/* -----------------------------------------------------------
+	SWITCH 2 - FLAT - LARGE
+-------------------------------------------------------------- */
+input.switch-flat-large.switch-toggle-flat + label {
+	width: 90px;
+	height: 45px;
+	-webkit-border-radius: 45px;
+	-o-border-radius: 45px;
+	border-radius: 45px;
+}
+
+input.switch-flat-large.switch-toggle-flat + label:before {
+	-webkit-border-radius: 45px;
+	-o-border-radius: 45px;
+	border-radius: 45px;
+}
+
+input.switch-flat-large.switch-toggle-flat + label:after {
+	width: 37px;
+	-webkit-border-radius: 37px;
+	-o-border-radius: 37px;
+	border-radius: 37px;
+}
+
+input.switch-flat-large.switch-toggle-flat:checked + label:after { margin-left: 45px; }
+
+
+
+/* -----------------------------------------------------------
+	SWITCH 2 - FLAT - XLARGE
+-------------------------------------------------------------- */
+input.switch-flat-xlarge.switch-toggle-flat + label {
+	padding: 2px;
+	width: 120px;
+	height: 60px;
+	-webkit-border-radius: 60px;
+	-o-border-radius: 60px;
+	border-radius: 60px;
+}
+
+input.switch-flat-xlarge.switch-toggle-flat + label:before {
+	-webkit-border-radius: 60px;
+	-o-border-radius: 60px;
+	border-radius: 60px;
+}
+input.switch-flat-xlarge.switch-toggle-flat + label:after {
+	width: 52px;
+	-webkit-border-radius: 52px;
+	-o-border-radius: 52px;
+	border-radius: 52px;
+}
+
+input.switch-flat-xlarge.switch-toggle-flat:checked + label:after { margin-left: 60px; }
+

public/css/components/bs-switches.css

@@ -0,0 +1,184 @@
+/**
+* bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
+*
+* @version v3.4 for Bootstrap 4.x
+* @homepage https://bttstrp.github.io/bootstrap-switch
+* @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
+* & djibe
+* @license Apache-2.0
+*/
+.bootstrap-switch {
+	display: inline-block;
+	direction: ltr;
+	cursor: pointer;
+	border-radius: 4px;
+	border: 1px solid #ccc;
+	position: relative;
+	text-align: left;
+	overflow: hidden;
+	line-height: 8px;
+	z-index: 0;
+	-webkit-user-select: none;
+		 -moz-user-select: none;
+			-ms-user-select: none;
+					user-select: none;
+	vertical-align: middle;
+	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+	transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+}
+.bootstrap-switch .bootstrap-switch-container {
+	display: inline-block;
+	top: 0;
+	border-radius: 4px;
+	-webkit-transform: translate3d(0, 0, 0);
+					transform: translate3d(0, 0, 0);
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off,
+.bootstrap-switch .bootstrap-switch-label {
+	-webkit-box-sizing: border-box;
+					box-sizing: border-box;
+	cursor: pointer;
+	display: table-cell;
+	vertical-align: middle;
+	padding: 6px 12px;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 500;
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off {
+	text-align: center;
+	z-index: 1;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
+	background: #007bff;
+	color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
+	background: #eee;
+	color: rgba(0, 0, 0, 0.87);
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
+	background: #6c757d;
+	color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
+	background: #17a2b8;
+	color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
+	background: #28a745;
+	color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
+	background: #ffc107;
+	color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
+	background: #dc3545;
+	color: #fff;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-themecolor,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-themecolor {
+	color: #FFF;
+	background: var(--cnvs-themecolor);
+	border-color: transparent !important;
+	outline: 0 !important;
+	-webkit-box-shadow: none !important;
+			box-shadow: none !important;
+}
+.bootstrap-switch .bootstrap-switch-label {
+	text-align: center;
+	margin-top: -1px;
+	margin-bottom: -1px;
+	z-index: 100;
+	color: #333;
+	background: #fff;
+	padding: 8px 12px;
+}
+.bootstrap-switch span::before {
+	content: "\200b";
+}
+.bootstrap-switch .bootstrap-switch-handle-on {
+	border-bottom-left-radius: 3px;
+	border-top-left-radius: 3px;
+}
+.bootstrap-switch .bootstrap-switch-handle-off {
+	border-bottom-right-radius: 3px;
+	border-top-right-radius: 3px;
+}
+.bootstrap-switch input[type='radio'],
+.bootstrap-switch input[type='checkbox'] {
+	position: absolute !important;
+	top: 0;
+	left: 0;
+	margin: 0;
+	z-index: -1;
+	opacity: 0;
+	filter: alpha(opacity=0);
+	visibility: hidden;
+}
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
+	padding: 1px 5px;
+	font-size: 12px;
+	line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
+	padding: 5px 10px;
+	font-size: 12px;
+	line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
+	padding: 6px 16px;
+	font-size: 18px;
+	line-height: 1.3333333;
+}
+.bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly, .bootstrap-switch.bootstrap-switch-indeterminate {
+	cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+	cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
+	-webkit-transition: margin-left 0.5s;
+	transition: margin-left 0.5s;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+	border-radius: 0 3px 3px 0;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+	border-radius: 3px 0 0 3px;
+}
+.bootstrap-switch.bootstrap-switch-focused {
+	border-color: #66afe9;
+	outline: 0;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+					box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+	border-bottom-right-radius: 3px;
+	border-top-right-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+	border-bottom-left-radius: 3px;
+	border-top-left-radius: 3px;
+}

public/css/components/dark-components.css

@@ -0,0 +1,341 @@
+
+/* ========================================================================
+	Dark - timepicker.css
+======================================================================== */
+.dark .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before { border-bottom: 7px solid #444; }
+.dark .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-bottom-color: #222; }
+.dark .bootstrap-datetimepicker-widget.dropdown-menu.top:before { border-top-color: #DDD; }
+.dark .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-top-color: #222; }
+.dark .bootstrap-datetimepicker-widget table th.disabled,
+.dark .bootstrap-datetimepicker-widget table th.disabled:hover { color: #AAA; }
+.dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: #444; }
+.dark .bootstrap-datetimepicker-widget table td.cw { color: #AAA; }
+.dark .bootstrap-datetimepicker-widget table td.day:hover,
+.dark .bootstrap-datetimepicker-widget table td.hour:hover,
+.dark .bootstrap-datetimepicker-widget table td.minute:hover,
+.dark .bootstrap-datetimepicker-widget table td.second:hover { background: #444; }
+.dark .bootstrap-datetimepicker-widget table td.old,
+.dark .bootstrap-datetimepicker-widget table td.new { color: #AAA; }
+.dark .bootstrap-datetimepicker-widget table td.active,
+.dark .bootstrap-datetimepicker-widget table td.active:hover { color: #222; }
+.dark .bootstrap-datetimepicker-widget table td.active.today:before { border-bottom-color: #222; }
+.dark .bootstrap-datetimepicker-widget table td.disabled,
+.dark .bootstrap-datetimepicker-widget table td.disabled:hover { color: #AAA; }
+.dark .bootstrap-datetimepicker-widget table td span:hover { background: #444; }
+.dark .bootstrap-datetimepicker-widget table td span.active { color: #222; }
+.dark .bootstrap-datetimepicker-widget table td span.old { color: #AAA; }
+.dark .bootstrap-datetimepicker-widget table td span.disabled,
+.dark .bootstrap-datetimepicker-widget table td span.disabled:hover { color: #AAA; }
+
+
+
+
+/* ========================================================================
+	select-boxes.css
+======================================================================== */
+.dark .select2-dropdown {
+	background-color: #333;
+	border-color: #555;
+}
+.dark .select2-close-mask { background-color: #333; }
+
+.dark .select2-container--default .select2-selection--single {
+	background-color: #333;
+	border-color: #555;
+}
+.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #EEE; }
+.dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; }
+
+.dark .select2-container--default .select2-selection--multiple {
+	background-color: #333;
+	border-color: #555;
+}
+.dark .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #999; }
+.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
+	background-color: #444;
+	border-color:  #555;
+}
+.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; }
+.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #EEE; }
+
+.dark .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #444; }
+
+.dark .select2-container--default .select2-search--dropdown .select2-search__field {
+	border-color: #555;
+	background-color: #555;
+	color: #EEE;
+}
+
+.dark .select2-container--default .select2-results__option[aria-disabled=true] { color: #999; }
+
+.dark .select2-container--default .select2-results__option[aria-selected=true] { background-color: #444; }
+
+.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
+	background-color: #5897fb;
+	color: #EEE; }
+
+.dark .select2-container--classic .select2-selection--single {
+	background-color: #444;
+	border-color: #555;
+	background-image: -webkit-linear-gradient(top, white 50%, #444 100%);
+	background-image: -o-linear-gradient(top, white 50%, #444 100%);
+	background-image: linear-gradient(to bottom, white 50%, #444 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44444444', endColorstr='#44EEEEEE', GradientType=0);
+}
+.dark .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; }
+.dark .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; }
+.dark .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; }
+.dark .select2-container--classic .select2-selection--single .select2-selection__arrow {
+	background-color: #444;
+	border-left-color: #555;
+	background-image: -webkit-linear-gradient(top, #444 50%, #444 100%);
+	background-image: -o-linear-gradient(top, #444 50%, #444 100%);
+	background-image: linear-gradient(to bottom, #444 50%, #444 100%);
+	background-repeat: repeat-x;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44EEEEEE', endColorstr='#44CCCCCC', GradientType=0);
+}
+
+.dark .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border-right-color: #555; }
+
+.dark .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
+	background-image: -webkit-linear-gradient(top, white 0%, #444 50%);
+	background-image: -o-linear-gradient(top, white 0%, #444 50%);
+	background-image: linear-gradient(to bottom, white 0%, #444 50%);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44444444', endColorstr='#44EEEEEE', GradientType=0);
+}
+
+.dark .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
+	background-image: -webkit-linear-gradient(top, #444 50%, white 100%);
+	background-image: -o-linear-gradient(top, #444 50%, white 100%);
+	background-image: linear-gradient(to bottom, #444 50%, white 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44EEEEEE', endColorstr='#444', GradientType=0);
+}
+
+.dark .select2-container--classic .select2-selection--multiple {
+	background-color: #333;
+	border-color: #555;
+}
+
+.dark .select2-container--classic .select2-selection--multiple:focus { border-color: #5897fb; }
+.dark .select2-container--classic .select2-selection--multiple .select2-selection__choice {
+	background-color: #444;
+	border-color: #555;
+}
+.dark .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #EEE; }
+
+.dark .select2-container--classic .select2-search--dropdown .select2-search__field { border-color: #555; }
+
+.dark .select2-container--classic .select2-dropdown { background-color: #333;}
+
+.dark .select2-container--classic .select2-results__option[aria-disabled=true] { color: #444; }
+
+.dark .select2-container--classic .select2-results__option--highlighted[aria-selected] { color: #333; }
+
+.dark .select2-container--default.select2-container--disabled .select2-selection--single { background-color: rgba(255,255,255,0.1); }
+
+
+
+
+
+
+/* ========================================================================
+	radio-checkbox.css
+======================================================================== */
+
+.dark .checkbox-style-1-label:before,
+.dark .radio-style-1-label:before,
+.dark .checkbox-style-2-label:before,
+.dark .radio-style-2-label:before,
+.dark .checkbox-style-3-label:before,
+.dark .radio-style-3-label:before {
+	background: #333;
+	border-color: #444;
+}
+
+.dark .radio-style:checked + .radio-style-1-label:before { background: #CCC; }
+
+/* Checkbox-small + Radio-small */
+.dark .checkbox-style-1-label.checkbox-small:before,
+.dark .radio-style-1-label.radio-small:before,
+.dark .checkbox-style-2-label.checkbox-small:before,
+.dark .radio-style-2-label.radio-small:before,
+.dark .checkbox-style-3-label.checkbox-small:before,
+.dark .radio-style-3-label.radio-small:before { border-color: #444; }
+
+/* Style-2 */
+.dark .checkbox-style:checked + .checkbox-style-2-label:before { box-shadow: inset 0px 0px 0px 4px #000; }
+
+.dark .radio-style:checked + .radio-style-2-label:before {
+	background: #CCC;
+	box-shadow: inset 0px 0px 0px 4px #333;
+}
+
+.dark .checkbox-style:checked + .checkbox-style-2-label.checkbox-small:before { box-shadow: inset 0px 0px 0px 2px #000; }
+.dark .radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px #000; }
+
+/* style-3 */
+.dark .checkbox-style:checked + .checkbox-style-3-label:before,
+.dark .radio-style:checked + .radio-style-3-label:before { color: #222; }
+.dark .radio-style:checked + .radio-style-3-label:before {
+	color: #CCC;
+	border-color: #CCC;
+}
+
+/* style-3 - Small */
+.dark .checkbox-style + .checkbox-style-3-label.checkbox-small:before,
+.dark .radio-style + .radio-style-3-label.radio-small:before { border-color: #555; }
+
+
+
+
+
+
+
+/* ========================================================================
+	ion.rangeslider.css
+======================================================================== */
+.dark .irs-bar-edge,
+.dark .irs-line-mid,
+.dark .irs-line-left,
+.dark .irs-line-right { background-color: #444; }
+
+
+
+
+/*========================================================================
+	daterangepicker.css
+ ======================================================================== */
+.dark .daterangepicker {  background: #222; }
+
+.dark .daterangepicker.opensleft:before {
+	border-bottom-color: #444;
+	border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark .daterangepicker.opensleft:after {
+	border-bottom-color: #555;
+	border-left-color: transparent;
+}
+
+.dark .daterangepicker.openscenter:before {
+	border-bottom-color: #444;
+	border-left-color: transparent;
+	border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+
+.dark .daterangepicker.openscenter:after {
+	border-bottom-color: #222;
+	border-left-color: transparent;
+}
+
+.dark .daterangepicker.opensright:before {
+	border-bottom-color: #444;
+	border-left-color: transparent;
+	border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+
+.dark .daterangepicker.opensright:after {
+	border-bottom-color: #222;
+	border-left-color: transparent;
+}
+
+.dark .daterangepicker.dropup:before{ border-top-color: #444; }
+
+.dark .daterangepicker.dropup:after{ border-top-color: #222; }
+
+.dark .daterangepicker .calendar-table {
+	border-color: #444;
+	background: #222;
+}
+
+.dark .daterangepicker td.off, .dark .daterangepicker td.off.in-range, .dark .daterangepicker td.off.start-date, .dark .daterangepicker td.off.end-date {
+	color: #999;
+	background: #222;
+}
+
+.dark .daterangepicker td.disabled, .dark .daterangepicker option.disabled { color: #999; }
+
+.dark .daterangepicker td.available:hover, .dark .daterangepicker th.available:hover { background: #555; }
+
+.dark .daterangepicker td.in-range {
+	background: #444;
+	border-radius: 0;
+}
+
+.dark .daterangepicker td.active, .dark .daterangepicker td.active:hover {
+	background-color: #357ebd;
+	border-color: #3071a9;
+	color: #EEE;
+}
+
+.dark .daterangepicker td.week, .dark .daterangepicker th.week { color: #444; }
+
+.dark .reportrange { border-color: #444 !important; }
+
+/* Text Input Above Each Calendar */
+.dark .daterangepicker .input-mini {
+	border-color: #444;
+	color: #555;
+}
+
+.dark .daterangepicker .input-mini.active { border-color: #357ebd; }
+
+.dark .daterangepicker .calendar-time select.disabled { color: #444; }
+
+.daterangepicker .daterangepicker_input i { color: #333; }
+
+	/* Predefined Ranges */
+.dark .daterangepicker .ranges li {
+	background: #333;
+	border-color: #333;
+	color: #EEE;
+}
+
+.dark .daterangepicker .ranges li.active, .dark .daterangepicker .ranges li:hover {
+	background: #08c;
+	border-color: #08c;
+	color: #EEE;
+}
+
+.dark .input-daterange .input-group-addon {
+	background-color: #222;
+	border-color: #111;
+	text-shadow: none;
+}
+
+
+
+
+/* ========================================================================
+* bs-switches.css
+* ====================================================================== */
+
+.dark .bootstrap-switch { border-color: #444; }
+
+.dark .bootstrap-switch .bootstrap-switch-label {
+	color: #EEE;
+	background: #222;
+}
+
+.dark .bootstrap-switch-label:after {
+    border-top-color: #444;
+    border-bottom-color: #444;
+}
+
+/*  Switches
+--------------------------------------------------------------  */
+.dark input.switch-toggle-round + label { background-color: #444; }
+
+.dark input.switch-toggle-round + label:before,
+.dark input.switch-toggle-flat + label:before { background-color: #222; }
+
+.dark input.switch-toggle-flat + label,
+.dark input.switch-toggle-flat + label:after { background-color: #AAA; }
+
+.dark input.switch-toggle-round + label:after {
+	background-color: #AAA;
+	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
+	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
+}
+

public/css/components/daterangepicker.css

@@ -0,0 +1,410 @@
+.daterangepicker {
+  position: absolute;
+  color: inherit;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  width: 278px;
+  max-width: none;
+  padding: 0;
+  margin-top: 7px;
+  top: 100px;
+  left: 20px;
+  z-index: 3001;
+  display: none;
+  font-family: arial;
+  font-size: 15px;
+  line-height: 1em;
+}
+
+.daterangepicker:before, .daterangepicker:after {
+  position: absolute;
+  display: inline-block;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.daterangepicker:before {
+  top: -7px;
+  border-right: 7px solid transparent;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+}
+
+.daterangepicker:after {
+  top: -6px;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+}
+
+.daterangepicker.opensleft:before {
+  right: 9px;
+}
+
+.daterangepicker.opensleft:after {
+  right: 10px;
+}
+
+.daterangepicker.openscenter:before {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.openscenter:after {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.opensright:before {
+  left: 9px;
+}
+
+.daterangepicker.opensright:after {
+  left: 10px;
+}
+
+.daterangepicker.drop-up {
+  margin-top: -7px;
+}
+
+.daterangepicker.drop-up:before {
+  top: initial;
+  bottom: -7px;
+  border-bottom: initial;
+  border-top: 7px solid #ccc;
+}
+
+.daterangepicker.drop-up:after {
+  top: initial;
+  bottom: -6px;
+  border-bottom: initial;
+  border-top: 6px solid #fff;
+}
+
+.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
+  float: none;
+}
+
+.daterangepicker.single .drp-selected {
+  display: none;
+}
+
+.daterangepicker.show-calendar .drp-calendar {
+  display: block;
+}
+
+.daterangepicker.show-calendar .drp-buttons {
+  display: block;
+}
+
+.daterangepicker.auto-apply .drp-buttons {
+  display: none;
+}
+
+.daterangepicker .drp-calendar {
+  display: none;
+  max-width: 270px;
+}
+
+.daterangepicker .drp-calendar.left {
+  padding: 8px 0 8px 8px;
+}
+
+.daterangepicker .drp-calendar.right {
+  padding: 8px;
+}
+
+.daterangepicker .drp-calendar.single .calendar-table {
+  border: none;
+}
+
+.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
+  color: #fff;
+  border: solid black;
+  border-width: 0 2px 2px 0;
+  border-radius: 0;
+  display: inline-block;
+  padding: 3px;
+}
+
+.daterangepicker .calendar-table .next span {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+.daterangepicker .calendar-table .prev span {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  min-width: 32px;
+  width: 32px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.daterangepicker .calendar-table {
+  border: 1px solid #fff;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.daterangepicker .calendar-table table {
+  width: 100%;
+  margin: 0;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+  background-color: #eee;
+  border-color: transparent;
+  color: inherit;
+}
+
+.daterangepicker td.week, .daterangepicker th.week {
+  font-size: 80%;
+  color: #ccc;
+}
+
+.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+  background-color: #fff;
+  border-color: transparent;
+  color: #999;
+}
+
+.daterangepicker td.in-range {
+  background-color: #ebf4f8;
+  border-color: transparent;
+  color: #000;
+  border-radius: 0;
+}
+
+.daterangepicker td.start-date {
+  border-radius: 4px 0 0 4px;
+}
+
+.daterangepicker td.end-date {
+  border-radius: 0 4px 4px 0;
+}
+
+.daterangepicker td.start-date.end-date {
+  border-radius: 4px;
+}
+
+.daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: #357ebd;
+  border-color: transparent;
+  color: #fff;
+}
+
+.daterangepicker th.month {
+  width: auto;
+}
+
+.daterangepicker td.disabled, .daterangepicker option.disabled {
+  color: #999;
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+.daterangepicker select.monthselect, .daterangepicker select.yearselect {
+  font-size: 12px;
+  padding: 1px;
+  height: auto;
+  margin: 0;
+  cursor: default;
+}
+
+.daterangepicker select.monthselect {
+  margin-right: 2%;
+  width: 56%;
+}
+
+.daterangepicker select.yearselect {
+  width: 40%;
+}
+
+.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+  width: 50px;
+  margin: 0 auto;
+  background: #eee;
+  border: 1px solid #eee;
+  padding: 2px;
+  outline: 0;
+  font-size: 12px;
+}
+
+.daterangepicker .calendar-time {
+  text-align: center;
+  margin: 4px auto 0 auto;
+  line-height: 30px;
+  position: relative;
+}
+
+.daterangepicker .calendar-time select.disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.daterangepicker .drp-buttons {
+  clear: both;
+  text-align: right;
+  padding: 8px;
+  border-top: 1px solid #ddd;
+  display: none;
+  line-height: 12px;
+  vertical-align: middle;
+}
+
+.daterangepicker .drp-selected {
+  display: inline-block;
+  font-size: 12px;
+  padding-right: 8px;
+}
+
+.daterangepicker .drp-buttons .btn {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 4px 8px;
+}
+
+.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
+  border-right: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.rtl .drp-calendar.right {
+  border-right: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.ltr .drp-calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker .ranges {
+  float: none;
+  text-align: left;
+  margin: 0;
+}
+
+.daterangepicker.show-calendar .ranges {
+  margin-top: 8px;
+}
+
+.daterangepicker .ranges ul {
+  list-style: none;
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+}
+
+.daterangepicker .ranges li {
+  font-size: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.daterangepicker .ranges li:hover {
+  background-color: #eee;
+}
+
+.daterangepicker .ranges li.active {
+  background-color: #08c;
+  color: #fff;
+}
+
+/*  Larger Screen Styling */
+@media (min-width: 564px) {
+  .daterangepicker {
+    width: auto;
+  }
+
+  .daterangepicker .ranges ul {
+    width: 140px;
+  }
+
+  .daterangepicker.single .ranges ul {
+    width: 100%;
+  }
+
+  .daterangepicker.single .drp-calendar.left {
+    clear: none;
+  }
+
+  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
+    float: left;
+  }
+
+  .daterangepicker {
+    direction: ltr;
+    text-align: left;
+  }
+
+  .daterangepicker .drp-calendar.left {
+    clear: left;
+    margin-right: 0;
+  }
+
+  .daterangepicker .drp-calendar.left .calendar-table {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .daterangepicker .drp-calendar.right {
+    margin-left: 0;
+  }
+
+  .daterangepicker .drp-calendar.right .calendar-table {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .daterangepicker .drp-calendar.left .calendar-table {
+    padding-right: 8px;
+  }
+
+  .daterangepicker .ranges, .daterangepicker .drp-calendar {
+    float: left;
+  }
+}
+
+@media (min-width: 730px) {
+  .daterangepicker .ranges {
+    width: auto;
+  }
+
+  .daterangepicker .ranges {
+    float: left;
+  }
+
+  .daterangepicker.rtl .ranges {
+    float: right;
+  }
+
+  .daterangepicker .drp-calendar.left {
+    clear: none !important;
+  }
+}

public/css/components/ion.rangeslider-vars.css

@@ -0,0 +1,269 @@
+/* Ion.RangeSlider
+// css version 2.0.3
+// © 2013-2014 Denis Ineshin | IonDen.com
+// ===================================================================================================================*/
+
+/* =====================================================================================================================
+// RangeSlider */
+
+.irs {
+	position: relative; display: block;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	 -khtml-user-select: none;
+	   -moz-user-select: none;
+		-ms-user-select: none;
+			user-select: none;
+}
+	.irs-line {
+		position: relative; display: block;
+		overflow: hidden;
+		outline: none !important;
+	}
+		.irs-line-left, .irs-line-mid, .irs-line-right {
+			position: absolute; display: block;
+			top: 0;
+		}
+		.irs-line-left {
+			left: 0; width: 11%;
+		}
+		.irs-line-mid {
+			left: 9%; width: 82%;
+		}
+		.irs-line-right {
+			right: 0; width: 11%;
+		}
+
+	.irs-bar {
+		position: absolute; display: block;
+		left: 0; width: 0;
+	}
+		.irs-bar-edge {
+			position: absolute; display: block;
+			top: 0; left: 0;
+		}
+
+	.irs-shadow {
+		position: absolute; display: none;
+		left: 0; width: 0;
+	}
+
+	.irs-slider {
+		position: absolute; display: block;
+		cursor: pointer;
+		z-index: 1;
+	}
+		.irs-slider.single {
+
+		}
+		.irs-slider.from {
+
+		}
+		.irs-slider.to {
+
+		}
+		.irs-slider.type_last {
+			z-index: 2;
+		}
+
+	.irs-min {
+		position: absolute; display: block;
+		left: 0;
+		cursor: default;
+	}
+	.irs-max {
+		position: absolute; display: block;
+		right: 0;
+		cursor: default;
+	}
+
+	.irs-from, .irs-to, .irs-single {
+		position: absolute; display: block;
+		top: 0; left: 0;
+		cursor: default;
+		white-space: nowrap;
+	}
+
+.irs-grid {
+	position: absolute; display: none;
+	bottom: 0; left: 0;
+	width: 100%; height: 20px;
+}
+.irs-with-grid .irs-grid {
+	display: block;
+}
+	.irs-grid-pol {
+		position: absolute;
+		top: 0; left: 0;
+		width: 1px; height: 8px;
+		background: #000;
+	}
+	.irs-grid-pol.small {
+		height: 4px;
+	}
+	.irs-grid-text {
+		position: absolute;
+		bottom: 0; left: 0;
+		white-space: nowrap;
+		text-align: center;
+		font-size: 9px; line-height: 9px;
+		padding: 0 3px;
+		color: #000;
+	}
+
+.irs-disable-mask {
+	position: absolute; display: block;
+	top: 0; left: -1%;
+	width: 102%; height: 100%;
+	cursor: default;
+	background: rgba(0,0,0,0.0);
+	z-index: 2;
+}
+.lt-ie9 .irs-disable-mask {
+	background: #000;
+	filter: alpha(opacity=0);
+	cursor: not-allowed;
+}
+
+.irs-disabled {
+	opacity: 0.4;
+}
+
+
+.irs-hidden-input {
+	position: absolute !important;
+	display: block !important;
+	top: 0 !important;
+	left: 0 !important;
+	width: 0 !important;
+	height: 0 !important;
+	font-size: 0 !important;
+	line-height: 0 !important;
+	padding: 0 !important;
+	margin: 0 !important;
+	outline: none !important;
+	z-index: -9999 !important;
+	background: none !important;
+	border-style: solid !important;
+	border-color: transparent !important;
+}
+
+
+/* Ion.RangeSlider, Nice Skin
+// css version 2.0.3
+// © Denis Ineshin, 2014    https://github.com/IonDen
+// ===================================================================================================================*/
+
+/* =====================================================================================================================
+// Skin details */
+
+.irs-slider {
+    background: url(rangeslider/sprite-skin-nice.png) repeat-x;
+}
+
+.irs-bar-edge,
+.irs-line-mid,
+.irs-line-left,
+.irs-line-right {
+	background-color: #EEE;
+	border-radius: 100px;
+}
+
+.irs {
+    height: 40px;
+}
+.irs-with-grid {
+    height: 60px;
+}
+.irs-line {
+    height: 8px; top: 25px;
+}
+    .irs-line-left {
+        height: 8px;
+        background-position: 0 -30px;
+    }
+    .irs-line-mid {
+        height: 8px;
+        background-position: 0 0;
+    }
+    .irs-line-right {
+        height: 8px;
+        background-position: 100% -30px;
+    }
+
+.irs-bar {
+    height: 8px;
+    top: 25px;
+    background-color: #1ABC9C;
+    background-color: var(--themecolor);
+    border-radius: 100px
+}
+    .irs-bar-edge {
+        top: 25px;
+        height: 8px;
+        width: 11px;
+        background-position: 0 -90px;
+    }
+
+.irs-shadow {
+    height: 8px;
+    top: 25px;
+    background: rgba(0,0,0,0.9);
+    opacity: 0.15;
+}
+.lt-ie9 .irs-shadow {
+    filter: alpha(opacity=15);
+}
+
+.irs-slider {
+    width: 22px; height: 22px;
+    top: 17px;
+    background-position: 0 -120px;
+}
+
+.irs-min, .irs-max {
+    color: #999;
+    font-size: 11px;
+    line-height: 1.333;
+    text-shadow: none;
+    top: -8px;
+    padding: 3px;
+    background: rgba(0,0,0,0.05);
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+}
+
+.irs-from, .irs-to, .irs-single {
+    color: #FFF;
+    top: -8px;
+    font-size: 11px;
+    line-height: 1.333;
+    text-shadow: none;
+    padding: 3px;
+    background: #1ABC9C;
+    background: var(--themecolor);
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+}
+
+.irs-from:after, .irs-single:after, .irs-to:after {
+    content: "";
+    position: absolute;
+    display: block;
+    bottom: -6px;
+    left: 50%;
+    width: 0;
+    height: 0;
+    margin-left: -3px;
+    overflow: hidden;
+    border: 3px solid transparent;
+    border-top-color: #1ABC9C;
+    border-top-color: var(--themecolor);
+}
+
+.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single { background: #DDD; }
+
+.irs-grid-pol { background: #AAA; }
+.irs-grid-text { color: #AAA }
+
+.irs-disabled { }

public/css/components/ion.rangeslider.css

@@ -0,0 +1,691 @@
+@charset "UTF-8";
+/**
+Ion.RangeSlider, 2.3.1
+© Denis Ineshin, 2010 - 2019, IonDen.com
+Build date: 2019-12-19 16:51:02
+*/
+.irs {
+  --cnvs-range-slider-top: 25px;
+  --cnvs-range-slider-bottom: 16px;
+  --cnvs-range-slider-line_height: 12px;
+  --cnvs-range-slider-handle_width: 16px;
+  --cnvs-range-slider-handle_height: 18px;
+  --cnvs-range-slider-custom_radius: 4px;
+  --cnvs-range-slider-line_color: var(--cnvs-contrast-200);
+  --cnvs-range-slider-bar_color: var(--cnvs-themecolor);
+  --cnvs-range-slider-handle_color_1: var(--cnvs-range-slider-bar_color);
+  --cnvs-range-slider-handle_color_2: var(--cnvs-contrast-500);
+  --cnvs-range-slider-minmax_text_color: var(--cnvs-contrast-600);
+  --cnvs-range-slider-minmax_bg_color: var(--cnvs-range-slider-line_color);
+  --cnvs-range-slider-label_color_1: var(--cnvs-range-slider-bar_color);
+  --cnvs-range-slider-label_color_2: white;
+  --cnvs-range-slider-grid_color_1: var(--cnvs-range-slider-line_color);
+  --cnvs-range-slider-grid_color_2: var(--cnvs-range-slider-minmax_text_color);
+  position: relative;
+  display: block;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  font-size: 12px;
+  font-family: Arial, sans-serif;
+}
+.irs-line {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  outline: none !important;
+}
+.irs-bar {
+  position: absolute;
+  display: block;
+  left: 0;
+  width: 0;
+}
+.irs-shadow {
+  position: absolute;
+  display: none;
+  left: 0;
+  width: 0;
+}
+.irs-handle {
+  position: absolute;
+  display: block;
+  box-sizing: border-box;
+  cursor: default;
+  z-index: 1;
+}
+.irs-handle.type_last {
+  z-index: 2;
+}
+.irs-min, .irs-max {
+  position: absolute;
+  display: block;
+  cursor: default;
+}
+.irs-min {
+  left: 0;
+}
+.irs-max {
+  right: 0;
+}
+.irs-from, .irs-to, .irs-single {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  cursor: default;
+  white-space: nowrap;
+}
+.irs-grid {
+  position: absolute;
+  display: none;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 20px;
+}
+.irs-with-grid .irs-grid {
+  display: block;
+}
+.irs-grid-pol {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 8px;
+  background: #000;
+}
+.irs-grid-pol.small {
+  height: 4px;
+}
+.irs-grid-text {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  white-space: nowrap;
+  text-align: center;
+  font-size: 9px;
+  line-height: 9px;
+  padding: 0 3px;
+  color: #000;
+}
+.irs-disable-mask {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: -1%;
+  width: 102%;
+  height: 100%;
+  cursor: default;
+  background: rgba(0, 0, 0, 0);
+  z-index: 2;
+}
+.lt-ie9 .irs-disable-mask {
+  background: #000;
+  filter: alpha(opacity=0);
+  cursor: not-allowed;
+}
+.irs-disabled {
+  opacity: 0.4;
+}
+.irs-hidden-input {
+  position: absolute !important;
+  display: block !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  font-size: 0 !important;
+  line-height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  overflow: hidden;
+  outline: none !important;
+  z-index: -9999 !important;
+  background: none !important;
+  border-style: solid !important;
+  border-color: transparent !important;
+}
+
+.irs--flat {
+  height: 40px;
+}
+.irs--flat.irs-with-grid {
+  height: 60px;
+}
+.irs--flat .irs-line {
+  top: var(--cnvs-range-slider-top);
+  height: var(--cnvs-range-slider-line_height);
+  background-color: var(--cnvs-range-slider-line_color);
+  border-radius: var(--cnvs-range-slider-custom_radius);
+}
+.irs--flat .irs-bar {
+  top: var(--cnvs-range-slider-top);
+  height: var(--cnvs-range-slider-line_height);
+  background-color: var(--cnvs-range-slider-bar_color);
+}
+.irs--flat .irs-bar--single {
+  border-radius: var(--cnvs-range-slider-custom_radius) 0 0 var(--cnvs-range-slider-custom_radius);
+}
+.irs--flat .irs-shadow {
+  height: 1px;
+  bottom: var(--cnvs-range-slider-bottom);
+  background-color: var(--cnvs-range-slider-line_color);
+}
+.irs--flat .irs-handle {
+  top: 22px;
+  width: var(--cnvs-range-slider-handle_width);
+  height: var(--cnvs-range-slider-handle_height);
+  background-color: transparent;
+}
+.irs--flat .irs-handle > i:first-child {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 50%;
+  width: 2px;
+  height: 100%;
+  margin-left: -1px;
+  background-color: var(--cnvs-range-slider-handle_color_1);
+}
+.irs--flat .irs-handle.state_hover > i:first-child, .irs--flat .irs-handle:hover > i:first-child {
+  background-color: var(--cnvs-range-slider-handle_color_2);
+}
+.irs--flat .irs-min,
+.irs--flat .irs-max {
+  top: 0;
+  padding: 1px 3px;
+  color: var(--cnvs-range-slider-minmax_text_color);
+  font-size: 10px;
+  line-height: 1.333;
+  text-shadow: none;
+  background-color: var(--cnvs-range-slider-minmax_bg_color);
+  border-radius: var(--cnvs-range-slider-custom_radius);
+}
+.irs--flat .irs-from,
+.irs--flat .irs-to,
+.irs--flat .irs-single {
+  color: var(--cnvs-range-slider-label_color_2);
+  font-size: 10px;
+  line-height: 1.333;
+  text-shadow: none;
+  padding: 1px 5px;
+  background-color: var(--cnvs-range-slider-label_color_1);
+  border-radius: var(--cnvs-range-slider-custom_radius);
+}
+.irs--flat .irs-from:before,
+.irs--flat .irs-to:before,
+.irs--flat .irs-single:before {
+  position: absolute;
+  display: block;
+  content: "";
+  bottom: -6px;
+  left: 50%;
+  width: 0;
+  height: 0;
+  margin-left: -3px;
+  overflow: hidden;
+  border: 3px solid transparent;
+  border-top-color: var(--cnvs-range-slider-label_color_1);
+}
+.irs--flat .irs-grid-pol {
+  background-color: var(--cnvs-range-slider-grid_color_1);
+}
+.irs--flat .irs-grid-text {
+  color: var(--cnvs-range-slider-grid_color_2);
+}
+.irs--big {
+  height: 55px;
+}
+.irs--big.irs-with-grid {
+  height: 70px;
+}
+.irs--big .irs-line {
+  top: 33px;
+  height: 12px;
+  background-color: white;
+  background: linear-gradient(to bottom, #ddd -50%, white 150%);
+  border: 1px solid #ccc;
+  border-radius: 12px;
+}
+.irs--big .irs-bar {
+  top: 33px;
+  height: 12px;
+  background-color: #92bce0;
+  border: 1px solid #428bca;
+  background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
+  box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
+}
+.irs--big .irs-bar--single {
+  border-radius: 12px 0 0 12px;
+}
+.irs--big .irs-shadow {
+  height: 1px;
+  bottom: 16px;
+  background-color: rgba(66, 139, 202, 0.5);
+}
+.irs--big .irs-handle {
+  top: 25px;
+  width: 30px;
+  height: 30px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  background-color: #cbcfd5;
+  background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
+  border-radius: 30px;
+}
+.irs--big .irs-handle.state_hover,
+.irs--big .irs-handle:hover {
+  border-color: rgba(0, 0, 0, 0.45);
+  background-color: #939ba7;
+  background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%);
+}
+.irs--big .irs-min,
+.irs--big .irs-max {
+  top: 0;
+  padding: 1px 5px;
+  color: white;
+  text-shadow: none;
+  background-color: #9f9f9f;
+  border-radius: 3px;
+}
+.irs--big .irs-from,
+.irs--big .irs-to,
+.irs--big .irs-single {
+  color: white;
+  text-shadow: none;
+  padding: 1px 5px;
+  background-color: #428bca;
+  background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
+  border-radius: 3px;
+}
+.irs--big .irs-grid-pol {
+  background-color: #428bca;
+}
+.irs--big .irs-grid-text {
+  color: #428bca;
+}
+.irs--modern {
+  height: 55px;
+}
+.irs--modern.irs-with-grid {
+  height: 55px;
+}
+.irs--modern .irs-line {
+  top: 25px;
+  height: 5px;
+  background-color: #d1d6e0;
+  background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
+  border: 1px solid #a3adc1;
+  border-bottom-width: 0;
+  border-radius: 5px;
+}
+.irs--modern .irs-bar {
+  top: 25px;
+  height: 5px;
+  background: #20b426;
+  background: linear-gradient(to bottom, #20b426 0%, #18891d 100%);
+}
+.irs--modern .irs-bar--single {
+  border-radius: 5px 0 0 5px;
+}
+.irs--modern .irs-shadow {
+  height: 1px;
+  bottom: 21px;
+  background-color: rgba(209, 214, 224, 0.5);
+}
+.irs--modern .irs-handle {
+  top: 37px;
+  width: 12px;
+  height: 13px;
+  border: 1px solid #a3adc1;
+  border-top-width: 0;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 3px 3px;
+}
+.irs--modern .irs-handle > i:nth-child(1) {
+  position: absolute;
+  display: block;
+  top: -4px;
+  left: 1px;
+  width: 6px;
+  height: 6px;
+  border: 1px solid #a3adc1;
+  background: white;
+  transform: rotate(45deg);
+}
+.irs--modern .irs-handle > i:nth-child(2) {
+  position: absolute;
+  display: block;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 10px;
+  height: 12px;
+  background: #e9e6e6;
+  background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
+  border-radius: 0 0 3px 3px;
+}
+.irs--modern .irs-handle > i:nth-child(3) {
+  position: absolute;
+  display: block;
+  box-sizing: border-box;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: 5px;
+  border-left: 1px solid #a3adc1;
+  border-right: 1px solid #a3adc1;
+}
+.irs--modern .irs-handle.state_hover,
+.irs--modern .irs-handle:hover {
+  border-color: #7685a2;
+  background: #c3c7cd;
+  background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%);
+}
+.irs--modern .irs-handle.state_hover > i:nth-child(1),
+.irs--modern .irs-handle:hover > i:nth-child(1) {
+  border-color: #7685a2;
+}
+.irs--modern .irs-handle.state_hover > i:nth-child(3),
+.irs--modern .irs-handle:hover > i:nth-child(3) {
+  border-color: #48536a;
+}
+.irs--modern .irs-min,
+.irs--modern .irs-max {
+  top: 0;
+  font-size: 10px;
+  line-height: 1.333;
+  text-shadow: none;
+  padding: 1px 5px;
+  color: white;
+  background-color: #d1d6e0;
+  border-radius: 5px;
+}
+.irs--modern .irs-from,
+.irs--modern .irs-to,
+.irs--modern .irs-single {
+  font-size: 10px;
+  line-height: 1.333;
+  text-shadow: none;
+  padding: 1px 5px;
+  background-color: #20b426;
+  color: white;
+  border-radius: 5px;
+}
+.irs--modern .irs-from:before,
+.irs--modern .irs-to:before,
+.irs--modern .irs-single:before {
+  position: absolute;
+  display: block;
+  content: "";
+  bottom: -6px;
+  left: 50%;
+  width: 0;
+  height: 0;
+  margin-left: -3px;
+  overflow: hidden;
+  border: 3px solid transparent;
+  border-top-color: #20b426;
+}
+.irs--modern .irs-grid {
+  height: 25px;
+}
+.irs--modern .irs-grid-pol {
+  background-color: #dedede;
+}
+.irs--modern .irs-grid-text {
+  color: silver;
+  font-size: 13px;
+}
+.irs--sharp {
+  height: 50px;
+  font-size: 12px;
+  line-height: 1;
+}
+.irs--sharp.irs-with-grid {
+  height: 57px;
+}
+.irs--sharp .irs-line {
+  top: 30px;
+  height: 2px;
+  background-color: black;
+  border-radius: 2px;
+}
+.irs--sharp .irs-bar {
+  top: 30px;
+  height: 2px;
+  background-color: #ee22fa;
+}
+.irs--sharp .irs-bar--single {
+  border-radius: 2px 0 0 2px;
+}
+.irs--sharp .irs-shadow {
+  height: 1px;
+  bottom: 21px;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.irs--sharp .irs-handle {
+  top: 25px;
+  width: 10px;
+  height: 10px;
+  background-color: #a804b2;
+}
+.irs--sharp .irs-handle > i:first-child {
+  position: absolute;
+  display: block;
+  top: 100%;
+  left: 0;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-top-color: #a804b2;
+}
+.irs--sharp .irs-handle.state_hover,
+.irs--sharp .irs-handle:hover {
+  background-color: black;
+}
+.irs--sharp .irs-handle.state_hover > i:first-child,
+.irs--sharp .irs-handle:hover > i:first-child {
+  border-top-color: black;
+}
+.irs--sharp .irs-min,
+.irs--sharp .irs-max {
+  color: white;
+  font-size: 14px;
+  line-height: 1;
+  top: 0;
+  padding: 3px 4px;
+  opacity: 0.4;
+  background-color: #a804b2;
+  border-radius: 2px;
+}
+.irs--sharp .irs-from,
+.irs--sharp .irs-to,
+.irs--sharp .irs-single {
+  font-size: 14px;
+  line-height: 1;
+  text-shadow: none;
+  padding: 3px 4px;
+  background-color: #a804b2;
+  color: white;
+  border-radius: 2px;
+}
+.irs--sharp .irs-from:before,
+.irs--sharp .irs-to:before,
+.irs--sharp .irs-single:before {
+  position: absolute;
+  display: block;
+  content: "";
+  bottom: -6px;
+  left: 50%;
+  width: 0;
+  height: 0;
+  margin-left: -3px;
+  overflow: hidden;
+  border: 3px solid transparent;
+  border-top-color: #a804b2;
+}
+.irs--sharp .irs-grid {
+  height: 25px;
+}
+.irs--sharp .irs-grid-pol {
+  background-color: #dedede;
+}
+.irs--sharp .irs-grid-text {
+  color: silver;
+  font-size: 13px;
+}
+.irs--round {
+  height: 50px;
+}
+.irs--round.irs-with-grid {
+  height: 65px;
+}
+.irs--round .irs-line {
+  top: 36px;
+  height: 4px;
+  background-color: var(--cnvs-range-slider-bar_color);
+  border-radius: 4px;
+}
+.irs--round .irs-bar {
+  top: 36px;
+  height: 4px;
+  background-color: var(--cnvs-range-slider-bar_color);
+}
+.irs--round .irs-bar--single {
+  border-radius: 4px 0 0 4px;
+}
+.irs--round .irs-shadow {
+  height: 4px;
+  bottom: 21px;
+  background-color: rgba(222, 228, 236, 0.5);
+}
+.irs--round .irs-handle {
+  top: 26px;
+  width: 24px;
+  height: 24px;
+  border: 4px solid var(--cnvs-range-slider-bar_color);
+  background-color: white;
+  border-radius: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
+}
+.irs--round .irs-handle.state_hover,
+.irs--round .irs-handle:hover {
+  background-color: #f0f6ff;
+}
+.irs--round .irs-min,
+.irs--round .irs-max {
+  color: #333;
+  font-size: 14px;
+  line-height: 1;
+  top: 0;
+  padding: 3px 5px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+.irs--round .irs-from,
+.irs--round .irs-to,
+.irs--round .irs-single {
+  font-size: 14px;
+  line-height: 1;
+  text-shadow: none;
+  padding: 3px 5px;
+  background-color: var(--cnvs-range-slider-bar_color);
+  color: white;
+  border-radius: 4px;
+}
+.irs--round .irs-from:before,
+.irs--round .irs-to:before,
+.irs--round .irs-single:before {
+  position: absolute;
+  display: block;
+  content: "";
+  bottom: -6px;
+  left: 50%;
+  width: 0;
+  height: 0;
+  margin-left: -3px;
+  overflow: hidden;
+  border: 3px solid transparent;
+  border-top-color: var(--cnvs-range-slider-bar_color);
+}
+.irs--round .irs-grid {
+  height: 25px;
+}
+.irs--round .irs-grid-pol {
+  background-color: #dedede;
+}
+.irs--round .irs-grid-text {
+  color: silver;
+  font-size: 13px;
+}
+.irs--square {
+  height: 50px;
+}
+.irs--square.irs-with-grid {
+  height: 60px;
+}
+.irs--square .irs-line {
+  top: 31px;
+  height: 4px;
+  background-color: #dedede;
+}
+.irs--square .irs-bar {
+  top: 31px;
+  height: 4px;
+  background-color: black;
+}
+.irs--square .irs-shadow {
+  height: 2px;
+  bottom: 21px;
+  background-color: #dedede;
+}
+.irs--square .irs-handle {
+  top: 25px;
+  width: 16px;
+  height: 16px;
+  border: 3px solid black;
+  background-color: white;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.irs--square .irs-handle.state_hover,
+.irs--square .irs-handle:hover {
+  background-color: #f0f6ff;
+}
+.irs--square .irs-min,
+.irs--square .irs-max {
+  color: #333;
+  font-size: 14px;
+  line-height: 1;
+  top: 0;
+  padding: 3px 5px;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.irs--square .irs-from,
+.irs--square .irs-to,
+.irs--square .irs-single {
+  font-size: 14px;
+  line-height: 1;
+  text-shadow: none;
+  padding: 3px 5px;
+  background-color: black;
+  color: white;
+}
+.irs--square .irs-grid {
+  height: 25px;
+}
+.irs--square .irs-grid-pol {
+  background-color: #dedede;
+}
+.irs--square .irs-grid-text {
+  color: silver;
+  font-size: 11px;
+}
+
+/*# sourceMappingURL=ion.rangeslider.css.map */

public/css/components/prism.css

@@ -0,0 +1 @@
+code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

public/css/components/radio-checkbox-vars.css

@@ -0,0 +1,99 @@
+/* Style-1 + Style-2 */
+.checkbox-style,
+.radio-style {
+	opacity: 0;
+	position: absolute;
+}
+
+.checkbox-style, .radio-style,
+.checkbox-style-1-label, .radio-style-1-label,
+.checkbox-style-2-label, .radio-style-2-label,
+.checkbox-style-3-label, .radio-style-3-label {
+	display: inline-block;
+	vertical-align: middle;
+	margin: 5px;
+	cursor: pointer;
+}
+
+.checkbox-style-1-label, .radio-style-1-label,
+.checkbox-style-2-label, .radio-style-2-label,
+.checkbox-style-3-label, .radio-style-3-label { position: relative; }
+
+.checkbox-style-1-label:before, .radio-style-1-label:before,
+.checkbox-style-2-label:before, .radio-style-2-label:before,
+.checkbox-style-3-label:before, .radio-style-3-label:before {
+	content: '';
+	background: #FFF;
+	border: 2px solid #DDD;
+	display: inline-block;
+	vertical-align: middle;
+	width: 24px;
+	height: 24px;
+	padding: 4px;
+	margin-right: 10px;
+	line-height: 1;
+	text-align: center;
+}
+
+.radio-style-1-label:before,
+.radio-style-2-label:before,
+.radio-style-3-label:before { border-radius: 50%; }
+
+.checkbox-style:checked + .checkbox-style-1-label:before {
+	background: #1ABC9C;
+	background: var(--themecolor);
+}
+.radio-style:checked + .radio-style-1-label:before { background: #CCC; }
+
+/* Checkbox-small + Radio-small */
+.checkbox-style-1-label.checkbox-small:before,
+.radio-style-1-label.radio-small:before,
+.checkbox-style-2-label.checkbox-small:before,
+.radio-style-2-label.radio-small:before,
+.checkbox-style-3-label.checkbox-small:before,
+.radio-style-3-label.radio-small:before {
+	border: 2px solid #DDD;
+	width: 16px;
+	height: 16px;
+	margin: 0 8px 1px 0;
+}
+
+/* Style-2 */
+.checkbox-style:checked + .checkbox-style-2-label:before {
+	background: #1ABC9C;
+	background: var(--themecolor);
+	box-shadow: inset 0px 0px 0px 4px #fff;
+}
+
+.radio-style:checked + .radio-style-2-label:before {
+	background: #ccc;
+	box-shadow: inset 0px 0px 0px 4px #fff;
+}
+
+.checkbox-style:checked + .checkbox-style-2-label.checkbox-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
+.radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
+
+/* style-3 */
+.checkbox-style:checked + .checkbox-style-3-label:before,
+.radio-style:checked + .radio-style-3-label:before {
+	content: "\e116";
+	font-family: 'lined-icons';
+	background: #1ABC9C;
+	background: var(--themecolor);
+	color: #FFF;
+}
+.radio-style:checked + .radio-style-3-label:before {
+	color: #BBB;
+	background-color: transparent;
+}
+
+/* style-3 - Small */
+.checkbox-style + .checkbox-style-3-label.checkbox-small:before,
+.radio-style + .radio-style-3-label.radio-small:before {
+	border: 1px solid #BBB;
+	width: 16px;
+	height: 16px;
+	margin: 0 8px 1px 0;
+	font-size: 7px;
+	line-height: .8;
+}

public/css/components/radio-checkbox.css

@@ -0,0 +1,93 @@
+/* Style-1 + Style-2 */
+.checkbox-style,
+.radio-style {
+	opacity: 0;
+	position: absolute;
+}
+
+.checkbox-style, .radio-style,
+.checkbox-style-1-label, .radio-style-1-label,
+.checkbox-style-2-label, .radio-style-2-label,
+.checkbox-style-3-label, .radio-style-3-label {
+	display: inline-block;
+	vertical-align: middle;
+	margin: 5px;
+	cursor: pointer;
+}
+
+.checkbox-style-1-label, .radio-style-1-label,
+.checkbox-style-2-label, .radio-style-2-label,
+.checkbox-style-3-label, .radio-style-3-label { position: relative; }
+
+.checkbox-style-1-label:before, .radio-style-1-label:before,
+.checkbox-style-2-label:before, .radio-style-2-label:before,
+.checkbox-style-3-label:before, .radio-style-3-label:before {
+	content: '';
+	background: #FFF;
+	border: 2px solid #DDD;
+	display: inline-block;
+	vertical-align: middle;
+	width: 24px;
+	height: 24px;
+	margin-right: 10px;
+	line-height: 20px;
+	text-align: center;
+}
+
+.radio-style-1-label:before,
+.radio-style-2-label:before,
+.radio-style-3-label:before { border-radius: 50%; }
+
+.checkbox-style:checked + .checkbox-style-1-label:before { background: var(--cnvs-themecolor); }
+.radio-style:checked + .radio-style-1-label:before { background: #CCC; }
+
+/* Checkbox-small + Radio-small */
+.checkbox-style-1-label.checkbox-small:before,
+.radio-style-1-label.radio-small:before,
+.checkbox-style-2-label.checkbox-small:before,
+.radio-style-2-label.radio-small:before,
+.checkbox-style-3-label.checkbox-small:before,
+.radio-style-3-label.radio-small:before {
+	border: 2px solid #DDD;
+	width: 16px;
+	height: 16px;
+	margin: 0 8px 1px 0;
+}
+
+/* Style-2 */
+.checkbox-style:checked + .checkbox-style-2-label:before {
+	background: var(--cnvs-themecolor);
+	box-shadow: inset 0px 0px 0px 4px #fff;
+}
+
+.radio-style:checked + .radio-style-2-label:before {
+	background: #ccc;
+	box-shadow: inset 0px 0px 0px 4px #fff;
+}
+
+.checkbox-style:checked + .checkbox-style-2-label.checkbox-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
+.radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
+
+/* style-3 */
+.checkbox-style:checked + .checkbox-style-3-label:before,
+.radio-style:checked + .radio-style-3-label:before {
+	content: "\F633";
+	font-family: "bootstrap-icons";
+	background: var(--cnvs-themecolor);
+	color: #FFF;
+}
+.radio-style:checked + .radio-style-3-label:before {
+	color: #BBB;
+	background-color: transparent;
+}
+
+/* style-3 - Small */
+.checkbox-style + .checkbox-style-3-label.checkbox-small:before,
+.radio-style + .radio-style-3-label.radio-small:before {
+	border: 1px solid #BBB;
+	width: 16px;
+	height: 16px;
+	margin: 0 8px 1px 0;
+	font-size: 7px;
+	line-height: .8;
+}

public/css/custom.css

@@ -0,0 +1,30 @@
+/* ----------------------------------------------------------------
+	Custom CSS
+
+	Add all your Custom Styled CSS here for New Styles or
+	Overwriting Default Theme Styles for Better Handling Updates
+-----------------------------------------------------------------*/
+
+/* Turnstile widget: form genişliğinde ölçeklenir (--turnstile-scale composable ile set edilir) */
+.turnstile-form-widget {
+  width: 100%;
+  --turnstile-scale: 1;
+  min-height: calc(65px * var(--turnstile-scale));
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0.5rem 0;
+}
+
+.turnstile-form-widget > div {
+  width: 300px;
+  height: 65px;
+  flex-shrink: 0;
+  transform-origin: left center;
+  transform: scale(var(--turnstile-scale));
+}
+
+.turnstile-form-widget iframe {
+  border-radius: 4px;
+}
+

public/css/font-icons.css

@@ -0,0 +1,175 @@
+@import url("/css/icons/font-awesome.css"); /* Ref: https://fontawesome.com/search?o=r&m=free */
+@import url("/css/icons/bootstrap-icons.css"); /* Ref: https://icons.getbootstrap.com/#icons */
+@import url("/css/icons/unicons.css"); /* Ref: https://iconscout.com/unicons/explore/line */
+
+[class*="fa-"],
+[class*=" fa-"],
+[class*="bi-"],
+[class*=" bi-"],
+[class*="uil-"],
+[class*=" uil-"] {
+	display: inline-block;
+	line-height: inherit;
+	font-display: swap;
+}
+
+[class*="fa-"]::before,
+[class*=" fa-"]::before,
+[class*="bi-"]::before,
+[class*=" bi-"]::before,
+[class*="uil-"]::before,
+[class*=" uil-"]::before {
+	display: inline-flex;
+	align-self: center;
+	justify-self: center;
+	line-height: inherit;
+}
+
+.icon-lg {
+	font-size: 1.3333333333333333em;
+	line-height: 0.75em;
+	vertical-align: -15%;
+}
+.icon-2x {
+	font-size: 2em;
+}
+.icon-3x {
+	font-size: 3em;
+}
+.icon-4x {
+	font-size: 4em;
+}
+.icon-5x {
+	font-size: 5em;
+}
+.icon-fw {
+	width: 1.2857142857142858em;
+	text-align: center;
+}
+
+.icon-border {
+	padding: 0.2em 0.25em 0.15em;
+	border: solid 0.08em #eeeeee;
+	border-radius: 0.1em;
+}
+.icon.pull-left {
+	margin-right: 0.3em;
+}
+.icon.pull-right {
+	margin-left: 0.3em;
+}
+.icon-spin {
+	-webkit-animation: spin 2s infinite linear;
+	-moz-animation: spin 2s infinite linear;
+	-o-animation: spin 2s infinite linear;
+	animation: spin 2s infinite linear;
+}
+@-moz-keyframes spin {
+	0% {
+		-moz-transform: rotate(0deg);
+	}
+	100% {
+		-moz-transform: rotate(359deg);
+	}
+}
+@-webkit-keyframes spin {
+	0% {
+		-webkit-transform: rotate(0deg);
+	}
+	100% {
+		-webkit-transform: rotate(359deg);
+	}
+}
+@-o-keyframes spin {
+	0% {
+		-o-transform: rotate(0deg);
+	}
+	100% {
+		-o-transform: rotate(359deg);
+	}
+}
+@-ms-keyframes spin {
+	0% {
+		-ms-transform: rotate(0deg);
+	}
+	100% {
+		-ms-transform: rotate(359deg);
+	}
+}
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(359deg);
+	}
+}
+.icon-rotate-90 {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+	-webkit-transform: rotate(90deg);
+	-moz-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	-o-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+.icon-rotate-180 {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+	-webkit-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+	transform: rotate(180deg);
+}
+.icon-rotate-270 {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+	-webkit-transform: rotate(270deg);
+	-moz-transform: rotate(270deg);
+	-ms-transform: rotate(270deg);
+	-o-transform: rotate(270deg);
+	transform: rotate(270deg);
+}
+.icon-flip-horizontal {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+	-webkit-transform: scale(-1, 1);
+	-moz-transform: scale(-1, 1);
+	-ms-transform: scale(-1, 1);
+	-o-transform: scale(-1, 1);
+	transform: scale(-1, 1);
+}
+.icon-flip-vertical {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
+	-webkit-transform: scale(1, -1);
+	-moz-transform: scale(1, -1);
+	-ms-transform: scale(1, -1);
+	-o-transform: scale(1, -1);
+	transform: scale(1, -1);
+}
+.icon-stacked {
+	position: relative;
+	display: inline-block;
+	width: 2em;
+	height: 2em;
+	line-height: 2em;
+	vertical-align: middle;
+}
+.icon-stacked-1x,
+.icon-stacked-2x {
+	position: absolute;
+	left: 0;
+	width: 100%;
+	text-align: center;
+}
+.rtl .icon-stacked-1x,
+.rtl .icon-stacked-2x {
+	left: auto;
+	right: 0;
+}
+.icon-stacked-1x {
+	line-height: inherit;
+}
+.icon-stacked-2x {
+	font-size: 2em;
+}
+.icon-inverse {
+	color: #ffffff;
+}