madebydanny.uk written in html, css, and a lot of JavaScript I don't understand madebydanny.uk
html css javascript
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Added "Made possibale" Section

+137 -5
.DS_Store

This is a binary file and will not be displayed.

+100 -2
css/index.css
··· 793 793 } 794 794 795 795 /* Section headers with icons */ 796 - #projects h2, #tangled-repo h2 { 796 + #projects h2, #tangled-repo h2, #leaflets h2, #thanks h2 { 797 797 font-size: 1.6em; 798 798 font-weight: 700; 799 799 margin-bottom: 20px; ··· 805 805 border-bottom: 2px solid rgba(153, 153, 255, 0.3); 806 806 } 807 807 808 - #projects h2 i, #tangled-repo h2 i { 808 + #projects h2 i, #tangled-repo h2 i, #leaflets h2 i, #thanks h2 i { 809 809 color: #9999ff; 810 810 font-size: 0.9em; 811 + } 812 + 813 + /* Leaflets RSS Feed Styling */ 814 + #leaflets #rss .leaflet-item, 815 + #rss .feedItem { 816 + background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)); 817 + border-radius: 12px; 818 + padding: 20px; 819 + margin-bottom: 16px; 820 + border: 1px solid rgba(255, 255, 255, 0.1); 821 + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 822 + position: relative; 823 + overflow: hidden; 824 + } 825 + 826 + #leaflets #rss .leaflet-item::before, 827 + #rss .feedItem::before { 828 + content: ''; 829 + position: absolute; 830 + top: 0; 831 + left: 0; 832 + width: 4px; 833 + height: 100%; 834 + background: linear-gradient(180deg, #9999ff, #b3b3ff); 835 + opacity: 0; 836 + transition: opacity 0.3s ease; 837 + } 838 + 839 + #leaflets #rss .leaflet-item:hover, 840 + #rss .feedItem:hover { 841 + transform: translateX(8px); 842 + border-color: rgba(153, 153, 255, 0.4); 843 + background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)); 844 + box-shadow: 0 8px 24px rgba(153, 153, 255, 0.15); 845 + } 846 + 847 + #leaflets #rss .leaflet-item:hover::before, 848 + #rss .feedItem:hover::before { 849 + opacity: 1; 850 + } 851 + 852 + #leaflets #rss h3, 853 + #rss .feedItem h3, 854 + #rss .feedItem .feedTitle { 855 + margin-top: 0; 856 + margin-bottom: 12px; 857 + font-size: 1.3em; 858 + font-weight: 600; 859 + color: #ffffff; 860 + } 861 + 862 + #leaflets #rss a, 863 + #rss .feedItem a { 864 + color: #ffffff; 865 + text-decoration: none; 866 + transition: color 0.3s ease; 867 + display: inline-flex; 868 + align-items: center; 869 + gap: 8px; 870 + } 871 + 872 + #leaflets #rss a:hover, 873 + #rss .feedItem a:hover { 874 + color: #b3b3ff; 875 + } 876 + 877 + #leaflets #rss .leaflet-description, 878 + #rss .feedItem .feedDescription, 879 + #rss .feedItem p { 880 + margin: 8px 0; 881 + color: #d0d0d0; 882 + line-height: 1.6; 883 + font-size: 0.95em; 884 + } 885 + 886 + #leaflets #rss .leaflet-date, 887 + #rss .feedItem .feedDate { 888 + color: #999; 889 + font-size: 0.9em; 890 + margin-top: 10px; 891 + } 892 + 893 + /* Thanks Section Styling */ 894 + #thanks-content { 895 + color: #e6e6e6; 896 + line-height: 1.8; 897 + font-size: 0.95em; 898 + } 899 + 900 + #thanks-content a { 901 + color: #b3b3ff; 902 + text-decoration: none; 903 + transition: color 0.3s ease; 904 + } 905 + 906 + #thanks-content a:hover { 907 + color: #d4d4ff; 908 + text-decoration: underline; 811 909 } 812 910 813 911 /* Responsive breakpoints */
+9 -2
index.html
··· 91 91 <div id="tangled-repo" class="white-card" style="margin-top: 20px;"> 92 92 <p>Loading tangled repository...</p> 93 93 </div> 94 + <div id="leaflets" class="white-card" style="margin-top: 20px;"> 95 + <h2><i class="fa-solid fa-rss"></i> Latest Leaflets</h2> 96 + <div id="rss"></div> 97 + </div> 94 98 <div class="content-section"> 95 - <div id="rss" class="white-card"></div> 96 99 <section id="simple-photo-gallery"> 97 100 <h2><i class="fa-solid fa-images"></i> Pined Photos</h2> 98 101 <div class="gallery"> ··· 115 118 </div> 116 119 </section> 117 120 </div> 121 + <div id="thanks" class="white-card" style="margin-top: 20px;"> 122 + <h2><i class="fa-solid fa-heart"></i> Made Possible Thanks To</h2> 123 + <div id="thanks-content">Loading...</div> 124 + </div> 118 125 <div id="footer" class="white-card"></div> 119 - <div class="content-section"> 126 + <div class="content-section"> 120 127 <iframe src="https://status.madebydanny.uk/badge?theme=dark" width="250" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe> 121 128 </div> 122 129 <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
+28 -1
js/index.js
··· 550 550 } 551 551 552 552 // ============================================ 553 + // CUSTOM PDS API - THANKS SECTION 554 + // ============================================ 555 + 556 + async function fetchThanks() { 557 + const thanksElement = document.getElementById('thanks-content'); 558 + if (!thanksElement) return; 559 + 560 + const apiUrl = 'https://mbdio.uk/xrpc/com.atproto.repo.getRecord?repo=did:plc:l37td5yhxl2irrzrgvei4qay&collection=uk.madebydanny.thanks&rkey=3m5orengzks2d'; 561 + 562 + try { 563 + const response = await fetch(apiUrl); 564 + if (!response.ok) throw new Error('Failed to fetch thanks content'); 565 + 566 + const data = await response.json(); 567 + if (data.value && data.value.content) { 568 + thanksElement.innerHTML = data.value.content; 569 + } else { 570 + thanksElement.innerHTML = '<p>No thanks content available</p>'; 571 + } 572 + } catch (error) { 573 + console.error('Error fetching thanks content:', error); 574 + thanksElement.innerHTML = '<p>Error loading thanks content</p>'; 575 + } 576 + } 577 + 578 + // ============================================ 553 579 // INITIALIZATION - EXECUTE ALL FETCH FUNCTIONS 554 580 // ============================================ 555 581 ··· 561 587 fetchFooter(); 562 588 fetchProjects(); 563 589 fetchCurrentStatus(); 564 - fetchTangledRepo(); 590 + fetchTangledRepo(); 591 + fetchThanks();