ChenKaiLiuG/life_generators
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(gallery): add last update time info to card footers

Browse Source 
Enhance generator gallery by displaying the time difference since the last update in the footer by each card. This information is obtained from the GitHub API for the specified folders.
This commit is contained in:
lifeadventurer
2023-11-24 20:20:39 +08:00
parent c23565b721
commit 639c1f047f
3 changed files with 78 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@@ -26,24 +26,30 @@
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<img class="card-img-top" src="./images/fortune_generator_example.png">
<div class="card mb-3 bg-dark text-white border-0">
<img class="card-img-top" src="./images/fortune_generator_example.png" alt="fortune generator example">
<!-- <video src="#" autoplay></video> -->
<div class="card-body">
<h5 class="card-title">Fortune Generator</h5>
<p class="card-text">Get your daily fortune by clicking the check in button</p>
<a href="./fortune_generator/" class="btn btn-dark">Check this out</a>
<h4 class="card-title">Fortune Generator</h4>
<p class="card-text">Get your daily fortune with just a click.</p>
<a href="./fortune_generator/" class="btn btn-secondary">Check this out</a>
</div>
<div class="card-footer">
<div id="last-update-1"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<img class="card-img-top" src="./images/quote_generator_example_(2).png">
<div class="card mb-3 bg-dark text-white border-0">
<img class="card-img-top" src="./images/quote_generator_example_(2).png" alt="quote generator example">
<!-- <video src="#" autoplay></video> -->
<div class="card-body">
<h5 class="card-title">Quote Generator</h5>
<p class="card-text">Get your daily quote by clicking a button</p>
<a href="./quote_generator/" class="btn btn-dark">Check this out</a>
<h4 class="card-title">Quote Generator</h4>
<p class="card-text">Generate inspiring and thought-provoking quotes effortlessly.</p>
<a href="./quote_generator/" class="btn btn-secondary">Check this out</a>
</div>
<div class="card-footer">
<div id="last-update-2"></div>
</div>
</div>
</div>
@@ -55,5 +61,6 @@
<h5>made by <b>LifeAdventurer</b> <img src="./images/lifeadventurer.jpg" alt="footer image" style="width: 4%;"></h5>
</div>
</footer>
<script src="./scripts.js"></script>
</body>
</html>