-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
146 lines (128 loc) · 8.46 KB
/
Copy pathindex.html
File metadata and controls
146 lines (128 loc) · 8.46 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StageLeft Theatre Company</title>
<!-- Vue CDN Script -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<header class="container-fluid p-3 bg-dark text-bg-dark">
<h1>StageLeft Theatre Company</h1>
<span>Creativity, Inspiration, and Action!</span>
</header>
<main>
<!-- Slide Images - Structure Inspired by w3schools.com -->
<div id="demo" class="carousel slide shadow" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./images/carousel_theatre_img.jpg" alt="Theatre Seats Image" title="Theatre Seats Image">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./images/carousel_theatre_lights.jpg" alt="Silhouette of People Onstage" title="Silhouette of People Onstage">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./images/carousel_theatre_dancing_drums.jpg" alt="People Onstage with Drums" title="People Onstage with Drums">
</div>
</div>
</div>
<div class="container text-center p-5">
<h2>Theatre Auditions & Events!</h2>
</div>
<div id="introduction" class="container px-5 py-4 card bg-light shadow-lg border-white">
<p>To Act or Not To Act! That is the question...</p>
<p>Welcome to the Events and Auditions page for StageLeft Theatre Company! A well known and respected theatre arts organization in North Texas. We host a wide variety of plays, musicals, and even cabarets. You'll find information on the latest show auditions below and also events to mark your calendars for.</p>
</div>
<!-- Vue Application -->
<div id="app">
<!-- Toggle Buttons -->
<div id="buttonContainer">
<div id="auditionBtn" >
<button @click="toggleAudition" type="button" class="btn btn-primary btn-lg">
<span v-if="auditionShow">Hide Auditions List</span>
<span v-else>Show Auditions List</span>
</button>
</div>
<div id="eventBtn">
<button @click="toggleEvent" type="button" class="btn btn-primary btn-lg">
<span v-if="eventShow">Hide Events List</span>
<span v-else>Show Events List</span>
</button>
</div>
</div>
<div id="listsContainer" class="container-fluid row">
<!-- Auditions List -->
<div v-if="auditionShow" class="col">
<h3>Future Auditions!</h3>
<ul v-for="audition in auditions">
<li class="card bg-secondary text-bg-secondary shadow border-white">
<img class="auditionImages" v-bind:src="audition.auditionImg" v-bind:alt="audition.auditionAlt" v-bind:title="audition.auditionAlt">
<p class="audHeaders"><b>Show Name:</b> {{audition.auditionName}}</p>
<p><b>Running:</b> {{audition.audRunning}}</p>
<p><b>Audition Date:</b> {{audition.audDate}} - Audition Time: {{audition.audTime}}</p>
<p><b>Audition Requirements:</b> {{audition.audDescription}}</p>
</li>
</ul>
</div>
<!-- Events List -->
<div v-if="eventShow" class="col">
<h4>Future StageLeft Events!</h4>
<ul v-for="event in events">
<li class="card bg-secondary text-bg-secondary shadow border-white">
<img class="eventImages" v-bind:src="event.eventImg" v-bind:alt="event.eventAlt" v-bind:title="event.eventAlt">
<p class="eventHeaders"><b>Event:</b> {{event.eventName}}</p>
<p><b>Date:</b> {{event.eventDate}}</p>
<p><b>Time:</b> {{event.eventTime}}</p>
<p><b>Details:</b> {{event.eventDescription}}</p>
</li>
</ul>
</div>
</div>
<!-- Bonus Message Saying Both Are Hidden -->
<div id="warningMsg" class="container-fluid bg-danger text-bg-danger text-center" v-if="eventShow === false && auditionShow === false">
<p>You've hidden both lists.</p>
<p>If you want to see a list, please click on the buttons above!</p>
</div>
</div>
</main>
<footer class="container-fluid bg-dark text-bg-dark">
<div id="footer" class="row p-5">
<div class="col-sm-4">
<h5>StageLeft Theatre Company</h5>
<p>*This website is for educational purposes only - Creating a website using Vue components</p>
<p>Website By: Benjamin Gallegos</p>
</div>
<div class="col-sm-8">
<h6>Credits/Resources</h6>
<p id="creditHeader">Image Credits</p>
<p><a href="https://www.pexels.com/photo/theater-interior-109669/" target="_blank">Theatre Image | Photo by Donald Tong</a></p>
<p><a href="https://www.pexels.com/photo/silhouette-photography-of-people-on-theater-1714361/" target="_blank">Theatre Image with People Onstage | Photo by Wendy Wei</a></p>
<p><a href="https://www.pexels.com/photo/group-of-men-holding-drums-performing-on-stage-2888802/" target="_blank">Dancing Onstage with Drums | Photo by Kosygin Leishangthem</a></p>
<p><a href="https://www.pexels.com/photo/architectural-photography-of-three-pink-blue-and-yellow-buildings-347141/" target="_blank">Mamma Mia Image | Photo by Tirachard Kumtanom</a></p>
<p><a href="https://www.pexels.com/photo/vintage-candle-decor-with-book-and-magnifying-glass-29343080/" target="_blank">Romeo & Juliet Image | Photo by Valeriia Harbuz</a></p>
<p><a href="https://www.pexels.com/photo/microphone-on-stand-2101488/" target="_blank">Winter Cabaret Image | Photo by Katrien Grevendonck</a></p>
<p><a href="https://www.pexels.com/photo/close-up-shot-of-chocolates-on-yellow-background-5469109/" target="_blank">Willy Wonka Image | Photo by Polina Tankilevitch</a></p>
<p><a href="https://www.pexels.com/photo/green-yellow-brown-and-blue-stained-glass-942322/" target="_blank">Stained Glass Image | Photo by Tim Mossholder</a></p>
<p><a href="https://www.pexels.com/photo/people-toasting-wine-glasses-3171837/" target="_blank">Celebration Image | Photo by cottonbro studio</a></p>
<p><a href="https://www.pexels.com/photo/group-of-people-having-a-meeting-6896221/" target="_blank">Group of People Meeting Image | Photo by cottonbro studio</a></p>
<p><a href="https://www.pexels.com/photo/cartoon-movie-showing-on-theater-screen-7991579/" target="_blank">Movie Theatre Projection Screen Image | Photo by Tima Miroshnichenko</a></p>
<p><a href="https://www.pexels.com/photo/selective-focus-photography-of-assorted-coloured-thread-spools-1212179/" target="_blank">Thread Image | Photo by Wendy van Zyl</a></p>
<p><a href="https://www.pexels.com/photo/assorted-sugar-cookies-752503/" target="_blank">Decorating Cookies Image | Photo by Jonathan Meyer</a></p>
</div>
</div>
</footer>
<!-- App.js link -->
<script src="app.js"></script>
</body>
</html>