-
Notifications
You must be signed in to change notification settings - Fork 1
/
alpineday-schedule.html
153 lines (144 loc) · 7.45 KB
/
alpineday-schedule.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
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LUBUS | AlpineTrails - Alpine Day Schedule</title>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="./build/style.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body class="bg-indigo-50">
<div class="flex flex-col items-center justify-start min-w-full min-h-screen px-4 py-8">
<!-- Header -->
<div class="flex flex-col items-center justify-center mb-14">
<a href="./index.html"
class="flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide bg-indigo-800 rounded-md hover:bg-indigo-900 text-indigo-50">
<svg class="w-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
Browse All
</a>
</div>
<!-- Trail-->
<div x-data="alpineday" class="container max-w-xl mx-auto mt-auto mb-12">
<!-- Title -->
<h1 class="mb-1 text-2xl font-medium text-center text-gray-700">Alpine Day 2021</h1>
<span class="block mb-6 text-center text-gray-600" x-text="'Your timezone - ' + Intl.DateTimeFormat().resolvedOptions().timeZone"></span>
<div>
<ul class="flex flex-col space-y-8 flex-nowrap">
<template x-for="(session, index) in alpineday.schedule" :key="index">
<li :key="index" class="flex items-center flex-grow-0">
<span
x-text="new Date(session.at).toLocaleString(Intl.DateTimeFormat().resolvedOptions().locale, { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true})"
:class="{ 'bg-indigo-700 text-white' : session.highlight, 'text-indigo-700 bg-indigo-100 ': !session.highlight }"
class="px-2 py-1 text-sm font-semibold rounded"></span>
<span x-text="session.session" :class="{ 'bg-indigo-100 text-white font-bold' : session.highlight }" class="flex-1 px-4 py-1 text-sm font-medium text-gray-800 rounded-r"></span>
</li>
</template>
</ul>
</div>
</div>
<!-- Footer -->
<div class="flex flex-col items-center mt-auto">
<!-- Source Code -->
<div
class="inline-block mx-auto my-4 text-sm text-gray-500 border border-gray-300 rounded hover:bg-gray-600 hover:text-white">
<a class="flex items-center px-2 py-1 "
href="https://github.com/lubusIN/alpinetrails/blob/main/alpineday-schedule.html" target="_new">
<svg class="w-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
source code
</a>
</div>
<!-- Work with us -->
<div
class="relative flex px-4 py-2 mx-auto overflow-hidden text-sm text-indigo-100 bg-indigo-800 border border-gray-200 rounded-md shadow-2xl">
<span class="flex items-center">
<svg class="w-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clip-rule="evenodd" />
</svg>
Work With Us
</span>
<svg class="w-10 h-10 -my-2 -mr-8 text-indigo-800 transform" fill="currentColor" viewBox="0 0 100 100"
preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<a class="flex items-center px-8 ml-3 -my-2 -mr-4 italic bg-indigo-500 hover:underline"
href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
<!-- Component Data -->
<script>
const alpineday = {
schedule: [
{
session: "Opening Remarks 🚀",
at: "10 June 2021 09:00 EDT",
highlight: true,
},
{
session: "The State Of Alpine by Caleb Porzio",
at: "10 June 2021 09:10 EDT",
},
{
session: "Tips for real-world AlpineJS by Hugo Di Francesco",
at: "10 June 2021 10:00 EDT",
},
{
session: "Building a Better Modal by Austen Cameron",
at: "10 June 2021 10:20 EDT",
},
{
session: "Micro Interactions using AlpineJS by Shruti Balasa",
at: "10 June 2021 10:40 EDT",
},
{
session: "Break ⏳",
at: "10 June 2021 11:00 EDT",
highlight: true,
},
{
session: "How to keep your tech stack simple, have a calm life, and make a million dollars by Justin Jackson & Jon Buda",
at: "10 June 2021 11:20 EDT",
},
{
session: "How To Carve A Spoon (Literally) by Jesse Schutt",
at: "10 June 2021 11:40 EDT",
},
{
session: "From Vue to Alpine: How & Why by Matt Stauffer",
at: "10 June 2021 12:00 EDT",
},
{
session: "Break ⏳",
at: "10 June 2021 12:20 EDT",
highlight: true,
},
{
session: "Live Pairing Session: Building Alpine V3 From Scratch by Adam Wathan",
at: "10 June 2021 12:40 EDT",
},
{
session: "The Future Of Alpine by Caleb Porzio",
at: "10 June 2021 13:15 EDT",
},
{
session: "Closing Remarks & No Plans To Merge After Party 🎉",
at: "10 June 2021 15:00 EDT",
highlight: true,
},
]
}
</script>
</body>
</html>