<!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>