@ozdao/prometheus-framework 0.2.38 → 0.2.40

package/src/components/FieldBig/FieldBig.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pd-thin radius-extra flex-nowrap flex">
+  <div class=" pd-thin radius-extra flex-nowrap flex">
     <Field
       v-model:field="inputField"
       @update:field="updateInput"
@@ -7,9 +7,9 @@
       @input="handleInput"
       @focus="handleFocus"
       @blur="checkInput"
-      class="w-100 t-semi uppercase pd-small p-big"
+      class="w-100 p-medium t-regular uppercase pd-small"
     />
-    <button v-if="action" @click="emitAction" class="w-max hover-bg-black hover-t-white t-black bg-main  button" v-html="action"/>
+    <button v-if="action" @click="emitAction" class="t-medium radius-big uppercase cursor-pointer pd-l-semi pd-r-semi w-max hover-bg-fifth t-semi transition-linear transition-timing-1 t-black bg-main" v-html="action"/>
   </div>
 </template>
 

package/src/components/LocationSelection/LocationSelection.vue

@@ -40,7 +40,7 @@
       :address="position.address" 
       :location="position.location" 
 
-      class=" radius-bl-medium radius-br-medium h-15r o-hidden"
+      class="bg-grey radius-bl-medium radius-br-medium h-15r o-hidden"
 
       @update:country="newCountry => {
         position.country = newCountry;

package/src/components/Navigation/Navigation.vue

@@ -111,4 +111,6 @@ const { t } = useI18n(text)
   color: rgb(var(--main)) !important;
 }
 
+a:hover   { cursor: pointer; color: rgb(var(--main));;} 
+
 </style>

package/src/components/Shader/Shader.vue

@@ -1,123 +1,168 @@
 <template>
