Spaces:

victor
/

brutal-design

Running

App Files Files Community

victor HF Staff commited on Jun 2

Commit

d4b99cf

verified ·

1 Parent(s): 418ad75

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +472 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Brutal Design
-emoji: 😻
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: brutal-design
+emoji: 🐳
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,472 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OOOral | Brutalist Architecture</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Archivo+Black&display=swap');
+        body {
+            font-family: 'Space Mono', monospace;
+            background-color: #000;
+            color: #fff;
+            overflow-x: hidden;
+        }
+        .title-font {
+            font-family: 'Archivo Black', sans-serif;
+        }
+        .brutal-border {
+            border: 6px solid #fff;
+            box-shadow: 12px 12px 0 #fff;
+        }
+        .brutal-border-thin {
+            border: 3px solid #fff;
+            box-shadow: 6px 6px 0 #fff;
+        }
+        .brutal-btn {
+            transition: all 0.3s ease;
+        }
+        .brutal-btn:hover {
+            transform: translate(3px, 3px);
+            box-shadow: none;
+        }
+        .project-card {
+            transition: all 0.5s ease;
+        }
+        .project-card:hover {
+            transform: scale(1.03);
+            z-index: 10;
+        }
+        .menu-open {
+            transform: translateX(0);
+        }
+        .menu-closed {
+            transform: translateX(100%);
+        }
+        .text-stroke {
+            -webkit-text-stroke: 2px white;
+            color: transparent;
+        }
+        /* Glitch effect styles */
+        .glitch {
+            position: relative;
+        }
+        .glitch::before,
+        .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .glitch::before {
+            left: 2px;
+            text-shadow: -2px 0 #ff00c1;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim 5s infinite linear alternate-reverse;
+        }
+        .glitch::after {
+            left: -2px;
+            text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim2 5s infinite linear alternate-reverse;
+        }
+        @keyframes glitch-anim {
+            0% { clip: rect(31px, 9999px, 94px, 0); }
+            10% { clip: rect(112px, 9999px, 76px, 0); }
+            20% { clip: rect(85px, 9999px, 77px, 0); }
+            30% { clip: rect(27px, 9999px, 97px, 0); }
+            40% { clip: rect(64px, 9999px, 98px, 0); }
+            50% { clip: rect(61px, 9999px, 85px, 0); }
+            60% { clip: rect(99px, 9999px, 114px, 0); }
+            70% { clip: rect(34px, 9999px, 115px, 0); }
+            80% { clip: rect(98px, 9999px, 129px, 0); }
+            90% { clip: rect(43px, 9999px, 96px, 0); }
+            100% { clip: rect(82px, 9999px, 64px, 0); }
+        }
+        @keyframes glitch-anim2 {
+            0% { clip: rect(65px, 9999px, 119px, 0); }
+            10% { clip: rect(66px, 9999px, 151px, 0); }
+            20% { clip: rect(33px, 9999px, 149px, 0); }
+            30% { clip: rect(147px, 9999px, 132px, 0); }
+            40% { clip: rect(55px, 9999px, 75px, 0); }
+            50% { clip: rect(122px, 9999px, 66px, 0); }
+            60% { clip: rect(149px, 9999px, 144px, 0); }
+            70% { clip: rect(99px, 9999px, 136px, 0); }
+            80% { clip: rect(118px, 9999px, 103px, 0); }
+            90% { clip: rect(15px, 9999px, 75px, 0); }
+            100% { clip: rect(58px, 9999px, 149px, 0); }
+        }
+        .marquee {
+            animation: marquee 20s linear infinite;
+        }
+        @keyframes marquee {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 bg-black p-4 flex justify-between items-center border-b-4 border-white">
+        <div class="title-font text-3xl">OOOral</div>
+        <div class="hidden md:flex space-x-8">
+            <a href="#work" class="hover:text-yellow-400 transition">Work</a>
+            <a href="#about" class="hover:text-yellow-400 transition">About</a>
+            <a href="#services" class="hover:text-yellow-400 transition">Services</a>
+            <a href="#contact" class="hover:text-yellow-400 transition">Contact</a>
+        </div>
+        <button id="menuBtn" class="md:hidden text-2xl">
+            <i class="fas fa-bars"></i>
+        </button>
+    </nav>
+    <!-- Mobile Menu -->
+    <div id="mobileMenu" class="fixed top-0 right-0 h-full w-3/4 bg-black border-l-4 border-white z-50 p-8 transition-transform duration-300 ease-in-out menu-closed">
+        <div class="flex justify-between items-center mb-12">
+            <div class="title-font text-3xl">OOOral</div>
+            <button id="closeMenuBtn" class="text-2xl">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="flex flex-col space-y-8 text-2xl">
+            <a href="#work" class="hover:text-yellow-400 transition">Work</a>
+            <a href="#about" class="hover:text-yellow-400 transition">About</a>
+            <a href="#services" class="hover:text-yellow-400 transition">Services</a>
+            <a href="#contact" class="hover:text-yellow-400 transition">Contact</a>
+        </div>
+    </div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative overflow-hidden pt-16">
+        <div class="absolute inset-0 bg-black opacity-70"></div>
+        <video autoplay muted loop class="absolute w-full h-full object-cover">
+            <source src="https://assets.mixkit.co/videos/preview/mixkit-concrete-building-under-construction-31200-large.mp4" type="video/mp4">
+        </video>
+        <div class="container mx-auto px-6 relative z-10 text-center">
+            <h1 class="title-font text-6xl md:text-9xl mb-6 text-white">
+                <span class="glitch text-stroke" data-text="BRUTAL">BRUTAL</span> <span class="text-yellow-400">DESIGN</span>
+            </h1>
+            <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto">We create uncompromising architectural statements that challenge conventional aesthetics.</p>
+            <a href="#work" class="brutal-border-thin bg-yellow-400 text-black px-8 py-4 text-xl font-bold inline-block brutal-btn">VIEW OUR WORK</a>
+        </div>
+    </section>
+    <!-- Marquee -->
+    <div class="bg-yellow-400 text-black py-4 overflow-hidden">
+        <div class="marquee whitespace-nowrap">
+            <span class="text-2xl font-bold mx-8">RAW MATERIALS • UNFILTERED DESIGN • CONCRETE POETRY • FUNCTIONAL BRUTALITY • RAW MATERIALS • UNFILTERED DESIGN • CONCRETE POETRY • FUNCTIONAL BRUTALITY •</span>
+        </div>
+    </div>
+    <!-- Work Section -->
+    <section id="work" class="py-20 bg-black">
+        <div class="container mx-auto px-6">
+            <h2 class="title-font text-4xl md:text-6xl mb-16 text-center">SELECTED PROJECTS</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Project 1 -->
+                <div class="project-card brutal-border bg-black p-6">
+                    <div class="h-64 bg-gray-800 mb-6 flex items-center justify-center">
+                        <span class="text-4xl">🏗️</span>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-2">THE BUNKER</h3>
+                    <p class="text-gray-400 mb-4">Berlin, Germany</p>
+                    <p class="mb-4">A reinforced concrete residential complex designed for the post-apocalyptic urban dweller.</p>
+                    <a href="#" class="text-yellow-400 font-bold">EXPLORE →</a>
+                </div>
+                <!-- Project 2 -->
+                <div class="project-card brutal-border bg-black p-6">
+                    <div class="h-64 bg-gray-800 mb-6 flex items-center justify-center">
+                        <span class="text-4xl">🏢</span>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-2">MONOLITH TOWER</h3>
+                    <p class="text-gray-400 mb-4">Moscow, Russia</p>
+                    <p class="mb-4">A 40-story office building with exposed concrete surfaces and minimal fenestration.</p>
+                    <a href="#" class="text-yellow-400 font-bold">EXPLORE →</a>
+                </div>
+                <!-- Project 3 -->
+                <div class="project-card brutal-border bg-black p-6">
+                    <div class="h-64 bg-gray-800 mb-6 flex items-center justify-center">
+                        <span class="text-4xl">🏛️</span>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-2">THE FORTRESS</h3>
+                    <p class="text-gray-400 mb-4">London, UK</p>
+                    <p class="mb-4">A cultural center with massive concrete forms and fortress-like appearance.</p>
+                    <a href="#" class="text-yellow-400 font-bold">EXPLORE →</a>
+                </div>
+            </div>
+            <div class="text-center mt-16">
+                <a href="#" class="brutal-border-thin bg-white text-black px-8 py-4 text-xl font-bold inline-block brutal-btn">VIEW ALL PROJECTS</a>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-white text-black">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
+                    <h2 class="title-font text-4xl md:text-6xl mb-8">WE ARE OOOral</h2>
+                    <p class="text-lg mb-6">Founded in 2010, OOOral is an architecture practice dedicated to the brutalist tradition. We believe in raw, honest materials and forms that serve their purpose without decorative pretense.</p>
+                    <p class="text-lg mb-6">Our work is characterized by massive forms, geometric shapes, and a monochrome palette of concrete, steel, and glass.</p>
+                    <p class="text-lg">We operate globally with offices in Berlin, Moscow, and Tokyo.</p>
+                </div>
+                <div class="md:w-1/2 brutal-border bg-black text-white p-8">
+                    <h3 class="title-font text-3xl mb-6 text-yellow-400">OUR PHILOSOPHY</h3>
+                    <ul class="space-y-4">
+                        <li class="flex items-start">
+                            <span class="text-yellow-400 mr-4">■</span>
+                            <span>Form follows function, stripped to its essence</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-yellow-400 mr-4">■</span>
+                            <span>Materials should be honest and unadorned</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-yellow-400 mr-4">■</span>
+                            <span>Architecture as a social statement</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-yellow-400 mr-4">■</span>
+                            <span>Brutality as beauty</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-yellow-400 mr-4">■</span>
+                            <span>Design that withstands time and trends</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-20 bg-black text-white">
+        <div class="container mx-auto px-6">
+            <h2 class="title-font text-4xl md:text-6xl mb-16 text-center">OUR SERVICES</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Service 1 -->
+                <div class="brutal-border-thin p-8">
+                    <div class="text-4xl mb-6 text-yellow-400">01</div>
+                    <h3 class="text-2xl font-bold mb-4">ARCHITECTURAL DESIGN</h3>
+                    <p>From concept to completion, we design buildings that make bold statements while serving their intended purpose with uncompromising functionality.</p>
+                </div>
+                <!-- Service 2 -->
+                <div class="brutal-border-thin p-8">
+                    <div class="text-4xl mb-6 text-yellow-400">02</div>
+                    <h3 class="text-2xl font-bold mb-4">URBAN PLANNING</h3>
+                    <p>We approach urban spaces with the same brutalist philosophy, creating cityscapes that are efficient, honest, and visually striking.</p>
+                </div>
+                <!-- Service 3 -->
+                <div class="brutal-border-thin p-8">
+                    <div class="text-4xl mb-6 text-yellow-400">03</div>
+                    <h3 class="text-2xl font-bold mb-4">INTERVENTION DESIGN</h3>
+                    <p>Transforming existing structures with brutalist interventions that create dialogue between old and new, soft and hard.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Stats Section -->
+    <section class="py-20 bg-yellow-400 text-black">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+                <div class="brutal-border-thin p-6">
+                    <div class="title-font text-4xl md:text-6xl mb-2">42</div>
+                    <p class="text-lg">PROJECTS COMPLETED</p>
+                </div>
+                <div class="brutal-border-thin p-6">
+                    <div class="title-font text-4xl md:text-6xl mb-2">16</div>
+                    <p class="text-lg">COUNTRIES</p>
+                </div>
+                <div class="brutal-border-thin p-6">
+                    <div class="title-font text-4xl md:text-6xl mb-2">3</div>
+                    <p class="text-lg">CONTINENTS</p>
+                </div>
+                <div class="brutal-border-thin p-6">
+                    <div class="title-font text-4xl md:text-6xl mb-2">∞</div>
+                    <p class="text-lg">TONS OF CONCRETE</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-black text-white">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row">
+                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
+                    <h2 class="title-font text-4xl md:text-6xl mb-8">CONTACT US</h2>
+                    <p class="text-lg mb-8">Ready to discuss your brutalist vision? We're currently accepting new projects for 2024.</p>
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <span class="text-yellow-400 mr-4 mt-1"><i class="fas fa-map-marker-alt"></i></span>
+                            <div>
+                                <h4 class="font-bold">OFFICES</h4>
+                                <p>Berlin • Moscow • Tokyo</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <span class="text-yellow-400 mr-4 mt-1"><i class="fas fa-envelope"></i></span>
+                            <div>
+                                <h4 class="font-bold">EMAIL</h4>
+                                <p>[email protected]</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <span class="text-yellow-400 mr-4 mt-1"><i class="fas fa-phone"></i></span>
+                            <div>
+                                <h4 class="font-bold">PHONE</h4>
+                                <p>+49 30 1234567 (Berlin)</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <form class="brutal-border p-8">
+                        <div class="mb-6">
+                            <label for="name" class="block mb-2 font-bold">NAME</label>
+                            <input type="text" id="name" class="w-full bg-black border-b-2 border-white py-2 px-1 focus:outline-none focus:border-yellow-400">
+                        </div>
+                        <div class="mb-6">
+                            <label for="email" class="block mb-2 font-bold">EMAIL</label>
+                            <input type="email" id="email" class="w-full bg-black border-b-2 border-white py-2 px-1 focus:outline-none focus:border-yellow-400">
+                        </div>
+                        <div class="mb-6">
+                            <label for="project" class="block mb-2 font-bold">PROJECT TYPE</label>
+                            <select id="project" class="w-full bg-black border-b-2 border-white py-2 px-1 focus:outline-none focus:border-yellow-400">
+                                <option value="">Select...</option>
+                                <option value="residential">Residential</option>
+                                <option value="commercial">Commercial</option>
+                                <option value="cultural">Cultural</option>
+                                <option value="urban">Urban Planning</option>
+                                <option value="other">Other</option>
+                            </select>
+                        </div>
+                        <div class="mb-6">
+                            <label for="message" class="block mb-2 font-bold">MESSAGE</label>
+                            <textarea id="message" rows="4" class="w-full bg-black border-b-2 border-white py-2 px-1 focus:outline-none focus:border-yellow-400"></textarea>
+                        </div>
+                        <button type="submit" class="brutal-border-thin bg-yellow-400 text-black px-8 py-4 text-xl font-bold brutal-btn w-full">SUBMIT</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-black text-white border-t-4 border-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="title-font text-3xl mb-6 md:mb-0">OOOral</div>
+                <div class="flex space-x-6 mb-6 md:mb-0">
+                    <a href="#" class="text-2xl hover:text-yellow-400"><i class="fab fa-instagram"></i></a>
+                    <a href="#" class="text-2xl hover:text-yellow-400"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="text-2xl hover:text-yellow-400"><i class="fab fa-linkedin"></i></a>
+                </div>
+                <div class="text-center md:text-right">
+                    <p>© 2023 OOOral Architecture</p>
+                    <p class="text-gray-500 text-sm">All rights reserved</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        const menuBtn = document.getElementById('menuBtn');
+        const closeMenuBtn = document.getElementById('closeMenuBtn');
+        const mobileMenu = document.getElementById('mobileMenu');
+        menuBtn.addEventListener('click', () => {
+            mobileMenu.classList.remove('menu-closed');
+            mobileMenu.classList.add('menu-open');
+        });
+        closeMenuBtn.addEventListener('click', () => {
+            mobileMenu.classList.remove('menu-open');
+            mobileMenu.classList.add('menu-closed');
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                // Close mobile menu if open
+                mobileMenu.classList.remove('menu-open');
+                mobileMenu.classList.add('menu-closed');
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+        // Form submission
+        const contactForm = document.querySelector('form');
+        if (contactForm) {
+            contactForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                alert('Thank you for your message. We will contact you soon.');
+                contactForm.reset();
+            });
+        }
+        // Animation on scroll
+        const animateOnScroll = () => {
+            const elements = document.querySelectorAll('.project-card, .brutal-border-thin');
+            elements.forEach(element => {
+                const elementPosition = element.getBoundingClientRect().top;
+                const screenPosition = window.innerHeight / 1.3;
+                if (elementPosition < screenPosition) {
+                    element.style.opacity = '1';
+                    element.style.transform = 'translateY(0)';
+                }
+            });
+        };
+        // Set initial state
+        document.querySelectorAll('.project-card, .brutal-border-thin').forEach(el => {
+            el.style.opacity = '0';
+            el.style.transform = 'translateY(20px)';
+            el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+        });
+        window.addEventListener('scroll', animateOnScroll);
+        window.addEventListener('load', animateOnScroll);
+    </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://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://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=victor/brutal-design" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ brutalist architecture agency website name: OOOral
2	+ add a glitch effect on the main section