Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved html structure #31

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improved html structure #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 63 additions & 61 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,66 +47,68 @@
<title>PromiViz - Visualize Promise APIs</title>
</head>
<body class="purple">
<main>

<header>
<h1>🤝 PromiViz</h1>
<div>
<span style="font-size:30px;cursor:pointer" onclick="toggleNav()">&#9776;</span>
</div>
</header>

<div id="sidenav-id" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a class="item" href="#" title="Clear Logs" onclick="clearLogs()">Clear Logs</a>
<a class="item" href="#" title="Persist Logs">
Persist Logs
<input type="checkbox" id="persist-logs" onclick="persistLogs()" />
</a>
<div class="log-settings">
<a class="item" href="#">Set a Theme</a>
<ui class="log-theme">
<li title="Set the blue theme" class="blue" onclick="setTheme('blue')"></li>
<li title="Set the red theme" class="red" onclick="setTheme('red')"></li>
<li title="Set the purple theme" class="purple" onclick="setTheme('purple')"></li>
<li title="Set the green theme" class="green" onclick="setTheme('green')"></li>
<li title="Set the black theme" class="black" onclick="setTheme('black')"></li>
</ui>
</div>
<hr />
<div class="social">
<a
href="https://github.com/atapas/promiviz"
target="_blank"
rel="noopener noreferrer"
title="See the source code">
<img
src='./images/github.png'
width="30px"
height="30px" />
<div id="sidenav-id" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a class="item" href="#" title="Clear Logs" onclick="clearLogs()">Clear Logs</a>
<a class="item" href="#" title="Persist Logs">
Persist Logs
<input type="checkbox" id="persist-logs" onclick="persistLogs()" />
</a>
<a
href="https://twitter.com/intent/tweet?text=🤝%20PromiViz%20-%20Visualize%20Promise%20APIs&url=https://promiviz.vercel.app/&hashtags=promise,devcommunity,promisviz,100daysofcode,javascript%20by%20@tapasadhikary"
target="_blank"
rel="noopener noreferrer"
title="Tweet about it" >
<img
src='./images/twitter.png'
width="30px"
height="30px" />
</a>
<a
href="https://blog.greenroots.info/series/javascript-promises"
target="_blank"
rel="noopener noreferrer"
title="Read about Promises" >
<img
src='./images/blog.png'
<div class="log-settings">
<a class="item" href="#">Set a Theme</a>
<ui class="log-theme">
<li title="Set the blue theme" class="blue" onclick="setTheme('blue')"></li>
<li title="Set the red theme" class="red" onclick="setTheme('red')"></li>
<li title="Set the purple theme" class="purple" onclick="setTheme('purple')"></li>
<li title="Set the green theme" class="green" onclick="setTheme('green')"></li>
<li title="Set the black theme" class="black" onclick="setTheme('black')"></li>
</ui>
</div>
<hr />
<div class="social">
<a
href="https://github.com/atapas/promiviz"
target="_blank"
rel="noopener noreferrer"
title="See the source code">
<img
src='./images/github.png'
width="30px"
height="30px" />
</a>
</a>
<a
href="https://twitter.com/intent/tweet?text=🤝%20PromiViz%20-%20Visualize%20Promise%20APIs&url=https://promiviz.vercel.app/&hashtags=promise,devcommunity,promisviz,100daysofcode,javascript%20by%20@tapasadhikary"
target="_blank"
rel="noopener noreferrer"
title="Tweet about it" >
<img
src='./images/twitter.png'
width="30px"
height="30px" />
</a>
<a
href="https://blog.greenroots.info/series/javascript-promises"
target="_blank"
rel="noopener noreferrer"
title="Read about Promises" >
<img
src='./images/blog.png'
width="30px"
height="30px" />
</a>
</div>
</div>
</div>
<div class="content">
</header>


<main class="content">
<div class="config purple">
<section class="select-api">
<label for="apis-list-id">Select an API:</label>
Expand Down Expand Up @@ -204,18 +206,18 @@ <h2>Logs</h2>
</div>
<ul id='log-id'></ul>
</div>
<footer>
Made with ❤️ by
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/tapasadhikary">
@tapasadhikary
</a>
</footer>
</div>
</main>
</main>

<footer>
Made with ❤️ by
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/tapasadhikary">
@tapasadhikary
</a>
</footer>

<script src="./app.js"></script>
</body>
</html>
9 changes: 9 additions & 0 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@ body, html {
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}

body {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
}

body.blue {
background-color: #0093e9;
background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
Expand Down Expand Up @@ -65,6 +73,7 @@ header h1 {
flex-direction: column;
align-items: center;
margin: 1rem 5rem 0 5rem;
flex: 1;
}

.config {
Expand Down