-  <canvas ref="refCanvas"></canvas>
+  <canvas id="glcanvas" ref="refCanvas"/>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
-
-let refCanvas = ref(null)
-const vertexShaderSource = `
-  void main() {
-    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
-  }
-`;
-
-const fragmentShaderSource = `
-  precision mediump float;
-
-  #define time (iTime * 0.9)
-
-  vec4 gradient(float f)
-  {
-      vec4 c = vec4(0);
-      f = mod(f, 1.5);
-      for (int i = 0; i < 3; ++i)
-          c[i] = pow(0.5 + 0.5 * sin(2.0 * (f + 0.2 * float(i))), 10.0);
-      return c;
-  }
-
-  float offset(float th)
-  {
-      return 0.5 * sin(25.0 * th) * sin(time);
-  }
-
-  vec4 tunnel(float th, float radius)
-  {
-      return gradient(offset(th + 0.25 * time) + 3.0 * log(3.0 * radius) - time);
-  }
-
-  void main() {
-      vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / iResolution.xy;
-      p.x *= iResolution.x / iResolution.y;
-      gl_FragColor = tunnel(atan(p.y, p.x), 2.0 * length(p));
-  }
-`;
-
-onMounted(() => {
-  const canvas = refCanvas.value;
-  const gl = canvas.getContext("webgl");
-
-  if (!gl) {
-    console.error("Unable to initialize WebGL. Your browser may not support it.");
-    return;
-  }
-
-  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
-  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
-
-  const program = createProgram(gl, vertexShader, fragmentShader);
-
-  gl.useProgram(program);
-
-  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
-  const positionBuffer = gl.createBuffer();
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
-  const positions = new Float32Array([-1, -1, 3, -1, -1, 3]);
-  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
-
-  const vao = gl.createVertexArray();
-  gl.bindVertexArray(vao);
-  gl.enableVertexAttribArray(positionAttributeLocation);
-
-  const size = 2;
-  const type = gl.FLOAT;
-  const normalize = false;
-  const stride = 0;
-  const offset = 0;
-
-  gl.vertexAttribPointer(
-    positionAttributeLocation, size, type, normalize, stride, offset
-  );
-
-  gl.clearColor(0, 0, 0, 0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-
-  gl.useProgram(program);
-  gl.bindVertexArray(vao);
-
-  gl.drawArrays(gl.TRIANGLES, 0, 3);
-});
-
-function createShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.error(gl.getShaderInfoLog(shader));
-    gl.deleteShader(shader);
-    return null;
-  }
-
-  return shader;
-}
-
-function createProgram(gl, vertexShader, fragmentShader) {
-  const program = gl.createProgram();
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    console.error(gl.getProgramInfoLog(program));
-    gl.deleteProgram(program);
-    return null;
-  }
-
-  return program;
-}
+  import {onMounted, ref} from 'vue'
+
+  onMounted(() => {
+      const canvas = document.getElementById('glcanvas');
+      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+
+      const vsSource = `
+        attribute vec4 aVertexPosition;
+        void main() {
+          gl_Position = aVertexPosition;
+        }
+     `;
+
+     // Fragment shader (your GLSL code goes here)
+     const fsSource = `
+        precision mediump float;
+
+       const float PI = 3.14159265358979323846264;
+       const float TWOPI = PI * 2.0;
+       const vec4 WHITE = vec4(0.0, 1.0, 0.533, 1); // Для цвета F6F9F7
+       const vec4 BLACK = vec4(0.0, 0.9, 0.48, 1); // Для цвета EBF2ED
+
+       const int MAX_RINGS = 30;
+       const float RING_DISTANCE = 0.03;
+       const float WAVE_COUNT = 60.0;
+       const float WAVE_DEPTH = 0.08;
+
+       uniform float iTime;
+       uniform vec2 iResolution;
+
+       void main() {
+           float rot = mod(iTime * 0.6, TWOPI);
+           vec2 fragCoord = gl_FragCoord.xy;
+           vec2 pos = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);
+           pos = vec2(3.0 * (pos.x - 0.5), 3.0 * (pos.y - 0.4));
+           float x = pos.x;
+           float y = pos.y;
+
+           bool black = false;
+           float prevRingDist = RING_DISTANCE;
+           for (int i = 0; i < MAX_RINGS; i++) {
+               vec2 center = vec2(0.0, 0.7 - RING_DISTANCE * float(i) * 1.2);
+               float radius = 0.5 + RING_DISTANCE / (pow(float(i + 5), 1.1) * 0.006);
+               float dist = distance(center, pos);
+               dist = pow(dist, 0.3);
+               float ringDist = abs(dist - radius);
+               if (ringDist < RING_DISTANCE * prevRingDist * 7.0) {
+                   float angle = atan(y - center.y, x - center.x);
+                   float thickness = 1.1 * abs(dist - radius) / prevRingDist;
+                   float depthFactor = WAVE_DEPTH * sin((angle + rot * radius) * WAVE_COUNT);
+                   if (dist > radius) {
+                       black = (thickness < RING_DISTANCE * 5.0 - depthFactor * 2.0);
+                   } else {
+                       black = (thickness < RING_DISTANCE * 5.0 + depthFactor);
+                   }
+                   break;
+               }
+               if (dist > radius) break;
+               prevRingDist = ringDist;
+           }
+
+           gl_FragColor = black ? BLACK : WHITE;
+       }
+
+     `;
+
+     function compileShader(gl, type, source) {
+         const shader = gl.createShader(type);
+         gl.shaderSource(shader, source);
+         gl.compileShader(shader);
+
+         // Check for compilation errors
+         if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+             alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+             gl.deleteShader(shader);
+             return null;
+         }
+
+         return shader;
+     }
+
+     const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
+     const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+     // Create the shader program
+     const shaderProgram = gl.createProgram();
+
+     gl.attachShader(shaderProgram, vertexShader);
+     gl.attachShader(shaderProgram, fragmentShader);
+     gl.linkProgram(shaderProgram);
+
+     // Check for linking errors
+     if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+         alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+     }
+
+     function resizeCanvasToDisplaySize(canvas) {
+          const width = canvas.clientWidth * window.devicePixelRatio;
+          const height = canvas.clientHeight * window.devicePixelRatio;
+          if (canvas.width !== width || canvas.height !== height) {
+              canvas.width = width;
+              canvas.height = height;
+              return true; // размер изменился
+          }
+          return false; // размер не изменился
+      }
+
+
+     function render() {
+      if (resizeCanvasToDisplaySize(gl.canvas)) {
+          gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+        }
+        gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
+        gl.clearDepth(1.0);                 // Clear everything
+        gl.enable(gl.DEPTH_TEST);           // Enable depth testing
+        gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
+
+        // Clear the canvas before we start drawing on it
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+        // Set the shader program
+        gl.useProgram(shaderProgram);
+
+        // Set up geometry, attributes, uniforms here
+        // Create a buffer for the square's positions
+        const positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+        // Now create an array of positions for the square
+        const positions = [
+            -1.0,  1.0,
+            1.0,  1.0,
+            -1.0, -1.0,
+            1.0, -1.0,
+        ];
+
+        // Pass the positions to WebGL
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+        // Tell WebGL how to pull out the positions from the position buffer
+        const vertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
+        gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(vertexPosition);
+
+        // Set the shader uniforms
+        var timeUniformLocation = gl.getUniformLocation(shaderProgram, 'iTime');
+        var resolutionUniformLocation = gl.getUniformLocation(shaderProgram, 'iResolution');
+
+        gl.uniform1f(timeUniformLocation, performance.now() / 3000.0);
+        gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
+
+        // Draw the scene
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+        // Call render again on the next frame
+        requestAnimationFrame(render);
+     }
+    requestAnimationFrame(render);
+
+  });
 </script>
 
 <style scoped>

