mirror of
https://github.com/tjsga/website-2018.git
synced 2025-04-09 22:10:18 -04:00
303 lines
11 KiB
Handlebars
303 lines
11 KiB
Handlebars
<!doctype html>
|
|
<html lang='en'>
|
|
|
|
<head>
|
|
<style>
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
input {
|
|
color: #525f7f;
|
|
font-family: 'Nunito-Bold', 'Nunito', sans-serif;
|
|
font-weight: 700;
|
|
outline: none;
|
|
text-decoration: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
margin: 10px 0px;
|
|
padding: 10px 20px;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
-webkit-background-clip: padding-box;
|
|
-moz-background-clip: padding;
|
|
background-clip: padding-box;
|
|
display: inline-block;
|
|
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-transform: scale(1, 1);
|
|
-o-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
-webkit-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
-moz-transition: all 0.15s ease;
|
|
-o-transition: all 0.15s ease;
|
|
-webkit-transition: all 0.15s ease;
|
|
transition: all 0.15s ease;
|
|
margin-right: 20px;
|
|
min-width: 250px;
|
|
}
|
|
textarea {
|
|
color: #525f7f;
|
|
font-family: 'Nunito-Bold', 'Nunito', sans-serif;
|
|
font-weight: 700;
|
|
outline: none;
|
|
text-decoration: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
padding: 10px 20px;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
-webkit-background-clip: padding-box;
|
|
-moz-background-clip: padding;
|
|
background-clip: padding-box;
|
|
display: inline-block;
|
|
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-transform: scale(1, 1);
|
|
-o-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
-webkit-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
-moz-transition: all 0.15s ease;
|
|
-o-transition: all 0.15s ease;
|
|
-webkit-transition: all 0.15s ease;
|
|
transition: all 0.15s ease;
|
|
margin-right: 20px;
|
|
width: 90%;
|
|
height: 165px;
|
|
margin-top: 10px;
|
|
}
|
|
textarea::placeholder {
|
|
color: #b8b8d3;
|
|
font-family: 'Nunito', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
textarea:hover {
|
|
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-transform: scale(1.01, 1.01);
|
|
-o-transform: scale(1.01, 1.01);
|
|
-ms-transform: scale(1.01, 1.01);
|
|
-webkit-transform: scale(1.01, 1.01);
|
|
transform: scale(1.01, 1.01);
|
|
}
|
|
textarea:focus {
|
|
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-transform: scale(1.01, 1.01);
|
|
-o-transform: scale(1.01, 1.01);
|
|
-ms-transform: scale(1.01, 1.01);
|
|
-webkit-transform: scale(1.01, 1.01);
|
|
transform: scale(1.01, 1.01);
|
|
}
|
|
.title {
|
|
min-width: 565px;
|
|
color: #323f5f;
|
|
}
|
|
input:hover {
|
|
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-transform: scale(1.02, 1.02);
|
|
-o-transform: scale(1.02, 1.02);
|
|
-ms-transform: scale(1.02, 1.02);
|
|
-webkit-transform: scale(1.02, 1.02);
|
|
transform: scale(1.02, 1.02);
|
|
}
|
|
input:focus {
|
|
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-transform: scale(1.02, 1.02);
|
|
-o-transform: scale(1.02, 1.02);
|
|
-ms-transform: scale(1.02, 1.02);
|
|
-webkit-transform: scale(1.02, 1.02);
|
|
transform: scale(1.02, 1.02);
|
|
}
|
|
input::placeholder {
|
|
color: #b8b8d3;
|
|
font-family: 'Nunito', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
b {
|
|
color: #525f7f;
|
|
font-size: 36px;
|
|
font-family: 'Nunito-SemiBold', 'Nunito', sans-serif;
|
|
margin: 7px;
|
|
}
|
|
#editApp {
|
|
margin: 0px 10px;
|
|
}
|
|
.btn {
|
|
font-family: 'Nunito-Bold', 'Nunito', sans-serif;
|
|
font-weight: 700;
|
|
outline: none;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-size: 20px;
|
|
padding: 10px 20px;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
-webkit-background-clip: padding-box;
|
|
-moz-background-clip: padding;
|
|
background-clip: padding-box;
|
|
display: inline-block;
|
|
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-transform: scale(1, 1);
|
|
-o-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
-webkit-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
-moz-transition: all 0.15s ease;
|
|
-o-transition: all 0.15s ease;
|
|
-webkit-transition: all 0.15s ease;
|
|
transition: all 0.15s ease;
|
|
background-color: #53CB8B;
|
|
color: #F7F7FA;
|
|
margin: 10px 0px;
|
|
}
|
|
.btn:hover {
|
|
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-transform: scale(1.02, 1.02);
|
|
-o-transform: scale(1.02, 1.02);
|
|
-ms-transform: scale(1.02, 1.02);
|
|
-webkit-transform: scale(1.02, 1.02);
|
|
transform: scale(1.02, 1.02);
|
|
background-color: #67d198;
|
|
}
|
|
.btn:focus {
|
|
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
|
-moz-transform: scale(1.02, 1.02);
|
|
-o-transform: scale(1.02, 1.02);
|
|
-ms-transform: scale(1.02, 1.02);
|
|
-webkit-transform: scale(1.02, 1.02);
|
|
transform: scale(1.02, 1.02);
|
|
}
|
|
.red {
|
|
background-color: #E9676F;
|
|
color: #F7F7FA;
|
|
}
|
|
.red:hover {
|
|
background-color: #ec7d84;
|
|
}
|
|
.wrap {
|
|
margin: 0px;
|
|
position: absolute;
|
|
}
|
|
.longer {
|
|
width: 500px;
|
|
}
|
|
.shorter {
|
|
width: 50px;
|
|
min-width: 50px;
|
|
}
|
|
.smaller {
|
|
width: 700px;
|
|
height: 200px;
|
|
}
|
|
</style>
|
|
<title>SGA Website Editor</title>
|
|
<link rel='icon' href='https://i.imgur.com/IRJiPeO.png'>
|
|
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.2.0/css/all.css' integrity='sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ' crossorigin='anonymous'>
|
|
</head>
|
|
|
|
<body>
|
|
<div id='editApp'>
|
|
<b>Officers</b>
|
|
<div v-for='(officer, idx) in officers'>
|
|
<input v-model='officer.title' placeholder='Title'>
|
|
<input v-model='officer.name' placeholder='Name'>
|
|
<input v-model='officer.img' placeholder='Image URL'>
|
|
<textarea v-model='officer.paragraphs[0].para' placeholder='Description'></textarea>
|
|
<a class='btn red wrap' @click='officers.splice(idx, 1)'><i class='fas fa-times'></i></a>
|
|
</div>
|
|
<a class='btn' @click='officers.push({"paragraphs": [{"para":""}]})'>Add Person</a>
|
|
<hr/>
|
|
<b>Executive Committee</b>
|
|
<div v-for='(commit, i) in committee'>
|
|
<input v-model='commit.title' placeholder='Committee Title' class='title'>
|
|
<a class='btn red' @click='committee.splice(i, 1)'><i class='fas fa-times'></i></a>
|
|
<div v-for='(person, idx) in commit.people'>
|
|
<input v-model='person.name' placeholder='Name'>
|
|
<input v-model='person.year' placeholder='Year'>
|
|
<a class='btn red' @click='commit.people.splice(idx, 1)'><i class='fas fa-times'></i></a>
|
|
</div>
|
|
<a class='btn' @click='commit.people.push({})'>Add Person</a>
|
|
</div>
|
|
<a class='btn title' @click='committee.push({"people": []})'>Add Committee</a>
|
|
<hr/>
|
|
<b>Class Council</b>
|
|
<div v-for='(coun, i) in council'>
|
|
<input v-model='coun.title' placeholder='Type "Class Of ..."' class='title'>
|
|
<a class='btn red' @click='council.splice(i, 1)'><i class='fas fa-times'></i></a>
|
|
<div v-for='(person, idx) in coun.people'>
|
|
<input v-model='person.name' placeholder='Name'>
|
|
<input v-model='person.role' placeholder='Role'>
|
|
<a class='btn red' @click='coun.people.splice(idx, 1)'><i class='fas fa-times'></i></a>
|
|
</div>
|
|
<a class='btn' @click='coun.people.push({})'>Add Person</a>
|
|
</div>
|
|
<a class='btn title' @click='council.push({"people": []})'>Add Council</a>
|
|
<hr/>
|
|
<b>News</b>
|
|
<div v-for='(nart, k) in news'>
|
|
<input v-model='nart.date' placeholder='Date'/>
|
|
<input v-model='nart.title' placeholder='Title' class='longer'/>
|
|
<input v-model='nart.img' placeholder='Image URL'/>
|
|
<input v-model='nart.id' placeholder='ID' class='shorter'/>
|
|
<input v-model='nart.url' placeholder='URL: Format is news/"id"'/>
|
|
<div v-for='(para, l) in nart.content'>
|
|
<textarea v-model='para.para' placeholder='Paragraph' class='smaller'></textarea>
|
|
<a class='btn red' @click='nart.content.splice(l, 1)'><i class='fas fa-times'></i></a>
|
|
</div>
|
|
<a class='btn' @click='nart.content.push({"para": ""})'>Add Paragraph</a>
|
|
<a class='btn title red' @click='news.splice(k, 1)'>Remove News Article w/ ID: \{{nart.id}}</a>
|
|
</div>
|
|
<a class='btn title' @click='news.unshift({"content": [{"para":""}]})'>Add News Article (at top of news section)</a>
|
|
<hr/>
|
|
<input v-model='password' placeholder='Password' id='password' @keyup.enter='sendEdits' type='password'/>
|
|
<a class='btn' @click='sendEdits'>SAVE EDITS</a>
|
|
</div>
|
|
<p class='hidden' id='officers'>{{officers}}</p>
|
|
<p class='hidden' id='committee'>{{committee}}</p>
|
|
<p class='hidden' id='council'>{{council}}</p>
|
|
<p class='hidden' id='news'>{{news}}</p>
|
|
</body>
|
|
<script src='https://code.jquery.com/jquery-3.3.1.min.js' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'></script>
|
|
<script src='https://cdn.jsdelivr.net/npm/vue'></script>
|
|
<script>
|
|
var V = {
|
|
officers: JSON.parse($('#officers').text()),
|
|
committee: JSON.parse($('#committee').text()),
|
|
council: JSON.parse($('#council').text()),
|
|
news: JSON.parse($('#news').text()),
|
|
password: ''
|
|
}
|
|
var app = new Vue({
|
|
el: '#editApp',
|
|
data: V,
|
|
methods: {
|
|
sendEdits: function(event) {
|
|
$.post('/edit', { "data": JSON.stringify(V) }, function(resp) {
|
|
console.log(resp)
|
|
})
|
|
}
|
|
}
|
|
});
|
|
console.log(V);
|
|
</script>
|
|
</html> |