Porsche-website/carshowcase.html at main · divyanshu-patil/Porsche-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="car-showcase.css">
    <link rel="stylesheet" href="loadingbar.css">
    <link rel="shortcut icon" href="/assets/favicon/favicon_io/favicon.ico" type="image/x-icon">
</head>
<body>

    <div class="cursor">

        <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
            <path   fill="#dadada">
                <animate attributeName="d"
                dur="10000ms"
                repeatCount="indefinite"

               values="M445,305.5Q443,361,403.5,404.5Q364,448,307,453Q250,458,195,449Q140,440,89,406Q38,372,32.5,311Q27,250,61.5,205.5Q96,161,127.5,127Q159,93,204.5,73.5Q250,54,303,60Q356,66,389.5,108Q423,150,435,200Q447,250,445,305.5Z;

               M445.5,304Q438,358,395.5,393Q353,428,301.5,446.5Q250,465,201.5,442Q153,419,100.5,393Q48,367,36.5,308.5Q25,250,39,193Q53,136,99,102.5Q145,69,197.5,58.5Q250,48,302,59Q354,70,402.5,102Q451,134,452,192Q453,250,445.5,304Z;

               M434.5,303.5Q435,357,395.5,395Q356,433,303,440.5Q250,448,205.5,426Q161,404,121,376Q81,348,74.5,299Q68,250,68.5,197.5Q69,145,109,110.5Q149,76,199.5,51Q250,26,304,45Q358,64,405.5,98.5Q453,133,443.5,191.5Q434,250,434.5,303.5Z;

               M461,301.5Q428,353,391.5,392Q355,431,302.5,435.5Q250,440,200.5,430.5Q151,421,93,397.5Q35,374,43,312Q51,250,44.5,189Q38,128,85,86.5Q132,45,191,35.5Q250,26,305,42.5Q360,59,387.5,107Q415,155,454.5,202.5Q494,250,461,301.5Z;

               M443,300.5Q425,351,383,379Q341,407,295.5,445.5Q250,484,201.5,451Q153,418,112.5,385.5Q72,353,42.5,301.5Q13,250,34,193.5Q55,137,101.5,105Q148,73,199,65Q250,57,310.5,49Q371,41,393.5,97.5Q416,154,438.5,202Q461,250,443,300.5Z;

               M451,303.5Q435,357,397,397.5Q359,438,304.5,463Q250,488,204.5,447.5Q159,407,128.5,372.5Q98,338,56.5,294Q15,250,54,204.5Q93,159,117.5,111Q142,63,196,45.5Q250,28,311.5,32Q373,36,406.5,88.5Q440,141,453.5,195.5Q467,250,451,303.5Z;

               M444.5,306Q444,362,405.5,407Q367,452,308.5,452.5Q250,453,199.5,438.5Q149,424,97,396Q45,368,32,309Q19,250,52.5,202.5Q86,155,119,117.5Q152,80,201,61.5Q250,43,294,70Q338,97,374.5,127Q411,157,428,203.5Q445,250,444.5,306Z;

               M445,305.5Q443,361,403.5,404.5Q364,448,307,453Q250,458,195,449Q140,440,89,406Q38,372,32.5,311Q27,250,61.5,205.5Q96,161,127.5,127Q159,93,204.5,73.5Q250,54,303,60Q356,66,389.5,108Q423,150,435,200Q447,250,445,305.5Z;
               ">
            </animate>
            </path>
          </svg>


    </div>

    <div class="overlay">
        <div class="percent"><h1>0%</h1></div>
        <div class="wrapper">

            <div class="progress-bar">
                <div class="wholebar">
                    <div class="indicator"></div>
                </div>
            </div>
                <div class="box1"></div>
                <div class="box2"></div>
                <div class="box3"></div>
        </div>
    </div>
    <div class="name">
        <h1></h1>
    </div>
<!-- points -->
<div class="com">
    <div class="info">
        <h1 class="title"></h1>
        <p class="description"></p>
    </div>
    <div class="point point0 ">
        <div class="label">1</div>
    </div>

    <div class="point point1 ">
        <div class="label">3</div>
        <!-- <h1 class="title"></h1>
        <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, debitis.</p> -->
    </div>
    <div class="point point2 ">
        <div class="label">2</div>
        <!-- <h1 class="title"></h1>
        <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, debitis.</p> -->
    </div>
    <div class=" cross visible">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>
    </div>

</div>


    <canvas class="webgl"></canvas>

    <script id="vertexshader" type="vertex">
        varying vec2 vUv;
        void main(){
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    </script>

    <script id="fragmentshader" type="fragment">
        uniform sampler2D baseTexture;
        uniform sampler2D bloomTexture;
        varying vec2 vUv;
        void main(){
            gl_FragColor = (texture2D(baseTexture, vUv) + vec4(1.0) *  texture2D(bloomTexture, vUv));
        }
    </script>
    <script type="module" src="carShowcase.js"></script>
    <script type="module" src="loading.js"></script>

</body>
</html>