-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (85 loc) · 6.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<head>
<title>Twitter Card Project</title>
<link rel="stylesheet" href="./src/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<div>
<div class="title">
<a href="https://limjy03.github.io/twittercard-website/"><h1 class="themeElem light-text">Twitter Card Project</h1></a>
</div>
</div>
<div>
<div class="contributors-large themeElem light-text">
<h2>Contributors</h2>
<hr>
<div class="contributor-1">
<a href="https://github.com/genesis331/">
<img src="https://avatars.githubusercontent.com/u/22348410?v=4" class="avatar-1">Cheah Zixu
</a>
</div>
<div class="contributor-2">
<a href="https://github.com/LimJY03">
<img src="https://avatars.githubusercontent.com/u/44389847?v=4" class="avatar-2">Lim JY
</a>
</div>
</div>
<div style="flex-grow: 1;" class="content">
<div class="input-box">
<input class="themeElem-2 light-2" id="input-url" type="url" placeholder="Paste URL here"/>
</div>
<div class="button-line">
<button class="button-generate button-onhover themeElem-2 light-2" onclick="getTwittercard()">
<span>GENERATE TWITTER CARD</span>
</button>
<button id="button-switch-theme" class="button-switch-theme button-onhover themeElem-2 light-2" onclick="toggleTheme()">
<svg width="40" height="40" viewBox="0 0 40 40" fill="#888888" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9999 13.6C16.4653 13.6 13.5999 16.4654 13.5999 20C13.5999 23.5346 16.4653 26.4 19.9999 26.4C23.5345 26.4 26.3999 23.5346 26.3999 20C26.3999 16.4654 23.5345 13.6 19.9999 13.6ZM10.3999 20C10.3999 14.6981 14.698 10.4 19.9999 10.4C25.3018 10.4 29.5999 14.6981 29.5999 20C29.5999 25.3019 25.3018 29.6 19.9999 29.6C14.698 29.6 10.3999 25.3019 10.3999 20Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9999 0C20.8836 0 21.5999 0.805887 21.5999 1.8V5.4C21.5999 6.39411 20.8836 7.2 19.9999 7.2C19.1162 7.2 18.3999 6.39411 18.3999 5.4V1.8C18.3999 0.805887 19.1162 0 19.9999 0Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9999 32.8C20.8836 32.8 21.5999 33.6059 21.5999 34.6V38.2C21.5999 39.1941 20.8836 40 19.9999 40C19.1162 40 18.3999 39.1941 18.3999 38.2V34.6C18.3999 33.6059 19.1162 32.8 19.9999 32.8Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.07969 6.07959C6.71914 5.44013 7.75591 5.44013 8.39536 6.07959L10.7205 8.40474C11.36 9.04419 11.36 10.081 10.7205 10.7204C10.0811 11.3599 9.04429 11.3599 8.40484 10.7204L6.07969 8.39526C5.44023 7.75581 5.44023 6.71904 6.07969 6.07959Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.2794 29.2796C29.9189 28.6401 30.9556 28.6401 31.5951 29.2796L33.9202 31.6047C34.5597 32.2442 34.5597 33.281 33.9202 33.9204C33.2808 34.5599 32.244 34.5599 31.6045 33.9204L29.2794 31.5953C28.6399 30.9558 28.6399 29.919 29.2794 29.2796Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 19.1163 0.805887 18.4 1.8 18.4H5.4C6.39411 18.4 7.2 19.1163 7.2 20C7.2 20.8837 6.39411 21.6 5.4 21.6H1.8C0.805887 21.6 0 20.8837 0 20Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.7998 20C32.7998 19.1163 33.6057 18.4 34.5998 18.4H38.1998C39.1939 18.4 39.9998 19.1163 39.9998 20C39.9998 20.8837 39.1939 21.6 38.1998 21.6H34.5998C33.6057 21.6 32.7998 20.8837 32.7998 20Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7205 29.2796C11.36 29.919 11.36 30.9558 10.7205 31.5953L8.39536 33.9204C7.75591 34.5599 6.71914 34.5599 6.07969 33.9204C5.44023 33.281 5.44023 32.2442 6.07969 31.6047L8.40484 29.2796C9.04429 28.6401 10.0811 28.6401 10.7205 29.2796Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.9202 6.07959C34.5597 6.71904 34.5597 7.75581 33.9202 8.39526L31.5951 10.7204C30.9556 11.3599 29.9189 11.3599 29.2794 10.7204C28.6399 10.081 28.6399 9.04419 29.2794 8.40474L31.6045 6.07959C32.244 5.44013 33.2808 5.44013 33.9202 6.07959Z"/>
</svg>
</button>
</div>
<div class="output-box-wrapper">
<div class="output-box">
<a class="button-download" id="button-download" style="background-color: transparent;">
<svg id="icon-download" width="20" height="20" viewBox="0 0 20 20" fill="#657786" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 1C11 0.447715 10.5523 0 10 0C9.44771 0 9 0.447715 9 1V10.5858L5.70711 7.29289C5.31658 6.90237 4.68342 6.90237 4.29289 7.29289C3.90237 7.68342 3.90237 8.31658 4.29289 8.70711L9.29218 13.7064C9.29459 13.7088 9.29702 13.7112 9.29945 13.7136C9.3938 13.8063 9.50195 13.8764 9.61722 13.9241C9.73425 13.9727 9.8625 13.9996 9.997 14C9.998 14 9.999 14 10 14C10.001 14 10.002 14 10.003 14C10.2746 13.9992 10.5208 13.8901 10.7005 13.7136C10.703 13.7112 10.7054 13.7088 10.7078 13.7064L15.7071 8.70711C16.0976 8.31658 16.0976 7.68342 15.7071 7.29289C15.3166 6.90237 14.6834 6.90237 14.2929 7.29289L11 10.5858V1ZM1 12C1.55228 12 2 12.4477 2 13V17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H17C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V13C18 12.4477 18.4477 12 19 12C19.5523 12 20 12.4477 20 13V17C20 17.7957 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7957 20 17 20H3C2.20435 20 1.44129 19.6839 0.87868 19.1213C0.31607 18.5587 0 17.7957 0 17V13C0 12.4477 0.447715 12 1 12Z"/>
</svg>
</a>
<img src="./src/default/default-light.png" id="output-img">
</div>
</div>
</div>
</div>
<div>
<div class="open-source themeElem light-text">
<a href="https://github.com/LimJY03/twittercard-website">
<img src="./src/icons/icon_github_black.svg" class="themeElem light-text" id="github-icon"/>Open Source on GitHub
</a>
</div>
</div>
<div class="contributors-small themeElem light-text">
<h2>Contributors</h2>
<div class="contributor-small-list">
<div class="contributor-1">
<a href="https://github.com/genesis331/">
<img src="https://avatars.githubusercontent.com/u/22348410?v=4" class="avatar-1">
</a>
</div>
<div class="contributor-2">
<a href="https://github.com/LimJY03">
<img src="https://avatars.githubusercontent.com/u/44389847?v=4" class="avatar-2">
</a>
</div>
</div>
</div>
<script src="./src/content.js"></script>
</body>