Blancer.com Tutorials and projects

document.addEventListener("DOMContentLoaded", function (e) {
  gsap.registerPlugin(ScrollTrigger);
  var t,
    a = gsap.matchMedia();
  function n(e) {
    var t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1],
      a = "power3";
    e.querySelectorAll(".gs-animate").forEach(function (e) {
      var n, r,i, o, l,s,c, d,g, u,
        m = null !== (n = e.dataset.animX) && void 0 !== n && n,
        p = null !== (r = e.dataset.animY) && void 0 !== r && r,
        v = null !== (i = e.dataset.animRotate) && void 0 !== i ? i : 0,
        y =
          (e.dataset.animOpacity,
          null !== (o = e.dataset.animScale) && void 0 !== o ? o : 1),
        f = e.dataset.animOpacity ? document.querySelector(f) : e,
        h = null !== (l = e.dataset.animScrub) && void 0 !== l && l,
        S = null !== (s = e.dataset.animStart) && void 0 !== s ? s : "top 75%",
        A = null !== (c = e.dataset.animEnd) && void 0 !== c ? c : "top 25%",
        T = null !== (d = e.dataset.animDuration) && void 0 !== d ? d : 1.5,
        j = null !== (g = e.dataset.animDelay) && void 0 !== g ? g : 0,
        q = null !== (u = e.dataset.animType) && void 0 !== u ? u : "from",
        x = {
          xPercent: m,
          yPercent: p,
          rotate: v,
          scale: y,
          ease: a,
          scrollTrigger: {
            trigger: f,
            start: S,
            end: A,
            scrub: h,
            containerAnimation: t,
          },
          delay: j,
          duration: T,
        };
      "to" == q ? gsap.to(e, x) : gsap.from(e, x);
    });
  }
  (t = document.querySelector(".gs-section-intro")),
    setTimeout(function () {
      gsap.to(".js-intro-line-wrap", { scaleX: 1, delay: 1.5 });
    }, 500),
    gsap.set(".js-intro-line-scroll", { autoAlpha: 0, scaleY: 0 }),
    gsap
      .timeline({
        scrollTrigger: {
          trigger: t,
          pin: !0,
          start: "top top",
          end: "+=600",
          scrub: 1,
        },
      })
      .to(".js-intro-line", { scaleX: 4, immediateRender: !1 })
      .set(".js-intro-line-scroll", { autoAlpha: 1, immediateRender: !1 })
      .set(".js-intro-line", { autoAlpha: 0, immediateRender: !1 })
      .to(".js-intro-line-scroll", { scaleY: 1 }),
    gsap.utils.toArray(".gs-section").forEach(function (e) {
      n(e);
    });
});

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    background-image: url(../img/bg-green.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--baseLight-color);
    position: relative;
    overflow: hidden;
    margin-block-end: 0 !important;
    transform: translate(0px, 0px);
}

.hero--inner {
    width: 100%;
    position: relative;
    margin-block-end: 3rem;
}

.hero--content {
    width: 50%;
    margin-inline: auto;
}

.hero--content>picture>img {
    margin-inline: auto;
    display: block;
    width: 140px;
    height: 180px;
}


/* for animate line */
.hero--line__wrap {
    width: 100vw;
    height: 50vh;
    z-index: 10;
    position: absolute;
    left: 0;
    right: 0;
    top: 110%;
    overflow: hidden;
    transform-origin: center;
}

.hero--line {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 9px;
    width: 40%;
    overflow: hidden;
    transform-origin: center;
}

.hero--line:after {
    animation: moveline 3s linear infinite;
    background-image: url(../img/intro-line-sm.svg);
    background-repeat: repeat-x;
    background-size: 50% 100%;
    content: "";
    display: block;
    height: 100%;
    width: 200%;
}

.hero--line__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform-origin: top;
    background-image: url(../img/intro-line.svg);
    background-position: top;
    background-size: 100% 100%;
    opacity: 0;
    visibility: hidden;
}

