Hugging Face's logo

Spaces:
ghost24
/
sthorus
Running

App Files Community
sthorus / index.html
ghost24's picture
ghost24
Add 3 files
f883959 verified
Raw History Blame Contribute Delete
17 kB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DigiNova - Solutions Digitales Innovantes</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
margin: 0;
overflow: hidden;
background-color: #0a0a0a;
color: #f0f0f0;
font-family: 'Inter', sans-serif;
}
#canvas-container {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.content-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.nav-point {
position: absolute;
width: 12px;
height: 12px;
background-color: #3b82f6;
border-radius: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
pointer-events: auto;
transition: all 0.3s ease;
z-index: 3;
box-shadow: 0 0 15px #3b82f6;
}
.nav-point:hover {
transform: translate(-50%, -50%) scale(1.5);
background-color: #60a5fa;
}
.nav-label {
position: absolute;
color: white;
font-size: 14px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.nav-point:hover + .nav-label {
opacity: 1;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 2rem;
width: 70%;
max-width: 800px;
max-height: 80vh;
overflow-y: auto;
z-index: 100;
pointer-events: auto;
backdrop-filter: blur(10px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.modal-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.close-modal {
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.product-card {
background: rgba(30, 41, 59, 0.5);
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
}
.product-image {
width: 100%;
height: 120px;
object-fit: cover;
}
.product-info {
padding: 1rem;
}
.buy-btn {
display: inline-block;
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.buy-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.main-nav {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1rem;
z-index: 10;
pointer-events: auto;
}
.nav-btn {
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
backdrop-filter: blur(5px);
}
.nav-btn:hover {
background: rgba(59, 130, 246, 0.7);
transform: translateY(-3px);
}
.logo {
position: fixed;
top: 2rem;
left: 2rem;
z-index: 10;
font-size: 1.5rem;
font-weight: 700;
color: white;
pointer-events: auto;
}
.tagline {
position: fixed;
top: 2rem;
right: 2rem;
z-index: 10;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
pointer-events: none;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
</style>
</head>
<body>
<div id="canvas-container"></div>
<div class="content-overlay"></div>
<div class="logo">DigiNova</div>
<div class="tagline">Innovation Digitale Sans Frontières</div>
<!-- Navigation Points -->
<div class="nav-point floating" style="top: 30%; left: 30%;" data-category="ia-money"></div>
<div class="nav-label" style="top: 30%; left: calc(30% + 20px);">IA Money Pack</div>
<div class="nav-point floating" style="top: 40%; left: 70%;" data-category="ia-power"></div>
<div class="nav-label" style="top: 40%; left: calc(70% + 20px);">IA Power Pack</div>
<div class="nav-point floating" style="top: 60%; left: 20%;" data-category="photoshop"></div>
<div class="nav-label" style="top: 60%; left: calc(20% + 20px);">MasterPack Photoshop</div>
<div class="nav-point floating" style="top: 70%; left: 60%;" data-category="creabox"></div>
<div class="nav-label" style="top: 70%; left: calc(60% + 20px);">Creabox</div>
<div class="nav-point floating" style="top: 25%; left: 50%;" data-category="graphiste"></div>
<div class="nav-label" style="top: 25%; left: calc(50% + 20px);">Graphiste Pack</div>
<!-- Main Navigation -->
<div class="main-nav">
<button class="nav-btn" data-section="about">À propos</button>
<button class="nav-btn" data-section="explore">Explorer</button>
<button class="nav-btn" data-section="solutions">Solutions IA</button>
<button class="nav-btn" data-section="testimonials">Témoignages</button>
<button class="nav-btn" data-section="ideas">Idées & Innovations</button>
</div>
<!-- Product Modals -->
<div id="ia-money-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="text-2xl font-bold">IA Money Pack</h2>
<button class="close-modal">&times;</button>
</div>
<p>Découvrez notre pack ultime pour maximiser vos revenus grâce à l'intelligence artificielle. Outils, stratégies et formations exclusives.</p>
<div class="product-grid">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="IA Money Pro" class="product-image">
<div class="product-info">
<h3 class="font-semibold">IA Money Pro</h3>
<p class="text-sm text-gray-300">Formation complète pour monétiser l'IA</p>
<a href="https://ayptqrrs.mychariow.com/" class="buy-btn mt-2">Acheter</a>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1556740738-b6a63ed27c26?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Bot Trader" class="product-image">
<div class="product-info">
<h3 class="font-semibold">Bot Trader</h3>
<p class="text-sm text-gray-300">Assistant IA pour le trading</p>
<a href="https://ayptqrrs.mychariow.com/" class="buy-btn mt-2">Acheter</a>
</div>
</div>
</div>
</div>
</div>
<div id="ia-power-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="text-2xl font-bold">IA Power Pack</h2>
<button class="close-modal">&times;</button>
</div>
<p>Boostez votre productivité avec notre collection d'outils IA puissants. Automatisation, analyse de données et bien plus.</p>
<div class="product-grid">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Power Automate" class="product-image">
<div class="product-info">
<h3 class="font-semibold">Power Automate</h3>
<p class="text-sm text-gray-300">Automatisation des tâches répétitives</p>
<a href="https://ayptqrrs.mychariow.com/" class="buy-btn mt-2">Acheter</a>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Data Insight" class="product-image">
<div class="product-info">
<h3 class="font-semibold">Data Insight</h3>
<p class="text-sm text-gray-300">Analyse avancée de données</p>
<a href="https://ayptqrrs.mychariow.com/" class="buy-btn mt-2">Acheter</a>
</div>
</div>
</div>
</div>
</div>
<!-- Other modals would follow the same pattern -->
<script>
// Three.js Globe Setup
let scene, camera, renderer, globe, controls;
let points = [];
function init() {
// Scene setup
scene = new THREE.Scene();
// Camera setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;
// Renderer setup
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);
// Create globe
createGlobe();
// Add lights
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// Controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;
// Handle window resize
window.addEventListener('resize', onWindowResize, false);
// Add event listeners for navigation points
document.querySelectorAll('.nav-point').forEach(point => {
point.addEventListener('click', () => {
const category = point.getAttribute('data-category');
openModal(category);
// Simple animation - in a real scenario you'd animate the camera
controls.autoRotate = false;
setTimeout(() => {
controls.autoRotate = true;
}, 3000);
});
});
// Add event listeners for navigation buttons
document.querySelectorAll('.nav-btn').forEach(btn => {
btn.addEventListener('click', () => {
const section = btn.getAttribute('data-section');
alert(`Section ${section} sera affichée ici`);
});
});
// Close modal buttons
document.querySelectorAll('.close-modal').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.modal').forEach(modal => {
modal.style.display = 'none';
});
});
});
// Start animation loop
animate();
}
function createGlobe() {
// Create sphere geometry
const geometry = new THREE.SphereGeometry(1, 64, 64);
// Create material with subtle wireframe effect
const material = new THREE.MeshPhongMaterial({
color: 0x111111,
emissive: 0x111111,
specular: 0x111111,
shininess: 5,
wireframe: false,
transparent: true,
opacity: 0.9
});
// Create globe mesh
globe = new THREE.Mesh(geometry, material);
scene.add(globe);
// Add glowing points (cities)
const pointGeometry = new THREE.BufferGeometry();
const pointMaterial = new THREE.PointsMaterial({
color: 0x3b82f6,
size: 0.03,
sizeAttenuation: true
});
const vertices = [];
for (let i = 0; i < 500; i++) {
const vertex = new THREE.Vector3();
vertex.x = (Math.random() - 0.5) * 2;
vertex.y = (Math.random() - 0.5) * 2;
vertex.z = (Math.random() - 0.5) * 2;
vertex.normalize();
vertex.multiplyScalar(1 + (Math.random() * 0.03));
vertices.push(vertex.x, vertex.y, vertex.z);
}
pointGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
const pointsMesh = new THREE.Points(pointGeometry, pointMaterial);
scene.add(pointsMesh);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
function openModal(category) {
document.querySelectorAll('.modal').forEach(modal => {
modal.style.display = 'none';
});
const modal = document.getElementById(`${category}-modal`);
if (modal) {
modal.style.display = 'block';
}
}
// Initialize the scene
init();
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://huggingface.co/proxy/enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://huggingface.co/proxy/enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://huggingface.co/proxy/enzostvs-deepsite.hf.space?remix=ghost24/sthorus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>