dylan/gitfolio
1
0
Fork 0
mirror of https://github.com/dilllxd/gitfolio.git synced 2024-08-14 22:28:09 +00:00
Code Issues Projects Releases Wiki Activity

Add files via upload

Browse source
This commit is contained in:
imfunny 2019-08-12 09:40:00 +05:30 • committed by GitHub
parent 4a2872171d
commit ee354ae852
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 3180 additions and 2387 deletions
Download patch file Download diff file Expand all files Collapse all files

260
views/blog.ejs Normal file
View file

@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Gitfolio UI</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="../index.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css"
/>
</head>
<body class="body-light">
<header>
<b>gitfolio</b>
<a href="/blog" style="float: right">New Blog </a>
<a href="/update" style="float: right">Update</a>
<a href="/" style="float: right">Home</a>
</header>
<div id="top_image">
<i class="fas fa-camera" onclick="applyTopImage()"></i>
</div>
<input
type="file"
id="top_image_file"
style="display: none"
accept="image/*"
style="display: none"
/>
<table id="profile_blog">
<tbody>
<tr>
<td style="width:8vw;">
<div
id="profile_img_blog"
style="background:url('<%= profile[0].userimg%>') center center;"
></div>
</td>
<td style="width:52vw;">
<div id="username_blog">
<% if(profile[0].name)%>
<span><%= profile[0].name%></span>
<% %>
<br />@<%= profile[0].username%><b id="blog_time"></b>
</div>
</td>
</tr>
</tbody>
</table>
<div id="blog-display">
<form
style="padding: 0px; width:100%;"
method="POST"
action="/createBlog"
id="form"
>
<textarea
id="blog_title"
placeholder="blog title here"
spellcheck="false"
rows="1"
onkeyup="addRow(event)"
name="title"
required
></textarea>
<br />
<textarea
id="blog_sub_title"
placeholder="blog sub title here"
spellcheck="false"
rows="1"
name="subtitle"
onkeyup="addRow(event)"
required
></textarea>
<div id="originalContent" style="display: none"></div>
<input type="hidden" name="top_image" id="top" />
<input type="hidden" name="content" id="content" />
<input type="hidden" name="images" id="images" />
<div id="blog"></div>
<div class="div_for_buttons">
<input
type="file"
name="file"
id="file"
style="display: none"
accept="image/*"
/>
<button
class="button h-weight-bold h-border-pill -size-small"
type="button"
onclick="clickFile()"
>
<i class="fas fa-plus"></i>&nbsp; Image
</button>
<button
class="button h-weight-bold h-border-pill -size-small"
type="button"
onclick="addPara()"
>
<i class="fas fa-plus"></i>&nbsp; Paragraph
</button>
<h5>Tip : You can use html inside paragraphs</h5>
</div>
<button type="button" class="button" onclick="submitthisform()">
Create Blog
</button>
</form>
</div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/js/index.min.js"
></script>
<script>
var imgElement = document.querySelector("#file");
var topImageElement = document.querySelector("#top_image_file");
var img_number = 0;
var blog_para_number = 0;
var images = [];
function applyTopImage() {
topImageElement.value = "";
document.querySelector("#top").value = "";
document.querySelector("#top_image").style.background =
"linear-gradient(0deg, rgb(250, 250, 250), rgb(220, 220, 220))";
topImageElement.click();
}
topImageElement.addEventListener("change", e => {
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = data => {
var image = data.target.result;
document.querySelector(
"#top_image"
).style.background = `linear-gradient(0deg, rgba(250, 250, 250, 1), rgba(220, 220, 220, 0)), url('${image}') center center`;
document.querySelector("#top").value = image;
};
});
function addRow(e) {
e.preventDefault();
if (e.target.clientHeight < e.target.scrollHeight) {
e.target.rows += 1;
} else {
if (e.target.value == "") {
e.target.rows = 1;
}
}
}
function remove(e, element, blobData) {
var elem = document.getElementById(element);
var elem2 = document.getElementById(`${element}_original`);
elem.parentNode.removeChild(e.target);
elem.parentNode.removeChild(elem);
elem2.parentNode.removeChild(elem2);
imgElement.value = "";
if (element.split("_")[0] == "img") {
images.splice(images.indexOf(blobData), 1);
img_number--;
}
}
function addDataToOriginalPara(id) {
document.querySelector(
`#para_${id}_original`
).innerHTML = document.querySelector(`#para_${id}`).value;
}
function clickFile() {
imgElement.click();
}
imgElement.addEventListener("change", e => {
var img = document.createElement("img");
var imageblob = URL.createObjectURL(e.target.files[0]);
img.setAttribute(
"src",
`img_${img_number}.${e.target.files[0].type.split("/")[1]}`
);
img.setAttribute("alt", `blog image ${img_number}`);
img.setAttribute("id", `img_${img_number}_original`);
var img2 = document.createElement("img");
img2.setAttribute("src", imageblob);
img2.setAttribute("alt", `blog image ${img_number}`);
img2.setAttribute("id", `img_${img_number}`);
var remove = document.createElement("div");
remove.setAttribute("class", "remove");
remove.setAttribute(
"onclick",
`remove(event,'img_${img_number}', '${imageblob}')`
);
remove.innerHTML = '<i class="fas fa-times"></i> Remove';
document.querySelector("#originalContent").appendChild(img);
document.querySelector("#blog").appendChild(img2);
document.querySelector("#blog").appendChild(remove);
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = data => {
images.push(data.target.result);
console.log(images);
};
imgElement.value = "";
img_number++;
});
function addPara() {
var para = document.createElement("textarea");
para.setAttribute("class", "para");
para.setAttribute("id", `para_${blog_para_number}`);
para.setAttribute("spellcheck", false);
para.setAttribute("rows", 1);
para.setAttribute(
"onkeyup",
`addRow(event), addDataToOriginalPara('${blog_para_number}')`
);
para.setAttribute("required", true);
para.setAttribute("placeholder", "What's on your Mind?");
var remove = document.createElement("div");
remove.setAttribute("class", "remove");
remove.setAttribute(
"onclick",
`remove(event,'para_${blog_para_number}', null)`
);
remove.innerHTML = '<i class="fas fa-times"></i> Remove';
var originalPara = document.createElement("p");
originalPara.setAttribute("id", `para_${blog_para_number}_original`);
document.querySelector("#blog").appendChild(para);
document.querySelector("#blog").appendChild(remove);
document.querySelector("#originalContent").appendChild(originalPara);
blog_para_number++;
}
function submitthisform() {
document.querySelector("#content").value = document.querySelector(
"#originalContent"
).innerHTML;
document.querySelector("#images").value = JSON.stringify(images);
document.querySelector("#form").submit();
}
</script>
</body>
</html>