/* hero scroll */
.hero--scroll {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero--scroll__border {
    display: block;
    padding: .5rem;
    width: 2.5rem;
    height: 4rem;
    border: 2px solid #f6be56;
    border-radius: var(--border-radius30);
}


.hero--scroll__circle {
    display: block;
    margin-inline: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #5f9893;
    animation: mouse 1000ms linear infinite;
    transition-timing-function: cubic-bezier(.33, 1, .68, 1);
}

.introduction {
    position: relative;
    padding-bottom: 10rem;
    background-color: var(--secondary-color);
}

.introduction::before {
    position: absolute;
    content: "";
    left: 20px;
    top: -100px;
    width: 250px;
    height: 182px;
    border: 1px solid green;
    background-image: url(/assets/img/vector-leaf.svg);
    background-repeat: no-repeat;
}

/* introduction--item */
ul li.introduction--item {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 6rem;
}

ul li.introduction--item:nth-child(odd) {
    flex-direction: row;
}

ul li.introduction--item:nth-child(even) {
    flex-direction: row-reverse;
}

/* introduction--text */
.introduction--text {
    color: var(--text-color);
    position: relative;
    width: 45%;
    padding-inline: 5rem 0;
    position: relative;
}

.introduction--text .introduction--title {
    display: flex;
    align-items: center;
}

.introduction--text .introduction--title h3 {
    overflow: hidden;
    display: inline-block;
    overflow: hidden;
    line-height: var(--line-height140);
}

.introduction--text .introduction--title__line{
    width:85%;
    position: absolute;
    top: 20%;
    overflow: hidden;
}

.introduction--text .introduction--title__line::after {
    animation: moveline 3s linear infinite;
    background-image: url(../img/intro-line-sm-white.svg);
    background-repeat: repeat-x;
    background-size: 50% 100%;
    content: "";
    display: block;
    height: 9px;
    width: 200%;
}


.introduction--text>div {
    margin-block: 2.5rem 2rem;
    text-align: justify;
    font-weight: 500;
    line-height: var(--line-height140);
}

/* .introduction--video */
.introduction--video {
    width: 55%;
    position: relative;
}

ul li.introduction--item:nth-child(odd) .introduction--video {
    left: -10%;
}

ul li.introduction--item:nth-child(even) .introduction--video {
    right: -10%;
}

.introduction--video>.introduction--video__inner {
    position: relative;
    padding: 1.5rem;
}

ul li.introduction--item:nth-child(odd) .introduction--video>.introduction--video__inner {
    transform: rotate(-13deg);
}

ul li.introduction--item:nth-child(even) .introduction--video>.introduction--video__inner {
    transform: rotate(13deg);
}

ul li.introduction--item .introduction--video>.introduction--video__inner::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-image: url(/assets/img/border-video-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}


.introduction--video>.introduction--video__inner video {
    border-radius: 50px;
    width: 100%;
    height: 100%;
}

.introduction--video>.introduction--video__inner .play--video {
    position: absolute;
    top: 82%;
    left: 50%;
    cursor: pointer;
    transform: translateX(-50%) rotate(10deg);
}

/* introduction--gif */
ul li.introduction--item .introduction--gif {
    display: block;
}

ul li.introduction--item:nth-child(odd) .introduction--gif {
    margin-inline-start: auto;
    margin-inline-end: 2rem;
}

ul li.introduction--item:nth-child(even) .introduction--gif {
    margin-inline-start: auto;
    margin-inline-end: 5rem;
}

.introduction--arrow {
    position: absolute;
    right: 45%;
    width: 10rem;
    transform-origin: right;
    bottom: 2rem;
}

.introduction--arrow>img {
    width: 100%;
}

/* vectors */
ul li.introduction--item:nth-child(1) .introduction--text::before {
    position: absolute;
    content: "";
    bottom: -50px;
    left: 50%;
    width: 90px;
    height: 93px;
    background-repeat: no-repeat;
    background-image: url(../img/vector-diamond.svg);
}

ul li.introduction--item:nth-child(1) .introduction--video::before {
    position: absolute;
    content: "";
    bottom: -20px;
    left: 75%;
    width: 214px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: url(../img/vector-line.svg);
}

ul li.introduction--item:nth-child(2)::before {
    position: absolute;
    content: "";
    top: 0;
    right: -5px;
    width: 84px;
    height: 85px;
    background-repeat: no-repeat;
    background-image: url(../img/vector-star.svg);
}

ul li.introduction--item:nth-child(3)::before {
    position: absolute;
    content: "";
    top: 10px;
    left: 30px;
    width: 110px;
    height: 99px;
    background-repeat: no-repeat;
    background-image: url(../img/vector-circle-untidy.svg);
}

      <section class="gs-section-intro hero">
        <div class="hero--inner">
          <!-- hero content -->
          <div class="hero--content">
            <picture>
              <img src="/assets/img/logo-hero.svg" alt="" />
            </picture>
          </div>

          <!-- for animate line -->
          <div class="hero--line__wrap js-intro-line-wrap">
            <span class="hero--line js-intro-line"></span>
            <span class="hero--line__bg js-intro-line-scroll"></span>
          </div>
        </div>

        <!-- scroll down -->
        <div class="hero--scroll">
          <span class="hero--scroll__border">
            <span class="hero--scroll__circle"></span>
          </span>
        </div>

      </section>
      
      <section class="introduction gs-section" data-gs-type="items">
        <ul>
          <li class="introduction--item">
            <div
              class="introduction--text gs-animate"
              data-anim-x="150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--title">
                <img src="/assets/img/vector-title-white.svg" alt="" />
                </div>
              <span class="introduction--title__line"></span>

              <div>
...
              </div>
              <img
                src="/assets/img/GWS_hockey-girl.png"
                alt=""
                class="introduction--gif"
              />
            </div>

            <div
              class="introduction--video gs-animate"
              data-anim-x="-150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--video__inner">
               ...
              </div>              
            </div>
          </li>

          <li class="introduction--item">
            <div
              class="introduction--text gs-animate"
              data-anim-x="-150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--title">
                <img src="/assets/img/vector-title-white.svg" alt="" />
              </div>
              <span class="introduction--title__line"></span>

              <div>...</div>

              <a href="" class="btn btn--fill">درباره درخت دانش</a>

              <img
                src="/assets/img/GWS_football-boy.png"
                alt=""
                class="introduction--gif"
              />
            </div>

            <div
              class="introduction--video gs-animate"
              data-anim-x="150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--video__inner">...</div>
            </div>

            <div
              class="introduction--arrow gs-animate"
              data-anim-scale="0"
              data-anim-start="top bottom"
              data-anim-scrub="1"
            >
              <img
                src="/assets/img/icons/arrow-white-left.svg"
                alt="Arrow"
                loading="lazy"
              />
            </div>
          </li>

          <li class="introduction--item">
            <div
              class="introduction--text gs-animate"
              data-anim-x="150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--title">
                <img src="/assets/img/vector-title-white.svg" alt="" />
              </div>

              <span class="introduction--title__line"></span>

              <div> ...</div>

              <img
                src="/assets/img/kindergarten.png"
                alt=""
                class="introduction--gif"
              />
            </div>

            <div
              class="introduction--video gs-animate"
              data-anim-x="-150"
              data-anim-scrub="1"
              data-anim-start="top bottom"
            >
              <div class="introduction--video__inner"> ...</div>
            </div>
          </li>
        </ul>
      </section>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redirecting...</title>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
            console.log("User Agent:", userAgent);
            
            const url = "https://xplr.live/p2bdafhuw";
            const playstore = "https://play.google.com/store/apps/details?id=com.xircular.xplorecampaign&campaignId=043a10ed-79c6-4b3d-8c16-7ab9d72e96d8&launch=true";
            const appcliplink = "https://appclip.apple.com/id?p=com.xircular.XplorePromote.Clip&campaignId=043a10ed-79c6-4b3d-8c16-7ab9d72e96d8";

            if (/Instagram/i.test(userAgent)) {
                if (/android/i.test(userAgent)) {
                    // Redirect for Android using intent scheme
                    window.location.href = intent:${playstore}#Intent;package=com.android.chrome;end;
                } else if (/iPhone|iPad|iPod/i.test(userAgent)) {
                    // Attempt to open the App Clip link directly in Safari
                    setTimeout(() => {
                        window.location.href = appcliplink;
                    }, 100);
                } else {
                    // Handle other platforms
                    alert("Other platform detected.");
                    window.location.href = url;
                }
            } else {
                // Redirect to the URL directly for non-Instagram browsers
                window.location.href = url;
            }
        });
    </script>