package/src/components/Slider/Slider.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="embla" ref="emblaNode">
+    <div class="embla__container">
+     
+      <div class="embla__slide pd-nano" v-for="(entity, key, index) in entitiesState" :key="key">
+        <transition name="fade" mode="out-in" appear>
+          <!-- <div 
+            v-if="!isLoading && entitiesState.length > 0" 
+            class="h-100 w-100 radius-big flex-center bg-grey"
+          >
+            <Loader class="pos-relative"/>
+          </div>
+   -->
+          <slot
+            :item="entity"
+            :user="user"
+          ></slot>
+        </transition>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
+
+<script setup scoped>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import emblaCarouselVue from 'embla-carousel-vue'
+import Autoplay from 'embla-carousel-autoplay'
+
+import Loader from '@pf/src/components/Loader/Loader.vue'
+
+// Props for customization
+const props = defineProps({
+  store: Object, // Expect a store object with a 'read' function
+  options: Object, // Options to pass to the store's read function
+  text: Object, // Optional: Custom text for i18n
+});
+
+const router = useRouter()
+
+const { t } = useI18n(props.text || {
+  messages: {
+    en: {
+      title: 'Explore Our Collection',
+    },
+  }
+})
+
+const entitiesState = ref([])
+const isLoading = ref(true);
+
+
+const autoplayOptions = {
+  delay: 2000,
+  jump: false,
+  stopOnInteraction: false,
+  stopOnMouseEnter: false,
+  stopOnFocusIn: true,
+  stopOnLastSnap: false,
+  rootNode: (emblaRoot) => emblaRoot.parentElement
+}
+
+const [emblaNode, emblaApi] = emblaCarouselVue({ loop: true }, [Autoplay(autoplayOptions)])
+
+const scrollTo = (index) => emblaApi.value && emblaApi.value.scrollTo(index);
+// const onInit = (embla) =>  scrollSnaps.value = emblaApi.value.scrollSnapList();
+const onSelect = (embla) => selectedIndex.value = emblaApi.value.selectedScrollSnap();
+
+onMounted(async() => {
+  entitiesState.value = await props.store.read({
+    ...props.options
+  });
+
+  console.log(entitiesState.value)
+
+  isLoading.value = false;
+
+  onInit(emblaApi);
+  onSelect(emblaApi);
+
+  emblaApi.value.on('reInit', onInit);
+  emblaApi.value.on('reInit', onSelect);
+  emblaApi.value.on('select', onSelect);
+});
+</script>

package/src/modules/applications/applications.client.js

@@ -0,0 +1,2 @@
+
+import SubscribeNewsletter from './components/sections/SubscribeNewsletter.vue';

package/src/modules/applications/components/sections/SubscribeNewsletter.vue

@@ -0,0 +1,114 @@
+<template>
+  <section class="pd-thin">
+    <div class="pos-relative o-hidden t-black bg-main pd-big radius-big">
+      <div class="pos-relative z-index-1">
+        <header class="t-center z-index-1 mn-b-big">
+          <h2 class="mn-l-auto mn-r-auto  mn-b-medium">Stay Updated with <b>Latest in Cannabis</b></h2>
+          <p class="t-transp p-big">Subscribe to our newsletter for news, insights, and more from the Weeder universe.</p>
+        </header>
+
+        <div class="z-index-1 w-100 flex-nowrap flex"> 
+
+            <!-- v-model:field="store.applications.state.form.data.email"  -->
+          <FieldBig 
+            :input="email" 
+            :typingSpeed="75"
+            :loopTyping="false"
+            :enableTyping="false"
+            placeholder="Please enter your email"
+            action="Subscribe"
+            @update:input="email = $event"
+            @action="sendApplication"
+            class="mn-l-auto mn-r-auto bg-white t-black w-50"
+          />
+        </div>
+      </div>
+
+      <div class="w-100 h-100 pos-absolute pos-b-50-negative pos-r-0 z-index-0 grid">
+        <div class="spiral"></div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+import FieldBig from "@pf/src/components/FieldBig/FieldBig.vue";
+
+import * as globals from '@pf/src/modules/globals/store/globals.js';
+import * as applications from '@pf/src/modules/applications/store/applications.js';
+
+import * as inputsValidation from '@pf/src/modules/middlewares/client/inputs.validation'
+
+
+let email = ref('')
+let emailValidation = ref(false)
+
+async function sendApplication() {
+  try {
+    await inputsValidation.validateInputs(
+      emailValidation, 
+      inputsValidation.validateEmail, 
+      email.value, 
+      'Wrong email'
+    )
+  } catch (error) {
+     globals.setError({
+      response: {
+        status: "Invalid Email", 
+        data: {
+          message: "The email address entered is invalid. Please provide a valid email address."
+        }
+      }
+    });
+    return false
+  }
+
+  gtag('event', 'subscribe_newsletter', {
+    'event_category': 'conversion',
+    'event_label': 'Subscribe Newsletter'
+  });
+
+  try {
+    let application = {
+      type: 'newsletter',
+      contacts: {
+        email: email.value
+      }
+    };
+    const response = await applications.create(application);
+    return Promise.resolve(response.data);
+  } catch (error) {
+    console.log(error)
+    globals.setError(error)
+    return Promise.reject(error);
+  }
+}
+</script>
+
+<style lang="scss">
+.spiral {
+  background-image: url('https://weeder.delivery/spiral.jpg');
+  background-size: cover;
+  width: 100rem;
+  height: 100rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  opacity: 0.03;
+  transform: translate(-50%, -50%) rotate(0deg);
+  transform-origin: center center;
+  animation: spin 5s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+</style>