Update travel website submodule
This commit is contained in:
yourname
@@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
html{
|
||||
background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed;
|
||||
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(background.jpg) no-repeat center center fixed;
|
||||
}
|
||||
|
||||
.container{
|
||||
@@ -78,7 +78,7 @@ padding-bottom: 75px;
|
||||
padding-right: 75px;
|
||||
}
|
||||
.wrapper .box .front-face{
|
||||
background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg);
|
||||
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(background.jpg);
|
||||
background-size: cover;
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
@@ -147,35 +147,35 @@ transform: translateY(-110px) rotateX(90deg);
|
||||
/*Boxes Backgrounds*/
|
||||
|
||||
.box .front-face.face1{
|
||||
background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Egypt-Valley-of-the-kings.jpg);
|
||||
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(Egypt-Valley-of-the-kings.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face2{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-mosque-cairo.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(egypt-mosque-cairo.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face3{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-temples.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(egypt-temples.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face4{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(gouna.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(gouna.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face5{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(sharm.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(sharm.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face6{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(saint-catherines-monastery.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(saint-catherines-monastery.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face7{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(alexandria-egypt-library.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(alexandria-egypt-library.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(flag.jpg);
|
||||
}
|
||||
|
||||
.box .back-face button{
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
html{
|
||||
background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed;
|
||||
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(background.jpg) no-repeat center center fixed;
|
||||
}
|
||||
|
||||
.container{
|
||||
@@ -78,7 +78,7 @@ nav ul li{
|
||||
padding-right: 75px;
|
||||
}
|
||||
.wrapper .box .front-face{
|
||||
background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg);
|
||||
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(background.jpg);
|
||||
background-size: cover;
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
@@ -146,21 +146,21 @@ nav ul li{
|
||||
/*Boxes Backgrounds*/
|
||||
|
||||
.box .front-face.face1{
|
||||
background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(info-box1.jpg);
|
||||
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(info-box1.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face2{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box2.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(info-box2.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face3{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box3.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(info-box3.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face4{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box4.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(info-box4.jpg);
|
||||
}
|
||||
|
||||
.box .front-face.face5{
|
||||
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg);
|
||||
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(flag.jpg);
|
||||
}
|
||||
943
egypt/index.html
943
egypt/index.html
@@ -2,52 +2,917 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<title>Index - egypt</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f5f5f5;
|
||||
--bg-card: #fafafa;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--border-color: #e0e0e0;
|
||||
--accent-color: rgb(0, 148, 202);
|
||||
--accent-gradient: linear-gradient(135deg, rgb(0, 148, 202) 0%, rgb(0, 120, 170) 100%);
|
||||
--hover-bg: #f0f0f0;
|
||||
--shadow: rgba(0, 148, 202, 0.1);
|
||||
--folder-icon: rgb(237, 137, 54);
|
||||
--file-icon: rgb(0, 148, 202);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #1a1a2e;
|
||||
--bg-secondary: #16213e;
|
||||
--bg-card: #0f3460;
|
||||
--text-primary: #eaeaea;
|
||||
--text-secondary: #a0a0a0;
|
||||
--border-color: #404040;
|
||||
--accent-color: rgb(0, 148, 202);
|
||||
--accent-gradient: linear-gradient(135deg, rgb(0, 148, 202) 0%, rgb(0, 120, 170) 100%);
|
||||
--hover-bg: #1e2a3a;
|
||||
--shadow: rgba(0, 0, 0, 0.3);
|
||||
--folder-icon: rgb(246, 173, 85);
|
||||
--file-icon: rgb(0, 148, 202);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-nav-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quick-nav-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.quick-nav-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.quick-nav-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px var(--shadow);
|
||||
min-width: 250px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
animation: slideDown 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.quick-nav-dropdown.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quick-nav-item {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.quick-nav-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.quick-nav-item:hover {
|
||||
background: var(--hover-bg);
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
background: var(--bg-primary);
|
||||
padding: 30px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
h1:hover {
|
||||
color: var(--accent-color);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
background: var(--hover-bg);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: inline-block;
|
||||
background: var(--bg-card);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* ===== SEARCH RESULTS ===== */
|
||||
.search-results {
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-results.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.search-results-header {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.search-result-item:hover {
|
||||
background: var(--hover-bg);
|
||||
transform: translateX(5px);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.search-result-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 4px;
|
||||
margin-right: 12px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.search-result-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-result-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.search-result-meta {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.44rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.file-list {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s ease;
|
||||
animation: fadeInUp 0.3s ease;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background: var(--hover-bg);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 4px 12px var(--shadow);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--file-icon);
|
||||
border-radius: 4px;
|
||||
margin-right: 15px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.file-icon.folder {
|
||||
background: var(--folder-icon);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.06rem;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-folder {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
background: var(--hover-bg);
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.file-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<!-- External CSS for global search -->
|
||||
<link rel="stylesheet" href="../../../../../../../../css/global-search.css">
|
||||
<!-- Shared navbar styles -->
|
||||
<link rel="stylesheet" href="../../../../../../../../css/navbar.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar will be injected here -->
|
||||
<div data-navbar-placeholder></div>
|
||||
|
||||
<div class="container">
|
||||
<div class="navbar">
|
||||
<h2 class="logo">EGYPT</h2>
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="li1">Home</li>
|
||||
<li id="li2">History</li>
|
||||
<li id="li3">Explore</li>
|
||||
<div class="content">
|
||||
<div class="section">
|
||||
<h2 class="section-title">Files</h2>
|
||||
<ul class="file-list">
|
||||
<li>
|
||||
<a href="./alexandria-egypt-library.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">alexandria-egypt-library.jpg</div>
|
||||
<div class="file-meta">IMG · 99.1 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./background.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">background.jpg</div>
|
||||
<div class="file-meta">IMG · 236.0 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./card1.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">card1.jpg</div>
|
||||
<div class="file-meta">IMG · 305.1 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./card2.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">card2.jpg</div>
|
||||
<div class="file-meta">IMG · 200.5 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./card3.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">card3.jpg</div>
|
||||
<div class="file-meta">IMG · 220.8 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./card4.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">card4.jpg</div>
|
||||
<div class="file-meta">IMG · 164.9 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./egypt-mosque-cairo.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">egypt-mosque-cairo.jpg</div>
|
||||
<div class="file-meta">IMG · 104.6 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./egypt-temples.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">egypt-temples.jpg</div>
|
||||
<div class="file-meta">IMG · 66.0 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./Egypt-Valley-of-the-kings.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">Egypt-Valley-of-the-kings.jpg</div>
|
||||
<div class="file-meta">IMG · 101.0 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./Explore.css" class="file-item">
|
||||
<div class="file-icon">CSS</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">Explore.css</div>
|
||||
<div class="file-meta">CSS · 3.8 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./Explore.html" class="file-item" target="_blank">
|
||||
<div class="file-icon">HTML</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">Explore.html</div>
|
||||
<div class="file-meta">HTML · 4.8 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./flag.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">flag.jpg</div>
|
||||
<div class="file-meta">IMG · 5.7 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./gouna.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">gouna.jpg</div>
|
||||
<div class="file-meta">IMG · 53.6 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./History.css" class="file-item">
|
||||
<div class="file-icon">CSS</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">History.css</div>
|
||||
<div class="file-meta">CSS · 3.2 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./History.html" class="file-item" target="_blank">
|
||||
<div class="file-icon">HTML</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">History.html</div>
|
||||
<div class="file-meta">HTML · 4.7 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./info-box1.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">info-box1.jpg</div>
|
||||
<div class="file-meta">IMG · 465.0 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./info-box2.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">info-box2.jpg</div>
|
||||
<div class="file-meta">IMG · 112.5 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./info-box3.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">info-box3.jpg</div>
|
||||
<div class="file-meta">IMG · 423.2 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./info-box4.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">info-box4.jpg</div>
|
||||
<div class="file-meta">IMG · 282.3 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./saint-catherines-monastery.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">saint-catherines-monastery.jpg</div>
|
||||
<div class="file-meta">IMG · 100.9 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./script.js" class="file-item">
|
||||
<div class="file-icon">JS</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">script.js</div>
|
||||
<div class="file-meta">JS · 946 B</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./sharm.jpg" class="file-item">
|
||||
<div class="file-icon">IMG</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">sharm.jpg</div>
|
||||
<div class="file-meta">IMG · 132.3 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./start.html" class="file-item" target="_blank">
|
||||
<div class="file-icon">HTML</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">start.html</div>
|
||||
<div class="file-meta">HTML · 3.0 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./style.css" class="file-item">
|
||||
<div class="file-icon">CSS</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">style.css</div>
|
||||
<div class="file-meta">CSS · 5.2 KB</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1>Egypt</h1>
|
||||
<p>The Mother of the world & the start Civilization</p>
|
||||
<button type="button" class="explore" id="btn1">Explore</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card card1">
|
||||
<h5>Abu Simbel</h5>
|
||||
<p>Abu Simbel is an archaeological site comprising two massive rock-cut temples in southern Egypt on the western bank of Lake Nasser. The twin temples were originally carved out of the mountainside during the reign of Pharaoh Ramesses The Great in the 13th century BC</p>
|
||||
</div>
|
||||
<div class="card card2">
|
||||
<h5>Siwa Oasis</h5>
|
||||
<p>Siwa Oasis is one of Egypt’s isolated settlements,Located on an old date trade route, Siwa was an oasis vital to the trade route, as the natural springs and shade giving palm trees gave travelers respite from the desert.</p>
|
||||
</div>
|
||||
<div class="card card3">
|
||||
<h5>Giza Necropolis</h5>
|
||||
<p>The Pyramids of Giza, situated in the immediate vicinity of the southwestern suburbs of Cairo are the undisputable top attractions in Egypt. The pyramids at Giza were built over the span of three generations by Khufu, his second reigning son Khafre, and Menkaure</p>
|
||||
</div>
|
||||
<div class="card card4">
|
||||
<h5>Red Sea Reef</h5>
|
||||
<p>The Red Sea, off the coast of Egypt, is one of the most beautiful places in the world to go diving. The waters of the Red Sea are renowned for their spectacular visibility and features some of the most exotic seascapes. With its wide expanse of coral formation on the reefs, it is home to thousands of different sea creatures.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
|
||||
<!-- External JavaScript for global search -->
|
||||
<script src="../../../../../../../../js/global-search.js"></script>
|
||||
|
||||
<script>
|
||||
// Theme toggle functionality
|
||||
function toggleTheme() {
|
||||
const html = document.documentElement;
|
||||
const buttons = document.querySelectorAll('.theme-toggle-nav');
|
||||
|
||||
if (!html) return;
|
||||
|
||||
const currentTheme = html.getAttribute('data-theme');
|
||||
|
||||
if (currentTheme === 'dark') {
|
||||
html.setAttribute('data-theme', 'light');
|
||||
buttons.forEach(btn => btn.textContent = '🌓 Theme');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
html.setAttribute('data-theme', 'dark');
|
||||
buttons.forEach(btn => btn.textContent = '☀️ Theme');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize theme on page load - DARK MODE IS DEFAULT
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark mode
|
||||
const html = document.documentElement;
|
||||
const buttons = document.querySelectorAll('.theme-toggle-nav');
|
||||
|
||||
if (html) {
|
||||
html.setAttribute('data-theme', savedTheme);
|
||||
buttons.forEach(btn => {
|
||||
btn.textContent = savedTheme === 'dark' ? '☀️ Theme' : '🌓 Theme';
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize global search
|
||||
if (typeof initGlobalSearch === 'function') {
|
||||
initGlobalSearch();
|
||||
}
|
||||
|
||||
// Check for search parameter in URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const searchTerm = urlParams.get('search');
|
||||
if (searchTerm) {
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
if (searchInput) {
|
||||
searchInput.value = searchTerm;
|
||||
// Enable entire site search by default when using URL parameter
|
||||
if (!isEntireSiteSearch) {
|
||||
toggleSearchScope();
|
||||
}
|
||||
performSearch(searchTerm);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Quick Navigation Toggle
|
||||
function toggleQuickNav() {
|
||||
const dropdown = document.getElementById('quickNavDropdown');
|
||||
if (dropdown) {
|
||||
dropdown.classList.toggle('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Close quick nav when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
const container = document.querySelector('.quick-nav-container');
|
||||
const dropdown = document.getElementById('quickNavDropdown');
|
||||
|
||||
if (container && dropdown && !container.contains(e.target)) {
|
||||
dropdown.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Search functionality
|
||||
let isEntireSiteSearch = false;
|
||||
let searchIndex = null;
|
||||
|
||||
// Load search index for entire site search
|
||||
async function loadSearchIndex() {
|
||||
if (searchIndex) return searchIndex;
|
||||
|
||||
try {
|
||||
const response = await fetch('/search_index.json');
|
||||
if (response.ok) {
|
||||
searchIndex = await response.json();
|
||||
console.log('✅ Global search index loaded:', searchIndex.total_items, 'items');
|
||||
return searchIndex;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('ℹ️ Using local folder search only');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function toggleSearchScope() {
|
||||
isEntireSiteSearch = !isEntireSiteSearch;
|
||||
const toggle = document.getElementById('scopeToggle');
|
||||
const label = document.getElementById('scopeLabel');
|
||||
const input = document.getElementById('searchInput');
|
||||
|
||||
if (toggle) {
|
||||
toggle.classList.toggle('active', isEntireSiteSearch);
|
||||
}
|
||||
if (label) {
|
||||
label.textContent = isEntireSiteSearch ? 'Entire Site' : 'Current Folder';
|
||||
}
|
||||
if (input) {
|
||||
input.placeholder = isEntireSiteSearch ? 'Search entire site...' : 'Search in current folder...';
|
||||
}
|
||||
|
||||
// Re-perform search if there's text
|
||||
const currentValue = input ? input.value : '';
|
||||
if (currentValue) {
|
||||
performSearch(currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch(event) {
|
||||
if (event.key === 'Escape') {
|
||||
clearSearch();
|
||||
return;
|
||||
}
|
||||
|
||||
const searchTerm = event.target.value.trim();
|
||||
if (searchTerm.length > 0) {
|
||||
performSearch(searchTerm);
|
||||
} else {
|
||||
clearSearch();
|
||||
}
|
||||
}
|
||||
|
||||
async function performSearch(searchTerm) {
|
||||
const resultsDiv = document.getElementById('searchResults');
|
||||
if (!resultsDiv) return;
|
||||
|
||||
if (isEntireSiteSearch) {
|
||||
await performGlobalSearch(searchTerm, resultsDiv);
|
||||
} else {
|
||||
performLocalSearch(searchTerm, resultsDiv);
|
||||
}
|
||||
}
|
||||
|
||||
function performLocalSearch(searchTerm, resultsDiv) {
|
||||
const term = searchTerm.toLowerCase();
|
||||
const items = document.querySelectorAll('.file-item');
|
||||
const results = [];
|
||||
|
||||
items.forEach(item => {
|
||||
const nameElement = item.querySelector('.file-name');
|
||||
if (nameElement) {
|
||||
const name = nameElement.textContent.toLowerCase();
|
||||
if (name.includes(term)) {
|
||||
results.push({
|
||||
element: item,
|
||||
name: nameElement.textContent,
|
||||
href: item.href,
|
||||
type: item.querySelector('.file-icon').textContent,
|
||||
meta: item.querySelector('.file-meta').textContent
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
displaySearchResults(results, searchTerm, resultsDiv, false);
|
||||
}
|
||||
|
||||
async function performGlobalSearch(searchTerm, resultsDiv) {
|
||||
const index = await loadSearchIndex();
|
||||
if (!index) {
|
||||
resultsDiv.innerHTML = '<div class="search-results-header">ℹ️ Global search not available. Showing local results only.</div>';
|
||||
resultsDiv.classList.add('active');
|
||||
performLocalSearch(searchTerm, resultsDiv);
|
||||
return;
|
||||
}
|
||||
|
||||
const term = searchTerm.toLowerCase();
|
||||
const matches = index.items.filter(item =>
|
||||
item.name.toLowerCase().includes(term)
|
||||
).slice(0, 50); // Limit to 50 results
|
||||
|
||||
displaySearchResults(matches, searchTerm, resultsDiv, true);
|
||||
}
|
||||
|
||||
function displaySearchResults(results, searchTerm, resultsDiv, isGlobal) {
|
||||
if (results.length === 0) {
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="search-results-header">😕 No results found</div>
|
||||
<p style="color: var(--text-secondary); padding: 10px;">Try different keywords or check your spelling.</p>
|
||||
`;
|
||||
resultsDiv.classList.add('active');
|
||||
return;
|
||||
}
|
||||
|
||||
const scopeText = isGlobal ? '🌐 Global Search' : '📁 Local Search';
|
||||
let html = `<div class="search-results-header">${scopeText} Results (${results.length} found)</div>`;
|
||||
|
||||
results.forEach(result => {
|
||||
const highlightedName = highlightMatch(result.name, searchTerm);
|
||||
const icon = result.type === 'DIR' || result.type === 'Folder' ? '[DIR]' : '[FILE]';
|
||||
|
||||
html += `
|
||||
<a href="${result.href || result.path}" class="search-result-item">
|
||||
<div class="search-result-icon">${icon}</div>
|
||||
<div class="search-result-info">
|
||||
<div class="search-result-name">${highlightedName}</div>
|
||||
<div class="search-result-meta">${result.type || 'File'} • ${result.meta || result.size || ''} ${result.location ? '• ' + result.location : ''}</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
});
|
||||
|
||||
resultsDiv.innerHTML = html;
|
||||
resultsDiv.classList.add('active');
|
||||
}
|
||||
|
||||
function highlightMatch(text, searchTerm) {
|
||||
const escaped = escapeRegex(searchTerm);
|
||||
const regex = new RegExp('(' + escaped + ')', 'gi');
|
||||
return text.replace(regex, '<span class="highlight">$1</span>');
|
||||
}
|
||||
|
||||
function escapeRegex(string) {
|
||||
// Escape special regex characters
|
||||
return string.split('').map(function(char) {
|
||||
if ('[]/{}()*+?.-^$|\\'.indexOf(char) !== -1) {
|
||||
return '\\' + char;
|
||||
}
|
||||
return char;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
const input = document.getElementById('searchInput');
|
||||
const resultsDiv = document.getElementById('searchResults');
|
||||
|
||||
if (input) input.value = '';
|
||||
if (resultsDiv) {
|
||||
resultsDiv.classList.remove('active');
|
||||
resultsDiv.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// ===== AUTO-REFRESH TO DETECT CHANGES (works on remote hosting) =====
|
||||
(function() {
|
||||
const REFRESH_INTERVAL = 30000; // 30 seconds
|
||||
const STORAGE_KEY = 'last_index_update_' + window.location.pathname;
|
||||
|
||||
// Store initial load time
|
||||
if (!sessionStorage.getItem(STORAGE_KEY)) {
|
||||
sessionStorage.setItem(STORAGE_KEY, Date.now());
|
||||
}
|
||||
|
||||
// Check for content changes periodically
|
||||
setInterval(function() {
|
||||
fetch(window.location.href, { cache: 'no-store' })
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const newDoc = parser.parseFromString(html, 'text/html');
|
||||
const currentStats = document.querySelector('.stats');
|
||||
const newStats = newDoc.querySelector('.stats');
|
||||
|
||||
// If stats changed (folder/file count), reload the page
|
||||
if (currentStats && newStats && currentStats.innerHTML !== newStats.innerHTML) {
|
||||
console.log('📄 Directory contents changed, refreshing...');
|
||||
window.location.reload();
|
||||
}
|
||||
})
|
||||
.catch(err => console.log('Checking for updates...'));
|
||||
}, REFRESH_INTERVAL);
|
||||
})();
|
||||
</script>
|
||||
<!-- Load shared navbar component -->
|
||||
<script src="../../../../../../../../js/navbar-loader.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
var button = document.getElementById("li1");
|
||||
|
||||
button.addEventListener("click", function(){
|
||||
document.location.href = 'index.html';
|
||||
document.location.href = 'start.html';
|
||||
});
|
||||
|
||||
var button = document.getElementById("li2");
|
||||
@@ -17,12 +17,21 @@ button.addEventListener("click", function(){
|
||||
document.location.href = 'Explore.html';
|
||||
});
|
||||
|
||||
// Logo - Home button
|
||||
var logoButton = document.getElementById("logo-home");
|
||||
|
||||
if (logoButton) {
|
||||
logoButton.addEventListener("click", function(){
|
||||
document.location.href = 'start.html';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//btns
|
||||
var button = document.getElementById("btn1");
|
||||
|
||||
button.addEventListener("click", function(){
|
||||
document.location.href = '/Explore.html';
|
||||
document.location.href = 'Explore.html';
|
||||
});
|
||||
|
||||
var button = document.getElementById("btn2");
|
||||
|
||||
53
egypt/start.html
Normal file
53
egypt/start.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="navbar">
|
||||
<h2 class="logo" id="logo-home">EGYPT</h2>
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="li1">Home</li>
|
||||
<li id="li2">History</li>
|
||||
<li id="li3">Explore</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1>Egypt</h1>
|
||||
<p>The Mother of the world & the start Civilization</p>
|
||||
<button type="button" class="explore" id="btn1">Explore</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card card1">
|
||||
<h5>Abu Simbel</h5>
|
||||
<p>Abu Simbel is an archaeological site comprising two massive rock-cut temples in southern Egypt on the western bank of Lake Nasser. The twin temples were originally carved out of the mountainside during the reign of Pharaoh Ramesses The Great in the 13th century BC</p>
|
||||
</div>
|
||||
<div class="card card2">
|
||||
<h5>Siwa Oasis</h5>
|
||||
<p>Siwa Oasis is one of Egypt’s isolated settlements,Located on an old date trade route, Siwa was an oasis vital to the trade route, as the natural springs and shade giving palm trees gave travelers respite from the desert.</p>
|
||||
</div>
|
||||
<div class="card card3">
|
||||
<h5>Giza Necropolis</h5>
|
||||
<p>The Pyramids of Giza, situated in the immediate vicinity of the southwestern suburbs of Cairo are the undisputable top attractions in Egypt. The pyramids at Giza were built over the span of three generations by Khufu, his second reigning son Khafre, and Menkaure</p>
|
||||
</div>
|
||||
<div class="card card4">
|
||||
<h5>Red Sea Reef</h5>
|
||||
<p>The Red Sea, off the coast of Egypt, is one of the most beautiful places in the world to go diving. The waters of the Red Sea are renowned for their spectacular visibility and features some of the most exotic seascapes. With its wide expanse of coral formation on the reefs, it is home to thousands of different sea creatures.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
330
egypt/style.css
330
egypt/style.css
@@ -1,122 +1,300 @@
|
||||
*{
|
||||
/* Modern, impactful styling for Egypt travel website */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.container{
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg);
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url(background.jpg);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
padding-left: 8%;
|
||||
padding-right: 8%;
|
||||
background-attachment: fixed;
|
||||
padding: 0 8%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
/* Enhanced navbar with modern styling */
|
||||
.navbar {
|
||||
height: 12%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.logo{
|
||||
width: 50px;
|
||||
.logo {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-weight: 700;
|
||||
font-size: 2.5rem;
|
||||
color: #FFD700; /* Gold color for luxury feel */
|
||||
text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar i{
|
||||
width: 30px;
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
text-shadow: 0 4px 12px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.navbar i {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
nav{
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav ul li{
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin-left: 60px;
|
||||
margin-left: 20px;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.row{
|
||||
font-size: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
height: 88%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex-basis: 50%;
|
||||
.navbar i:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
h1{
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin-left: 40px;
|
||||
color: white;
|
||||
font-size: 100px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 8px 16px;
|
||||
border-radius: 25px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
p{
|
||||
nav ul li:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Modern hero section */
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.col:first-child {
|
||||
flex: 1;
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
line-height: 15px;
|
||||
animation: fadeInUp 1s ease;
|
||||
}
|
||||
|
||||
button{
|
||||
width: 180px;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
padding: 12px 0;
|
||||
background: whitesmoke;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
-ms-border-radius: 20px;
|
||||
-o-border-radius: 20px;
|
||||
outline: none;
|
||||
margin-top: 30px;
|
||||
.col:last-child {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
animation: fadeIn 1.2s ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Modern explore button */
|
||||
.explore {
|
||||
background: linear-gradient(135deg, #FF8C00 0%, #FF6B35 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 16px 40px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.explore:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 25px rgba(255, 107, 53, 0.6);
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C00 100%);
|
||||
}
|
||||
|
||||
/* Modern card design */
|
||||
.card {
|
||||
width: 200px;
|
||||
height: 230px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-ms-border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
padding: 15px 25px;
|
||||
box-sizing: border-box;
|
||||
margin: 10px 15px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.card h5{
|
||||
color: white;
|
||||
text-decoration: bold;
|
||||
.card:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.card1{
|
||||
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card1.jpg);
|
||||
.card h5 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card2{
|
||||
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card2.jpg);
|
||||
.card h5::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: linear-gradient(135deg, #FF8C00, #FF6B35);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.card3{
|
||||
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card3.jpg);
|
||||
.card p {
|
||||
color: #555;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card4{
|
||||
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card4.jpg);
|
||||
/* Responsive design */
|
||||
@media (max-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
min-height: auto;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.col:last-child {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin: 0 15px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 5%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.explore {
|
||||
padding: 14px 30px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional modern touches */
|
||||
body {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
711
index.html
Normal file
711
index.html
Normal file
@@ -0,0 +1,711 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Index - travel-website</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f5f5f5;
|
||||
--bg-card: #fafafa;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--border-color: #e0e0e0;
|
||||
--accent-color: rgb(0, 148, 202);
|
||||
--accent-gradient: linear-gradient(135deg, rgb(0, 148, 202) 0%, rgb(0, 120, 170) 100%);
|
||||
--hover-bg: #f0f0f0;
|
||||
--shadow: rgba(0, 148, 202, 0.1);
|
||||
--folder-icon: rgb(237, 137, 54);
|
||||
--file-icon: rgb(0, 148, 202);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #1a1a2e;
|
||||
--bg-secondary: #16213e;
|
||||
--bg-card: #0f3460;
|
||||
--text-primary: #eaeaea;
|
||||
--text-secondary: #a0a0a0;
|
||||
--border-color: #404040;
|
||||
--accent-color: rgb(0, 148, 202);
|
||||
--accent-gradient: linear-gradient(135deg, rgb(0, 148, 202) 0%, rgb(0, 120, 170) 100%);
|
||||
--hover-bg: #1e2a3a;
|
||||
--shadow: rgba(0, 0, 0, 0.3);
|
||||
--folder-icon: rgb(246, 173, 85);
|
||||
--file-icon: rgb(0, 148, 202);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-nav-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quick-nav-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.quick-nav-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.quick-nav-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px var(--shadow);
|
||||
min-width: 250px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
animation: slideDown 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.quick-nav-dropdown.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quick-nav-item {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.quick-nav-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.quick-nav-item:hover {
|
||||
background: var(--hover-bg);
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
background: var(--bg-primary);
|
||||
padding: 30px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
h1:hover {
|
||||
color: var(--accent-color);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
background: var(--hover-bg);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: inline-block;
|
||||
background: var(--bg-card);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* ===== SEARCH RESULTS ===== */
|
||||
.search-results {
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-results.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.search-results-header {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.search-result-item:hover {
|
||||
background: var(--hover-bg);
|
||||
transform: translateX(5px);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.search-result-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 4px;
|
||||
margin-right: 12px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.search-result-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-result-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.search-result-meta {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.44rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.file-list {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s ease;
|
||||
animation: fadeInUp 0.3s ease;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background: var(--hover-bg);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 4px 12px var(--shadow);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--file-icon);
|
||||
border-radius: 4px;
|
||||
margin-right: 15px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.file-icon.folder {
|
||||
background: var(--folder-icon);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.06rem;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-folder {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
background: var(--hover-bg);
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.file-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<!-- External CSS for global search -->
|
||||
<link rel="stylesheet" href="../../../../../../../css/global-search.css">
|
||||
<!-- Shared navbar styles -->
|
||||
<link rel="stylesheet" href="../../../../../../../css/navbar.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar will be injected here -->
|
||||
<div data-navbar-placeholder></div>
|
||||
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<div class="section">
|
||||
<h2 class="section-title">Folders</h2>
|
||||
<ul class="file-list">
|
||||
<li>
|
||||
<a href="./egypt/" class="file-item">
|
||||
<div class="file-icon folder">DIR</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">egypt</div>
|
||||
<div class="file-meta">26 items</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- External JavaScript for global search -->
|
||||
<script src="../../../../../../../js/global-search.js"></script>
|
||||
|
||||
<script>
|
||||
// Theme toggle functionality
|
||||
function toggleTheme() {
|
||||
const html = document.documentElement;
|
||||
const buttons = document.querySelectorAll('.theme-toggle-nav');
|
||||
|
||||
if (!html) return;
|
||||
|
||||
const currentTheme = html.getAttribute('data-theme');
|
||||
|
||||
if (currentTheme === 'dark') {
|
||||
html.setAttribute('data-theme', 'light');
|
||||
buttons.forEach(btn => btn.textContent = '🌓 Theme');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
html.setAttribute('data-theme', 'dark');
|
||||
buttons.forEach(btn => btn.textContent = '☀️ Theme');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize theme on page load - DARK MODE IS DEFAULT
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark mode
|
||||
const html = document.documentElement;
|
||||
const buttons = document.querySelectorAll('.theme-toggle-nav');
|
||||
|
||||
if (html) {
|
||||
html.setAttribute('data-theme', savedTheme);
|
||||
buttons.forEach(btn => {
|
||||
btn.textContent = savedTheme === 'dark' ? '☀️ Theme' : '🌓 Theme';
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize global search
|
||||
if (typeof initGlobalSearch === 'function') {
|
||||
initGlobalSearch();
|
||||
}
|
||||
|
||||
// Check for search parameter in URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const searchTerm = urlParams.get('search');
|
||||
if (searchTerm) {
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
if (searchInput) {
|
||||
searchInput.value = searchTerm;
|
||||
// Enable entire site search by default when using URL parameter
|
||||
if (!isEntireSiteSearch) {
|
||||
toggleSearchScope();
|
||||
}
|
||||
performSearch(searchTerm);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Quick Navigation Toggle
|
||||
function toggleQuickNav() {
|
||||
const dropdown = document.getElementById('quickNavDropdown');
|
||||
if (dropdown) {
|
||||
dropdown.classList.toggle('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Close quick nav when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
const container = document.querySelector('.quick-nav-container');
|
||||
const dropdown = document.getElementById('quickNavDropdown');
|
||||
|
||||
if (container && dropdown && !container.contains(e.target)) {
|
||||
dropdown.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Search functionality
|
||||
let isEntireSiteSearch = false;
|
||||
let searchIndex = null;
|
||||
|
||||
// Load search index for entire site search
|
||||
async function loadSearchIndex() {
|
||||
if (searchIndex) return searchIndex;
|
||||
|
||||
try {
|
||||
const response = await fetch('/search_index.json');
|
||||
if (response.ok) {
|
||||
searchIndex = await response.json();
|
||||
console.log('✅ Global search index loaded:', searchIndex.total_items, 'items');
|
||||
return searchIndex;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('ℹ️ Using local folder search only');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function toggleSearchScope() {
|
||||
isEntireSiteSearch = !isEntireSiteSearch;
|
||||
const toggle = document.getElementById('scopeToggle');
|
||||
const label = document.getElementById('scopeLabel');
|
||||
const input = document.getElementById('searchInput');
|
||||
|
||||
if (toggle) {
|
||||
toggle.classList.toggle('active', isEntireSiteSearch);
|
||||
}
|
||||
if (label) {
|
||||
label.textContent = isEntireSiteSearch ? 'Entire Site' : 'Current Folder';
|
||||
}
|
||||
if (input) {
|
||||
input.placeholder = isEntireSiteSearch ? 'Search entire site...' : 'Search in current folder...';
|
||||
}
|
||||
|
||||
// Re-perform search if there's text
|
||||
const currentValue = input ? input.value : '';
|
||||
if (currentValue) {
|
||||
performSearch(currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch(event) {
|
||||
if (event.key === 'Escape') {
|
||||
clearSearch();
|
||||
return;
|
||||
}
|
||||
|
||||
const searchTerm = event.target.value.trim();
|
||||
if (searchTerm.length > 0) {
|
||||
performSearch(searchTerm);
|
||||
} else {
|
||||
clearSearch();
|
||||
}
|
||||
}
|
||||
|
||||
async function performSearch(searchTerm) {
|
||||
const resultsDiv = document.getElementById('searchResults');
|
||||
if (!resultsDiv) return;
|
||||
|
||||
if (isEntireSiteSearch) {
|
||||
await performGlobalSearch(searchTerm, resultsDiv);
|
||||
} else {
|
||||
performLocalSearch(searchTerm, resultsDiv);
|
||||
}
|
||||
}
|
||||
|
||||
function performLocalSearch(searchTerm, resultsDiv) {
|
||||
const term = searchTerm.toLowerCase();
|
||||
const items = document.querySelectorAll('.file-item');
|
||||
const results = [];
|
||||
|
||||
items.forEach(item => {
|
||||
const nameElement = item.querySelector('.file-name');
|
||||
if (nameElement) {
|
||||
const name = nameElement.textContent.toLowerCase();
|
||||
if (name.includes(term)) {
|
||||
results.push({
|
||||
element: item,
|
||||
name: nameElement.textContent,
|
||||
href: item.href,
|
||||
type: item.querySelector('.file-icon').textContent,
|
||||
meta: item.querySelector('.file-meta').textContent
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
displaySearchResults(results, searchTerm, resultsDiv, false);
|
||||
}
|
||||
|
||||
async function performGlobalSearch(searchTerm, resultsDiv) {
|
||||
const index = await loadSearchIndex();
|
||||
if (!index) {
|
||||
resultsDiv.innerHTML = '<div class="search-results-header">ℹ️ Global search not available. Showing local results only.</div>';
|
||||
resultsDiv.classList.add('active');
|
||||
performLocalSearch(searchTerm, resultsDiv);
|
||||
return;
|
||||
}
|
||||
|
||||
const term = searchTerm.toLowerCase();
|
||||
const matches = index.items.filter(item =>
|
||||
item.name.toLowerCase().includes(term)
|
||||
).slice(0, 50); // Limit to 50 results
|
||||
|
||||
displaySearchResults(matches, searchTerm, resultsDiv, true);
|
||||
}
|
||||
|
||||
function displaySearchResults(results, searchTerm, resultsDiv, isGlobal) {
|
||||
if (results.length === 0) {
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="search-results-header">😕 No results found</div>
|
||||
<p style="color: var(--text-secondary); padding: 10px;">Try different keywords or check your spelling.</p>
|
||||
`;
|
||||
resultsDiv.classList.add('active');
|
||||
return;
|
||||
}
|
||||
|
||||
const scopeText = isGlobal ? '🌐 Global Search' : '📁 Local Search';
|
||||
let html = `<div class="search-results-header">${scopeText} Results (${results.length} found)</div>`;
|
||||
|
||||
results.forEach(result => {
|
||||
const highlightedName = highlightMatch(result.name, searchTerm);
|
||||
const icon = result.type === 'DIR' || result.type === 'Folder' ? '[DIR]' : '[FILE]';
|
||||
|
||||
html += `
|
||||
<a href="${result.href || result.path}" class="search-result-item">
|
||||
<div class="search-result-icon">${icon}</div>
|
||||
<div class="search-result-info">
|
||||
<div class="search-result-name">${highlightedName}</div>
|
||||
<div class="search-result-meta">${result.type || 'File'} • ${result.meta || result.size || ''} ${result.location ? '• ' + result.location : ''}</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
});
|
||||
|
||||
resultsDiv.innerHTML = html;
|
||||
resultsDiv.classList.add('active');
|
||||
}
|
||||
|
||||
function highlightMatch(text, searchTerm) {
|
||||
const escaped = escapeRegex(searchTerm);
|
||||
const regex = new RegExp('(' + escaped + ')', 'gi');
|
||||
return text.replace(regex, '<span class="highlight">$1</span>');
|
||||
}
|
||||
|
||||
function escapeRegex(string) {
|
||||
// Escape special regex characters
|
||||
return string.split('').map(function(char) {
|
||||
if ('[]/{}()*+?.-^$|\\'.indexOf(char) !== -1) {
|
||||
return '\\' + char;
|
||||
}
|
||||
return char;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
const input = document.getElementById('searchInput');
|
||||
const resultsDiv = document.getElementById('searchResults');
|
||||
|
||||
if (input) input.value = '';
|
||||
if (resultsDiv) {
|
||||
resultsDiv.classList.remove('active');
|
||||
resultsDiv.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// ===== AUTO-REFRESH TO DETECT CHANGES (works on remote hosting) =====
|
||||
(function() {
|
||||
const REFRESH_INTERVAL = 30000; // 30 seconds
|
||||
const STORAGE_KEY = 'last_index_update_' + window.location.pathname;
|
||||
|
||||
// Store initial load time
|
||||
if (!sessionStorage.getItem(STORAGE_KEY)) {
|
||||
sessionStorage.setItem(STORAGE_KEY, Date.now());
|
||||
}
|
||||
|
||||
// Check for content changes periodically
|
||||
setInterval(function() {
|
||||
fetch(window.location.href, { cache: 'no-store' })
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const newDoc = parser.parseFromString(html, 'text/html');
|
||||
const currentStats = document.querySelector('.stats');
|
||||
const newStats = newDoc.querySelector('.stats');
|
||||
|
||||
// If stats changed (folder/file count), reload the page
|
||||
if (currentStats && newStats && currentStats.innerHTML !== newStats.innerHTML) {
|
||||
console.log('📄 Directory contents changed, refreshing...');
|
||||
window.location.reload();
|
||||
}
|
||||
})
|
||||
.catch(err => console.log('Checking for updates...'));
|
||||
}, REFRESH_INTERVAL);
|
||||
})();
|
||||
</script>
|
||||
<!-- Load shared navbar component -->
|
||||
<script src="../../../../../../../js/navbar-loader.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user