Last active
December 9, 2025 10:34
-
-
Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="utf-8" /> | |
| <script src="Scripts/jquery-1.9.1.min.js"></script> | |
| <link href="Content/bootstrap.min.css" rel="stylesheet" /> | |
| <script src="Scripts/isRockFx.js"></script> | |
| <script> | |
| $(function () { | |
| $('#ButtonCal').click( | |
| function () { | |
| //取得用戶輸入的參數 | |
| var para = { 'height': $('#txbHeight').val(), 'weight': $('#txbWeight').val() }; | |
| //呼叫API | |
| ExecuteAPI('Example', 'BMI', para, | |
| //呼叫WebAPI成功時運行的Call Back Function | |
| function (result) { | |
| alert(result.Data); | |
| } | |
| ); | |
| } | |
| ); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="row" style="margin:10px"> | |
| <div class="col-md-12"> | |
| <div class="form-group"> | |
| 身高: | |
| <input id="txbHeight" class="form-control" placeholder="請輸入身高" /> | |
| 體重: | |
| <input id="txbWeight" class="form-control" placeholder="請輸入體重" /> | |
| <br /> | |
| <button class="btn btn-primary" id="ButtonCal">計算</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
<title>Negma Stor</title>
<style>
/* Reset */
body,html {margin:0;padding:0;font-family: sans-serif; background:#f7f7f7; direction: rtl;}
/* شاشة تسجيل الدخول */
#login-screen {
position: fixed;
inset: 0;
background: #111;
display: flex;
justify-content: center;
align-items: center;
color: white;
flex-direction: column;
gap: 15px;
z-index: 9999;
}
#login-screen input {
padding: 10px;
width: 260px;
border-radius: 6px;
border: none;
}
#login-screen button {
padding:10px 20px;
border:none;
border-radius:6px;
cursor:pointer;
background:#e91e63;
color:white;
font-size:16px;
}
/* شاشة الأنيميشن */
#logo-screen {
position: fixed;
inset: 0;
background: #000;
display: none;
justify-content: center;
align-items: center;
z-index: 9998;
}
#logo-screen h1 {
color: white;
font-size: 36px;
animation: pop 2s ease-in-out forwards;
}
@Keyframes pop {
0% {opacity:0;transform:scale(0.6);}
100% {opacity:1;transform:scale(1);}
}
/* رأس الموقع */
header {
background: #222;
padding: 15px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
header h2 {margin:0;}
header .cart {
font-size: 22px;
cursor: pointer;
}
/* المنتجات */
#products {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
gap: 20px;
padding: 20px;
}
.product {
background: white;
padding: 15px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 10px #ccc;
}
.product img {
width: 100%;
border-radius: 10px;
}
.product button {
width: 100%;
padding:10px;
background:#e91e63;
border:none;
color:white;
font-size:16px;
border-radius: 6px;
cursor:pointer;
margin-top: 10px;
}
/* شاشة الطلب */
#order-screen {
position: fixed;
inset:0;
background: rgba(0,0,0,0.8);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}
#order-box {
background:white;
padding:20px;
width:300px;
border-radius:10px;
}
#order-box input, #order-box select {
width:100%;
padding:10px;
margin-top:10px;
border-radius:6px;
border:1px solid #aaa;
}
#order-box button {
width:100%;
padding:10px;
margin-top:15px;
background:#e91e63;
color:white;
border:none;
border-radius:6px;
font-size:16px;
cursor:pointer;
}
</style>
<script>
let selectedItem = "";
let selectedPrice = "";
/* تسجيل الدخول */
function login() {
const email = document.getElementById("email").value;
if(email.trim() === "") {
alert("من فضلك أدخل بريد إلكتروني صحيح");
return;
}
document.getElementById("login-screen").style.display="none";
showLogo();
}
function facebookLogin() {
document.getElementById("login-screen").style.display="none";
showLogo();
}
/* الأنيميشن */
function showLogo(){
const logo = document.getElementById("logo-screen");
logo.style.display="flex";
setTimeout(()=>{logo.style.display="none";},2500);
}
/* شراء منتج */
function buy(name,price) {
selectedItem = name;
selectedPrice = price;
document.getElementById("order-item").innerText = name + " - السعر: " + price + " جنيه";
document.getElementById("order-screen").style.display="flex";
}
/* إلغاء الشراء */
function closeOrder() {
document.getElementById("order-screen").style.display="none";
}
/* تأكيد الطلب */
function confirmOrder() {
const n = document.getElementById("name").value;
const p = document.getElementById("phone").value;
const a = document.getElementById("address").value;
const pay = document.getElementById("payment").value;
if(n==="" || p==="" || a==="") {
alert("من فضلك اكمل كل البيانات");
return;
}
alert("تم إرسال طلبك بنجاح\n" +
"المنتج: "+selectedItem+"\n" +
"السعر: "+selectedPrice+" جنيه\n" +
"طريقة الدفع: "+pay);
document.getElementById("order-screen").style.display="none";
}
</script>
تسجيل دخول
دخول تسجيل عبر FacebookNegma Stor
Negma Stor
تيشيرت رجالي
السعر: 250 جنيه
شراء<div class="product">
<img src="https://via.placeholder.com/250" alt="">
<h3>هودي شتوي</h3>
<p>السعر: 450 جنيه</p>
<button onclick="buy('هودي شتوي',450)">شراء</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250" alt="">
<h3>بنطال جينز</h3>
<p>السعر: 350 جنيه</p>
<button onclick="buy('بنطال جينز',350)">شراء</button>
</div>
إتمام الطلب
<select id="payment">
<option>Instapay</option>
<option>Vodafone Cash</option>
</select>
<button onclick="confirmOrder()">تأكيد الطلب</button>
<button onclick="closeOrder()" style="background:#444;margin-top:5px;">إلغاء</button>
</div>
<title>Negma Stor</title>
<style>
/* Reset */
body,html {margin:0;padding:0;font-family: sans-serif; background:#f7f7f7; direction: rtl;}
/* شاشة تسجيل الدخول */
#login-screen {
position: fixed;
inset: 0;
background: #111;
display: flex;
justify-content: center;
align-items: center;
color: white;
flex-direction: column;
gap: 15px;
z-index: 9999;
}
#login-screen input {
padding: 10px;
width: 260px;
border-radius: 6px;
border: none;
}
#login-screen button {
padding:10px 20px;
border:none;
border-radius:6px;
cursor:pointer;
background:#e91e63;
color:white;
font-size:16px;
}
/* شاشة الأنيميشن */
#logo-screen {
position: fixed;
inset: 0;
background: #000;
display: none;
justify-content: center;
align-items: center;
z-index: 9998;
}
#logo-screen h1 {
color: white;
font-size: 36px;
animation: pop 2s ease-in-out forwards;
}
@Keyframes pop {
0% {opacity:0;transform:scale(0.6);}
100% {opacity:1;transform:scale(1);}
}
/* رأس الموقع */
header {
background: #222;
padding: 15px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
header h2 {margin:0;}
header .cart {
font-size: 22px;
cursor: pointer;
}
/* المنتجات */
#products {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
gap: 20px;
padding: 20px;
}
.product {
background: white;
padding: 15px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 10px #ccc;
}
.product img {
width: 100%;
border-radius: 10px;
}
.product button {
width: 100%;
padding:10px;
background:#e91e63;
border:none;
color:white;
font-size:16px;
border-radius: 6px;
cursor:pointer;
margin-top: 10px;
}
/* شاشة الطلب */
#order-screen {
position: fixed;
inset:0;
background: rgba(0,0,0,0.8);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}
#order-box {
background:white;
padding:20px;
width:300px;
border-radius:10px;
}
#order-box input, #order-box select {
width:100%;
padding:10px;
margin-top:10px;
border-radius:6px;
border:1px solid #aaa;
}
#order-box button {
width:100%;
padding:10px;
margin-top:15px;
background:#e91e63;
color:white;
border:none;
border-radius:6px;
font-size:16px;
cursor:pointer;
}
</style>
<script>
let selectedItem = "";
let selectedPrice = "";
/* تسجيل الدخول */
function login() {
const email = document.getElementById("email").value;
if(email.trim() === "") {
alert("من فضلك أدخل بريد إلكتروني صحيح");
return;
}
document.getElementById("login-screen").style.display="none";
showLogo();
}
function facebookLogin() {
document.getElementById("login-screen").style.display="none";
showLogo();
}
/* الأنيميشن */
function showLogo(){
const logo = document.getElementById("logo-screen");
logo.style.display="flex";
setTimeout(()=>{logo.style.display="none";},2500);
}
/* شراء منتج */
function buy(name,price) {
selectedItem = name;
selectedPrice = price;
document.getElementById("order-item").innerText = name + " - السعر: " + price + " جنيه";
document.getElementById("order-screen").style.display="flex";
}
/* إلغاء الشراء */
function closeOrder() {
document.getElementById("order-screen").style.display="none";
}
/* تأكيد الطلب */
function confirmOrder() {
const n = document.getElementById("name").value;
const p = document.getElementById("phone").value;
const a = document.getElementById("address").value;
const pay = document.getElementById("payment").value;
if(n==="" || p==="" || a==="") {
alert("من فضلك اكمل كل البيانات");
return;
}
alert("تم إرسال طلبك بنجاح\n" +
"المنتج: "+selectedItem+"\n" +
"السعر: "+selectedPrice+" جنيه\n" +
"طريقة الدفع: "+pay);
document.getElementById("order-screen").style.display="none";
}
</script>
تسجيل دخول
دخول تسجيل عبر FacebookNegma Stor
Negma Stor
تيشيرت رجالي
السعر: 250 جنيه
شراء<div class="product">
<img src="https://via.placeholder.com/250" alt="">
<h3>هودي شتوي</h3>
<p>السعر: 450 جنيه</p>
<button onclick="buy('هودي شتوي',450)">شراء</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250" alt="">
<h3>بنطال جينز</h3>
<p>السعر: 350 جنيه</p>
<button onclick="buy('بنطال جينز',350)">شراء</button>
</div>
إتمام الطلب
<select id="payment">
<option>Instapay</option>
<option>Vodafone Cash</option>
</select>
<button onclick="confirmOrder()">تأكيد الطلب</button>
<button onclick="closeOrder()" style="background:#444;margin-top:5px;">إلغاء</button>
</div>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hazme ver mi wep