smithfield-29th-ward/index.html at main · kevinpickett/smithfield-29th-ward · GitHub

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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Smithfield 29th Ward</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Smithfield 29th Ward">
  <meta name="author" content="smithfield29thWard">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
  <link rel="icon" href="home-heart-black.png">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>

<body>
  <!-- Vue app mounts here -->
  <section id="app">

    <!-- Nav -->
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a href="#" class="navbar-item is-size-5">
          <span class="ml-2">Smithfield 29th Ward</span>
        </a>
      </div>
    </nav>

    <!-- Sacrament Meeting -->
    <section class="section pt-2 pb-2">
      <div class="container">
        <h1 class="title">Sacrament Meeting</h1>
        <h2 class="subtitle">
          {{date}}
        </h2>

        <figure class="image is-16by9">
          <iframe class="has-ratio" width="640" height="360" :src="sacramentEmbed" frameborder="0" allowfullscreen></iframe>
        </figure>

        <div class="pt-2">
          <div class="level is-mobile">
            <div class="level-left">
              <p class="subtitle is-6 pt-2">
                <strong>Link:</strong>
                <a :href="sacramentLink" target="_blank" class="is-hidden-touch">{{sacramentLink}}</a>
                <a :href="sacramentLink" class="is-hidden-desktop">{{sacramentLink}}</a>
              </p>
            </div>
             <div class="level-right">
              <button class="button is-ghost" @click="setModal('youtubeEmbedBroken')"><strong>Video Player Issues</strong></button>
            </div>
          </div>
        </div>

        <!-- <div class="container">
          <div class="content">
            <h6 class="subtitle is-6">
              Moving forward the sacrament meeting broadcast is by request only. Please contact the bishop if you are in need of the link.
            </h6>
          </div>
        </div> -->
      </div>
    </section>

    <!-- Goal -->
    <section class="section pt-0 pb-0">
      <hr>
      <div class="container">
        <h1 class="title">Ward Goal</h1>
        <div class="has-text-centered">
          <h6 class="is-size-3 is-italic has-text-weight-light">
            See with our eyes, hear with our ears: recognize the hand of the Lord in our lives.
          </h6>
        </div>
      </div>
    </section>

    <!-- Announcements -->
    <section class="section pt-0 pb-0" v-if="announcements.length > 0">
      <hr>
      <div class="container">
        <div class="content">
          <h1 class="title">Announcements</h1>
          <ul>
            <li v-for="announcement in announcements">
              <h6 class="subtitle is-6">
                {{announcement}}
              </h6>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <!-- Classes -->
    <!-- <section v-if="meetings.length > 0" class="section pt-0 pb-0">
       <hr>
      <div class="container">
        <h1 class="title">Classes</h1>
        <h6 class="subtitle is-6">
          Please contact your instructor if your class is not listed or you do not have a required password.
        </h6>
        <div class="container" id="classes">
          <aside class="menu">
            <div v-for="meeting in meetings">
              <ul class="menu-list">
                <li>
                  <a :href="meeting.link">
                    <span class="has-text-weight-semibold">{{meeting.name + ":"}}</span>
                    <span class="has-text-link" style="word-wrap: break-word;">{{meeting.link}}</span>
                  </a>
                </li>
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </section> -->

    <!-- Class Notes - If they exist -->
    <!-- <section class="section py-1" v-if="hasNotes">
      <div class="container">
        <div class="container" v-for="meeting in meetings">
          <h6 class="subtitle is-6 pt-3" v-if="meeting.hasOwnProperty('note')">
            <strong>{{meeting.note.title}}:</strong> {{meeting.note.text}}
          </h6>
        </div>
        <div class="container pt-4" v-if="haveZoomClass">
          <button class="button is-ghost" @click="setModal('zoomWaitingScreen')"><strong>Zoom Waiting for Host?</strong></button>
        </div>
      </div>
    </section> -->

    <!-- Disclaimer -->
    <section class="section pt-3">
      <hr>
      <div class="container">
        <p class="is-size-7">
          This website is not an official, Church-sponsored website. This website is maintained by the Smithfield 29th Ward technology specialists K. Pickett and J. Bainbridge. Contact us with any issues or questions at smithfield29tech@gmail.com
        </p>
      </div>
    </section>

    <!-- Modal and Modal Content -->
    <!-- <div class="modal is-active" v-if="modalState">
      <div class="modal-background" @click="modalState = false"></div>
      <div class="modal-content">
        <div class="box mx-5">
          <div class="content pt-1">
            <div class="container" v-if="modalType == 'youtubeEmbedBroken'">
              <p class="title mb-2">Broken Embedded Player</p>
              <ul>
                <li>To this point, our Youtube account has not met the requirements to embed the Youtube Live player.</li>
                <li>Link to stream on Youtube: <a :href="sacramentLink" target="_blank">{{sacramentLink}}</a></li>
                <li>We apologize for the confusion.</li>
              </ul>
            </div>
            <div class="container" v-if="modalType == 'zoomWaitingScreen'">
              <p class="title mb-2">Waiting for Meeting to Begin</p>
              <ul>
                <li>We have changed the settings used for our Zoom meetings.</li>
                <li>When you attempt to join, if you are on a screen titled "Waiting for Host to Start Meeting", "Waiting for Meeting to Begin" or something similar, <strong>please wait on that screen.</strong></p>
                <li>When the teacher begins the Zoom meeting, you will automatically join the meeting.</li>
                <li>If you have still not joined the meeting 5 minutes after the meeting was scheduled to begin, please contact the ward technology specialists.</li>
                <li>This will be common if you attempt to join the meeting early.</li>
              </ul>
            </div>
          </div>
        </div>
        <button class="modal-close is-large" aria-label="close" @click="modalState = false"></button>
      </div>
    </div> -->

  <!-- Vue app mounting "section" closing tag -->
  </section>
  <script src="index.js"></script>
</body>

</html>