BIN
views/font/Circular.otf Normal file
View file

Binary file not shown.

299
views/index.css Normal file
View file

@ -0,0 +1,299 @@
@import url("https://fonts.googleapis.com/css?family=Poppins");
@import url("https://fonts.googleapis.com/css?family=Questrial");
@font-face {
font-family: "Circular";
src: url("./font/Circular.otf");
}
body {
margin: 0%;
padding: 0%;
width: 100vw;
max-width: 100vw;
overflow-x: hidden;
align-items: center;
font-family: "Poppins", sans-serif;
background: rgb(250, 250, 250) !important;
will-change: auto;
}
header {
width: 90vw;
padding: 4vh 5vw;
font-weight: bold;
background: rgb(255, 255, 255);
font-size: 32px;
}
header b {
font-family: "Circular", sans-serif;
}
header a {
font-size: 16px;
margin: 1.8vh 0px;
margin-left: 4vw;
color: #000;
text-decoration: none;
transition: 0.4s ease-in-out;
}
header a:hover {
color: #bebebe;
}
form {
width: 90vw;
padding: 2vh 5vw;
}
form .button {
margin: 2vh 0px;
}
.input {
margin: 1.5vh 0px !important;
}
.label {
display: inline-block !important;
margin-right: 25px;
font-weight: bold;
}
button {
transition: 0.4s ease-in-out !important;
}
button:hover {
color: #fff;
background: #000 !important;
}
.-size-small {
margin-right: 1vw !important;
}
#top_image {
width: 100vw;
height: 50vh;
position: absolute;
top: 14vh;
left: 0;
background: linear-gradient(0deg, rgb(250, 250, 250), rgb(200, 200, 200));
background-size: cover !important;
background-repeat: no-repeat !important;
z-index: 1;
text-align: right;
}
#top_image i {
font-size: 20px;
position: absolute;
z-index: 5;
top: 4vh;
right: 5vw;
padding: 15px 15px;
background: #ffffff;
color: rgb(0, 0, 0);
border-radius: 50%;
}
#top_image i:hover {
cursor: pointer;
}
#profile_blog {
width: 60vw;
margin: 0px 20vw;
margin-top: 42vh !important;
text-align: left;
z-index: 1;
transition: 0.4s ease-in-out;
z-index: 2;
position: relative;
}
#profile_img_blog {
border-radius: 50%;
width: 90px;
height: 90px;
background-size: cover !important;
background-repeat: no-repeat;
}
#username_blog {
font-size: 18px;
color: #000;
font-family: "Poppins", sans-serif;
font-weight: bold;
padding-left: 0px;
}
#username_blog span {
font-size: 24px;
font-family: "Questrial", sans-serif !important;
}
#username_blog b {
font-size: 12px;
font-family: "Poppins", sans-serif;
font-weight: bold;
}
#blog-display {
width: 60vw;
margin: 3vh 20vw;
text-align: left;
z-index: 1;
transition: 0.4s ease-in-out;
z-index: 2;
position: relative;
}
#blog_title {
font-size: 50px;
color: #000;
font-weight: bold;
font-family: "Questrial", sans-serif;
background: transparent;
border: 0px;
width: 100%;
resize: none;
height: auto;
overflow-y: hidden;
}
#blog_sub_title {
font-size: 36px;
color: rgb(100, 100, 100);
font-weight: bold;
font-family: "Questrial", sans-serif;
background: transparent;
border: 0px;
width: 100%;
resize: none;
height: auto;
overflow-y: hidden;
}
#blog_sub_title::placeholder {
color: rgb(100, 100, 100);
}
#blog-display h2 {
color: var(--blog-gray-color);
}
#blog-display {
padding: 1vh 0px;
font-family: "Questrial", sans-serif;
}
.div_for_buttons {
margin-top: 5vh;
}
.para {
font-size: 17px;
line-height: 25px;
word-spacing: 1.2px;
margin: 5vh 0px;
background: transparent;
border: 0px;
width: 100%;
font-family: "Questrial", sans-serif;
resize: none;
height: auto;
overflow-y: hidden;
}
.para span {
padding: 2px 4px;
background: #000;
color: #fff !important;
}
#blog {
margin-top: 2vh;
}
#blog img {
width: 100%;
margin: 2vh 0px;
border-radius: 5px;
border: 1px solid rgb(0, 0, 0, 0.08);
}
.remove {
margin-bottom: 2vh 0px;
font-weight: bold;
transition: 0.4s ease-in-out;
font-size: 16px;
}
.remove i {
font-size: 14px;
margin-right: 3px;
}
.remove:hover {
cursor: pointer;
color: rgb(255, 70, 70);
}
@media (max-width: 800px) {
#blog-display {
width: 90vw;
margin: 0px 5vw;
text-align: left;
margin-top: 0vh;
z-index: 1;
}
#profile_blog {
width: 90vw;
margin: 0px 5vw;
}
#profile_img_blog {
width: 70px;
height: 70px;
}
#blog img {
margin: 1vh 0px !important;
}
#blog p {
margin: 2vh 0px;
}
}
::selection {
color: #fff;
background: #000;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #000;
}
input,
textarea:focus {
outline: none;
}
::placeholder {
color: #000;
}