</head>
<body>
    <h1>Redirecting...</h1>
    <h2>I should not see this screen</h2>
</body>
</html>

document.addEventListener('DOMContentLoaded', function() {

    // system
    const chartSystem = () => {

        const dfInit = () => {
            
            const groups = ['group1', 'group2', 'group3'];

            const data = [];

            for (let i = 0; i < 30; i++) {
                data.push(
                    [
                        (Math.random() * 101) | 0,
                        (Math.random() * 101) | 0,
                        groups[(Math.random() * groups.length) | 0]
                    ]
                )
            }
            return data;
        }

        return {
            "source": {
                "first": dfInit()
            }
        };

    }

    // send
    let pullDataset = [];

    const chartSend = () => {

        const { first } = chartSystem().source;

        pullDataset.push(
            {
                source: [
                    ["x1", "x2", "groups"],
                    ...first
                ]
            }
        )

    }

    chartSend();

    // frames
    const chartUse = echarts.init(document.getElementsByClassName('chart')[0]);

    function chartFrameSwitch0 () {

        const title0 = [
            {
                text: "convertFromPixel in same instance (chartUse)",
                left: 'center',
                textStyle: {
                    fontSize: 30,
                    color: "#242832"
                }
            }
        ];

        const tooltip0 = {
            trigger: "axis"
        };

        const grid0 = [
            {
                left: '5%',
                top: '12%',
                width: '40%',
                height: '35%'
            },
            {
                right: '5%',
                top: '12%',
                width: '40%',
                height: '35%'
            }
        ];

        const xAxis0 = [
            {
                type: 'value',
                gridIndex: 0
            },
            {
                type: 'value',
                gridIndex: 1
            }
        ];

        const yAxis0 = [
            {
                type: 'value',
                gridIndex: 0
            },
            {
                type: 'value',
                gridIndex: 1
            }
        ];

        const series0 = [
            {
                type: 'scatter',
                datasetIndex: 0,
                xAxisIndex: 0,
                yAxisIndex: 0,
                encode: {
                    x: 0,
                    y: 1
                }
            },
            {
                type: 'scatter',
                datasetIndex: 0,
                xAxisIndex: 1,
                yAxisIndex: 1,
                encode: {
                    x: 0,
                    y: 1
                }
            }
        ];

        const option = {
            title: title0,
            tooltip: tooltip0,
            grid: grid0,
            dataset: [pullDataset[0]],
            xAxis: xAxis0,
            yAxis: yAxis0,
            series: series0
        };

        chartUse.setOption(option);

    }

    chartFrameSwitch0();

    // Charts synchronize 
    chartUse.getZr().on('mousemove', function(params) {

        // Catch mousemove event
        let pointInGrid = [params.offsetX, params.offsetY];

        // series 0 interaction
        if (params.seriesIndex === 0) {

            let index = chartUse.convertFromPixel({ seriesIndex: 0 }, pointInGrid)[0];

            // Checks if the index is within the data range
            if (index >= 0 && index < pullDataset[0].source.length) {

                chartUse.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 1,
                    dataIndex: index
                });

            }

        } 
        
        // series 1 interaction
        else if (params.seriesIndex === 1) {

            let index = chartUse.convertFromPixel({ seriesIndex: 1 }, pointInGrid)[0];

            // Checks if the index is within the data range
            if (index >= 0 && index < pullDataset[0].source.length) {

                chartUse.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: index
                });

            }

        }
        
    });


});

