-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
150 lines (137 loc) · 13.5 KB
/
index.html
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app">
<section class="content-block content-top"></section>
<div class="experience" id="experience">
<div class="experience__inner">
<div class="experience__container">
<h2>AI-driven optimization for<br/><strong>maximum efficiency</strong></h2>
<h2>DeepSea takes <strong>data</strong> from<br/>your <strong>vessel</strong></h2>
<h2>With AI, we create an<br/><strong>accurate vessel model</strong> in the cloud</h2>
<h2>which is updated, live,<br/>to exactly match your<br/><strong>vessel's state</strong></h2>
<h2>Helping you run more<br/><strong>efficient vessels</strong></h2>
<h2>and more efficient voyages,<br/><strong>custom-planned for each vessel</strong></h2>
</div>
<div class="experience__progress progress">
<div class="progress__bar"></div>
<button type="button" class="progress__dot is-active">1</button>
<button type="button" class="progress__dot">2</button>
<button type="button" class="progress__dot">3</button>
<button type="button" class="progress__dot">4</button>
<button type="button" class="progress__dot">5</button>
<button type="button" class="progress__dot">6</button>
<button type="button" class="progress__progress"></button>
</div>
<div class="experience__card card-1">
<p>Detected engine<br><strong>overconsumption</strong></p>
<p><strong>+3</strong><span>%</span><br/>efficiency</p>
</div>
<div class="experience__card card-2">
<p>Clean your hull<br><strong>in 2 months</strong></p>
<p><strong>+5</strong><span>%</span><br/>efficiency</p>
</div>
<div class="experience__card card-3">
<p><strong>Cli rating</strong><br/>improved</p>
<p><strong>+4</strong><span>%</span><br/>efficiency</p>
</div>
<div class="experience__processing">
<p class="js-processing-stage-1">Creating unique model...<span class="js-processing">100</span>%</p>
<p class="experience__processing--2 js-processing-stage-2">
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2946_260)">
<path d="M28.3288 0.119014C29.1999 0.330187 29.8994 0.871319 29.939 1.96678C29.9918 3.04905 29.279 3.93333 28.1968 4.05212C27.0485 4.1841 25.8739 4.1841 24.7256 4.34248C20.4494 4.91001 16.6482 6.5994 13.3486 9.34466C3.3575 17.6464 2.38082 32.6925 10.8674 42.3537C14.4309 46.4188 18.9447 48.9001 24.2769 49.7052C31.2984 50.7743 37.5676 48.9925 42.9657 44.3467C46.5293 41.2714 48.9578 37.4571 50.0928 32.8905C50.502 31.2539 50.6076 29.5249 50.8451 27.8487C50.8847 27.5584 50.8583 27.2548 50.8979 26.9512C51.0431 25.7238 51.8878 24.9847 53.0625 25.0507C54.1579 25.1035 54.963 26.001 54.9498 27.1888C54.9366 29.5777 54.6727 31.9402 53.9863 34.2235C50.9507 44.1751 44.4571 50.7083 34.3868 53.2819C20.9905 56.6739 7.44899 49.3752 2.5788 36.4277C-0.918764 27.136 1.16657 16.3926 7.80534 9.0279C12.7679 3.52419 19.5915 0.435774 26.9693 0.013427C27.4181 -0.0129697 27.8932 0.013427 28.3288 0.119014Z" fill="#00FFFF"/>
<path d="M26.1903 31.9004C26.3223 31.6893 26.4015 31.4781 26.5467 31.3329C34.4393 23.4535 42.3451 15.5741 50.2377 7.69468C50.8316 7.10075 51.4651 6.7048 52.3362 6.86318C53.8144 7.15355 54.4876 8.85613 53.5769 10.0704C53.4449 10.2552 53.2733 10.4135 53.1149 10.5719C44.668 19.0057 36.2079 27.4526 27.7477 35.8863C26.5467 37.0874 25.4116 37.061 24.2634 35.8203C20.9902 32.2568 17.7038 28.7064 14.4306 25.1429C13.5595 24.1926 13.5199 22.9784 14.325 22.1601C15.1565 21.3154 16.4499 21.355 17.321 22.2788C18.5221 23.5459 19.6835 24.8393 20.8714 26.1196C22.5872 27.9937 24.3161 29.8679 26.1903 31.9004Z" fill="#00FFFF"/>
</g>
<defs>
<clipPath id="clip0_2946_260">
<rect width="54.0472" height="54.1" fill="white" transform="translate(0.902344)"/>
</clipPath>
</defs>
</svg>
<span>DeepSea successfully created the AI model</span>
</p>
</div>
<div class="experience__info with-time-icon">
<div class="experience__info-icon">
<svg width="36" height="35" viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.5343 9.35156C34.6359 9.24994 34.7165 9.1293 34.7715 8.99653C34.8265 8.86375 34.8548 8.72145 34.8548 8.57773C34.8548 8.43402 34.8265 8.29172 34.7715 8.15894C34.7165 8.02617 34.6359 7.90553 34.5343 7.80391C34.4327 7.70229 34.312 7.62168 34.1792 7.56668C34.0465 7.51168 33.9042 7.48338 33.7604 7.48338C33.6167 7.48338 33.4744 7.51168 33.3417 7.56668C33.2089 7.62168 33.0882 7.70229 32.9866 7.80391L30.4218 10.3906C28.5774 8.87163 26.3202 7.94016 23.9413 7.71641V5.46875H26.1288C26.4189 5.46875 26.6971 5.35352 26.9022 5.1484C27.1073 4.94328 27.2226 4.66508 27.2226 4.375C27.2226 4.08492 27.1073 3.80672 26.9022 3.6016C26.6971 3.39648 26.4189 3.28125 26.1288 3.28125H19.5663C19.2762 3.28125 18.998 3.39648 18.7929 3.6016C18.5878 3.80672 18.4726 4.08492 18.4726 4.375C18.4726 4.66508 18.5878 4.94328 18.7929 5.1484C18.998 5.35352 19.2762 5.46875 19.5663 5.46875H21.7538V7.72187C6.60537 9.60312 7.53505 31.1719 22.8476 31.7188C33.0577 31.7625 38.6249 19.5453 32.0022 11.9L34.5343 9.35156ZM22.8476 29.5312C20.2368 29.5312 17.733 28.4941 15.887 26.6481C14.0409 24.802 13.0038 22.2982 13.0038 19.6875C13.5507 6.62266 32.1444 6.63359 32.6913 19.6875C32.6913 22.2982 31.6542 24.802 29.8081 26.6481C27.9621 28.4941 25.4583 29.5312 22.8476 29.5312V29.5312Z" fill="white"/>
<path d="M23.9414 17.0352V12.6985C23.9414 12.4084 23.8262 12.1302 23.6211 11.9251C23.4159 11.72 23.1377 11.6047 22.8477 11.6047C22.5576 11.6047 22.2794 11.72 22.0743 11.9251C21.8691 12.1302 21.7539 12.4084 21.7539 12.6985V17.3469C21.7533 17.5517 21.8101 17.7526 21.918 17.9266L26.2492 24.861C26.4071 25.0978 26.651 25.2637 26.9292 25.3236C27.2074 25.3835 27.498 25.3326 27.7393 25.1817C27.9805 25.0308 28.1535 24.7918 28.2215 24.5155C28.2894 24.2391 28.2469 23.9472 28.1031 23.7016L23.9414 17.0352Z" fill="white"/>
<path d="M3.16016 9.84375H11.9102C12.2002 9.84375 12.4784 9.72852 12.6836 9.5234C12.8887 9.31828 13.0039 9.04008 13.0039 8.75C13.0039 8.45992 12.8887 8.18172 12.6836 7.9766C12.4784 7.77148 12.2002 7.65625 11.9102 7.65625H3.16016C2.87008 7.65625 2.59188 7.77148 2.38676 7.9766C2.18164 8.18172 2.06641 8.45992 2.06641 8.75C2.06641 9.04008 2.18164 9.31828 2.38676 9.5234C2.59188 9.72852 2.87008 9.84375 3.16016 9.84375V9.84375Z" fill="white"/>
<path d="M3.16016 15.3125H8.57422C8.8643 15.3125 9.1425 15.1973 9.34762 14.9921C9.55273 14.787 9.66797 14.5088 9.66797 14.2188C9.66797 13.9287 9.55273 13.6505 9.34762 13.4454C9.1425 13.2402 8.8643 13.125 8.57422 13.125H3.16016C2.87008 13.125 2.59188 13.2402 2.38676 13.4454C2.18164 13.6505 2.06641 13.9287 2.06641 14.2188C2.06641 14.5088 2.18164 14.787 2.38676 14.9921C2.59188 15.1973 2.87008 15.3125 3.16016 15.3125V15.3125Z" fill="white"/>
<path d="M3.16016 20.7812H7.70469C7.99477 20.7812 8.27297 20.666 8.47809 20.4609C8.6832 20.2558 8.79844 19.9776 8.79844 19.6875C8.79844 19.3974 8.6832 19.1192 8.47809 18.9141C8.27297 18.709 7.99477 18.5938 7.70469 18.5938H3.16016C2.87008 18.5938 2.59188 18.709 2.38676 18.9141C2.18164 19.1192 2.06641 19.3974 2.06641 19.6875C2.06641 19.9776 2.18164 20.2558 2.38676 20.4609C2.59188 20.666 2.87008 20.7812 3.16016 20.7812V20.7812Z" fill="white"/>
<path d="M3.16016 26.25H8.57422C8.8643 26.25 9.1425 26.1348 9.34762 25.9296C9.55273 25.7245 9.66797 25.4463 9.66797 25.1562C9.66797 24.8662 9.55273 24.588 9.34762 24.3829C9.1425 24.1777 8.8643 24.0625 8.57422 24.0625H3.16016C2.87008 24.0625 2.59188 24.1777 2.38676 24.3829C2.18164 24.588 2.06641 24.8662 2.06641 25.1562C2.06641 25.4463 2.18164 25.7245 2.38676 25.9296C2.59188 26.1348 2.87008 26.25 3.16016 26.25V26.25Z" fill="white"/>
<path d="M11.9102 29.5312H3.16016C2.87008 29.5312 2.59188 29.6465 2.38676 29.8516C2.18164 30.0567 2.06641 30.3349 2.06641 30.625C2.06641 30.9151 2.18164 31.1933 2.38676 31.3984C2.59188 31.6035 2.87008 31.7188 3.16016 31.7188H11.9102C12.2002 31.7188 12.4784 31.6035 12.6836 31.3984C12.8887 31.1933 13.0039 30.9151 13.0039 30.625C13.0039 30.3349 12.8887 30.0567 12.6836 29.8516C12.4784 29.6465 12.2002 29.5312 11.9102 29.5312Z" fill="white"/>
</svg>
</div>
<div class="experience__info-text">
Change headings to <strong>avoid moderate currents</strong>
</div>
<img src="/glow-icon.png" alt="glow">
</div>
<div class="experience__savings">
Saving <strong>5<span>%</span></strong>
</div>
<div class="experience__suggestions">
<p>SUGGESTIONS</p>
<p class="is-strong"><strong>Fast and accurate modeling of individual vessels</strong></p>
<p>Key areas:</p>
<ul>
<li>Cli ratings</li>
<li>Hull fouling</li>
<li>Performance curves</li>
</ul>
</div>
<div class="experience__info with-map-icon">
<div class="experience__info-icon">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1603 8.66962C15.1603 13.3885 9.68366 17.5588 9.68366 17.5588C9.68366 17.5588 4.20703 13.3885 4.20703 8.66962C4.20703 5.70657 6.61675 3.29224 9.68366 3.29224C12.7506 3.29224 15.1603 5.70657 15.1603 8.66962Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.68517 9.76712C10.2901 9.76712 10.7805 9.27578 10.7805 8.66969C10.7805 8.0636 10.2901 7.57227 9.68517 7.57227C9.08024 7.57227 8.58984 8.0636 8.58984 8.66969C8.58984 9.27578 9.08024 9.76712 9.68517 9.76712Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M32.6857 22.9362C32.6857 27.6551 27.2091 31.8254 27.2091 31.8254C27.2091 31.8254 21.7324 27.6551 21.7324 22.9362C21.7324 19.9732 24.1421 17.5588 27.2091 17.5588C30.276 17.5588 32.6857 19.9732 32.6857 22.9362Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.2106 24.0337C27.8155 24.0337 28.3059 23.5424 28.3059 22.9363C28.3059 22.3302 27.8155 21.8389 27.2106 21.8389C26.6056 21.8389 26.1152 22.3302 26.1152 22.9363C26.1152 23.5424 26.6056 24.0337 27.2106 24.0337Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.5039 6.14552C15.7088 5.70655 17.0232 5.48706 18.4471 5.48706C23.9237 5.48706 28.6336 9.21831 30.0575 14.2665" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.8135 28.3136C22.1705 29.1915 20.418 29.6305 18.4464 29.6305C12.9698 29.6305 8.25986 25.8992 6.83594 20.8511" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="experience__info-text">
Change headings to <strong>avoid moderate currents</strong>
</div>
<img src="/glow-icon.png" alt="glow">
</div>
<div class="experience__scroll">
<span>Scroll</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="experience__ship ship">
<svg class="ship__icon" width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.924 9.25689L0.451172 14.0947L5.67942 29.1179H22.1864L27.4 14.2217L13.9373 9.25626V9.26641L13.924 9.25689ZM12.9609 0.981201V2.95759H10.0741V6.90656H7.18726V10.8523L13.5926 8.44615C13.6896 8.40971 13.7919 8.38954 13.8955 8.38646H13.99C14.086 8.39408 14.1805 8.41415 14.2713 8.44615L20.6614 10.912V6.90656H17.7752V2.95759H14.8852V0.981201H12.9609Z" fill="white"/>
</svg>
<div class="ship__name">MV <strong>Pioneer</strong></div>
<div class="ship__info">ETA <strong>3 days</strong></div>
<div class="ship__info">Max speed <strong>21kts</strong></div>
<div class="ship__info">Fouling <strong>2%</strong></div>
</div>
<button class="experience__change js-change-ship">
Change vessel
</button>
</div>
</div>
<section class="snap-block" id="slide-1"></section>
<section class="snap-block" id="slide-2"></section>
<section class="snap-block" id="slide-3"></section>
<section class="snap-block" id="slide-4"></section>
<section class="snap-block" id="slide-5"></section>
<section class="snap-block" id="slide-6"></section>
<section class="content-block">Example Block</section>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>