Untitled Application
MyApp
Author name
1.0
Desktop
False
640
480
False
False
False
False
WebApp
False
C:\Users\asmat\Documents\VisualNeoWeb\Libraries\img\default-icon.png
.blue{
color:red;
}
ul.marker li::marker {
content: "⦾ ";
color: red;
margin: 0.5rm;
font-size: 1.5em;
margin-bottom: 10px;
}
.rotate {
transform: rotate(-90deg);
transition: transform 0.3s ease;
}
.mydate {
color: gray;
padding: 2px 5px 2px 5px;
background: rgba(230, 230, 230, 0.30);
border-radius: 2px;
font-size: 8pt;
}
.item:focus {
outline: none;
}
.item .imageURL {
width: 100px;
height: 100px;
border: 5px solid red;
border-radius: 50%;
}
.item {
background: white;
margin-top: 8px;
/*display: flex;*/
padding: 8px;
/*justify-content: stretch;
align-items: center;
align-content: center;*/
border: 1px solid #d5dedd;
/*flex-wrap: wrap;*/
transition: all 0.4s;
position: relative;
}
.hidden {
display: none;
}
.rotate-90 {
transform: rotate(-90deg);
transition: transform 0.3s;
}
.btnOrange {
background:#f64417;
display: flex;
justify-content: center;
align-items: center;
font-family: "sans";
/*'Arial', sans-serif; */
font-size: 10pt;
font-weight: bold;
color: white;
border-radius: 40px;
transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
padding: 3px 12px;
user-select: none;
-webkit-user-select: none;
}
.btnOrange:hover {
background-color: red;
}
.btnOrange svg {
margin-right: 5px;
}
.flexLeft{display:flex;align-items:center;justify-content:flex-start;}
.flexRight{display:flex;align-items:center;justify-content:flex-end;}
en
standalone
Offline page
#000000
/
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
event.stopPropagation(); // Prevent event bubbling
// Find the closest parent .item
let item = event.currentTarget.closest('.item');
// Find the .body within the item
let body = item.querySelector('.body');
const svgElement = event.currentTarget.querySelector('svg');
// Hide all bodys and reset all SVG rotations
document.querySelectorAll('.item .body').forEach(itembody => {
if (itembody !== body) {
itembody.style.display = 'none';
}
});
document.querySelectorAll('.item svg').forEach(itemSvg => {
if (itemSvg !== svgElement) {
itemSvg.classList.remove('rotate-90');
}
});
// Toggle the display of the body for the clicked item
if (body.style.display === 'none' || body.style.display === '') {
body.style.display = 'block';
svgElement.classList.add('rotate-90');
} else {
body.style.display = 'none';
svgElement.classList.remove('rotate-90');
}
event|STRING|
JavaScript
BEGINJS
$App.pinnedNews = { "body": "شمسیه فرزند محمدنسیم از لیسه محمد آصف مایل شهر کابل با گرفتن ۳۵۳.۱۸۵ نمره مقام اول را به خود اختصاص داده و در دانشکدهی طب دانشگاه طبی کابل کامیاب شده است.",
"imageURL": "https://firebasestorage.googleapis.com/v0/b/kankor-plus-80e20.appspot.com/o/news%2FIMG_20200924_200913.JPG?alt=media&token=1a03edfe-cb8d-47de-96fd-4b5adb578d4b",
"mydate": "2020-09-24T15:34:00",
"title": "اول نمره عمومی کانکور سال 1399",
"readmore" :"<p class='blue'> This line must be rendered</p>"
}
ENDJS
130px
31px
400px
10px
<div class="item" tabindex="0" style="box-shadow:0 3px 26px #00000010;">
<svg style="position:absolute;left:6px;top:8px;witdth:18px;height:18px;" fill="#f64417" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pin</title><path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" /></svg>
<span style="position:absolute;left:5px;top:5px;z-index:10;" class="mydate"></span>
<div style="position:relative; padding: 5px;min-height:110px;">
<a class="link" href="[pinnedNews.imageURL]">
<img style="float:right;" class="imageURL" alt="news" src="[pinnedNews.imageURL]">
</a>
<h4 class="title" style="padding-left:10px;padding-right:10px;color: #FE2712;font-weight:bold;font-family:sans;">
[pinnedNews.title]
</h4>
<p class="readmore" style="color:gray;font-size:9pt;padding-left:10px;padding-right:10px;">
[pinnedNews.readmore]
</p>
<div class="flexRight">
<span class="btnOrange"
onclick="neo.toggleShowAndHideClassBody(event)">
خواندن
<svg style="width:24px;height:24px" viewBox="0 0 24 24" id="id74" aria-describedby="tippy-75">
<path fill="currentColor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path>
</svg>
</span>
</div>
</div>
<div style="background:#F5F5F5;display:none;padding:8px;" class="body">
[pinnedNews.body]
</div>
</div>
0px
0px
640px
480px
False
custom