145
views/index.ejs Normal file
View file

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Gitfolio UI</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="../index.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css"
/>
</head>
<body class="body-light">
<header>
<b>gitfolio</b>
<a href="/blog" style="float: right">New Blog </a>
<a href="/update" style="float: right">Update</a>
<a href="/" style="float: right">Home</a>
</header>
<form method="post" action="build">
<h3>Build or Edit Portfolio</h3>
<input
type="text"
class="input h-weight-bold"
placeholder="username"
id="username"
name="username"
required
/><br />
<input
type="text"
class="input h-weight-bold"
placeholder="background"
name="background"
id="background"
/>
<h3>Sort By :</h3>
<label class="label"
>Star
<input type="radio" name="sort" value="star" />
<span class="radio"></span>
</label>
<label class="label"
>Created
<input type="radio" name="sort" value="created" checked />
<span class="radio"></span>
</label>
<label class="label"
>Updated
<input type="radio" name="sort" value="updated" />
<span class="radio"></span>
</label>
<label class="label"
>Pushed
<input type="radio" name="sort" value="pushed" />
<span class="radio"></span>
</label>
<label class="label"
>Full Name
<input type="radio" name="sort" value="full_name" />
<span class="radio"></span>
</label>
<h3>Order By :</h3>
<label class="label"
>Asc
<input type="radio" name="order" value="asc" checked />
<span class="radio"></span>
</label>
<label class="label"
>Desc
<input type="radio" name="order" value="desc" />
<span class="radio"></span>
</label>
<br /><br />
<label class="label"
>Use Dark Theme
<input type="checkbox" id="theme" name="theme" />
<span class="checkbox"></span>
</label>
<label class="label"
>Include Forks
<input type="checkbox" id="fork" name="fork" value="true" />
<span class="checkbox"></span>
</label>
<label class="label"
>Include Socials
<input type="checkbox" id="socials" name="socials" />
<span class="checkbox"></span>
</label>
<div style="display: none" id="input_for_socials">
<input
type="text"
class="input h-weight-bold"
placeholder="twitter username"
id="twitter"
name="twitter"
/><br />
<input
type="text"
class="input h-weight-bold"
placeholder="medium username"
id="medium"
name="medium"
/><br />
<input
type="text"
class="input h-weight-bold"
placeholder="dribbble username"
id="dribbble"
name="dribbble"
/><br />
<input
type="text"
class="input h-weight-bold"
placeholder="linkedin username"
id="linkedin"
name="linkedin"
/>
</div>
<br /><br />
<button type="submit" class="button" id="build">Build</button>
</form>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/js/index.min.js"
></script>
<script src="./index.js" type="text/javascript"></script>
</body>
</html>

7
views/index.js Normal file
View file

@ -0,0 +1,7 @@
document.querySelector("#socials").addEventListener("change", event => {
if (event.target.checked) {
document.querySelector("#input_for_socials").style.display = "block";
} else {
document.querySelector("#input_for_socials").style.display = "none";
}
});