1<#if entries?has_content> 

2  <div class="container my-4">         

3    <div class="row gx-4 gy-4"> 

4      <#list entries as curEntry> 

5        <#assign assetRenderer = curEntry.getAssetRenderer() /> 

6        <#assign item = assetRenderer.getArticle() /> 

7        <#assign imageUrl = "" /> 

8        <#assign content = "" /> 

9        <#assign shortDescription = "" /> 

10        <#assign publishDate = curEntry.getPublishDate()?string("MMMM dd, yyyy") /> 

11        <#assign viewCount = curEntry.getViewCount()!"0" /> 

12        <#assign isBreaking = curEntry?is_first /> 

13         

14        <#-- Process all dynamic elements first --> 

15        <#list item.document.rootElement.elements() as dynamicElement> 

16          <#if dynamicElement.attributeValue("field-reference") == "image"> 

17            <#assign imageJSONString = dynamicElement.element("dynamic-content").getText()!"" /> 

18            <#if imageJSONString?has_content> 

19              <#attempt> 

20                <#assign imageUrl = jsonFactoryUtil.createJSONObject(imageJSONString).getString("url")!"" /> 

21              <#recover> 

22              </#attempt> 

23            </#if> 

24          <#elseif dynamicElement.attributeValue("field-reference") == "content"> 

25            <#assign content = dynamicElement.element("dynamic-content").getText()!"" /> 

26          <#elseif dynamicElement.attributeValue("field-reference") == "shortDescription"> 

27            <#assign shortDescription = dynamicElement.element("dynamic-content").getText()!"" /> 

28          </#if> 

29        </#list> 

30         

31        <#-- Only render if we have an image --> 

32        <#if imageUrl?has_content> 

33          <div class="col-md-6 col-lg-4"> 

34            <div class="card shadow border-0 h-100 news-card"> 

35              <#if isBreaking> 

36                <div class="position-absolute top-0 start-0 bg-danger text-white px-3 py-1 m-2 rounded"> 

37                  <i class="fas fa-bolt me-1"></i> አዲስ 

38                </div> 

39              </#if> 

40               

41              <div class="image-container position-relative"> 

42                <img src="${imageUrl}" class="card-img-top img-fluid rounded-top"  

43                     alt="${curEntry.getTitle(locale)?html}"> 

44                

45                 

46                <div class="image-caption p-3"> 

47                  <h5 class="card-title mb-1 fw-bold">${curEntry.getTitle(locale)}</h5> 

48                  <#if shortDescription?has_content> 

49                    <p class="mb-0 small text-dark">${shortDescription}</p> 

50                  </#if> 

51                </div> 

52              </div> 

53               

54              <div class="card-body"> 

55                <p class="card-text text-dark"> 

56                  ${content?replace("<[^>]*>", "", "r")?truncate(200)} 

57                </p> 

58                <div class="d-flex justify-content-between align-items-center mt-3"> 

59                 <a href="/web/guest/w/${item.urlTitle}"  

60   class="btn btn-sm stretched-link"  

61   style="background-color: #007bff; color: #ffffff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: normal; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); padding: 10px 20px; border-radius: 8px;"> 

62  ተጨማሪ ያንብቡ <i class="fas fa-arrow-right ms-1"></i> 

63</a> 

64 

65 

66                  <small class="text-muted"> 

67                    <i class="far fa-calendar-alt me-1"></i> ${publishDate} 

68                  </small> 

69                </div> 

70              </div> 

71            </div> 

72          </div> 

73        </#if> 

74      </#list> 

75    </div> 

76  </div> 

77<#else> 

78  <div class="alert alert-info">በአሁኑ ጊዜ ምንም ዜና የለም</div> 

79</#if> 

80 

81<style> 

82  /* Current News Alert Styles */ 

83  .alert-danger { 

84    background-color: #f8d7da; 

85    border-left: 5px solid #dc3545; 

86    border-radius: 0; 

87    animation: pulse 2s infinite; 

88  } 