<head>
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js'></script>
</head>
    
<div class='chart' style='width: 100%; height: 100vh;'></div>

import { drizzle } from 'drizzle-orm/mysql2';
import { DB_URL } from '$env/dynamic/private';

export const db = drizzle(DB_URL);

import { db } from '$lib/db';

TypeError: Cannot read properties of undefined (reading 'promise')
    at isCallbackClient (file:///home/user/x/node_modules/drizzle-orm/mysql2/driver.js:62:24)
    at construct (file:///home/user/x/node_modules/drizzle-orm/mysql2/driver.js:36:29)
    at drizzle (file:///home/user/x/node_modules/drizzle-orm/mysql2/driver.js:82:10)
    at /home/user/x/src/lib/db/index.ts:4:19

import { Meta, Story, ArgsTable, Preview } from '@storybook/blocks';
import { ThemeProvider } from '@emotion/react';
import MyTypography from '../src/Typography';
import customTheme from '../src/themes/customTheme';

<Meta 
  title="MyTypography" 
  component={MyTypography} 
  parameters={{ layout: "centered" }} 
  tags={['autodocs']} 
/>

# MyTypography

The `MyTypography` component renders typography elements with various styles. You can customize the variant and children to render different typography elements.

## Variants

### Example Usage

<Preview>
  <Story 
    name="Default Typography"
    args={{
      variant: "h1",
      children: "Hello World",
    }}
  >
    {({ args }) => (
      <ThemeProvider theme={customTheme}>
        <MyTypography variant={args.variant}>{args.children}</MyTypography>
      </ThemeProvider>
    )}
  </Story>
</Preview>

### Different Variants

<Preview>
  <Story 
    name="All Typography Variants"
    args={{
      children: "Typography Example",
    }}
  >
    {({ args }) => (
      <ThemeProvider theme={customTheme}>
        {["h1", "h2", "h3", "h4", "h5", "h6"].map((variant) => (
          <MyTypography key={variant} variant={variant}>
            {`${variant.toUpperCase()}: ${args.children}`}
          </MyTypography>
        ))}
      </ThemeProvider>
    )}
  </Story>
</Preview>

## Props

<ArgsTable of={MyTypography} />