generated from EsriDevEvents/ds-2024-repo-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (90 loc) · 4.97 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
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>2023 Esri User Conference - Building Web Apps with Calcite Design System</title>
<!-- Calcite imports -->
<script type="module" src="https://js.arcgis.com/calcite-components/1.4.3/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.4.3/calcite.css" />
<!-- Demo imports -->
<script src="./app.js" defer type="module"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<calcite-shell class="calcite-mode-light">
<calcite-navigation slot="header">
<calcite-navigation-logo alt="Application logo" slot="logo"
heading="Building Web Apps with Calcite Design System"
description="Esri User Conference 2023"></calcite-navigation-logo>
<calcite-chip appearance="outline" slot="content-end">
Demo
</calcite-chip>
<calcite-menu slot="content-end">
<calcite-menu-item href="./step-1" icon-start="number-circle-1" text="Layout">
</calcite-menu-item>
<calcite-menu-item href="./step-2" icon-start="number-circle-2" text="Content">
</calcite-menu-item>
<calcite-menu-item href="./step-3" icon-start="number-circle-3" text="Interaction">
</calcite-menu-item>
<calcite-menu-item href="./step-4" icon-start="number-circle-4" text="Theming">
</calcite-menu-item>
</calcite-menu>
<calcite-action-pad slot="content-end" expand-disabled expanded>
<calcite-action id="toggle-modal" text="About" icon="information" text-enabled indicator>
<calcite-tooltip close-on-click placement="bottom" slot="tooltip">About
this application</calcite-tooltip>
</calcite-action>
</calcite-action-pad>
</calcite-navigation>
<calcite-panel>
<div class="text-container">
<h1>Welcome to UC 2023!</h1>
<h2>Building Web Apps with Calcite Design System</h2>
<p>
This demonstration application is a companion resource to the <b>Building Web
Apps with Calcite Design System</b> presentation at
Esri User Conference 2023.
</p>
<calcite-notice open icon="information">
<div slot="message">Follow along by using the Menu Items in the Navigation to walk through the demo
steps to construct
the application.</div>
</calcite-notice>
</div>
</calcite-panel>
<calcite-alert open icon="effects">
<div slot="title">Esri User Conference 2023</div>
<div slot="message">Welcome to beautiful San Diego!</div>
</calcite-alert>
<calcite-modal id="modal" slot="modals">
<div slot="header">About this application</div>
<div slot="content">
<calcite-notice open>
<span slot="message">This demonstration application is a companion resource to the <b>Building Web
Apps with Calcite Design System</b> presentation at Esri User Conference 2023.
</span>
</calcite-notice>
<calcite-link target="_blank"
href="https://developers.arcgis.com/calcite-design-system/foundations/colors/#theming">
Learn about theming</calcite-link> in the <calcite-link target="_blank"
href="https://developers.arcgis.com/calcite-design-system">
Calcite Design System documentation</calcite-link>.
<hr />
<calcite-link target="_blank"
href="https://github.com/EsriDevEvents/building-web-apps-with-calcite-design-system-2023">Application
source code</calcite-link> is available in the
<calcite-link target="_blank" href="https://github.com/EsriDevEvents/">Esri Developer Events
GitHub organization</calcite-link>.
<hr />
<calcite-link target="_blank"
href="https://www.arcgis.com/home/item.html?id=4a8305b53ed7416795fc6a129ec989ee">Alternative Fuel
Stations</calcite-link> and <calcite-link target="_blank"
href="https://www.arcgis.com/home/item.html?id=3a7ecb0dfede4ddea3abc9584328631a">Alternative Fuel
Corridor</calcite-link> data is sourced from Esri Data and Maps /
<calcite-link target="_blank" href="https://livingatlas.arcgis.com/en/home/">ArcGIS Living Atlas of the
World</calcite-link>.
</div>
</calcite-modal>
</calcite-shell>
</body>
</html>