89  .container { 

90  margin-top: 2px !important; 

91} 

92.news-card:hover { 

93  background-color: #d0e8ff; /* Light blue */ 

94  transform: translateY(5px); 

95  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.15); 

96} 

97.row.g-4 { 

98  display: flex; 

99  flex-wrap: wrap; 

100  gap: 20px; /* Adjust this value for more/less spacing */ 

101} 

102.col-md-6.col-lg-4 { 

103  padding: 20px; /* Adjust padding as needed */ 

104} 

105 

106 

107	 

108	 

109  @keyframes pulse { 

110    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); } 

111    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); } 

112    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } 

113  } 

114   

115  /* Section Header Styles */ 

116  .section-title { 

117    font-size: 2rem; 

118    font-weight: 700; 

119    color: #2c3e50; 

120    position: relative; 

121    display: inline-block; 

122  } 

123   

124  .section-title:after { 

125    content: ''; 

126    position: absolute; 

127    width: 50%; 

128    height: 3px; 

129    background: linear-gradient(to right, #e74c3c, #3498db); 

130    bottom: -10px; 

131    left: 25%; 

132  } 

133   

134  /* News Card Styles */ 

135  .news-card { 

136    position: relative; 

137    overflow: hidden; 

138    border-radius: 10px; 

139    transition: all 0.3s ease; 

140    border: none; 

141  } 

142   

143  .news-card:hover { 

144    transform: translateY(-5px); 

145    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 

146  } 

147   

148  .image-container { 

149    overflow: hidden; 

150    border-radius: 10px 10px 0 0; 

151  } 

152   

153  .card-img-top { 

154    height: 200px; 

155    width: 100%; 

156    object-fit: cover; 

157    transition: transform 0.5s ease; 

158  } 

159   

160  .news-card:hover .card-img-top { 

161    transform: scale(1.05); 

162  } 

163   

164  .image-caption { 

165    background-color: rgba(255, 255, 255, 0.9); 

166    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 

167  } 

168   

169  .card-body { 

170    position: absolute; 

171    bottom: 0; 

172    left: 0; 

173    width: 100%; 

174    background-color: rgba(255, 255, 255, 0.98); 

175    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 

176    transform: translateY(100%); 

177    opacity: 0; 

178    padding: 1.5rem; 

179    border-radius: 0 0 10px 10px; 

180  } 

181   

182  .news-card:hover .card-body { 

183    transform: translateY(0); 

184    opacity: 1; 

185  } 

186   

187  .btn-primary { 

188    background-color: #e74c3c; 

189    border-color: #e74c3c; 

190    transition: all 0.3s ease; 

191  } 

192   

193  .btn-primary:hover { 

194    background-color: #c0392b; 

195    border-color: #c0392b; 

196  } 

197   

198  @media (max-width: 768px) { 

199    .card-body { 

200      position: relative; 

201      transform: none; 

202      opacity: 1; 

203      background-color: white; 

204    } 

205     

206    .news-card:hover { 

207      transform: none; 

208    } 

209     

210    .alert-danger { 

211      font-size: 0.9rem; 

212    } 

213  } 

214</style> 

215 

216<script> 

217// You can add this to your theme's main.js or include it separately 

218document.addEventListener('DOMContentLoaded', function() { 

219  // Example of updating the current news alert (can be replaced with dynamic content) 

220 

221   

222  let currentIndex = 0; 

223  const newsElement = document.getElementById('currentNewsText'); 

224   

225  function rotateNews() { 

226    newsElement.textContent = currentNews[currentIndex]; 

227    currentIndex = (currentIndex + 1) % currentNews.length; 

228  } 

229   

230  // Rotate news every 10 seconds 

231  rotateNews(); 

232  setInterval(rotateNews, 10000); 

233}); 

234</script>