Skip to content

Commit

Permalink
feat: revamp logo generator (#3)
Browse files Browse the repository at this point in the history 
* feat: logo generation

* feat: logo generator styles and logic

* chore: add styles

* chore: add download and toggle logic
  • Loading branch information
@RiyaMathew-11
RiyaMathew-11 authored Oct 11, 2024
1 parent 9eed994 commit f66ff83
Show file tree
Hide file tree
Showing 3 changed files with 364 additions and 0 deletions.
125 changes: 125 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./styles/main.css">
<title>FOSS Club | Campus Logo Generator</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div class="bg-light-white" style="min-height: 100vh;">
<div class="container py-5">

<br>
<h3 class="text-center font-weight-bold"><span class="text-black">FOSS
<span style="color: #08B74F">Club</span>
</span> Logo Generator</h3>
<p class="text-secondary text-center">
A logo generator for FOSS Clubs.
</p>
<br>
<br>

<form class="text-center lg-header" id="downloadForm">
<div>
<input type="text" id="collegeName" class="form-control mb-2 mb-md-0 lg-input"
placeholder="Enter your college name here" required>
</div>
<div class="col-md-3 btn-group showable" id="downloadForm">
<input type="submit" class="btn btn-block btn-primary shadow-sm" id="myBtn" value="Download SVG" />

<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
onclick="toggleSelect()">
<span class="sr-only" id="toggleSelect">Toggle Dropdown</span>
</button>
<div class="dropdown-menu showable" onclick="toggleSelect()">
<a class="dropdown-item" onclick="setFormat(this.innerText)">SVG</a>
<a class="dropdown-item" onclick="setFormat(this.innerText)">PNG</a>
</div>
</div>
</form>

<div class="card card-body shadow-sm border-3 position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="text-sm preview-text" id="previewText">PREVIEW</div>
<button type="button" id="toggleColor" class="btn btn-block btn-dark shadow-sm">Switch to Dark</button>
</div>

<div class="text-center py-4">
<!-- FOSS LOGO SVG -->
<!-- <svg width="746" height="372" viewBox="0 0 746 372" fill="none" xmlns="http://www.w3.org/2000/svg"> -->
<svg id="svgLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 400" width="1014" height="594">
<defs>
<style>
.cls-8 {
font-size: 31.93px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
</style>
</defs>
<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" id="topLeft" clip-rule="evenodd"
d="M160.7 186.201C142.493 186.201 127.733 171.441 127.733 153.234V127.915H186.019V186.201H160.7ZM141.282 157.058H176.772C177.255 162.731 174.528 174.078 159.752 174.078C144.976 174.078 141.282 162.731 141.282 157.058Z"
fill="#000000" />
<path id="bottomRight" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
clip-rule="evenodd"
d="M211.386 186.2C229.593 186.2 244.353 200.96 244.353 219.167V244.486H186.067V186.2H211.386ZM229.864 216.08C230.053 218.303 229.062 221.645 226.719 224.443C224.403 227.208 220.802 229.393 215.812 229.393C211.334 229.393 207.5 227.215 204.765 224.398C202.003 221.552 200.495 218.195 200.495 216.009H198.832C198.832 218.784 200.64 222.534 203.572 225.556C206.533 228.606 210.773 231.055 215.812 231.055C221.343 231.055 225.394 228.613 227.993 225.511C230.565 222.441 231.754 218.676 231.52 215.939L229.864 216.08Z"
fill="#000000" />
<path id="topRight" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
d="M244.353 186.201H219.034C200.827 186.201 186.067 171.441 186.067 153.234V127.915H244.353V186.201ZM201.491 147.311C200.629 148.338 200.286 149.545 200.35 150.297L199 150.412C198.899 149.24 199.404 147.689 200.453 146.44C201.524 145.164 203.195 144.162 205.461 144.162C207.54 144.162 209.275 145.17 210.474 146.403C211.651 147.612 212.418 149.151 212.418 150.354L211.063 150.354C211.063 149.633 210.54 148.415 209.503 147.348C208.488 146.305 207.083 145.517 205.461 145.517C203.635 145.517 202.331 146.311 201.491 147.311ZM221.126 150.297C221.062 149.544 221.403 148.337 222.262 147.31C223.099 146.31 224.397 145.517 226.214 145.517C227.828 145.517 229.225 146.304 230.236 147.347C231.27 148.414 231.79 149.632 231.79 150.354L233.146 150.354C233.146 149.152 232.382 147.614 231.21 146.404C230.015 145.171 228.286 144.162 226.214 144.162C223.955 144.162 222.289 145.165 221.222 146.441C220.178 147.69 219.675 149.24 219.775 150.412L221.126 150.297Z"
fill="#22B34F" />
<path
id="bottomLeft"
d="M153.174 186.201H127.855V244.486H186.141V219.168C186.141 200.96 171.381 186.201 153.174 186.201ZM172.829 209.9C172.829 212.907 170.392 215.344 167.386 215.344C164.379 215.344 161.942 212.907 161.942 209.9C161.942 206.894 164.379 204.457 167.386 204.457C170.392 204.457 172.829 206.894 172.829 209.9ZM152.291 209.9C152.291 212.907 149.854 215.344 146.848 215.344C143.841 215.344 141.404 212.907 141.404 209.9C141.404 206.894 143.841 204.457 146.848 204.457C149.854 204.457 152.291 206.894 152.291 209.9Z"
fill="#22B34F" />
<path id="FossClub"
d="M272.961 190.723V138.477H307.554V147.585H284.007V160.034H305.258V169.141H284.007V190.723H272.961ZM360.122 164.6C360.122 170.298 359.042 175.145 356.882 179.141C354.739 183.138 351.814 186.191 348.106 188.3C344.415 190.392 340.266 191.437 335.657 191.437C331.014 191.437 326.847 190.383 323.156 188.274C319.466 186.165 316.549 183.112 314.406 179.116C312.263 175.119 311.192 170.281 311.192 164.6C311.192 158.903 312.263 154.056 314.406 150.059C316.549 146.062 319.466 143.018 323.156 140.926C326.847 138.817 331.014 137.763 335.657 137.763C340.266 137.763 344.415 138.817 348.106 140.926C351.814 143.018 354.739 146.062 356.882 150.059C359.042 154.056 360.122 158.903 360.122 164.6ZM348.922 164.6C348.922 160.91 348.37 157.797 347.264 155.263C346.176 152.729 344.636 150.807 342.647 149.498C340.657 148.188 338.327 147.533 335.657 147.533C332.987 147.533 330.657 148.188 328.667 149.498C326.677 150.807 325.129 152.729 324.024 155.263C322.935 157.797 322.391 160.91 322.391 164.6C322.391 168.291 322.935 171.403 324.024 173.937C325.129 176.471 326.677 178.393 328.667 179.703C330.657 181.012 332.987 181.667 335.657 181.667C338.327 181.667 340.657 181.012 342.647 179.703C344.636 178.393 346.176 176.471 347.264 173.937C348.37 171.403 348.922 168.291 348.922 164.6ZM393.773 153.503C393.569 151.445 392.693 149.846 391.145 148.707C389.598 147.568 387.497 146.998 384.844 146.998C383.041 146.998 381.519 147.253 380.278 147.763C379.036 148.256 378.084 148.945 377.421 149.829C376.774 150.714 376.451 151.717 376.451 152.84C376.417 153.775 376.613 154.591 377.038 155.289C377.48 155.986 378.084 156.59 378.849 157.1C379.615 157.593 380.499 158.027 381.502 158.401C382.506 158.758 383.577 159.064 384.717 159.319L389.411 160.442C391.69 160.952 393.781 161.632 395.686 162.483C397.591 163.333 399.241 164.379 400.635 165.621C402.03 166.862 403.11 168.325 403.875 170.008C404.658 171.692 405.057 173.622 405.074 175.799C405.057 178.997 404.241 181.769 402.625 184.116C401.027 186.446 398.714 188.257 395.686 189.55C392.676 190.825 389.045 191.463 384.793 191.463C380.575 191.463 376.902 190.817 373.773 189.524C370.66 188.232 368.228 186.318 366.476 183.784C364.742 181.233 363.832 178.078 363.747 174.32H374.436C374.555 176.071 375.057 177.534 375.941 178.708C376.842 179.864 378.041 180.74 379.538 181.335C381.052 181.913 382.761 182.203 384.666 182.203C386.536 182.203 388.161 181.93 389.538 181.386C390.933 180.842 392.013 180.085 392.778 179.116C393.543 178.146 393.926 177.032 393.926 175.774C393.926 174.6 393.577 173.614 392.88 172.815C392.2 172.015 391.196 171.335 389.87 170.774C388.56 170.213 386.953 169.702 385.048 169.243L379.359 167.815C374.955 166.743 371.477 165.068 368.926 162.789C366.374 160.51 365.107 157.44 365.124 153.58C365.107 150.416 365.949 147.653 367.65 145.289C369.368 142.925 371.723 141.079 374.716 139.753C377.71 138.426 381.111 137.763 384.921 137.763C388.798 137.763 392.183 138.426 395.074 139.753C397.982 141.079 400.244 142.925 401.86 145.289C403.476 147.653 404.309 150.391 404.36 153.503H393.773ZM437.973 153.503C437.769 151.445 436.893 149.846 435.345 148.707C433.798 147.568 431.697 146.998 429.044 146.998C427.242 146.998 425.719 147.253 424.478 147.763C423.236 148.256 422.284 148.945 421.621 149.829C420.974 150.714 420.651 151.717 420.651 152.84C420.617 153.775 420.813 154.591 421.238 155.289C421.68 155.986 422.284 156.59 423.049 157.1C423.815 157.593 424.699 158.027 425.702 158.401C426.706 158.758 427.777 159.064 428.917 159.319L433.611 160.442C435.89 160.952 437.982 161.632 439.886 162.483C441.791 163.333 443.441 164.379 444.835 165.621C446.23 166.862 447.31 168.325 448.075 170.008C448.858 171.692 449.257 173.622 449.274 175.799C449.257 178.997 448.441 181.769 446.825 184.116C445.227 186.446 442.914 188.257 439.886 189.55C436.876 190.825 433.245 191.463 428.993 191.463C424.776 191.463 421.102 190.817 417.973 189.524C414.86 188.232 412.428 186.318 410.677 183.784C408.942 181.233 408.032 178.078 407.947 174.32H418.636C418.755 176.071 419.257 177.534 420.141 178.708C421.042 179.864 422.241 180.74 423.738 181.335C425.252 181.913 426.961 182.203 428.866 182.203C430.737 182.203 432.361 181.93 433.738 181.386C435.133 180.842 436.213 180.085 436.978 179.116C437.743 178.146 438.126 177.032 438.126 175.774C438.126 174.6 437.777 173.614 437.08 172.815C436.4 172.015 435.396 171.335 434.07 170.774C432.76 170.213 431.153 169.702 429.248 169.243L423.56 167.815C419.155 166.743 415.677 165.068 413.126 162.789C410.575 160.51 409.308 157.44 409.325 153.58C409.308 150.416 410.149 147.653 411.85 145.289C413.568 142.925 415.923 141.079 418.917 139.753C421.91 138.426 425.311 137.763 429.121 137.763C432.998 137.763 436.383 138.426 439.274 139.753C442.182 141.079 444.444 142.925 446.06 145.289C447.676 147.653 448.509 150.391 448.56 153.503H437.973ZM513.682 156.768H502.508C502.304 155.323 501.887 154.039 501.258 152.916C500.629 151.777 499.821 150.807 498.835 150.008C497.848 149.209 496.709 148.596 495.416 148.171C494.141 147.746 492.754 147.533 491.258 147.533C488.554 147.533 486.198 148.205 484.191 149.549C482.185 150.875 480.628 152.814 479.523 155.365C478.417 157.899 477.865 160.978 477.865 164.6C477.865 168.325 478.417 171.454 479.523 173.988C480.645 176.522 482.21 178.435 484.217 179.728C486.224 181.021 488.545 181.667 491.181 181.667C492.661 181.667 494.03 181.471 495.289 181.08C496.564 180.689 497.695 180.119 498.681 179.371C499.668 178.606 500.484 177.679 501.13 176.59C501.794 175.502 502.253 174.26 502.508 172.866L513.682 172.917C513.393 175.315 512.67 177.628 511.513 179.856C510.374 182.067 508.835 184.048 506.896 185.8C504.974 187.534 502.678 188.912 500.008 189.932C497.355 190.936 494.353 191.437 491.003 191.437C486.343 191.437 482.176 190.383 478.502 188.274C474.846 186.165 471.955 183.112 469.829 179.116C467.72 175.119 466.665 170.281 466.665 164.6C466.665 158.903 467.737 154.056 469.88 150.059C472.023 146.062 474.931 143.018 478.605 140.926C482.278 138.817 486.411 137.763 491.003 137.763C494.03 137.763 496.836 138.188 499.421 139.038C502.023 139.889 504.328 141.13 506.335 142.763C508.342 144.379 509.974 146.36 511.233 148.707C512.508 151.054 513.325 153.741 513.682 156.768ZM529.393 138.477V190.723H518.525V138.477H529.393ZM560.353 174.039V151.539H571.22V190.723H560.787V183.606H560.378C559.494 185.902 558.023 187.747 555.965 189.141C553.924 190.536 551.433 191.233 548.49 191.233C545.871 191.233 543.567 190.638 541.577 189.448C539.587 188.257 538.031 186.565 536.909 184.371C535.803 182.177 535.242 179.549 535.225 176.488V151.539H546.092V174.549C546.109 176.862 546.73 178.691 547.955 180.034C549.179 181.378 550.82 182.049 552.878 182.049C554.188 182.049 555.412 181.752 556.552 181.157C557.691 180.544 558.61 179.643 559.307 178.452C560.021 177.262 560.37 175.791 560.353 174.039ZM577.244 190.723V138.477H588.111V158.12H588.443C588.919 157.066 589.608 155.995 590.509 154.906C591.428 153.801 592.618 152.882 594.081 152.151C595.56 151.403 597.397 151.028 599.591 151.028C602.448 151.028 605.084 151.777 607.499 153.273C609.914 154.753 611.845 156.989 613.29 159.983C614.736 162.959 615.459 166.692 615.459 171.182C615.459 175.553 614.753 179.243 613.341 182.254C611.947 185.247 610.042 187.517 607.627 189.065C605.229 190.596 602.542 191.361 599.566 191.361C597.457 191.361 595.662 191.012 594.183 190.315C592.72 189.618 591.521 188.742 590.586 187.687C589.65 186.616 588.936 185.536 588.443 184.448H587.958V190.723H577.244ZM587.882 171.131C587.882 173.461 588.205 175.493 588.851 177.228C589.497 178.963 590.433 180.315 591.657 181.284C592.882 182.237 594.37 182.713 596.122 182.713C597.89 182.713 599.387 182.228 600.612 181.259C601.836 180.272 602.763 178.912 603.392 177.177C604.039 175.425 604.362 173.41 604.362 171.131C604.362 168.869 604.047 166.879 603.418 165.161C602.788 163.444 601.862 162.1 600.637 161.131C599.413 160.161 597.907 159.677 596.122 159.677C594.353 159.677 592.856 160.144 591.632 161.08C590.424 162.015 589.497 163.342 588.851 165.059C588.205 166.777 587.882 168.801 587.882 171.131Z"
fill="#1A1A1A" />
<text class="cls-8" transform="translate(260 240.78)" x="10" y="0">
<tspan id="logoName" class="name">FOSS Club</tspan>
</text>
</svg>
</div>
</div>

<div>
<canvas id="canvas" width="2028" height="594"></canvas>
<img id="image" width="2028" height="594">
</div>

</div>
<hr class="mb-0">
<div class="py-5">
<div class="container">
<div class="text-center mb-3">

<span class="mx-2">
<a target="_blank" rel="noopener" href="https://www.twitter.com/FOSS United"><i
class="fa fa-lg fa-twitter fa-fw social-icon"></i></a>
</span>
<span class="mx-2">
<a target="_blank" rel="noopener" href="https://forum.fossunited.org/"><i
class="fa fa-lg fa-users fa-fw social-icon"></i></a>
</span>
</div>
<div class="text-center text-secondary text-sm">
Created with <i class="fa fa-heart"></i> by FOSS United. Inspired from <a href="https://tinkerhub.github.io/campus-logo-generator/">TinkerHub Campus Logo Generator</a>
</div>
</div>
</div>
</div>

</body>

<script src="./scripts/main.js" defer></script>

</html>
Loading

0 comments on commit f66ff83

Please sign in to comment.