-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (103 loc) · 6.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="/moxie.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>moxie - Navigate Your Schedule, Conquer Your Day</title>
<meta name="author" content="juashyam">
<meta name="description" content="Basic AlpineJS Calendar">
</head>
<body class="bg-white">
<header class="w-full container mx-auto">
<div class="flex flex-col items-center py-6">
<a class="font-bold text-gray-800 hover:text-gray-700 text-5xl" href="#"><span>moxie</span></a>
<p class="text-lg text-gray-600 py-2"><span>Navigate Your Schedule, Conquer Your Day.</span></p>
</div>
</header>
<div class="container mx-auto flex flex-wrap pb-6">
<section class="calendar-container px-3 w-2/3" x-data="calendar">
<div class="flex flex-col">
<nav class="w-full p-3 bg-gray-800 shadow">
<div class="w-full container mx-auto flex flex-wrap items-center justify-between">
<ul class="flex items-center justify-between font-bold text-sm text-white uppercase no-underline">
<li class="cursor-pointer" x-on:click="gotoPrevMonth()">
<svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 1 1.3 6.326a.91.91 0 0 0 0 1.348L7 13"></path>
</svg>
</li>
<li class="px-3 cursor-pointer">
<button x-on:click="gotoTodayMonth()" type="button" class="bg-gray-800 border border-gray-300 focus:outline-none hover:bg-gray-200 hover:text-gray-800 rounded-lg px-3 py-1.5">Today</button>
</li>
<li class="cursor-pointer" x-on:click="gotoNextMonth()">
<svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1"></path>
</svg>
</li>
</ul>
<div class="flex items-center no-underline text-white text-2xl cursor-default font-bold">
<div class="month-dropdown relative text-sm" x-data="{show: false}" @click.away="show = false">
<button type="button" x-on:click="show = !show" class="flex items-center gap-2 bg-gray-800 border border-gray-300 hover:bg-gray-200 hover:text-gray-800 px-3 py-1.5 rounded-lg">
<span x-text="currentMonthFullName()"></span>
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
</svg>
</button>
<div x-show="show" x-on:click="show = false" x-transition.origin.top.left class="absolute left-0 mt-2 w-40 rounded-md bg-gray-800 shadow-md overflow-y-auto h-80">
<template x-for="month in 12" :key="month">
<span class="flex items-center w-full px-4 py-2.5 text-sm hover:bg-gray-200 hover:text-gray-800 cursor-pointer" :class="{'active': $globals().currentMonth == (month - 1)}" x-data="{monthId: month}" x-bind:data-month="monthId" @click="gotoMonth(parseInt($event.target.getAttribute('data-month')))" x-text="$globals().monthNames[month - 1]"></span>
</template>
</div>
</div>
<div class="year-dropdown relative text-sm pl-3" x-data="{show: false}" @click.away="show = false">
<button type="button" x-on:click="show = !show" class="flex items-center gap-2 bg-gray-800 border border-gray-300 hover:bg-gray-200 hover:text-gray-800 px-3 py-1.5 rounded-lg">
<span x-text="$globals().currentYear"></span>
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
</svg>
</button>
<div x-show="show" x-on:click="show = false" x-data="{years: $range($globals().currentYear - 5, $globals().currentYear + 10)}" x-transition.origin.top.left class="absolute left-0 mt-2 w-40 rounded-md bg-gray-800 shadow-md overflow-y-auto h-80">
<template x-for="y in years" :key="y">
<span class="flex items-center w-full px-4 py-2.5 text-sm hover:bg-gray-200 hover:text-gray-800 cursor-pointer" :class="{'active': $globals().currentYear == y}" x-data="{year: y}" x-bind:data-year="year" @click="gotoYear(parseInt($event.target.getAttribute('data-year')))" x-text="y"></span>
</template>
</div>
</div>
</div>
</div>
</nav>
<div class="bg-white flex flex-col justify-start p-3 shadow">
<table class="table-auto text-md text-left rtl:text-right">
<thead>
<tr>
<template x-for="day in $globals().dayNames">
<th scope="col" class="px-6 py-3 text-center" x-text="day"></th>
</template>
</tr>
</thead>
<tbody x-html="renderCalendar()"></tbody>
</table>
</div>
</div>
</section>
<section class="schedule-container px-3 w-1/3" x-data="schedule">
<div class="flex flex-col">
<nav class="w-full pb-3">
<div class="w-full mx-auto flex flex-wrap items-center justify-between">
<div class="px-3 cursor-pointer">
<span class="text-gray-800 text-xl border-solid border-b-2 border-gray-800 py-3" x-text="title"></span>
<span class="text-gray-800 text-lg py-3" x-text="titleCurrentDate()"></span>
</div>
</div>
</nav>
<div>
<div class="p-3">
<input type="text" class="border-2 border-gray-800 text-gray-800 text-sm p-3 rounded-lg w-full" placeholder="Add an event; ex: Film at 7 PM" @keyup.enter="addSchedule($event.target.value); $event.target.value='';" />
</div>
<ul id="schedules" x-html="renderSchedules()" ></ul>
</div>
</div>
</section>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>